From 9b702520e28fdf827d82480b04c8c7d1dff2a742 Mon Sep 17 00:00:00 2001
From: Cory Dransfeldt <hi@coryd.dev>
Date: Wed, 14 Aug 2024 09:52:39 -0700
Subject: [PATCH] chore: styles
---
package-lock.json | 4 +--
package.json | 2 +-
src/assets/styles/base/index.css | 27 +++++++------------
src/assets/styles/components/badge-grid.css | 2 +-
src/assets/styles/components/banners.css | 9 ++++---
src/assets/styles/components/buttons.css | 19 +++----------
src/assets/styles/components/forms.css | 4 +--
src/assets/styles/components/menu.css | 6 ++---
src/assets/styles/components/modal.css | 8 +++---
src/assets/styles/components/music-chart.css | 2 +-
src/assets/styles/components/tab-buttons.css | 2 +-
src/assets/styles/defaults/vars.css | 2 +-
src/assets/styles/feed.xsl | 5 +++-
src/assets/styles/pages/blogroll.css | 2 +-
src/assets/styles/pages/contact.css | 4 ---
src/assets/styles/pages/music.css | 14 +++++++++-
src/assets/styles/pages/post.css | 2 --
src/includes/partials/footer.liquid | 2 +-
src/includes/partials/home/posts.liquid | 2 +-
src/pages/dynamic/books/book.html | 2 +-
src/pages/dynamic/books/year.html | 2 +-
src/pages/dynamic/music/albums/3-months.html | 2 +-
.../dynamic/music/albums/this-month.html | 2 +-
src/pages/dynamic/music/albums/this-week.html | 2 +-
src/pages/dynamic/music/artists/3-months.html | 2 +-
src/pages/dynamic/music/artists/artist.html | 4 +--
.../dynamic/music/artists/this-month.html | 2 +-
.../dynamic/music/artists/this-week.html | 2 +-
src/pages/dynamic/music/genre.html | 4 +--
src/pages/dynamic/music/index.html | 10 +++----
src/pages/dynamic/music/periods/3-months.html | 6 ++---
.../dynamic/music/periods/this-month.html | 6 ++---
src/pages/dynamic/music/tracks/3-months.html | 2 +-
.../dynamic/music/tracks/this-month.html | 2 +-
src/pages/dynamic/music/tracks/this-week.html | 2 +-
.../dynamic/watching/favorites/movies.html | 2 +-
.../dynamic/watching/favorites/shows.html | 2 +-
src/pages/dynamic/watching/index.html | 8 +++---
src/pages/dynamic/watching/movie.html | 2 +-
src/pages/dynamic/watching/recent/movies.html | 2 +-
src/pages/dynamic/watching/recent/shows.html | 2 +-
src/pages/dynamic/watching/show.html | 2 +-
42 files changed, 91 insertions(+), 99 deletions(-)
diff --git a/package-lock.json b/package-lock.json
index 56923fe1..0f09d2be 100644
--- 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",
diff --git a/package.json b/package.json
index 2724d025..f9552ccd 100644
--- 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": {
diff --git a/src/assets/styles/base/index.css b/src/assets/styles/base/index.css
index 160fd87b..69fcb629 100644
--- 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;
diff --git a/src/assets/styles/components/badge-grid.css b/src/assets/styles/components/badge-grid.css
index 4e3b5481..a5339bd8 100644
--- 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)
}
}
diff --git a/src/assets/styles/components/banners.css b/src/assets/styles/components/banners.css
index 0713835f..92dede95 100644
--- 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;
diff --git a/src/assets/styles/components/buttons.css b/src/assets/styles/components/buttons.css
index 98ffd56e..66170d9f 100644
--- 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 {
diff --git a/src/assets/styles/components/forms.css b/src/assets/styles/components/forms.css
index 6cfd9013..609bcdd3 100644
--- 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)
}
}
diff --git a/src/assets/styles/components/menu.css b/src/assets/styles/components/menu.css
index 8c413cf9..918081a0 100644
--- 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);
}
}
diff --git a/src/assets/styles/components/modal.css b/src/assets/styles/components/modal.css
index 951abbf6..800ce5b1 100644
--- 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,
diff --git a/src/assets/styles/components/music-chart.css b/src/assets/styles/components/music-chart.css
index 974ccd1b..e517a7de 100644
--- 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);
}
}
diff --git a/src/assets/styles/components/tab-buttons.css b/src/assets/styles/components/tab-buttons.css
index 4b0323e5..cdbfae59 100644
--- 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;
}
diff --git a/src/assets/styles/defaults/vars.css b/src/assets/styles/defaults/vars.css
index 2954b61e..a222857a 100644
--- 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);
diff --git a/src/assets/styles/feed.xsl b/src/assets/styles/feed.xsl
index c62b433e..17904e17 100644
--- 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;
}
diff --git a/src/assets/styles/pages/blogroll.css b/src/assets/styles/pages/blogroll.css
index 290d8db7..36ffc531 100644
--- 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)
}
}
}
\ No newline at end of file
diff --git a/src/assets/styles/pages/contact.css b/src/assets/styles/pages/contact.css
index 4a216529..20c9a6f8 100644
--- 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) {
diff --git a/src/assets/styles/pages/music.css b/src/assets/styles/pages/music.css
index c16aa478..5d2e7fac 100644
--- 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 {
diff --git a/src/assets/styles/pages/post.css b/src/assets/styles/pages/post.css
index 730a3455..c34dbadb 100644
--- 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;
diff --git a/src/includes/partials/footer.liquid b/src/includes/partials/footer.liquid
index 89e52b40..e1c8bf8d 100644
--- 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 -%}
diff --git a/src/includes/partials/home/posts.liquid b/src/includes/partials/home/posts.liquid
index daff141f..ad237e2b 100644
--- 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>
\ No newline at end of file
diff --git a/src/pages/dynamic/books/book.html b/src/pages/dynamic/books/book.html
index 6d43d2ec..e0f31b3a 100644
--- 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
diff --git a/src/pages/dynamic/books/year.html b/src/pages/dynamic/books/year.html
index 6dcb18d1..43bbfcef 100644
--- 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>
diff --git a/src/pages/dynamic/music/albums/3-months.html b/src/pages/dynamic/music/albums/3-months.html
index 650154bb..d4c5b02f 100644
--- 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>
diff --git a/src/pages/dynamic/music/albums/this-month.html b/src/pages/dynamic/music/albums/this-month.html
index 938d7025..35778aa2 100644
--- 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>
diff --git a/src/pages/dynamic/music/albums/this-week.html b/src/pages/dynamic/music/albums/this-week.html
index 56ca7e9c..6a316e45 100644
--- 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>
diff --git a/src/pages/dynamic/music/artists/3-months.html b/src/pages/dynamic/music/artists/3-months.html
index 82535447..8b3ddd0b 100644
--- 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>
diff --git a/src/pages/dynamic/music/artists/artist.html b/src/pages/dynamic/music/artists/artist.html
index 846deb84..cb28e808 100644
--- 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>
\ No newline at end of file
diff --git a/src/pages/dynamic/music/artists/this-month.html b/src/pages/dynamic/music/artists/this-month.html
index 84e0b3d6..35bcadee 100644
--- 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>
diff --git a/src/pages/dynamic/music/artists/this-week.html b/src/pages/dynamic/music/artists/this-week.html
index e8074f25..9e09daa6 100644
--- 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>
diff --git a/src/pages/dynamic/music/genre.html b/src/pages/dynamic/music/genre.html
index 863ccf63..9b790c6d 100644
--- 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 -%}
diff --git a/src/pages/dynamic/music/index.html b/src/pages/dynamic/music/index.html
index 71a2ee99..3e1a5779 100644
--- 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>
diff --git a/src/pages/dynamic/music/periods/3-months.html b/src/pages/dynamic/music/periods/3-months.html
index 5474e8fd..63b17642 100644
--- 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>
diff --git a/src/pages/dynamic/music/periods/this-month.html b/src/pages/dynamic/music/periods/this-month.html
index 499223e8..b121557f 100644
--- 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>
diff --git a/src/pages/dynamic/music/tracks/3-months.html b/src/pages/dynamic/music/tracks/3-months.html
index 8f534ac1..9607d466 100644
--- 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>
diff --git a/src/pages/dynamic/music/tracks/this-month.html b/src/pages/dynamic/music/tracks/this-month.html
index 5acfb695..486bc7c8 100644
--- 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>
diff --git a/src/pages/dynamic/music/tracks/this-week.html b/src/pages/dynamic/music/tracks/this-week.html
index a0d8b85e..3a3713ba 100644
--- 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>
diff --git a/src/pages/dynamic/watching/favorites/movies.html b/src/pages/dynamic/watching/favorites/movies.html
index e7189f5c..3d06c054 100644
--- 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>
diff --git a/src/pages/dynamic/watching/favorites/shows.html b/src/pages/dynamic/watching/favorites/shows.html
index 9e4d1513..7ff32440 100644
--- 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>
diff --git a/src/pages/dynamic/watching/index.html b/src/pages/dynamic/watching/index.html
index d7d6584c..937b739e 100644
--- 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>
diff --git a/src/pages/dynamic/watching/movie.html b/src/pages/dynamic/watching/movie.html
index 201d0860..f992ff94 100644
--- 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="
diff --git a/src/pages/dynamic/watching/recent/movies.html b/src/pages/dynamic/watching/recent/movies.html
index 61e1be53..cc113ec3 100644
--- 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>
diff --git a/src/pages/dynamic/watching/recent/shows.html b/src/pages/dynamic/watching/recent/shows.html
index 42bcd679..7a884609 100644
--- 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>
diff --git a/src/pages/dynamic/watching/show.html b/src/pages/dynamic/watching/show.html
index bb58b1e9..b7d32142 100644
--- 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="