From ee9b7aa7785a444c819ea624e6d2e602da568315 Mon Sep 17 00:00:00 2001 From: Cory Dransfeldt Date: Wed, 19 Jun 2024 15:39:06 -0700 Subject: [PATCH] chore: re-arrange some dom nodes for focus presentation --- package-lock.json | 4 +-- package.json | 2 +- src/assets/styles/base/index.css | 10 +++--- src/assets/styles/pages/books.css | 1 + src/assets/styles/pages/music.css | 6 ++-- src/assets/styles/pages/watching.css | 1 + src/pages/main/music/index.html | 24 +++++++-------- src/pages/main/music/periods/3-months.html | 24 +++++++-------- src/pages/main/music/periods/this-month.html | 24 +++++++-------- src/pages/main/watching/index.html | 32 ++++++++++---------- 10 files changed, 67 insertions(+), 61 deletions(-) diff --git a/package-lock.json b/package-lock.json index 62d55ee5..30b20fd1 100644 --- a/package-lock.json +++ b/package-lock.json @@ -1,12 +1,12 @@ { "name": "coryd.dev", - "version": "19.5.9", + "version": "19.5.10", "lockfileVersion": 3, "requires": true, "packages": { "": { "name": "coryd.dev", - "version": "19.5.9", + "version": "19.5.10", "license": "MIT", "dependencies": { "@cdransf/api-text": "^1.4.0", diff --git a/package.json b/package.json index 00154541..33c4da46 100644 --- a/package.json +++ b/package.json @@ -1,6 +1,6 @@ { "name": "coryd.dev", - "version": "19.5.9", + "version": "19.5.10", "description": "The source for my personal site. Built using 11ty.", "type": "module", "scripts": { diff --git a/src/assets/styles/base/index.css b/src/assets/styles/base/index.css index d15eae4d..e7668a2d 100644 --- a/src/assets/styles/base/index.css +++ b/src/assets/styles/base/index.css @@ -307,6 +307,12 @@ a svg:focus { stroke: var(--accent-color-hover); } +a.link-icon { + display: inline-flex; + align-items: center; + gap: var(--sizing-xs); +} + a.link-icon svg { stroke: var(--accent-color); } @@ -318,10 +324,6 @@ a.link-icon:focus svg { stroke: var(--accent-color-hover); } -.icon--bold > svg { - stroke-width: var(--stroke-width-bold); -} - .menu-primary .active, .menu-primary .active svg, nav .active, diff --git a/src/assets/styles/pages/books.css b/src/assets/styles/pages/books.css index a1fdc675..ae39a977 100644 --- a/src/assets/styles/pages/books.css +++ b/src/assets/styles/pages/books.css @@ -82,6 +82,7 @@ } .book-focus { + margin-top: var(--sizing-base); border-bottom: 0; & .book-display { diff --git a/src/assets/styles/pages/music.css b/src/assets/styles/pages/music.css index 1318e091..72cc0ec4 100644 --- a/src/assets/styles/pages/music.css +++ b/src/assets/styles/pages/music.css @@ -4,6 +4,8 @@ } .artist-focus { + margin-top: var(--sizing-base); + & img { border: 1px solid var(--accent-color); width: 100%; @@ -14,13 +16,13 @@ display: flex; flex-direction: column; gap: var(--sizing-xs); - margin: var(--sizing-base) 0; + margin-bottom: var(--sizing-base); & .artist-meta { display: flex; flex-direction: column; gap: var(--sizing-sm); - margin-top: var(--sizing-md); + margin-top: var(--sizing-base); & p { margin: 0; diff --git a/src/assets/styles/pages/watching.css b/src/assets/styles/pages/watching.css index 9687272c..2c11a347 100644 --- a/src/assets/styles/pages/watching.css +++ b/src/assets/styles/pages/watching.css @@ -115,6 +115,7 @@ } .watching-focus { + margin-top: var(--sizing-base); border-bottom: 0; & .watching-meta { diff --git a/src/pages/main/music/index.html b/src/pages/main/music/index.html index a43bcd8c..f6b342a5 100644 --- a/src/pages/main/music/index.html +++ b/src/pages/main/music/index.html @@ -15,27 +15,27 @@ schema: music-index

See more of the artists, albums or tracks I've listened to this week. Or take a look at what I've listened to this month or over the last 3 months

{% render "partials/widgets/now-playing.liquid" %}
- -

+

+ {% tablericon "microphone-2" "Artists" %} Artists -

- + + {% render "partials/media/grid.liquid", data:music.week.artists, shape: "square", count: 8, loading: "eager" %} - -

+

+ {% tablericon "vinyl" "Albums" %} Albums -

- + + {% render "partials/media/grid.liquid", data:music.week.albums, shape: "square", count: 8 %}
- -

+

+ {% tablericon "playlist" "Tracks" %} Tracks -

- + +
diff --git a/src/pages/main/music/periods/3-months.html b/src/pages/main/music/periods/3-months.html index dc4d1522..9fab998d 100644 --- a/src/pages/main/music/periods/3-months.html +++ b/src/pages/main/music/periods/3-months.html @@ -11,24 +11,24 @@ schema: music-period

I've listened to {{ music.threeMonth.artists.size }} artists, {{ music.threeMonth.albums.size }} albums and {{ music.threeMonth.totalTracks }} tracks over the last 3 months. Most of that has been {{ music.threeMonth.genres | sortByPlaysDescending: "plays" | genreStrings: "genre" | mediaLinks: "genre", 5 }}.

See more of the artists, albums or tracks I've listened to over the last 3 months. Or take a look at what I've listened to this week or this month.

- -

+

+ {% tablericon "microphone-2" "Artists" %} Artists -

- + + {% render "partials/media/grid.liquid", data:music.threeMonth.artists, shape: "square", count: 8, loading: "eager" %} - -

+

+ {% tablericon "vinyl" "Albums" %} Albums -

- + + {% render "partials/media/grid.liquid", data:music.threeMonth.albums, shape: "square", count: 8 %} - -

+

+ {% tablericon "playlist" "Tracks" %} Tracks -

- + + {% render "partials/media/music/chart.liquid", data:music.threeMonth.tracks, mostPlayed:music.threeMonth.tracks[0].plays, count: 10 %} \ No newline at end of file diff --git a/src/pages/main/music/periods/this-month.html b/src/pages/main/music/periods/this-month.html index 0c10f18c..a72f6778 100644 --- a/src/pages/main/music/periods/this-month.html +++ b/src/pages/main/music/periods/this-month.html @@ -11,24 +11,24 @@ schema: music-period

I've listened to {{ music.month.artists.size }} artists, {{ music.month.albums.size }} albums and {{ music.month.totalTracks }} tracks this month. Most of that has been {{ music.month.genres | sortByPlaysDescending: "plays" | genreStrings: "genre" | mediaLinks: "genre", 5 }}.

See more of the artists, albums or tracks I've listened to this month. Or take a look at what I've listened to this week or over the last 3 months.

- -

+

+ {% tablericon "microphone-2" "Artists" %} Artists -

- + + {% render "partials/media/grid.liquid", data:music.month.artists, shape: "square", count: 8, loading: "eager" %} - -

+

+ {% tablericon "vinyl" "Albums" %} Albums -

- + + {% render "partials/media/grid.liquid", data:music.month.albums, shape: "square", count: 8 %} - -

+

+ {% tablericon "playlist" "Tracks" %} Tracks -

- + + {% render "partials/media/music/chart.liquid", data:music.month.tracks, mostPlayed:music.month.tracks[0].plays, count: 10 %} \ No newline at end of file diff --git a/src/pages/main/watching/index.html b/src/pages/main/watching/index.html index 9701b5f6..c1347baa 100644 --- a/src/pages/main/watching/index.html +++ b/src/pages/main/watching/index.html @@ -12,33 +12,33 @@ schema: watching

Here's all of the TV and movies I've been watching presented in what is (hopefully) an organized fashion. You can also take a look at the movies and shows I'm planning to watch.

{% render "partials/banners/rss.liquid", url: "https://feedpress.me/coryd-movies", text: "Subscribe to my movies feed or follow along on this page" %}
- -

+

+ {% tablericon "movie" "Recent movies" %} Recent movies -

- + + {% render "partials/media/grid.liquid", data:movies.recentlyWatched, shape: "vertical", count: 6 %} - -

+

+ {% tablericon "device-tv" "Recent shows" %} Recent shows -

- + + {% render "partials/media/grid.liquid", data:tv.recentlyWatched, shape: "vertical", count: 6 %} - -

+

+ {% tablericon "star" "Favorite movies" %} Favorite movies -

- + + {% assign favoriteMovies = movies.favorites | featuredWatching: 6 %} {% render "partials/media/watching/grid.liquid", mediaItems:favoriteMovies, count: 6 %} - -

+

+ {% tablericon "star" "Favorite shows" %} Favorite shows -

- + + {% assign favoriteShows = tv.favorites | featuredWatching: 6 %} {% render "partials/media/watching/grid.liquid", mediaItems:favoriteShows, count: 6 %} \ No newline at end of file