From 8a8de24caa91d59b2d7953893ff8e7e8da944b5d Mon Sep 17 00:00:00 2001
From: Cory Dransfeldt <hi@coryd.dev>
Date: Sun, 15 Sep 2024 12:49:33 -0700
Subject: [PATCH] chore: remove utility classes + cleanup

---
 package-lock.json                             |   4 +-
 package.json                                  |   2 +-
 src/assets/styles/base/index.css              |  57 ++---
 src/assets/styles/components/badge-grid.css   |   1 -
 src/assets/styles/components/buttons.css      |   3 -
 src/assets/styles/components/forms.css        |  11 +-
 src/assets/styles/components/media-grid.css   |   6 +-
 src/assets/styles/components/menu.css         | 232 +++++++++---------
 src/assets/styles/components/modal.css        |   2 +-
 src/assets/styles/components/paginator.css    |   8 +
 src/assets/styles/components/progress-bar.css |   2 +-
 src/assets/styles/components/tab-buttons.css  |   8 +-
 src/assets/styles/defaults/fonts.css          |   2 +-
 src/assets/styles/defaults/vars.css           |   4 +
 src/assets/styles/pages/about.css             |   9 +-
 src/assets/styles/pages/contact.css           |   5 +
 src/assets/styles/pages/watching.css          |   2 +
 src/assets/styles/pages/webrings.css          |   8 +
 src/includes/partials/blocks/avatar.liquid    |   2 +-
 src/includes/partials/footer.liquid           |   8 +-
 src/includes/partials/home/posts.liquid       |   4 +-
 .../partials/media/watching/grid.liquid       |   4 +-
 src/includes/partials/nav/menu.liquid         |   4 +-
 src/includes/partials/nav/paginator.liquid    |   6 +-
 src/includes/webrings/css-joy.liquid          |   8 +-
 src/includes/webrings/the-claw.liquid         |   8 +-
 src/pages/dynamic/music/index.html            |   8 +-
 src/pages/static/about.md                     |   4 +-
 src/pages/static/contact.html                 |  10 +-
 src/pages/static/search.html                  |  29 ++-
 30 files changed, 247 insertions(+), 214 deletions(-)

diff --git a/package-lock.json b/package-lock.json
index 874d4c95..20475c4a 100644
--- a/package-lock.json
+++ b/package-lock.json
@@ -1,12 +1,12 @@
 {
   "name": "coryd.dev",
-  "version": "24.8.7",
+  "version": "24.9.0",
   "lockfileVersion": 3,
   "requires": true,
   "packages": {
     "": {
       "name": "coryd.dev",
-      "version": "24.8.7",
+      "version": "24.9.0",
       "license": "MIT",
       "dependencies": {
         "@cdransf/api-text": "^1.5.0",
diff --git a/package.json b/package.json
index ff71a6af..a55d9aa5 100644
--- a/package.json
+++ b/package.json
@@ -1,6 +1,6 @@
 {
   "name": "coryd.dev",
-  "version": "24.8.7",
+  "version": "24.9.0",
   "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 92bc917b..150e8df2 100644
--- a/src/assets/styles/base/index.css
+++ b/src/assets/styles/base/index.css
@@ -83,6 +83,13 @@ p {
   }
 }
 
+.highlight-text {
+  color: var(--color-lightest);
+  background-color: var(--accent-color);
+  padding: var(--spacing-xs);
+  border-radius: var(--border-radius-slight);
+}
+
 blockquote {
   font-size: var(--font-size-lg);
   color: var(--gray-dark);
@@ -98,7 +105,7 @@ code {
   border-radius: var(--border-radius-slight);
 }
 
-p:not(.flex-centered):not(.banner p) > svg {
+p:not(.banner p) > svg {
   margin-bottom: var(--inline-margin-bottom);
 }
 
@@ -289,6 +296,7 @@ h6 {
 }
 
 .section-header {
+  display: flex;
   margin: var(--spacing-xl) 0 var(--spacing-lg);
   line-height: var(--line-height-sm);
 
@@ -470,22 +478,32 @@ article {
 }
 
 footer {
-  & p:first-of-type {
-    margin: var(--spacing-3xl) 0 var(--spacing-lg);
+  & .updated {
+    text-align: center;
     font-size: var(--font-size-sm);
+    margin: var(--spacing-3xl) 0 var(--spacing-lg);
   }
 
   & nav {
+    &.social,
+    &.sub-pages {
+      display: flex;
+      flex-direction: row;
+      align-items: center;
+      justify-content: center;
+    }
+
     &.social {
       gap: var(--spacing-md);
       margin-bottom: var(--spacing-lg);
       width: 100%;
 
-      & svg {
-        margin-top: 0;
+      & .icon > span,
+      & .active > span {
+        display: none;
       }
 
-      & a {
+      & .active {
         display: flex;
       }
     }
@@ -510,7 +528,6 @@ footer {
 article {
   & h3 {
     margin: 0;
-    display: inline-block;
   }
 
   & time {
@@ -539,30 +556,4 @@ ul, ol {
   height: auto;
   width: 100%;
   display: block;
-}
-
-/* utilities */
-.highlight-text {
-  color: var(--color-lightest);
-  background-color: var(--accent-color);
-  padding: var(--spacing-xs);
-  border-radius: var(--border-radius-slight);
-}
-
-.hidden {
-  display: none !important;
-}
-
-.text-centered {
-  text-align: center !important;
-}
-
-.flex-centered {
-  display: flex;
-  flex-direction: row;
-  align-items: center;
-}
-
-.justify-centered {
-  justify-content: center;
 }
\ No newline at end of file
diff --git a/src/assets/styles/components/badge-grid.css b/src/assets/styles/components/badge-grid.css
index bd19392a..aa3c972c 100644
--- a/src/assets/styles/components/badge-grid.css
+++ b/src/assets/styles/components/badge-grid.css
@@ -2,7 +2,6 @@
   display: grid;
   gap: var(--spacing-md);
   grid-template-columns: repeat(3, 1fr);
-  margin-top: var(--spacing-2xl);
 
   @media screen and (min-width: 768px) {
     grid-template-columns: repeat(4, 1fr);
diff --git a/src/assets/styles/components/buttons.css b/src/assets/styles/components/buttons.css
index f30e464b..0bdec78f 100644
--- a/src/assets/styles/components/buttons.css
+++ b/src/assets/styles/components/buttons.css
@@ -15,9 +15,6 @@ button,
     border-radius: var(--border-radius-full);
     padding: var(--spacing-xs) var(--spacing-md);
     cursor: pointer;
-    display: inline-flex;
-    flex-direction: row;
-    justify-content: center;
     font-size: var(--font-size-base);
     font-weight: var(--font-weight-bold);
     line-height: var(--line-height-base);
diff --git a/src/assets/styles/components/forms.css b/src/assets/styles/components/forms.css
index 96ade4e4..9622555d 100644
--- a/src/assets/styles/components/forms.css
+++ b/src/assets/styles/components/forms.css
@@ -7,9 +7,7 @@ input[type="text"],
 input[type="email"],
 input[type="search"],
 textarea {
-  font-family: var(--font-mono);
-  font-size: var(--font-size-base);
-  font-weight: var(--font-weight-base);
+  font: var(--font-weight-base) var(--font-size-base) var(--font-mono);
   line-height: var(--line-height-base);
   color: var(--text-color);
   background-color: var(--background-color);
@@ -47,7 +45,7 @@ select:focus-within {
 
 select {
   color: var(--text-color);
-  border: 1px solid var(--text-color);
+  border: var(--border-gray);
   border-radius: var(--border-radius-slight);
   background-color: var(--background-color);
   padding: var(--spacing-xs) var(--spacing-sm);
@@ -55,12 +53,17 @@ select {
 
 .search__form {
   margin-top: 0;
+
+  & .search__form--input::-webkit-search-cancel-button {
+    cursor: pointer;
+  }
 }
 
 .search__results {
   margin: 0 0 var(--spacing-base);
   padding: 0;
   list-style: none;
+  display: none;
 
   & li {
     margin: var(--spacing-sm) 0;
diff --git a/src/assets/styles/components/media-grid.css b/src/assets/styles/components/media-grid.css
index 079087cb..fe8208de 100644
--- a/src/assets/styles/components/media-grid.css
+++ b/src/assets/styles/components/media-grid.css
@@ -66,9 +66,7 @@
       height: 100%;
       border: var(--border-default);
       border-radius: var(--border-radius-slight);
-      transition-property: border-color;
-      transition-timing-function: var(--transition-ease-in-out);
-      transition-duration: var(--transition-duration-default);
+      transition: border-color var(--transition-duration-default) var(--transition-ease-in-out);
     }
   }
 
@@ -104,8 +102,8 @@
       display: -webkit-box;
       -webkit-box-orient: vertical;
       -webkit-line-clamp: 6;
-      overflow: hidden;
       text-overflow: ellipsis;
+      overflow: hidden;
     }
   }
 }
\ No newline at end of file
diff --git a/src/assets/styles/components/menu.css b/src/assets/styles/components/menu.css
index 5977564a..7a1fb72a 100644
--- a/src/assets/styles/components/menu.css
+++ b/src/assets/styles/components/menu.css
@@ -1,141 +1,147 @@
-.menu-primary {
+menu {
   display: flex;
   flex-direction: row;
-  list-style: none;
-  margin: 0;
-  padding: 0;
-  gap: var(--spacing-md);
+  align-items: center;
 
-  & > li {
-    margin: 0;
+  & .menu-primary {
     display: flex;
-
-    & .icon > svg,
-    & .active > svg {
-      display: block;
-    }
-
-    & .icon > span,
-    & .active > span {
-      display: none;
-    }
-  }
-}
-
-.menu-button-container {
-  display: none;
-  outline: none;
-  margin-left: var(--spacing-md);
-
-  & svg {
-    cursor: pointer;
-  }
-
-  &:focus,
-  &:focus-within {
-    outline: var(--outline-default);
-    border-radius: var(--border-radius-slight);
-  }
-
-  &:hover svg,
-  &:focus svg,
-  &:focus-within svg,
-  &:active svg {
-    stroke: var(--accent-color-hover);
-  }
-}
-
-#menu-toggle {
-  display: none;
-
-  &:checked + .menu-button-container {
-    & .menu-closed {
-      display: none;
-    }
-
-    & .menu-open {
-      display: block;
-    }
-  }
-
-  &:not(:checked) + .menu-button-container {
-    & .menu-closed {
-      display: block;
-    }
-
-    & .menu-open {
-      display: none;
-    }
-  }
-}
-
-@media (max-width: 768px) {
-  .menu-primary {
-    position: absolute;
-    top: 0;
-    left: 0;
-    gap: 0;
-    margin-top: calc(var(--spacing-3xl) * 2.25);
-    flex-direction: column;
-    width: 100%;
-    z-index: 3;
+    flex-direction: row;
+    list-style: none;
+    margin: 0;
+    padding: 0;
+    gap: var(--spacing-md);
 
     & > li {
-      overflow: hidden;
-      align-items: center;
-      justify-content: center;
       margin: 0;
-      padding: var(--spacing-sm) 0;
-      width: 100%;
-      color: var(--text-color);
-      background: var(--background-color);
+      display: flex;
 
       & .icon > svg,
       & .active > svg {
-        display: none;
+        display: block;
       }
 
       & .icon > span,
       & .active > span {
-        display: inline;
+        display: none;
       }
     }
   }
 
-  #menu-toggle ~ .menu-primary li {
-    height: 0;
-    border: 0;
-    padding: 0;
-  }
+  & .menu-button-container {
+    display: none;
+    outline: none;
+    margin-left: var(--spacing-md);
 
-  #menu-toggle:checked ~ .menu-primary li {
-    border-bottom: var(--border-gray);
-    height: calc(var(--sizing-3xl) * 1.5);
-
-    &:first-child {
-      border-top: var(--border-gray);
-    }
-
-    & a,
-    & .active {
-      font-size: var(--font-size-lg);
-    }
-
-    &:focus a,
-    &:focus-within a {
-      outline: none;
+    & svg {
+      cursor: pointer;
     }
 
     &:focus,
     &:focus-within {
-      border-top: var(--outline-default);
-      border-bottom: var(--outline-default);
+      outline: var(--outline-default);
+      border-radius: var(--border-radius-slight);
+    }
+
+    &:hover svg,
+    &:focus svg,
+    &:focus-within svg,
+    &:active svg {
+      stroke: var(--accent-color-hover);
     }
   }
 
-  .menu-button-container {
-    display: unset;
-    width: var(--sizing-svg-base);
-    height: var(--sizing-svg-base);
+  & #menu-toggle {
+    display: none;
+
+    &:checked + .menu-button-container {
+      & .menu-closed {
+        display: none;
+      }
+
+      & .menu-open {
+        display: block;
+      }
+    }
+
+    &:not(:checked) + .menu-button-container {
+      & .menu-closed {
+        display: block;
+      }
+
+      & .menu-open {
+        display: none;
+      }
+    }
+  }
+
+  @media (max-width: 768px) {
+    .menu-primary {
+      position: absolute;
+      top: 0;
+      left: 0;
+      gap: 0;
+      margin-top: calc(var(--spacing-3xl) * 2.25);
+      flex-direction: column;
+      width: 100%;
+      z-index: 3;
+
+      & > li {
+        overflow: hidden;
+        align-items: center;
+        justify-content: center;
+        margin: 0;
+        padding: var(--spacing-sm) 0;
+        width: 100%;
+        color: var(--text-color);
+        background: var(--background-color);
+
+        & .icon > svg,
+        & .active > svg {
+          display: none;
+        }
+
+        & .icon > span,
+        & .active > span {
+          display: inline;
+        }
+      }
+    }
+
+    #menu-toggle ~ .menu-primary li {
+      height: 0;
+      border: 0;
+      padding: 0;
+    }
+
+    #menu-toggle:checked ~ .menu-primary li {
+      border-bottom: var(--border-gray);
+      height: calc(var(--sizing-3xl) * 1.5);
+
+      &:first-child {
+        border-top: var(--border-gray);
+      }
+
+      & a,
+      & .active {
+        font-size: var(--font-size-lg);
+      }
+
+      &:focus a,
+      &:focus-within a {
+        outline: none;
+      }
+
+      &:focus,
+      &:focus-within {
+        border-top: var(--outline-default);
+        border-bottom: var(--outline-default);
+      }
+    }
+
+    .menu-button-container {
+      display: unset;
+      width: var(--sizing-svg-base);
+      height: var(--sizing-svg-base);
+    }
   }
 }
\ No newline at end of file
diff --git a/src/assets/styles/components/modal.css b/src/assets/styles/components/modal.css
index c5890c40..221c0899 100644
--- a/src/assets/styles/components/modal.css
+++ b/src/assets/styles/components/modal.css
@@ -2,7 +2,7 @@
   width: 100%;
   height: 100%;
   inset: 0;
-  background: #000000b3;
+  background: var(--gray-overlay);
   position: fixed;
   z-index: 3;
 
diff --git a/src/assets/styles/components/paginator.css b/src/assets/styles/components/paginator.css
index c69b9789..759076d1 100644
--- a/src/assets/styles/components/paginator.css
+++ b/src/assets/styles/components/paginator.css
@@ -1,4 +1,7 @@
 .pagination {
+  display: flex;
+  flex-direction: row;
+  align-items: center;
   justify-content: space-between;
 
   & button {
@@ -11,6 +14,11 @@
     display: flex;
   }
 
+  & p {
+    text-align: center;
+    margin: 0;
+  }
+
   & span.disabled svg[data-tablericon-name^="arrow-"] {
     cursor: not-allowed;
     stroke: color-mix(in srgb, var(--text-color), transparent 50%);
diff --git a/src/assets/styles/components/progress-bar.css b/src/assets/styles/components/progress-bar.css
index f10195b2..682c33d2 100644
--- a/src/assets/styles/components/progress-bar.css
+++ b/src/assets/styles/components/progress-bar.css
@@ -2,7 +2,7 @@
   display: flex;
   height: var(--sizing-lg);
   width: 100%;
-  background-color: #d9dee499;
+  background-color: var(--gray-background-transparent);
   border-radius: var(--border-radius-full);
 
   & .progress-bar {
diff --git a/src/assets/styles/components/tab-buttons.css b/src/assets/styles/components/tab-buttons.css
index 09db3feb..6506591c 100644
--- a/src/assets/styles/components/tab-buttons.css
+++ b/src/assets/styles/components/tab-buttons.css
@@ -1,3 +1,5 @@
+#tracks-recent,
+#tracks-window,
 #tracks-recent ~ .tracks-recent,
 #tracks-window ~ .tracks-window {
   display: none;
@@ -8,9 +10,9 @@
   display: block;
 }
 
-input[id="tracks-recent"] ~ [for="tracks-recent"],
-input[id="tracks-window"] ~ [for="tracks-window"] {
-  margin-bottom: var(--spacing-base);
+input[id="tracks-recent"] ~ .tracks-recent,
+input[id="tracks-window"] ~ .tracks-window {
+  margin-top: var(--spacing-base);
 }
 
 input[id="tracks-recent"] ~ [for="tracks-recent"]:has(+ [for="tracks-window"]) {
diff --git a/src/assets/styles/defaults/fonts.css b/src/assets/styles/defaults/fonts.css
index 30e8303d..3970376b 100644
--- a/src/assets/styles/defaults/fonts.css
+++ b/src/assets/styles/defaults/fonts.css
@@ -1,5 +1,5 @@
 @font-face {
   font-family: MonoLisa;
   src: url('/assets/fonts/MonoLisa.min.woff2') format('woff2');
-  font-display: optional
+  font-display: optional;
 }
\ No newline at end of file
diff --git a/src/assets/styles/defaults/vars.css b/src/assets/styles/defaults/vars.css
index eb3dc3f6..556e1078 100644
--- a/src/assets/styles/defaults/vars.css
+++ b/src/assets/styles/defaults/vars.css
@@ -30,6 +30,10 @@
   --gray-lighter: var(--gray-100);
   --gray-dark: var(--gray-950);
 
+  /* semi-transparent overlay color */
+  --gray-overlay: #000000b3;
+  --gray-background-transparent: #d9dee499;
+
   /* base theme */
   --color-lightest: var(--gray-50);
   --color-darkest: var(--gray-1000);
diff --git a/src/assets/styles/pages/about.css b/src/assets/styles/pages/about.css
index 674014ee..213e88e3 100644
--- a/src/assets/styles/pages/about.css
+++ b/src/assets/styles/pages/about.css
@@ -7,9 +7,12 @@
 }
 
 .avatar-wrapper {
+  display: flex;
+  flex-direction: row;
+  align-items: center;
+  justify-content: center;
   margin-bottom: var(--spacing-sm);
   width: 100%;
-  justify-content: center;
 
   & .interior {
     display: flex;
@@ -20,4 +23,8 @@
       image-rendering: pixelated;
     }
   }
+}
+
+.about-title {
+  text-align: center;
 }
\ No newline at end of file
diff --git a/src/assets/styles/pages/contact.css b/src/assets/styles/pages/contact.css
index c45746fa..a14a5e21 100644
--- a/src/assets/styles/pages/contact.css
+++ b/src/assets/styles/pages/contact.css
@@ -6,6 +6,11 @@
     flex-direction: row;
   }
 
+  & label.hp,
+  & label > span {
+    display: none;
+  }
+
   & textarea {
     height: calc(var(--sizing-3xl) * 5);
     resize: none;
diff --git a/src/assets/styles/pages/watching.css b/src/assets/styles/pages/watching.css
index 11b95602..97a6991a 100644
--- a/src/assets/styles/pages/watching.css
+++ b/src/assets/styles/pages/watching.css
@@ -126,6 +126,8 @@ a:active > .watching.hero::after {
         }
 
         .subheader {
+          display: flex;
+          align-items: center;
           gap: var(--spacing-xs);
         }
 
diff --git a/src/assets/styles/pages/webrings.css b/src/assets/styles/pages/webrings.css
index 75612456..29cf09a7 100644
--- a/src/assets/styles/pages/webrings.css
+++ b/src/assets/styles/pages/webrings.css
@@ -1,7 +1,15 @@
 .webring-wrapper {
+  display: flex;
+  flex-direction: column;
+  align-items: center;
+  justify-content: center;
+  text-align: center;
   margin: var(--margin-vertical-base-horizontal-zero);
 
   & .webring-navigation {
+    display: flex;
+    align-items: center;
+    justify-content: center;
     gap: var(--spacing-sm);
 
     & a {
diff --git a/src/includes/partials/blocks/avatar.liquid b/src/includes/partials/blocks/avatar.liquid
index e74146cc..dda934f4 100644
--- a/src/includes/partials/blocks/avatar.liquid
+++ b/src/includes/partials/blocks/avatar.liquid
@@ -1,4 +1,4 @@
-<div class="avatar-wrapper flex-centered">
+<div class="avatar-wrapper">
   <div class="interior">
     <img
       srcset="
diff --git a/src/includes/partials/footer.liquid b/src/includes/partials/footer.liquid
index b2ba3267..a0456cba 100644
--- a/src/includes/partials/footer.liquid
+++ b/src/includes/partials/footer.liquid
@@ -1,13 +1,13 @@
 <footer{% unless updated %} style="margin-top:var(--spacing-3xl)"{% endunless %}>
   {%- if updated -%}
-    <p class="text-centered"><em>This page was last updated on {{ updated | strip }}.</em></p>
+    <p class="updated"><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">
+  <nav aria-label="Social icons" class="social">
     {%- for link in nav.footer_icons -%}
-      {% render "partials/nav/linked-icon.liquid", title:link.title, url:link.permalink, icon:link.icon %}
+      {% render "partials/nav/link.liquid", page:page, title:link.title, url:link.permalink, icon:link.icon %}
     {%- endfor -%}
   </nav>
-  <nav aria-label="Secondary site navigation" class="sub-pages flex-centered justify-centered text-centered">
+  <nav aria-label="Secondary site navigation" class="sub-pages">
     {%- for link in nav.footer_text -%}
       {% render "partials/nav/link.liquid", page:page, title:link.title, url:link.permalink, icon:link.icon %}
       {% if not forloop.last %}<span>/</span>{% endif %}
diff --git a/src/includes/partials/home/posts.liquid b/src/includes/partials/home/posts.liquid
index c1918036..3cd00e3e 100644
--- a/src/includes/partials/home/posts.liquid
+++ b/src/includes/partials/home/posts.liquid
@@ -1,7 +1,7 @@
 {%- assign posts = postData | filterByPostType: postType %}
 <div class="article-widget-wrapper">
   <div class="section-header-wrapper">
-    <h2 class="section-header posts flex-centered">
+    <h2 class="section-header posts">
       {% tablericon icon title %}
       {{ title }}
     </h2>
@@ -14,8 +14,6 @@
       <a href="{{ post.slug }}">
         <h3>{{ post.title }}</h3>
       </a>
-      <span class="p-author h-card hidden">{{ globals.site_name }}</span>
-      <div class="p-summary hidden">{{ post.data.post_excerpt }}</div>
       {{ post.description | normalize_whitespace | markdown | truncatewords: 50 }}
     </article>
   {%- endfor -%}
diff --git a/src/includes/partials/media/watching/grid.liquid b/src/includes/partials/media/watching/grid.liquid
index a1ec99d1..75665b7f 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">
+            <div class="subheader">
               {%- if item.rating -%}
                 <span class="rating"> {{ item.rating }}</span>
               {%- endif -%}
@@ -16,7 +16,7 @@
             </div>
           {%- else -%}
             <div class="header">{{ item.name }}</div>
-            <div class="subheader flex-centered">({{ item.year }})</div>
+            <div class="subheader">({{ item.year }})</div>
           {%- endif -%}
         </div>
         {%- assign loadingStrategy = loading | default: 'lazy' -%}
diff --git a/src/includes/partials/nav/menu.liquid b/src/includes/partials/nav/menu.liquid
index 1aca4b6e..4074cb69 100644
--- a/src/includes/partials/nav/menu.liquid
+++ b/src/includes/partials/nav/menu.liquid
@@ -1,4 +1,4 @@
-<div class="flex-centered">
+<menu>
   <input id="menu-toggle" type="checkbox" aria-hidden="true" />
   <label class="menu-button-container" for="menu-toggle" tabindex="0">
     <div class="menu-closed" aria-hidden="true">{% tablericon "menu-2" "Menu closed" %}</div>
@@ -10,4 +10,4 @@
     {%- endfor -%}
   </ul>
   {% render "partials/nav/theme-toggle.liquid" %}
-</div>
\ No newline at end of file
+</menu>
\ No newline at end of file
diff --git a/src/includes/partials/nav/paginator.liquid b/src/includes/partials/nav/paginator.liquid
index b62af93a..9c3d0804 100644
--- a/src/includes/partials/nav/paginator.liquid
+++ b/src/includes/partials/nav/paginator.liquid
@@ -1,5 +1,5 @@
 <script type="module" src="/assets/scripts/components/select-pagination.js?v={% appVersion %}"></script>
-<nav aria-label="Pagination" class="pagination flex-centered">
+<nav aria-label="Pagination" class="pagination">
   {%- if pagination.href.previous -%}
     <a href="{{ pagination.href.previous }}" aria-label="Previous page">
       {% tablericon "arrow-left" "Previous" %}
@@ -19,9 +19,9 @@
       {%- endfor -%}
     </select>
     <noscript>
-      <div class="text-centered">
+      <p>
         <span aria-current="page">{{ pagination.pageNumber | plus: 1 }}</span> of {{ pagination.links.size }}
-      </div>
+      </p>
     </noscript>
   </select-pagination>
   {%- if pagination.href.next -%}
diff --git a/src/includes/webrings/css-joy.liquid b/src/includes/webrings/css-joy.liquid
index 605dd02c..82582228 100644
--- a/src/includes/webrings/css-joy.liquid
+++ b/src/includes/webrings/css-joy.liquid
@@ -1,8 +1,8 @@
 <div class="webring-wrapper">
-  <a href="https://cs.sjoy.lol">
-    <h3 class="text-centered">CSS JOY Webring</h3>
-  </a>
-  <div class="webring-navigation flex-centered justify-centered">
+  <h3>
+    <a href="https://cs.sjoy.lol">CSS JOY Webring</a>
+  </h3>
+  <div class="webring-navigation">
     <a href="https://webri.ng/webring/cssjoy/previous?via=https://coryd.dev/webrings">
       {% tablericon "arrow-left" "Previous site" %}
     </a>
diff --git a/src/includes/webrings/the-claw.liquid b/src/includes/webrings/the-claw.liquid
index 64075ce0..f0e64993 100644
--- a/src/includes/webrings/the-claw.liquid
+++ b/src/includes/webrings/the-claw.liquid
@@ -1,5 +1,4 @@
 <div class="webring-wrapper">
-  <div class="flex-centered justify-centered">
     <img
       srcset="
         https://cdn.coryd.dev/{{ logo }}?class=w200&type=webp 200w,
@@ -18,11 +17,10 @@
       width="200"
       height="169"
     />
-  </div>
-  <h3 class="text-centered">The Claw Webring</h3>
-  <div class="flex-centered justify-centered">
+  <h3>The Claw Webring</h3>
+  <p>
     <strong>
       <a class="no-underline" href="https://github.com/whitep4nth3r/the-claw-webring">Join!</a>
     </strong>
-  </div>
+  </p>
 </div>
\ No newline at end of file
diff --git a/src/pages/dynamic/music/index.html b/src/pages/dynamic/music/index.html
index 02fbaf91..a764dd0c 100644
--- a/src/pages/dynamic/music/index.html
+++ b/src/pages/dynamic/music/index.html
@@ -26,7 +26,7 @@ schema: music-index
   </a>
 </h3>
 {% render "partials/media/grid.liquid", data:music.week.albums, shape: "square", count: 8 %}
-<div class="section-header-wrapper flex-centered">
+<div class="section-header-wrapper">
   <h3 id="tracks" class="section-header">
     <a class="icon-link" href="/music/tracks/this-week">
       {% tablericon "playlist" "Tracks" %}
@@ -35,8 +35,8 @@ schema: music-index
   </h3>
 </div>
 <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" />
+  <input id="tracks-recent" name="track-options" type="radio" aria-hidden="true" checked />
+  <input id="tracks-window" name="track-options" type="radio" aria-hidden="true" />
   <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">
@@ -47,7 +47,7 @@ schema: music-index
   </div>
 </div>
 {% if albumReleases.size > 0 %}
-<h3 id="album-releases" class="section-header flex-centered">
+<h3 id="album-releases" class="section-header">
   {% tablericon "calendar-time" "Anticipated albums" %}
   Anticipated albums
 </h3>
diff --git a/src/pages/static/about.md b/src/pages/static/about.md
index 632bc138..f83d5ad6 100644
--- a/src/pages/static/about.md
+++ b/src/pages/static/about.md
@@ -6,7 +6,7 @@ permalink: /about.html
 {%- assign artist = music.week.artists | first -%}
 {%- assign book = books.all | bookStatus: 'started' | reverse | first -%}
 {%- assign show = tv.recentlyWatched | first -%}
-<div class="avatar-wrapper flex-centered">
+<div class="avatar-wrapper">
   <div class="interior">
     {%- capture about_alt -%}{{ globals.site_name }} - image by @joel@fosstodon.org{%- endcapture -%}
     <img
@@ -25,7 +25,7 @@ permalink: /about.html
     />
   </div>
 </div>
-<h2 class="text-centered">Hi, I'm Cory</h2>
+<h2 class="about-title">Hi, I'm Cory</h2>
 
 <strong class="highlight-text">I'm a software developer based in Camarillo, California</strong>. I enjoy hanging out with my beautiful family and 3 rescue dogs, technology, automation, [music](https://coryd.dev/music), [writing](https://coryd.dev/posts), [reading](https://coryd.dev/books), [tv](https://coryd.dev/watching#tv) and [movies](https://coryd.dev/watching#movies). Lately I've been listening to a lot of <strong class="highlight-text">{{ artist.title }}</strong>, reading <strong class="highlight-text">{{ book.title }}</strong> and watching <strong class="highlight-text">{{ show.name }}</strong>.
 
diff --git a/src/pages/static/contact.html b/src/pages/static/contact.html
index 15fdfaf1..f10d99ed 100644
--- a/src/pages/static/contact.html
+++ b/src/pages/static/contact.html
@@ -16,20 +16,18 @@ description: How to contact me.
     </ul>
   </div>
   <form data-form="contact" class="column" method="POST" action="https://coryd.dev/api/contact" name="contact">
-    <label class="hidden">
+    <label class="hp">
       Don't fill this out if you're human: <input type="text" name="hp_name">
     </label>
     <label>
-      <span class="hidden">Name</span>
+      <span>Name</span>
       <input type="text" name="name" placeholder="Name" required />
     </label>
     <label>
-      <span class="hidden">Email</span>
+      <span>Email</span>
       <input type="email" name="email" placeholder="Email" required />
     </label>
     <textarea name="message" placeholder="Message" required></textarea>
-    <div class="flex-centered justify-centered">
-      <button type="submit">Send message</button>
-    </div>
+    <button type="submit">Send message</button>
   </form>
 </div>
\ No newline at end of file
diff --git a/src/pages/static/search.html b/src/pages/static/search.html
index 962e4151..329c2bea 100644
--- a/src/pages/static/search.html
+++ b/src/pages/static/search.html
@@ -31,9 +31,13 @@ permalink: /search.html
     $input.addEventListener('input', () => {
       const query = $input.value
       const results = (query.length > 1) ? getSearchResults(query) : []
-      if (query === '') renderSearchResults([])
-      if (query.length > 1 && window?.umami) umami.trackEvent('Search', { query: query })
-      renderSearchResults(results)
+      if (query.length === 0) {
+        // Clear the results when input is empty
+        renderSearchResults([])
+      } else {
+        if (query.length > 1 && window?.umami) umami.trackEvent('Search', { query: query })
+        renderSearchResults(results, query)
+      }
     })
 
     $input.addEventListener('keydown', (event) => {
@@ -41,15 +45,20 @@ permalink: /search.html
     })
 
     const getSearchResults = (query) => miniSearch.search(query, { prefix: true, fuzzy: 0.2, boost: { title: 2 } }).map(({ id }) => resultsById[id])
-    const renderSearchResults = (results) => {
-      $results.innerHTML = results.map(({ title, url }) => {
-        return `<li class="search__results--result"><a href="${url}">${title}</a></li>`
-      }).join('\n')
 
+    const renderSearchResults = (results, query = '') => {
       if (results.length > 0) {
-        $results.classList.remove('hidden')
+        $results.innerHTML = results.map(({ title, url }) => {
+          return `<li class="search__results--result"><a href="${url}">${title}</a></li>`
+        }).join('\n')
+        $results.style.display = 'block'
       } else {
-        $results.classList.add('hidden')
+        if (query.trim() !== '') {
+          $results.innerHTML = `<li class="search__results--no-results">No results found for "${query}"</li>`
+        } else {
+          $results.innerHTML = ''
+        }
+        $results.style.display = 'block'
       }
     }
   })()
@@ -64,4 +73,4 @@ permalink: /search.html
   <input class="search__form--input" placeholder="Search" type="search" name="q" autocomplete="off" autofocus>
   <input class="search__form--fallback" type="hidden" placeholder="Type away..." name="sites" value="coryd.dev">
 </form>
-<ul class="search__results hidden"></ul>
\ No newline at end of file
+<ul class="search__results"></ul>
\ No newline at end of file