From 8708b71227434c2cd4f6cf71482b8bd54cd117d3 Mon Sep 17 00:00:00 2001
From: Cory Dransfeldt <hi@coryd.dev>
Date: Fri, 14 Jun 2024 14:30:43 -0700
Subject: [PATCH] =?UTF-8?q?chore:=20clean=20up=20css=20=E2=80=94=20generic?=
 =?UTF-8?q?=20styles=20where=20they=20make=20sense;=20remove=20deprecated?=
 =?UTF-8?q?=20styles,=20fragments=20of=20utility=20nonsense=20etc?=
MIME-Version: 1.0
Content-Type: text/plain; charset=UTF-8
Content-Transfer-Encoding: 8bit

---
 package-lock.json                             |  4 +-
 package.json                                  |  2 +-
 src/_includes/partials/banners/github.liquid  |  2 +-
 src/_includes/partials/home/posts.liquid      |  2 +-
 .../partials/media/books/year.liquid          |  2 +-
 .../partials/media/watching/grid.liquid       |  2 +-
 src/assets/styles/base/index.css              | 62 +++----------
 src/assets/styles/components/addon-links.css  |  8 +-
 src/assets/styles/components/badge-grid.css   | 10 +--
 src/assets/styles/components/banners.css      | 86 ++++++-------------
 src/assets/styles/components/buttons.css      | 14 +--
 src/assets/styles/components/forms.css        |  3 +-
 .../styles/components/mastodon-post.css       | 18 ----
 src/assets/styles/components/media-grid.css   |  2 +-
 src/assets/styles/components/music-chart.css  | 51 +++++------
 .../styles/components/youtube-video.css       |  2 +-
 src/assets/styles/defaults/animations.css     |  4 -
 src/assets/styles/index.css                   |  2 -
 src/assets/styles/pages/media.css             |  1 +
 src/assets/styles/pages/post.css              |  4 -
 src/assets/styles/plugins/prism.css           | 34 ++++----
 src/pages/errors/1000.html                    |  2 +-
 src/pages/errors/404.html                     |  2 +-
 src/pages/errors/500.html                     |  2 +-
 src/pages/errors/captcha.html                 |  2 +-
 src/pages/errors/js-challenge.html            |  2 +-
 src/pages/main/books/book.html                |  2 +-
 src/pages/main/books/index.html               |  2 +-
 src/pages/main/links.html                     |  2 +-
 src/pages/main/music/albums/3-months.html     |  2 +-
 src/pages/main/music/albums/this-month.html   |  2 +-
 src/pages/main/music/albums/this-week.html    |  2 +-
 src/pages/main/music/artists/3-months.html    |  2 +-
 src/pages/main/music/artists/this-month.html  |  2 +-
 src/pages/main/music/artists/this-week.html   |  2 +-
 src/pages/main/music/genre.html               |  2 +-
 src/pages/main/music/index.html               |  2 +-
 src/pages/main/music/periods/3-months.html    |  2 +-
 src/pages/main/music/periods/this-month.html  |  2 +-
 src/pages/main/music/tracks/3-months.html     |  2 +-
 src/pages/main/music/tracks/this-month.html   |  2 +-
 src/pages/main/music/tracks/this-week.html    |  2 +-
 src/pages/main/now.html                       |  2 +-
 src/pages/main/posts/index.html               |  2 +-
 src/pages/main/posts/post.html                |  2 +-
 src/pages/main/watching/favorites/movies.html |  2 +-
 src/pages/main/watching/favorites/shows.html  |  2 +-
 src/pages/main/watching/index.html            |  2 +-
 src/pages/main/watching/movie.html            |  2 +-
 src/pages/main/watching/recent/movies.html    |  2 +-
 src/pages/main/watching/recent/shows.html     |  2 +-
 src/pages/main/watching/show.html             |  2 +-
 src/pages/secondary/contact/success.html      |  2 +-
 src/pages/secondary/uses.md                   |  2 +-
 54 files changed, 137 insertions(+), 244 deletions(-)
 delete mode 100644 src/assets/styles/components/mastodon-post.css
 delete mode 100644 src/assets/styles/defaults/animations.css

diff --git a/package-lock.json b/package-lock.json
index a5ed7bd0..72d9cd75 100644
--- a/package-lock.json
+++ b/package-lock.json
@@ -1,12 +1,12 @@
 {
   "name": "coryd.dev",
-  "version": "19.3.12",
+  "version": "19.3.13",
   "lockfileVersion": 3,
   "requires": true,
   "packages": {
     "": {
       "name": "coryd.dev",
-      "version": "19.3.12",
+      "version": "19.3.13",
       "license": "MIT",
       "dependencies": {
         "@cdransf/api-text": "^1.4.0",
diff --git a/package.json b/package.json
index 80e23687..4261a099 100644
--- a/package.json
+++ b/package.json
@@ -1,6 +1,6 @@
 {
   "name": "coryd.dev",
-  "version": "19.3.12",
+  "version": "19.3.13",
   "description": "The source for my personal site. Built using 11ty.",
   "type": "module",
   "scripts": {
diff --git a/src/_includes/partials/banners/github.liquid b/src/_includes/partials/banners/github.liquid
index 9a693e8f..11e082dd 100644
--- a/src/_includes/partials/banners/github.liquid
+++ b/src/_includes/partials/banners/github.liquid
@@ -1,3 +1,3 @@
 <div class="banner github">
-  <p>{% tablericon "brand-github" "GitHub repository" %}Take a look at <a href="{{ url }}">the GitHub repository for this project</a>. (And give it a star if you feel like it.)</p>
+  <p>{% tablericon "brand-github" "GitHub repository" %}Take a look at <a href="{{ url }}">the GitHub repository for this project</a>. (Give it a star if you feel like it.)</p>
 </div>
\ No newline at end of file
diff --git a/src/_includes/partials/home/posts.liquid b/src/_includes/partials/home/posts.liquid
index a443a7d2..83b06bd5 100644
--- a/src/_includes/partials/home/posts.liquid
+++ b/src/_includes/partials/home/posts.liquid
@@ -8,7 +8,7 @@
   </div>
   {% for post in posts %}
   <article class="h-entry">
-    <div class="flex-centered gap-xs icon-small icon-light">
+    <div class="time-wrapper flex-centered">
       {% tablericon "calendar-month" "Date" %}
       <time class="dt-published" datetime="{{ post.date }}">
         {{ post.date | date: "%B %e, %Y" }}
diff --git a/src/_includes/partials/media/books/year.liquid b/src/_includes/partials/media/books/year.liquid
index 0b8f69a6..e489da94 100644
--- a/src/_includes/partials/media/books/year.liquid
+++ b/src/_includes/partials/media/books/year.liquid
@@ -13,5 +13,5 @@ layout: default
 {% else %}
 <p>I finished <strong class="highlight-text">{{ bookData.size }} books</strong> in {{ year }}.</p>
 {% endif %}
-<hr class="large-spacing" />
+<hr />
 {% render "partials/media/grid.liquid", data:bookData, shape: "vertical", count: 200, loading: "eager" %}
\ No newline at end of file
diff --git a/src/_includes/partials/media/watching/grid.liquid b/src/_includes/partials/media/watching/grid.liquid
index db4b1b0a..8731f4e4 100644
--- a/src/_includes/partials/media/watching/grid.liquid
+++ b/src/_includes/partials/media/watching/grid.liquid
@@ -8,7 +8,7 @@
         <div class="meta-text">
           {% if item.type == 'movie' %}
             <div class="header">{{ item.title }}</div>
-            <div class="subheader flex-centered gap-xs">
+            <div class="subheader flex-centered">
               {{ item.year }}
               {% if rating and item.rating %}
                 <span class="rating"> ({{ item.rating }})</span>
diff --git a/src/assets/styles/base/index.css b/src/assets/styles/base/index.css
index dda7e2d6..31443c9a 100644
--- a/src/assets/styles/base/index.css
+++ b/src/assets/styles/base/index.css
@@ -95,10 +95,6 @@ sup.footnote-ref {
   }
 }
 
-.footnote-item a {
-  text-decoration: none;
-}
-
 strong,
 blockquote {
   font-weight: var(--font-weight-bold);
@@ -191,15 +187,7 @@ h6 { font-size: var(--font-size-sm) }
 }
 
 .section-header-buttons {
-  margin: var(--sizing-3xl) 0 var(--sizing-lg);
-
-  &.reduced-margin {
-    margin: var(--sizing-md) 0 var(--sizing-lg);
-  }
-
-  &.no-top-margin {
-    margin: 0 0 var(--sizing-lg);
-  }
+  margin: var(--sizing-md) 0 var(--sizing-lg);
 
   & > button {
     margin-bottom: var(--sizing-sm) !important;
@@ -215,10 +203,7 @@ hr {
   height: 1px;
   background-color: var(--gray-light);
   border: 0;
-
-  &.large-spacing {
-    margin: var(--sizing-base) 0;
-  }
+  margin: var(--sizing-base) 0;
 }
 
 /* tables */
@@ -460,6 +445,16 @@ article {
     margin-right: var(--sizing-xs);
   }
 
+  & .time-wrapper {
+    gap: var(--sizing-xs);
+
+    & > svg {
+      width: var(--sizing-lg);
+      height: var(--sizing-lg);
+      stroke: var(--gray-dark) !important;
+    }
+  }
+
   & [rel="author"] {
     margin-bottom: var(--sizing-xs);
   }
@@ -491,20 +486,11 @@ svg {
   stroke-width: var(--stroke-width-default);
 }
 
-.icon-small > svg {
-  width: var(--sizing-lg);
-  height: var(--sizing-lg);
-}
-
 .icon-center-vertical > svg {
   display: inline;
   vertical-align: middle;
 }
 
-.icon-light > svg {
-  stroke: var(--gray-dark) !important;
-}
-
 /* lists */
 ul, ol {
   list-style-position: inside;
@@ -528,16 +514,6 @@ li {
       margin-bottom: 0;
     }
   }
-
-  &.reduced-spacing {
-    margin-top: 0;
-    margin-bottom: var(--sizing-3xl);
-    padding-left: 0;
-
-    & li:first-of-type {
-      margin-top: 0;
-    }
-  }
 }
 
 .link-list-header {
@@ -550,12 +526,6 @@ li {
   height: auto;
   display: block;
   width: 100%;
-
-  & > * {
-    display: block;
-    width: 100%;
-    height: auto;
-  }
 }
 
 /* pages */
@@ -602,14 +572,6 @@ li {
   flex-wrap: wrap;
 }
 
-.gap-xs { gap: var(--sizing-xs) }
-.gap-sm { gap: var(--sizing-sm) }
-.gap-md { gap: var(--sizing-md) }
-.gap-base { gap: var(--sizing-base) }
-.gap-xl { gap: var(--sizing-xl) }
-.gap-2xl { gap: var(--sizing-2xl) }
-.gap-3xl { gap: var(--sizing-3xl) }
-
 /* screens: md */
 @media screen and (min-width: 768px) {
   h1 { font-size: var(--font-size-3xl) }
diff --git a/src/assets/styles/components/addon-links.css b/src/assets/styles/components/addon-links.css
index 012c812f..828b6f94 100644
--- a/src/assets/styles/components/addon-links.css
+++ b/src/assets/styles/components/addon-links.css
@@ -1,24 +1,24 @@
 .addon-links {
   display: grid;
   gap: var(--sizing-sm);
-  grid-template-columns: repeat(1,minmax(0,1fr));
+  grid-template-columns: repeat(1, 1fr);
 
   & div > h2 {
     margin-top: 0;
   }
 
-  & div:last-of-type h2 {
+  &  div:last-of-type h2 {
     margin-top: var(--sizing-base);
   }
 
-  &.link-list {
+  & .link-list {
     margin-bottom: 0;
   }
 }
 
 @media screen and (min-width: 768px) {
   .addon-links {
-    grid-template-columns: repeat(2,minmax(0,1fr));
+    grid-template-columns: repeat(2, 1fr);
 
     & div:last-of-type h2 {
       margin-top: 0;
diff --git a/src/assets/styles/components/badge-grid.css b/src/assets/styles/components/badge-grid.css
index 0fe5147d..8b999867 100644
--- a/src/assets/styles/components/badge-grid.css
+++ b/src/assets/styles/components/badge-grid.css
@@ -1,21 +1,21 @@
 .badge-grid {
   display: grid;
   gap: var(--sizing-md);
-  grid-template-columns: repeat(3,minmax(0,1fr));
+  grid-template-columns: repeat(3, 1fr);
   margin-top: var(--sizing-2xl);
 
-  &  > * {
+  & > * {
     display: flex;
     justify-content: center;
   }
 
-  img {
+  & img {
     image-rendering: pixelated;
   }
 }
 
 @media screen and (min-width: 768px) {
   .badge-grid {
-    grid-template-columns: repeat(4,minmax(0,1fr));
+    grid-template-columns: repeat(4, 1fr);
   }
-}
\ No newline at end of file
+}
diff --git a/src/assets/styles/components/banners.css b/src/assets/styles/components/banners.css
index a427570e..4fad34a2 100644
--- a/src/assets/styles/components/banners.css
+++ b/src/assets/styles/components/banners.css
@@ -27,73 +27,41 @@
     border-color: var(--gray-light);
   }
 
-  &.warning {
-    border-color: var(--warning);
-
-    & p a:hover,
-    & p a:active,
-    & p a:focus {
-      color: var(--warning);
-    }
-
-    & svg {
-      stroke: var(--warning);
-    }
-  }
-
-  &.error {
-    border-color: var(--error);
-
-    & p a:hover,
-    & p a:active,
-    & p a:focus {
-      color: var(--error);
-    }
-
-    & svg {
-      stroke: var(--error);
-    }
-  }
-
-  &.npm {
-    border-color: var(--brand-npm);
-
-    & p a:hover,
-    & p a:active,
-    & p a:focus {
-      color: var(--brand-npm);
-    }
-
-    & svg {
-      stroke: var(--brand-npm);
-    }
-  }
-
-  &.github {
-    border-color: var(--brand-github);
-
-    & p a:hover,
-    & p a:active,
-    & p a:focus {
-      color: var(--brand-github);
-    }
-
-    & svg {
-      stroke: var(--brand-github);
-    }
-  }
-
+  &.warning,
+  &.error,
+  &.npm,
+  &.github,
   &.rss {
-    border-color: var(--brand-rss);
+    &.warning {
+      --border-color: var(--warning);
+    }
+
+    &.error {
+      --border-color: var(--error);
+    }
+
+    &.npm {
+      --border-color: var(--brand-npm);
+    }
+
+    &.github {
+      --border-color: var(--brand-github);
+    }
+
+    &.rss {
+      --border-color: var(--brand-rss);
+    }
+
+    border-color: var(--border-color);
 
     & p a:hover,
     & p a:active,
     & p a:focus {
-      color: var(--brand-rss);
+      color: var(--border-color);
     }
 
     & svg {
-      stroke: var(--brand-rss);
+      stroke: var(--border-color);
     }
   }
 }
\ No newline at end of file
diff --git a/src/assets/styles/components/buttons.css b/src/assets/styles/components/buttons.css
index 4eeb78be..ba8f9346 100644
--- a/src/assets/styles/components/buttons.css
+++ b/src/assets/styles/components/buttons.css
@@ -1,5 +1,5 @@
 button {
-  &:not(.theme-toggle, .share) {
+  &:not(.theme-toggle) {
     border-radius: var(--rounded-full);
     padding: var(--sizing-sm) var(--sizing-lg);
     margin: 0 var(--sizing-xs) var(--sizing-md) 0;
@@ -17,9 +17,9 @@ button {
     transition-property: all;
   }
 
-  &:not(.theme-toggle, .share, .active):hover,
-  &:not(.theme-toggle, .share, .active):active,
-  &:not(.theme-toggle, .share, .active):focus {
+  &:not(.theme-toggle, .active):hover,
+  &:not(.theme-toggle, .active):active,
+  &:not(.theme-toggle, .active):focus {
     background-color: var(--accent-color-hover);
     border-color: var(--accent-color-hover);
     transition-timing-function: var(--transition-ease-in-out);
@@ -37,9 +37,9 @@ button {
     background: transparent;
   }
 
-  &.secondary:not(.theme-toggle, .share):hover,
-  &.secondary:not(.theme-toggle, .share):active,
-  &.secondary:not(.theme-toggle, .share):focus {
+  &.secondary:not(.theme-toggle):hover,
+  &.secondary:not(.theme-toggle):active,
+  &.secondary:not(.theme-toggle):focus {
     color: var(--accent-color-hover);
     background: transparent;
   }
diff --git a/src/assets/styles/components/forms.css b/src/assets/styles/components/forms.css
index eec90627..3155a6eb 100644
--- a/src/assets/styles/components/forms.css
+++ b/src/assets/styles/components/forms.css
@@ -36,7 +36,6 @@ textarea:focus {
   list-style: none;
 
   & li {
-    margin-top: var(--sizing-sm);
-    margin-bottom: var(--sizing-sm);
+    margin: var(--sizing-sm) 0;
   }
 }
\ No newline at end of file
diff --git a/src/assets/styles/components/mastodon-post.css b/src/assets/styles/components/mastodon-post.css
deleted file mode 100644
index d8484c40..00000000
--- a/src/assets/styles/components/mastodon-post.css
+++ /dev/null
@@ -1,18 +0,0 @@
-.mastodon-post-wrapper {
-  border-bottom: 1px solid var(--gray-light);
-  margin-bottom: var(--sizing-base);
-  padding-bottom: var(--sizing-base);
-
-  & dl {
-    display: flex;
-    flex-direction: row;
-  }
-
-  & dd {
-    margin-left: var(--sizing-xs);
-
-    &:not(:last-child) {
-      margin-right: var(--sizing-lg);
-    }
-  }
-}
\ No newline at end of file
diff --git a/src/assets/styles/components/media-grid.css b/src/assets/styles/components/media-grid.css
index b6c99d81..abb9ebf9 100644
--- a/src/assets/styles/components/media-grid.css
+++ b/src/assets/styles/components/media-grid.css
@@ -43,7 +43,7 @@
       content: '';
       top: 0;
       left: 1px;
-      box-shadow: inset 0 -70px 50px -40px #000;
+      box-shadow: inset 0 -70px 50px -40px var(--black);
       width: calc(100% - 2px);
       height: calc(100% - 1px);
     }
diff --git a/src/assets/styles/components/music-chart.css b/src/assets/styles/components/music-chart.css
index bac4de33..bf61c516 100644
--- a/src/assets/styles/components/music-chart.css
+++ b/src/assets/styles/components/music-chart.css
@@ -2,6 +2,9 @@
   margin-bottom: var(--sizing-base);
 
   & .item {
+    display: flex;
+    flex-direction: row;
+    align-items: center;
     justify-content: space-between;
 
     &:not(:last-of-type) {
@@ -15,19 +18,23 @@
 
     & img {
       border: 1px solid var(--accent-color);
-    }
-
-    & img {
       width: calc(var(--sizing-3xl) * 1.5);
       height: calc(var(--sizing-3xl) * 1.5);
     }
 
-    & .meta {
+    & .meta,
+    & .presentation {
       justify-content: start;
       gap: var(--sizing-md);
       width: calc(55% - var(--sizing-lg));
     }
 
+    & .meta {
+      display: flex;
+      flex-direction: row;
+      align-items: center;
+    }
+
     & .meta-text {
       display: flex;
       flex-direction: column;
@@ -37,37 +44,28 @@
 
     & .title {
       font-weight: var(--font-weight-bold);
+      white-space: nowrap;
+      text-overflow: ellipsis;
+      overflow: hidden;
+      line-height: 1.5;
     }
 
     & .title,
     & .subtext,
-    & .subtext p {
-      white-space: nowrap;
-      text-overflow: ellipsis;
-      overflow: hidden;
+    & .subtext p,
+    & .timestamp {
+      line-height: 1.5;
     }
 
     & .subtext,
     & .timestamp {
       font-size: var(--font-size-sm);
-    }
-
-    & .title,
-    & .subtext,
-    & .timestamp {
-      line-height: 1.5;
+      white-space: nowrap;
     }
 
     & .timestamp {
       margin-left: var(--sizing-lg);
       text-align: right;
-      white-space: nowrap;
-    }
-
-    & .presentation {
-      display: flex;
-      flex-direction: row;
-      width: calc(55% - var(--sizing-lg));
     }
 
     & .count {
@@ -79,17 +77,10 @@
     }
   }
 
-  & .item,
-  & .meta {
-    display: flex;
-    flex-direction: row;
-    align-items: center;
-  }
-
   &.grid {
     display: grid;
     gap: var(--sizing-sm);
-    grid-template-columns: repeat(2,minmax(0,1fr));
+    grid-template-columns: repeat(2, 1fr);
     margin-bottom: var(--sizing-base);
 
     & .item {
@@ -127,7 +118,7 @@
     }
 
     &.grid {
-      grid-template-columns: repeat(3,minmax(0,1fr));
+      grid-template-columns: repeat(3, 1fr);
 
       & .item img {
         width: calc(var(--sizing-3xl) * 2);
diff --git a/src/assets/styles/components/youtube-video.css b/src/assets/styles/components/youtube-video.css
index a574ae8a..7b3a00ed 100644
--- a/src/assets/styles/components/youtube-video.css
+++ b/src/assets/styles/components/youtube-video.css
@@ -1,3 +1,3 @@
 youtube-video {
-  margin-block: var(--sizing-base);
+  margin-bottom: var(--sizing-base);
 }
\ No newline at end of file
diff --git a/src/assets/styles/defaults/animations.css b/src/assets/styles/defaults/animations.css
deleted file mode 100644
index 2d0f0cd0..00000000
--- a/src/assets/styles/defaults/animations.css
+++ /dev/null
@@ -1,4 +0,0 @@
-@keyframes spin {
-  from { transform: rotate(0deg) }
-  to { transform: rotate(360deg) }
-}
\ No newline at end of file
diff --git a/src/assets/styles/index.css b/src/assets/styles/index.css
index 4c82b9c8..a6d1793a 100644
--- a/src/assets/styles/index.css
+++ b/src/assets/styles/index.css
@@ -6,7 +6,6 @@
 /* core defaults */
 @import url('./defaults/fonts.css') layer(defaults);
 @import url('./defaults/vars.css') layer(defaults);
-@import url('./defaults/animations.css') layer(defaults);
 
  /* base styles */
 @import url('./base/index.css') layer(base);
@@ -31,7 +30,6 @@
 @import url('./components/banners.css') layer(components);
 @import url('./components/buttons.css') layer(components);
 @import url('./components/forms.css') layer(components);
-@import url('./components/mastodon-post.css') layer(components);
 @import url('./components/media-grid.css') layer(components);
 @import url('./components/menu.css') layer(components);
 @import url('./components/music-chart.css') layer(components);
diff --git a/src/assets/styles/pages/media.css b/src/assets/styles/pages/media.css
index 08659438..14efd0d1 100644
--- a/src/assets/styles/pages/media.css
+++ b/src/assets/styles/pages/media.css
@@ -97,6 +97,7 @@
 
       & .subheader {
         font-size: var(--font-size-sm);
+        gap: var(--sizing-xs)
       }
 
       & .header,
diff --git a/src/assets/styles/pages/post.css b/src/assets/styles/pages/post.css
index 8b5b9b4f..d57b92fe 100644
--- a/src/assets/styles/pages/post.css
+++ b/src/assets/styles/pages/post.css
@@ -1,8 +1,4 @@
 /* footnotes */
-hr.footnotes-sep {
-  margin: var(--sizing-base) 0;
-}
-
 .footnotes-list {
   margin-bottom: 0;
   padding-left: 0;
diff --git a/src/assets/styles/plugins/prism.css b/src/assets/styles/plugins/prism.css
index bb925f6f..d026c816 100644
--- a/src/assets/styles/plugins/prism.css
+++ b/src/assets/styles/plugins/prism.css
@@ -1,6 +1,6 @@
 code[class*="language-"],
 pre[class*="language-"] {
-  color: #e2ecff;
+  color: var(--blue-100);
   background: none;
   text-shadow: 0 1px rgba(0, 0, 0, 0.3);
   font-family: var(--font-mono);
@@ -14,31 +14,31 @@ pre[class*="language-"] {
   hyphens: none;
 }
 
-/* Code blocks */
+/* code blocks */
 pre[class*="language-"] {
-  padding: 1rem;
-  margin: 1.25rem 0;
+  padding: var(--sizing-lg);
+  margin: var(--sizing-xl) 0;
   overflow: auto;
-  background: #1a1d22;
+  background: var(--gray-darkest);
   border: 1px solid var(--gray-light);
 }
 
-/* Inline code */
+/* inline code */
 :not(pre) > code[class*="language-"] {
-  padding: 0.1rem;
+  padding: var(--sizing-xs);
   white-space: normal;
-  background: #1a1d22;
+  background: var(--gray-darkest);
 }
 
 .token.comment,
 .token.prolog,
 .token.doctype,
 .token.cdata {
-  color: #7f899b;
+  color: var(--gray-600);
 }
 
 .token.punctuation {
-  color: #dfe3e8; /* Light gray */
+  color: var(--gray-200);
 }
 
 .namespace {
@@ -50,12 +50,12 @@ pre[class*="language-"] {
 .token.constant,
 .token.symbol,
 .token.deleted {
-  color: #4b88ff;
+  color: var(--blue-500);
 }
 
 .token.boolean,
 .token.number {
-  color: #2458d4;
+  color: var(--blue-700);
 }
 
 .token.selector,
@@ -64,7 +64,7 @@ pre[class*="language-"] {
 .token.char,
 .token.builtin,
 .token.inserted {
-  color: #40a02b;
+  color: var(--green-500);
 }
 
 .token.operator,
@@ -73,23 +73,23 @@ pre[class*="language-"] {
 .language-css .token.string,
 .style .token.string,
 .token.variable {
-  color: #e2ecff;
+  color: var(--blue-100);
 }
 
 .token.atrule,
 .token.attr-value,
 .token.function,
 .token.class-name {
-  color: #df8e1d;
+  color: var(--orange-600);
 }
 
 .token.keyword {
-  color: #179299;
+  color: var(--teal-500);
 }
 
 .token.regex,
 .token.important {
-  color: #fe640b;
+  color: var(--orange-500);
 }
 
 .token.important,
diff --git a/src/pages/errors/1000.html b/src/pages/errors/1000.html
index e1b6a9ff..95e22e29 100644
--- a/src/pages/errors/1000.html
+++ b/src/pages/errors/1000.html
@@ -7,7 +7,7 @@ permalink: /1000.html
 <div class="text-centered">
   <h2 class="page-header">{{ title }}</h2>
   <p>Nah, that's no good.</p>
-  <hr class="large-spacing" />
+  <hr />
   ::CLOUDFLARE_ERROR_1000S_BOX::
 </div>
 <script>document.addEventListener('DOMContentLoaded', function () { plausible('1000', { props: { path: document.location.pathname } }); });</script>
\ No newline at end of file
diff --git a/src/pages/errors/404.html b/src/pages/errors/404.html
index 8555332e..ce8a3d1d 100644
--- a/src/pages/errors/404.html
+++ b/src/pages/errors/404.html
@@ -29,7 +29,7 @@ image: https://cdn.coryd.dev/assets/404.jpg
     <h2 class="page-header">{{ title }}</h2>
     What kind of idiots do you have working here? <a href="/">Hurry up and skip out on the room service bill!</a>
   </div>
-  <hr class="large-spacing" />
+  <hr />
   {% render "partials/widgets/addon-links.liquid", popularPosts:collections.popularPosts, links:links %}
 </div>
 <script>document.addEventListener('DOMContentLoaded', function () { plausible('404', { props: { path: document.location.pathname } }); });</script>
\ No newline at end of file
diff --git a/src/pages/errors/500.html b/src/pages/errors/500.html
index 782fcc7a..03c74ebb 100644
--- a/src/pages/errors/500.html
+++ b/src/pages/errors/500.html
@@ -7,7 +7,7 @@ permalink: /500.html
 <div class="text-centered">
   <h2 class="page-header">{{ title }}</h2>
   <p>Nah, that's no good.</p>
-  <hr class="large-spacing" />
+  <hr />
   ::CLOUDFLARE_ERROR_500S_BOX::
 </div>
 <script>document.addEventListener('DOMContentLoaded', function () { plausible('500', { props: { path: document.location.pathname } }); });</script>
\ No newline at end of file
diff --git a/src/pages/errors/captcha.html b/src/pages/errors/captcha.html
index 50132226..82bd985b 100644
--- a/src/pages/errors/captcha.html
+++ b/src/pages/errors/captcha.html
@@ -7,7 +7,7 @@ permalink: /captcha.html
 <div class="text-centered">
   <h2 class="page-header">{{ title }}</h2>
   <p>Nah, that's no good.</p>
-  <hr class="large-spacing" />
+  <hr />
   ::CAPTCHA_BOX::
 </div>
 <script>document.addEventListener('DOMContentLoaded', function () { plausible('Captcha', { props: { path: document.location.pathname } }); });</script>
\ No newline at end of file
diff --git a/src/pages/errors/js-challenge.html b/src/pages/errors/js-challenge.html
index e0d1514b..aea635f2 100644
--- a/src/pages/errors/js-challenge.html
+++ b/src/pages/errors/js-challenge.html
@@ -7,7 +7,7 @@ permalink: /js-challenge.html
 <div class="text-centered">
   <h2 class="page-header">{{ title }}</h2>
   <p>Nah, that's no good.</p>
-  <hr class="large-spacing" />
+  <hr />
   ::IM_UNDER_ATTACK_BOX::
 </div>
 <script>document.addEventListener('DOMContentLoaded', function () { plausible('JS challenge', { props: { path: document.location.pathname } }); });</script>
\ No newline at end of file
diff --git a/src/pages/main/books/book.html b/src/pages/main/books/book.html
index 3be3589f..8e8dd86c 100644
--- a/src/pages/main/books/book.html
+++ b/src/pages/main/books/book.html
@@ -50,7 +50,7 @@ schema: book
   </div>
   {% if book.review %}
     {{ book.review | markdown }}
-    <hr class="large-spacing" />
+    <hr />
   {% endif %}
   {% if book.description %}
     <h2>Overview</h2>
diff --git a/src/pages/main/books/index.html b/src/pages/main/books/index.html
index 2d224cdd..7099a853 100644
--- a/src/pages/main/books/index.html
+++ b/src/pages/main/books/index.html
@@ -12,7 +12,7 @@ schema: books
 <p>Here's what I'm reading at the moment. I've finished <strong class="highlight-text">{{ currentBookCount }} books</strong> this year.</p>
 <p><a href="/books/years/2024">2024</a> / <a href="/books/years/2023">2023</a> / <a href="/books/years/2022">2022</a> / <a href="/books/years/2021">2021</a> / <a href="/books/years/2020">2020</a></p>
 {% render "partials/banners/rss.liquid", url: "https://feedpress.me/coryd-books", text: "Subscribe to my books feed or follow along on this page" %}
-<hr class="large-spacing" />
+<hr />
 {% for book in bookData %}
 {% capture alt %}{{ book.title }} by {{ book.authors }}{% endcapture %}
 <article class="book-entry">
diff --git a/src/pages/main/links.html b/src/pages/main/links.html
index aaa28d82..be77c97b 100644
--- a/src/pages/main/links.html
+++ b/src/pages/main/links.html
@@ -10,7 +10,7 @@ permalink: "/links/{% if pagination.pageNumber > 0 %}{{ pagination.pageNumber }}
 <h2 class="page-header">Links</h2>
 <p>These are links I've liked or otherwise found interesting. They're all added manually, after having been read and, I suppose, properly considered. Authors are associated with domains using a simple key-value map.</p>
 {% render "partials/banners/rss.liquid", url: "https://feedpress.me/coryd-links", text: "Subscribe to my links feed or follow along on this page" %}
-<hr class="large-spacing" />
+<hr />
 {% endif %}
 <div class="link-grid">
   {% for link in pagination.items %}
diff --git a/src/pages/main/music/albums/3-months.html b/src/pages/main/music/albums/3-months.html
index 51083c5d..32c3c4de 100644
--- a/src/pages/main/music/albums/3-months.html
+++ b/src/pages/main/music/albums/3-months.html
@@ -14,6 +14,6 @@ schema: music
 <h2 class="page-header">{{ 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>
 <p><strong class="highlight-text">See the</strong> <a href="/music/artists/three-months/">artists</a> or <a href="/music/tracks/three-months/">tracks</a> I've listened to over the last 3 months.</p>
-<hr class="large-spacing" />
+<hr />
 {% endif %}
 {% render "partials/media/grid.liquid" data:pagination, shape: "square" %}
\ No newline at end of file
diff --git a/src/pages/main/music/albums/this-month.html b/src/pages/main/music/albums/this-month.html
index 958c374b..4e8206c5 100644
--- a/src/pages/main/music/albums/this-month.html
+++ b/src/pages/main/music/albums/this-month.html
@@ -14,6 +14,6 @@ schema: music
 <h2 class="page-header">{{ 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>
 <p><strong class="highlight-text">See the</strong> <a href="/music/artists/this-month/">artists</a> or <a href="/music/tracks/this-month/">tracks</a> I've listened to this month.</p>
-<hr class="large-spacing" />
+<hr />
 {% endif %}
 {% render "partials/media/grid.liquid" data:pagination, shape: "square" %}
\ No newline at end of file
diff --git a/src/pages/main/music/albums/this-week.html b/src/pages/main/music/albums/this-week.html
index ca64d8b3..f9816641 100644
--- a/src/pages/main/music/albums/this-week.html
+++ b/src/pages/main/music/albums/this-week.html
@@ -14,6 +14,6 @@ schema: music
 <h2 class="page-header">{{ 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>
 <p><strong class="highlight-text">See the</strong> <a href="/music/artists/this-week/">artists</a> or <a href="/music/tracks/this-week/">tracks</a> I've listened to this week.</p>
-<hr class="large-spacing" />
+<hr />
 {% endif %}
 {% render "partials/media/grid.liquid" data:pagination, shape: "square" %}
\ No newline at end of file
diff --git a/src/pages/main/music/artists/3-months.html b/src/pages/main/music/artists/3-months.html
index f22cd96e..c06b0cc1 100644
--- a/src/pages/main/music/artists/3-months.html
+++ b/src/pages/main/music/artists/3-months.html
@@ -14,6 +14,6 @@ schema: music
 <h2 class="page-header">{{ 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>
 <p><strong class="highlight-text">See the</strong> <a href="/music/albums/three-months/">albums</a> or <a href="/music/tracks/three-months/">tracks</a> I've listened to over the last 3 months.</p>
-<hr class="large-spacing" />
+<hr />
 {% endif %}
 {% render "partials/media/grid.liquid" data:pagination, shape: "square" %}
\ No newline at end of file
diff --git a/src/pages/main/music/artists/this-month.html b/src/pages/main/music/artists/this-month.html
index 4ecb9f23..8e9904b6 100644
--- a/src/pages/main/music/artists/this-month.html
+++ b/src/pages/main/music/artists/this-month.html
@@ -14,6 +14,6 @@ schema: music
 <h2 class="page-header">{{ 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>
 <p><strong class="highlight-text">See the</strong> <a href="/music/albums/this-month/">albums</a> or <a href="/music/tracks/this-month/">tracks</a> I've listened to this month.</p>
-<hr class="large-spacing" />
+<hr />
 {% endif %}
 {% render "partials/media/grid.liquid" data:pagination, shape: "square" %}
\ No newline at end of file
diff --git a/src/pages/main/music/artists/this-week.html b/src/pages/main/music/artists/this-week.html
index f86df6af..d658776f 100644
--- a/src/pages/main/music/artists/this-week.html
+++ b/src/pages/main/music/artists/this-week.html
@@ -14,6 +14,6 @@ schema: music
 <h2 class="page-header">{{ 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>
 <p><strong class="highlight-text">See the</strong> <a href="/music/albums/this-week/">albums</a> or <a href="/music/tracks/this-week/">tracks</a> I've listened to this week.</p>
-<hr class="large-spacing" />
+<hr />
 {% endif %}
 {% render "partials/media/grid.liquid" data:pagination, shape: "square" %}
\ No newline at end of file
diff --git a/src/pages/main/music/genre.html b/src/pages/main/music/genre.html
index da2d0a73..b777e6d6 100644
--- a/src/pages/main/music/genre.html
+++ b/src/pages/main/music/genre.html
@@ -25,7 +25,7 @@ schema: genre
 <h2 class="page-header">{{ genre.name }}</h2>
 <article class="genre-focus">
   <p>My top <strong class="highlight-text">{{ genre.name }}</strong> artists {{ connectingWord }} {{ genre.artists | sortByPlaysDescending: "total_plays" | mediaLinks: "artist", 5 }}. I've listened to <strong class="highlight-text">{{ genre.total_plays | formatNumber }}</strong> tracks form this genre.</p>
-  <hr class="large-spacing" />
+  <hr />
   {%- if genre.description -%}
   <div data-toggle-content class="text-toggle-hidden">
     {{ genre.description | markdown }}
diff --git a/src/pages/main/music/index.html b/src/pages/main/music/index.html
index a10dcccc..2f79346c 100644
--- a/src/pages/main/music/index.html
+++ b/src/pages/main/music/index.html
@@ -15,7 +15,7 @@ schema: music-index
 <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>
 <p><strong class="highlight-text">See more of the</strong> <a href="/music/artists/this-week/">artists</a>, <a href="/music/albums/this-week/">albums</a> or <a href="/music/tracks/this-week/">tracks</a> I've listened to this week.</p>
 {% render "partials/widgets/now-playing.liquid" %}
-<hr class="large-spacing" />
+<hr />
 <a class="link-icon flex-centered" href="/music/artists/this-week">
   <h2 id="artists" class="section-header no-top-margin flex-centered">
     {% tablericon "microphone-2" "Artists" %}
diff --git a/src/pages/main/music/periods/3-months.html b/src/pages/main/music/periods/3-months.html
index ef6cd453..1cab115b 100644
--- a/src/pages/main/music/periods/3-months.html
+++ b/src/pages/main/music/periods/3-months.html
@@ -10,7 +10,7 @@ schema: music-period
 <h2 class="page-header">{{ 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>
 <p><strong class="highlight-text">See more of the</strong> <a href="/music/artists/three-months/">artists</a>, <a href="/music/albums/three-months/">albums</a> or <a href="/music/tracks/three-months/">tracks</a> I've listened to over the last 3 months.</p>
-<hr class="large-spacing" />
+<hr />
 <a class="link-icon flex-centered" href="/music/artists/three-months">
   <h2 id="artists" class="section-header no-top-margin flex-centered">
     {% tablericon "microphone-2" "Artists" %}
diff --git a/src/pages/main/music/periods/this-month.html b/src/pages/main/music/periods/this-month.html
index 6788d726..84e94bcf 100644
--- a/src/pages/main/music/periods/this-month.html
+++ b/src/pages/main/music/periods/this-month.html
@@ -10,7 +10,7 @@ schema: music-period
 <h2 class="page-header">{{ 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>
 <p><strong class="highlight-text">See more of the</strong> <a href="/music/artists/this-month/">artists</a>, <a href="/music/albums/this-month/">albums</a> or <a href="/music/tracks/this-month/">tracks</a> I've listened to this month.</p>
-<hr class="large-spacing" />
+<hr />
 <a class="link-icon flex-centered" href="/music/artists/this-month">
   <h2 id="artists" class="section-header no-top-margin flex-centered">
     {% tablericon "microphone-2" "Artists" %}
diff --git a/src/pages/main/music/tracks/3-months.html b/src/pages/main/music/tracks/3-months.html
index cf0f72e6..58503da4 100644
--- a/src/pages/main/music/tracks/3-months.html
+++ b/src/pages/main/music/tracks/3-months.html
@@ -14,6 +14,6 @@ schema: music
 <h2 class="page-header">{{ 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>
 <p><strong class="highlight-text">See the</strong> <a href="/music/artists/three-months/">artists</a> or <a href="/music/albums/three-months/">albums</a> I've listened to over the last 3 months.</p>
-<hr class="large-spacing" />
+<hr />
 {% endif %}
 {% render "partials/media/music/chart.liquid" data:pagination, playTotal: music.threeMonth.tracks[0].plays %}
\ No newline at end of file
diff --git a/src/pages/main/music/tracks/this-month.html b/src/pages/main/music/tracks/this-month.html
index 10eea7d6..09971ad3 100644
--- a/src/pages/main/music/tracks/this-month.html
+++ b/src/pages/main/music/tracks/this-month.html
@@ -14,6 +14,6 @@ schema: music
 <h2 class="page-header">{{ 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>
 <p><strong class="highlight-text">See the</strong> <a href="/music/artists/this-month/">artists</a> or <a href="/music/albums/this-month/">albums</a> this month.</p>
-<hr class="large-spacing" />
+<hr />
 {% endif %}
 {% render "partials/media/music/chart.liquid" data:pagination, playTotal: music.month.tracks[0].plays %}
\ No newline at end of file
diff --git a/src/pages/main/music/tracks/this-week.html b/src/pages/main/music/tracks/this-week.html
index 9fce10d5..3af91f7e 100644
--- a/src/pages/main/music/tracks/this-week.html
+++ b/src/pages/main/music/tracks/this-week.html
@@ -14,6 +14,6 @@ schema: music
 <h2 class="page-header">{{ 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>
 <p><strong class="highlight-text">See the</strong> <a href="/music/artists/this-week/">artists</a> or <a href="/music/albums/this-week/">albums</a> I've listened to this week.</p>
-<hr class="large-spacing" />
+<hr />
 {% endif %}
 {% render "partials/media/music/chart.liquid" data:pagination, playTotal: music.week.tracks[0].plays %}
\ No newline at end of file
diff --git a/src/pages/main/now.html b/src/pages/main/now.html
index 28e15c8f..a10f4a6b 100644
--- a/src/pages/main/now.html
+++ b/src/pages/main/now.html
@@ -17,5 +17,5 @@ updated: 2024-05-18T15:49:00Z
 <p><strong class="highlight-text">Encouraging folks to block AI web crawlers:</strong> <a href="https://coryd.dev/posts/2024/go-ahead-and-block-ai-web-crawlers/">they're insidious, abusive and should be blocked.</a> <a href="https://github.com/ai-robots-txt/ai.robots.txt">I'm happy to take contributions, once again,</a> as we encourage folks to block them as best they can.</p>
 <h3>Mentoring</h3>
 <p>I've been mentoring through <a href="https://www.underdogdevs.org">Underdog Devs</a> on and off for a few years now and find it incredibly rewarding.</p>
-<hr class="large-spacing" />
+<hr />
 <p>This is a <a href="https://nownownow.com/about">now page</a>, and if you have your own site, <a href="https://nownownow.com/about">you should make one too</a>.</p>
\ No newline at end of file
diff --git a/src/pages/main/posts/index.html b/src/pages/main/posts/index.html
index d5eec815..ce8fba64 100644
--- a/src/pages/main/posts/index.html
+++ b/src/pages/main/posts/index.html
@@ -10,7 +10,7 @@ permalink: "/posts/{% if pagination.pageNumber > 0 %}{{ pagination.pageNumber }}
 <div class="posts-wrapper">
   {% for post in pagination.items %}
   <article class="h-entry">
-    <div class="flex-centered gap-xs icon-small icon-light">
+    <div class="time-wrapper flex-centered">
       {% tablericon "calendar-month" "Date" %}
       <time class="dt-published" datetime="{{ post.date }}">
         {{ post.date | date: "%B %e, %Y" }}
diff --git a/src/pages/main/posts/post.html b/src/pages/main/posts/post.html
index 2a907f06..2942d0a8 100644
--- a/src/pages/main/posts/post.html
+++ b/src/pages/main/posts/post.html
@@ -8,7 +8,7 @@ permalink: "{{ post.slug }}/index.html"
 schema: blog
 ---
 <article class="h-entry">
-  <div class="flex-centered gap-xs icon-small icon-light">
+  <div class="time-wrapper flex-centered">
     {% tablericon "calendar-month" "Date" %}
     <time class="dt-published" datetime="{{ date }}">
       {{ post.date | date: "%B %e, %Y" }}
diff --git a/src/pages/main/watching/favorites/movies.html b/src/pages/main/watching/favorites/movies.html
index 53bd4ae8..cebe24ec 100644
--- a/src/pages/main/watching/favorites/movies.html
+++ b/src/pages/main/watching/favorites/movies.html
@@ -12,6 +12,6 @@ schema: watching
 {% 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>
-<hr class="large-spacing" />
+<hr />
 {% endif %}
 {% render "partials/media/watching/grid.liquid", data:pagination %}
\ No newline at end of file
diff --git a/src/pages/main/watching/favorites/shows.html b/src/pages/main/watching/favorites/shows.html
index a53c7623..b2d20f13 100644
--- a/src/pages/main/watching/favorites/shows.html
+++ b/src/pages/main/watching/favorites/shows.html
@@ -12,6 +12,6 @@ schema: watching
 {% 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>
-<hr class="large-spacing" />
+<hr />
 {% endif %}
 {% render "partials/media/watching/grid.liquid", data:pagination %}
\ No newline at end of file
diff --git a/src/pages/main/watching/index.html b/src/pages/main/watching/index.html
index 802e57a0..9701b5f6 100644
--- a/src/pages/main/watching/index.html
+++ b/src/pages/main/watching/index.html
@@ -11,7 +11,7 @@ schema: watching
 {% render "partials/media/watching/hero.liquid" movie:featuredMovie %}
 <p>Here's all of the TV and movies I've been watching presented in what is (hopefully) an organized fashion. You can also take a look at the <a href="/watching/movies-to-watch">movies</a> and <a href="/watching/shows-to-watch">shows</a> I'm planning to watch.</p>
 {% render "partials/banners/rss.liquid", url: "https://feedpress.me/coryd-movies", text: "Subscribe to my movies feed or follow along on this page" %}
-<hr class="large-spacing" />
+<hr />
 <a class="link-icon flex-centered" href="/watching/recent/movies">
   <h2 id="movies" class="section-header no-top-margin flex-centered">
     {% tablericon "movie" "Recent movies" %}
diff --git a/src/pages/main/watching/movie.html b/src/pages/main/watching/movie.html
index dca3b0fd..f67fd324 100644
--- a/src/pages/main/watching/movie.html
+++ b/src/pages/main/watching/movie.html
@@ -40,7 +40,7 @@ schema: movie
   {% if movie.review %}
     {% render "partials/banners/warning.liquid", text: "There are probably spoilers after this banner — this is a warning about them." %}
     {{ movie.review | markdown }}
-    <hr class="large-spacing" />
+    <hr />
   {% endif %}
   {% if movie.description %}
     <h2>Overview</h2>
diff --git a/src/pages/main/watching/recent/movies.html b/src/pages/main/watching/recent/movies.html
index 63452e26..875ea557 100644
--- a/src/pages/main/watching/recent/movies.html
+++ b/src/pages/main/watching/recent/movies.html
@@ -12,6 +12,6 @@ schema: watching
 {% 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>
-<hr class="large-spacing" />
+<hr />
 {% endif %}
 {% render "partials/media/watching/grid.liquid", data:pagination %}
\ No newline at end of file
diff --git a/src/pages/main/watching/recent/shows.html b/src/pages/main/watching/recent/shows.html
index fb99ecf3..15709207 100644
--- a/src/pages/main/watching/recent/shows.html
+++ b/src/pages/main/watching/recent/shows.html
@@ -12,6 +12,6 @@ schema: watching
 {% 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>
-<hr class="large-spacing" />
+<hr />
 {% endif %}
 {% render "partials/media/watching/grid.liquid", data:pagination %}
\ No newline at end of file
diff --git a/src/pages/main/watching/show.html b/src/pages/main/watching/show.html
index 9d4a9932..4712556c 100644
--- a/src/pages/main/watching/show.html
+++ b/src/pages/main/watching/show.html
@@ -39,7 +39,7 @@ schema: show
   </div>
   {% if show.review %}
     {{ show.review | markdown }}
-    <hr class="large-spacing" />
+    <hr />
   {% endif %}
   {% if show.description %}
     <h2>Overview</h2>
diff --git a/src/pages/secondary/contact/success.html b/src/pages/secondary/contact/success.html
index b786e313..7d9fcd35 100644
--- a/src/pages/secondary/contact/success.html
+++ b/src/pages/secondary/contact/success.html
@@ -8,5 +8,5 @@ description: I'll be in touch soon. Thanks for your message!
   <h2 class="contact-success-header">{{ title }}</h2>
     I'll be in touch soon! <a href="/">Head home</a>
 </div>
-<hr class="large-spacing" />
+<hr />
 {% render "partials/widgets/addon-links.liquid", popularPosts:collections.popularPosts, links:links %}
\ No newline at end of file
diff --git a/src/pages/secondary/uses.md b/src/pages/secondary/uses.md
index 94f3cb72..a10cc6c2 100644
--- a/src/pages/secondary/uses.md
+++ b/src/pages/secondary/uses.md
@@ -69,6 +69,6 @@ Software and services that I use for work and my own enjoyment.
 - [Backblaze](https://backblaze.com): It backs up my MacBook Air and attached storage drive and I don't have to think about it.
 - <a class="plausible-event-name=Proton+referral" href="https://pr.tn/ref/X775YX40Z50G">Proton</a>: a reliable, trustworthy VPN with all of the features you'd expect from such a service.
 
-<hr class="large-spacing" />
+<hr />
 
 Check out [uses.tech](https://uses.tech) for more lists like this one.