From ee9b7aa7785a444c819ea624e6d2e602da568315 Mon Sep 17 00:00:00 2001
From: Cory Dransfeldt <hi@coryd.dev>
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
<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>
{% render "partials/widgets/now-playing.liquid" %}
<hr />
-<a class="link-icon flex-centered" href="/music/artists/this-week">
- <h2 id="artists" class="section-header no-top-margin flex-centered">
+<h2 id="artists" class="section-header no-top-margin">
+ <a class="link-icon" href="/music/artists/this-week">
{% tablericon "microphone-2" "Artists" %}
Artists
- </h2>
-</a>
+ </a>
+</h2>
{% render "partials/media/grid.liquid", data:music.week.artists, shape: "square", count: 8, loading: "eager" %}
-<a class="link-icon flex-centered" href="/music/albums/this-week">
- <h2 id="albums" class="section-header reduced-margin flex-centered">
+<h2 id="albums" class="section-header reduced-margin">
+ <a class="link-icon" href="/music/albums/this-week">
{% tablericon "vinyl" "Albums" %}
Albums
- </h2>
-</a>
+ </a>
+</h2>
{% render "partials/media/grid.liquid", data:music.week.albums, shape: "square", count: 8 %}
<div class="section-header-wrapper">
- <a class="link-icon flex-centered" href="/music/tracks/this-week">
- <h2 id="tracks" class="section-header reduced-margin flex-centered">
+ <h2 id="tracks" class="section-header reduced-margin">
+ <a class="link-icon" href="/music/tracks/this-week">
{% tablericon "playlist" "Tracks" %}
Tracks
- </h2>
- </a>
+ </a>
+ </h2>
<div class="section-header-buttons reduced-margin client-side">
<button class="small active" data-toggle="tracks-recent">Recent</button>
<button class="small secondary" data-toggle="tracks-window">This week</button>
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
<p>I've listened to <strong class="highlight-text">{{ music.threeMonth.artists.size }} artists</strong>, <strong class="highlight-text">{{ music.threeMonth.albums.size }} albums</strong> and <strong class="highlight-text">{{ music.threeMonth.totalTracks }} tracks</strong> over the last 3 months. Most of that has been {{ music.threeMonth.genres | sortByPlaysDescending: "plays" | genreStrings: "genre" | mediaLinks: "genre", 5 }}.</p>
<p><strong class="highlight-text">See more of the</strong> <a href="/music/artists/three-months/">artists</a>, <a href="/music/albums/three-months/">albums</a> or <a href="/music/tracks/three-months/">tracks</a> I've listened to over the last 3 months. <strong class="highlight-text">Or take a look at what I've listened to</strong> <a href="/music">this week</a> or <a href="/music/this-month">this month</a>.</p>
<hr />
-<a class="link-icon flex-centered" href="/music/artists/three-months">
- <h2 id="artists" class="section-header no-top-margin flex-centered">
+<h2 id="artists" class="section-header no-top-margin">
+ <a class="link-icon" href="/music/artists/three-months">
{% tablericon "microphone-2" "Artists" %}
Artists
- </h2>
-</a>
+ </a>
+</h2>
{% render "partials/media/grid.liquid", data:music.threeMonth.artists, shape: "square", count: 8, loading: "eager" %}
-<a class="link-icon flex-centered" href="/music/albums/three-months">
- <h2 id="albums" class="section-header reduced-margin flex-centered">
+<h2 id="albums" class="section-header reduced-margin">
+ <a class="link-icon" href="/music/albums/three-months">
{% tablericon "vinyl" "Albums" %}
Albums
- </h2>
-</a>
+ </a>
+</h2>
{% render "partials/media/grid.liquid", data:music.threeMonth.albums, shape: "square", count: 8 %}
-<a class="link-icon flex-centered" href="/music/tracks/three-months">
- <h2 id="tracks" class="section-header reduced-margin flex-centered">
+<h2 id="tracks" class="section-header reduced-margin">
+ <a class="link-icon" href="/music/tracks/three-months">
{% tablericon "playlist" "Tracks" %}
Tracks
- </h2>
-</a>
+ </a>
+</h2>
{% 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
<p>I've listened to <strong class="highlight-text">{{ music.month.artists.size }} artists</strong>, <strong class="highlight-text">{{ music.month.albums.size }} albums</strong> and <strong class="highlight-text">{{ music.month.totalTracks }} tracks</strong> this month. Most of that has been {{ music.month.genres | sortByPlaysDescending: "plays" | genreStrings: "genre" | mediaLinks: "genre", 5 }}.</p>
<p><strong class="highlight-text">See more of the</strong> <a href="/music/artists/this-month/">artists</a>, <a href="/music/albums/this-month/">albums</a> or <a href="/music/tracks/this-month/">tracks</a> I've listened to this month. <strong class="highlight-text">Or take a look at what I've listened to</strong> <a href="/music">this week</a> or <a href="/music/three-months">over the last 3 months</a>.</p>
<hr />
-<a class="link-icon flex-centered" href="/music/artists/this-month">
- <h2 id="artists" class="section-header no-top-margin flex-centered">
+<h2 id="artists" class="section-header no-top-margin">
+ <a class="link-icon" href="/music/artists/this-month">
{% tablericon "microphone-2" "Artists" %}
Artists
- </h2>
-</a>
+ </a>
+</h2>
{% render "partials/media/grid.liquid", data:music.month.artists, shape: "square", count: 8, loading: "eager" %}
-<a class="link-icon flex-centered" href="/music/albums/this-month">
- <h2 id="albums" class="section-header reduced-margin flex-centered">
+<h2 id="albums" class="section-header reduced-margin">
+ <a class="link-icon" href="/music/albums/this-month">
{% tablericon "vinyl" "Albums" %}
Albums
- </h2>
-</a>
+ </a>
+</h2>
{% render "partials/media/grid.liquid", data:music.month.albums, shape: "square", count: 8 %}
-<a class="link-icon flex-centered" href="/music/tracks/this-month">
- <h2 id="tracks" class="section-header reduced-margin flex-centered">
+<h2 id="tracks" class="section-header reduced-margin">
+ <a class="link-icon" href="/music/tracks/this-month">
{% tablericon "playlist" "Tracks" %}
Tracks
- </h2>
-</a>
+ </a>
+</h2>
{% 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
<p>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 <a href="/watching/movies-to-watch">movies</a> and <a href="/watching/shows-to-watch">shows</a> I'm planning to watch.</p>
{% render "partials/banners/rss.liquid", url: "https://feedpress.me/coryd-movies", text: "Subscribe to my movies feed or follow along on this page" %}
<hr />
-<a class="link-icon flex-centered" href="/watching/recent/movies">
- <h2 id="movies" class="section-header no-top-margin flex-centered">
+<h2 id="movies" class="section-header no-top-margin">
+ <a class="link-icon" href="/watching/recent/movies">
{% tablericon "movie" "Recent movies" %}
Recent movies
- </h2>
-</a>
+ </a>
+</h2>
{% render "partials/media/grid.liquid", data:movies.recentlyWatched, shape: "vertical", count: 6 %}
-<a class="link-icon flex-centered" href="/watching/recent/shows">
- <h2 id="tv" class="section-header reduced-margin flex-centered">
+<h2 id="tv" class="section-header reduced-margin">
+ <a class="link-icon" href="/watching/recent/shows">
{% tablericon "device-tv" "Recent shows" %}
Recent shows
- </h2>
-</a>
+ </a>
+</h2>
{% render "partials/media/grid.liquid", data:tv.recentlyWatched, shape: "vertical", count: 6 %}
-<a class="link-icon flex-centered" href="/watching/favorite-movies">
- <h2 id="favorite-movies" class="section-header reduced-margin flex-centered">
+<h2 id="favorite-movies" class="section-header reduced-margin">
+ <a class="link-icon" href="/watching/favorite-movies">
{% tablericon "star" "Favorite movies" %}
Favorite movies
- </h2>
-</a>
+ </a>
+</h2>
{% assign favoriteMovies = movies.favorites | featuredWatching: 6 %}
{% render "partials/media/watching/grid.liquid", mediaItems:favoriteMovies, count: 6 %}
-<a class="link-icon flex-centered" href="/watching/favorite-shows">
- <h2 id="favorite-shows" class="section-header reduced-margin flex-centered">
+<h2 id="favorite-shows" class="section-header reduced-margin">
+ <a class="link-icon" href="/watching/favorite-shows">
{% tablericon "star" "Favorite shows" %}
Favorite shows
- </h2>
-</a>
+ </a>
+</h2>
{% assign favoriteShows = tv.favorites | featuredWatching: 6 %}
{% render "partials/media/watching/grid.liquid", mediaItems:favoriteShows, count: 6 %}
\ No newline at end of file