From d4c87b8abea48089cf766f6ed7aea8fb790ff756 Mon Sep 17 00:00:00 2001
From: Cory Dransfeldt <coryd@hey.com>
Date: Mon, 15 Apr 2024 12:37:32 -0700
Subject: [PATCH] feat: style layers, imports and nesting

---
 package.json                                  |   2 +-
 src/_includes/base.liquid                     |   8 +-
 src/_includes/now.liquid                      |   7 -
 src/_includes/partials/addon-links.liquid     |   4 -
 src/_includes/partials/badge-grid.liquid      |   4 -
 src/_includes/partials/banners/github.liquid  |   4 -
 src/_includes/partials/banners/npm.liquid     |   4 -
 .../partials/banners/old-post.liquid          |   4 -
 src/_includes/partials/link-peek.liquid       |   4 -
 src/_includes/partials/mastodon-post.liquid   |   4 -
 .../partials/nav/theme-toggle.liquid          |   4 -
 src/_includes/partials/now/media-grid.liquid  |   7 -
 src/_includes/partials/now/status.liquid      |   2 +-
 src/_includes/partials/now/track-chart.liquid |   9 +-
 .../partials/now/tracks-recent.liquid         |   8 +-
 src/_includes/partials/paginator.liquid       |   4 -
 src/_includes/partials/popular-posts.liquid   |   2 +-
 src/_includes/partials/post-graph.liquid      |   4 -
 src/_includes/partials/recent-links.liquid    |   2 +-
 src/_includes/partials/share-button.liquid    |   4 -
 src/_includes/post.liquid                     |   5 -
 src/assets/styles/base/index.css              | 565 +++++++++++++++++
 src/assets/styles/components/addon-links.css  |  36 +-
 src/assets/styles/components/badge-grid.css   |  24 +-
 src/assets/styles/components/banners.css      |  54 +-
 src/assets/styles/components/buttons.css      |  86 +--
 src/assets/styles/components/forms.css        |   8 +-
 src/assets/styles/components/link-peek.css    |  68 +-
 .../styles/components/mastodon-post.css       |  22 +-
 src/assets/styles/components/media-grid.css   |   3 +-
 src/assets/styles/components/paginator.css    |  34 +-
 src/assets/styles/components/share-button.css |  23 +-
 src/assets/styles/components/theme-toggle.css |  60 +-
 src/assets/styles/components/track-chart.css  |  36 +-
 .../{partials => defaults}/animations.css     |   0
 .../styles/{partials => defaults}/fonts.css   |   0
 .../styles/{partials => defaults}/vars.css    |   0
 src/assets/styles/index.css                   | 597 ++----------------
 src/assets/styles/pages/404.css               |  10 +-
 src/assets/styles/pages/about.css             |  36 +-
 src/assets/styles/pages/blogroll.css          |  12 +-
 src/assets/styles/pages/contact.css           |  30 +-
 src/assets/styles/pages/links.css             |   3 +-
 src/assets/styles/pages/now.css               |  33 +-
 src/assets/styles/pages/post.css              |   6 +-
 src/assets/styles/pages/webrings.css          |  10 +-
 src/assets/styles/reset.css                   |  46 ++
 src/links.html                                |   4 -
 src/pages/404.html                            |   4 -
 src/pages/about.md                            |   4 -
 src/pages/contact-success.html                |   2 +-
 src/pages/contact.md                          |   6 -
 src/pages/search.html                         |   4 -
 src/pages/webrings.md                         |   4 -
 src/posts/2023/2023-in-review.html            |   2 +-
 ...ptimizing-for-performance-with-eleventy.md |  13 +-
 .../2024/automatic-mastodon-post-embeds.md    |   4 -
 .../building-a-theme-toggle-web-component.md  |   4 -
 58 files changed, 968 insertions(+), 981 deletions(-)
 create mode 100644 src/assets/styles/base/index.css
 rename src/assets/styles/{partials => defaults}/animations.css (100%)
 rename src/assets/styles/{partials => defaults}/fonts.css (100%)
 rename src/assets/styles/{partials => defaults}/vars.css (100%)
 create mode 100644 src/assets/styles/reset.css

diff --git a/package.json b/package.json
index 4e4d1ec9..f18bc636 100644
--- a/package.json
+++ b/package.json
@@ -1,6 +1,6 @@
 {
   "name": "coryd.dev",
-  "version": "10.3.4",
+  "version": "11.0.0",
   "description": "The source for my personal site. Built using 11ty.",
   "type": "module",
   "scripts": {
diff --git a/src/_includes/base.liquid b/src/_includes/base.liquid
index b32390e6..c8b48502 100644
--- a/src/_includes/base.liquid
+++ b/src/_includes/base.liquid
@@ -16,13 +16,7 @@
     <title>{{ pageTitle }}</title>
     <link rel="preload" href="/assets/fonts/Poppins-Bold.min.woff2" as="font" type="font/woff2" crossorigin>
     <link rel="preload" href="/assets/fonts/Poppins-Regular.min.woff2" as="font" type="font/woff2" crossorigin>
-    {% capture css %}
-      {% render "../assets/styles/partials/fonts.css" %}
-      {% render "../assets/styles/partials/vars.css" %}
-      {% render "../assets/styles/partials/animations.css" %}
-      {% render "../assets/styles/index.css" %}
-    {% endcapture %}
-    <style>{{ css }}</style>
+    <link rel="stylesheet" href="/assets/styles/index.css?v={% appVersion %}" type="text/css" />
     <script async data-id="101449513" src="/23af0256fe76a.js"></script>
     <link rel="canonical" href="{{ fullUrl }}" />
     <meta property="og:title" content="{{ pageTitle }}" />
diff --git a/src/_includes/now.liquid b/src/_includes/now.liquid
index 21298d97..c0f1f738 100644
--- a/src/_includes/now.liquid
+++ b/src/_includes/now.liquid
@@ -1,13 +1,6 @@
 ---
 layout: default
 ---
-{% capture css %}
-  {% render "../assets/styles/pages/now.css" %}
-  {% render "../assets/styles/components/media-grid.css" %}
-  {% render "../assets/styles/components/progress-bar.css" %}
-  {% render "../assets/styles/components/buttons.css" %}
-{% endcapture %}
-<style>{{ css }}</style>
 {% capture js %}
   {% render "../assets/scripts/media-toggles.js" %}
 {% endcapture %}
diff --git a/src/_includes/partials/addon-links.liquid b/src/_includes/partials/addon-links.liquid
index 466804dd..26e30f45 100644
--- a/src/_includes/partials/addon-links.liquid
+++ b/src/_includes/partials/addon-links.liquid
@@ -1,7 +1,3 @@
-{% capture css %}
-  {% render "../../assets/styles/components/addon-links.css" %}
-{% endcapture %}
-<style>{{ css }}</style>
 <div class="addon-links__wrapper">
   {%- if analytics.size > 0 -%}
   <div>{% render "partials/popular-posts.liquid", posts:posts, analytics:analytics %}</div>
diff --git a/src/_includes/partials/badge-grid.liquid b/src/_includes/partials/badge-grid.liquid
index a1ab094c..13c747f9 100644
--- a/src/_includes/partials/badge-grid.liquid
+++ b/src/_includes/partials/badge-grid.liquid
@@ -1,7 +1,3 @@
-{% capture css %}
-  {% render "../../assets/styles/components/badge-grid.css" %}
-{% endcapture %}
-<style>{{ css }}</style>
 <div class="badge__grid">
   <a href="https://11ty.dev">
     {% image './src/assets/img/badges/eleventy.png', 'Made with 11ty', '', 'lazy' %}
diff --git a/src/_includes/partials/banners/github.liquid b/src/_includes/partials/banners/github.liquid
index 9f9bc3eb..b730e66d 100644
--- a/src/_includes/partials/banners/github.liquid
+++ b/src/_includes/partials/banners/github.liquid
@@ -1,7 +1,3 @@
-{% capture css %}
-  {% render "../../../assets/styles/components/banners.css" %}
-{% endcapture %}
-<style>{{ css }}</style>
 <div class="banner github">
   <p>{% tablericon "brand-github" "GitHub repository" %} Take a look at <a href="{{ url }}">the GitHub repository for this project</a>. (And give it a star if you feel like it.)</p>
 </div>
\ No newline at end of file
diff --git a/src/_includes/partials/banners/npm.liquid b/src/_includes/partials/banners/npm.liquid
index 7a2605ef..f84a1aea 100644
--- a/src/_includes/partials/banners/npm.liquid
+++ b/src/_includes/partials/banners/npm.liquid
@@ -1,7 +1,3 @@
-{% capture css %}
-  {% render "../../../assets/styles/components/banners.css" %}
-{% endcapture %}
-<style>{{ css }}</style>
 <div class="banner npm">
   <p>{% tablericon "brand-npm" "NPM package" %} <a href="{{ url }}">You can take a look at this package on NPM</a> or install it by running <code>{{ command }}</code>.</p>
 </div>
\ No newline at end of file
diff --git a/src/_includes/partials/banners/old-post.liquid b/src/_includes/partials/banners/old-post.liquid
index 99dee011..d3d272ff 100644
--- a/src/_includes/partials/banners/old-post.liquid
+++ b/src/_includes/partials/banners/old-post.liquid
@@ -1,9 +1,5 @@
 {% assign isOldPost = date | oldPost %}
 {% if isOldPost %}
-  {% capture css %}
-    {% render "../../../assets/styles/components/banners.css" %}
-  {% endcapture %}
-  <style>{{ css }}</style>
   <div class="banner old-post">
     <p>{% tablericon "clock-x" "Old post" %} This post is over 3 years old. I've probably changed my mind since it was written and it <em>could</em> be out of date.</p>
   </div>
diff --git a/src/_includes/partials/link-peek.liquid b/src/_includes/partials/link-peek.liquid
index 69f8f78a..406774f7 100644
--- a/src/_includes/partials/link-peek.liquid
+++ b/src/_includes/partials/link-peek.liquid
@@ -1,7 +1,3 @@
-{% capture css %}
-  {% render "../../assets/styles/components/link-peek.css" %}
-{% endcapture %}
-<style>{{ css }}</style>
 <script type="module" src="/assets/scripts/components/link-peek.js"></script>
 <template id="link-peek-template">
   <figure>
diff --git a/src/_includes/partials/mastodon-post.liquid b/src/_includes/partials/mastodon-post.liquid
index 401b22ad..f6471227 100644
--- a/src/_includes/partials/mastodon-post.liquid
+++ b/src/_includes/partials/mastodon-post.liquid
@@ -1,9 +1,5 @@
 {%- assign shareLink = postUrl | findPost: linkPosts -%}
 {%- if shareLink %}
-{% capture css %}
-  {% render "../../assets/styles/components/mastodon-post.css" %}
-{% endcapture %}
-<style>{{ css }}</style>
 <script type="module" src="/assets/scripts/components/mastodon-post.js"></script>
 <template id="mastodon-post-template">
   <div class="mastodon-post-wrapper">
diff --git a/src/_includes/partials/nav/theme-toggle.liquid b/src/_includes/partials/nav/theme-toggle.liquid
index cdc60183..fe448174 100644
--- a/src/_includes/partials/nav/theme-toggle.liquid
+++ b/src/_includes/partials/nav/theme-toggle.liquid
@@ -1,8 +1,4 @@
 <script type="module" src="/assets/scripts/components/theme-toggle.js"></script>
-{% capture css %}
-  {% render "../../../assets/styles/components/theme-toggle.css" %}
-{% endcapture %}
-<style>{{ css }}</style>
 <span class="client-side">
   <theme-toggle>
     <button
diff --git a/src/_includes/partials/now/media-grid.liquid b/src/_includes/partials/now/media-grid.liquid
index e468e39c..13ce8102 100644
--- a/src/_includes/partials/now/media-grid.liquid
+++ b/src/_includes/partials/now/media-grid.liquid
@@ -1,11 +1,4 @@
 {% if data.size > 0 %}
-  {% if embeddedStyles == true %}
-  {% capture css %}
-    {% render "../../../assets/styles/components/media-grid.css" %}
-    {% render "../../../assets/styles/components/progress-bar.css" %}
-  {% endcapture %}
-  <style>{{ css }}</style>
-  {% endif %}
   {% assign media = data | normalizeMedia %}
   <div class="media__grid {% if shape == 'square' %}square{% else %}vertical{% endif %}">
     {% for item in media limit: count %}
diff --git a/src/_includes/partials/now/status.liquid b/src/_includes/partials/now/status.liquid
index 7a92d999..703dabc1 100644
--- a/src/_includes/partials/now/status.liquid
+++ b/src/_includes/partials/now/status.liquid
@@ -1,3 +1,3 @@
-<p class="my-2">
+<p>
   {{ status.emoji }} {{ status.content }}
 </p>
\ No newline at end of file
diff --git a/src/_includes/partials/now/track-chart.liquid b/src/_includes/partials/now/track-chart.liquid
index b8a9645d..8e403f2c 100644
--- a/src/_includes/partials/now/track-chart.liquid
+++ b/src/_includes/partials/now/track-chart.liquid
@@ -1,10 +1,4 @@
 {% if data.size > 0 %}
-  {% capture css %}
-    {% render "../../../assets/styles/components/track-chart.css" %}
-    {% render "../../../assets/styles/components/progress-bar.css" %}
-  {% endcapture %}
-  <style>{{ css}}</style>
-{% endif %}
 <div class="track__chart">
   {% for item in data limit: 10 %}
   {%- assign percentage = item.plays | calculatePlayPercentage: mostPlayed -%}
@@ -21,4 +15,5 @@
     {% render "partials/now/progress-bar.liquid", percentage:percentage %}
   </div>
   {% endfor %}
-</div>
\ No newline at end of file
+</div>
+{% endif %}
\ No newline at end of file
diff --git a/src/_includes/partials/now/tracks-recent.liquid b/src/_includes/partials/now/tracks-recent.liquid
index bfa526a1..0ee102bc 100644
--- a/src/_includes/partials/now/tracks-recent.liquid
+++ b/src/_includes/partials/now/tracks-recent.liquid
@@ -1,9 +1,4 @@
 {% if data.size > 0 %}
-  {% capture css %}
-    {% render "../../../assets/styles/components/track-chart.css" %}
-  {% endcapture %}
-  <style>{{ css}}</style>
-{% endif %}
 <div class="track__chart">
   {% for item in data limit: 10 %}
   {% capture alt %}{{ item.track }} by {{ item.track }}{% endcapture %}
@@ -22,4 +17,5 @@
       </div>
     </div>
   {% endfor %}
-</div>
\ No newline at end of file
+</div>
+{% endif %}
\ No newline at end of file
diff --git a/src/_includes/partials/paginator.liquid b/src/_includes/partials/paginator.liquid
index f2e4e6ca..1e3df24f 100644
--- a/src/_includes/partials/paginator.liquid
+++ b/src/_includes/partials/paginator.liquid
@@ -1,7 +1,3 @@
-{% capture css %}
-  {% render "../../assets/styles/components/paginator.css" %}
-{% endcapture %}
-<style>{{ css }}</style>
 <script type="module" src="/assets/scripts/components/select-pagination.js"></script>
 <nav aria-label="Blog pagination" class="pagination flex--centered">
   {% if pagination.href.previous %}
diff --git a/src/_includes/partials/popular-posts.liquid b/src/_includes/partials/popular-posts.liquid
index 89b49b52..eb2103c0 100644
--- a/src/_includes/partials/popular-posts.liquid
+++ b/src/_includes/partials/popular-posts.liquid
@@ -1,6 +1,6 @@
 {% assign posts = posts | getPopularPosts: analytics %}
 {% if posts.size > 0 %}
-<h2 class="flex--centered">
+<h2 class="link__list--header flex--centered">
   {% tablericon "flame" "Popular" %}
   Popular posts
 </h2>
diff --git a/src/_includes/partials/post-graph.liquid b/src/_includes/partials/post-graph.liquid
index 625ca7bf..d74d285e 100644
--- a/src/_includes/partials/post-graph.liquid
+++ b/src/_includes/partials/post-graph.liquid
@@ -1,7 +1,3 @@
-{% capture css %}
-  {% render "../../assets/styles/components/post-graph.css" %}
-{% endcapture %}
-<style>{{ css }}</style>
 <div class="post-graph">
   {% assign years = postYears | reverse %}
   {%- for year in years %}
diff --git a/src/_includes/partials/recent-links.liquid b/src/_includes/partials/recent-links.liquid
index ce03d71a..ce59dee5 100644
--- a/src/_includes/partials/recent-links.liquid
+++ b/src/_includes/partials/recent-links.liquid
@@ -1,5 +1,5 @@
 {% if links.size > 0 %}
-<h2 id="links" class="recent__links-header flex--centered">
+<h2 id="links" class="link__list--header flex--centered">
   {% tablericon "link" "Links" %}
   Recent links
 </h2>
diff --git a/src/_includes/partials/share-button.liquid b/src/_includes/partials/share-button.liquid
index dfda3891..041ba606 100644
--- a/src/_includes/partials/share-button.liquid
+++ b/src/_includes/partials/share-button.liquid
@@ -1,7 +1,3 @@
-{% capture css %}
-  {% render "../../assets/styles/components/share-button.css" %}
-{% endcapture %}
-<style>{{ css }}</style>
 <script type="module" src="/assets/scripts/components/webcare-webshare.js"></script>
 <webcare-webshare share-text="{{ title }} {{ url | tagLookup: tagMap }}" share-url="{{ url }}" copy-text="{{ title }} {{ url | tagLookup: tagMap }} {{ url }}">
   <button class="share icon--small icon--center__vertical" disabled>{% tablericon "share" "Share" %}</button>
diff --git a/src/_includes/post.liquid b/src/_includes/post.liquid
index 06797c79..a929d242 100644
--- a/src/_includes/post.liquid
+++ b/src/_includes/post.liquid
@@ -4,11 +4,6 @@ schema: blog
 ---
 {% render "partials/header.liquid", meta: meta, page: page, nav: nav %}
 {%- capture postUrl %}{{ meta.url }}{{ page.url }}{% endcapture -%}
-{% capture css %}
-  {% render "../assets/styles/plugins/prism.css" %}
-  {% render "../assets/styles/pages/post.css" %}
-{% endcapture %}
-<style>{{ css }}</style>
 <div class="default__wrapper">
   <article class="h-entry">
     <div class="flex--centered">
diff --git a/src/assets/styles/base/index.css b/src/assets/styles/base/index.css
new file mode 100644
index 00000000..e99ee216
--- /dev/null
+++ b/src/assets/styles/base/index.css
@@ -0,0 +1,565 @@
+body,
+html {
+  color: var(--text-color);
+  font-family: var(--font-sans);
+  font-size: var(--font-size-base);
+  line-height: var(--line-height-base);
+  background: var(--background-color);
+  margin: 0;
+}
+
+::-moz-selection {
+  color: var(--color-lightest);
+  background: var(--selection-color);
+}
+
+::selection {
+  color: var(--color-lightest);
+  background: var(--selection-color);
+}
+
+/* scrollbars */
+body,
+html {
+  scrollbar-width: thin;
+  scrollbar-color: var(--accent-color) var(--gray-light);
+}
+
+::-webkit-scrollbar {
+  width: var(--sizing-xs);
+  height: var(--sizing-xs);
+}
+
+body::-webkit-scrollbar {
+  width: var(--sizing-md);
+  height: var(--sizing-md);
+}
+
+::-webkit-scrollbar-thumb {
+  background: var(--accent-color);
+  border-radius: var(--rounded-full);
+}
+
+::-webkit-scrollbar-track {
+  background-color: var(--gray-light);
+}
+
+::-webkit-scrollbar-button {
+  background-color: var(--accent-color);
+  border-radius: var(--rounded);
+}
+
+p,
+blockquote {
+  line-height: var(--line-height-lg);
+  margin: var(--sizing-base) 0;
+}
+
+blockquote {
+  font-size: var(--font-size-lg);
+  padding-left: var(--sizing-lg);
+  color: var(--gray-dark);
+  border-left: var(--sizing-xs) solid var(--gray-dark);
+  word-break: break-word;
+}
+
+:is(body, html, nav .tags, nav .search) svg {
+  stroke: var(--text-color);
+}
+
+:is(h1, h2, h3, h4, h5, h6) > svg {
+  margin-right: var(--sizing-xs);
+  stroke-width: var(--stroke-width-bold) !important;
+}
+
+sup.footnote-ref {
+  line-height: var(--line-height-xs);
+}
+
+strong,
+blockquote {
+  font-weight: var(--font-weight-bold);
+}
+
+em,
+blockquote {
+  font-style: italic;
+}
+
+/* links */
+a {
+  text-decoration: none;
+}
+
+a,
+.active {
+  color: var(--accent-color);
+}
+
+a:hover,
+a:focus,
+a:active,
+:is(.main__title, footer nav:last-child) a:hover,
+:is(.main__title, footer nav:last-child) a:focus,
+:is(.main__title, footer nav:last-child) a:active {
+  color: var(--accent-color-hover);
+  transition-property: color;
+  transition-timing-function: var(--transition-ease-in-out);
+  transition-duration: var(--transition-duration-default);
+}
+
+:is(
+    a:has(svg):hover,
+    a:has(svg):active,
+    a:has(svg):focus,
+    button:has(svg):hover,
+    button:has(svg):active,
+    button:has(svg):focus
+) svg {
+  stroke: var(--accent-color-hover);
+}
+
+/* headers */
+h1, h2, h3, h4, h5, h6 {
+  font-weight: var(--font-weight-bold);
+}
+
+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-sm) }
+
+hr {
+  height: 1px;
+  background-color: var(--gray-light);
+  border: 0;
+}
+
+hr.large__spacing {
+  margin: var(--sizing-base) 0;
+}
+
+/* tables */
+table {
+  display: block;
+  overflow-x: scroll;
+  width: 100%;
+  max-width: fit-content;
+  margin: 0 auto;
+  white-space: nowrap;
+  border-radius: var(--rounded);
+  border: 1px solid var(--gray-light);
+}
+
+table,
+th,
+td {
+  border-collapse: collapse;
+}
+
+:is(th, td):not(:last-child) {
+  border-right: 1px solid var(--gray-light);
+}
+
+th,
+tr:not(:last-child) {
+  border-bottom: 1px solid var(--gray-light);
+}
+
+th,
+td {
+  padding: var(--sizing-sm);
+  min-width: calc(var(--sizing-3xl) * 2);
+  word-break: break-word;
+}
+
+th {
+  font-weight: var(--font-weight-bold);
+  background-color: var(--gray-lighter);
+  text-align: left;
+}
+
+/* header */
+.main__title {
+  width: 100%;
+  padding-top: var(--sizing-3xl);
+  display: flex;
+  flex-direction: column;
+
+  & h1 {
+    line-height: 1.25;
+    margin: 0;
+    padding-bottom: var(--sizing-md);
+    font-size: var(--font-size-2xl);
+    line-height: var(--line-height-2xl);
+  }
+}
+
+/* nav */
+nav.menu__primary {
+  gap: var(--sizing-md);
+
+  & a,
+  & span {
+    height: var(--sizing-xl);
+  }
+}
+
+:is(a:hover, a:active, a:focus) svg,
+a svg:hover,
+a svg:active,
+a svg:focus,
+button:hover svg,
+button svg:hover,
+.icon--bold > svg {
+  stroke-width: var(--stroke-width-bold);
+}
+
+.active,
+.active svg {
+  cursor: not-allowed;
+}
+
+a svg,
+nav .active svg,
+nav ul li .active svg {
+  stroke: var(--accent-color);
+}
+
+.active:hover svg,
+.active svg:hover,
+nav ul li .active:hover svg,
+nav ul li .active svg:hover {
+  stroke-width: var(--stroke-width-default);
+}
+
+/* social icons */
+.at svg { stroke: var(--brand-hey) !important; }
+.brand-github svg { stroke: var(--brand-github) !important; }
+.brand-npm svg { stroke: var(--brand-npm) !important; }
+.brand-mastodon svg { stroke: var(--brand-mastodon) !important; }
+.brand-lastfm svg { stroke: var(--brand-lastfm) !important; }
+.device-tv svg { stroke: var(--brand-trakt) !important; }
+.books svg { stroke: var(--brand-storygraph) !important; }
+.coffee 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 {
+  padding-top: var(--sizing-3xl);
+}
+
+.main__wrapper {
+  min-height: 100vh;
+  display: flex;
+  flex-direction: column;
+}
+
+main {
+  flex: 1 1 0%;
+  width: 80%;
+  margin-left: auto;
+  margin-right: auto;
+}
+
+/* now */
+.now__topper,
+article {
+  border-bottom: 1px solid var(--gray-light);
+  margin-bottom: var(--sizing-base);
+}
+
+.now__topper p:first-child {
+  margin-top: 0;
+}
+
+footer nav:first-child {
+  gap: var(--sizing-sm);
+  margin-top: var(--sizing-3xl);
+  padding: var(--sizing-3xl) 0 var(--sizing-lg);
+  width: 100%;
+
+  & svg {
+    margin-top: 0;
+  }
+
+  & a {
+    width: var(--sizing-xl);
+    height: var(--sizing-xl);
+  }
+}
+
+footer nav:last-child {
+  font-size: var(--font-size-sm);
+  line-height: var(--line-height-sm);
+  padding-bottom: var(--sizing-3xl);
+
+  & span:not(.active) {
+    margin-left: var(--sizing-xs);
+    margin-right: var(--sizing-xs);
+  }
+}
+
+:is(.main__title, footer nav:last-child) a {
+  color: var(--text-color);
+}
+
+.highlight-text {
+  color: var(--color-lightest);
+  background-color: var(--accent-color);
+  padding: var(--sizing-xs);
+}
+
+code {
+  padding: var(--sizing-xs);
+  color: var(--text-color-inverted);
+  background-color: var(--background-color-inverted);
+}
+
+/* articles */
+article {
+  & h2 {
+    color: var(--text-color);
+    line-height: var(--line-height-2xl);
+    margin: 0 0 var(--sizing-lg);
+    transition-property: color;
+  }
+
+  & a h2:hover,
+  & a h2:focus,
+  & a h2:active {
+    color: var(--accent-color-hover);
+    transition-timing-function: var(--transition-ease-in-out);
+    transition-duration: var(--transition-duration-default);
+  }
+
+  & [rel="author"],
+  & time {
+    color: var(--gray-dark);
+    font-size: var(--font-size-sm);
+    line-height: var(--line-height-sm);
+    margin-right: var(--sizing-xs);
+  }
+
+  & [rel="author"] {
+    margin-bottom: var(--sizing-xs);
+  }
+
+  & p:first-of-type {
+    margin-top: var(--sizing-sm);
+  }
+}
+
+.tag {
+  margin-bottom: var(--sizing-lg);
+  display: inline-block;
+
+  &:not(:last-child) {
+    margin-right: var(--sizing-lg);
+  }
+}
+
+/* buttons */
+button {
+  appearance: none;
+  border: none;
+}
+
+/* icons */
+svg {
+  stroke-width: var(--stroke-width-default);
+}
+
+.icon--small > svg {
+  width: var(--sizing-lg);
+  height: var(--sizing-lg);
+}
+
+.icon--center__vertical > svg {
+  display: inline;
+  vertical-align: middle;
+}
+
+/* lists */
+ul, ol {
+  list-style-position: inside;
+  margin: var(--sizing-base) 0;
+  padding-left: var(--sizing-base);
+}
+
+li {
+  margin-top: var(--sizing-lg);
+  margin-bottom: var(--sizing-lg);
+}
+
+.link__list {
+  margin-bottom: 0;
+
+  & li {
+    margin-top: var(--sizing-sm);
+    margin-bottom: var(--sizing-sm);
+
+    &:last-child {
+      margin-bottom: 0;
+    }
+  }
+}
+
+.link__list--header {
+  margin: var(--sizing-3xl) 0 var(--sizing-lg);
+}
+
+/* images */
+.image__banner {
+  border: 1px solid var(--accent-color);
+  border-radius: var(--rounded);
+  height: auto;
+  display: block;
+  width: 100%;
+
+  & > * {
+    display: block;
+    width: 100%;
+    height: auto;
+  }
+}
+
+/* pages */
+.page__header {
+  font-size: var(--font-size-2xl);
+  line-height: var(--line-height-2xl);
+  margin-top: 0;
+}
+
+/* selects */
+select {
+  appearance: none;
+  background-color: transparent;
+  margin: 0;
+  width: 100%;
+  z-index: 1;
+  outline: none;
+  appearance: none;
+  border: none;
+  color: var(--color-lightest);
+  cursor: pointer;
+  font-size: var(--font-size-base);
+  font-weight: var(--font-weight-bold);
+  line-height: var(--line-height-base);
+}
+
+.select,
+select-pagination {
+  border-radius: var(--rounded-full);
+  background-color: var(--accent-color);
+  padding: 0 var(--sizing-lg);
+  display: grid;
+  align-items: center;
+  position: relative;
+  text-align: center;
+  text-align-last: center;
+  -moz-text-align-last: center;
+}
+
+.select,
+.select select,
+select-pagination,
+select-pagination select {
+  min-width:  calc(var(--sizing-3xl) * 4);
+  padding-top: var(--sizing-xs);
+  padding-bottom: var(--sizing-xs);
+}
+
+.select select,
+.select::after,
+select-pagination select,
+select-pagination::after {
+  grid-area: select;
+}
+
+.select::after,
+select-pagination::after {
+  content: '';
+  width: var(--sizing-md);
+  height: var(--sizing-sm);
+  display: inline-block;
+  background-color: var(--color-lightest);
+  clip-path: polygon(100% 0%, 0 0%, 50% 100%);
+  justify-self: end;
+}
+
+/* utilities */
+.hidden {
+  display: none !important;
+}
+
+.text--centered {
+  text-align: center !important;
+}
+
+.text--small {
+  font-size: var(--font-size-sm) !important;
+  line-height: var(--line-height-sm) !important;
+}
+
+.flex--centered {
+  display: flex;
+  flex-direction: row;
+  align-items: center;
+}
+
+.justify--centered {
+  justify-content: center;
+}
+
+.flex--wrap {
+  flex-wrap: wrap
+}
+
+/* screens: md */
+@media screen and (min-width: 768px) {
+  .main__title {
+    flex-direction: row;
+    align-items: center;
+    justify-content: space-between;
+  }
+
+  .main__title h1 {
+    padding-bottom: 0;
+  }
+
+  main {
+    max-width: 768px;
+  }
+
+  .main__title h1,
+  .page__header {
+    font-size: var(--font-size-3xl);
+    line-height: var(--line-height-3xl);
+  }
+
+  article {
+    & h2 {
+      margin: 0 0 var(--sizing-xs);
+    }
+
+    & p:first-of-type {
+      margin-top: var(--sizing-md);
+    }
+  }
+
+  .tag {
+    margin-bottom: var(--sizing-sm);
+
+    &:not(:last-child) {
+      margin-right: var(--sizing-sm);
+    }
+  }
+
+  footer nav:first-child {
+    gap: var(--sizing-md);
+  }
+}
diff --git a/src/assets/styles/components/addon-links.css b/src/assets/styles/components/addon-links.css
index 1402a382..34c9bec6 100644
--- a/src/assets/styles/components/addon-links.css
+++ b/src/assets/styles/components/addon-links.css
@@ -1,27 +1,31 @@
-:root {
-  --grid: repeat(1,minmax(0,1fr));
-}
-
 .addon-links__wrapper {
   display: grid;
   gap: var(--sizing-sm);
-  grid-template-columns: var(--grid);
-}
+  grid-template-columns: repeat(1,minmax(0,1fr));
 
-.addon-links__wrapper h2 {
-  margin-top: 0;
-}
+  & h2 {
+    margin-top: 0;
+  }
 
-.addon-links__wrapper div:last-of-type h2 {
-  margin-top: var(--sizing-base);
+  & div:last-of-type h2 {
+    margin-top: var(--sizing-base);
+  }
+
+  &.link__list {
+    margin-bottom: 0;
+  }
 }
 
 @media screen and (min-width: 768px) {
-  :root {
-    --grid: repeat(2,minmax(0,1fr));
-  }
+  .addon-links__wrapper {
+    grid-template-columns: repeat(2,minmax(0,1fr));
 
-  .addon-links__wrapper div h2 {
-    margin-top: 0 !important;
+    & div:first-of-type {
+      margin-right: var(--sizing-lg);
+    }
+
+    & div h2 {
+      margin-top: 0 !important;
+    }
   }
 }
\ No newline at end of file
diff --git a/src/assets/styles/components/badge-grid.css b/src/assets/styles/components/badge-grid.css
index 746a4b79..c58da214 100644
--- a/src/assets/styles/components/badge-grid.css
+++ b/src/assets/styles/components/badge-grid.css
@@ -1,24 +1,20 @@
-:root {
-  --grid: repeat(3,minmax(0,1fr));
-}
-
 .badge__grid {
   display: grid;
   gap: var(--sizing-md);
-  grid-template-columns: var(--grid);
-}
+  grid-template-columns: repeat(3,minmax(0,1fr));
 
-.badge__grid > * {
-  display: flex;
-  justify-content: center;
-}
+  &  > * {
+    display: flex;
+    justify-content: center;
+  }
 
-.badge__grid img {
-  image-rendering: pixelated;
+  img {
+    image-rendering: pixelated;
+  }
 }
 
 @media screen and (min-width: 768px) {
-  :root {
-    --grid: repeat(4,minmax(0,1fr));
+  .badge__grid {
+    grid-template-columns: repeat(4,minmax(0,1fr));
   }
 }
\ No newline at end of file
diff --git a/src/assets/styles/components/banners.css b/src/assets/styles/components/banners.css
index d35f1700..fe0fb004 100644
--- a/src/assets/styles/components/banners.css
+++ b/src/assets/styles/components/banners.css
@@ -3,38 +3,38 @@
   padding: var(--sizing-md);
   border: 1px solid;
   border-radius: var(--rounded);
-}
 
-.banner.old-post {
-  border-color: var(--gray-light);
-}
+  & p {
+    font-size: var(--font-size-sm);
+    line-height: var(--line-height-sm);
+    margin: 0 !important;
 
-.banner.npm {
-  border-color: var(--brand-npm);
-}
+    & > svg {
+      display: inline;
+      vertical-align: middle;
+      height: var(--sizing-lg);
+      width: var(--sizing-lg);
+      margin-right: var(--sizing-xs);
+    }
+  }
 
-.banner.npm svg {
-  stroke: var(--brand-npm);
-}
+  &.old-post {
+    border-color: var(--gray-light);
+  }
 
-.banner.github {
-  border-color: var(--brand-github);
-}
+  &.npm {
+    border-color: var(--brand-npm);
 
-.banner.github svg {
-  stroke: var(--brand-github);
-}
+    & svg {
+      stroke: var(--brand-npm);
+    }
+  }
 
-.banner p {
-  font-size: var(--font-size-sm);
-  line-height: var(--line-height-sm);
-  margin: 0 !important;
-}
+  &.github {
+    border-color: var(--brand-github);
 
-.banner p > svg {
-  display: inline;
-  vertical-align: middle;
-  height: var(--sizing-lg);
-  width: var(--sizing-lg);
-  margin-right: var(--sizing-xs);
+    & svg {
+      stroke: var(--brand-github);
+    }
+  }
 }
\ No newline at end of file
diff --git a/src/assets/styles/components/buttons.css b/src/assets/styles/components/buttons.css
index e841c1a7..ef90585e 100644
--- a/src/assets/styles/components/buttons.css
+++ b/src/assets/styles/components/buttons.css
@@ -1,48 +1,50 @@
-button:not(.theme__toggle, .share) {
-  border-radius: var(--rounded-full);
-  padding: var(--sizing-sm) var(--sizing-lg);
-  margin: 0 var(--sizing-xs) var(--sizing-md) 0;
-  cursor: pointer;
-  display: inline-flex;
-  flex-direction: row;
-  justify-content: center;
-  font-size: var(--font-size-base);
-  font-weight: var(--font-weight-bold);
-  line-height: var(--line-height-base);
-  color: var(--color-lightest);
-  background-color: var(--accent-color);
-  appearance: none;
-  border: 2px solid var(--accent-color);
-  transition-property: all;
-}
+button {
+  &:not(.theme__toggle, .share) {
+    border-radius: var(--rounded-full);
+    padding: var(--sizing-sm) var(--sizing-lg);
+    margin: 0 var(--sizing-xs) var(--sizing-md) 0;
+    cursor: pointer;
+    display: inline-flex;
+    flex-direction: row;
+    justify-content: center;
+    font-size: var(--font-size-base);
+    font-weight: var(--font-weight-bold);
+    line-height: var(--line-height-base);
+    color: var(--color-lightest);
+    background-color: var(--accent-color);
+    appearance: none;
+    border: 2px solid var(--accent-color);
+    transition-property: all;
+  }
 
-button:not(.theme__toggle, .share, .active):hover,
-button:not(.theme__toggle, .share, .active):active,
-button:not(.theme__toggle, .share, .active):focus {
-  background-color: var(--accent-color-hover);
-  border-color: var(--accent-color-hover);
-  transition-timing-function: var(--transition-ease-in-out);
-  transition-duration: var(--transition-duration-default);
-}
+  &:not(.theme__toggle, .share, .active):hover,
+  &:not(.theme__toggle, .share, .active):active,
+  &:not(.theme__toggle, .share, .active):focus {
+    background-color: var(--accent-color-hover);
+    border-color: var(--accent-color-hover);
+    transition-timing-function: var(--transition-ease-in-out);
+    transition-duration: var(--transition-duration-default);
+  }
 
-button.small {
-  font-size: var(--font-size-sm);
-  line-height: var(--line-height-sm);
-  padding: var(--sizing-xs) var(--sizing-sm);
-}
+  &.small {
+    font-size: var(--font-size-sm);
+    line-height: var(--line-height-sm);
+    padding: var(--sizing-xs) var(--sizing-sm);
+  }
 
-button.secondary {
-  color: var(--accent-color);
-  background: transparent;
-}
+  &.secondary {
+    color: var(--accent-color);
+    background: transparent;
+  }
 
-button.secondary:not(.theme__toggle, .share):hover,
-button.secondary:not(.theme__toggle, .share):active,
-button.secondary:not(.theme__toggle, .share):focus {
-  color: var(--accent-color-hover);
-  background: transparent;
-}
+  &.secondary:not(.theme__toggle, .share):hover,
+  &.secondary:not(.theme__toggle, .share):active,
+  &.secondary:not(.theme__toggle, .share):focus {
+    color: var(--accent-color-hover);
+    background: transparent;
+  }
 
-button.active {
-  cursor: not-allowed;
+  &.active {
+    cursor: not-allowed;
+  }
 }
\ No newline at end of file
diff --git a/src/assets/styles/components/forms.css b/src/assets/styles/components/forms.css
index e9069874..13d5d145 100644
--- a/src/assets/styles/components/forms.css
+++ b/src/assets/styles/components/forms.css
@@ -35,9 +35,9 @@ textarea:focus {
   margin-top: 0;
   padding: 0;
   list-style: none;
-}
 
-.search__results li {
-  margin-top: var(--sizing-sm);
-  margin-bottom: var(--sizing-sm);
+  & li {
+    margin-top: var(--sizing-sm);
+    margin-bottom: var(--sizing-sm);
+  }
 }
\ No newline at end of file
diff --git a/src/assets/styles/components/link-peek.css b/src/assets/styles/components/link-peek.css
index c271755e..5d8e1964 100644
--- a/src/assets/styles/components/link-peek.css
+++ b/src/assets/styles/components/link-peek.css
@@ -1,36 +1,42 @@
-link-peek:defined a:not([data-key]) {
-  display: none;
-}
+link-peek {
+  &:defined {
+    & a:not([data-key]) {
+      display: none;
+    }
 
-link-peek:defined figure {
-  position: relative;
-  display: grid;
-  grid-template-columns: repeat(auto-fit, minmax(300px, max-content));
-  gap: 1rem;
-  max-inline-size: max-content;
-  border: 1px solid var(--gray-light);
-  border-radius: var(--rounded);
-  padding: 1rem;
-  margin: 0 0 var(--sizing-base);
-  font-size: var(--font-size-sm);
-  line-height: var(--line-height-sm);
-}
+    & figure {
+      position: relative;
+      display: grid;
+      grid-template-columns: repeat(auto-fit, minmax(300px, max-content));
+      gap: 1rem;
+      max-inline-size: max-content;
+      border: 1px solid var(--gray-light);
+      border-radius: var(--rounded);
+      padding: 1rem;
+      margin: 0 0 var(--sizing-base);
+      font-size: var(--font-size-sm);
+      line-height: var(--line-height-sm);
+    }
 
-link-peek:defined a[data-key="data.title.link"],
-link-peek:defined figure p {
-  font-size: var(--font-size-sm);
-  line-height: var(--line-height-sm);
-}
+    & a[data-key="data.title.link"],
+    & figure p {
+      font-size: var(--font-size-sm);
+      line-height: var(--line-height-sm);
+    }
+  }
 
-link-peek img[data-key="data.logo.url"] {
-  margin-right: var(--sizing-xs);
-  inline-size: var(--sizing-lg);
-  block-size: var(--sizing-lg);
-  vertical-align: middle;
-}
+  & img {
+    &[data-key="data.logo.url"] {
+      margin-right: var(--sizing-xs);
+      inline-size: var(--sizing-lg);
+      block-size: var(--sizing-lg);
+      vertical-align: middle;
+    }
 
-link-peek img[data-key="data.image.url"] {
-  max-inline-size: 100%;
-  block-size: auto;
-  border-radius: var(--rounded);
+    &[data-key="data.image.url"] {
+      max-inline-size: 100%;
+      block-size: auto;
+      border-radius: var(--rounded);
+    }
+  }
 }
\ No newline at end of file
diff --git a/src/assets/styles/components/mastodon-post.css b/src/assets/styles/components/mastodon-post.css
index 6d4249ee..d8484c40 100644
--- a/src/assets/styles/components/mastodon-post.css
+++ b/src/assets/styles/components/mastodon-post.css
@@ -1,18 +1,18 @@
 .mastodon-post-wrapper {
   border-bottom: 1px solid var(--gray-light);
   margin-bottom: var(--sizing-base);
-  padding-bottom: var(--sizing-xs);
-}
+  padding-bottom: var(--sizing-base);
 
-dl {
-  display: flex;
-  flex-direction: row;
-}
+  & dl {
+    display: flex;
+    flex-direction: row;
+  }
 
-dd {
-  margin-left: var(--sizing-xs);
-}
+  & dd {
+    margin-left: var(--sizing-xs);
 
-dd:not(:last-child) {
-  margin-right: var(--sizing-lg);
+    &:not(:last-child) {
+      margin-right: var(--sizing-lg);
+    }
+  }
 }
\ No newline at end of file
diff --git a/src/assets/styles/components/media-grid.css b/src/assets/styles/components/media-grid.css
index 82ef5852..ae3128cd 100644
--- a/src/assets/styles/components/media-grid.css
+++ b/src/assets/styles/components/media-grid.css
@@ -3,8 +3,7 @@
   --grid-vertical: repeat(3,minmax(0,1fr));
 }
 
-.now__section--header,
-.recent__links-header {
+.now__section--header {
   margin: var(--sizing-3xl) 0 var(--sizing-lg);
 }
 
diff --git a/src/assets/styles/components/paginator.css b/src/assets/styles/components/paginator.css
index a233dc96..699163ca 100644
--- a/src/assets/styles/components/paginator.css
+++ b/src/assets/styles/components/paginator.css
@@ -1,24 +1,24 @@
 .pagination {
   justify-content: space-between;
-}
 
-.pagination button {
-  background: none;
-  padding-left: 0;
-  padding-right: 0;
-}
+  & button {
+    background: none;
+    padding-left: 0;
+    padding-right: 0;
+  }
 
-.pagination a {
-  display: flex;
-}
+  & a {
+    display: flex;
 
-.pagination a > svg {
-  stroke: var(--accent-color);
-  cursor: pointer;
-}
+    & > svg {
+      stroke: var(--accent-color);
+      cursor: pointer;
+    }
+  }
 
-.pagination span.disabled svg {
-  cursor: not-allowed;
-  stroke: color-mix(in srgb, var(--text-color), transparent 50%);
-  stroke-width: var(--stroke-width-default);
+  & span.disabled svg {
+    cursor: not-allowed;
+    stroke: color-mix(in srgb, var(--text-color), transparent 50%);
+    stroke-width: var(--stroke-width-default);
+  }
 }
\ No newline at end of file
diff --git a/src/assets/styles/components/share-button.css b/src/assets/styles/components/share-button.css
index 683b77b3..381cc6d9 100644
--- a/src/assets/styles/components/share-button.css
+++ b/src/assets/styles/components/share-button.css
@@ -1,19 +1,16 @@
 webcare-webshare {
   font-size: var(--font-size-sm);
   line-height: var(--line-height-xs);
-}
 
-webcare-webshare button {
-  color: var(--gray-dark);
-  background: transparent;
-  padding: 0;
-}
+  & button {
+    color: var(--gray-dark);
+    background: transparent;
+    padding: 0;
+    cursor: pointer;
 
-webcare-webshare button > svg {
-  stroke: var(--gray-dark) !important;
-}
-
-webcare-webshare button,
-webcare-webshare button > svg {
-  cursor: pointer;
+    & > svg {
+      stroke: var(--gray-dark) !important;
+      cursor: pointer;
+    }
+  }
 }
\ No newline at end of file
diff --git a/src/assets/styles/components/theme-toggle.css b/src/assets/styles/components/theme-toggle.css
index 576ba963..3e1136e8 100644
--- a/src/assets/styles/components/theme-toggle.css
+++ b/src/assets/styles/components/theme-toggle.css
@@ -1,37 +1,41 @@
 .theme__toggle {
   background: transparent;
   padding: 0;
+
+  & svg {
+    cursor: pointer;
+  }
+
+  &:hover,
+  & svg:hover {
+    stroke-width: var(--stroke-width-bold);
+  }
+
+  & > .light svg { stroke: var(--sun) !important; }
+  & > .dark svg { stroke: var(--moon) !important; }
+
+  & > .light ,
+  & > .dark {
+    display: none;
+  }
 }
 
-.theme__toggle svg {
-  cursor: pointer;
+.theme__dark {
+  & .theme__toggle > .light {
+    display: inline;
+  }
+
+  & .theme__toggle > .dark {
+    display: none;
+  }
 }
 
-.theme__toggle:hover,
-.theme__toggle svg:hover {
-  stroke-width: var(--stroke-width-bold);
-}
+.theme__light {
+  & .theme__toggle > .light {
+    display: none;
+  }
 
-.theme__toggle > .light svg { stroke: var(--sun) !important; }
-.theme__toggle > .dark svg { stroke: var(--moon) !important; }
-
-.theme__toggle > .light ,
-.theme__toggle > .dark {
-  display: none;
-}
-
-.theme__dark .theme__toggle > .light {
-  display: inline;
-}
-
-.theme__dark .theme__toggle > .dark {
-  display: none;
-}
-
-.theme__light .theme__toggle > .light {
-  display: none;
-}
-
-.theme__light .theme__toggle > .dark {
-  display: inline;
+  & .theme__toggle > .dark {
+    display: inline;
+  }
 }
\ No newline at end of file
diff --git a/src/assets/styles/components/track-chart.css b/src/assets/styles/components/track-chart.css
index 1a0d7cd1..096db5d3 100644
--- a/src/assets/styles/components/track-chart.css
+++ b/src/assets/styles/components/track-chart.css
@@ -1,5 +1,14 @@
 .track__chart--item {
   justify-content: space-between;
+
+  &:not(:last-of-type) {
+    margin-bottom: var(--sizing-md);
+  }
+
+  & .progress-bar__wrapper {
+    max-width: 40%;
+    margin-left: var(--sizing-lg);
+  }
 }
 
 .track__chart--item,
@@ -9,15 +18,6 @@
   align-items: center;
 }
 
-.track__chart--item:not(:last-of-type) {
-  margin-bottom: var(--sizing-md);
-}
-
-.track__chart--item .progress-bar__wrapper {
-  max-width: 40%;
-  margin-left: var(--sizing-lg);
-}
-
 .track__chart--presentation {
   display: flex;
   flex-direction: row;
@@ -49,15 +49,17 @@
   line-height: var(--line-height-sm);
 }
 
-.track__chart--item img {
-  border: 1px solid var(--accent-color);
-  border-radius: var(--rounded);
-}
+.track__chart--item {
+  & img {
+    border: 1px solid var(--accent-color);
+    border-radius: var(--rounded);
+  }
 
-.track__chart--item img,
-.track__chart--item picture {
-  width: calc(var(--sizing-3xl) * 1.5);
-  height: calc(var(--sizing-3xl) * 1.5);
+  & img,
+  & picture {
+    width: calc(var(--sizing-3xl) * 1.5);
+    height: calc(var(--sizing-3xl) * 1.5);
+  }
 }
 
 .track__chart--meta {
diff --git a/src/assets/styles/partials/animations.css b/src/assets/styles/defaults/animations.css
similarity index 100%
rename from src/assets/styles/partials/animations.css
rename to src/assets/styles/defaults/animations.css
diff --git a/src/assets/styles/partials/fonts.css b/src/assets/styles/defaults/fonts.css
similarity index 100%
rename from src/assets/styles/partials/fonts.css
rename to src/assets/styles/defaults/fonts.css
diff --git a/src/assets/styles/partials/vars.css b/src/assets/styles/defaults/vars.css
similarity index 100%
rename from src/assets/styles/partials/vars.css
rename to src/assets/styles/defaults/vars.css
diff --git a/src/assets/styles/index.css b/src/assets/styles/index.css
index c4214ac7..9de060f3 100644
--- a/src/assets/styles/index.css
+++ b/src/assets/styles/index.css
@@ -1,556 +1,41 @@
-body,
-html {
-  color: var(--text-color);
-  font-family: var(--font-sans);
-  font-size: var(--font-size-base);
-  line-height: var(--line-height-base);
-  background: var(--background-color);
-  margin: 0;
-}
-
-::-moz-selection {
-  color: var(--color-lightest);
-  background: var(--selection-color);
-}
-
-::selection {
-  color: var(--color-lightest);
-  background: var(--selection-color);
-}
-
-/* scrollbars */
-body,
-html {
-  scrollbar-width: thin;
-  scrollbar-color: var(--accent-color) var(--gray-light);
-}
-
-::-webkit-scrollbar {
-  width: var(--sizing-xs);
-  height: var(--sizing-xs);
-}
-
-body::-webkit-scrollbar {
-  width: var(--sizing-md);
-  height: var(--sizing-md);
-}
-
-::-webkit-scrollbar-thumb {
-  background: var(--accent-color);
-  border-radius: var(--rounded-full);
-}
-
-::-webkit-scrollbar-track {
-  background-color: var(--gray-light);
-}
-
-::-webkit-scrollbar-button {
-  background-color: var(--accent-color);
-  border-radius: var(--rounded);
-}
-
-p,
-blockquote {
-  line-height: var(--line-height-lg);
-  margin: var(--sizing-base) 0;
-}
-
-blockquote {
-  font-size: var(--font-size-lg);
-  padding-left: var(--sizing-lg);
-  color: var(--gray-dark);
-  border-left: var(--sizing-xs) solid var(--gray-dark);
-  word-break: break-word;
-}
-
-:is(body, html, nav .tags, nav .search) svg {
-  stroke: var(--text-color);
-}
-
-:is(h1, h2, h3, h4, h5, h6) > svg {
-  margin-right: var(--sizing-xs);
-  stroke-width: var(--stroke-width-bold) !important;
-}
-
-sup.footnote-ref {
-  line-height: var(--line-height-xs);
-}
-
-strong,
-blockquote {
-  font-weight: var(--font-weight-bold);
-}
-
-em,
-blockquote {
-  font-style: italic;
-}
-
-/* links */
-a {
-  text-decoration: none;
-}
-
-a,
-.active {
-  color: var(--accent-color);
-}
-
-a:hover,
-a:focus,
-a:active,
-:is(.main__title, footer nav:last-child) a:hover,
-:is(.main__title, footer nav:last-child) a:focus,
-:is(.main__title, footer nav:last-child) a:active {
-  color: var(--accent-color-hover);
-  transition-property: color;
-  transition-timing-function: var(--transition-ease-in-out);
-  transition-duration: var(--transition-duration-default);
-}
-
-:is(
-    a:has(svg):hover,
-    a:has(svg):active,
-    a:has(svg):focus,
-    button:has(svg):hover,
-    button:has(svg):active,
-    button:has(svg):focus
-) svg {
-  stroke: var(--accent-color-hover);
-}
-
-/* headers */
-h1, h2, h3, h4, h5, h6 {
-  font-weight: var(--font-weight-bold);
-}
-
-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-sm) }
-
-hr {
-  height: 1px;
-  background-color: var(--gray-light);
-  border: 0;
-}
-
-hr.large__spacing {
-  margin: var(--sizing-base) 0;
-}
-
-/* tables */
-table {
-  display: block;
-  overflow-x: scroll;
-  width: 100%;
-  max-width: fit-content;
-  margin: 0 auto;
-  white-space: nowrap;
-  border-radius: var(--rounded);
-  border: 1px solid var(--gray-light);
-}
-
-table,
-th,
-td {
-  border-collapse: collapse;
-}
-
-:is(th, td):not(:last-child) {
-  border-right: 1px solid var(--gray-light);
-}
-
-th,
-tr:not(:last-child) {
-  border-bottom: 1px solid var(--gray-light);
-}
-
-th,
-td {
-  padding: var(--sizing-sm);
-  min-width: calc(var(--sizing-3xl) * 2);
-  word-break: break-word;
-}
-
-th {
-  font-weight: var(--font-weight-bold);
-  background-color: var(--gray-lighter);
-  text-align: left;
-}
-
-/* header */
-.main__title {
-  width: 100%;
-  padding-top: var(--sizing-3xl);
-  display: flex;
-  flex-direction: column;
-}
-
-.main__title h1 {
-  line-height: 1.25;
-  margin: 0;
-  padding-bottom: var(--sizing-md);
-  font-size: var(--font-size-2xl);
-  line-height: var(--line-height-2xl);
-}
-
-/* nav */
-nav.menu__primary {
-  gap: var(--sizing-md);
-}
-
-nav.menu__primary a,
-nav.menu__primary span {
-  height: var(--sizing-xl);
-}
-
-:is(a:hover, a:active, a:focus) svg,
-a svg:hover,
-a svg:active,
-a svg:focus,
-button:hover svg,
-button svg:hover,
-.icon--bold > svg {
-  stroke-width: var(--stroke-width-bold);
-}
-
-.active,
-.active svg {
-  cursor: not-allowed;
-}
-
-a svg,
-nav .active svg,
-nav ul li .active svg {
-  stroke: var(--accent-color);
-}
-
-.active:hover svg,
-.active svg:hover,
-nav ul li .active:hover svg,
-nav ul li .active svg:hover {
-  stroke-width: var(--stroke-width-default);
-}
-
-/* social icons */
-.at svg { stroke: var(--brand-hey) !important; }
-.brand-github svg { stroke: var(--brand-github) !important; }
-.brand-npm svg { stroke: var(--brand-npm) !important; }
-.brand-mastodon svg { stroke: var(--brand-mastodon) !important; }
-.brand-lastfm svg { stroke: var(--brand-lastfm) !important; }
-.device-tv svg { stroke: var(--brand-trakt) !important; }
-.books svg { stroke: var(--brand-storygraph) !important; }
-.coffee 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 {
-  padding-top: var(--sizing-3xl);
-}
-
-.main__wrapper {
-  min-height: 100vh;
-  display: flex;
-  flex-direction: column;
-}
-
-main {
-  flex: 1 1 0%;
-  width: 80%;
-  margin-left: auto;
-  margin-right: auto;
-}
-
-/* now */
-.now__topper,
-article {
-  border-bottom: 1px solid var(--gray-light);
-  margin-bottom: var(--sizing-base);
-}
-
-.now__topper p:first-child {
-  margin-top: 0;
-}
-
-footer nav:first-child {
-  gap: var(--sizing-sm);
-  margin-top: var(--sizing-3xl);
-  padding: var(--sizing-3xl) 0 var(--sizing-lg);
-  width: 100%;
-}
-
-footer nav:first-child svg {
-  margin-top: 0;
-}
-
-footer nav:first-child a {
-  width: var(--sizing-xl);
-  height: var(--sizing-xl);
-}
-
-footer nav:last-child {
-  font-size: var(--font-size-sm);
-  line-height: var(--line-height-sm);
-  padding-bottom: var(--sizing-3xl);
-}
-
-footer nav:last-child span:not(.active) {
-  margin-left: var(--sizing-xs);
-  margin-right: var(--sizing-xs);
-}
-
-:is(.main__title, footer nav:last-child) a {
-  color: var(--text-color);
-}
-
-.highlight-text {
-  color: var(--color-lightest);
-  background-color: var(--accent-color);
-  padding: var(--sizing-xs);
-}
-
-code {
-  padding: var(--sizing-xs);
-  color: var(--text-color-inverted);
-  background-color: var(--background-color-inverted);
-}
-
-/* articles */
-article h2 {
-  color: var(--text-color);
-  line-height: var(--line-height-2xl);
-  margin: 0 0 var(--sizing-lg);
-  transition-property: color;
-}
-
-article a h2:hover,
-article a h2:focus,
-article a h2:active {
-  color: var(--accent-color-hover);
-  transition-timing-function: var(--transition-ease-in-out);
-  transition-duration: var(--transition-duration-default);
-}
-
-article [rel="author"],
-article time {
-  color: var(--gray-dark);
-  font-size: var(--font-size-sm);
-  line-height: var(--line-height-sm);
-  margin-right: var(--sizing-xs);
-}
-
-article [rel="author"] {
-  margin-bottom: var(--sizing-xs);
-}
-
-article p:first-of-type {
-  margin-top: var(--sizing-sm);
-}
-
-.tag {
-  margin-bottom: var(--sizing-lg);
-  display: inline-block;
-}
-
-.tag:not(:last-child) {
-  margin-right: var(--sizing-lg);
-}
-
-/* buttons */
-button {
-  appearance: none;
-  border: none;
-}
-
-/* icons */
-svg {
-  stroke-width: var(--stroke-width-default);
-}
-
-.icon--small > svg {
-  width: var(--sizing-lg);
-  height: var(--sizing-lg);
-}
-
-.icon--center__vertical > svg {
-  display: inline;
-  vertical-align: middle;
-}
-
-/* lists */
-ul, ol {
-  list-style-position: inside;
-  margin: var(--sizing-base) 0;
-  padding-left: var(--sizing-base);
-}
-
-li {
-  margin-top: var(--sizing-lg);
-  margin-bottom: var(--sizing-lg);
-}
-
-.link__list li {
-  margin-top: var(--sizing-sm);
-  margin-bottom: var(--sizing-sm);
-}
-
-.link__list,
-.link__list li:last-child {
-  margin-bottom: 0;
-}
-
-/* images */
-.image__banner {
-  border: 1px solid var(--accent-color);
-  border-radius: var(--rounded);
-  height: auto;
-}
-
-.image__banner,
-.image__banner > * {
-  display: block;
-  width: 100%;
-}
-
-.image__banner > * {
-  height: auto;
-}
-
-/* pages */
-.page__header {
-  font-size: var(--font-size-2xl);
-  line-height: var(--line-height-2xl);
-  margin-top: 0;
-}
-
-/* selects */
-select {
-  appearance: none;
-  background-color: transparent;
-  margin: 0;
-  width: 100%;
-  z-index: 1;
-  outline: none;
-  appearance: none;
-  border: none;
-  color: var(--color-lightest);
-  cursor: pointer;
-  font-size: var(--font-size-base);
-  font-weight: var(--font-weight-bold);
-  line-height: var(--line-height-base);
-}
-
-.select,
-select-pagination {
-  border-radius: var(--rounded-full);
-  background-color: var(--accent-color);
-  padding: 0 var(--sizing-lg);
-  display: grid;
-  align-items: center;
-  position: relative;
-  text-align: center;
-  text-align-last: center;
-  -moz-text-align-last: center;
-}
-
-.select,
-.select select,
-select-pagination,
-select-pagination select {
-  min-width:  calc(var(--sizing-3xl) * 4);
-  padding-top: var(--sizing-xs);
-  padding-bottom: var(--sizing-xs);
-}
-
-.select select,
-.select::after,
-select-pagination select,
-select-pagination::after {
-  grid-area: select;
-}
-
-.select::after,
-select-pagination::after {
-  content: '';
-  width: var(--sizing-md);
-  height: var(--sizing-sm);
-  display: inline-block;
-  background-color: var(--color-lightest);
-  clip-path: polygon(100% 0%, 0 0%, 50% 100%);
-  justify-self: end;
-}
-
-/* utilities */
-.hidden {
-  display: none !important;
-}
-
-.text--centered {
-  text-align: center !important;
-}
-
-.text--small {
-  font-size: var(--font-size-sm) !important;
-  line-height: var(--line-height-sm) !important;
-}
-
-.flex--centered {
-  display: flex;
-  flex-direction: row;
-  align-items: center;
-}
-
-.justify--centered {
-  justify-content: center;
-}
-
-.flex--wrap {
-  flex-wrap: wrap
-}
-
-/* screens: md */
-@media screen and (min-width: 768px) {
-  .main__title {
-    flex-direction: row;
-    align-items: center;
-    justify-content: space-between;
-  }
-
-  .main__title h1 {
-    padding-bottom: 0;
-  }
-
-  main {
-    max-width: 768px;
-  }
-
-  .main__title h1,
-  .page__header {
-    font-size: var(--font-size-3xl);
-    line-height: var(--line-height-3xl);
-  }
-
-  article h2 {
-    margin: 0 0 var(--sizing-xs);
-  }
-
-  article p:first-of-type {
-    margin-top: var(--sizing-md);
-  }
-
-  .tag {
-    margin-bottom: var(--sizing-sm);
-  }
-
-  .tag:not(:last-child) {
-    margin-right: var(--sizing-sm);
-  }
-
-  footer nav:first-child {
-    gap: var(--sizing-md);
-  }
-}
+@layer reset, defaults, base, page, components, plugins;
+
+/* style resets */
+@import url('./reset.css') layer(reset);
+
+/* core defaults */
+@import url('./defaults/fonts.css') layer(defaults);
+@import url('./defaults/vars.css') layer(defaults);
+@import url('./defaults/animations.css') layer(defaults);
+
+ /* base styles */
+@import url('./base/index.css') layer(base);
+
+/* plugins */
+@import url('./plugins/prism.css') layer(plugins);
+
+/* page styles */
+@import url('./pages/404.css') layer(page);
+@import url('./pages/about.css') layer(page);
+@import url('./pages/blogroll.css') layer(page);
+@import url('./pages/contact.css') layer(page);
+@import url('./pages/links.css') layer(page);
+@import url('./pages/now.css') layer(page);
+@import url('./pages/post.css') layer(page);
+@import url('./pages/webrings.css') layer(page);
+
+/* component styles */
+@import url('./components/addon-links.css') layer(components);
+@import url('./components/badge-grid.css') layer(components);
+@import url('./components/banners.css') layer(components);
+@import url('./components/buttons.css') layer(components);
+@import url('./components/forms.css') layer(components);
+@import url('./components/link-peek.css') layer(components);
+@import url('./components/mastodon-post.css') layer(components);
+@import url('./components/media-grid.css') layer(components.media);
+@import url('./components/paginator.css') layer(components);
+@import url('./components/post-graph.css') layer(components);
+@import url('./components/progress-bar.css') layer(components.media);
+@import url('./components/share-button.css') layer(components);
+@import url('./components/theme-toggle.css') layer(components);
+@import url('./components/track-chart.css') layer(components.media);
\ No newline at end of file
diff --git a/src/assets/styles/pages/404.css b/src/assets/styles/pages/404.css
index 2417b9a3..7aff2797 100644
--- a/src/assets/styles/pages/404.css
+++ b/src/assets/styles/pages/404.css
@@ -1,3 +1,9 @@
-.four-oh-four__wrapper .image__banner {
-  margin-bottom: var(--sizing-base);
+.four-oh-four__wrapper {
+  & .image__banner {
+    margin-bottom: var(--sizing-base);
+  }
+
+  & .page__header {
+    margin-bottom: var(--sizing-xs);
+  }
 }
\ No newline at end of file
diff --git a/src/assets/styles/pages/about.css b/src/assets/styles/pages/about.css
index 09776c75..e19924a9 100644
--- a/src/assets/styles/pages/about.css
+++ b/src/assets/styles/pages/about.css
@@ -5,28 +5,26 @@
 .avatar__wrapper {
   margin-bottom: var(--sizing-xl);
   width: 100%;
-}
-
-.avatar__wrapper .avatar__wrapper--interior {
-  width: var(--avatar-size);
-  height: var(--avatar-size);;
-  border: 1px solid var(--accent-color);
-  border-radius: var(--rounded-full);
-  display: flex;
-  padding: var(--sizing-lg);
-  background-color: var(--color-lightest);
-}
-
-.avatar__wrapper,
-.avatar__wrapper .avatar__wrapper--interior {
   justify-content: center;
   overflow: hidden;
-}
 
-.avatar__wrapper .avatar__wrapper--interior picture > *,
-.avatar__wrapper .avatar__wrapper--interior img {
-  width: 100%;
-  height: 100%;
+  & .avatar__wrapper--interior {
+    width: var(--avatar-size);
+    height: var(--avatar-size);;
+    border: 1px solid var(--accent-color);
+    border-radius: var(--rounded-full);
+    display: flex;
+    padding: var(--sizing-lg);
+    background-color: var(--color-lightest);
+    justify-content: center;
+    overflow: hidden;
+
+    & picture > *,
+    & img {
+      width: 100%;
+      height: 100%;
+    }
+  }
 }
 
 @media screen and (min-width: 768px) {
diff --git a/src/assets/styles/pages/blogroll.css b/src/assets/styles/pages/blogroll.css
index 577737ba..61d19ff7 100644
--- a/src/assets/styles/pages/blogroll.css
+++ b/src/assets/styles/pages/blogroll.css
@@ -1,11 +1,11 @@
 .blog--roll__icons {
   display: flex;
-  flex-direction: row;
+  flex-direction: row !important;
   gap: var(--sizing-xs);
-}
 
-.blog--roll__icons a {
-  display: flex;
-  flex-direction: column;
-  align-items: center;
+  & a {
+    display: flex;
+    flex-direction: column;
+    align-items: center;
+  }
 }
\ No newline at end of file
diff --git a/src/assets/styles/pages/contact.css b/src/assets/styles/pages/contact.css
index cc5ede3b..dc638ac0 100644
--- a/src/assets/styles/pages/contact.css
+++ b/src/assets/styles/pages/contact.css
@@ -1,27 +1,31 @@
 .contact__wrapper {
   display: flex;
   flex-direction: column;
+
+  & textarea {
+    height: calc(var(--sizing-3xl) * 5);
+    resize: none;
+  }
+
+  & .column.contact__description p:first-child {
+    margin-top: 0;
+  }
 }
 
-.contact__wrapper textarea {
-  height: calc(var(--sizing-3xl) * 5);
-  resize: none;
-}
-
-.contact__wrapper .column.contact__description p:first-child {
-  margin-top: 0;
+.contact__success--header {
+  margin: 0 0 var(--sizing-lg);
 }
 
 @media screen and (min-width: 768px) {
   .contact__wrapper {
     flex-direction: row;
-  }
 
-  .contact__wrapper .column {
-    width: 50%;
-  }
+    & .column {
+      width: 50%;
+    }
 
-  .contact__wrapper .column.contact__description {
-    padding-right: var(--sizing-xl);
+    & .column.contact__description {
+      padding-right: var(--sizing-xl);
+    }
   }
 }
\ No newline at end of file
diff --git a/src/assets/styles/pages/links.css b/src/assets/styles/pages/links.css
index 6665fb22..229a3be1 100644
--- a/src/assets/styles/pages/links.css
+++ b/src/assets/styles/pages/links.css
@@ -1,5 +1,4 @@
-.link__list {
-  padding-left: 0;
+.default__wrapper > .link__list {
   margin-top: 0;
   margin-bottom: var(--sizing-3xl);
 }
\ No newline at end of file
diff --git a/src/assets/styles/pages/now.css b/src/assets/styles/pages/now.css
index 19ea289f..9d464345 100644
--- a/src/assets/styles/pages/now.css
+++ b/src/assets/styles/pages/now.css
@@ -1,26 +1,25 @@
 /* now */
 .now__section--text {
   padding-left: var(--sizing-base);
+
+  & p {
+    margin: var(--sizing-xs) 0;
+
+    & > svg {
+      display: inline;
+      vertical-align: middle;
+      height: var(--sizing-base);
+      width: var(--sizing-base);
+    }
+  }
 }
 
-.now__section--text p {
-  margin: var(--sizing-xs) 0;
-}
-
-.now__section--text p > svg {
-  display: inline;
-  vertical-align: middle;
-  height: var(--sizing-base);
-  width: var(--sizing-base);
-}
-
-.now__section--header,
-.recent__links-header {
+.now__section--header {
   margin: var(--sizing-3xl) 0 var(--sizing-lg);
 }
 
 .default__wrapper > .now__section--header:first-of-type {
-  margin-top: 0;
+  margin-top: 0 !important;
 }
 
 .link__list {
@@ -31,10 +30,4 @@
   font-size: var(--font-size-xs);
   line-height: var(--line-height-xs);
   padding-top: var(--sizing-lg);
-}
-
-@media screen and (min-width: 768px) {
-  .now__section--text {
-    padding-left: var(--sizing-3xl);
-  }
 }
\ No newline at end of file
diff --git a/src/assets/styles/pages/post.css b/src/assets/styles/pages/post.css
index 57c91595..487f3cad 100644
--- a/src/assets/styles/pages/post.css
+++ b/src/assets/styles/pages/post.css
@@ -11,10 +11,10 @@ hr.footnotes-sep {
 .footnotes-list {
   margin-bottom: 0 !important;
   padding-left: 0 !important;
-}
 
-.footnotes-list li:last-child {
-  margin-bottom: 0;
+  & li:last-child {
+    margin-bottom: 0;
+  }
 }
 
 .footnotes {
diff --git a/src/assets/styles/pages/webrings.css b/src/assets/styles/pages/webrings.css
index 9ef4ea8f..a42ac05d 100644
--- a/src/assets/styles/pages/webrings.css
+++ b/src/assets/styles/pages/webrings.css
@@ -1,7 +1,11 @@
 .webring__wrapper {
   margin: var(--sizing-base) 0;
-}
 
-.webring__wrapper > .webring__centered {
-  justify-content: center;
+  h3 {
+    margin: var(--sizing-2xl) 0 var(--sizing-lg);
+  }
+
+  & > .webring__centered {
+    justify-content: center;
+  }
 }
\ No newline at end of file
diff --git a/src/assets/styles/reset.css b/src/assets/styles/reset.css
new file mode 100644
index 00000000..d7b1710b
--- /dev/null
+++ b/src/assets/styles/reset.css
@@ -0,0 +1,46 @@
+/*
+  1. Use a more-intuitive box-sizing model.
+*/
+*, *::before, *::after {
+  box-sizing: border-box;
+}
+/*
+  2. Remove default margin
+*/
+* {
+  margin: 0;
+}
+/*
+  Typographic tweaks!
+  3. Add accessible line-height
+  4. Improve text rendering
+*/
+body {
+  line-height: 1.5;
+  -webkit-font-smoothing: antialiased;
+}
+/*
+  5. Improve media defaults
+*/
+img, picture, video, canvas, svg {
+  display: block;
+  max-width: 100%;
+}
+/*
+  6. Remove built-in form typography styles
+*/
+input, button, textarea, select {
+  font: inherit;
+}
+/*
+  7. Avoid text overflows
+*/
+p, h1, h2, h3, h4, h5, h6 {
+  overflow-wrap: break-word;
+}
+/*
+  8. Create a root stacking context
+*/
+#root, #__next {
+  isolation: isolate;
+}
\ No newline at end of file
diff --git a/src/links.html b/src/links.html
index 07d0e675..e7e42b34 100644
--- a/src/links.html
+++ b/src/links.html
@@ -5,10 +5,6 @@ pagination:
   data: links
   size: 30
 ---
-{% capture css %}
-  {% render "./assets/styles/pages/links.css" %}
-{% endcapture %}
-<style>{{ css }}</style>
 <ul class="link__list">
   {% for link in pagination.items %}
     <li>
diff --git a/src/pages/404.html b/src/pages/404.html
index b6aa4866..7163cdd9 100644
--- a/src/pages/404.html
+++ b/src/pages/404.html
@@ -4,10 +4,6 @@ layout: default
 permalink: /404.html
 image: /assets/img/404.jpg
 ---
-{% capture css %}
-  {% render "../assets/styles/pages/404.css" %}
-{% endcapture %}
-<style>{{ css }}</style>
 <div class="four-oh-four__wrapper">
   {% image 'https://coryd.dev/.netlify/images/?url=/assets/img/404.jpg&w=1000', title, 'image__banner', 'eager' %}
   <div class="text--centered">
diff --git a/src/pages/about.md b/src/pages/about.md
index 572dfd7a..74cd4a92 100644
--- a/src/pages/about.md
+++ b/src/pages/about.md
@@ -6,10 +6,6 @@ permalink: /about.html
 {%- assign artist = music.artists | first -%}
 {%- assign book = books | first -%}
 {%- assign show = tv | first -%}
-{% capture css %}
-  {% render "../assets/styles/pages/about.css" %}
-{% endcapture %}
-<style>{{ css }}</style>
 <div class="avatar__wrapper flex--centered">
   <div class="avatar__wrapper--interior">
   {%- capture about_alt -%}{{ meta.siteName }} - image by David Neal / @reverentgeek{%- endcapture -%}
diff --git a/src/pages/contact-success.html b/src/pages/contact-success.html
index f6c24ab6..c7df048a 100644
--- a/src/pages/contact-success.html
+++ b/src/pages/contact-success.html
@@ -4,7 +4,7 @@ layout: default
 permalink: /contact/success.html
 ---
 <div class="text--centered">
-  <h2>{{ title }}</h2>
+  <h2 class="contact__success--header">{{ title }}</h2>
     I'll be in touch soon! <a href="/">Head home</a>
 </div>
 <hr class="large__spacing" />
diff --git a/src/pages/contact.md b/src/pages/contact.md
index f7848a36..b48fb0ab 100644
--- a/src/pages/contact.md
+++ b/src/pages/contact.md
@@ -4,12 +4,6 @@ layout: default
 permalink: /contact.html
 description: 'How to contact me.'
 ---
-{% capture css %}
-  {% render "../assets/styles/components/forms.css" %}
-  {% render "../assets/styles/components/buttons.css" %}
-  {% render "../assets/styles/pages/contact.css" %}
-{% endcapture %}
-<style>{{ css }}</style>
 <h2 class="page__header">{{ title }}</h2>
 <div class="contact__wrapper">
   <div class="column contact__description">
diff --git a/src/pages/search.html b/src/pages/search.html
index 6bae31c0..b5185e61 100644
--- a/src/pages/search.html
+++ b/src/pages/search.html
@@ -4,10 +4,6 @@ description: "Search through and find the posts on my site."
 layout: default
 permalink: /search.html
 ---
-{% capture css %}
-{% render "../assets/styles/components/forms.css" %}
-{% endcapture %}
-<style>{{ css }}</style>
 <script src="/assets/scripts/components/minisearch.js"></script>
 <script type="module">
   (() => {
diff --git a/src/pages/webrings.md b/src/pages/webrings.md
index 32a750ac..7933e999 100644
--- a/src/pages/webrings.md
+++ b/src/pages/webrings.md
@@ -4,10 +4,6 @@ layout: default
 permalink: /webrings.html
 description: "Webrings are awesome! These are the ones I'm a member of."
 ---
-{% capture css %}
-  {% render "../assets/styles/pages/webrings.css" %}
-{% endcapture %}
-<style>{{ css }}</style>
 <h2
 class="m-0 text-xl font-black leading-tight tracking-normal dark:text-white md:text-2xl mb-2"
 >
diff --git a/src/posts/2023/2023-in-review.html b/src/posts/2023/2023-in-review.html
index 6721be8a..965c41c0 100644
--- a/src/posts/2023/2023-in-review.html
+++ b/src/posts/2023/2023-in-review.html
@@ -18,7 +18,7 @@ tags: ['books', 'music', 'development', 'Eleventy']
   {% tablericon "books" "Favorite books" %}
   Favorite books
 </h2>
-{% render "partials/now/media-grid.liquid", data:roundups['2023'].books, shape: "vertical", count: 6, embeddedStyles: true %}
+{% render "partials/now/media-grid.liquid", data:roundups['2023'].books, shape: "vertical", count: 6 %}
 <h2 class="now__section--header flex--centered">
   {% tablericon "vinyl" "Favorite albums" %}
   Favorite books
diff --git a/src/posts/2023/optimizing-for-performance-with-eleventy.md b/src/posts/2023/optimizing-for-performance-with-eleventy.md
index c32246a8..ce5a789f 100644
--- a/src/posts/2023/optimizing-for-performance-with-eleventy.md
+++ b/src/posts/2023/optimizing-for-performance-with-eleventy.md
@@ -57,18 +57,7 @@ I use [Tailwind](https://tailwindcss.com) for CSS styles[^1] which is minified a
 ELEVENTY_PRODUCTION=true eleventy && NODE_ENV=production npx tailwindcss -i ./tailwind.css -c ./tailwind.config.js -o _site/assets/styles/tailwind.css --minify
 ```
 
-The site include's Prism for code syntax highlighting and this is embedded and minified in the `<head>` of each page at build time:
-{% raw %}
-
-```liquid
-{% capture css %}
-  {% include "../assets/styles/prism.css" %}
-{% endcapture %}
-<style>{{ css }}</style>
-```
-
-{% endraw %}
-This is made possible by leveraging CleanCSS in (you guessed it) `.eleventy.js`:
+The site include's Prism for code syntax highlighting and this is embedded and minified in the `<head>` of each page at build time. This is made possible by leveraging CleanCSS in (you guessed it) `.eleventy.js`:
 {% raw %}
 
 ```javascript
diff --git a/src/posts/2024/automatic-mastodon-post-embeds.md b/src/posts/2024/automatic-mastodon-post-embeds.md
index 8984f642..bba87448 100644
--- a/src/posts/2024/automatic-mastodon-post-embeds.md
+++ b/src/posts/2024/automatic-mastodon-post-embeds.md
@@ -35,10 +35,6 @@ This all lands in a `mastodon-post.liquid` partial that I render inside my post
 ```liquid
 {%- assign shareLink = postUrl | findPost: linkPosts -%}
 {%- if shareLink %}
-{% capture css %}
-  {% render "../../assets/styles/components/mastodon-post.css" %}
-{% endcapture %}
-<style>{{ css }}</style>
 <script type="module" src="/assets/scripts/components/mastodon-post.js"></script>
 <template id="mastodon-post-template">
   <div class="mastodon-post-wrapper">
diff --git a/src/posts/2024/building-a-theme-toggle-web-component.md b/src/posts/2024/building-a-theme-toggle-web-component.md
index c65a38b4..0271dd58 100644
--- a/src/posts/2024/building-a-theme-toggle-web-component.md
+++ b/src/posts/2024/building-a-theme-toggle-web-component.md
@@ -118,10 +118,6 @@ The final template that leverages the component looks like this:
 {% raw %}
 ```liquid
 <script type="module" src="/assets/scripts/components/theme-toggle.js"></script>
-{% capture css %}
-  {% render "../../../assets/styles/components/theme-toggle.css" %}
-{% endcapture %}
-<style>{{ css }}</style>
 <template id="theme-toggle-template">
   <button class="theme__toggle">
     <span class="light">