fix: styles

package-lock.json

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

package.json

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

src/assets/styles/base/index.css

@@ -178,6 +178,17 @@ a:has(svg):focus-within {
   outline: none;
 }
 
+a.icon-link:focus,
+a.icon-link:focus-within {
+  outline: var(--outline-default);
+  border-radius: var(--border-radius-slight);
+  text-decoration: none;
+
+  & svg {
+    outline: none;
+  }
+}
+
 a:hover,
 a:focus,
 a:active,

src/assets/styles/components/modal.css

@@ -44,6 +44,7 @@
   display: inline-flex;
   vertical-align: middle;
 
+  &:active svg,
   &:focus svg,
   &:focus-within svg {
     outline: var(--outline-default);

src/assets/styles/feed.xsl

@@ -98,6 +98,7 @@
 
             /* borders */
             --border-default: 1px solid var(--accent-color);
+            --border-gray: 1px solid var(--gray-light);
           }
 
           @media (prefers-color-scheme: dark) {
@@ -339,7 +340,7 @@
             font-family: var(--font-mono);
             background-color: var(--code-bg-color);
             color: var(--code-text-color);
-            border: 1px solid var(--border-color);
+            border: var(--border-gray);
             border-radius: var(--border-radius-slight);
           }
 

src/includes/partials/home/posts.liquid

@@ -20,6 +20,6 @@
   </article>
   {%- endfor -%}
   {%- if postType != 'featured' -%}
-    <a class="flex-centered" href="/posts">View all posts {% tablericon "arrow-right" "View all posts" %}</a>
+    <a class="icon-link" href="/posts">View all posts {% tablericon "arrow-right" "View all posts" %}</a>
   {%- endif -%}
 </div>

src/pages/dynamic/books/book.html

@@ -11,7 +11,7 @@ schema: book
 {%- capture alt -%}
   {{ book.title }}{% if book.authors %}By {{ book.authors }}{% endif %}
 {%- endcapture -%}
-<a href="/books" title="Go back to the books index page">{% tablericon "arrow-left" "Go back to the books index page" %} Back to books</a>
+<a class="icon-link" href="/books" title="Go back to the books index page">{% tablericon "arrow-left" "Go back to the books index page" %} Back to books</a>
 <article class="book-focus">
   <div class="book-display">
     <img

src/pages/dynamic/books/year.html

@@ -13,7 +13,7 @@ schema: books-year
 {%- capture currentYear -%}{% currentYear %}{%- endcapture -%}
 {%- assign yearString = year.value | append: '' -%}
 {%- assign currentYearString = currentYear | append: '' -%}
-<a href="/books" title="Go back to the books index page">{% tablericon "arrow-left" "Go back to the books index page" %} Back to books</a>
+<a class="icon-link" href="/books" title="Go back to the books index page">{% tablericon "arrow-left" "Go back to the books index page" %} Back to books</a>
 <h2>{{ year.value }} / Books</h2>
 {% if yearString == currentYearString %}
 <p>I've finished <strong class="highlight-text">{{ bookData.size }} books</strong> this year.{%- if favoriteBooks %} Among my favorites are {{ favoriteBooks }}.{%- endif -%}</p>

src/pages/dynamic/music/albums/3-months.html

@@ -9,7 +9,7 @@ permalink: "/music/albums/three-months/{% if pagination.pageNumber > 0 %}{{ pagi
 image: music.threeMonth.artists[0].image
 schema: music
 ---
-<a href="/music" title="Go back to the music index page">{% tablericon "arrow-left" "Go back to the music index page" %} Back to music</a>
+<a class="icon-link" href="/music" title="Go back to the music index page">{% tablericon "arrow-left" "Go back to the music index page" %} Back to music</a>
 {% if pagination.pageNumber == 0 %}
 <h2>{{ title }}</h2>
 <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>

src/pages/dynamic/music/albums/this-month.html

@@ -9,7 +9,7 @@ permalink: "/music/albums/this-month/{% if pagination.pageNumber > 0 %}{{ pagina
 image: music.month.artists[0].image
 schema: music
 ---
-<a href="/music" title="Go back to the music index page">{% tablericon "arrow-left" "Go back to the music index page" %} Back to music</a>
+<a class="icon-link" href="/music" title="Go back to the music index page">{% tablericon "arrow-left" "Go back to the music index page" %} Back to music</a>
 {% if pagination.pageNumber == 0 %}
 <h2>{{ title }}</h2>
 <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>

src/pages/dynamic/music/albums/this-week.html

@@ -9,7 +9,7 @@ permalink: "/music/albums/this-week/{% if pagination.pageNumber > 0 %}{{ paginat
 image: music.week.artists[0].image
 schema: music
 ---
-<a href="/music" title="Go back to the music index page">{% tablericon "arrow-left" "Go back to the music index page" %} Back to music</a>
+<a class="icon-link" href="/music" title="Go back to the music index page">{% tablericon "arrow-left" "Go back to the music index page" %} Back to music</a>
 {% if pagination.pageNumber == 0 %}
 <h2>{{ title }}</h2>
 <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>

src/pages/dynamic/music/artists/3-months.html

@@ -9,7 +9,7 @@ permalink: "/music/artists/three-months/{% if pagination.pageNumber > 0 %}{{ pag
 image: music.threeMonth.artists[0].image
 schema: music
 ---
-<a href="/music" title="Go back to the music index page">{% tablericon "arrow-left" "Go back to the music index page" %} Back to music</a>
+<a class="icon-link" href="/music" title="Go back to the music index page">{% tablericon "arrow-left" "Go back to the music index page" %} Back to music</a>
 {% if pagination.pageNumber == 0 %}
 <h2>{{ title }}</h2>
 <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>

src/pages/dynamic/music/artists/artist.html

@@ -19,7 +19,7 @@ schema: artist
   {%- endif -%}
 {%- endcapture -%}
 <noscript><style>[data-toggle-content].text-toggle-hidden {height: unset !important;overflow: unset !important;margin-bottom: unset !important;}[data-toggle-content].text-toggle-hidden::after {display: none !important;}</style></noscript>
-<a href="/music" title="Go back to the music index page">{% tablericon "arrow-left" "Go back to the music index page" %} Back to music</a>
+<a class="icon-link" href="/music" title="Go back to the music index page">{% tablericon "arrow-left" "Go back to the music index page" %} Back to music</a>
 <article class="artist-focus">
   <div class="artist-display">
     <img

src/pages/dynamic/music/artists/this-month.html

@@ -9,7 +9,7 @@ permalink: "/music/artists/this-month/{% if pagination.pageNumber > 0 %}{{ pagin
 image: music.month.artists[0].image
 schema: music
 ---
-<a href="/music" title="Go back to the music index page">{% tablericon "arrow-left" "Go back to the music index page" %} Back to music</a>
+<a class="icon-link" href="/music" title="Go back to the music index page">{% tablericon "arrow-left" "Go back to the music index page" %} Back to music</a>
 {% if pagination.pageNumber == 0 %}
 <h2>{{ title }}</h2>
 <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>

src/pages/dynamic/music/artists/this-week.html

@@ -9,7 +9,7 @@ permalink: "/music/artists/this-week/{% if pagination.pageNumber > 0 %}{{ pagina
 image: music.week.artists[0].image
 schema: music
 ---
-<a href="/music" title="Go back to the music index page">{% tablericon "arrow-left" "Go back to the music index page" %} Back to music</a>
+<a class="icon-link" href="/music" title="Go back to the music index page">{% tablericon "arrow-left" "Go back to the music index page" %} Back to music</a>
 {% if pagination.pageNumber == 0 %}
 <h2>{{ title }}</h2>
 <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>

src/pages/dynamic/music/genre.html

@@ -18,7 +18,7 @@ schema: genre
 {%- endcapture -%}
 {%- assign mediaLinks = genre.artists | sortByPlaysDescending: "total_plays" | mediaLinks: "artist", 5 -%}
 <noscript><style>[data-toggle-content].text-toggle-hidden {height: unset !important;overflow: unset !important;margin-bottom: unset !important;}[data-toggle-content].text-toggle-hidden::after {display: none !important;}</style></noscript>
-<a href="/music" title="Go back to the music index page">{% tablericon "arrow-left" "Go back to the music index page" %} Back to music</a>
+<a class="icon-link" href="/music" title="Go back to the music index page">{% tablericon "arrow-left" "Go back to the music index page" %} Back to music</a>
 <h2>{{ genre.name }}</h2>
 <article class="genre-focus">
   {%- if mediaLinks -%}

src/pages/dynamic/music/index.html

@@ -13,14 +13,14 @@ schema: music-index
 {% render "partials/blocks/now-playing.liquid", music:music %}
 <hr />
 <h3 id="artists" class="section-header">
-  <a href="/music/artists/this-week">
+  <a class="icon-link" href="/music/artists/this-week">
     {% tablericon "microphone-2" "Artists" %}
     Artists
   </a>
 </h3>
 {% render "partials/media/grid.liquid", data:music.week.artists, shape: "square", count: 8, loading: "eager" %}
 <h3 id="albums" class="section-header">
-  <a href="/music/albums/this-week">
+  <a class="icon-link" href="/music/albums/this-week">
     {% tablericon "vinyl" "Albums" %}
     Albums
   </a>
@@ -28,7 +28,7 @@ schema: music-index
 {% render "partials/media/grid.liquid", data:music.week.albums, shape: "square", count: 8 %}
 <div class="section-header-wrapper flex-centered">
   <h3 id="tracks" class="section-header">
-    <a href="/music/tracks/this-week">
+    <a class="icon-link" href="/music/tracks/this-week">
       {% tablericon "playlist" "Tracks" %}
       Tracks
     </a>

src/pages/dynamic/music/periods/3-months.html

@@ -13,21 +13,21 @@ schema: music-period
 <p><a href="/music/concerts">You can also take a look at the concerts I've been to.</a></p>
 <hr />
 <h3 id="artists" class="section-header">
-  <a href="/music/artists/three-months">
+  <a class="icon-link" href="/music/artists/three-months">
     {% tablericon "microphone-2" "Artists" %}
     Artists
   </a>
 </h3>
 {% render "partials/media/grid.liquid", data:music.threeMonth.artists, shape: "square", count: 8, loading: "eager" %}
 <h3 id="albums" class="section-header">
-  <a href="/music/albums/three-months">
+  <a class="icon-link" href="/music/albums/three-months">
     {% tablericon "vinyl" "Albums" %}
     Albums
   </a>
 </h3>
 {% render "partials/media/grid.liquid", data:music.threeMonth.albums, shape: "square", count: 8 %}
 <h3 id="tracks" class="section-header">
-  <a href="/music/tracks/three-months">
+  <a class="icon-link" href="/music/tracks/three-months">
     {% tablericon "playlist" "Tracks" %}
     Tracks
   </a>

src/pages/dynamic/music/periods/this-month.html

@@ -13,21 +13,21 @@ schema: music-period
 <p><a href="/music/concerts">You can also take a look at the concerts I've been to.</a></p>
 <hr />
 <h3 id="artists" class="section-header">
-  <a href="/music/artists/this-month">
+  <a class="icon-link" href="/music/artists/this-month">
     {% tablericon "microphone-2" "Artists" %}
     Artists
   </a>
 </h3>
 {% render "partials/media/grid.liquid", data:music.month.artists, shape: "square", count: 8, loading: "eager" %}
 <h3 id="albums" class="section-header">
-  <a href="/music/albums/this-month">
+  <a class="icon-link" href="/music/albums/this-month">
     {% tablericon "vinyl" "Albums" %}
     Albums
   </a>
 </h3>
 {% render "partials/media/grid.liquid", data:music.month.albums, shape: "square", count: 8 %}
 <h3 id="tracks" class="section-header">
-  <a href="/music/tracks/this-month">
+  <a class="icon-link" href="/music/tracks/this-month">
     {% tablericon "playlist" "Tracks" %}
     Tracks
   </a>

src/pages/dynamic/music/tracks/3-months.html

@@ -9,7 +9,7 @@ permalink: "/music/tracks/three-months/{% if pagination.pageNumber > 0 %}{{ pagi
 image: music.threeMonth.artists[0].image
 schema: music
 ---
-<a href="/music" title="Go back to the music index page">{% tablericon "arrow-left" "Go back to the music index page" %} Back to music</a>
+<a class="icon-link" href="/music" title="Go back to the music index page">{% tablericon "arrow-left" "Go back to the music index page" %} Back to music</a>
 {% if pagination.pageNumber == 0 %}
 <h2>{{ title }}</h2>
 <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>

src/pages/dynamic/music/tracks/this-month.html

@@ -9,7 +9,7 @@ permalink: "/music/tracks/this-month/{% if pagination.pageNumber > 0 %}{{ pagina
 image: music.month.artists[0].image
 schema: music
 ---
-<a href="/music" title="Go back to the music index page">{% tablericon "arrow-left" "Go back to the music index page" %} Back to music</a>
+<a class="icon-link" href="/music" title="Go back to the music index page">{% tablericon "arrow-left" "Go back to the music index page" %} Back to music</a>
 {% if pagination.pageNumber == 0 %}
 <h2>{{ title }}</h2>
 <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>

src/pages/dynamic/music/tracks/this-week.html

@@ -9,7 +9,7 @@ permalink: "/music/tracks/this-week/{% if pagination.pageNumber > 0 %}{{ paginat
 image: music.week.artists[0].image
 schema: music
 ---
-<a href="/music" title="Go back to the music index page">{% tablericon "arrow-left" "Go back to the music index page" %} Back to music</a>
+<a class="icon-link" href="/music" title="Go back to the music index page">{% tablericon "arrow-left" "Go back to the music index page" %} Back to music</a>
 {% if pagination.pageNumber == 0 %}
 <h2>{{ title }}</h2>
 <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>

src/pages/dynamic/watching/favorites/movies.html

@@ -8,7 +8,7 @@ pagination:
 permalink: "/watching/favorite-movies/{% if pagination.pageNumber > 0 %}{{ pagination.pageNumber }}/{% endif %}index.html"
 schema: watching
 ---
-<a href="/watching" title="Go back to the watching index page">{% tablericon "arrow-left" "Go back to the watching index page" %} Back to watching</a>
+<a class="icon-link" href="/watching" title="Go back to the watching index page">{% tablericon "arrow-left" "Go back to the watching index page" %} Back to watching</a>
 {% if pagination.pageNumber == 0 %}
 <h2 class="watching">{{ title }}</h2>
 <p>These are my favorite movies. There are many like them, but these are mine.</p>

src/pages/dynamic/watching/favorites/shows.html

@@ -8,7 +8,7 @@ pagination:
 permalink: "/watching/favorite-shows/{% if pagination.pageNumber > 0 %}{{ pagination.pageNumber }}/{% endif %}index.html"
 schema: watching
 ---
-<a href="/watching" title="Go back to the watching index page">{% tablericon "arrow-left" "Go back to the watching index page" %} Back to watching</a>
+<a class="icon-link" href="/watching" title="Go back to the watching index page">{% tablericon "arrow-left" "Go back to the watching index page" %} Back to watching</a>
 {% if pagination.pageNumber == 0 %}
 <h2 class="watching">{{ title }}</h2>
 <p>These are my favorite shows. There are many like them, but these are mine.</p>

src/pages/dynamic/watching/index.html

@@ -13,21 +13,21 @@ schema: watching
 {% render "partials/blocks/banners/rss.liquid", url: "/feeds/movies", text: "Subscribe to my movies feed or follow along on this page" %}
 <hr />
 <h3 id="movies" class="section-header">
-  <a href="/watching/recent/movies">
+  <a class="icon-link" href="/watching/recent/movies">
     {% tablericon "movie" "Recent movies" %}
     Recent movies
   </a>
 </h3>
 {% render "partials/media/grid.liquid", data:movies.recentlyWatched, shape: "vertical", count: 6 %}
 <h3 id="tv" class="section-header">
-  <a href="/watching/recent/shows">
+  <a class="icon-link" href="/watching/recent/shows">
     {% tablericon "device-tv-old" "Recent shows" %}
     Recent shows
   </a>
 </h3>
 {% render "partials/media/grid.liquid", data:tv.recentlyWatched, shape: "vertical", count: 6 %}
 <h3 id="favorite-movies" class="section-header">
-  <a href="/watching/favorite-movies">
+  <a class="icon-link" href="/watching/favorite-movies">
     {% tablericon "star" "Favorite movies" %}
     Favorite movies
   </a>
@@ -35,7 +35,7 @@ schema: watching
 {% assign favoriteMovies = movies.favorites | featuredWatching: 6 %}
 {% render "partials/media/watching/grid.liquid", mediaItems:favoriteMovies, count: 6 %}
 <h3 id="favorite-shows" class="section-header">
-  <a href="/watching/favorite-shows">
+  <a class="icon-link" href="/watching/favorite-shows">
     {% tablericon "star" "Favorite shows" %}
     Favorite shows
   </a>

src/pages/dynamic/watching/movie.html

@@ -10,7 +10,7 @@ schema: movie
 {%- capture alt -%}
   {{ movie.title }} / {{ movie.year }}{% if move.rating %} ({{ movie.rating }}){% endif %}
 {%- endcapture -%}
-<a href="/watching" title="Go back to the watching index page">{% tablericon "arrow-left" "Go back to the watching index page" %} Back to watching</a>
+<a class="icon-link" href="/watching" title="Go back to the watching index page">{% tablericon "arrow-left" "Go back to the watching index page" %} Back to watching</a>
 <article class="watching-focus">
   <img
     srcset="

src/pages/dynamic/watching/recent/movies.html

@@ -8,7 +8,7 @@ pagination:
 permalink: "/watching/recent/movies/{% if pagination.pageNumber > 0 %}{{ pagination.pageNumber }}/{% endif %}index.html"
 schema: watching
 ---
-<a href="/watching" title="Go back to the watching index page">{% tablericon "arrow-left" "Go back to the watching index page" %} Back to watching</a>
+<a class="icon-link" href="/watching" title="Go back to the watching index page">{% tablericon "arrow-left" "Go back to the watching index page" %} Back to watching</a>
 {% if pagination.pageNumber == 0 %}
 <h2 class="watching">{{ title }}</h2>
 <p>These are the movies I've watched recently. There are many like them, but these are mine. (Or well, all the movies I've watched — they're ordered latest watched, descending, hence the recent part).</p>

src/pages/dynamic/watching/recent/shows.html

@@ -8,7 +8,7 @@ pagination:
 permalink: "/watching/recent/shows/{% if pagination.pageNumber > 0 %}{{ pagination.pageNumber }}/{% endif %}index.html"
 schema: watching
 ---
-<a href="/watching" title="Go back to the watching index page">{% tablericon "arrow-left" "Go back to the watching index page" %} Back to watching</a>
+<a class="icon-link" href="/watching" title="Go back to the watching index page">{% tablericon "arrow-left" "Go back to the watching index page" %} Back to watching</a>
 {% if pagination.pageNumber == 0 %}
 <h2 class="watching">{{ title }}</h2>
 <p>These are the shows I've watched recently. There are many like them, but these are mine. (Or well, all the movies I've watched — they're ordered latest watched, descending, hence the recent part).</p>

src/pages/dynamic/watching/show.html

@@ -11,7 +11,7 @@ schema: show
   {{ show.title }} / {{ show.year }}
 {%- endcapture -%}
 {% assign lastWatched = show | getLastWatched %}
-<a href="/watching" title="Go back to the watching index page">{% tablericon "arrow-left" "Go back to the watching index page" %} Back to watching</a>
+<a class="icon-link" href="/watching" title="Go back to the watching index page">{% tablericon "arrow-left" "Go back to the watching index page" %} Back to watching</a>
 <article class="watching-focus">
   <img
     srcset="