cdransf/coryd.dev-eleventy
Archived
1
0
Fork 0
Code Issues Pull requests Projects Releases Packages Wiki Activity Actions

fix: music now playing fallback; organize styles

Browse source
This commit is contained in:
Cory Dransfeldt 2024-08-11 11:28:11 -07:00
parent d99186caee
commit 32c6bc3ba2
No known key found for this signature in database
5 changed files with 49 additions and 50 deletions
Show stats Download patch file Download diff file Expand all files Collapse all files

4
package-lock.json generated
View file

@ -1,12 +1,12 @@
{
"name": "coryd.dev",
"version": "22.1.2",
"version": "22.1.4",
"lockfileVersion": 3,
"requires": true,
"packages": {
"": {
"name": "coryd.dev",
"version": "22.1.2",
"version": "22.1.4",
"license": "MIT",
"dependencies": {
"@cdransf/api-text": "^1.5.0",

2
package.json
View file

@ -1,6 +1,6 @@
{
"name": "coryd.dev",
"version": "22.1.3",
"version": "22.1.4",
"description": "The source for my personal site. Built using 11ty (and other tools).",
"type": "module",
"scripts": {

47
src/assets/styles/components/buttons.css
View file

@ -1,50 +1,5 @@
/* music - chart toggle styles */
#tracks-recent ~ .tracks-recent,
#tracks-window ~ .tracks-window {
display: none;
}
@import url('./tab-buttons.css');
#tracks-recent:checked ~ .tracks-recent,
#tracks-window:checked ~ .tracks-window {
display: block;
}
input[id="tracks-recent"] ~ [for="tracks-recent"],
input[id="tracks-window"] ~ [for="tracks-window"] {
margin-bottom: var(--sizing-lg);
}
#tracks-recent:not(:checked) ~ [for="tracks-recent"]:hover,
#tracks-recent:not(:checked) ~ [for="tracks-recent"]:active,
#tracks-window:not(:checked) ~ [for="tracks-window"]:hover,
#tracks-window:not(:checked) ~ [for="tracks-window"]:active {
color: var(--accent-color-hover);
background: transparent;
}
#tracks-recent:not(:checked) ~ [for="tracks-recent"]:focus,
#tracks-recent:not(:checked) ~ [for="tracks-recent"]:focus-within,
#tracks-window:not(:checked) ~ [for="tracks-window"]:focus,
#tracks-window:not(:checked) ~ [for="tracks-window"]:focus-within {
transition-property: none;
outline: 2px dashed var(--accent-color);
border: 0;
}
#tracks-recent:checked ~ [for="tracks-recent"],
#tracks-window:checked ~ [for="tracks-window"] {
cursor: not-allowed;
border-color: var(--accent-color);
background-color: var(--accent-color);
}
#tracks-recent:not(:checked) ~ [for="tracks-recent"],
#tracks-window:not(:checked) ~ [for="tracks-window"] {
color: var(--accent-color);
background: transparent;
}
/* generic button styles */
button,
.button {
appearance: none;

44
src/assets/styles/components/tab-buttons.css Normal file
View file

@ -0,0 +1,44 @@
#tracks-recent ~ .tracks-recent,
#tracks-window ~ .tracks-window {
display: none;
}
#tracks-recent:checked ~ .tracks-recent,
#tracks-window:checked ~ .tracks-window {
display: block;
}
input[id="tracks-recent"] ~ [for="tracks-recent"],
input[id="tracks-window"] ~ [for="tracks-window"] {
margin-bottom: var(--sizing-lg);
}
#tracks-recent:not(:checked) ~ [for="tracks-recent"]:hover,
#tracks-recent:not(:checked) ~ [for="tracks-recent"]:active,
#tracks-window:not(:checked) ~ [for="tracks-window"]:hover,
#tracks-window:not(:checked) ~ [for="tracks-window"]:active {
color: var(--accent-color-hover);
background: transparent;
}
#tracks-recent:not(:checked) ~ [for="tracks-recent"]:focus,
#tracks-recent:not(:checked) ~ [for="tracks-recent"]:focus-within,
#tracks-window:not(:checked) ~ [for="tracks-window"]:focus,
#tracks-window:not(:checked) ~ [for="tracks-window"]:focus-within {
transition-property: none;
outline: 2px dashed var(--accent-color);
border: 0;
}
#tracks-recent:checked ~ [for="tracks-recent"],
#tracks-window:checked ~ [for="tracks-window"] {
cursor: not-allowed;
border-color: var(--accent-color);
background-color: var(--accent-color);
}
#tracks-recent:not(:checked) ~ [for="tracks-recent"],
#tracks-window:not(:checked) ~ [for="tracks-window"] {
color: var(--accent-color);
background: transparent;
}

2
src/pages/dynamic/music/index.html
View file

@ -10,7 +10,7 @@ schema: music-index
<p>I've listened to <strong class="highlight-text">{{ music.week.artists.size }} artists</strong>, <strong class="highlight-text">{{ music.week.albums.size }} albums</strong> and <strong class="highlight-text">{{ music.week.totalTracks }} tracks</strong> this week. Most of that has been {{ music.week.genres | sortByPlaysDescending: "plays" | genreStrings: "genre" | mediaLinks: "genre", 5 }}.</p>
<p><strong class="highlight-text">See more of the</strong> <a href="/music/artists/this-week/">artists</a>, <a href="/music/albums/this-week/">albums</a> or <a href="/music/tracks/this-week/">tracks</a> I've listened to this week. <strong class="highlight-text">Or take a look at what I've listened to</strong> <a href="/music/this-month">this month</a> or <a href="/music/three-months">over the last 3 months</a>.</p>
<p><a href="/music/concerts">You can also take a look at the concerts I've been to.</a></p>
{% render "partials/blocks/now-playing.liquid" %}
{% render "partials/blocks/now-playing.liquid", music:music %}
<hr />
<h3 id="artists" class="section-header no-top-margin">
<a class="link-icon" href="/music/artists/this-week">