From 67fcfdb051f76a174c4b80c398051d5ce4593b40 Mon Sep 17 00:00:00 2001
From: Cory Dransfeldt <hi@coryd.dev>
Date: Tue, 2 Jan 2024 13:49:47 -0800
Subject: [PATCH] chore: split out styles + only load where needed

---
 src/_includes/now.liquid                      |   6 +
 src/_includes/partials/now/media-grid.liquid  |   6 +
 .../partials/now/progress-bar.liquid          |   6 +
 src/_includes/partials/paginator.liquid       |   6 +
 src/_includes/partials/popular-posts.liquid   |   6 +
 .../partials/webmentions/container.liquid     |   6 +
 src/_includes/post.liquid                     |   1 +
 src/assets/styles/index.css                   | 473 +-----------------
 src/assets/styles/pages/404.css               |   7 +
 src/assets/styles/pages/about.css             |  32 ++
 src/assets/styles/pages/contact.css           |  28 ++
 src/assets/styles/pages/now.css               |  37 ++
 src/assets/styles/pages/post.css              |  26 +
 src/assets/styles/pages/webrings.css          |   8 +
 src/assets/styles/widgets/forms.css           |  37 ++
 src/assets/styles/widgets/media-grid.css      | 101 ++++
 src/assets/styles/widgets/paginator.css       |  26 +
 src/assets/styles/widgets/popular-posts.css   |   4 +
 src/assets/styles/widgets/post-graph.css      |   6 +
 src/assets/styles/widgets/progress-bar.css    |  24 +
 src/assets/styles/widgets/webmentions.css     | 120 +++++
 src/pages/404.html                            |   6 +
 src/pages/about.md                            |   6 +
 src/pages/contact.md                          |   7 +
 src/pages/search.html                         |   1 +
 src/pages/webrings.md                         |   7 +-
 26 files changed, 539 insertions(+), 454 deletions(-)
 create mode 100644 src/assets/styles/pages/404.css
 create mode 100644 src/assets/styles/pages/about.css
 create mode 100644 src/assets/styles/pages/contact.css
 create mode 100644 src/assets/styles/pages/now.css
 create mode 100644 src/assets/styles/pages/post.css
 create mode 100644 src/assets/styles/pages/webrings.css
 create mode 100644 src/assets/styles/widgets/forms.css
 create mode 100644 src/assets/styles/widgets/media-grid.css
 create mode 100644 src/assets/styles/widgets/paginator.css
 create mode 100644 src/assets/styles/widgets/popular-posts.css
 create mode 100644 src/assets/styles/widgets/progress-bar.css
 create mode 100644 src/assets/styles/widgets/webmentions.css

diff --git a/src/_includes/now.liquid b/src/_includes/now.liquid
index 5bd2144a..e03a8b18 100644
--- a/src/_includes/now.liquid
+++ b/src/_includes/now.liquid
@@ -1,6 +1,12 @@
 ---
 layout: default
 ---
+{% capture css %}
+  {% render "../assets/styles/pages/now.css" %}
+{% endcapture %}
+<style>
+  {{ css | cssmin }}
+</style>
 {{ content }}
 {% render "partials/now/media-grid.liquid", data:artists, icon: "microphone-2", title: "Artists", shape: "square", count: 8, loading: 'eager' %}
 {% render "partials/now/media-grid.liquid", data:albums, icon: "vinyl", title: "Albums", shape: "square", count: 8 %}
diff --git a/src/_includes/partials/now/media-grid.liquid b/src/_includes/partials/now/media-grid.liquid
index 72722018..08240b72 100644
--- a/src/_includes/partials/now/media-grid.liquid
+++ b/src/_includes/partials/now/media-grid.liquid
@@ -1,4 +1,10 @@
 {% if data.size > 0 %}
+  {% capture css %}
+    {% render "../../../assets/styles/widgets/media-grid.css" %}
+  {% endcapture %}
+  <style>
+    {{ css | cssmin }}
+  </style>
   {% assign media = data | normalizeMedia %}
   <h2 class="now__section--header flex--centered">
     {% tablericon icon title %}
diff --git a/src/_includes/partials/now/progress-bar.liquid b/src/_includes/partials/now/progress-bar.liquid
index 71a85feb..2969c421 100644
--- a/src/_includes/partials/now/progress-bar.liquid
+++ b/src/_includes/partials/now/progress-bar.liquid
@@ -1,4 +1,10 @@
 {% if percentage %}
+{% capture css %}
+  {% render "../../../assets/styles/widgets/media-grid.css" %}
+{% endcapture %}
+<style>
+  {{ css | cssmin }}
+</style>
 <div class="progress-bar__wrapper">
   <div style="width:{{ percentage }}" class="progress-bar shadow-none flex flex-col whitespace-nowrap justify-center bg-blue-600 dark:bg-blue-400"></div>
 </div>
diff --git a/src/_includes/partials/paginator.liquid b/src/_includes/partials/paginator.liquid
index bbb14296..02081718 100644
--- a/src/_includes/partials/paginator.liquid
+++ b/src/_includes/partials/paginator.liquid
@@ -1,3 +1,9 @@
+{% capture css %}
+  {% render "../../assets/styles/widgets/paginator.css" %}
+{% endcapture %}
+<style>
+  {{ css | cssmin }}
+</style>
 <nav class="pagination flex--centered">
   {% if pagination.href.previous %}
     <a href="{{ pagination.href.previous }}">
diff --git a/src/_includes/partials/popular-posts.liquid b/src/_includes/partials/popular-posts.liquid
index 5fa91046..efe980bb 100644
--- a/src/_includes/partials/popular-posts.liquid
+++ b/src/_includes/partials/popular-posts.liquid
@@ -1,3 +1,9 @@
+{% capture css %}
+  {% render "../../assets/styles/widgets/popular-posts.css" %}
+{% endcapture %}
+<style>
+  {{ css | cssmin }}
+</style>
 {% assign posts = posts | getPopularPosts: analytics %}
 <div class="popular-posts">
   <h2 class="flex--centered">
diff --git a/src/_includes/partials/webmentions/container.liquid b/src/_includes/partials/webmentions/container.liquid
index 88465392..6ca4f44a 100644
--- a/src/_includes/partials/webmentions/container.liquid
+++ b/src/_includes/partials/webmentions/container.liquid
@@ -1,5 +1,11 @@
 {% assign mentions = webmentions.mentions | webmentionsByUrl: page.url %}
 {% if mentions %}
+  {% capture css %}
+    {% render "../../../assets/styles/widgets/webmentions.css" %}
+  {% endcapture %}
+  <style>
+    {{ css | cssmin }}
+  </style>
   <div class="webmentions">
     {% render "partials/webmentions/interaction.liquid", mentions: mentions, type: 'repost-of' %}
     {% render "partials/webmentions/interaction.liquid", mentions: mentions, type: 'like-of' %}
diff --git a/src/_includes/post.liquid b/src/_includes/post.liquid
index 9adcce67..2f149ed4 100644
--- a/src/_includes/post.liquid
+++ b/src/_includes/post.liquid
@@ -5,6 +5,7 @@ schema: blog
 {% render "partials/header.liquid", meta: meta, page: page, nav: nav %}
 {% capture css %}
   {% render "../assets/styles/plugins/prism.css" %}
+  {% render "../assets/styles/pages/post.css" %}
 {% endcapture %}
 <style>
   {{ css | cssmin }}
diff --git a/src/assets/styles/index.css b/src/assets/styles/index.css
index 47601328..6fa906d4 100644
--- a/src/assets/styles/index.css
+++ b/src/assets/styles/index.css
@@ -34,6 +34,11 @@ blockquote {
   stroke: var(--black); 
 }
 
+:is(h1, h2, h3, h4, h5, h6, .pill--button) > svg {
+  margin-right: .25rem;
+  stroke-width: var(--stroke-width-bold) !important;
+}
+
 /* links */
 a {
   color: var(--blue-600);
@@ -64,8 +69,7 @@ a svg {
 }
 
 strong,
-.pill--button,
-.media__grid .item__meta-text .header {
+.pill--button {
   font-weight: 700;
 }
 
@@ -91,8 +95,7 @@ hr {
   border: 0;
 }
 
-hr.large__spacing,
-hr.footnotes-sep {
+hr.large__spacing {
   margin: 2.5rem 0;
 }
 
@@ -195,23 +198,6 @@ article {
   margin-bottom: 1rem;
 }
 
-.pagination button {
-  background: none;
-  padding-left: 0;
-  padding-right: 0;
-}
-
-.pagination button > svg {
-  cursor: pointer;
-}
-
-.pagination button.disabled > svg {
-  opacity: .5;
-  cursor: not-allowed;
-  stroke: var(--black);
-  stroke-width: var(--stroke-width-default);
-}
-
 footer nav:first-child {
   gap: 0.5rem;
   margin-top: 2rem;
@@ -264,10 +250,6 @@ code {
   flex-direction: row;
 }
 
-.pill--button > svg {
-  stroke: var(--white);
-}
-
 .pill--button.pill--button__small {
   padding: .25rem .5rem;
   margin-right: .5rem;
@@ -283,10 +265,14 @@ code {
   background-color: var(--blue-800) !important;
 }
 
+.pill--button > svg,
 .pill--button svg:hover,
 .pill--button svg:active,
-.pill--button svg:focus {
-  stroke: var(--white);
+.pill--button svg:focus,
+.pill--button:hover svg,
+.pill--button:active svg,
+.pill--button:focus svg {
+  stroke: var(--white) !important;
 }
 
 /* articles */
@@ -300,10 +286,6 @@ article time {
   line-height: var(--line-height-sm);
 }
 
-.eleventy-plugin-youtube-embed {
-  margin-bottom: 1rem;
-}
-
 /* icons */
 svg {
   stroke-width: var(--stroke-width-default);
@@ -328,15 +310,6 @@ li {
   margin-bottom: .5rem;
 }
 
-.footnotes-list {
-  margin-bottom: 0 !important;
-  padding-left: 0 !important;
-}
-
-.footnotes-list li:last-child {
-  margin-bottom: 0;
-}
-
 /* images */
 .image__banner {
   border: 1px solid var(--blue-600);
@@ -353,148 +326,6 @@ li {
   height: auto;
 }
 
-/* about */
-.avatar__wrapper {
-  width: 100%;
-  margin-bottom: 1.5rem;
-}
-
-.avatar__wrapper .avatar__wrapper--interior {
-  width: 16rem;
-  height: 16rem;
-  border: 1px solid var(--blue-600);
-  border-radius: var(--rounded-full);
-  display: flex;
-  padding: 1rem;
-  background-color: var(--white);
-}
-
-.avatar__wrapper .avatar__wrapper--interior > * {
-  width: 100%;
-  height: 100%;
-}
-
-/* contact */
-.contact__wrapper textarea {
-  height: 10rem;
-  resize: none;
-}
-
-.contact__wrapper .column.contact__description {
-  margin-bottom: 1.5rem;
-}
-
-.contact__wrapper .column.contact__description p:first-child {
-  margin-top: 0;
-}
-
-/* now */
-.now__section--text {
-  padding-left: 1rem;
-}
-
-.now__section--text p {
-  margin-top: .25rem;
-  margin-bottom: .25rem;
-}
-
-.now__section--text p > svg {
-  vertical-align: middle;
-  height: 1.25rem;
-  width: 1.25rem;
-}
-
-.now__section--header,
-article .now__section--header {
-  margin-top: 2rem;
-  margin-bottom: 1rem;
-}
-
-.now__section--header:first-of-type {
-  margin-top: 0;
-}
-
-.now__explainer {
-  font-size: var(--font-size-xs);
-  line-height: var(--line-height-xs);
-  padding-top: 1rem;
-}
-
-.media__grid {
-  display: grid;
-  gap: .5rem;
-}
-
-.media__grid.square {
-  grid-template-columns: repeat(2,minmax(0,1fr));
-}
-
-.media__grid.vertical {
-  grid-template-columns: repeat(3,minmax(0,1fr));
-}
-
-.media__grid.vertical .item__wrapper {
-  max-width: 193px;
-}
-
-.media__grid .item__wrapper {
-  position: relative;
-  height: 100%;
-  width: 100%;
-  border: 1px solid var(--blue-600);
-  border-radius: var(--rounded-lg);
-}
-
-.media__grid .item__wrapper:hover {
-  border-color: var(--blue-800)
-}
-
-.media__grid .item__cover {
-  position: absolute;
-  top: 0;
-  left: 0;
-  width: 100%;
-  height: 100%;
-  border-radius: var(--rounded-sm);
-}
-
-.media__grid .item__cover.gradient {
-  background-image: linear-gradient(180deg,transparent 0,rgba(0,0,0,.15) 70%,rgba(0,0,0,.75));
-}
-
-.media__grid .item__meta-text {
-  position: absolute;
-  padding: 0 .375rem;
-  width: 90%;
-  bottom: .375rem;
-}
-
-.media__grid .item__meta-text .header,
-.media__grid .item__meta-text .subheader {
-  font-size: var(--font-size-xs);
-  line-height: var(--line-height-xs);
-  overflow: visible;
-  display: -webkit-box;
-  text-shadow: rgba(0, 0, 0, 0.7) 0px 0px 10px;
-  -webkit-box-orient: vertical;
-  -webkit-line-clamp: 2;
-}
-
-.media__grid .item__image,
-.media__grid .item__image > * {
-  width: 100%;
-  height: 100%;
-}
-
-/* 404 */
-.four-oh-four__wrapper .image__banner {
-  margin-bottom: 1.25rem;
-}
-
-.four-oh-four__wrapper a {
-  margin-bottom: 1.25rem;
-}
-
 /* pages */
 .page__header {
   font-size: var(--font-size-2xl);
@@ -502,150 +333,6 @@ article .now__section--header {
   margin-top: 0;
 }
 
-/* widgets */
-.popular-posts h2 {
-  margin-top: 2rem;
-  margin-bottom: 1rem;
-}
-
-.webmentions {
-  border-top: 1px solid var(--gray-200);
-  border-bottom: 1px solid var(--gray-200);
-  margin-top: 1.5rem;
-  margin-bottom: 3.25rem;
-  padding-top: 1rem;
-  padding-bottom: 1rem;
-}
-
-.webmentions .interaction.comments {
-  flex-direction: column;
-}
-
-.webmentions .interaction {
-  cursor: pointer;
-  margin-top: 1rem;
-  margin-bottom: 1.5rem;
-}
-
-.webmentions .interaction .comment__wrapper {
-  width: 100%;
-  padding-bottom: 1rem;
-}
-
-.webmentions .interaction .comment__wrapper:last-child {
-  padding-bottom: 0;
-}
-
-.webmentions .interaction .avatar__wrapper:hover,
-.webmentions .interaction .comment__wrapper:hover .avatar__wrapper {
-  border-color: var(--blue-800);
-}
-
-.webmentions .interaction .comment__wrapper--interior .comment {
-  margin-left: .75rem;
-}
-
-.webmentions .interaction .comment__wrapper--interior .comment a {
-  color: var(--black);
-  text-decoration: none;
-}
-
-.webmentions .interaction .comment__wrapper--interior .comment p {
-  font-size: var(--font-size-sm);
-  line-height: var(--line-height-sm);
-  margin: 0;
-}
-
-.webmentions .interaction .comment__wrapper--interior .comment time {
-  font-size: var(--font-size-xs);
-  line-height: var(--line-height-xs);
-  margin-top: .25rem;
-}
-
-.webmentions .interaction ul {
-  display: flex;
-  flex-direction: row;
-  flex-wrap: wrap;
-  margin: 0 0 0 .75rem;
-  padding: 0;
-  list-style: none;
-}
-
-.webmentions .interaction li {
-  margin-left: -.75rem;
-  height: 3.5rem;
-}
-
-.webmentions .interaction .avatar__wrapper {
-  background-color: var(--black);
-  width: 3.5rem;
-  height: 3.5rem;
-  margin-bottom: 0;
-  border-radius: var(--rounded-full);
-  border: 4px solid var(--white);
-}
-
-.webmentions .interaction .avatar__wrapper .avatar__wrapper-image > * {
-  width: 100%;
-  height: 100%;
-  border-radius: var(--rounded-full);
-}
-
-.webmentions .interaction .avatar__wrapper > picture {
-  align-items: center;
-}
-
-.progress-bar__wrapper {
-  display: flex;
-  background-color: rgba(217, 222, 228, .6);
-  border-radius: var(--rounded-lg);
-  height: 1rem;
-  width: 100%;
-  margin-top: .25rem;
-  margin-bottom: .25rem;
-}
-
-.progress-bar {
-  white-space: nowrap;
-  background-color: var(--blue-600);
-}
-
-.webring__wrapper {
-  margin-top: 3rem;
-  margin-bottom: 2.5rem;
-}
-
-.footnotes {
-  padding-bottom: 1.5rem;
-}
-
-/* inputs */
-input[type="text"],
-input[type="email"],
-textarea {
-  color: var(--black);
-  background-color: var(--white);
-  width: 100%;
-  border: 1px solid var(--blue-600);
-  padding: .5rem;
-  margin-bottom: 1.5rem;
-  font-weight: 400 !important;
-  font-size: var(--font-size-base);
-  line-height: var(--line-height-base);
-}
-
-input[type="text"],
-input[type="email"],
-textarea {
-  outline: none;
-}
-
-input[type="text"]:focus,
-input[type="email"]:focus,
-textarea:focus {
-  border: 1px solid var(--blue-800);
-}
-
 /* utilities */
 .hidden {
   display: none !important;
@@ -668,9 +355,7 @@ textarea:focus {
 /* shared styles */
 .main__title,
 .main__wrapper,
-.contact__wrapper,
-.webmentions .interaction .avatar__wrapper > picture,
-.progress-bar {
+.contact__wrapper {
   display: flex;
   flex-direction: column;
 }
@@ -680,63 +365,25 @@ code,
 .pill--button,
 .pill--button:hover,
 .pill--button:active,
-.pill--button:focus,
-.media__grid .item__meta-text .header,
-.media__grid .item__meta-text .subheader {
+.pill--button:focus {
   color: var(--white);
 }
 
 a,
-.webmentions .interaction .avatar__wrapper,
-.media__grid .item__wrapper,
-.pill--button,
-input[type="text"],
-input[type="email"],
-textarea {
+.pill--button {
   transition-timing-function: var(--ease-in-out);
   transition-duration: 300ms;
 }
 
-.webmentions .interaction .avatar__wrapper,
-.media__grid .item__wrapper,
-input[type="text"],
-input[type="email"],
-textarea {
-  transition-property: border-color;
-}
-
-.pagination,
-.webmentions .interaction .comment__wrapper--interior {
-  justify-content: space-between;
-}
-
-.now__section--text p > svg,
-.footnote-item > p {
-  display: inline;
-}
-
-.avatar__wrapper,
-.avatar__wrapper .avatar__wrapper--interior,
 .pill--button,
-.progress-bar,
-.webring__wrapper > .webring__centered,
 footer nav {
   justify-content: center;
 }
 
-.image__banner,
-.avatar__wrapper .avatar__wrapper--interior,
-.media__grid .item__wrapper,
-.webmentions .interaction .avatar__wrapper,
-.progress-bar__wrapper {
+.image__banner {
   overflow: hidden;
 }
 
-:is(h1, h2, h3, h4, h5, h6, .pill--button) > svg {
-  margin-right: .25rem;
-  stroke-width: var(--stroke-width-bold) !important;
-}
-
 /* screens: md */
 @media screen and (min-width: 768px) {
   .main__title {
@@ -756,11 +403,6 @@ footer nav {
     font-size: var(--font-size-2xl);
   }
 
-  .avatar__wrapper .avatar__wrapper--interior {
-    width: 24rem;
-    height: 24rem;
-  }
-
   main {
     max-width: 768px;
   }
@@ -778,37 +420,6 @@ footer nav {
   footer nav:first-child {
     gap: .75rem;
   }
-
-  /* now */
-  .now__section--text {
-    padding-left: 2rem;
-  }
-
-  .media__grid.square {
-    grid-template-columns: repeat(4,minmax(0,1fr));
-  }
-
-  .media__grid.vertical {
-    grid-template-columns: repeat(6,minmax(0,1fr));
-  }
-
-  .media__grid.vertical .item__wrapper {
-    max-width: 121px;
-  }
-
-  /* contact */
-  .contact__wrapper {
-    flex-direction: row;
-  }
-
-  .contact__wrapper .column {
-    width: 50%;
-  }
-
-  .contact__wrapper .column.contact__description {
-    padding-right: 1.5rem;
-    margin-bottom: 0;
-  }
 }
 
 /* dark theme */
@@ -842,10 +453,7 @@ footer nav {
     stroke: var(--blue-400);
   }
 
-  :is(.main__title, footer nav:last-child, .webmentions .interaction .comment__wrapper--interior .comment) a,
-  input[type="text"],
-  input[type="email"],
-  textarea {
+  .main__title, footer nav:last-child a {
     color: var(--white);
   }
 
@@ -892,13 +500,6 @@ footer nav {
     stroke: var(--blue-400)
   }
 
-  /* inputs */
-  input[type="text"],
-  input[type="email"],
-  textarea {
-    background-color: var(--black);
-  }
-
   /* buttons */
   .pill--button:hover,
   .pill--button:active,
@@ -906,47 +507,13 @@ footer nav {
     background-color: var(--blue-200);
   }
 
-  .pagination button.disabled > svg {
-    stroke: var(--white);
-  }
-
-  /* now */
-  .media__grid .item__wrapper {
-    border-color: var(--blue-400);
-  }
-
   /* images */
   .image__banner {
     border-color: var(--blue-400);
   }
 
-  /* widgets */
-  .webmentions {
-    border-color: var(--gray-900);
-  }
-
-  .webmentions .interaction .avatar__wrapper {
-    background-color: var(--white);
-    border-color: var(--black);
-  }
-
-  /* shared styles */
-  .media__grid .item__wrapper:hover,
-  .media__grid .item__wrapper:focus,
-  .media__grid .item__wrapper:active,
-  .webmentions .interaction .avatar__wrapper:hover,
-  .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);
-  }
-
   .highlight-text,
-  .progress-bar,
-  .pill--button,
-  .post-graph__progress {
+  .pill--button {
     background-color: var(--blue-400);
   }
-}
+}
\ No newline at end of file
diff --git a/src/assets/styles/pages/404.css b/src/assets/styles/pages/404.css
new file mode 100644
index 00000000..9e050490
--- /dev/null
+++ b/src/assets/styles/pages/404.css
@@ -0,0 +1,7 @@
+.four-oh-four__wrapper .image__banner {
+  margin-bottom: 1.25rem;
+}
+
+.four-oh-four__wrapper a {
+  margin-bottom: 1.25rem;
+}
\ No newline at end of file
diff --git a/src/assets/styles/pages/about.css b/src/assets/styles/pages/about.css
new file mode 100644
index 00000000..f87b08bb
--- /dev/null
+++ b/src/assets/styles/pages/about.css
@@ -0,0 +1,32 @@
+.avatar__wrapper {
+  width: 100%;
+  margin-bottom: 1.5rem;
+}
+
+.avatar__wrapper .avatar__wrapper--interior {
+  width: 16rem;
+  height: 16rem;
+  border: 1px solid var(--blue-600);
+  border-radius: var(--rounded-full);
+  display: flex;
+  padding: 1rem;
+  background-color: var(--white);
+}
+
+.avatar__wrapper,
+.avatar__wrapper .avatar__wrapper--interior {
+  justify-content: center;
+  overflow: hidden;
+}
+
+.avatar__wrapper .avatar__wrapper--interior > * {
+  width: 100%;
+  height: 100%;
+}
+
+@media screen and (min-width: 768px) {
+  .avatar__wrapper .avatar__wrapper--interior {
+    width: 24rem;
+    height: 24rem;
+  }
+}
\ No newline at end of file
diff --git a/src/assets/styles/pages/contact.css b/src/assets/styles/pages/contact.css
new file mode 100644
index 00000000..d254f105
--- /dev/null
+++ b/src/assets/styles/pages/contact.css
@@ -0,0 +1,28 @@
+/* contact */
+.contact__wrapper textarea {
+  height: 10rem;
+  resize: none;
+}
+
+.contact__wrapper .column.contact__description {
+  margin-bottom: 1.5rem;
+}
+
+.contact__wrapper .column.contact__description p:first-child {
+  margin-top: 0;
+}
+
+@media screen and (min-width: 768px) {
+  .contact__wrapper {
+    flex-direction: row;
+  }
+
+  .contact__wrapper .column {
+    width: 50%;
+  }
+
+  .contact__wrapper .column.contact__description {
+    padding-right: 1.5rem;
+    margin-bottom: 0;
+  }
+}
\ No newline at end of file
diff --git a/src/assets/styles/pages/now.css b/src/assets/styles/pages/now.css
new file mode 100644
index 00000000..fdb567af
--- /dev/null
+++ b/src/assets/styles/pages/now.css
@@ -0,0 +1,37 @@
+/* now */
+.now__section--text {
+  padding-left: 1rem;
+}
+
+.now__section--text p {
+  margin-top: .25rem;
+  margin-bottom: .25rem;
+}
+
+.now__section--text p > svg {
+  display: inline;
+  vertical-align: middle;
+  height: 1.25rem;
+  width: 1.25rem;
+}
+
+.now__section--header {
+  margin-top: 2rem;
+  margin-bottom: 1rem;
+}
+
+.now__section--header:first-of-type {
+  margin-top: 0;
+}
+
+.now__explainer {
+  font-size: var(--font-size-xs);
+  line-height: var(--line-height-xs);
+  padding-top: 1rem;
+}
+
+@media screen and (min-width: 768px) {
+  .now__section--text {
+    padding-left: 2rem;
+  }
+}
\ No newline at end of file
diff --git a/src/assets/styles/pages/post.css b/src/assets/styles/pages/post.css
new file mode 100644
index 00000000..5a2ad51e
--- /dev/null
+++ b/src/assets/styles/pages/post.css
@@ -0,0 +1,26 @@
+/* embeds */
+.eleventy-plugin-youtube-embed {
+  margin-bottom: 1rem;
+}
+
+/* footnotes */
+hr.footnotes-sep {
+  margin: 2.5rem 0;
+}
+
+.footnotes-list {
+  margin-bottom: 0 !important;
+  padding-left: 0 !important;
+}
+
+.footnotes-list li:last-child {
+  margin-bottom: 0;
+}
+
+.footnotes {
+  padding-bottom: 1.5rem;
+}
+
+.footnote-item > p {
+  display: inline;
+}
\ No newline at end of file
diff --git a/src/assets/styles/pages/webrings.css b/src/assets/styles/pages/webrings.css
new file mode 100644
index 00000000..b686c99e
--- /dev/null
+++ b/src/assets/styles/pages/webrings.css
@@ -0,0 +1,8 @@
+.webring__wrapper {
+  margin-top: 3rem;
+  margin-bottom: 2.5rem;
+}
+
+.webring__wrapper > .webring__centered {
+  justify-content: center;
+}
\ No newline at end of file
diff --git a/src/assets/styles/widgets/forms.css b/src/assets/styles/widgets/forms.css
new file mode 100644
index 00000000..18532c1d
--- /dev/null
+++ b/src/assets/styles/widgets/forms.css
@@ -0,0 +1,37 @@
+input[type="text"],
+input[type="email"],
+textarea {
+  color: var(--black);
+  background-color: var(--white);
+  width: 100%;
+  border: 1px solid var(--blue-600);
+  padding: .5rem;
+  margin-bottom: 1.5rem;
+  font-weight: 400 !important;
+  font-size: var(--font-size-base);
+  line-height: var(--line-height-base);
+  transition-property: border-color;
+  transition-timing-function: var(--ease-in-out);
+  transition-duration: 300ms;
+}
+
+input[type="text"],
+input[type="email"],
+textarea {
+  outline: none;
+}
+
+input[type="text"]:focus,
+input[type="email"]:focus,
+textarea:focus {
+  border: 1px solid var(--blue-800);
+}
+
+@media (prefers-color-scheme: dark) {
+  input[type="text"],
+  input[type="email"],
+  textarea {
+    color: var(--white);
+    background-color: var(--black);
+  }
+}
\ No newline at end of file
diff --git a/src/assets/styles/widgets/media-grid.css b/src/assets/styles/widgets/media-grid.css
new file mode 100644
index 00000000..fc66d1c0
--- /dev/null
+++ b/src/assets/styles/widgets/media-grid.css
@@ -0,0 +1,101 @@
+.now__section--header {
+  margin-top: 2rem;
+  margin-bottom: 1rem;
+}
+
+.media__grid {
+  display: grid;
+  gap: .5rem;
+}
+
+.media__grid.square {
+  grid-template-columns: repeat(2,minmax(0,1fr));
+}
+
+.media__grid.vertical {
+  grid-template-columns: repeat(3,minmax(0,1fr));
+}
+
+.media__grid.vertical .item__wrapper {
+  max-width: 193px;
+}
+
+.media__grid .item__wrapper {
+  position: relative;
+  height: 100%;
+  width: 100%;
+  border: 1px solid var(--blue-600);
+  border-radius: var(--rounded-lg);
+  overflow: hidden;
+  transition-property: border-color;
+  transition-timing-function: var(--ease-in-out);
+  transition-duration: 300ms;
+}
+
+.media__grid .item__wrapper:hover {
+  border-color: var(--blue-800)
+}
+
+.media__grid .item__cover {
+  position: absolute;
+  top: 0;
+  left: 0;
+  width: 100%;
+  height: 100%;
+  border-radius: var(--rounded-sm);
+}
+
+.media__grid .item__cover.gradient {
+  background-image: linear-gradient(180deg,transparent 0,rgba(0,0,0,.15) 70%,rgba(0,0,0,.75));
+}
+
+.media__grid .item__meta-text {
+  position: absolute;
+  padding: 0 .375rem;
+  width: 90%;
+  bottom: .375rem;
+}
+
+.media__grid .item__meta-text .header,
+.media__grid .item__meta-text .subheader {
+  color: var(--white);
+  font-size: var(--font-size-xs);
+  line-height: var(--line-height-xs);
+  overflow: visible;
+  display: -webkit-box;
+  text-shadow: rgba(0, 0, 0, 0.7) 0px 0px 10px;
+  -webkit-box-orient: vertical;
+  -webkit-line-clamp: 2;
+}
+
+.media__grid .item__image,
+.media__grid .item__image > * {
+  width: 100%;
+  height: 100%;
+}
+
+@media screen and (min-width: 768px) {
+  .media__grid.square {
+    grid-template-columns: repeat(4,minmax(0,1fr));
+  }
+
+  .media__grid.vertical {
+    grid-template-columns: repeat(6,minmax(0,1fr));
+  }
+
+  .media__grid.vertical .item__wrapper {
+    max-width: 121px;
+  }
+}
+
+@media (prefers-color-scheme: dark) {
+  .media__grid .item__wrapper {
+    border-color: var(--blue-400);
+  }
+
+  .media__grid .item__wrapper:hover,
+  .media__grid .item__wrapper:focus,
+  .media__grid .item__wrapper:active {
+    border-color: var(--blue-200);
+  }
+}
\ No newline at end of file
diff --git a/src/assets/styles/widgets/paginator.css b/src/assets/styles/widgets/paginator.css
new file mode 100644
index 00000000..82b6e96e
--- /dev/null
+++ b/src/assets/styles/widgets/paginator.css
@@ -0,0 +1,26 @@
+.pagination {
+  justify-content: space-between;
+}
+
+.pagination button {
+  background: none;
+  padding-left: 0;
+  padding-right: 0;
+}
+
+.pagination button > svg {
+  cursor: pointer;
+}
+
+.pagination button.disabled > svg {
+  opacity: .5;
+  cursor: not-allowed;
+  stroke: var(--black);
+  stroke-width: var(--stroke-width-default);
+}
+
+@media (prefers-color-scheme: dark) {
+  .pagination button.disabled > svg {
+    stroke: var(--white);
+  }
+}
\ No newline at end of file
diff --git a/src/assets/styles/widgets/popular-posts.css b/src/assets/styles/widgets/popular-posts.css
new file mode 100644
index 00000000..7e545f50
--- /dev/null
+++ b/src/assets/styles/widgets/popular-posts.css
@@ -0,0 +1,4 @@
+.popular-posts h2 {
+  margin-top: 2rem;
+  margin-bottom: 1rem;
+}
\ No newline at end of file
diff --git a/src/assets/styles/widgets/post-graph.css b/src/assets/styles/widgets/post-graph.css
index e7ff9697..5205b16d 100644
--- a/src/assets/styles/widgets/post-graph.css
+++ b/src/assets/styles/widgets/post-graph.css
@@ -23,4 +23,10 @@
 .post-graph__progress,
 .post-graph__data {
   margin-left: .625rem;
+}
+
+@media (prefers-color-scheme: dark) {
+  .post-graph__progress {
+    background-color: var(--blue-400);
+  }
 }
\ No newline at end of file
diff --git a/src/assets/styles/widgets/progress-bar.css b/src/assets/styles/widgets/progress-bar.css
new file mode 100644
index 00000000..6c9a38e6
--- /dev/null
+++ b/src/assets/styles/widgets/progress-bar.css
@@ -0,0 +1,24 @@
+.progress-bar__wrapper {
+  display: flex;
+  background-color: rgba(217, 222, 228, .6);
+  border-radius: var(--rounded-lg);
+  overflow: hidden;
+  height: 1rem;
+  width: 100%;
+  margin-top: .25rem;
+  margin-bottom: .25rem;
+}
+
+.progress-bar {
+  display: flex;
+  flex-direction: column;
+  justify-content: center;
+  white-space: nowrap;
+  background-color: var(--blue-600);
+}
+
+@media (prefers-color-scheme: dark) {
+  .progress-bar {
+    background-color: var(--blue-400);
+  }
+}
\ No newline at end of file
diff --git a/src/assets/styles/widgets/webmentions.css b/src/assets/styles/widgets/webmentions.css
new file mode 100644
index 00000000..e34251be
--- /dev/null
+++ b/src/assets/styles/widgets/webmentions.css
@@ -0,0 +1,120 @@
+.webmentions {
+  border-top: 1px solid var(--gray-200);
+  border-bottom: 1px solid var(--gray-200);
+  margin-top: 1.5rem;
+  margin-bottom: 3.25rem;
+  padding-top: 1rem;
+  padding-bottom: 1rem;
+}
+
+.webmentions .interaction.comments {
+  flex-direction: column;
+}
+
+.webmentions .interaction {
+  cursor: pointer;
+  margin-top: 1rem;
+  margin-bottom: 1.5rem;
+}
+
+.webmentions .interaction .comment__wrapper {
+  width: 100%;
+  padding-bottom: 1rem;
+}
+
+.webmentions .interaction .comment__wrapper:last-child {
+  padding-bottom: 0;
+}
+
+.webmentions .interaction .avatar__wrapper:hover,
+.webmentions .interaction .comment__wrapper:hover .avatar__wrapper {
+  border-color: var(--blue-800);
+}
+
+.webmentions .interaction .comment__wrapper--interior {
+  justify-content: space-between;
+}
+
+.webmentions .interaction .comment__wrapper--interior .comment {
+  margin-left: .75rem;
+}
+
+.webmentions .interaction .comment__wrapper--interior .comment a {
+  color: var(--black);
+  text-decoration: none;
+}
+
+.webmentions .interaction .comment__wrapper--interior .comment p {
+  font-size: var(--font-size-sm);
+  line-height: var(--line-height-sm);
+  margin: 0;
+}
+
+.webmentions .interaction .comment__wrapper--interior .comment time {
+  font-size: var(--font-size-xs);
+  line-height: var(--line-height-xs);
+  margin-top: .25rem;
+}
+
+.webmentions .interaction ul {
+  display: flex;
+  flex-direction: row;
+  flex-wrap: wrap;
+  margin: 0 0 0 .75rem;
+  padding: 0;
+  list-style: none;
+}
+
+.webmentions .interaction li {
+  margin-left: -.75rem;
+  height: 3.5rem;
+}
+
+.webmentions .interaction .avatar__wrapper {
+  background-color: var(--black);
+  width: 3.5rem;
+  height: 3.5rem;
+  margin-bottom: 0;
+  overflow: hidden;
+  border-radius: var(--rounded-full);
+  border: 4px solid var(--white);
+  transition-property: border-color;
+  transition-timing-function: var(--ease-in-out);
+  transition-duration: 300ms;
+}
+
+.webmentions .interaction .avatar__wrapper .avatar__wrapper-image > * {
+  width: 100%;
+  height: 100%;
+  border-radius: var(--rounded-full);
+}
+
+.webmentions .interaction .avatar__wrapper > picture {
+  display: flex;
+  flex-direction: column;
+  align-items: center;
+}
+
+@media (prefers-color-scheme: dark) {
+  .webmentions .interaction .comment__wrapper--interior .comment a {
+    color: var(--white);
+  }
+
+  .webmentions {
+    border-color: var(--gray-900);
+  }
+
+  .webmentions .interaction .avatar__wrapper {
+    background-color: var(--white);
+    border-color: var(--black);
+  }
+
+  .webmentions .interaction .avatar__wrapper:hover,
+  .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);
+  }
+}
\ No newline at end of file
diff --git a/src/pages/404.html b/src/pages/404.html
index 0240744e..ef03ebf1 100644
--- a/src/pages/404.html
+++ b/src/pages/404.html
@@ -3,6 +3,12 @@ title: 404
 layout: default
 permalink: /404.html
 ---
+{% capture css %}
+  {% render "../assets/styles/pages/404.css" %}
+{% endcapture %}
+<style>
+  {{ css | cssmin }}
+</style>
 <div class="four-oh-four__wrapper">
   {% image './src/assets/img/404.jpg', title, 'image__banner' %}
   <div class="text-center">
diff --git a/src/pages/about.md b/src/pages/about.md
index 59178933..bdece568 100644
--- a/src/pages/about.md
+++ b/src/pages/about.md
@@ -3,6 +3,12 @@ title: About
 layout: default
 permalink: /about.html
 ---
+{% capture css %}
+  {% render "../assets/styles/pages/about.css" %}
+{% endcapture %}
+<style>
+  {{ css | cssmin }}
+</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.md b/src/pages/contact.md
index eb7bef61..8783d76d 100644
--- a/src/pages/contact.md
+++ b/src/pages/contact.md
@@ -4,6 +4,13 @@ layout: default
 permalink: /contact.html
 description: 'How to contact me.'
 ---
+{% capture css %}
+  {% render "../assets/styles/widgets/forms.css" %}
+  {% render "../assets/styles/pages/contact.css" %}
+{% endcapture %}
+<style>
+  {{ css | cssmin }}
+</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 c4f5742d..9db773bd 100644
--- a/src/pages/search.html
+++ b/src/pages/search.html
@@ -8,6 +8,7 @@ permalink: /search.html
 <link href="https://coryd.dev/pagefind/pagefind-ui.css" rel="stylesheet" />
 {% capture css %}
   {% render "../assets/styles/widgets/pagefind.css" %}
+  {% render "../assets/styles/widgets/forms.css" %}
 {% endcapture %}
 <style>
   {{ css | cssmin }}
diff --git a/src/pages/webrings.md b/src/pages/webrings.md
index 0d20d1f3..266ea11c 100644
--- a/src/pages/webrings.md
+++ b/src/pages/webrings.md
@@ -4,7 +4,12 @@ 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 | cssmin }}
+</style>
 <h2
 class="m-0 text-xl font-black leading-tight tracking-normal dark:text-white md:text-2xl mb-2"
 >