chore: styles

2024-08-14 09:52:39 -07:00 · 2024-08-14 09:52:39 -07:00 · 9b702520e2
commit 9b702520e2
parent 51b60301d1
42 changed files with 91 additions and 99 deletions
--- a/package-lock.json
+++ b/package-lock.json
@ -1,12 +1,12 @@
 {
  "name": "coryd.dev",
-  "version": "22.2.9",
+  "version": "22.2.1.",
  "lockfileVersion": 3,
  "requires": true,
  "packages": {
    "": {
      "name": "coryd.dev",
-      "version": "22.2.9",
+      "version": "22.2.1.",
      "license": "MIT",
      "dependencies": {
        "@cdransf/api-text": "^1.5.0",
--- a/package.json
+++ b/package.json
@ -1,6 +1,6 @@
 {
  "name": "coryd.dev",
-  "version": "22.2.9",
+  "version": "22.2.1.",
  "description": "The source for my personal site. Built using 11ty (and other tools).",
  "type": "module",
  "scripts": {
--- a/src/assets/styles/base/index.css
+++ b/src/assets/styles/base/index.css
@ -36,7 +36,7 @@ body {

 a:focus,
 a:focus-within {
-  outline: 2px dashed var(--accent-color);
+  outline: var(--outline-default);
  text-decoration: none;
 }

@ -91,7 +91,6 @@ code {
  &.brand-mastodon > svg { stroke: var(--brand-mastodon); }
  &.article > svg { stroke: var(--posts); }
  &.books > svg { stroke: var(--books); }
-  &.brain > svg { stroke: var(--brand-listenbrainz); }
  &.clock-hour-3 > svg { stroke: var(--now); }
  &.coffee > svg { stroke: var(--brand-buy-me-a-coffee); }
  &.device-tv > svg { stroke: var(--tv); }
@ -106,13 +105,12 @@ code {
  &.search > svg { stroke: var(--search); }
 }

-:is(body, html, nav .search) svg {
-  stroke: var(--text-color);
+:is(h1, h2, h3, h4, h5, h6) svg {
+  stroke-width: var(--stroke-width-bold);
 }

-:is(h1, h2, h3, h4, h5, h6) svg {
-  margin-right: var(--sizing-xs);
-  stroke-width: var(--stroke-width-bold);
+:is(h1, h2, h3, h4, h5, h6):has(svg) {
+  gap: var(--sizing-xs)
 }

 strong,
@ -301,7 +299,7 @@ td {
  }
 }

-td::first-of-type,
+td:first-of-type,
 :where(thead, tfoot) th:nth-child(2) {
 	border-inline-start: none;
 }
@ -325,10 +323,6 @@ th {
    font-weight: var(--font-weight-extrabold);
    margin: 0;
    padding: 0;
-
-    & a {
-      text-decoration: none;
-    }
  }
 }

@ -356,7 +350,7 @@ a svg:focus {
  stroke: var(--accent-color-hover);
 }

-a.link-icon {
+a:has(svg) {
  display: inline-flex;
  align-items: center;
  gap: var(--sizing-xs);
@ -441,8 +435,9 @@ article {
 }

 footer {
-  & .explainer {
+  & p:first-of-type {
    margin: var(--sizing-3xl) 0 var(--sizing-lg);
+    font-size: var(--font-size-sm);
  }

  & nav {
@ -554,10 +549,6 @@ li {
  text-align: center !important;
 }

-.text-small {
-  font-size: var(--font-size-sm) !important;
-}
-
 .flex-centered {
  display: flex;
  flex-direction: row;
--- a/src/assets/styles/components/badge-grid.css
+++ b/src/assets/styles/components/badge-grid.css
@ -14,7 +14,7 @@

    &:focus img,
    &:focus-within img {
-      outline: var(--outline)
+      outline: var(--outline-default)
    }
  }

--- a/src/assets/styles/components/banners.css
+++ b/src/assets/styles/components/banners.css
@ -1,9 +1,12 @@
-.footnotes + .banner {
-  margin-top: 0;
+* + .banner {
+  margin-top: var(--sizing-base);
+}
+
+.banner:has(+ *) {
+  margin-bottom: var(--sizing-base);
 }

 .banner {
-  margin: var(--sizing-base) 0;
  padding: var(--sizing-md);
  border: 1px solid;

--- a/src/assets/styles/components/buttons.css
+++ b/src/assets/styles/components/buttons.css
@ -8,7 +8,7 @@ button,

  &:not(.theme-toggle) {
    border: 2px solid var(--accent-color);
-    padding: var(--sizing-sm) var(--sizing-lg);
+    padding: var(--sizing-xs) var(--sizing-md);
    cursor: pointer;
    display: inline-flex;
    flex-direction: row;
@ -36,25 +36,14 @@ button,
  &:not(.theme-toggle, .active):focus,
  &:not(.theme-toggle, .active):focus-within {
    transition-property: none;
-    outline: 2px dashed var(--accent-color);
-    padding: calc(var(--sizing-sm) + 2px) calc(var(--sizing-lg) + 2px);
+    outline: var(--outline-default);
+    padding: calc(var(--sizing-xs) + 2px) calc(var(--sizing-md) + 2px);
    border: 0;
  }

  &.theme-toggle:focus,
  &.theme-toggle:focus-within {
-    outline: 2px dashed var(--accent-color);
-  }
-
-  &.small {
-    font-size: var(--font-size-sm);
-    line-height: var(--line-height-sm);
-    padding: var(--sizing-xs) var(--sizing-sm);
-
-    &:not(.active):focus,
-    &:not(.active):focus-within {
-      padding: var(--sizing-xs) calc(var(--sizing-sm) + 2px);
-    }
+    outline: var(--outline-default);
  }

  &.secondary {
--- a/src/assets/styles/components/forms.css
+++ b/src/assets/styles/components/forms.css
@ -32,7 +32,7 @@ input:focus-within,
 textarea:focus,
 textarea:focus-within {
  border: 0;
-  outline: 2px dashed var(--accent-color);
+  outline: var(--outline-default);
  padding: calc(var(--sizing-sm) + 1px);
 }

@ -46,7 +46,7 @@ select {
  &:focus,
  &:focus-within {
    border: 0;
-    outline: var(--outline)
+    outline: var(--outline-default)
  }
 }

--- a/src/assets/styles/components/menu.css
+++ b/src/assets/styles/components/menu.css
@ -29,7 +29,7 @@

  &:focus,
  &:focus-within {
-    outline: 2px dashed var(--accent-color);
+    outline: var(--outline-default);
  }

  & svg {
@ -132,8 +132,8 @@

    &:focus,
    &:focus-within {
-      border-top: 2px dashed var(--accent-color);
-      border-bottom: 2px dashed var(--accent-color);
+      border-top: var(--outline-default);
+      border-bottom: var(--outline-default);
    }
  }

--- a/src/assets/styles/components/modal.css
+++ b/src/assets/styles/components/modal.css
@ -25,7 +25,7 @@

      &:focus svg,
      &:focus-within svg {
-        outline: var(--outline);
+        outline: var(--outline-default);
      }

      & svg {
@ -34,7 +34,7 @@
        transition: transform var(--transition-duration-default) var(--transition-ease-in-out);

        &:focus {
-          outline: var(--outline);
+          outline: var(--outline-default);
        }

        &:hover,
@ -76,7 +76,7 @@

  &:focus svg,
  &:focus-within svg {
-    outline: var(--outline);
+    outline: var(--outline-default);
  }

  & svg {
@ -86,7 +86,7 @@
    transition: transform var(--transition-duration-default) var(--transition-ease-in-out);

    &:focus {
-      outline: var(--outline);
+      outline: var(--outline-default);
    }

    &:hover,
--- a/src/assets/styles/components/music-chart.css
+++ b/src/assets/styles/components/music-chart.css
@ -65,7 +65,7 @@

      &:focus,
      &:focus-within {
-        outline: var(--outline);
+        outline: var(--outline-default);
      }
    }

--- a/src/assets/styles/components/tab-buttons.css
+++ b/src/assets/styles/components/tab-buttons.css
@ -30,7 +30,7 @@ input[id="tracks-recent"] ~ [for="tracks-recent"]:has(+ [for="tracks-window"]) {
 #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);
+  outline: var(--outline-default);
  border: 0;
 }

--- a/src/assets/styles/defaults/vars.css
+++ b/src/assets/styles/defaults/vars.css
@ -70,7 +70,7 @@
  --webrings: #da70d6;

  /* outline */
-  --outline: 2px dashed var(--accent-color);
+  --outline-default: 2px dashed var(--accent-color);

  /* borders */
  --border-default: 1px solid var(--accent-color);
--- a/src/assets/styles/feed.xsl
+++ b/src/assets/styles/feed.xsl
@ -76,6 +76,9 @@
            --font-weight-bold: 600;
            --font-weight-extrabold: 800;

+            /* outline */
+            --outline-default: var(--outline-default);
+
            /* borders */
            --border-default: 1px solid var(--accent-color);
          }
@ -184,7 +187,7 @@

          a:focus,
          a:focus-within {
-            outline: 2px dashed var(--accent-color);
+            outline: var(--outline-default);
            text-decoration: none;
          }

--- a/src/assets/styles/pages/blogroll.css
+++ b/src/assets/styles/pages/blogroll.css
@ -9,7 +9,7 @@

    &:focus svg,
    &:focus-within svg {
-      outline: var(--outline)
+      outline: var(--outline-default)
    }
  }
 }
--- a/src/assets/styles/pages/contact.css
+++ b/src/assets/styles/pages/contact.css
@ -18,10 +18,6 @@
  justify-content: center;
  align-items: center;
  min-height: 60vh;
-
-  & h2 {
-    margin: 0 0 var(--sizing-base);
-  }
 }

@media screen and (min-width: 768px) {
--- a/src/assets/styles/pages/music.css
+++ b/src/assets/styles/pages/music.css
@ -3,6 +3,10 @@
  border-bottom: 0;
 }

+.genre-focus [data-toggle-content] p:last-of-type {
+  font-size: var(--font-size-sm);
+}
+
 .artist-focus {
  margin-top: var(--sizing-base);

@ -72,14 +76,22 @@
        & .brain {
          outline: 0;

+          & > svg {
+            stroke: var(--brand-listenbrainz);
+          }
+
          &:focus svg,
          &:focus-within svg {
-            outline: var(--outline)
+            outline: var(--outline-default)
          }
        }
      }
    }
  }
+
+  & table + p {
+    font-size: var(--font-size-sm);
+  }
 }

 .concert-list {
--- a/src/assets/styles/pages/post.css
+++ b/src/assets/styles/pages/post.css
@ -1,6 +1,4 @@
 .footnotes {
-  padding-bottom: var(--sizing-base);
-
  & .footnotes-list {
    margin-bottom: 0;
    padding-left: 0;
--- a/src/includes/partials/footer.liquid
+++ b/src/includes/partials/footer.liquid
@ -1,6 +1,6 @@
 <footer{% unless updated %} style="margin-top:var(--sizing-3xl)"{% endunless %}>
  {%- if updated -%}
-    <p class="explainer text-small text-centered"><em>This page was last updated on {{ updated | strip }}.</em></p>
+    <p class="text-centered"><em>This page was last updated on {{ updated | strip }}.</em></p>
  {%- endif -%}
  <nav aria-label="Social icons" class="social flex-centered justify-centered text-centered">
    {%- for link in nav.footer_icons -%}
--- a/src/includes/partials/home/posts.liquid
+++ b/src/includes/partials/home/posts.liquid
@ -23,6 +23,6 @@
  </article>
  {%- endfor -%}
  {%- if postType != 'featured' -%}
-    <a class="link-icon flex-centered" href="/posts">View all posts {% tablericon "arrow-right" "View all posts" %}</a>
+    <a class="flex-centered" href="/posts">View all posts {% tablericon "arrow-right" "View all posts" %}</a>
  {%- endif -%}
 </div>
--- a/src/pages/dynamic/books/book.html
+++ b/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 class="back-link-header link-icon" 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="back-link-header" 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
--- a/src/pages/dynamic/books/year.html
+++ b/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 class="back-link-header link-icon" 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="back-link-header" 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>
--- a/src/pages/dynamic/music/albums/3-months.html
+++ b/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 class="back-link-header link-icon" 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="back-link-header" 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>
--- a/src/pages/dynamic/music/albums/this-month.html
+++ b/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 class="back-link-header link-icon" 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="back-link-header" 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>
--- a/src/pages/dynamic/music/albums/this-week.html
+++ b/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 class="back-link-header link-icon" 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="back-link-header" 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>
--- a/src/pages/dynamic/music/artists/3-months.html
+++ b/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 class="back-link-header link-icon" 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="back-link-header" 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>
--- a/src/pages/dynamic/music/artists/artist.html
+++ b/src/pages/dynamic/music/artists/artist.html
@ -16,7 +16,7 @@ schema: artist
 {%- endcapture -%}
 <script>{{ js }}</script>
 <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 class="back-link-header link-icon" 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="back-link-header" 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
@ -105,5 +105,5 @@ schema: artist
    </tr>
    {% endfor %}
  </table>
-  <p class="text-small"><em>These are the albums by this artist that are in my collection, not necessarily a comprehensive discography.</em></p>
+  <p><em>These are the albums by this artist that are in my collection, not necessarily a comprehensive discography.</em></p>
 </article>
--- a/src/pages/dynamic/music/artists/this-month.html
+++ b/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 class="back-link-header link-icon" 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="back-link-header" 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>
--- a/src/pages/dynamic/music/artists/this-week.html
+++ b/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 class="back-link-header link-icon" 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="back-link-header" 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>
--- a/src/pages/dynamic/music/genre.html
+++ b/src/pages/dynamic/music/genre.html
@ -22,7 +22,7 @@ schema: genre
 {%- endcapture -%}
 <script>{{ js }}</script>
 <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 class="back-link-header link-icon" 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="back-link-header" 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 -%}
@ -33,7 +33,7 @@ schema: genre
  <div data-toggle-content class="text-toggle-hidden">
    {{ genre.description | markdown }}
    <p><a href="{{ genre.wiki_link }}">Continue reading at Wikipedia.</a></p>
-    <p class="text-small"><em>Wikipedia content provided under the terms of the <a href="https://creativecommons.org/licenses/by-sa/3.0/">Creative Commons BY-SA license</a></em></p>
+    <p><em>Wikipedia content provided under the terms of the <a href="https://creativecommons.org/licenses/by-sa/3.0/">Creative Commons BY-SA license</a></em></p>
  </div>
  <button data-toggle-button>Show more</button>
  {%- endif -%}
--- a/src/pages/dynamic/music/index.html
+++ b/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 class="link-icon" href="/music/artists/this-week">
+  <a 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 class="link-icon" href="/music/albums/this-week">
+  <a 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 class="link-icon" href="/music/tracks/this-week">
+    <a href="/music/tracks/this-week">
      {% tablericon "playlist" "Tracks" %}
      Tracks
    </a>
@ -37,8 +37,8 @@ schema: music-index
 <div class="track-display">
  <input id="tracks-recent" name="track-options" class="hidden" type="radio" aria-hidden="true" checked />
  <input id="tracks-window" name="track-options" class="hidden" type="radio" aria-hidden="true" />
-  <label for="tracks-recent" class="button small" data-toggle="tracks-recent">Recent</label>
-  <label for="tracks-window" class="button small" data-toggle="tracks-window">This week</label>
+  <label for="tracks-recent" class="button" data-toggle="tracks-recent">Recent</label>
+  <label for="tracks-window" class="button" data-toggle="tracks-window">This week</label>
  <div class="tracks-recent">
    {% render "partials/media/music/recent", data:music.recent %}
  </div>
--- a/src/pages/dynamic/music/periods/3-months.html
+++ b/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 class="link-icon" href="/music/artists/three-months">
+  <a 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 class="link-icon" href="/music/albums/three-months">
+  <a 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 class="link-icon" href="/music/tracks/three-months">
+  <a href="/music/tracks/three-months">
    {% tablericon "playlist" "Tracks" %}
    Tracks
  </a>
--- a/src/pages/dynamic/music/periods/this-month.html
+++ b/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 class="link-icon" href="/music/artists/this-month">
+  <a 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 class="link-icon" href="/music/albums/this-month">
+  <a 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 class="link-icon" href="/music/tracks/this-month">
+  <a href="/music/tracks/this-month">
    {% tablericon "playlist" "Tracks" %}
    Tracks
  </a>
--- a/src/pages/dynamic/music/tracks/3-months.html
+++ b/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 class="back-link-header link-icon" 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="back-link-header" 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>
--- a/src/pages/dynamic/music/tracks/this-month.html
+++ b/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 class="back-link-header link-icon" 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="back-link-header" 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>
--- a/src/pages/dynamic/music/tracks/this-week.html
+++ b/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 class="back-link-header link-icon" 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="back-link-header" 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>
--- a/src/pages/dynamic/watching/favorites/movies.html
+++ b/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 class="back-link-header link-icon" 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="back-link-header" 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 page-header">{{ title }}</h2>
 <p>These are my favorite movies. There are many like them, but these are mine.</p>
--- a/src/pages/dynamic/watching/favorites/shows.html
+++ b/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 class="back-link-header link-icon" 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="back-link-header" 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 page-header">{{ title }}</h2>
 <p>These are my favorite shows. There are many like them, but these are mine.</p>
--- a/src/pages/dynamic/watching/index.html
+++ b/src/pages/dynamic/watching/index.html
@ -13,21 +13,21 @@ schema: watching
 {% render "partials/blocks/banners/rss.liquid", url: "https://coryd.dev/feeds/movies", text: "Subscribe to my movies feed or follow along on this page" %}
 <hr />
 <h3 id="movies" class="section-header">
-  <a class="link-icon" href="/watching/recent/movies">
+  <a 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 class="link-icon" href="/watching/recent/shows">
+  <a href="/watching/recent/shows">
    {% tablericon "device-tv" "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 class="link-icon" href="/watching/favorite-movies">
+  <a 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 class="link-icon" href="/watching/favorite-shows">
+  <a href="/watching/favorite-shows">
    {% tablericon "star" "Favorite shows" %}
    Favorite shows
  </a>
--- a/src/pages/dynamic/watching/movie.html
+++ b/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 class="back-link-header link-icon" 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="back-link-header" 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="
--- a/src/pages/dynamic/watching/recent/movies.html
+++ b/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 class="back-link-header link-icon" 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="back-link-header" 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 page-header">{{ 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>
--- a/src/pages/dynamic/watching/recent/shows.html
+++ b/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 class="back-link-header link-icon" 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="back-link-header" 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 page-header">{{ 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>
--- a/src/pages/dynamic/watching/show.html
+++ b/src/pages/dynamic/watching/show.html
@ -11,7 +11,7 @@ schema: show
  {{ show.title }} / {{ show.year }}
 {%- endcapture -%}
 {% assign lastWatched = show | getLastWatched %}
-<a class="back-link-header link-icon" 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="back-link-header" 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="