From 28fe4b21f2581ffb8b58a620e40778fa81d75dff Mon Sep 17 00:00:00 2001
From: Cory Dransfeldt <hi@coryd.dev>
Date: Thu, 3 Oct 2024 16:08:39 -0700
Subject: [PATCH] chore: cleanup

---
 package-lock.json                            |  10 +-
 package.json                                 |   2 +-
 src/assets/styles/base/index.css             |  36 +----
 src/assets/styles/components/buttons.css     |   4 +-
 src/assets/styles/components/forms.css       |   4 +-
 src/assets/styles/components/media-grid.css  |   2 +-
 src/assets/styles/components/menu.css        | 150 ++++++++++---------
 src/assets/styles/components/modal.css       |   2 -
 src/assets/styles/components/music-chart.css |  10 +-
 src/assets/styles/components/paginator.css   |  34 ++---
 src/assets/styles/defaults/vars.css          |  11 +-
 src/assets/styles/pages/about.css            |   1 -
 src/assets/styles/pages/blogroll.css         |   1 -
 src/assets/styles/pages/books.css            |  14 +-
 src/assets/styles/pages/contact.css          |   2 +-
 src/assets/styles/pages/feeds.css            |   2 +-
 src/assets/styles/pages/post.css             |   2 +-
 src/assets/styles/pages/watching.css         |  16 +-
 src/assets/styles/reset.css                  |  18 +--
 19 files changed, 134 insertions(+), 187 deletions(-)

diff --git a/package-lock.json b/package-lock.json
index e9596aee..fb69bbc5 100644
--- a/package-lock.json
+++ b/package-lock.json
@@ -1,12 +1,12 @@
 {
   "name": "coryd.dev",
-  "version": "1.0.5",
+  "version": "1.0.6",
   "lockfileVersion": 3,
   "requires": true,
   "packages": {
     "": {
       "name": "coryd.dev",
-      "version": "1.0.5",
+      "version": "1.0.6",
       "license": "MIT",
       "dependencies": {
         "@cdransf/api-text": "^1.5.0",
@@ -1760,9 +1760,9 @@
       "license": "MIT"
     },
     "node_modules/electron-to-chromium": {
-      "version": "1.5.31",
-      "resolved": "https://registry.npmjs.org/electron-to-chromium/-/electron-to-chromium-1.5.31.tgz",
-      "integrity": "sha512-QcDoBbQeYt0+3CWcK/rEbuHvwpbT/8SV9T3OSgs6cX1FlcUAkgrkqbg9zLnDrMM/rLamzQwal4LYFCiWk861Tg==",
+      "version": "1.5.32",
+      "resolved": "https://registry.npmjs.org/electron-to-chromium/-/electron-to-chromium-1.5.32.tgz",
+      "integrity": "sha512-M+7ph0VGBQqqpTT2YrabjNKSQ2fEl9PVx6AK3N558gDH9NO8O6XN9SXXFWRo9u9PbEg/bWq+tjXQr+eXmxubCw==",
       "dev": true,
       "license": "ISC"
     },
diff --git a/package.json b/package.json
index 6f1ebe49..c19723dc 100644
--- a/package.json
+++ b/package.json
@@ -1,6 +1,6 @@
 {
   "name": "coryd.dev",
-  "version": "1.0.5",
+  "version": "1.0.6",
   "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 616deb43..9d61fced 100644
--- a/src/assets/styles/base/index.css
+++ b/src/assets/styles/base/index.css
@@ -5,11 +5,6 @@ body {
   font-family: var(--font-mono);
 }
 
-html {
-  font-size: 100%;
-  -webkit-text-size-adjust: none;
-}
-
 body {
   font-size: var(--font-size-base);
   line-height: var(--line-height-base);
@@ -17,19 +12,13 @@ body {
   word-spacing: -.05rem;
 }
 
-::-moz-selection {
-  color: var(--text-color-inverted);
-  background: var(--accent-color);
-}
-
 ::selection {
-  color: var(--text-color-inverted);
+  color: var(--color-lightest);
   background: var(--accent-color);
 }
 
 p {
   margin: var(--margin-vertical-base-horizontal-zero);
-  overflow: visible;
 }
 
 :is(p, ul, ol) a {
@@ -162,9 +151,7 @@ a:active,
 :is(.main-title, footer nav.sub-pages) a:focus,
 :is(.main-title, footer nav.sub-pages) a:active {
   color: var(--accent-color-hover);
-  transition-property: color;
-  transition-timing-function: var(--transition-ease-in-out);
-  transition-duration: var(--transition-duration-default);
+  transition: color var(--transition-duration-default) var(--transition-ease-in-out);
 }
 
 :is(
@@ -233,11 +220,6 @@ table {
   overscroll-behavior: none;
 }
 
-table,
-tr {
-  width: 100%;
-}
-
 table,
 th,
 td {
@@ -261,10 +243,11 @@ td {
   &:first-child {
     position: sticky;
     left: 0;
-    border-inline-end: none;
     max-width: 200px;
-    text-overflow: ellipsis;
+    border-inline-end: none;
+    white-space: nowrap;
     overflow: hidden;
+    text-overflow: ellipsis;
 
     &::after {
       content: '';
@@ -284,15 +267,6 @@ th {
   text-align: left;
 }
 
-:is(th, td):first-child {
-  position: sticky;
-  left: 0;
-  white-space: nowrap;
-  max-width: 200px;
-  overflow: hidden;
-  text-overflow: ellipsis;
-}
-
 td {
   min-width: calc(var(--spacing-3xl) * 2);
   white-space: nowrap;
diff --git a/src/assets/styles/components/buttons.css b/src/assets/styles/components/buttons.css
index c737d08c..a87a3a46 100644
--- a/src/assets/styles/components/buttons.css
+++ b/src/assets/styles/components/buttons.css
@@ -22,7 +22,7 @@ button,
     color: var(--text-color-inverted);
     background-color: var(--accent-color);
     appearance: none;
-    transition-property: border;
+    transition: color var(--transition-duration-default) var(--transition-ease-in-out);
   }
 
   &:not(.theme-toggle, .active):hover,
@@ -31,7 +31,5 @@ button,
   &:not(.theme-toggle, .active):focus-within {
     background-color: var(--accent-color-hover);
     border-color: var(--accent-color-hover);
-    transition-timing-function: var(--transition-ease-in-out);
-    transition-duration: var(--transition-duration-default);
   }
 }
\ No newline at end of file
diff --git a/src/assets/styles/components/forms.css b/src/assets/styles/components/forms.css
index 3cce1e1e..a3a8af86 100644
--- a/src/assets/styles/components/forms.css
+++ b/src/assets/styles/components/forms.css
@@ -17,12 +17,12 @@ textarea {
   width: 100%;
 }
 
+form:has(+ *),
 label:has(input):has(+ *) input,
 input[type="text"]:has(+ *),
 input[type="email"]:has(+ *),
 input[type="search"]:has(+ *),
-textarea:has(+ *),
-form:has(+ *) {
+textarea:has(+ *) {
   margin-bottom: var(--spacing-base);
 }
 
diff --git a/src/assets/styles/components/media-grid.css b/src/assets/styles/components/media-grid.css
index 6caa36d1..b7c30e7a 100644
--- a/src/assets/styles/components/media-grid.css
+++ b/src/assets/styles/components/media-grid.css
@@ -71,7 +71,7 @@
 
   & a:hover .item::after,
   & a:active .item::after {
-    border-color: var(--accent-color-hover)
+    border-color: var(--accent-color-hover);
   }
 
   & .meta-text {
diff --git a/src/assets/styles/components/menu.css b/src/assets/styles/components/menu.css
index 7060aeb1..bebe8568 100644
--- a/src/assets/styles/components/menu.css
+++ b/src/assets/styles/components/menu.css
@@ -3,17 +3,28 @@ menu {
   flex-direction: row;
   align-items: center;
 
-  & .menu-primary {
-    display: flex;
-    flex-direction: row;
+  .menu-primary {
+    position: absolute;
     list-style: none;
-    margin: 0;
     padding: 0;
-    gap: var(--spacing-md);
+    top: 0;
+    left: 0;
+    gap: 0;
+    margin-top: calc(var(--spacing-3xl) * 2.25);
+    flex-direction: column;
+    width: 100%;
+    z-index: 3;
 
     & > li {
-      margin: 0;
       display: flex;
+      align-items: center;
+      justify-content: center;
+      overflow: hidden;
+      margin: 0;
+      padding: var(--spacing-sm) 0;
+      width: 100%;
+      color: var(--text-color);
+      background: var(--background-color);
 
       & a {
         text-decoration: none;
@@ -21,96 +32,46 @@ menu {
 
       & .icon > svg,
       & .active > svg {
-        display: block;
+        display: none;
       }
 
       & .icon > span,
       & .active > span {
-        display: none;
+        display: inline;
       }
     }
   }
 
-  & .menu-button-container {
-    display: none;
-    margin-left: var(--spacing-md);
-
-    & svg {
-      cursor: pointer;
-    }
-
-    &:hover svg,
-    &:focus svg,
-    &:focus-within svg,
-    &:active svg {
-      stroke: var(--accent-color-hover);
-    }
-  }
-
-  & #menu-toggle {
+  #menu-toggle {
     display: none;
 
     &:checked + .menu-button-container {
-      & .menu-closed {
+      .menu-closed {
         display: none;
       }
 
-      & .menu-open {
+      .menu-open {
         display: block;
       }
     }
 
     &:not(:checked) + .menu-button-container {
-      & .menu-closed {
+      .menu-closed {
         display: block;
       }
 
-      & .menu-open {
+      .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 {
+    & ~ .menu-primary li {
       height: 0;
       border: 0;
       padding: 0;
     }
 
-    #menu-toggle:checked ~ .menu-primary li {
+    &:checked ~ .menu-primary li {
       border-bottom: var(--border-gray);
       height: calc(var(--sizing-3xl) * 1.5);
 
@@ -123,11 +84,64 @@ menu {
         font-size: var(--font-size-lg);
       }
     }
+  }
+
+  .menu-button-container {
+    display: unset;
+    width: var(--sizing-svg-base);
+    height: var(--sizing-svg-base);
+
+    & svg {
+      cursor: pointer;
+    }
+  }
+
+  @media (min-width: 768px) {
+    .menu-primary {
+      display: flex;
+      flex-direction: row;
+      margin: 0;
+      gap: var(--spacing-md);
+      position: relative;
+      top: unset;
+      left: unset;
+      width: auto;
+    }
+
+    .menu-primary > li {
+      width: auto;
+      height: auto;
+      padding: 0;
+      background: none;
+
+      & .icon > svg,
+      & .active > svg {
+        display: block;
+      }
+
+      & .icon > span,
+      & .active > span {
+        display: none;
+      }
+    }
+
+    #menu-toggle ~ .menu-primary li {
+      height: unset;
+      border: none;
+      padding: 0;
+    }
+
+    #menu-toggle:checked ~ .menu-primary li {
+      height: unset;
+      border: none;
+
+      &:first-child {
+        border: none;
+      }
+    }
 
     .menu-button-container {
-      display: unset;
-      width: var(--sizing-svg-base);
-      height: var(--sizing-svg-base);
+      display: none;
     }
   }
 }
\ No newline at end of file
diff --git a/src/assets/styles/components/modal.css b/src/assets/styles/components/modal.css
index d25b50b7..46ab8b32 100644
--- a/src/assets/styles/components/modal.css
+++ b/src/assets/styles/components/modal.css
@@ -48,11 +48,9 @@
 .modal-toggle,
 .modal-close {
   cursor: pointer;
-  display: inline-flex;
   vertical-align: middle;
 
   & svg {
-    cursor: pointer;
     stroke: var(--accent-color);
 
     &:hover,
diff --git a/src/assets/styles/components/music-chart.css b/src/assets/styles/components/music-chart.css
index cf5a572a..27fb2e2c 100644
--- a/src/assets/styles/components/music-chart.css
+++ b/src/assets/styles/components/music-chart.css
@@ -65,19 +65,11 @@
       }
     }
 
-    & .meta {
-      justify-content: start;
-      gap: var(--spacing-md);
-
-      @media screen and (min-width: 768px) {
-        width: calc(80% - var(--sizing-lg));
-      }
-    }
-
     & .meta {
       display: flex;
       flex-direction: row;
       align-items: center;
+      gap: var(--spacing-md);
 
       @media screen and (min-width: 768px) {
         width: calc(75% - var(--sizing-lg));
diff --git a/src/assets/styles/components/paginator.css b/src/assets/styles/components/paginator.css
index 0940f8fb..f49b2391 100644
--- a/src/assets/styles/components/paginator.css
+++ b/src/assets/styles/components/paginator.css
@@ -1,27 +1,25 @@
 .pagination {
   display: flex;
-  flex-direction: row;
   align-items: center;
   justify-content: space-between;
+}
 
-  & button {
-    background: none;
-    padding-left: 0;
-    padding-right: 0;
-  }
+.pagination button {
+  background: none;
+  padding: 0;
+}
 
-  & a {
-    display: flex;
-  }
+.pagination a {
+  display: flex;
+}
 
-  & p {
-    text-align: center;
-    margin: 0;
-  }
+.pagination p {
+  text-align: center;
+  margin: 0;
+}
 
-  & span.disabled svg[data-tablericon-name^="arrow-"] {
-    cursor: not-allowed;
-    stroke: var(--gray-medium);
-    stroke-width: var(--stroke-width-default);
-  }
+.pagination span.disabled svg[data-tablericon-name^="arrow-"] {
+  cursor: not-allowed;
+  stroke: var(--gray-medium);
+  stroke-width: var(--stroke-width-default);
 }
\ No newline at end of file
diff --git a/src/assets/styles/defaults/vars.css b/src/assets/styles/defaults/vars.css
index 7a9ad5d7..227041b6 100644
--- a/src/assets/styles/defaults/vars.css
+++ b/src/assets/styles/defaults/vars.css
@@ -20,8 +20,8 @@
   --white: #fff;
   --black: #000;
 
-  --gray-light: var(--gray-300);
   --gray-lighter: var(--gray-200);
+  --gray-light: var(--gray-300);
   --gray-medium: var(--gray-400);
   --gray-dark: var(--gray-800);
 
@@ -126,7 +126,7 @@
   --line-height-md: 1.5;
   --line-height-base: 2;
 
-  /* spacing */
+  /* sizing */
   --sizing-xs: .25rem;
   --sizing-sm: .5rem;
   --sizing-md: .75rem;
@@ -139,6 +139,7 @@
   --sizing-svg-sm: 18px;
   --sizing-svg-base: 24px;
 
+  /* spacing */
   --spacing-xs: var(--sizing-xs);
   --spacing-sm: var(--sizing-sm);
   --spacing-md: var(--sizing-md);
@@ -174,9 +175,9 @@
   --text-shadow-default: rgba(0, 0, 0, 0.7) 0px 0px 10px;
 
   /* modals */
-  --modal-overlay-background-light: #ffffffbf;
+  --modal-overlay-background: #ffffffbf;
   --modal-overlay-background-dark: #000000bf;
-  --modal-overlay-background: var(--modal-overlay-background-light);
+  --modal-overlay-background: var(--modal-overlay-background);
 
   /* input accent color */
   accent-color: var(--accent-color);
@@ -193,7 +194,7 @@
   --gray-light: var(--gray-300);
   --gray-lighter: var(--gray-200);
   --gray-dark: var(--gray-800);
-  --modal-overlay-background: var(--modal-overlay-background-light);
+  --modal-overlay-background: var(--modal-overlay-background);
   --brand-github: var(--brand-github-light);
   --article: var(--article-light);
   --about: var(--about-light);
diff --git a/src/assets/styles/pages/about.css b/src/assets/styles/pages/about.css
index 213e88e3..ccbafde9 100644
--- a/src/assets/styles/pages/about.css
+++ b/src/assets/styles/pages/about.css
@@ -8,7 +8,6 @@
 
 .avatar-wrapper {
   display: flex;
-  flex-direction: row;
   align-items: center;
   justify-content: center;
   margin-bottom: var(--spacing-sm);
diff --git a/src/assets/styles/pages/blogroll.css b/src/assets/styles/pages/blogroll.css
index 795e4cf0..8ca3468c 100644
--- a/src/assets/styles/pages/blogroll.css
+++ b/src/assets/styles/pages/blogroll.css
@@ -1,4 +1,3 @@
 .blog-roll-icons {
   display: flex;
-  flex-direction: row;
 }
\ No newline at end of file
diff --git a/src/assets/styles/pages/books.css b/src/assets/styles/pages/books.css
index ad639721..9ed9f1a0 100644
--- a/src/assets/styles/pages/books.css
+++ b/src/assets/styles/pages/books.css
@@ -27,19 +27,14 @@
     max-width: calc(var(--sizing-3xl) * 4);
     height: auto;
     aspect-ratio: var(--aspect-ratio-vertical);
-    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);
   }
 
   & a:focus img,
-  & a:focus-within img {
-    border: 0
-  }
-
+  & a:focus-within img,
   & a:hover img,
   & a:active img {
-    border-color: var(--accent-color-hover)
+    border-color: var(--accent-color-hover);
   }
 
   & .book-meta {
@@ -97,8 +92,7 @@
       }
     }
 
-    & p.title,
-    & p.sub-meta {
+    & p {
       margin: 0;
     }
   }
diff --git a/src/assets/styles/pages/contact.css b/src/assets/styles/pages/contact.css
index a14a5e21..de274219 100644
--- a/src/assets/styles/pages/contact.css
+++ b/src/assets/styles/pages/contact.css
@@ -40,7 +40,7 @@
   align-items: center;
   min-height: 60vh;
 
-  h2 {
+  & h2 {
     margin: 0;
   }
 }
\ No newline at end of file
diff --git a/src/assets/styles/pages/feeds.css b/src/assets/styles/pages/feeds.css
index b31cc7b1..9ea4bf05 100644
--- a/src/assets/styles/pages/feeds.css
+++ b/src/assets/styles/pages/feeds.css
@@ -20,8 +20,8 @@
     & img {
       border: var(--border-default);
       border-radius: var(--border-radius-slight);
-      height: auto;
       width: 100%;
+      height: auto;
       display: block;
       margin-top: var(--sizing-base);
     }
diff --git a/src/assets/styles/pages/post.css b/src/assets/styles/pages/post.css
index c07ab3a1..809a4467 100644
--- a/src/assets/styles/pages/post.css
+++ b/src/assets/styles/pages/post.css
@@ -7,7 +7,7 @@ img + .associated-media,
 .banner + .associated-media,
 youtube-video + .associated-media {
   margin-top: var(--spacing-base);
-  border-top: var(--border-gray)
+  border-top: var(--border-gray);
 }
 
 .footnotes {
diff --git a/src/assets/styles/pages/watching.css b/src/assets/styles/pages/watching.css
index 0633e7f1..90644e8a 100644
--- a/src/assets/styles/pages/watching.css
+++ b/src/assets/styles/pages/watching.css
@@ -40,7 +40,7 @@ a:active > .watching.hero::after {
       & .subheader {
         font-size: var(--font-size-sm);
         display: inline-flex;
-        gap: var(--spacing-xs)
+        gap: var(--spacing-xs);
       }
 
       & .header,
@@ -61,9 +61,7 @@ a:active > .watching.hero::after {
       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);
     }
   }
 
@@ -84,7 +82,7 @@ a:active > .watching.hero::after {
 
     & a:hover .item::after,
     & a:active .item::after {
-      border-color: var(--accent-color-hover)
+      border-color: var(--accent-color-hover);
     }
 
     & div {
@@ -113,14 +111,14 @@ a:active > .watching.hero::after {
           font-weight: var(--font-weight-bold);
         }
 
-        .subheader {
+        & .subheader {
           display: flex;
           align-items: center;
           gap: var(--spacing-xs);
         }
 
         & .rating {
-          font-size: calc(var(--font-size-sm) * .75);
+          font-size: calc(var(--font-size-sm) * 0.75);
         }
       }
     }
@@ -143,9 +141,7 @@ a:active > .watching.hero::after {
       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);
     }
   }
 }
diff --git a/src/assets/styles/reset.css b/src/assets/styles/reset.css
index 5113ceb6..8ed94993 100644
--- a/src/assets/styles/reset.css
+++ b/src/assets/styles/reset.css
@@ -1,34 +1,18 @@
-/* use a more-intuitive box-sizing model */
 *, *::before, *::after {
   box-sizing: border-box;
-}
-
-/* remove default margin */
-* {
   margin: 0;
 }
 
-/*
-  typographic tweaks
-  - add accessible line-height
-  - improve text rendering
-*/
 body {
   line-height: var(--line-height-md);
   -webkit-font-smoothing: antialiased;
+  -webkit-text-size-adjust: none;
 }
 
-/* remove built-in form typography styles */
 input, button, textarea, select {
   font: inherit;
 }
 
-/* avoid text overflows */
 p, h1, h2, h3, h4, h5, h6 {
   overflow-wrap: break-word;
-}
-
-/* create a root stacking context */
-#root, #__next {
-  isolation: isolate;
 }
\ No newline at end of file