chore: styles

_redirects

@@ -67,4 +67,5 @@
 /blog/digital-privacy-tools /posts/2021/digital-privacy-tools/ 301
 /posts/2023/now-page-update-matter-favorites/ /posts/2023/now-page-update-favorite-articles-from-matter/ 301
 /posts/2023/now-playing-eleventy-netlify-edge-functions-emoji/ /posts/2023/displaying-now-playing-data-with-matching-emoji-using-netlify-edge-functions-and-eleventy/ 301
-/posts/2014/sublime-text-ctrl-tab-key-bindings/ /posts/2014/sublime-text-3-ctrl-tab-key-bindings/ 301
+/posts/2014/sublime-text-ctrl-tab-key-bindings/ /posts/2014/sublime-text-3-ctrl-tab-key-bindings/ 301
+/posts/2022/simple-api-fetch-hooks-with-swr/ /posts/2022/simple-data-fetching-with-custom-react-hooks-and-swr 301

package-lock.json

@@ -1,12 +1,12 @@
 {
   "name": "coryd.dev",
-  "version": "2.6.7",
+  "version": "2.8.1",
   "lockfileVersion": 3,
   "requires": true,
   "packages": {
     "": {
       "name": "coryd.dev",
-      "version": "2.6.7",
+      "version": "2.8.1",
       "license": "MIT",
       "dependencies": {
         "@11ty/eleventy-fetch": "4.0.1",
@@ -1166,9 +1166,9 @@
       }
     },
     "node_modules/caniuse-lite": {
-      "version": "1.0.30001677",
+      "version": "1.0.30001678",
-      "resolved": "https://registry.npmjs.org/caniuse-lite/-/caniuse-lite-1.0.30001677.tgz",
+      "resolved": "https://registry.npmjs.org/caniuse-lite/-/caniuse-lite-1.0.30001678.tgz",
-      "integrity": "sha512-fmfjsOlJUpMWu+mAAtZZZHz7UEwsUxIIvu1TJfO1HqFQvB/B+ii0xr9B5HpbZY/mC4XZ8SvjHJqtAY6pDPQEog==",
+      "integrity": "sha512-RR+4U/05gNtps58PEBDZcPWTgEO2MBeoPZ96aQcjmfkBWRIDfN451fW2qyDA9/+HohLLIL5GqiMwA+IB1pWarw==",
       "dev": true,
       "funding": [
         {
@@ -1355,9 +1355,9 @@
       "license": "MIT"
     },
     "node_modules/cross-spawn": {
-      "version": "7.0.3",
+      "version": "7.0.5",
-      "resolved": "https://registry.npmjs.org/cross-spawn/-/cross-spawn-7.0.3.tgz",
+      "resolved": "https://registry.npmjs.org/cross-spawn/-/cross-spawn-7.0.5.tgz",
-      "integrity": "sha512-iRDPJKUPVEND7dHPO8rkbOnPpyDygcDFtWjpeWNCgy8WP2rXcxXL8TskReQl6OrB2G7+UJrags1q15Fudc7G6w==",
+      "integrity": "sha512-ZVJrKKYunU38/76t0RMOulHOnUcbU9GbpWKAOZ0mhjr7CX6FVrH+4FrAapSOekrgFQ3f/8gwMEuIft0aKq6Hug==",
       "dev": true,
       "license": "MIT",
       "dependencies": {
@@ -1791,9 +1791,9 @@
       "license": "MIT"
     },
     "node_modules/electron-to-chromium": {
-      "version": "1.5.52",
+      "version": "1.5.55",
-      "resolved": "https://registry.npmjs.org/electron-to-chromium/-/electron-to-chromium-1.5.52.tgz",
+      "resolved": "https://registry.npmjs.org/electron-to-chromium/-/electron-to-chromium-1.5.55.tgz",
-      "integrity": "sha512-xtoijJTZ+qeucLBDNztDOuQBE1ksqjvNjvqFoST3nGC7fSpqJ+X6BdTBaY5BHG+IhWWmpc6b/KfpeuEDupEPOQ==",
+      "integrity": "sha512-6maZ2ASDOTBtjt9FhqYPRnbvKU5tjG0IN9SztUOWYw2AzNDNpKJYLJmlK0/En4Hs/aiWnB+JZ+gW19PIGszgKg==",
       "dev": true,
       "license": "ISC"
     },

package.json

@@ -1,6 +1,6 @@
 {
   "name": "coryd.dev",
-  "version": "2.6.7",
+  "version": "2.8.1",
   "description": "The source for my personal site. Built using 11ty (and other tools).",
   "type": "module",
   "engines": {

src/assets/styles/base/index.css

@@ -87,6 +87,7 @@ img {
     border: var(--border-default);
     height: auto;
     width: 100%;
+    margin: var(--margin-vertical-base-horizontal-zero);
   }
 }
 
@@ -208,6 +209,10 @@ ol {
 a {
   color: var(--accent-color);
 
+  &.back-link {
+    margin-bottom: var(--spacing-base);
+  }
+
   & > img {
     border: var(--border-default);
   }
@@ -216,15 +221,13 @@ a {
     stroke: var(--accent-color);
   }
 
-  &:hover,
+  &:is(:hover, :focus, :active) {
-  &:focus,
-  &:active {
     color: var(--accent-color-hover);
     transition: color var(--transition-duration-default)
       var(--transition-ease-in-out);
 
     & > img {
-      border-color: var(--accent-color-hover);
+      border: var(--border-default-hover);
       transition: border var(--transition-duration-default)
         var(--transition-ease-in-out);
     }
@@ -285,14 +288,17 @@ hr {
 /* articles */
 article {
   margin-bottom: var(--spacing-base);
-  border-bottom: var(--border-gray);
 
-  &:last-of-type {
+  &:not([class], :last-of-type) {
-    border-bottom: 0;
+    border-bottom: var(--border-gray);
   }
 
-  &.intro p {
+  &.intro {
-    margin-top: 0;
+    border-bottom: var(--border-gray);
+
+    & p {
+      margin-top: 0;
+    }
   }
 
   & h3 {
@@ -313,27 +319,6 @@ article {
   }
 }
 
-p + .associated-media,
-img + .associated-media,
-.banner + .associated-media {
-  margin-top: var(--spacing-base);
-  border-top: var(--border-gray);
-}
-
-.footnotes {
-  & .footnotes-list {
-    margin-bottom: 0;
-
-    & li:last-child {
-      margin-bottom: 0;
-    }
-  }
-
-  &:has(~ *) {
-    margin-bottom: var(--spacing-base);
-  }
-}
-
 sup.footnote-ref {
   line-height: var(--line-height-xs);
   padding: var(--spacing-xs);
@@ -348,6 +333,7 @@ table {
   white-space: nowrap;
   caption-side: bottom;
   overscroll-behavior: none;
+  margin: var(--margin-vertical-base-horizontal-zero);
 }
 
 table,
@@ -441,13 +427,9 @@ td:first-of-type,
 .default-wrapper {
   padding-top: var(--spacing-2xl);
 
-  & > h2 {
+  & > h2:first-child {
     margin-top: 0;
   }
-
-  & > a + h2 {
-    margin-top: var(--spacing-base);
-  }
 }
 
 .main-wrapper {

src/assets/styles/base/reset.css

@@ -86,10 +86,6 @@ ol {
 	overflow-wrap: break-word;
 }
 
-:where(h1, h2, h3) {
-	text-wrap: balance;
-}
-
 :where(hr) {
 	border: none;
 	border-block-start: 1px solid;

src/assets/styles/base/vars.css

@@ -66,6 +66,7 @@
 
   /* borders */
   --border-default: 1px solid var(--accent-color);
+  --border-default-hover: 1px solid var(--accent-color-hover);
   --border-gray: 1px solid var(--gray-light);
 
   /* fonts */

src/assets/styles/components/addon-links.css

@@ -1,5 +1,4 @@
 .addon-links {
-  margin-top: var(--spacing-base);
   display: grid;
   gap: var(--sizing-base);
   grid-template-columns: var(--grid-columns-one);
@@ -8,17 +7,8 @@
     grid-template-columns: var(--grid-columns-two);
   }
 
-  h3 {
-    margin-top: 0;
-  }
-
   & article {
     border-bottom: 0;
     margin-bottom: 0;
-
-    & ul,
-    & ol {
-      margin-bottom: 0;
-    }
   }
 }

src/assets/styles/components/badge-grid.css

@@ -7,7 +7,7 @@
     grid-template-columns: var(--grid-columns-four);
   }
 
-  & > * {
+  & > a {
     display: flex;
     justify-content: center;
   }

src/assets/styles/components/banners.css

@@ -1,15 +1,6 @@
-* + .banner,
-:not(* + .banner) .banner:first-of-type {
-  margin-top: var(--spacing-base);
-}
-
-.banner:has(+ *),
-:not(* + .banner) .banner:last-of-type {
-  margin-bottom: var(--spacing-base);
-}
-
 .banner {
   padding: var(--spacing-md);
+  margin: var(--margin-vertical-base-horizontal-zero);
   border: 1px solid;
   border-radius: var(--border-radius-slight);
 
@@ -62,9 +53,7 @@
 
     border-color: var(--banner-accent-color);
 
-    & p a:hover,
+    & p a:is(:hover, :active, :focus) {
-    & p a:active,
-    & p a:focus {
       color: var(--banner-accent-color);
     }
 

src/assets/styles/components/buttons.css

@@ -17,12 +17,12 @@ button,
   transition: color var(--transition-duration-default)
     var(--transition-ease-in-out);
 
-  & + hr {
-    margin-top: 0;
-  }
-
   &:not(.active):is(:hover, :active, :focus, :focus-within) {
     background-color: var(--accent-color-hover);
-    border-color: var(--accent-color-hover);
+    border: 2px solid var(--accent-color-hover);
+    transition: background-color var(--transition-duration-default)
+        var(--transition-ease-in-out),
+      border var(--transition-duration-default) var(--transition-ease-in-out),
+      color var(--transition-duration-default) var(--transition-ease-in-out);
   }
 }

src/assets/styles/components/forms.css

@@ -3,13 +3,12 @@
   opacity: 0.5;
 }
 
-input:not([type="button"]):not([type="submit"]):not([type="reset"]),
+input:not([type="button"]):not([type="submit"]):not([type="reset"]):not([type="checkbox"]),
 textarea {
   width: 100%;
 }
 
-
+input:not([type="button"]):not([type="submit"]):not([type="reset"]):not([type="checkbox"]),
-input:not([type="button"]):not([type="submit"]):not([type="reset"]),
 textarea,
 select {
   color: var(--text-color);
@@ -19,13 +18,16 @@ select {
   border: var(--border-gray);
 }
 
-form:has(+ *),
+form,
-label:has(input):has(+ *) input,
+input:not([type="button"]):not([type="submit"]):not([type="reset"]):not([type="checkbox"]),
-input:not([type="button"]):not([type="submit"]):not([type="reset"]):has(+ *),
+textarea {
-textarea:has(+ *) {
   margin-bottom: var(--spacing-base);
 }
 
+textarea {
+  resize: vertical;
+}
+
 .search__form {
   margin-top: 0;
 
@@ -34,6 +36,18 @@ textarea:has(+ *) {
   }
 }
 
+.search__form--type {
+  display: flex;
+  gap: var(--spacing-md);
+  margin-top: var(--sizing-md);
+  border: none;
+
+  @media screen and (max-width: 768px) {
+    flex-direction: column;
+    gap: var(--spacing-xs);
+  }
+}
+
 .search__results {
   margin: 0 0 var(--spacing-base);
   padding: 0;

src/assets/styles/components/mastodon-post.css

@@ -1,6 +1,6 @@
 .mastodon-post-wrapper {
   & dl,
-  dt {
+  & dt {
     display: flex;
   }
 

src/assets/styles/components/media-grid.css

@@ -1,7 +1,3 @@
-a + .media-grid {
-  margin-top: var(--spacing-base);
-}
-
 .media-grid {
   display: grid;
   gap: var(--spacing-sm);
@@ -10,15 +6,6 @@ a + .media-grid {
     margin-top: var(--spacing-base);
   }
 
-  :is(&.poster, &.square, &.vertical) img {
-    border-radius: var(--border-radius-slight);
-    width: 100%;
-  }
-
-  :is(&.poster, &.vertical) img {
-    height: auto;
-  }
-
   &.poster {
     grid-template-columns: var(--grid-poster);
 
@@ -33,10 +20,6 @@ a + .media-grid {
     & a {
       aspect-ratio: var(--aspect-ratio-square);
     }
-
-    & img {
-      height: 100%;
-    }
   }
 
   &.vertical {
@@ -47,40 +30,21 @@ a + .media-grid {
     }
   }
 
-  & .item {
+  &:is(.poster, .square, .vertical) img {
     width: 100%;
-    height: 100%;
+    height: auto;
-    position: relative;
-    display: flex;
-
-    &::after {
-      position: absolute;
-      z-index: 1;
-      content: "";
-      top: 0;
-      left: 0;
-      box-shadow: var(--box-shadow-media);
-      width: 100%;
-      height: 100%;
-      border: var(--border-default);
-      border-radius: var(--border-radius-slight);
-      transition: border-color var(--transition-duration-default)
-        var(--transition-ease-in-out);
-    }
   }
 
-  & a:hover .item::after,
+  & .item {
-  & a:active .item::after {
+    position: relative;
-    border-color: var(--accent-color-hover);
   }
 
   & .meta-text {
+    color: var(--color-lightest);
     position: absolute;
     z-index: 2;
     padding: 0 var(--spacing-sm);
     bottom: var(--spacing-sm);
-    width: 100%;
-    box-sizing: border-box;
 
     & .header,
     & .subheader {

src/assets/styles/components/menu.css

@@ -1,53 +1,41 @@
 menu {
-  display: flex;
+  & .menu-primary {
-  flex-direction: row;
-  align-items: center;
-
-  .menu-primary {
     position: absolute;
+    flex-direction: column;
     list-style: none;
     padding: 0;
-    top: 0;
+    top: calc(var(--spacing-3xl) * 1.75);
     left: 0;
-    gap: 0;
-    margin-top: calc(var(--spacing-3xl) * 2.25);
-    flex-direction: column;
     width: 100%;
     z-index: 3;
 
     & > li {
-      display: flex;
-      align-items: center;
-      justify-content: center;
       overflow: hidden;
       margin: 0;
       padding: var(--spacing-sm) 0;
       width: 100%;
       background: var(--background-color);
 
-      & a {
+      & a,
-        text-decoration: none;
+      & .active {
         justify-content: center;
         width: 100%;
         height: 100%;
       }
 
+      & a {
+        text-decoration: none;
+      }
+
       & .active {
-        display: flex;
-        align-items: center;
-        justify-content: center;
-        width: 100%;
-        height: 100%;
         cursor: not-allowed;
       }
 
-      & .icon > svg,
+      :is(.icon, .active) > svg {
-      & .active > svg {
         display: none;
       }
 
-      & .icon > span,
+      :is(.icon, .active) > span {
-      & .active > span {
         display: inline;
       }
     }
@@ -57,29 +45,29 @@ menu {
     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;
       }
     }
 
     & ~ .menu-primary li {
       height: 0;
-      border: 0;
       padding: 0;
+      font-size: var(--font-size-lg);
     }
 
     &:checked ~ .menu-primary li {
@@ -89,18 +77,11 @@ menu {
       &:first-child {
         border-top: var(--border-gray);
       }
-
-      & a,
-      & .active {
-        font-size: var(--font-size-lg);
-      }
     }
   }
 
   .menu-button-container {
     display: unset;
-    width: var(--sizing-svg-base);
-    height: var(--sizing-svg-base);
 
     & svg {
       cursor: pointer;
@@ -117,38 +98,24 @@ menu {
       top: unset;
       left: unset;
       width: auto;
-    }
 
-    .menu-primary > li {
+      &  > li {
-      width: auto;
+        padding: 0;
-      height: auto;
+        background: none;
-      padding: 0;
-      background: none;
 
-      & .icon > svg,
+        :is(.icon, .active) > svg {
-      & .active > svg {
+          display: block;
-        display: block;
+        }
-      }
 
-      & .icon > span,
+        :is(.icon, .active) > span {
-      & .active > span {
+          display: none;
-        display: none;
+        }
       }
     }
 
-    #menu-toggle ~ .menu-primary li {
+    #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 {

src/assets/styles/components/modal.css

@@ -1,38 +1,36 @@
-.modal-wrapper {
+.modal-wrapper,
+.modal-body {
+  inset: 0;
   width: 100%;
   height: 100%;
-  inset: 0;
-  background: var(--modal-overlay-background);
   position: fixed;
+}
+
+.modal-wrapper {
+  background: var(--modal-overlay-background);
   z-index: 3;
 
-  & .modal-body {
+  .modal-body {
-    position: fixed;
     background: var(--background-color);
-    height: 100%;
-    width: 100%;
-    inset: 0;
-    overflow-y: scroll;
-    border-radius: var(--border-radius-slight);
     padding: var(--spacing-lg) var(--spacing-base);
+    overflow-y: auto;
+    border-radius: var(--border-radius-slight);
 
-    & h3 {
+    h3 {
       margin-top: 0;
     }
 
-    @media screen and (min-width: 768px) {
+    @media (min-width: 768px) {
-      max-height: 75%;
       max-width: 75%;
+      max-height: 75%;
       inset: 12.5%;
       border: var(--border-gray);
     }
 
-    & .modal-close {
+    .modal-close {
       position: sticky;
       top: 0;
       left: 100%;
-      height: var(--sizing-svg-base);
-      width: var(--sizing-svg-base);
     }
   }
 }
@@ -55,13 +53,11 @@
   display: inline-flex;
   vertical-align: middle;
 
-  & svg {
+  svg {
     stroke: var(--accent-color);
 
-    &:hover,
+    &:is(:hover, :focus, :active) {
-    &:focus,
-    &:active {
       stroke: var(--accent-color-hover);
     }
   }
-}
+}

src/assets/styles/components/music-chart.css

@@ -1,17 +1,12 @@
 .music-chart {
-  margin-bottom: var(--spacing-base);
+  margin: var(--margin-vertical-base-horizontal-zero);
 
   & ol {
     padding-left: 0;
-    margin-top: 0;
 
     @media screen and (min-width: 768px) {
       list-style-position: outside;
     }
-
-    & li:first-of-type {
-      margin-top: 0;
-    }
   }
 
   & .item {
@@ -20,22 +15,21 @@
     justify-content: start;
     align-items: start;
 
+    &:not(:last-of-type) {
+      margin-bottom: var(--spacing-lg);
+    }
+
     @media screen and (min-width: 768px) {
       flex-direction: row;
       align-items: center;
       justify-content: space-between;
     }
 
-    &:not(:last-of-type) {
-      margin-bottom: var(--spacing-lg);
-    }
-
     & .progress-bar-wrapper {
-      margin-top: var(--spacing-sm);
       max-width: 40%;
 
-      @media screen and (min-width: 768px) {
+      @media screen and (max-width: 768px) {
-        margin-top: 0;
+        margin-top: var(--spacing-sm);
       }
     }
 
@@ -74,6 +68,7 @@
       display: flex;
       flex-direction: column;
       justify-content: start;
+      gap: var(--spacing-xs);
 
       @media screen and (min-width: 768px) {
         max-width: 85%;
@@ -98,37 +93,11 @@
 
     & time {
       margin-top: var(--spacing-sm);
-      margin-left: 0;
 
       @media screen and (min-width: 768px) {
-        margin-left: var(--spacing-lg);
         text-align: right;
         white-space: nowrap;
       }
     }
   }
-
-  &.grid {
-    display: grid;
-    gap: var(--spacing-sm);
-    grid-template-columns: repeat(2, 1fr);
-    margin-bottom: var(--spacing-base);
-
-    @media screen and (min-width: 768px) {
-      grid-template-columns: repeat(3, 1fr);
-    }
-
-    & .item .meta {
-      max-width: 80%;
-
-      & .title {
-        line-height: var(--line-height-sm);
-      }
-
-      & .subtext p {
-        margin: 0;
-        line-height: var(--line-height-sm);
-      }
-    }
-  }
 }

src/assets/styles/components/paginator.css

@@ -2,6 +2,7 @@
   display: flex;
   align-items: center;
   justify-content: space-between;
+  margin-top: var(--spacing-base);
 
   & button {
     background: none;

src/assets/styles/components/tab-buttons.css

@@ -32,9 +32,7 @@ input[id="tracks-chart"] ~ .tracks-chart {
   background: transparent;
 }
 
-#tracks-recent:not(:checked) ~ [for="tracks-recent"]:hover,
+#tracks-recent:not(:checked) ~ [for="tracks-recent"]:is(:hover, :active),
-#tracks-recent:not(:checked) ~ [for="tracks-recent"]:active,
+#tracks-chart:not(:checked) ~ [for="tracks-chart"]:is(:hover, :active) {
-#tracks-chart:not(:checked) ~ [for="tracks-chart"]:hover,
-#tracks-chart:not(:checked) ~ [for="tracks-chart"]:active {
   color: var(--accent-color-hover);
 }

src/assets/styles/components/text-toggle.css

@@ -20,8 +20,4 @@
       left: 0;
     }
   }
-
-  & + button[data-toggle-button]:has(+ *) {
-    margin: 0 0 var(--spacing-base);
-  }
 }

src/assets/styles/components/youtube-player.css

@@ -5,14 +5,11 @@ youtube-video {
   overflow: hidden;
   border: var(--border-default);
   border-radius: var(--border-radius-slight);
+  margin: var(--margin-vertical-base-horizontal-zero);
 
   &:hover {
-    border-color: var(--accent-color-hover);
+    border: var(--border-default-hover);
     transition: border var(--transition-duration-default)
       var(--transition-ease-in-out);
   }
-
-  &:has(+ *) {
-    margin-bottom: var(--spacing-base);
-  }
 }

src/assets/styles/feed.xsl

@@ -24,26 +24,28 @@
               </h1>
             </section>
             <div class="default-wrapper">
-              <p>
+              <article class="intro">
-                <xsl:value-of select="/rss/channel/description" />
+                <p>
-              </p>
+                  <xsl:value-of select="/rss/channel/description" />
-              <p>
+                </p>
-                <strong class="highlight-text">Subscribe by adding the URL below to your feed reader
+                <p>
-                  of choice.</strong>
+                  <strong class="highlight-text">Subscribe by adding the URL below to your feed reader
-              </p>
+                    of choice.</strong>
-              <p>
+                </p>
-                <pre class="small">
+                <p>
-                  <code><xsl:value-of select="rss/channel/atom:link/@href"/></code>
+                  <pre class="small">
-                </pre>
+                    <code><xsl:value-of select="rss/channel/atom:link/@href"/></code>
-              </p>
+                  </pre>
-              <p>
+                </p>
-                <a href="/feeds">View more of the feeds from my site.</a>
+                <p>
-              </p>
+                  <a href="/feeds">View more of the feeds from my site.</a>
+                </p>
+              </article>
               <hr />
               <section>
                 <xsl:for-each select="/rss/channel/item">
                   <div class="item">
-                    <p class="date">Published: <xsl:value-of select="pubDate" /></p>
+                    <time>Published: <xsl:value-of select="pubDate" /></time>
                     <h3>
                       <a>
                         <xsl:attribute name="href">

src/assets/styles/index.css

@@ -1,11 +1,11 @@
 @layer reset, defaults, base, page, components, plugins;
 
 /* style resets */
-@import url("./reset.css") layer(reset);
+@import url("./base/reset.css") layer(reset);
 
 /* core defaults */
-@import url("./defaults/fonts.css") layer(defaults);
+@import url("./base/fonts.css") layer(defaults);
-@import url("./defaults/vars.css") layer(defaults);
+@import url("./base/vars.css") layer(defaults);
 
 /* base styles */
 @import url("./base/index.css") layer(base);

src/assets/styles/pages/about.css

@@ -8,9 +8,7 @@
 
 .avatar-wrapper {
   display: flex;
-  align-items: center;
   justify-content: center;
-  margin-bottom: var(--spacing-sm);
   width: 100%;
 
   & img {

src/assets/styles/pages/books.css

@@ -1,32 +1,27 @@
+:is(.book-entry, .book-focus) img {
+  height: auto;
+  aspect-ratio: var(--aspect-ratio-vertical);
+}
+
 .book-entry {
   display: flex;
   flex-direction: column;
   align-items: center;
   gap: var(--spacing-sm);
 
+  &:not(:last-of-type) {
+    padding-bottom: var(--spacing-base);
+    border-bottom: var(--border-gray);
+  }
+
   @media screen and (min-width: 768px) {
     flex-direction: row;
     gap: var(--spacing-base);
     align-items: start;
   }
 
-  &:last-of-type {
-    border-bottom: 0;
-    margin-bottom: 0;
-
-    & .media-meta .description {
-      margin-bottom: 0;
-    }
-  }
-
-  & a:has(img) {
-    display: flex;
-  }
-
   & img {
     max-width: calc(var(--sizing-3xl) * 4);
-    height: auto;
-    aspect-ratio: var(--aspect-ratio-vertical);
   }
 
   & .media-meta {
@@ -38,8 +33,8 @@
       align-items: start;
     }
 
-    & .description {
+    & .description p:last-of-type {
-      margin-bottom: var(--spacing-base);
+      margin-bottom: 0;
     }
 
     & .progress-bar-wrapper {
@@ -55,9 +50,6 @@
 }
 
 .book-focus {
-  margin-top: var(--spacing-base);
-  border-bottom: 0;
-
   & .book-display {
     display: flex;
     flex-direction: column;
@@ -70,6 +62,10 @@
       align-items: start;
     }
 
+    & img {
+      border: var(--border-default);
+    }
+
     & .media-meta {
       width: 100%;
       align-items: center;
@@ -88,4 +84,4 @@
       }
     }
   }
-}
+}

src/assets/styles/pages/contact.css

@@ -1,44 +1,34 @@
 .contact-wrapper {
-  display: flex;
+  display: grid;
-  flex-direction: column;
+  grid-template-columns: var(--grid-columns-one);
+  gap: var(--spacing-base);
 
   @media screen and (min-width: 768px) {
-    flex-direction: row;
+    grid-template-columns: var(--grid-columns-two);
   }
 
-  & label.hp,
+  & .hp,
   & label > span {
     display: none;
   }
 
   & textarea {
     height: calc(var(--sizing-3xl) * 5);
-    resize: none;
   }
 
-  & .column {
+  & .column.description {
-    @media screen and (min-width: 768px) {
+    & p:first-of-type {
-      width: 50%;
+      margin-top: 0;
     }
 
-    &.description {
+    ul {
-      & p:first-of-type {
+      margin-bottom: 0;
-        margin-top: 0;
-      }
-
-      @media screen and (min-width: 768px) {
-        padding-right: var(--spacing-xl);
-      }
     }
   }
 }
 
 .contact-success-wrapper {
-  display: flex;
+  text-align: center;
-  flex-direction: column;
-  justify-content: center;
-  align-items: center;
-  min-height: 60vh;
 
   & h2 {
     margin: 0;

src/assets/styles/pages/feeds.css

@@ -7,14 +7,11 @@
     &:not(:last-of-type) {
       border-bottom: var(--border-gray);
       margin-bottom: var(--spacing-base);
-      padding-bottom: var(--spacing-base);
     }
 
-    & .date {
+    & time {
-      display: block;
       color: var(--gray-dark);
       font-size: var(--font-size-sm);
-      margin-bottom: 0;
     }
 
     & h3 {
@@ -26,21 +23,15 @@
     }
   }
 
-  & p {
-    &:first-of-type {
-      margin-top: 0;
-    }
-
-    &:last-of-type {
-      margin-bottom: 0;
-    }
-  }
-
   & ol > li p {
     display: inline;
   }
 
   & footer {
     padding-bottom: var(--spacing-3xl);
+
+    & hr {
+      margin-top: 0;
+    }
   }
 }

src/assets/styles/pages/links.css

@@ -2,7 +2,6 @@
   display: grid;
   gap: var(--spacing-sm);
   grid-template-columns: var(--grid-columns-one);
-  margin-bottom: var(--spacing-base);
 
   @media screen and (min-width: 768px) {
     grid-template-columns: var(--grid-columns-two);

src/assets/styles/pages/media.css

@@ -16,4 +16,27 @@
       height: var(--sizing-svg-sm);
     }
   }
+}
+
+a:is(:hover, :active, :focus) .media-overlay::after {
+  border: var(--border-default-hover);
+  transition: border-color var(--transition-duration-default)
+        var(--transition-ease-in-out);
+}
+
+.media-overlay::after {
+  position: absolute;
+  z-index: 1;
+  content: "";
+  top: 0;
+  left: 0;
+  width: 100%;
+  height: 100%;
+  border: var(--border-default);
+  box-shadow: var(--box-shadow-media);
+  border-radius: var(--border-radius-slight);
+}
+
+.associated-media {
+  margin: var(--margin-vertical-base-horizontal-zero);
 }

src/assets/styles/pages/music.css

@@ -1,23 +1,12 @@
-.artist-focus,
-.genre-focus {
-  border-bottom: 0;
-}
-
-.genre-focus [data-toggle-content] p:last-of-type {
-  font-size: var(--font-size-sm);
-}
-
 .artist-focus {
-  margin-top: var(--spacing-base);
-
   & img {
     border: var(--border-default);
+    aspect-ratio: var(--aspect-ratio-square);
     width: 100%;
     height: auto;
-    aspect-ratio: var(--aspect-ratio-square);
 
     @media screen and (min-width: 768px) {
-      max-width: 240px;
+      max-width: calc(var(--sizing-3xl) * 6.75);
     }
   }
 
@@ -43,11 +32,6 @@
 
   & table + p {
     font-size: var(--font-size-sm);
-    margin-top: var(--spacing-base);
+    margin: var(--spacing-base) 0 0;
-    margin-bottom: 0;
   }
 }
-
-.concert-list {
-  margin-top: 0;
-}

src/assets/styles/pages/watching.css

@@ -1,76 +1,29 @@
-a:hover > .watching.hero::after,
+.watching.hero {
-a:active > .watching.hero::after {
+  position: relative;
-  border-color: var(--accent-color-hover);
-}
 
-.watching {
+  & img {
-  &.hero {
-    position: relative;
-    display: flex;
     aspect-ratio: var(--aspect-ratio-banner);
-
-    & img {
-      aspect-ratio: var(--aspect-ratio-banner);
-      height: auto;
-      width: 100%;
-    }
-
-    & .meta-text {
-      color: white;
-      position: absolute;
-      left: var(--spacing-sm);
-      bottom: var(--spacing-sm);
-      z-index: 2;
-      display: flex;
-      flex-direction: column;
-
-      & .header {
-        font-weight: var(--font-weight-bold);
-      }
-
-      & .subheader {
-        font-size: var(--font-size-sm);
-        display: inline-flex;
-        gap: var(--spacing-xs);
-      }
-
-      & .header,
-      & .subheader {
-        line-height: var(--line-height-md);
-        text-shadow: var(--text-shadow-default);
-      }
-    }
-
-    &::after {
-      position: absolute;
-      z-index: 1;
-      content: "";
-      top: 0;
-      left: 0;
-      box-shadow: var(--box-shadow-media);
-      width: 100%;
-      height: 100%;
-      border: var(--border-default);
-      border-radius: var(--border-radius-slight);
-      transition: border-color var(--transition-duration-default)
-        var(--transition-ease-in-out);
-    }
   }
 
-  &.focus {
+  & .meta-text {
-    margin-top: var(--spacing-base);
+    color: var(--color-lightest);
-    border-bottom: 0;
+    position: absolute;
+    z-index: 2;
+    left: var(--spacing-sm);
+    bottom: var(--spacing-sm);
 
-    & .media-meta {
+    & .header {
-      margin: var(--margin-vertical-base-horizontal-zero);
+      font-weight: var(--font-weight-bold);
     }
 
-    & .footnotes {
+    & .subheader {
-      padding-bottom: 0;
+      font-size: var(--font-size-sm);
+    }
+
+    & .header,
+    & .subheader {
+      line-height: var(--line-height-md);
+      text-shadow: var(--text-shadow-default);
     }
   }
 }
-
-a + .poster.grid {
-  margin-top: var(--spacing-base);
-}

src/assets/styles/pages/webrings.css

@@ -1,8 +1,11 @@
-.webring-wrapper {
+.webring-wrapper,
+.webring-navigation {
   display: flex;
-  flex-direction: column;
   align-items: center;
-  justify-content: center;
+}
+
+.webring-wrapper {
+  flex-direction: column;
   text-align: center;
   margin: var(--margin-vertical-base-horizontal-zero);
 
@@ -11,13 +14,7 @@
   }
 
   & .webring-navigation {
-    display: flex;
-    align-items: center;
     justify-content: center;
     gap: var(--spacing-sm);
-
-    & a {
-      display: flex;
-    }
   }
-}
+}

src/includes/blocks/now-playing.liquid

@@ -5,7 +5,7 @@
   storage="local"
   transition-duration="10ms"
 >
-  <span class="loading client-side">&nbsp;{{ nowPlaying }}</span>
+  <span class="loading client-side">{{ nowPlaying }}</span>
   <span class="content"></span>
   <noscript>
     <span>{{ nowPlaying }}</span>

src/includes/home/intro.liquid

@@ -1,3 +1,4 @@
 <article class="intro">
   {{ intro }}
+  <p class="music">{% render "blocks/now-playing.liquid", nowPlaying:nowPlaying %}</p>
 </article>

src/includes/home/recent-activity.liquid

@@ -10,7 +10,6 @@
     Recent activity
   </h2>
   <ul>
-    <li><span class="music">Last track listened to:</span> {% render "blocks/now-playing.liquid", nowPlaying:nowPlaying %}</li>
     <li><span class="music">Top track this week:</span> {{ track.track_name }} by <a href="{{ track.artist_url }}">{{ track.artist_name }}</a></li>
     <li><span class="tv">Last episode watched:</span> <strong class="highlight-text">{{ show.formatted_episode }}</strong> of <a href="{{ show.url }}">{{ show.title }}</a></li>
     <li><span class="movies">Last movie watched:</span> <a href="{{ movie.url }}">{{ movie.title }}</a>{%- if movie.rating %} ({{ movie.rating }}){%- endif -%}</li>

src/includes/media/grid.liquid

@@ -6,7 +6,7 @@
     {%- assign alt = item.grid.alt | replaceQuotes -%}
     {%- assign imageUrl = item.grid.image -%}
     <a href="{{ item.grid.url }}" title="{{ alt }}">
-      <div class="item">
+      <div class="item media-overlay">
         <div class="meta-text">
           <div class="header">{{ item.grid.title }}</div>
           <div class="subheader">{{ item.grid.subtext }}</div>

src/includes/media/watching/hero.liquid

@@ -1,5 +1,5 @@
 <a href="{{ movie.url }}">
-  <div class="watching hero">
+  <div class="watching media-overlay hero">
     <div class="meta-text">
       <div class="header">{{ movie.title }}</div>
       <div class="subheader">

src/pages/books/year.html

@@ -12,7 +12,7 @@ schema: books-year
 {%- assign currentYear = 'now' | date: "%Y" -%}
 {%- assign yearString = year.value | append: '' -%}
 {%- assign currentYearString = currentYear | append: '' -%}
-<a href="/books" title="Go back to the books index page">{% tablericon "arrow-left" %} Back to books</a>
+<a href="/books" class="back-link">{% tablericon "arrow-left" %} Back to books</a>
 <h2>{{ year.value }} / Books</h2>
 {% if yearString == currentYearString %}
 <p>I've finished <strong class="highlight-text">{{ bookData.size }} books</strong> this year.{%- if favoriteBooks %} Among my favorites are {{ favoriteBooks }}.{%- endif -%}</p>

src/pages/index.html

@@ -1,6 +1,6 @@
 ---
 permalink: /
 ---
-{% render "home/intro.liquid" intro:globals.intro %}
+{% render "home/intro.liquid" intro:globals.intro, nowPlaying:nowPlaying.content %}
-{% render "home/recent-activity.liquid" music:music, nowPlaying:nowPlaying.content, books:books.currentYear, tv:tv, movies:movies, links:links %}
+{% render "home/recent-activity.liquid" music:music, books:books.currentYear, tv:tv, movies:movies, links:links %}
 {% render "home/recent-posts.liquid" posts:posts %}

src/pages/music/concerts.html

@@ -11,7 +11,7 @@ permalink: "/music/concerts/{% if pagination.pageNumber > 0 %}{{ pagination.page
 <p>These are concerts I've attended (not all of them — just the ones I could remember or glean from emails, photo metadata et al). I've been to at least <strong class="highlight-text">{{ concerts | size }}</strong> shows. <a href="/music">You can also take a look at the music I've been listening to lately</a>.</p>
 <hr />
 {%- endif -%}
-<ul class="concert-list">
+<ul>
   {%- for concert in pagination.items -%}
     {%- capture artistName -%}
       {% if concert.artist.url %}

src/pages/music/index.html

@@ -8,7 +8,7 @@ schema: music-index
 <h2>{{ title }}</h2>
 <p>I've listened to <strong class="highlight-text">{{ music.week.artists.size }} artists</strong>, <strong class="highlight-text">{{ music.week.albums.size }} albums</strong> and <strong class="highlight-text">{{ music.week.totalTracks }} tracks</strong> this week. Most of that has been {{ music.week.genres | mediaLinks: "genre", 5 }}.</p>
 <p><strong class="highlight-text">Take a look at what I've listened to</strong> <a href="/music/this-month">this month</a> or <a href="/music/concerts">check out the concerts I've been to.</a></p>
-<p><span class="music">Last track listened to:</span> {% render "blocks/now-playing.liquid", nowPlaying:nowPlaying.content %}</p>
+<p class="music">{% render "blocks/now-playing.liquid", nowPlaying:nowPlaying.content %}</p>
 <hr />
 <h3 id="artists">
   {% tablericon "microphone-2" %}

src/pages/watching/favorites/movies.html

@@ -7,7 +7,7 @@ pagination:
 permalink: "/watching/favorite-movies/{% if pagination.pageNumber > 0 %}{{ pagination.pageNumber }}/{% endif %}index.html"
 schema: favorite-movies
 ---
-<a href="/watching" title="Go back to the watching index page">{% tablericon "arrow-left" %} Back to watching</a>
+<a href="/watching" class="back-link">{% tablericon "arrow-left" %} Back to watching</a>
 {% if pagination.pageNumber == 0 %}
 <h2 class="watching">{{ title }}</h2>
 <p>These are my favorite movies. There are many like them, but these are mine.</p>

src/pages/watching/favorites/shows.html

@@ -7,7 +7,7 @@ pagination:
 permalink: "/watching/favorite-shows/{% if pagination.pageNumber > 0 %}{{ pagination.pageNumber }}/{% endif %}index.html"
 schema: favorite-shows
 ---
-<a href="/watching" title="Go back to the watching index page">{% tablericon "arrow-left" %} Back to watching</a>
+<a href="/watching" class="back-link">{% tablericon "arrow-left" %} Back to watching</a>
 {% if pagination.pageNumber == 0 %}
 <h2 class="watching">{{ title }}</h2>
 <p>These are my favorite shows. There are many like them, but these are mine.</p>

workers/dynamic-pages/utils/generators.js

@@ -231,7 +231,7 @@ export const generateArtistHTML = (artist, globals) => {
     : "";
 
   return `
-    <a href="/music">${ICON_MAP.arrowLeft} Back to music</a>
+    <a href="/music" class="back-link">${ICON_MAP.arrowLeft} Back to music</a>
     <article class="artist-focus">
       <div class="artist-display">
         <img
@@ -301,17 +301,17 @@ export const generateBookHTML = (book, globals) => {
   const percentage = book["progress"] ? `${book["progress"]}%` : "";
   const status =
     book["status"] === "finished"
-      ? `Finished on <strong class="highlight-text">${formatDate(
+      ? `<span class="sub-meta">Finished on <strong class="highlight-text">${formatDate(
           book["date_finished"]
-        )}</strong>`
+        )}</strong></span>`
       : percentage
       ? `<div class="progress-bar-wrapper" title="${percentage}">
-        <div style="width:${percentage}" class="progress-bar"></div>
+        <div class="progress-bar" style="width:${percentage}"></div>
       </div>`
       : "";
 
   return `
-    <a href="/books">${
+    <a href="/books" class="back-link">${
       ICON_MAP["arrowLeft"]
     } Back to books</a>
     <article class="book-focus">
@@ -352,7 +352,7 @@ export const generateBookHTML = (book, globals) => {
               ? `<span class="sub-meta tattoo">${ICON_MAP["needle"]} I have a tattoo inspired by this book!</span>`
               : ""
           }
-          ${status ? `<span class="sub-meta">${status}</span>` : ""}
+          ${status ? status : ""}
         </div>
       </div>
       ${
@@ -373,7 +373,7 @@ export const generateGenreHTML = (genre) => {
   const mediaLinks = generateMediaLinks(genre["artists"], "artist", 5);
 
   return `
-    <a href="/music">${
+    <a href="/music" class="back-link">${
       ICON_MAP["arrowLeft"]
     } Back to music</a>
     <h2>${genre["name"]}</h2>
@@ -411,7 +411,7 @@ export const generateWatchingHTML = (media, globals, type) => {
     media["last_watched"] || (isShow && media["episode"]?.["last_watched_at"]);
 
   return `
-    <a href="/watching">${
+    <a href="/watching" class="back-link">${
       ICON_MAP.arrowLeft
     } Back to watching</a>
     <article class="watching focus">