chore: clean up logic + data + feeds

_redirects

@@ -1,8 +1,6 @@
 # 404s
 /now.html /now 301
 /contact.html /contact 301
-/watching/favorite-movies /watching 301
-/watching/favorite-shows /watching 301
 
 # feeds
 /feed.xml /feeds/posts 301

package-lock.json

@@ -1,19 +1,18 @@
 {
   "name": "coryd.dev",
-  "version": "2.4.13",
+  "version": "2.6.7",
   "lockfileVersion": 3,
   "requires": true,
   "packages": {
     "": {
       "name": "coryd.dev",
-      "version": "2.4.13",
+      "version": "2.6.7",
       "license": "MIT",
       "dependencies": {
         "@11ty/eleventy-fetch": "4.0.1",
         "@cdransf/api-text": "^1.8.1",
         "@cdransf/select-pagination": "^1.3.1",
         "@daviddarnes/mastodon-post": "^1.3.0",
-        "http-proxy-middleware": "3.0.3",
         "minisearch": "^7.1.0",
         "youtube-video-element": "^1.1.6"
       },
@@ -29,6 +28,7 @@
         "fast-xml-parser": "^4.5.0",
         "html-minifier-terser": "^7.2.0",
         "html-to-text": "^9.0.5",
+        "http-proxy-middleware": "3.0.3",
         "ics": "^3.8.1",
         "linkedom": "0.18.5",
         "luxon": "^3.5.0",
@@ -688,6 +688,7 @@
       "version": "1.17.15",
       "resolved": "https://registry.npmjs.org/@types/http-proxy/-/http-proxy-1.17.15.tgz",
       "integrity": "sha512-25g5atgiVNTIv0LBDTg1H74Hvayx0ajtJPLLcYE3whFv75J0pWNtOBzaXJQgDTmrX1bx5U9YC2w/n65BN1HwRQ==",
+      "dev": true,
       "license": "MIT",
       "dependencies": {
         "@types/node": "*"
@@ -722,9 +723,10 @@
       "peer": true
     },
     "node_modules/@types/node": {
-      "version": "22.8.7",
+      "version": "22.9.0",
-      "resolved": "https://registry.npmjs.org/@types/node/-/node-22.8.7.tgz",
+      "resolved": "https://registry.npmjs.org/@types/node/-/node-22.9.0.tgz",
-      "integrity": "sha512-LidcG+2UeYIWcMuMUpBKOnryBWG/rnmOHQR5apjn8myTQcx3rinFRn7DcIFhMnS0PPFSC6OafdIKEad0lj6U0Q==",
+      "integrity": "sha512-vuyHg81vvWA1Z1ELfvLko2c8f34gyA0zaic0+Rllc5lbCnbSyuvb2Oxpm6TAUAC/2xZN3QGqxBNggD1nNR2AfQ==",
+      "dev": true,
       "license": "MIT",
       "dependencies": {
         "undici-types": "~6.19.8"
@@ -1060,6 +1062,7 @@
       "version": "3.0.3",
       "resolved": "https://registry.npmjs.org/braces/-/braces-3.0.3.tgz",
       "integrity": "sha512-yQbXgO/OSZVD2IsiLlro+7Hf6Q18EJrKSEsdoMzKePKXct3gvD8oLcOQdIzGupr5Fj+EDe8gO/lxc1BzfMpxvA==",
+      "dev": true,
       "license": "MIT",
       "dependencies": {
         "fill-range": "^7.1.1"
@@ -1788,9 +1791,9 @@
       "license": "MIT"
     },
     "node_modules/electron-to-chromium": {
-      "version": "1.5.51",
+      "version": "1.5.52",
-      "resolved": "https://registry.npmjs.org/electron-to-chromium/-/electron-to-chromium-1.5.51.tgz",
+      "resolved": "https://registry.npmjs.org/electron-to-chromium/-/electron-to-chromium-1.5.52.tgz",
-      "integrity": "sha512-kKeWV57KSS8jH4alKt/jKnvHPmJgBxXzGUSbMd4eQF+iOsVPl7bz2KUmu6eo80eMP8wVioTfTyTzdMgM15WXNg==",
+      "integrity": "sha512-xtoijJTZ+qeucLBDNztDOuQBE1ksqjvNjvqFoST3nGC7fSpqJ+X6BdTBaY5BHG+IhWWmpc6b/KfpeuEDupEPOQ==",
       "dev": true,
       "license": "ISC"
     },
@@ -2145,6 +2148,7 @@
       "version": "7.1.1",
       "resolved": "https://registry.npmjs.org/fill-range/-/fill-range-7.1.1.tgz",
       "integrity": "sha512-YsGpe3WHLK8ZYi4tWDg2Jy3ebRz2rXowDxnld4bkQB00cc/1Zw9AWnC0i9ztDJitivtQvaI9KaLyKrc+hBW0yg==",
+      "dev": true,
       "license": "MIT",
       "dependencies": {
         "to-regex-range": "^5.0.1"
@@ -2250,6 +2254,7 @@
       "version": "1.15.9",
       "resolved": "https://registry.npmjs.org/follow-redirects/-/follow-redirects-1.15.9.tgz",
       "integrity": "sha512-gew4GsXizNgdoRyqmyfMHyAmXsZDk6mHkSxZFCzW9gwlbtOW44CDtYavM+y+72qD/Vq2l550kMF52DT8fOLJqQ==",
+      "dev": true,
       "funding": [
         {
           "type": "individual",
@@ -2666,6 +2671,7 @@
       "version": "1.18.1",
       "resolved": "https://registry.npmjs.org/http-proxy/-/http-proxy-1.18.1.tgz",
       "integrity": "sha512-7mz/721AbnJwIVbnaSv1Cz3Am0ZLT/UBwkC92VlxhXv/k/BBQfM2fXElQNC27BVGr0uwUpplYPQM9LnaBMR5NQ==",
+      "dev": true,
       "license": "MIT",
       "dependencies": {
         "eventemitter3": "^4.0.0",
@@ -2680,6 +2686,7 @@
       "version": "3.0.3",
       "resolved": "https://registry.npmjs.org/http-proxy-middleware/-/http-proxy-middleware-3.0.3.tgz",
       "integrity": "sha512-usY0HG5nyDUwtqpiZdETNbmKtw3QQ1jwYFZ9wi5iHzX2BcILwQKtYDJPo7XHTsu5Z0B2Hj3W9NNnbd+AjFWjqg==",
+      "dev": true,
       "license": "MIT",
       "dependencies": {
         "@types/http-proxy": "^1.17.15",
@@ -2825,6 +2832,7 @@
       "version": "2.1.1",
       "resolved": "https://registry.npmjs.org/is-extglob/-/is-extglob-2.1.1.tgz",
       "integrity": "sha512-SbKbANkN603Vi4jEZv49LeVJMn4yGwsbzZworEoyEiutsN3nJYdbO36zfhGJ6QEDpOZIFkDtnq5JRxmvl3jsoQ==",
+      "dev": true,
       "license": "MIT",
       "engines": {
         "node": ">=0.10.0"
@@ -2844,6 +2852,7 @@
       "version": "4.0.3",
       "resolved": "https://registry.npmjs.org/is-glob/-/is-glob-4.0.3.tgz",
       "integrity": "sha512-xelSayHH36ZgE7ZWhli7pW34hNbNl8Ojv5KVmkJD4hBdD3th8Tfk9vYasLM+mXWOZhFkgZfxhLSnrwRr4elSSg==",
+      "dev": true,
       "license": "MIT",
       "dependencies": {
         "is-extglob": "^2.1.1"
@@ -2863,6 +2872,7 @@
       "version": "7.0.0",
       "resolved": "https://registry.npmjs.org/is-number/-/is-number-7.0.0.tgz",
       "integrity": "sha512-41Cifkg6e8TylSpdtTpeLVMqvSBEVzTttHvERD741+pnZ8ANv0004MRL43QKPDlK9cGvNp6NZWZUBlbGXYxxng==",
+      "dev": true,
       "license": "MIT",
       "engines": {
         "node": ">=0.12.0"
@@ -2872,6 +2882,7 @@
       "version": "5.0.0",
       "resolved": "https://registry.npmjs.org/is-plain-object/-/is-plain-object-5.0.0.tgz",
       "integrity": "sha512-VRSzKkbMm5jMDoKLbltAkFQ5Qr7VDiTFGXxYFXXowVj387GeGNOCsOH6Msy00SGZ3Fp84b1Naa1psqgcCIEP5Q==",
+      "dev": true,
       "license": "MIT",
       "engines": {
         "node": ">=0.10.0"
@@ -3256,6 +3267,7 @@
       "version": "4.0.8",
       "resolved": "https://registry.npmjs.org/micromatch/-/micromatch-4.0.8.tgz",
       "integrity": "sha512-PXwfBhYu0hBCPw8Dn0E+WDYb7af3dSLVWKi3HGv84IdF4TyFoC0ysxFd0Goxw7nSv4T/PzEJQxsYsEiFCKo2BA==",
+      "dev": true,
       "license": "MIT",
       "dependencies": {
         "braces": "^3.0.3",
@@ -3791,6 +3803,7 @@
       "version": "2.3.1",
       "resolved": "https://registry.npmjs.org/picomatch/-/picomatch-2.3.1.tgz",
       "integrity": "sha512-JU3teHTNjmE2VCGFzuY8EXzCDVwEqB2a8fsIvwaStHhAWJEeVd1o1QD80CU6+ZdEXXSLbSsuLwJjkCBWqRQUVA==",
+      "dev": true,
       "license": "MIT",
       "engines": {
         "node": ">=8.6"
@@ -4640,6 +4653,7 @@
       "version": "1.0.0",
       "resolved": "https://registry.npmjs.org/requires-port/-/requires-port-1.0.0.tgz",
       "integrity": "sha512-KigOCHcocU3XODJxsu8i/j8T9tzT4adHiecwORRQ0ZZFcp7ahwXuRU1m+yuO90C5ZUyGeGfocHDI14M3L3yDAQ==",
+      "dev": true,
       "license": "MIT"
     },
     "node_modules/resolve": {
@@ -5318,6 +5332,7 @@
       "version": "5.0.1",
       "resolved": "https://registry.npmjs.org/to-regex-range/-/to-regex-range-5.0.1.tgz",
       "integrity": "sha512-65P7iz6X5yEr1cwcgvQxbbIw7Uk3gOy5dIdtZ4rDveLqhrdJP+Li/Hx6tyK0NEb+2GCyneCMJiGqrADCSNk8sQ==",
+      "dev": true,
       "license": "MIT",
       "dependencies": {
         "is-number": "^7.0.0"
@@ -5411,6 +5426,7 @@
       "version": "6.19.8",
       "resolved": "https://registry.npmjs.org/undici-types/-/undici-types-6.19.8.tgz",
       "integrity": "sha512-ve2KP6f/JnbPBFyobGHuerC9g1FYGn/F8n1LWTwNxCEzd6IfqTwUQcNXgEtmmQ6DlRrC1hrSrBnCZPokRrDHjw==",
+      "dev": true,
       "license": "MIT"
     },
     "node_modules/unpipe": {

package.json

@@ -1,6 +1,6 @@
 {
   "name": "coryd.dev",
-  "version": "2.4.13",
+  "version": "2.6.7",
   "description": "The source for my personal site. Built using 11ty (and other tools).",
   "type": "module",
   "engines": {
@@ -30,7 +30,6 @@
     "@cdransf/api-text": "^1.8.1",
     "@cdransf/select-pagination": "^1.3.1",
     "@daviddarnes/mastodon-post": "^1.3.0",
-    "http-proxy-middleware": "3.0.3",
     "minisearch": "^7.1.0",
     "youtube-video-element": "^1.1.6"
   },
@@ -46,6 +45,7 @@
     "fast-xml-parser": "^4.5.0",
     "html-minifier-terser": "^7.2.0",
     "html-to-text": "^9.0.5",
+    "http-proxy-middleware": "3.0.3",
     "ics": "^3.8.1",
     "linkedom": "0.18.5",
     "luxon": "^3.5.0",

src/assets/scripts/index.js

@@ -153,23 +153,19 @@ window.addEventListener("load", () => {
         : plainText;
     };
 
-    const formatArtistTitle = (title, totalPlays) =>
-      totalPlays > 0
-        ? `${title} <strong class="highlight-text">${totalPlays} plays</strong>`
-        : title;
-
     const renderSearchResults = (results) => {
       const resultHTML = results
         .map(
           ({ title, url, description, type, total_plays }) => `
           <li class="search__results--result">
-            <a href="${url}">
+              <h3>
-              <h3>${
+                <a href="${url}">${title}</a>
-                type === "artist" && total_plays
+                ${
-                  ? formatArtistTitle(title, total_plays)
+                  type === "artist" && total_plays
-                  : title
+                    ? ` <strong class="highlight-text">${total_plays} plays</strong>`
-              }</h3>
+                    : ""
-            </a>
+                }
+              </h3>
             <p>${truncateDescription(description)}</p>
           </li>
         `
@@ -225,13 +221,14 @@ window.addEventListener("load", () => {
         .map(
           ({ title, url, description, type, total_plays }) => `
           <li class="search__results--result">
-            <a href="${url}">
+            <h3>
-              <h3>${
+              <a href="${url}">${title}</a>
+              ${
                 type === "artist" && total_plays
-                  ? formatArtistTitle(title, total_plays)
+                  ? ` <strong class="highlight-text">${total_plays} plays</strong>`
-                  : title
+                  : ""
-              }</h3>
+              }
-            </a>
+            </h3>
             <p>${truncateDescription(description)}</p>
           </li>
         `

src/assets/styles/base/index.css

@@ -1,17 +1,15 @@
-html body {
+html,
+body {
+  font-family: var(--font-mono);
   color: var(--text-color);
   background: var(--background-color);
-  font-family: var(--font-mono);
 }
 
 html {
-  scrollbar-width: thin;
   scrollbar-color: var(--accent-color) var(--gray-light);
 }
 
 body {
-  font-size: var(--font-size-base);
-  line-height: var(--line-height-base);
   letter-spacing: -0.035rem;
   word-spacing: -0.15rem;
 }
@@ -42,13 +40,7 @@ p {
   margin: var(--margin-vertical-base-horizontal-zero);
 }
 
-:is(p, ul, ol) a {
+.highlight-text {
-  text-decoration: underline;
-  text-underline-offset: var(--spacing-xs);
-}
-
-.highlight-text,
-details > summary {
   color: var(--text-color-inverted);
   background-color: var(--accent-color);
   padding: var(--spacing-xs);
@@ -56,7 +48,6 @@ details > summary {
 }
 
 details > summary {
-  cursor: pointer;
   display: inline;
 }
 
@@ -68,27 +59,10 @@ blockquote {
   margin: var(--margin-vertical-base-horizontal-zero);
 }
 
-code {
+:is(h1, h2, h3) svg {
-  padding: var(--spacing-xs);
-  color: var(--text-color-inverted);
-  background-color: var(--background-color-inverted);
-  border-radius: var(--border-radius-slight);
-}
-
-p:not(.banner p) > svg {
-  margin-bottom: var(--inline-margin-bottom);
-}
-
-:is(h1, h2, h3, h4, h5, h6) svg {
   stroke-width: var(--stroke-width-bold);
 }
 
-:is(h1, h2, h3, h4, h5, h6):has(svg) {
-  display: flex;
-  align-items: center;
-  gap: var(--spacing-sm);
-}
-
 strong,
 blockquote {
   font-weight: var(--font-weight-bold);
@@ -105,7 +79,29 @@ svg {
   stroke-width: var(--stroke-width-default);
 }
 
-/* brand colors */
+/* images */
+img {
+  border-radius: var(--border-radius-slight);
+
+  &.image-banner {
+    border: var(--border-default);
+    height: auto;
+    width: 100%;
+  }
+}
+
+/* lists */
+ul,
+ol {
+  margin: var(--margin-vertical-base-horizontal-zero);
+  padding-left: var(--spacing-base);
+
+  & li:not(:last-child) {
+    margin-bottom: var(--spacing-lg);
+  }
+}
+
+/* brand + section colors */
 .article,
 .books,
 .brand-github,
@@ -211,51 +207,44 @@ svg {
 /* links */
 a {
   color: var(--accent-color);
-  text-decoration: none;
-}
 
-:is(a:hover, a:active, a:focus) svg[data-tablericon-name^="arrow-"] {
+  & > img {
-  stroke: var(--accent-color-hover);
+    border: var(--border-default);
-}
+  }
-
-a:hover,
-a:focus,
-a:active,
-:is(.main-title, footer nav.sub-pages) a:hover,
-:is(.main-title, footer nav.sub-pages) a:focus,
-:is(.main-title, footer nav.sub-pages) a:active {
-  color: var(--accent-color-hover);
-  transition: color var(--transition-duration-default)
-    var(--transition-ease-in-out);
-}
-
-:is(a:has(svg):hover, a:has(svg):active, a:has(svg):focus) svg {
-  stroke: var(--accent-color-hover);
-}
-
-:is(a):has(svg) {
-  display: inline-flex;
-  align-items: center;
-  gap: var(--spacing-sm);
 
   & svg {
     stroke: var(--accent-color);
   }
 
-  &:hover svg,
+  &:hover,
-  &:active svg,
+  &:focus,
-  &:focus svg {
+  &:active {
-    stroke: var(--accent-color-hover);
+    color: var(--accent-color-hover);
+    transition: color var(--transition-duration-default)
+      var(--transition-ease-in-out);
+
+    & > img {
+      border-color: var(--accent-color-hover);
+      transition: border var(--transition-duration-default)
+        var(--transition-ease-in-out);
+    }
+
+    & > svg {
+      stroke: var(--accent-color-hover);
+    }
   }
 }
 
+:is(h1, h2, h3, a, p:not(.banner p), span, th, td, .post-meta):has(svg) {
+  display: flex;
+  align-items: center;
+  gap: var(--spacing-xs);
+}
+
 /* headers */
 h1,
 h2,
-h3,
+h3 {
-h4,
-h5,
-h6 {
   font-weight: var(--font-weight-bold);
   line-height: var(--line-height-md);
   margin: var(--margin-vertical-base-horizontal-zero);
@@ -264,48 +253,32 @@ h6 {
 h1 {
   font-size: var(--font-size-2xl);
 }
+
 h2 {
   font-size: var(--font-size-xl);
 }
+
 h3 {
   font-size: var(--font-size-lg);
 }
-h4 {
-  font-size: var(--font-size-base);
-}
-h5 {
-  font-size: var(--font-size-md);
-}
-h6 {
-  font-size: var(--font-size-sm);
-}
 
 @media screen and (min-width: 768px) {
   h1 {
     font-size: var(--font-size-3xl);
   }
+
   h2 {
     font-size: var(--font-size-2xl);
   }
+
   h3 {
     font-size: var(--font-size-xl);
   }
-  h4 {
-    font-size: var(--font-size-lg);
-  }
-  h5 {
-    font-size: var(--font-size-base);
-  }
-  h6 {
-    font-size: var(--font-size-md);
-  }
 }
 
 /* dividers */
 hr {
-  height: 1px;
+  color: var(--gray-light);
-  background-color: var(--gray-light);
-  border: 0;
   margin: var(--margin-vertical-base-horizontal-zero);
 }
 
@@ -322,19 +295,11 @@ article {
     margin-top: 0;
   }
 
-  &.standalone .associated-media:last-of-type > hr {
-    display: none;
-  }
-
   & h3 {
     margin-top: 0;
   }
 
   & .post-meta {
-    display: flex;
-    align-items: center;
-    gap: var(--spacing-sm);
-
     & svg {
       stroke: var(--gray-dark);
       width: var(--sizing-svg-sm);
@@ -362,10 +327,6 @@ img + .associated-media,
     & li:last-child {
       margin-bottom: 0;
     }
-
-    & .footnote-item > p {
-      display: inline;
-    }
   }
 
   &:has(~ *) {
@@ -375,11 +336,7 @@ img + .associated-media,
 
 sup.footnote-ref {
   line-height: var(--line-height-xs);
-}
+  padding: var(--spacing-xs);
-
-sup.footnote-ref a,
-.footnote-backref {
-  text-decoration: none;
 }
 
 /* tables */
@@ -476,8 +433,8 @@ td:first-of-type,
 .active,
 .active svg {
   cursor: not-allowed;
-  color: var(--accent-color);
+  color: var(--accent-color-active);
-  stroke: var(--accent-color-hover);
+  stroke: var(--accent-color-active);
 }
 
 /* layout */
@@ -506,8 +463,7 @@ main {
 main,
 footer {
   width: 80%;
-  margin-left: auto;
+  margin: 0 auto;
-  margin-right: auto;
 
   @media screen and (min-width: 768px) {
     max-width: 768px;
@@ -555,28 +511,4 @@ footer {
       }
     }
   }
-}
-
-:is(.main-title, footer nav.sub-pages) a {
-  color: var(--text-color);
-}
-
-/* lists */
-ul,
-ol {
-  list-style-position: inside;
-  margin: var(--margin-vertical-base-horizontal-zero);
-  padding-left: var(--spacing-base);
-
-  & li:not(:last-child) {
-    margin-bottom: var(--spacing-lg);
-  }
-}
-
-/* images */
-.image-banner {
-  border: var(--border-default);
-  border-radius: var(--border-radius-slight);
-  height: auto;
-  width: 100%;
 }

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

@@ -1,4 +1,5 @@
 .addon-links {
+  margin-top: var(--spacing-base);
   display: grid;
   gap: var(--sizing-base);
   grid-template-columns: var(--grid-columns-one);
@@ -15,9 +16,8 @@
     border-bottom: 0;
     margin-bottom: 0;
 
-    & ol,
+    & ul,
-    ul {
+    & ol {
-      padding: 0;
       margin-bottom: 0;
     }
   }

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

@@ -14,5 +14,7 @@
 
   & img {
     image-rendering: pixelated;
+    border: none;
+    border-radius: 0;
   }
 }

src/assets/styles/components/buttons.css

@@ -8,14 +8,12 @@ button,
   border: 2px solid var(--accent-color);
   border-radius: var(--border-radius-full);
   padding: var(--spacing-xs) var(--spacing-md);
-  cursor: pointer;
   font-size: var(--font-size-base);
   font-weight: var(--font-weight-bold);
   line-height: var(--line-height-base);
   white-space: nowrap;
   color: var(--text-color-inverted);
   background-color: var(--accent-color);
-  appearance: none;
   transition: color var(--transition-duration-default)
     var(--transition-ease-in-out);
 
@@ -23,10 +21,7 @@ button,
     margin-top: 0;
   }
 
-  &:not(.active):hover,
+  &:not(.active):is(:hover, :active, :focus, :focus-within) {
-  &:not(.active):active,
-  &:not(.active):focus,
-  &:not(.active):focus-within {
     background-color: var(--accent-color-hover);
     border-color: var(--accent-color-hover);
   }

src/assets/styles/components/forms.css

@@ -3,61 +3,29 @@
   opacity: 0.5;
 }
 
-input[type="text"],
+input:not([type="button"]):not([type="submit"]):not([type="reset"]),
-input[type="email"],
-input[type="search"],
 textarea {
-  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);
-  border: var(--border-default);
-  border-radius: var(--border-radius-slight);
-  padding: var(--spacing-sm);
   width: 100%;
 }
 
+
+input:not([type="button"]):not([type="submit"]):not([type="reset"]),
+textarea,
+select {
+  color: var(--text-color);
+  border-radius: var(--border-radius-slight);
+  background-color: var(--background-color);
+  padding: var(--spacing-sm);
+  border: var(--border-gray);
+}
+
 form:has(+ *),
 label:has(input):has(+ *) input,
-input[type="text"]:has(+ *),
+input:not([type="button"]):not([type="submit"]):not([type="reset"]):has(+ *),
-input[type="email"]:has(+ *),
-input[type="search"]:has(+ *),
 textarea:has(+ *) {
   margin-bottom: var(--spacing-base);
 }
 
-select {
-  color: var(--text-color);
-  cursor: pointer;
-  border: var(--border-gray);
-  border-radius: var(--border-radius-slight);
-  background-color: var(--background-color);
-  padding: var(--spacing-xs) var(--spacing-sm);
-}
-
-fieldset {
-  display: flex;
-  flex-direction: column;
-  gap: var(--spacing-sm);
-  padding: var(--spacing-lg) 0 0 0;
-  border: none;
-
-  @media screen and (min-width: 768px) {
-    flex-direction: row;
-    gap: var(--spacing-lg);
-  }
-
-  & label {
-    display: flex;
-    align-items: center;
-    gap: var(--sizing-xs);
-  }
-
-  & input[type="checkbox"] {
-    margin: 0;
-  }
-}
-
 .search__form {
   margin-top: 0;
 
@@ -79,9 +47,5 @@ fieldset {
       margin-bottom: var(--sizing-base);
       border-bottom: var(--border-gray);
     }
-
-    & a {
-      text-decoration: none;
-    }
   }
 }

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

@@ -1,6 +1,4 @@
 .mastodon-post-wrapper {
-  margin-bottom: var(--spacing-base);
-
   & dl,
   dt {
     display: flex;

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

@@ -1,4 +1,4 @@
-.icon-link + .media-grid {
+a + .media-grid {
   margin-top: var(--spacing-base);
 }
 

src/assets/styles/components/menu.css

@@ -23,7 +23,6 @@ menu {
       margin: 0;
       padding: var(--spacing-sm) 0;
       width: 100%;
-      color: var(--text-color);
       background: var(--background-color);
 
       & a {

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

@@ -39,13 +39,7 @@
       }
     }
 
-    & a:has(img) {
-      display: flex;
-    }
-
     & img {
-      border: var(--border-default);
-      border-radius: var(--border-radius-slight);
       width: calc(var(--sizing-3xl) * 1.5);
       height: calc(var(--sizing-3xl) * 1.5);
 
@@ -92,18 +86,17 @@
 
     & .title,
     & .subtext,
-    & .subtext p,
+    & time {
-    & .timestamp {
       line-height: var(--line-height-md);
       word-break: break-word;
     }
 
     & .subtext,
-    & .timestamp {
+    & time {
       font-size: var(--font-size-sm);
     }
 
-    & .timestamp {
+    & time {
       margin-top: var(--spacing-sm);
       margin-left: 0;
 

src/assets/styles/components/paginator.css

@@ -2,24 +2,23 @@
   display: flex;
   align-items: center;
   justify-content: space-between;
-}
 
-.pagination button {
+  & button {
-  background: none;
+    background: none;
-  padding: 0;
+    padding: 0;
-}
+  }
 
-.pagination a {
+  & a {
-  display: flex;
+    display: flex;
-}
 
-.pagination p {
+    &.disabled svg[data-tablericon-name^="arrow-"] {
-  text-align: center;
+      cursor: not-allowed;
-  margin: 0;
+      stroke: var(--gray-medium);
-}
+      stroke-width: var(--stroke-width-default);
+    }
+  }
 
-.pagination a.disabled svg[data-tablericon-name^="arrow-"] {
+  & p {
-  cursor: not-allowed;
+    text-align: center;
-  stroke: var(--gray-medium);
+  }
-  stroke-width: var(--stroke-width-default);
 }

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

@@ -1,7 +1,7 @@
 #tracks-recent,
 #tracks-chart,
-#tracks-recent ~ .tracks-recent,
+.tracks-recent,
-#tracks-chart ~ .tracks-chart {
+.tracks-chart {
   display: none;
 }
 
@@ -15,7 +15,7 @@ input[id="tracks-chart"] ~ .tracks-chart {
   margin-top: var(--spacing-base);
 }
 
-input[id="tracks-recent"] ~ [for="tracks-recent"]:has(+ [for="tracks-chart"]) {
+[for="tracks-recent"] {
   margin-right: var(--spacing-xs);
 }
 
@@ -37,4 +37,4 @@ input[id="tracks-recent"] ~ [for="tracks-recent"]:has(+ [for="tracks-chart"]) {
 #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/youtube-player.css

@@ -2,6 +2,15 @@ youtube-video {
   aspect-ratio: 16/9;
   width: 100%;
   display: flex;
+  overflow: hidden;
+  border: var(--border-default);
+  border-radius: var(--border-radius-slight);
+
+  &:hover {
+    border-color: var(--accent-color-hover);
+    transition: border var(--transition-duration-default)
+      var(--transition-ease-in-out);
+  }
 
   &:has(+ *) {
     margin-bottom: var(--spacing-base);

src/assets/styles/defaults/vars.css

@@ -37,13 +37,13 @@
   );
   --accent-color: light-dark(var(--blue-400), var(--blue-200));
   --accent-color-hover: light-dark(var(--blue-600), var(--blue-100));
+  --accent-color-active: light-dark(var(--blue-600), var(--blue-100));
 
-  --brand-buy-me-a-coffee: #ff5f5f;
+  --brand-buy-me-a-coffee: light-dark(#0d0c22, #ffdd00);
   --brand-github: light-dark(#333, #f5f5f5);
   --brand-fastmail: light-dark(#0067b9, #ffc107);
-  --brand-listenbrainz: #e97941;
+  --brand-mastodon: light-dark(#563acc, #858afa);
-  --brand-mastodon: #6364ff;
+  --brand-npm: #cb3837;
-  --brand-npm: #cc3534;
   --brand-rss: #f26522;
 
   --article: light-dark(#007272, #00ffff);
@@ -149,7 +149,7 @@
   --inline-margin-bottom: -5px;
 
   /* shadows */
-  --box-shadow-media: inset 0 -85px 60px -40px var(--gray-900);
+  --box-shadow-media: inset 0 -85px 60px -40px var(--color-darkest);
   --box-shadow-text-toggle: inset 0 -120px 60px -60px var(--background-color);
   --text-shadow-default: rgba(0, 0, 0, 0.7) 0px 0px 10px;
 

src/assets/styles/feed.xsl

@@ -54,7 +54,7 @@
                     </h3>
                     <xsl:value-of select="description" disable-output-escaping="yes" />
                     <xsl:if test="enclosure">
-                      <img src="{enclosure/@url}" alt="{title}" />
+                      <img class="image-banner" src="{enclosure/@url}" alt="{title}" />
                     </xsl:if>
                   </div>
                 </xsl:for-each>

src/assets/styles/index.css

@@ -16,10 +16,10 @@
 /* page styles */
 @import url("./pages/about.css") layer(page);
 @import url("./pages/books.css") layer(page);
-@import url("./pages/blogroll.css") layer(page);
 @import url("./pages/contact.css") layer(page);
 @import url("./pages/feeds.css") layer(page);
 @import url("./pages/links.css") layer(page);
+@import url("./pages/media.css") layer(page);
 @import url("./pages/music.css") layer(page);
 @import url("./pages/watching.css") layer(page);
 @import url("./pages/webrings.css") layer(page);

src/assets/styles/pages/about.css

@@ -13,14 +13,10 @@
   margin-bottom: var(--spacing-sm);
   width: 100%;
 
-  & .interior {
+  & img {
-    display: flex;
+    width: var(--avatar-size);
-
+    height: var(--avatar-size);
-    & img {
+    image-rendering: pixelated;
-      width: var(--avatar-size);
-      height: var(--avatar-size);
-      image-rendering: pixelated;
-    }
   }
 }
 

src/assets/styles/pages/blogroll.css

@@ -1,3 +0,0 @@
-.blog-roll-icons {
-  display: flex;
-}

src/assets/styles/pages/books.css

@@ -14,7 +14,7 @@
     border-bottom: 0;
     margin-bottom: 0;
 
-    & .book-meta .description {
+    & .media-meta .description {
       margin-bottom: 0;
     }
   }
@@ -27,28 +27,17 @@
     max-width: calc(var(--sizing-3xl) * 4);
     height: auto;
     aspect-ratio: var(--aspect-ratio-vertical);
-    transition: border-color var(--transition-duration-default)
-      var(--transition-ease-in-out);
   }
 
-  & a:focus img,
+  & .media-meta {
-  & a:focus-within img,
+    margin-top: var(--sizing-base);
-  & a:hover img,
-  & a:active img {
-    border-color: var(--accent-color-hover);
-  }
-
-  & .book-meta {
     align-items: center;
 
     @media screen and (min-width: 768px) {
+      margin-top: 0;
       align-items: start;
     }
 
-    & p {
-      margin: 0;
-    }
-
     & .description {
       margin-bottom: var(--spacing-base);
     }
@@ -65,38 +54,6 @@
   }
 }
 
-.book-entry,
-.book-focus {
-  & img {
-    border: var(--border-default);
-    border-radius: var(--border-radius-slight);
-  }
-
-  & .book-meta {
-    display: flex;
-    flex-direction: column;
-    gap: var(--spacing-sm);
-
-    & p.title {
-      font-size: var(--font-size-xl);
-      line-height: var(--line-height-md);
-    }
-
-    & p.sub-meta {
-      font-size: var(--font-size-sm);
-
-      & svg {
-        width: var(--sizing-svg-sm);
-        height: var(--sizing-svg-sm);
-      }
-    }
-
-    & p {
-      margin: 0;
-    }
-  }
-}
-
 .book-focus {
   margin-top: var(--spacing-base);
   border-bottom: 0;
@@ -113,7 +70,7 @@
       align-items: start;
     }
 
-    & .book-meta {
+    & .media-meta {
       width: 100%;
       align-items: center;
 
@@ -122,10 +79,6 @@
         align-items: start;
       }
 
-      & p {
-        margin: 0;
-      }
-
       & .progress-bar-wrapper {
         max-width: 50%;
 

src/assets/styles/pages/feeds.css

@@ -22,11 +22,6 @@
     }
 
     & img {
-      border: var(--border-default);
-      border-radius: var(--border-radius-slight);
-      width: 100%;
-      height: auto;
-      display: block;
       margin-top: var(--sizing-base);
     }
   }

src/assets/styles/pages/links.css

@@ -1,16 +1,16 @@
 .link-grid {
   display: grid;
   gap: var(--spacing-sm);
-  grid-template-columns: repeat(1, minmax(0, 1fr));
+  grid-template-columns: var(--grid-columns-one);
   margin-bottom: var(--spacing-base);
 
   @media screen and (min-width: 768px) {
-    grid-template-columns: repeat(2, minmax(0, 1fr));
+    grid-template-columns: var(--grid-columns-two);
   }
 
   & .link-box {
     border: var(--border-gray);
     border-radius: var(--border-radius-slight);
-    padding: var(--spacing-xs) var(--spacing-sm);
+    padding: var(--spacing-sm) var(--spacing-md);
   }
 }

src/assets/styles/pages/media.css

@@ -0,0 +1,19 @@
+.media-meta {
+  display: flex;
+  flex-direction: column;
+  gap: var(--spacing-sm);
+
+  & .title {
+    font-size: var(--font-size-xl);
+    line-height: var(--line-height-md);
+  }
+
+  & .sub-meta {
+    font-size: var(--font-size-sm);
+
+    & svg {
+      width: var(--sizing-svg-sm);
+      height: var(--sizing-svg-sm);
+    }
+  }
+}

src/assets/styles/pages/music.css

@@ -12,7 +12,6 @@
 
   & img {
     border: var(--border-default);
-    border-radius: var(--border-radius-slight);
     width: 100%;
     height: auto;
     aspect-ratio: var(--aspect-ratio-square);
@@ -33,33 +32,12 @@
       gap: var(--spacing-md);
     }
 
-    & .artist-meta {
+    & .media-meta {
-      display: flex;
-      flex-direction: column;
-      gap: var(--spacing-sm);
       margin-top: var(--spacing-base);
 
       @media screen and (min-width: 768px) {
         margin-top: 0;
       }
-
-      & p {
-        margin: 0;
-
-        &.title {
-          font-size: var(--font-size-xl);
-          line-height: var(--line-height-md);
-        }
-
-        &.sub-meta {
-          font-size: var(--font-size-sm);
-
-          & svg {
-            width: var(--sizing-svg-sm);
-            height: var(--sizing-svg-sm);
-          }
-        }
-      }
     }
   }
 
@@ -72,13 +50,4 @@
 
 .concert-list {
   margin-top: 0;
-  padding-left: 0;
-
-  & li .modal-toggle {
-    height: calc(var(--sizing-lg) * 1.6);
-  }
-}
-
-p.concerts + ul + hr {
-  display: none;
 }

src/assets/styles/pages/watching.css

@@ -11,7 +11,6 @@ a:active > .watching.hero::after {
 
     & img {
       aspect-ratio: var(--aspect-ratio-banner);
-      border-radius: var(--border-radius-slight);
       height: auto;
       width: 100%;
     }
@@ -62,33 +61,8 @@ a:active > .watching.hero::after {
     margin-top: var(--spacing-base);
     border-bottom: 0;
 
-    & img {
+    & .media-meta {
-      aspect-ratio: var(--aspect-ratio-banner);
-    }
-
-    & .meta {
-      display: flex;
-      flex-direction: column;
-      gap: var(--spacing-sm);
       margin: var(--margin-vertical-base-horizontal-zero);
-
-      & p {
-        margin: 0;
-
-        &.title {
-          font-size: var(--font-size-xl);
-          line-height: var(--line-height-md);
-        }
-
-        &.sub-meta {
-          font-size: var(--font-size-sm);
-
-          & svg {
-            width: var(--sizing-svg-sm);
-            height: var(--sizing-svg-sm);
-          }
-        }
-      }
     }
 
     & .footnotes {
@@ -97,6 +71,6 @@ a:active > .watching.hero::after {
   }
 }
 
-.icon-link + .poster.grid {
+a + .poster.grid {
   margin-top: var(--spacing-base);
 }

src/assets/styles/plugins/prism.css

@@ -1,9 +1,15 @@
+code {
+  padding: var(--spacing-xs);
+  color: var(--text-color-inverted);
+  background-color: var(--background-color-inverted);
+  border-radius: var(--border-radius-slight);
+}
+
 code,
 pre {
   color: var(--blue-100);
   background: none;
   border-radius: var(--border-radius-slight);
-  text-shadow: 0 1px rgba(0, 0, 0, 0.3);
   font-family: var(--font-mono);
   text-align: left;
   white-space: pre;
@@ -32,8 +38,8 @@ pre {
 
 pre,
 :not(pre) > code {
-  background: var(--gray-900);
+  background: var(--color-darkest);
-  border: 1px solid var(--gray-300);
+  border: var(--border-gray);
 }
 
 .namespace {

src/assets/styles/reset.css

@@ -1,29 +1,135 @@
 *,
 *::before,
 *::after {
-  box-sizing: border-box;
+	margin: 0;
-  margin: 0;
+	padding: 0;
+	box-sizing: border-box;
 }
 
-body {
+:where([hidden]:not([hidden='until-found'])) {
-  line-height: var(--line-height-md);
+	display: none !important;
-  -webkit-font-smoothing: antialiased;
-  -webkit-text-size-adjust: none;
 }
 
-input,
+:where(html) {
-button,
+  font-size: 100%;
-textarea,
+	-webkit-text-size-adjust: none;
-select {
+  scrollbar-width: thin;
-  font: inherit;
+	scrollbar-gutter: stable;
+	tab-size: 2;
 }
 
-p,
+:where(html:has(dialog:modal[open])) {
-h1,
+	overflow: clip;
-h2,
-h3,
-h4,
-h5,
-h6 {
-  overflow-wrap: break-word;
 }
+
+@media (prefers-reduced-motion: no-preference) {
+	:where(html:focus-within) {
+		scroll-behavior: smooth;
+	}
+}
+
+:where(body) {
+	font-size: var(--font-size-base);
+  line-height: var(--line-height-base);
+	-webkit-font-smoothing: antialiased;
+  -webkit-text-size-adjust: 100%;
+}
+
+:where(button) {
+	all: unset;
+}
+
+:where(input, button, textarea, select) {
+	font: inherit;
+	color: inherit;
+}
+
+:where(textarea) {
+	resize: vertical;
+	resize: block;
+}
+
+:where(button, label, select, summary, [role='button'], [role='option']) {
+	cursor: pointer;
+}
+
+:where(:disabled) {
+	cursor: not-allowed;
+}
+
+:where(label:has(> input:disabled), label:has(+ input:disabled)) {
+	cursor: not-allowed;
+}
+
+:where(a) {
+	color: inherit;
+	text-underline-offset: var(--spacing-xs);
+}
+
+ul {
+  list-style-type: disc;
+}
+
+ol {
+	list-style-type: number;
+}
+
+:where(ul, ol) {
+	list-style-position: inside;
+}
+
+:where(img, svg, video, canvas, audio, iframe, embed, object) {
+	display: block;
+}
+
+:where(p, h1, h2, h3) {
+	overflow-wrap: break-word;
+}
+
+:where(h1, h2, h3) {
+	text-wrap: balance;
+}
+
+:where(hr) {
+	border: none;
+	border-block-start: 1px solid;
+	border-block-start-color: currentColor;
+	color: inherit;
+	block-size: 0;
+	overflow: visible;
+}
+
+:where(dialog, [popover]) {
+	border: none;
+	background: none;
+	color: inherit;
+	inset: unset;
+	max-width: unset;
+	max-height: unset;
+}
+
+:where(dialog:not([open], [popover]), [popover]:not(:popover-open)) {
+	display: none !important;
+}
+
+:where(:focus-visible) {
+	outline: var(--border-default);
+	outline-offset: 1px;
+  border-radius: var(--border-radius-slight);
+	box-shadow: 0 0 0 1px var(--accent-color);
+}
+
+:where(:focus-visible, :target) {
+	scroll-margin-block: 8vh;
+}
+
+:where(.visually-hidden:not(:focus-within, :active)) {
+	clip-path: inset(50%) !important;
+	height: 1px !important;
+	width: 1px !important;
+	overflow: hidden !important;
+	position: absolute !important;
+	white-space: nowrap !important;
+	border: 0 !important;
+	user-select: none !important;
+}

src/includes/feeds/json.liquid

@@ -13,11 +13,14 @@
   "items": [
     {%- assign entries = data -%}
     {%- for entry in entries limit: 20 -%}
+      {%- assign text = entry.feed.description | markdown | strip_html | escape| normalize_whitespace | rstrip | htmlTruncate %}
     {
       "id": "{{ entry.feed.url | encodeAmp }}",
       "url": "{{ entry.feed.url | encodeAmp }}",
       "title": "{{ entry.feed.title | escape }}",
-      "content_text": "{{ entry.feed.description | markdown | strip_html | escape| normalize_whitespace | rstrip | htmlTruncate }}",
+      "content_html": "{{ text }}",
+      "content_text": "{{ text }}",
+      "summary": "{{ text }}",
       "date_published": "{{ entry.feed.date | stringToRFC3339 }}"
     }{%- if forloop.last == false -%},{%- endif -%}
     {%- endfor -%}

src/includes/home/recent-posts.liquid

@@ -16,4 +16,4 @@
     {{ post.description | normalize_whitespace | markdown | htmlTruncate }}
   </article>
 {%- endfor -%}
-<a class="icon-link" href="/posts">View all posts {% tablericon "arrow-right" %}</a>
+<a href="/posts">View all posts {% tablericon "arrow-right" %}</a>

src/includes/media/grid.liquid

@@ -4,7 +4,7 @@
   {%- assign loadingStrategy = loading | default: 'lazy' -%}
   {%- for item in data limit: count -%}
     {%- assign alt = item.grid.alt | replaceQuotes -%}
-    {%- assign imageUrl = item.grid.image | default: item.grid.backdrop -%}
+    {%- assign imageUrl = item.grid.image -%}
     <a href="{{ item.grid.url }}" title="{{ alt }}">
       <div class="item">
         <div class="meta-text">
@@ -16,6 +16,7 @@
         {%- assign height = 0 -%}
         {%- case shape -%}
           {%- when 'poster' -%}
+            {%- assign imageUrl = item.grid.backdrop -%}
             {%- assign imageClass = 'banner' -%}
             {%- assign width = 256 -%}
             {%- assign height = 170 -%}

src/includes/media/music/recent.liquid

@@ -22,9 +22,9 @@
           <span class="subtext">{{ item.chart.subtext }}</span>
         </div>
       </div>
-      <div class="timestamp">
+      <time datetime="item.chart.played_at">
         {{ item.chart.played_at | date: "%B %-d, %-I:%M%p", "America/Los_Angeles" }}
-      </div>
+      </time>
     </div>
   {%- endfor -%}
 </div>

src/includes/nav/paginator.liquid

@@ -6,7 +6,6 @@
     href="{{ prevHref }}"
     aria-label="Previous page"
     class="{% unless prevHref %}disabled{% endunless %}"
-    {% unless prevHref %}disabled{% endunless %}
   >
     {% tablericon "arrow-left" %}
   </a>
@@ -29,7 +28,6 @@
     href="{{ nextHref }}"
     aria-label="Next page"
     class="{% unless nextHref %}disabled{% endunless %}"
-    {% unless nextHref %}disabled{% endunless %}
   >
     {% tablericon "arrow-right" %}
   </a>

src/pages/books/index.html

@@ -32,12 +32,12 @@ schema: books
         height="307"
       />
     </a>
-    <div class="book-meta">
+    <div class="media-meta">
       <a href="{{ book.url }}">
-        <p class="title"><strong>{{ book.title }}</strong></p>
+        <span class="title"><strong>{{ book.title }}</strong></span>
       </a>
       {% if book.author %}
-        <p class="sub-meta">By {{ book.author }}</p>
+        <span class="sub-meta">By {{ book.author }}</span>
       {% endif %}
       {% if book.progress %}
         {%- assign percentage = book.progress | append: '%' -%}

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 class="icon-link" href="/books" title="Go back to the books index page">{% tablericon "arrow-left" %} Back to books</a>
+<a href="/books" title="Go back to the books index page">{% 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/music/index.html

@@ -24,7 +24,7 @@ schema: music-index
   {% tablericon "playlist" %}
   Tracks
 </h3>
-<div class="track-display">
+<div>
   <input id="tracks-recent" name="track-options" type="radio" aria-hidden="true" checked />
   <input id="tracks-chart" name="track-options" type="radio" aria-hidden="true" />
   <label for="tracks-recent" class="button" data-toggle="tracks-recent">Recent</label>

src/pages/watching/favorites/movies.html

@@ -4,10 +4,10 @@ description: These are my favorite movies. There are many like them, but these a
 pagination:
   data: movies.favorites
   size: 24
-permalink: "/watching/favorite-movies/{% if pagination.pageNumber > 0 %}{{ pagination.pageNumber }}/{% endif %}.html"
+permalink: "/watching/favorite-movies/{% if pagination.pageNumber > 0 %}{{ pagination.pageNumber }}/{% endif %}index.html"
 schema: favorite-movies
 ---
-<a class="icon-link" href="/watching" title="Go back to the watching index page">{% tablericon "arrow-left" %} Back to watching</a>
+<a href="/watching" title="Go back to the watching index page">{% 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

@@ -4,10 +4,10 @@ description: These are my favorite shows. There are many like them, but these ar
 pagination:
   data: tv.favorites
   size: 24
-permalink: "/watching/favorite-shows/{% if pagination.pageNumber > 0 %}{{ pagination.pageNumber }}/{% endif %}.html"
+permalink: "/watching/favorite-shows/{% if pagination.pageNumber > 0 %}{{ pagination.pageNumber }}/{% endif %}index.html"
 schema: favorite-shows
 ---
-<a class="icon-link" href="/watching" title="Go back to the watching index page">{% tablericon "arrow-left" %} Back to watching</a>
+<a href="/watching" title="Go back to the watching index page">{% 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>

src/pages/watching/index.html

@@ -22,7 +22,7 @@ schema: watching
 </h3>
 {% render "media/grid.liquid", globals:globals, data:tv.recentlyWatched, shape:"vertical", count: 6 %}
 <h3 id="favorite-movies">
-  <a class="icon-link" href="/watching/favorite-movies">
+  <a href="/watching/favorite-movies">
     {% tablericon "star" %}
     Favorite movies
   </a>
@@ -30,7 +30,7 @@ schema: watching
 {% assign favoriteMovies = movies.favorites | shuffleArray %}
 {% render "media/grid.liquid", globals:globals, data:favoriteMovies, shape:"vertical", count: 6 %}
 <h3 id="favorite-shows">
-  <a class="icon-link" href="/watching/favorite-shows">
+  <a href="/watching/favorite-shows">
     {% tablericon "star" %}
     Favorite shows
   </a>

workers/dynamic-pages/utils/generators.js

@@ -136,7 +136,7 @@ const generateAssociatedMediaHTML = (data, isGenre = false) => {
 
       return `
         <div class="associated-media">
-          <p class="${category}">${ICON_MAP[icon]} ${title}</p>
+          <span class="${category}">${ICON_MAP[icon]} ${title}</span>
           <ul>
             ${items
               .map((item) => {
@@ -206,10 +206,10 @@ export const generateArtistHTML = (artist, globals) => {
   const playLabel = artist?.["total_plays"] === 1 ? "play" : "plays";
   const concertsList = artist["concerts"]?.length
     ? `<hr />
-    <p id="concerts" class="concerts">
+    <span id="concerts" class="concerts">
       ${ICON_MAP["deviceSpeaker"]}
       I've seen this artist live!
-    </p>
+    </span>
     <ul>${artist["concerts"].map(generateConcertModal).join("")}</ul>`
     : "";
   const albumsTable = artist["albums"]?.length
@@ -231,7 +231,7 @@ export const generateArtistHTML = (artist, globals) => {
     : "";
 
   return `
-    <a class="icon-link" href="/music">${ICON_MAP.arrowLeft} Back to music</a>
+    <a href="/music">${ICON_MAP.arrowLeft} Back to music</a>
     <article class="artist-focus">
       <div class="artist-display">
         <img
@@ -250,31 +250,31 @@ export const generateArtistHTML = (artist, globals) => {
           width="200"
           height="200"
         />
-        <div class="artist-meta">
+        <div class="media-meta">
-          <p class="title"><strong>${artist["name"]}</strong></p>
+          <span class="title"><strong>${artist["name"]}</strong></span>
-          <p class="sub-meta country">${ICON_MAP["mapPin"]} ${parseCountryField(
+          <span class="sub-meta country">${ICON_MAP["mapPin"]} ${parseCountryField(
-    artist["country"]
+            artist["country"]
-  )}</p>
+          )}</span>
           ${
             artist["favorite"]
-              ? `<p class="sub-meta favorite">${ICON_MAP["heart"]} This is one of my favorite artists!</p>`
+              ? `<span class="sub-meta favorite">${ICON_MAP["heart"]} This is one of my favorite artists!</span>`
               : ""
           }
           ${
             artist["tattoo"]
-              ? `<p class="sub-meta tattoo">${ICON_MAP["needle"]} I have a tattoo inspired by this artist!</p>`
+              ? `<span class="sub-meta tattoo">${ICON_MAP["needle"]} I have a tattoo inspired by this artist!</span>`
               : ""
           }
           ${
             artist["total_plays"]
-              ? `<p class="sub-meta"><strong class="highlight-text">${artist["total_plays"]} ${playLabel}</strong></p>`
+              ? `<span class="sub-meta"><strong class="highlight-text">${artist["total_plays"]} ${playLabel}</strong></span>`
               : ""
           }
-          <p class="sub-meta">${
+          <span class="sub-meta">${
             artist["genre"]
               ? `<a href="${artist["genre"]["url"]}">${artist["genre"]["name"]}</a>`
               : ""
-          }</p>
+          }</span>
         </div>
       </div>
       ${generateAssociatedMediaHTML(artist)}
@@ -311,7 +311,7 @@ export const generateBookHTML = (book, globals) => {
       : "";
 
   return `
-    <a class="icon-link" href="/books">${
+    <a href="/books">${
       ICON_MAP["arrowLeft"]
     } Back to books</a>
     <article class="book-focus">
@@ -319,14 +319,14 @@ export const generateBookHTML = (book, globals) => {
         <img
           srcset="
             ${globals["cdn_url"]}${
-    book["image"]
+              book["image"]
-  }?class=verticalsm&type=webp 200w,
+            }?class=verticalsm&type=webp 200w,
-            ${globals["cdn_url"]}${
+                      ${globals["cdn_url"]}${
-    book["image"]
+              book["image"]
-  }?class=verticalmd&type=webp 400w,
+            }?class=verticalmd&type=webp 400w,
-            ${globals["cdn_url"]}${
+                      ${globals["cdn_url"]}${
-    book["image"]
+              book["image"]
-  }?class=verticalbase&type=webp 800w
+            }?class=verticalbase&type=webp 800w
           "
           sizes="(max-width: 450px) 203px, (max-width: 850px) 406px, 812px"
           src="${globals["cdn_url"]}${book["image"]}?class=verticalsm&type=webp"
@@ -336,23 +336,23 @@ export const generateBookHTML = (book, globals) => {
           width="200"
           height="307"
         />
-        <div class="book-meta">
+        <div class="media-meta">
-          <p class="title"><strong>${book["title"]}</strong></p>
+          <span class="title"><strong>${book["title"]}</strong></span>
-          ${book["rating"] ? `<p>${book["rating"]}</p>` : ""}
+          ${book["rating"] ? `<span>${book["rating"]}</span>` : ""}
           ${
-            book["author"] ? `<p class="sub-meta">By ${book["author"]}</p>` : ""
+            book["author"] ? `<span class="sub-meta">By ${book["author"]}</span>` : ""
           }
           ${
             book["favorite"]
-              ? `<p class="sub-meta favorite">${ICON_MAP["heart"]} This is one of my favorite books!</p>`
+              ? `<span class="sub-meta favorite">${ICON_MAP["heart"]} This is one of my favorite books!</span>`
               : ""
           }
           ${
             book["tattoo"]
-              ? `<p class="sub-meta tattoo">${ICON_MAP["needle"]} I have a tattoo inspired by this book!</p>`
+              ? `<span class="sub-meta tattoo">${ICON_MAP["needle"]} I have a tattoo inspired by this book!</span>`
               : ""
           }
-          ${status ? `<p class="sub-meta">${status}</p>` : ""}
+          ${status ? `<span class="sub-meta">${status}</span>` : ""}
         </div>
       </div>
       ${
@@ -373,7 +373,7 @@ export const generateGenreHTML = (genre) => {
   const mediaLinks = generateMediaLinks(genre["artists"], "artist", 5);
 
   return `
-    <a class="icon-link" href="/music">${
+    <a href="/music">${
       ICON_MAP["arrowLeft"]
     } Back to music</a>
     <h2>${genre["name"]}</h2>
@@ -411,21 +411,21 @@ export const generateWatchingHTML = (media, globals, type) => {
     media["last_watched"] || (isShow && media["episode"]?.["last_watched_at"]);
 
   return `
-    <a class="icon-link" href="/watching">${
+    <a href="/watching">${
       ICON_MAP.arrowLeft
     } Back to watching</a>
     <article class="watching focus">
       <img
         srcset="
           ${globals["cdn_url"]}${
-    media["backdrop"]
+            media["backdrop"]
-  }?class=bannersm&type=webp 256w,
+          }?class=bannersm&type=webp 256w,
-          ${globals["cdn_url"]}${
+                  ${globals["cdn_url"]}${
-    media["backdrop"]
+            media["backdrop"]
-  }?class=bannermd&type=webp 512w,
+          }?class=bannermd&type=webp 512w,
-          ${globals["cdn_url"]}${
+                  ${globals["cdn_url"]}${
-    media["backdrop"]
+            media["backdrop"]
-  }?class=bannerbase&type=webp 1024w
+          }?class=bannerbase&type=webp 1024w
         "
         sizes="(max-width: 450px) 256px,
           (max-width: 850px) 512px,
@@ -438,31 +438,31 @@ export const generateWatchingHTML = (media, globals, type) => {
         width="256"
         height="180"
       />
-      <div class="meta">
+      <div class="media-meta">
-        <p class="title"><strong>${media["title"]}</strong> (${
+        <span class="title"><strong>${media["title"]}</strong> (${
     media["year"]
-  })</p>
+  })</span>
-        ${media["rating"] ? `<p>${media["rating"]}</p>` : ""}
+        ${media["rating"] ? `<span>${media["rating"]}</span>` : ""}
         ${
           media["favorite"]
-            ? `<p class="sub-meta favorite">${ICON_MAP["heart"]} This is one of my favorite ${label}s!</p>`
+            ? `<span class="sub-meta favorite">${ICON_MAP["heart"]} This is one of my favorite ${label}s!</span>`
             : ""
         }
         ${
           media["tattoo"]
-            ? `<p class="sub-meta tattoo">${ICON_MAP["needle"]} I have a tattoo inspired by this ${label}!</p>`
+            ? `<span class="sub-meta tattoo">${ICON_MAP["needle"]} I have a tattoo inspired by this ${label}!</span>`
             : ""
         }
         ${
           media["collected"]
-            ? `<p class="sub-meta collected">${ICON_MAP["circleCheck"]} This ${label} is in my collection!</p>`
+            ? `<span class="sub-meta collected">${ICON_MAP["circleCheck"]} This ${label} is in my collection!</span>`
             : ""
         }
         ${
           lastWatched
-            ? `<p class="sub-meta">Last watched on <strong class="highlight-text">${formatDate(
+            ? `<span class="sub-meta">Last watched on <strong class="highlight-text">${formatDate(
                 lastWatched
-              )}</strong>.</p>`
+              )}</strong>.</span>`
             : ""
         }
       </div>