chore: split out styles + only load where needed

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">

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 %}

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">

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 }}

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"
 >