chore: split out styles + only load where needed

.eleventy.js

@@ -2,8 +2,8 @@ import syntaxHighlight from '@11ty/eleventy-plugin-syntaxhighlight'
 import tablerIcons from 'eleventy-plugin-tabler-icons'
 import pluginUnfurl from 'eleventy-plugin-unfurl'
 import pluginRss from '@11ty/eleventy-plugin-rss'
-import embedYouTube from 'eleventy-plugin-youtube-embed'
 import postGraph from '@rknightuk/eleventy-plugin-post-graph'
+import embedEverything from 'eleventy-plugin-embed-everything'
 
 import markdownIt from 'markdown-it'
 import markdownItAnchor from 'markdown-it-anchor'
@@ -30,13 +30,6 @@ export default async function (eleventyConfig) {
   eleventyConfig.addPlugin(syntaxHighlight)
   eleventyConfig.addPlugin(tablerIcons)
   eleventyConfig.addPlugin(pluginUnfurl)
-  eleventyConfig.addPlugin(embedYouTube, {
-    modestBranding: true,
-    lite: {
-      'lite.css.path': 'src/assets/styles/yt-lite.css',
-      'lite.js.path': 'src/assets/scripts/yt-lite.js',
-    },
-  })
   eleventyConfig.addPlugin(postGraph, {
     boxColorLight: '#e5e7eb',
     highlightColorLight: '#2563eb',
@@ -46,6 +39,7 @@ export default async function (eleventyConfig) {
     highlightColorDark: '#60a5fa',
     textColorDark: '#fff',
   })
+  eleventyConfig.addPlugin(embedEverything);
 
   // quiet build output
   eleventyConfig.setQuietMode(true)

package-lock.json

@@ -1,12 +1,12 @@
 {
   "name": "coryd.dev",
-  "version": "4.0.15",
+  "version": "4.2.0",
   "lockfileVersion": 3,
   "requires": true,
   "packages": {
     "": {
       "name": "coryd.dev",
-      "version": "4.0.15",
+      "version": "4.2.0",
       "license": "ISC",
       "devDependencies": {
         "@11ty/eleventy": "3.0.0-alpha.3",
@@ -19,9 +19,9 @@
         "child_process": "^1.0.2",
         "clean-css": "^5.3.3",
         "dotenv-flow": "^4.1.0",
+        "eleventy-plugin-embed-everything": "^1.17.0",
         "eleventy-plugin-tabler-icons": "^2.2.0",
         "eleventy-plugin-unfurl": "^1.0.0",
-        "eleventy-plugin-youtube-embed": "^1.9.1",
         "html-minifier-terser": "^7.2.0",
         "ics-to-json-extended": "^1.1.4",
         "jsdom": "^23.0.1",
@@ -2164,6 +2164,73 @@
         "node": ">=0.10.0"
       }
     },
+    "node_modules/eleventy-plugin-embed-everything": {
+      "version": "1.17.0",
+      "resolved": "https://registry.npmjs.org/eleventy-plugin-embed-everything/-/eleventy-plugin-embed-everything-1.17.0.tgz",
+      "integrity": "sha512-so4TOGp1hbP4ITJkUwRRLvElheKStSE1lxbaqZbJAJmHFB53sD9UEsI2+EMcYu88hmw5UYr1tQSUky4nPICp1w==",
+      "dev": true,
+      "dependencies": {
+        "deepmerge": "^4.3.1",
+        "eleventy-plugin-embed-instagram": "^1.2.7",
+        "eleventy-plugin-embed-soundcloud": "^1.2.7",
+        "eleventy-plugin-embed-spotify": "^1.3.0",
+        "eleventy-plugin-embed-ted": "^1.0.1",
+        "eleventy-plugin-embed-tiktok": "^1.1.7",
+        "eleventy-plugin-embed-twitch": "^1.2.7",
+        "eleventy-plugin-embed-twitter": "^1.4.0",
+        "eleventy-plugin-vimeo-embed": "^1.3.8",
+        "eleventy-plugin-youtube-embed": "^1.9.1"
+      }
+    },
+    "node_modules/eleventy-plugin-embed-instagram": {
+      "version": "1.2.7",
+      "resolved": "https://registry.npmjs.org/eleventy-plugin-embed-instagram/-/eleventy-plugin-embed-instagram-1.2.7.tgz",
+      "integrity": "sha512-v6uSqeZiZU5L40lr4NTGBr+2Wbc81SqbNIllESEBQDFhS68g253WqkLaNs7gGh0k5hxhNuMt7ZZEBfous7jksw==",
+      "dev": true
+    },
+    "node_modules/eleventy-plugin-embed-soundcloud": {
+      "version": "1.2.7",
+      "resolved": "https://registry.npmjs.org/eleventy-plugin-embed-soundcloud/-/eleventy-plugin-embed-soundcloud-1.2.7.tgz",
+      "integrity": "sha512-0+VNeEcMiRySmyTmPmMhCwkbds44k9W4jWqUwjvk665TRagiXcCdj/BK2wl8vyiVrn/0arWeSCpol4NBb6BIvA==",
+      "dev": true,
+      "dependencies": {
+        "@11ty/eleventy-fetch": "^4.0.0"
+      }
+    },
+    "node_modules/eleventy-plugin-embed-spotify": {
+      "version": "1.3.0",
+      "resolved": "https://registry.npmjs.org/eleventy-plugin-embed-spotify/-/eleventy-plugin-embed-spotify-1.3.0.tgz",
+      "integrity": "sha512-waVUtW5PO9aKYQEjnvHG4P5bPyKj+SSUBuDtqfF2K+j7dGItmEDD4DP7CmBz6lkn/LlJGmJ7uT4Mr6L4jAP4bg==",
+      "dev": true
+    },
+    "node_modules/eleventy-plugin-embed-ted": {
+      "version": "1.0.1",
+      "resolved": "https://registry.npmjs.org/eleventy-plugin-embed-ted/-/eleventy-plugin-embed-ted-1.0.1.tgz",
+      "integrity": "sha512-F1CayKC05sGDAcdEgaZUP3Cs/71mwLT717sIUUiZWu+Gjd1Lp7m2gqL1R/uKnHN/CFxKYTpAA6ZNN/LCjg0ufw==",
+      "dev": true
+    },
+    "node_modules/eleventy-plugin-embed-tiktok": {
+      "version": "1.1.7",
+      "resolved": "https://registry.npmjs.org/eleventy-plugin-embed-tiktok/-/eleventy-plugin-embed-tiktok-1.1.7.tgz",
+      "integrity": "sha512-Yb/95hafIsKVsV11ebsX0PoYzpLQWWSbdznbvPfA0HIKjfTHGEt1q0XX5DRGPnn5tor7lM5sha9DMQPzJb/oGQ==",
+      "dev": true
+    },
+    "node_modules/eleventy-plugin-embed-twitch": {
+      "version": "1.2.7",
+      "resolved": "https://registry.npmjs.org/eleventy-plugin-embed-twitch/-/eleventy-plugin-embed-twitch-1.2.7.tgz",
+      "integrity": "sha512-E3oUtk5HhfgBaH9xpcnnByoddyyxuj0uhTzxD+UF5ftUU4pa0959HADBI1RuWUDssADzowpSes8m2gBgO4Peeg==",
+      "dev": true
+    },
+    "node_modules/eleventy-plugin-embed-twitter": {
+      "version": "1.4.0",
+      "resolved": "https://registry.npmjs.org/eleventy-plugin-embed-twitter/-/eleventy-plugin-embed-twitter-1.4.0.tgz",
+      "integrity": "sha512-1e2oI0OJiVStywT48h6/IJDT4+XlH5EEVT1z87qV8wABAA022m2ozKuog21EEoI217aV2AM89R/FZ1oo1eD/mA==",
+      "dev": true,
+      "dependencies": {
+        "@11ty/eleventy-fetch": "^4.0.0",
+        "deepmerge": "^4.3.1"
+      }
+    },
     "node_modules/eleventy-plugin-tabler-icons": {
       "version": "2.2.0",
       "resolved": "https://registry.npmjs.org/eleventy-plugin-tabler-icons/-/eleventy-plugin-tabler-icons-2.2.0.tgz",
@@ -2456,6 +2523,12 @@
       "integrity": "sha512-8Y75pvTYkLJW2hWQHXxoqRgV7qb9B+9vFEtidML+7koHUFapnVJAZ6cKs+Qjz5Aw3aZWHMC6u0wJE3At+nSGwA==",
       "dev": true
     },
+    "node_modules/eleventy-plugin-vimeo-embed": {
+      "version": "1.3.8",
+      "resolved": "https://registry.npmjs.org/eleventy-plugin-vimeo-embed/-/eleventy-plugin-vimeo-embed-1.3.8.tgz",
+      "integrity": "sha512-XU/XH/lrx9slUifFiRCsFh8XiDsZxCBh5MnFU8wAz8u8rCFX9PpmyveJ2oeDtDZjEINqaDC+YFSPsxoq59S3cQ==",
+      "dev": true
+    },
     "node_modules/eleventy-plugin-youtube-embed": {
       "version": "1.9.1",
       "resolved": "https://registry.npmjs.org/eleventy-plugin-youtube-embed/-/eleventy-plugin-youtube-embed-1.9.1.tgz",
@@ -3324,9 +3397,9 @@
       ]
     },
     "node_modules/image-size": {
-      "version": "1.1.0",
+      "version": "1.1.1",
-      "resolved": "https://registry.npmjs.org/image-size/-/image-size-1.1.0.tgz",
+      "resolved": "https://registry.npmjs.org/image-size/-/image-size-1.1.1.tgz",
-      "integrity": "sha512-asnTHw2K8OlqT5kVnQwX+AGKQqpvLo95LbNzQ/C0ln3yzentZmAdd0ygoD004VC4Kkd4PV7J2iaPQkqwp9yuTw==",
+      "integrity": "sha512-541xKlUw6jr/6gGuk92F+mYM5zaFAc5ahphvkqvNe2bQ6gVBkd6bfrmVJ2t4KDAfikAYZyIqTnktX3i6/aQDrQ==",
       "dev": true,
       "dependencies": {
         "queue": "6.0.2"
@@ -3335,7 +3408,7 @@
         "image-size": "bin/image-size.js"
       },
       "engines": {
-        "node": ">=18.0.0"
+        "node": ">=16.x"
       }
     },
     "node_modules/immutable": {

package.json

@@ -1,6 +1,6 @@
 {
   "name": "coryd.dev",
-  "version": "4.2.0",
+  "version": "4.3.0",
   "description": "The source for my personal site, blog and portfolio. Built using 11ty and hosted on Netlify.",
   "type": "module",
   "scripts": {
@@ -25,9 +25,9 @@
     "child_process": "^1.0.2",
     "clean-css": "^5.3.3",
     "dotenv-flow": "^4.1.0",
+    "eleventy-plugin-embed-everything": "^1.17.0",
     "eleventy-plugin-tabler-icons": "^2.2.0",
     "eleventy-plugin-unfurl": "^1.0.0",
-    "eleventy-plugin-youtube-embed": "^1.9.1",
     "html-minifier-terser": "^7.2.0",
     "ics-to-json-extended": "^1.1.4",
     "jsdom": "^23.0.1",

src/_includes/base.liquid

@@ -31,10 +31,9 @@
       type="image/svg+xml">
     <link href="/assets/icons/apple-touch-icon.png?v={% assetHash %}" rel="apple-touch-icon">
     {% capture css %}
-      {% render "../assets/styles/yt-lite.css" %}
+      {% render "../assets/styles/fonts/silka.css" %}
-      {% render "../assets/styles/silka.css" %}
+      {% render "../assets/styles/partials/vars.css" %}
-      {% render "../assets/styles/prism.css" %}
+      {% render "../assets/styles/partials/animations.css" %}
-      {% render "../assets/styles/pagefind.css" %}
       {% render "../assets/styles/index.css" %}
     {% endcapture %}
     <style>
@@ -115,7 +114,7 @@
   <body>
     {{ content }}
     {% capture js %}
-      {% render "../assets/scripts/script.js" %}
+      {% render "../assets/scripts/index.js" %}
     {% endcapture %}
     <script>
       {{ js }}

src/_includes/partials/post-graph.liquid

@@ -1,3 +1,9 @@
+{% capture css %}
+  {% render "../../assets/styles/widgets/post-graph.css" %}
+{% endcapture %}
+<style>
+  {{ css | cssmin }}
+</style>
 <div class="post-graph">
   {% assign years = postYears | reverse %}
   {%- for year in years %}

src/_includes/post.liquid

@@ -3,6 +3,12 @@ layout: main
 schema: blog
 ---
 {% render "partials/header.liquid", meta: meta, page: page, nav: nav %}
+{% capture css %}
+  {% render "../assets/styles/plugins/prism.css" %}
+{% endcapture %}
+<style>
+  {{ css | cssmin }}
+</style>
 <div class="default__wrapper">
   <article class="h-entry" data-pagefind-body>
     {% if link %}

src/assets/scripts/yt-lite.js

@@ -1,86 +0,0 @@
-class LiteYTEmbed extends HTMLElement {
-  connectedCallback() {
-    this.videoId = this.getAttribute('videoid')
-    let e = this.querySelector('.lty-playbtn')
-    if (
-      ((this.playLabel = (e && e.textContent.trim()) || this.getAttribute('playlabel') || 'Play'),
-      this.style.backgroundImage ||
-        (this.style.backgroundImage = `url("https://i.ytimg.com/vi/${this.videoId}/hqdefault.jpg")`),
-      e ||
-        ((e = document.createElement('button')),
-        (e.type = 'button'),
-        e.classList.add('lty-playbtn'),
-        this.append(e)),
-      !e.textContent)
-    ) {
-      const t = document.createElement('span')
-      ;(t.className = 'lyt-visually-hidden'), (t.textContent = this.playLabel), e.append(t)
-    }
-    e.removeAttribute('href'),
-      this.addEventListener('pointerover', LiteYTEmbed.warmConnections, { once: !0 }),
-      this.addEventListener('click', this.addIframe),
-      (this.needsYTApiForAutoplay =
-        navigator.vendor.includes('Apple') || navigator.userAgent.includes('Mobi'))
-  }
-  static addPrefetch(e, t, i) {
-    const a = document.createElement('link')
-    ;(a.rel = e), (a.href = t), i && (a.as = i), document.head.append(a)
-  }
-  static warmConnections() {
-    LiteYTEmbed.preconnected ||
-      (LiteYTEmbed.addPrefetch('preconnect', 'https://www.youtube-nocookie.com'),
-      LiteYTEmbed.addPrefetch('preconnect', 'https://www.google.com'),
-      LiteYTEmbed.addPrefetch('preconnect', 'https://googleads.g.doubleclick.net'),
-      LiteYTEmbed.addPrefetch('preconnect', 'https://static.doubleclick.net'),
-      (LiteYTEmbed.preconnected = !0))
-  }
-  fetchYTPlayerApi() {
-    window.YT ||
-      (window.YT && window.YT.Player) ||
-      (this.ytApiPromise = new Promise((e, t) => {
-        var i = document.createElement('script')
-        ;(i.src = 'https://www.youtube.com/iframe_api'),
-          (i.async = !0),
-          (i.onload = (t) => {
-            YT.ready(e)
-          }),
-          (i.onerror = t),
-          this.append(i)
-      }))
-  }
-  async addYTPlayerIframe(e) {
-    this.fetchYTPlayerApi(), await this.ytApiPromise
-    const t = document.createElement('div')
-    this.append(t)
-    const i = Object.fromEntries(e.entries())
-    new YT.Player(t, {
-      width: '100%',
-      videoId: this.videoId,
-      playerVars: i,
-      events: {
-        onReady: (e) => {
-          e.target.playVideo()
-        },
-      },
-    })
-  }
-  async addIframe() {
-    if (this.classList.contains('lyt-activated')) return
-    this.classList.add('lyt-activated')
-    const e = new URLSearchParams(this.getAttribute('params') || [])
-    if ((e.append('autoplay', '1'), e.append('playsinline', '1'), this.needsYTApiForAutoplay))
-      return this.addYTPlayerIframe(e)
-    const t = document.createElement('iframe')
-    ;(t.width = 560),
-      (t.height = 315),
-      (t.title = this.playLabel),
-      (t.allow = 'accelerometer; autoplay; encrypted-media; gyroscope; picture-in-picture'),
-      (t.allowFullscreen = !0),
-      (t.src = `https://www.youtube-nocookie.com/embed/${encodeURIComponent(
-        this.videoId
-      )}?${e.toString()}`),
-      this.append(t),
-      t.focus()
-  }
-}
-customElements.define('lite-youtube', LiteYTEmbed)

src/assets/styles/index.css

@@ -1,94 +1,3 @@
-:root {
-  /* colors */
-  --blue-50: #eff5ff;
-  --blue-100: #dbe8fe;
-  --blue-200: #bfd7fe;
-  --blue-300: #93bbfd;
-  --blue-400: #609afa;
-  --blue-500: #3b82f6;
-  --blue-600: #2570eb;
-  --blue-700: #1d64d8;
-  --blue-800: #1e55af;
-  --blue-900: #1e478a;
-  --blue-950: #172e54;
-
-  --gray-50: #f6f7f8;
-  --gray-100: #eaecef;
-  --gray-200: #d9dee4;
-  --gray-300: #b8c2cc;
-  --gray-400: #a0adba;
-  --gray-500: #8996a8;
-  --gray-600: #778399;
-  --gray-700: #6b748a;
-  --gray-800: #5a6173;
-  --gray-900: #4b515d;
-  --gray-950: #30333b;
-
-  --white: #fff;
-  --black: #000;
-
-  --brand-github: #333;
-  --brand-github-light: #f5f5f5;
-  --brand-proton: #6d4aff;
-  --brand-mastodon: #6364ff;
-  --brand-lastfm: #d51007;
-  --brand-trakt: #ed1c24;
-  --brand-storygraph: #14919b;
-  --brand-buy-me-a-coffee: #ffdd00;
-  --brand-rss: #f26522;
-  --webrings: #ec8fd0;
-
-  /* fonts */
-  --font-sans: silka, Inter, Roboto, 'Helvetica Neue', system-ui, sans-serif;
-  --font-mono: ui-monospace, monospace;
-
-  /* text */
-  --font-size-xs: .75rem;
-  --line-height-xs: 1rem;
-
-  --font-size-sm: .875rem;
-  --line-height-sm: 1.25rem;
-
-  --font-size-base: 1rem;
-  --line-height-base: 1.5rem;
-
-  --font-size-lg: 1.125rem;
-  --line-height-lg: 1.75rem;
-
-  --font-size-xl: 1.25rem;
-  --line-height-xl: 1.75rem;
-
-  --font-size-2xl: 1.5rem;
-  --line-height-2xl: 2rem;
-
-  --font-size-3xl: 1.875rem;
-  --line-height-3xl: 2.25rem;
-
-  /* radii */
-  --rounded-none: 0;
-  --rounded-sm: .125rem;
-  --rounded: .25rem;
-  --rounded-md: .375rem;
-  --rounded-lg: .5rem;
-  --rounded-full: 9999px;
-
-  /* transitions */
-  --ease-in-out: cubic-bezier(0.4, 0, 0.2, 1);
-
-  /* svgs */
-  --stroke-width-default: 1.4;
-  --stroke-width-bold: 2;
-}
-
-@keyframes spin {
-  from {
-    transform: rotate(0deg);
-  }
-  to {
-    transform: rotate(360deg);
-  }
-}
-
 body,
 html {
   font-family: var(--font-sans);
@@ -240,45 +149,21 @@ nav ul li:last-child {
   stroke: var(--blue-600);
 }
 
+.active:hover svg,
 .active svg:hover {
   stroke-width: var(--stroke-width-default);
 }
 
-.at svg {
+/* social icons */
-  stroke: var(--brand-proton) !important;
+.at svg { stroke: var(--brand-proton) !important; }
-}
+.brand-github svg { stroke: var(--brand-github) !important; }
-
+.brand-mastodon svg { stroke: var(--brand-mastodon) !important; }
-.brand-github svg {
+.brand-lastfm svg { stroke: var(--brand-lastfm) !important; }
-  stroke: var(--brand-github) !important;
+.device-tv svg { stroke: var(--brand-trakt) !important; }
-}
+.books svg { stroke: var(--brand-storygraph) !important; }
-
+.cup svg { stroke: var(--brand-buy-me-a-coffee) !important; }
-.brand-mastodon svg {
+.heart-handshake svg { stroke: var(--webrings) !important; }
-  stroke: var(--brand-mastodon) !important;
+.rss svg { stroke: var(--brand-rss) !important; }
-}
-
-.brand-lastfm svg {
-  stroke: var(--brand-lastfm) !important;
-}
-
-.device-tv svg {
-  stroke: var(--brand-trakt) !important;
-}
-
-.books svg {
-  stroke: var(--brand-storygraph) !important;
-}
-
-.cup svg {
-  stroke: var(--brand-buy-me-a-coffee) !important;
-}
-
-.heart-handshake svg {
-  stroke: var(--webrings) !important;
-}
-
-.rss svg {
-  stroke: var(--brand-rss) !important;
-}
 
 /* layout */
 .default__wrapper {
@@ -415,32 +300,8 @@ article time {
   line-height: var(--line-height-sm);
 }
 
-/* statistics */
+.eleventy-plugin-youtube-embed {
-.post-graph {
+  margin-bottom: 1rem;
-  margin-top: 1.25rem;
-  margin-bottom: 1.25rem;
-}
-
-.post-graph__wrapper {
-  position: relative;
-  display: flex;
-  align-items: center;
-  height: 2rem;
-  margin-bottom: .375rem;
-}
-
-.post-graph__progress {
-  background-color: var(--blue-600);
-  height: 100%;
-}
-
-.post-graph__year {
-  font-family: var(--font-mono)
-}
-
-.post-graph__progress,
-.post-graph__data {
-  margin-left: .625rem;
 }
 
 /* icons */
@@ -1071,8 +932,14 @@ footer nav {
 
   /* shared styles */
   .media__grid .item__wrapper:hover,
+  .media__grid .item__wrapper:focus,
+  .media__grid .item__wrapper:active,
   .webmentions .interaction .avatar__wrapper:hover,
-  .webmentions .interaction .comment__wrapper:hover .avatar__wrapper {
+  .webmentions .interaction .avatar__wrapper:focus,
+  .webmentions .interaction .avatar__wrapper:active,
+  .webmentions .interaction .comment__wrapper:hover .avatar__wrapper,
+  .webmentions .interaction .comment__wrapper:focus .avatar__wrapper
+  .webmentions .interaction .comment__wrapper:active .avatar__wrapper {
     border-color: var(--blue-200);
   }
 

src/assets/styles/partials/animations.css

@@ -0,0 +1,8 @@
+@keyframes spin {
+  from {
+    transform: rotate(0deg);
+  }
+  to {
+    transform: rotate(360deg);
+  }
+}

src/assets/styles/partials/vars.css

@@ -0,0 +1,81 @@
+:root {
+  /* colors */
+  --blue-50: #eff5ff;
+  --blue-100: #dbe8fe;
+  --blue-200: #bfd7fe;
+  --blue-300: #93bbfd;
+  --blue-400: #609afa;
+  --blue-500: #3b82f6;
+  --blue-600: #2570eb;
+  --blue-700: #1d64d8;
+  --blue-800: #1e55af;
+  --blue-900: #1e478a;
+  --blue-950: #172e54;
+
+  --gray-50: #f6f7f8;
+  --gray-100: #eaecef;
+  --gray-200: #d9dee4;
+  --gray-300: #b8c2cc;
+  --gray-400: #a0adba;
+  --gray-500: #8996a8;
+  --gray-600: #778399;
+  --gray-700: #6b748a;
+  --gray-800: #5a6173;
+  --gray-900: #4b515d;
+  --gray-950: #30333b;
+
+  --white: #fff;
+  --black: #000;
+
+  --brand-github: #333;
+  --brand-github-light: #f5f5f5;
+  --brand-proton: #6d4aff;
+  --brand-mastodon: #6364ff;
+  --brand-lastfm: #d51007;
+  --brand-trakt: #ed1c24;
+  --brand-storygraph: #14919b;
+  --brand-buy-me-a-coffee: #ffdd00;
+  --brand-rss: #f26522;
+  --webrings: #ec8fd0;
+
+  /* fonts */
+  --font-sans: silka, Inter, Roboto, 'Helvetica Neue', system-ui, sans-serif;
+  --font-mono: ui-monospace, monospace;
+
+  /* text */
+  --font-size-xs: .75rem;
+  --line-height-xs: 1rem;
+
+  --font-size-sm: .875rem;
+  --line-height-sm: 1.25rem;
+
+  --font-size-base: 1rem;
+  --line-height-base: 1.5rem;
+
+  --font-size-lg: 1.125rem;
+  --line-height-lg: 1.75rem;
+
+  --font-size-xl: 1.25rem;
+  --line-height-xl: 1.75rem;
+
+  --font-size-2xl: 1.5rem;
+  --line-height-2xl: 2rem;
+
+  --font-size-3xl: 1.875rem;
+  --line-height-3xl: 2.25rem;
+
+  /* radii */
+  --rounded-none: 0;
+  --rounded-sm: .125rem;
+  --rounded: .25rem;
+  --rounded-md: .375rem;
+  --rounded-lg: .5rem;
+  --rounded-full: 9999px;
+
+  /* transitions */
+  --ease-in-out: cubic-bezier(0.4, 0, 0.2, 1);
+
+  /* svgs */
+  --stroke-width-default: 1.4;
+  --stroke-width-bold: 2;
+}

src/assets/styles/widgets/post-graph.css

@@ -0,0 +1,26 @@
+.post-graph {
+  margin-top: 1.25rem;
+  margin-bottom: 1.25rem;
+}
+
+.post-graph__wrapper {
+  position: relative;
+  display: flex;
+  align-items: center;
+  height: 2rem;
+  margin-bottom: .375rem;
+}
+
+.post-graph__progress {
+  background-color: var(--blue-600);
+  height: 100%;
+}
+
+.post-graph__year {
+  font-family: var(--font-mono)
+}
+
+.post-graph__progress,
+.post-graph__data {
+  margin-left: .625rem;
+}

src/assets/styles/yt-lite.css

@@ -1 +0,0 @@
-lite-youtube{background-color:#000;position:relative;display:block;contain:content;background-position:center center;background-size:cover;cursor:pointer;max-width:720px}lite-youtube::before{content:'';display:block;position:absolute;top:0;background-image:url(data:image/png;base64,iVBORw0KGgoAAAANSUhEUgAAAAEAAADGCAYAAAAT+OqFAAAAdklEQVQoz42QQQ7AIAgEF/T/D+kbq/RWAlnQyyazA4aoAB4FsBSA/bFjuF1EOL7VbrIrBuusmrt4ZZORfb6ehbWdnRHEIiITaEUKa5EJqUakRSaEYBJSCY2dEstQY7AuxahwXFrvZmWl2rh4JZ07z9dLtesfNj5q0FU3A5ObbwAAAABJRU5ErkJggg==);background-position:top;background-repeat:repeat-x;height:60px;padding-bottom:50px;width:100%;transition:all .2s cubic-bezier(0, 0, .2, 1)}lite-youtube::after{content:"";display:block;padding-bottom:calc(100% / (16 / 9))}lite-youtube>iframe{width:100%;height:100%;position:absolute;top:0;left:0;border:0}lite-youtube>.lty-playbtn{display:block;width:68px;height:48px;position:absolute;cursor:pointer;transform:translate3d(-50%,-50%,0);top:50%;left:50%;z-index:1;background-color:transparent;background-image:url('data:image/svg+xml;utf8,<svg xmlns="http://www.w3.org/2000/svg" viewBox="0 0 68 48"><path d="M66.52 7.74c-.78-2.93-2.49-5.41-5.42-6.19C55.79.13 34 0 34 0S12.21.13 6.9 1.55c-2.93.78-4.63 3.26-5.42 6.19C.06 13.05 0 24 0 24s.06 10.95 1.48 16.26c.78 2.93 2.49 5.41 5.42 6.19C12.21 47.87 34 48 34 48s21.79-.13 27.1-1.55c2.93-.78 4.64-3.26 5.42-6.19C67.94 34.95 68 24 68 24s-.06-10.95-1.48-16.26z" fill="red"/><path d="M45 24 27 14v20" fill="white"/></svg>');filter:grayscale(100%);transition:filter .1s cubic-bezier(0, 0, .2, 1);border:none}lite-youtube .lty-playbtn:focus,lite-youtube:hover>.lty-playbtn{filter:none}lite-youtube.lyt-activated{cursor:unset}lite-youtube.lyt-activated::before,lite-youtube.lyt-activated>.lty-playbtn{opacity:0;pointer-events:none}.lyt-visually-hidden{clip:rect(0 0 0 0);clip-path:inset(50%);height:1px;overflow:hidden;position:absolute;white-space:nowrap;width:1px}

src/pages/search.html

@@ -6,21 +6,11 @@ permalink: /search.html
 ---
 
 <link href="https://coryd.dev/pagefind/pagefind-ui.css" rel="stylesheet" />
+{% capture css %}
+  {% render "../assets/styles/widgets/pagefind.css" %}
+{% endcapture %}
 <style>
-  :root {
+  {{ css | cssmin }}
-    --pagefind-ui-font: 'silka', 'Inter', 'Roboto', 'Helvetica Neue', 'Arial Nova', 'Nimbus Sans', 'Arial', 'system-ui', 'sans-serif';
-    --pagefind-ui-primary: #374151;
-    --pagefind-ui-text: #374151;
-  }
-  @media (prefers-color-scheme: dark) {
-    :root {
-      --pagefind-ui-primary: #e5e7eb;
-      --pagefind-ui-text: #e5e7eb;
-      --pagefind-ui-background: #152028;
-      --pagefind-ui-border: #152028;
-      --pagefind-ui-tag: #152028;
-    }
-  }
 </style>
 <div id="search" class="search"></div>
 <script

src/posts/2013/arcade-fire-reflektor-999.md

@@ -8,4 +8,4 @@ tags: ['music']
 
 This sample sounds promising. I can't wait to hear more from _Reflektor_ on the 9th.<!-- excerpt -->
 
-<https://www.youtube.com/watch?v=4i2wp3GkNrg>
+https://www.youtube.com/watch?v=4i2wp3GkNrg

src/posts/2013/damien-jurado-2014.md

@@ -8,4 +8,4 @@ tags: ['music']
 
 Damien Jurado has been one of my favorite musicians for years. He's a talented, albeit nervous, performer and a gifted songwriter.<!-- excerpt --> The announcement that he'll have a new record out in 2014 is exciting and something that I am very much looking forward to. If the new material he played live when I saw him at the Bootleg Theater in April is any indication it should be even more experimental and unique than _Maraqopa_. I cannot wait to hear it.
 
-<https://www.youtube.com/watch?v=NNpAj1U1_5Q>
+https://www.youtube.com/watch?v=NNpAj1U1_5Q

src/posts/2013/dawes-most-people.md

@@ -10,4 +10,4 @@ A wonderful new video for one of the highlights of Dawes' most recent album _Sto
 
 Damien Jurado gave "Museum of Flight" off of _Maraqopa_ a similar treatment that's also very [much worth checking out](https://www.youtube.com/watch?v=CCcAKNSJ3Ac).
 
-<https://www.youtube.com/watch?v=zUWu8Ny36dc>
+https://www.youtube.com/watch?v=zUWu8Ny36dc

src/posts/2013/nomeansno-live-via-marinet-tvm.md

@@ -8,4 +8,4 @@ tags: ['music', 'video']
 
 One of punk's greatest bands live via Marinet TVM. I still need to see them live and sincerely hope I get the chance to before they hang things up. Superb performance.<!-- excerpt -->
 
-<https://www.youtube.com/watch?v=euTMEIqTTfk>
+https://www.youtube.com/watch?v=euTMEIqTTfk

src/posts/2013/okkervil-river-open-mic-night.md

@@ -8,4 +8,4 @@ tags: ['video', 'music']
 
 Not out of place at all at an open mic night. Excellent.<!-- excerpt -->
 
-<https://www.youtube.com/watch?v=_GnemKx1tlk>
+https://www.youtube.com/watch?v=_GnemKx1tlk

src/posts/2013/skin-and-bones-old-horses.md

@@ -10,4 +10,4 @@ Beautiful, stripped down song from a musician with a strong voice and truly hear
 
 [Grab his album here »](http://skinandbonesmusic.bandcamp.com)
 
-<https://www.youtube.com/watch?v=wB52fQkjZkE>
+https://www.youtube.com/watch?v=wB52fQkjZkE

src/posts/2013/the-postal-service-some-idealistic-future.md

@@ -8,4 +8,4 @@ tags: ['music', 'video']
 
 A well-produced documentary and a great look at a band who, ten years later (and after only one album), still means so much to so many people.<!-- excerpt -->
 
-<https://www.youtube.com/watch?v=MoSP7lNJTqk>
+https://www.youtube.com/watch?v=MoSP7lNJTqk

src/posts/2018/fugazi-turnover-live-1991.md

@@ -7,4 +7,4 @@ tags: ['music']
 ---
 Absolutely classic.<!-- excerpt -->
 
-<https://www.youtube.com/watch?v=gzC0RNkBXM0>
+https://www.youtube.com/watch?v=gzC0RNkBXM0

src/posts/2019/waste-of-space-orchestra-seekers-reflection.md

@@ -7,6 +7,6 @@ tags: ['music']
 ---
 I could not be more excited for this release.<!-- excerpt -->
 
-<https://www.youtube.com/watch?v=V8ia-nyd_K8>
+https://www.youtube.com/watch?v=V8ia-nyd_K8
 
 Kudos to Roadburn Festival [for commissioning the piece](https://roadburn.com/premiere-waste-of-space-orchestra-seekers-reflection/).

src/posts/2023/it-is-possible-to-both-stream-and-buy-music.md

@@ -11,4 +11,4 @@ tags:
 
 [I've been streaming music again](https://coryd.dev/posts/2023/i-dont-want-streaming-music/) in part (and I know this is ridiculous) because Spotify is ubiquitous, well-integrated and has a — well — [API that's usable for my purposes](https://coryd.dev/posts/2023/road-to-madness-apple-music-charts/). I still buy music I stream from Bandcamp and archive it and I still buy too many shirts to support bands (I also import missing music into playlists and playlist folders as an analog to albums). I've also been able to scrobble listens more reliably and found some really great bands like [PUP](https://open.spotify.com/artist/6A7uqgC2N1nUhrCLAytHxN). We'll see if it lasts, but it feels like a good balance for now.<!-- excerpt -->
 
-<https://www.youtube.com/watch?v=iVuB1ZASrGw&pp=ygUHcHVwIGR2cA%3D%3D>
+https://www.youtube.com/watch?v=iVuB1ZASrGw

src/posts/2023/talk-building-now-page-with-11ty.md

@@ -8,4 +8,4 @@ tags: ['Eleventy', 'JavaScript', 'automation']
 
 My talk from the Eleventy meetup about building [my now page](https://coryd.dev/now) (you even get to see how much I resemble my avatar).<!-- excerpt -->
 
-<https://www.youtube.com/watch?v=AzcFZJYEpnQ>
+https://www.youtube.com/watch?v=AzcFZJYEpnQ