Content updates

.kateproject.notes

@@ -1,6 +1,8 @@
 TODO:
 ---------------------
 Move hard-coded copy to metadata.
+Fix permanent snowing when user doesn't have JS enabled.
+Implement bold text style
 
 Quiz Ideas:
 ---------------------

_includes/issoStyle.njk

@@ -1,78 +1,5 @@
 <!-- ISSO style -->
 <style>
-	.isso-comment-header {
-		height: var(--space-2xl) !important;
-	}
 
-	h4.isso-thread-heading {
-		color: var(--text-color) !important;
-		font-size: var(--step-2) !important;
-		font-variation-settings: "opsz" 50, "wght" 350, "SOFT" 20, "WONK" 1 !important;
-		line-height: calc(var(--step-2) * 0.25 + var(--step-2)) !important;
-		margin-bottom: var(--space-m) !important;
-		margin-top: var(--space-m)  !important;
-		padding-bottom: 0 !important;
-		padding-top: 0 !important;
-		text-wrap: pretty !important;
-	}
-
-	.isso-text > h1, .isso-text > h2 {
-		padding: 0 0 0 0 !important;
-	}
-
-	.isso-form-wrapper > .isso-auth-section > .isso-post-action > input {
-		background-color: var(--contrast-color) !important;
-		border: none !important;
-		border-radius: var(--border-radius) !important;
-		color: var(--background-color) !important;
-		font-family: var(--font-family-ui) !important;
-		font-size: var(--step--2) !important;
-		font-variation-settings: var(--font-variation-ui) !important;
-		height: var(--space-m-l) !important;
-		letter-spacing: var(--ui-letter-spacing) !important;
-		margin: var(--space-xs) 0 0 0 !important;
-		padding: 0 var(--space-xs) !important;
-		text-transform: uppercase !important;
-		transition: var(--transition-normal) !important;
-		white-space: nowrap !important;
-	}
-
-		p.isso-input-wrapper {
-		display: block !important;
-		max-width: 100% !important;
-		& > label, & > input {
-			font-family: var(--font-family-ui) !important;
-			font-size: var(--step--2) !important;
-			font-variation-settings: var(--font-variation-ui) !important;
-		}
-		& input {
-			margin-block: inherit !important;
-		}
-	}
-
-	.isso-post-action {
-		display: inline-block !important;
-		float: inherit !important;
-		margin: 0 var(--space-2xs) 0 0 !important;
-		&::after {
-			content: "" !important;
-		}
-	}
-
-	textarea.isso-textarea {
-		background-color: var(--background-color) !important;
-		border: var(--border-details) !important;
-		border-color: var(--contrast-color) !important;
-		border-radius: var(--border-radius) !important;
-		color: var(--text-color) !important;
-		font-family: var(--font-family) !important;
-		font-size: var(--step-0) !important;
-		font-variation-settings: var(--font-variation-default) !important;
-		margin-block: 0 1lh !important;
-		min-height: var(--space-l) !important;
-		padding: 0 var(--space-3xs) !important;
-		resize: vertical !important;
-		width: 100%;
-	}
 </style>
 <!-- /ISSO style -->

_includes/layouts/base.njk

@@ -4,7 +4,49 @@
 		{% include "metadata.njk" %}
 		<link rel="stylesheet" type="text/css" href="/css/index.css" />
 		<link rel="stylesheet" type="text/css" href="/css/webfonts/webfonts.css" />
+		{% if tags and (tags.includes('nowBurning') or tags.includes('status')) %}
+		<link rel="stylesheet" type="text/css" href="/css/microblog.css" />
+		{% endif %}
+		{% if tags and tags.includes('blogroll') %}
+		<link rel="stylesheet" type="text/css" href="/css/blogroll.css" />
+		{% endif %}
+		{% if tags and tags.includes('galleryImage') %}
+		<link rel="stylesheet" type="text/css" href="/css/gallery-images.css" />
+		{% endif %}
+		{% if tags and tags.includes('metadata') %}
+		<link rel="stylesheet" type="text/css" href="/css/metadata.css" />
+		{% endif %}
+		{% if tags and tags.includes('navigator') %}
+		<link rel="stylesheet" type="text/css" href="/css/navigator.css" />
+		{% endif %}
+		{% if tags and tags.includes('profilePic') %}
+		<link rel="stylesheet" type="text/css" href="/css/profile-pic.css" />
+		{% endif %}
+		{% if tags and tags.includes('postList') %}
+		<link rel="stylesheet" type="text/css" href="/css/post-list.css" />
+		{% endif %}
+		{% if tags and tags.includes('tagList') %}
+		<link rel="stylesheet" type="text/css" href="/css/tags.css" />
+		{% endif %}
+		{% if tags and (tags.includes('posts') or tags.includes('now')) %}
+		<link rel="stylesheet" type="text/css" href="/css/audio-player.css" />
 		<link rel="stylesheet" type="text/css" href="/css/code.css" />
+		<link rel="stylesheet" type="text/css" href="/css/comments.css" />
+		<link rel="stylesheet" type="text/css" href="/css/continue-discussion-on-mastodon.css" />
+		<link rel="stylesheet" type="text/css" href="/css/dropcap.css" />
+		<link rel="stylesheet" type="text/css" href="/css/fleuron.css" />
+		{% endif %}
+		{% if tags and tags.includes('guestbook') %}
+		<link rel="stylesheet" type="text/css" href="/css/guestbook.css" />
+		{% endif %}
+		<link rel="stylesheet" type="text/css" href="/css/weather.css" />
+		<link rel="stylesheet" type="text/css" href="/css/woo-mode.css" />
+		{% if tags and tags.includes('quiz') %}
+		<link rel="stylesheet" type="text/css" href="/css/quiz.css" />
+		{% endif %}
+		{% if includeTOC %}
+		<link rel="stylesheet" type="text/css" href="/css/toc.css" />
+		{% endif %}
 		{% if search %}
 		<link rel="stylesheet" href="/pagefind/pagefind-ui.css">
 		<link rel="stylesheet" type="text/css" href="/css/search.css" />
@@ -16,13 +58,21 @@
 		<!-- /Indieweb profile links -->
 		{% include "structuredData.njk" %}
     {% include "analytics.html" %}
-    {% include "issoStyle.njk" %}
-    {% include "weatherStyle.njk" %}
-		{% include "wooModeStyle.njk" %}
 	</head>
 	<body>
 		{% include "header.njk" %}
 		<main id="skip">
+			{% if includeTOC %}
+			<section>
+				<article data-pagefind-body>
+					<h1>{{ h1 }}</h1>
+					<details class="toc">
+						<summary>Table of Contents</summary>
+						{{ content | toc(tags=['h2', 'h3', 'h4'], wrapper='div') | removeHash | safe }}
+					</details>
+				</article>
+			</section>
+			{% endif %}
 			<section>
 				{{ content | safe }}
 			</section>

_includes/layouts/home.njk

@@ -1,6 +1,8 @@
 ---
 layout: layouts/base.njk
 showPostListHeader: yep
+tags:
+  - navigator
 ---
 <h1>I’m Nathan; welcome&nbsp;friend.</h1>
 <p class="nodropcap page-block">My name is Nathan Upchurch, and this is my personal website and blog, where I write about all sorts of <a href="/tags">things</a> that I find interesting. Click through the categories below or see the <a href="/sitemap">sitemap</a> for a full list of everything there is to look at here.</p>

_includes/layouts/post.njk

@@ -20,7 +20,7 @@ layout: layouts/base.njk
 	{% endif %}
 	<div class="post-metadata-copy">
 		<p>{% if metadata.author.url %}<a href="{{ metadata.author.url }}">{% endif %}
-		{% if metadata.author.name %}By {{ metadata.author.name }}{% endif %}{% if metadata.author.url %}</a>&nbsp;•&nbsp;{% endif %}<time datetime="{{ page.date | htmlDateString }}">{{ page.date | niceDate }}</time>&nbsp;•&nbsp;{{ content | emojiReadTime }}</p>
+		{% if metadata.author.name %}By {{ metadata.author.name }}{% endif %}{% if metadata.author.url %}</a>&nbsp;•&nbsp;{% endif %}<time datetime="{{ page.date | htmlDateString }}">{{ page.date | niceDate }}</time>{% if tags and not tags.includes('quiz') %}&nbsp;•&nbsp;{{ content | emojiReadTime }}{% endif %}</p>
 
 	{% endif %}
 

_includes/nextLast.njk

@@ -1,62 +0,0 @@
-{% if collections.posts %}
-	{% set previousPost = collections.posts | getPreviousCollectionItem %}
-	{% set nextPost = collections.posts | getNextCollectionItem %}
-	{% if nextPost or previousPost %}
-		<section class="links-nextprev">
-			<h2>Read Next</h2>
-			<div class="postlist-item-container">
-				{% if previousPost %}
-					<article class="postlist-item{% if post.url == url %} postlist-item-active{% endif %}">
-						<a href="{{ previousPost.url }}" class="postlist-link">
-							<div class="post-image-container">
-								<img class="post-image" {% if previousPost.data.imageURL %} src="{{ previousPost.data.imageURL }}" alt="{{ previousPost.data.imageAlt }}" {% else %} src="{{ metadata.defaultPostImageURL }}" alt="{{ metadata.defaultPostImageAlt }}"{% endif %}>
-							</div>
-						</a>
-						<div class="post-copy">
-							<a href="{{ previousPost.url }}" class="postlist-link">
-								<p>Previous Article:</p>
-								<h3>
-									{% if previousPost.data.title %}{{ previousPost.data.title }}{% else %}<code>{{ previousPost.url }}</code>{% endif %}
-								</h3>
-							</a>
-							<time class="postlist-date" datetime="{{ previousPost.date | htmlDateString }}">{{ previousPost.date | readableDate("LLLL yyyy") }}</time>
-							{% if previousPost.data.synopsis %}
-								<p>{{ previousPost.data.synopsis | truncate(105) | safe }}</p>
-								{% else %}
-								<p>{{ previousPost.content | truncate(105) | safe }}</p>
-							{% endif %}
-						</div>
-					</article>
-					{% if not nextPost %}
-					</div>
-						</section>
-					{% endif %}
-				{% endif %}
-
-				{% if nextPost %}
-					<article class="postlist-item{% if post.url == url %} postlist-item-active{% endif %}">
-						<a href="{{ nextPost.url }}" class="postlist-link">
-							<div class="post-image-container">
-								<img class="post-image" {% if nextPost.data.imageURL %} src="{{ nextPost.data.imageURL }}" alt="{{ nextPost.data.imageAlt }}" {% else %} src="{{ metadata.defaultPostImageURL }}" alt="{{ metadata.defaultPostImageAlt }}"{% endif %}>
-							</div>
-						</a>
-						<div class="post-copy">
-							<a href="{{ nextPost.url }}" class="postlist-link">
-								<p>Next Article:</p>
-								<h3>
-									{% if nextPost.data.title %}{{ nextPost.data.title }}{% else %}<code>{{ nextPost.url }}</code>{% endif %}
-								</h3>
-							</a>
-							<time class="postlist-date" datetime="{{ nextPost.date | htmlDateString }}">{{ nextPost.date | readableDate("LLLL yyyy") }}</time>
-							{% if nextPost.data.synopsis %}
-								<p>{{ nextPost.data.synopsis | truncate(105) | safe }}</p>
-								{% else %}
-								<p>{{ nextPost.content | truncate(105) | safe }}</p>
-							{% endif %}
-						</div>
-					</article>
-			</div>
-		</section>
-		{% endif %}
-	{% endif %}
-{% endif %}

_includes/weatherStyle.njk

@@ -1,112 +0,0 @@
-<!-- Weather style -->
-<style>
-	.fallingObject {
-		color: #fff;
-		font-size: 1em;
-		font-family: Arial;
-		pointer-events: none;
-		text-shadow: 0 0 1px #000;
-	}
-	@keyframes fallingObjects-fall {
-		0% {
-			top: -10%;
-		}
-		100% {
-			top: 100%;
-		}
-	}
-	@keyframes fallingObjects-shake {
-		0% {
-			transform: translateX(0px);
-		}
-		50% {
-			transform: translateX(80px);
-		}
-		100% {
-			transform: translateX(0px);
-		}
-	}
-	.fallingObject {
-		position: fixed;
-		top: -10%;
-		z-index: 9999;
-		user-select: none;
-		cursor: default;
-		animation-name: fallingObjects-fall, fallingObjects-shake;
-		animation-duration: 10s, 3s;
-		animation-timing-function: linear, ease-in-out;
-		animation-iteration-count: infinite, infinite;
-		animation-play-state: running, running;
-	}
-	.fallingObject:nth-of-type(0) {
-		left: 1%;
-		animation-delay: 0s, 0s;
-		& > div {
-			transform: rotate(45deg);
-		}
-	}
-	.fallingObject:nth-of-type(1) {
-		left: 10%;
-		animation-delay: 1s, 1s;
-		& > div {
-			transform: rotate(10deg);
-		}
-	}
-	.fallingObject:nth-of-type(2) {
-		left: 20%;
-		animation-delay: 6s, 0.5s;
-		& > div {
-			transform: rotate(60deg);
-		}
-	}
-	.fallingObject:nth-of-type(3) {
-		left: 30%;
-		animation-delay: 4s, 2s;
-		& > div {
-			transform: rotate(84deg);
-		}
-	}
-	.fallingObject:nth-of-type(4) {
-		left: 40%;
-		animation-delay: 2s, 2s;
-		& > div {
-			transform: rotate(267deg);
-		}
-	}
-	.fallingObject:nth-of-type(5) {
-		left: 50%;
-		animation-delay: 8s, 3s;
-		& > div {
-			transform: rotate(200deg);
-		}
-	}
-	.fallingObject:nth-of-type(6) {
-		left: 60%;
-		animation-delay: 6s, 2s;
-		& > div {
-			transform: rotate(20deg);
-		}
-	}
-	.fallingObject:nth-of-type(7) {
-		left: 70%;
-		animation-delay: 2.5s, 1s;
-		& > div {
-			transform: rotate(78deg);
-		}
-	}
-	.fallingObject:nth-of-type(8) {
-		left: 80%;
-		animation-delay: 1s, 0s;
-		& > div {
-			transform: rotate(3120deg);
-		}
-	}
-	.fallingObject:nth-of-type(9) {
-		left: 90%;
-		animation-delay: 3s, 1.5s;
-		& > div {
-			transform: rotate(123deg);
-		}
-	}
-</style>
-<!-- / Weather style -->

_includes/wooModeStyle.njk

@@ -1,16 +0,0 @@
-<!-- Woo mode style -->
-<style>
-	body {
-		background: none;
-	}
-	canvas {
-		display: block;
-		opacity: .35;
-		pointer-events: none;
-		position: fixed;
-		top: 0;
-		left: 0;
-		z-index: -1;
-	}
-</style>
-<!-- / Woo mode style -->

content/about/colophon/index.md

@@ -4,7 +4,8 @@ title: Nathan Upchurch | Colophon
 structuredData: none
 ---
 
-# Colophon
+<h1>Colophon</h1>
+
 ## What I used to build this website
 I built this website in plain-old HTML, CSS, and a touch of vanilla JavaScript using [Zach Leatherman](https://www.zachleat.com/)'s [11ty static site generator](https://www.11ty.dev/) (now called, *sigh*, Build Awesome) and Mozilla's [Nunjucks templating language](https://mozilla.github.io/nunjucks/). I used free and open source variable typefaces [Fraunces](https://fraunces.undercase.xyz/), designed by Phaedra Charles and Flavia Zimbardi[^1], and [Manrope](https://www.gent.media/manrope), designed by Mikhail Sharanda[^2]. [Search](/search) powered by [Pagefind](https://pagefind.app/). [Guestbook](/guestbook) powered by [Guestbooks](https://guestbooks.meadow.cafe/).
 

content/about/privacy/index.md

@@ -4,7 +4,7 @@ title: Nathan Upchurch | Privacy
 structuredData: none
 ---
 
-# Privacy Statement
+<h1>Privacy Statement</h1>
 
 ## Data collection and use
 I don’t collect any of your personal information, full-stop. All webfonts, icons, and images are hosted locally (these things can sometimes be used to [track people across the internet](https://www.firstpost.com/world/how-google-uses-fonts-to-track-what-users-do-online-and-sell-data-to-advertisers-12496552.html) otherwise). I use [umami](https://umami.is), a free and open source, privacy-respecting analytics tool, to see how many people visit this website. As of 2025-12-16 I also use [Goat Counter](https://goatcounter.com) and [Mochi](https://mochi.meadow.cafe/) (also FLOSS and privacy-respecting) as backups to umami, as my self-hosted umami instance shat the bed the other day and I lost a bunch of data.

content/ai/index.md

@@ -6,7 +6,8 @@ structuredData: none
 
 <article data-pagefind-body>
 
-# AI
+<h1>AI</h1>
+
 Certified generative AI hater here. This website and all content herein is 100% guaranteed AI slop free: code, prose images, music, et cetera.
 
 [![Michael Scott	from the US version of The Office shaking his head and saying Hmm, nope; don't like that.](/img/the-office-no.gif "#StopTheSlop")](/img/the-office-no.gif)

content/blog/blog.11tydata.js

@@ -1,6 +1,4 @@
 export default {
-	tags: [
+	tags: ["posts", "metadata", "profilePic", "tags"],
-		"posts"
+	layout: "layouts/post.njk",
-	],
-	"layout": "layouts/post.njk",
 };

content/blog/index.njk

@@ -2,6 +2,10 @@
 eleventyExcludeFromCollections: true
 layout: layouts/base.njk
 title: "The Stochastic Bletherist | The Personal Blog of Nathan Upchurch"
+tags:
+  - metadata
+  - postList
+  - tagList
 structuredData: none
 pagination:
   data: collections.posts

content/blogroll/index.njk

@@ -1,22 +1,18 @@
 ---
 layout: layouts/base.njk
 title: Nathan Upchurch | Blogroll
+tags:
+  - blogroll
+  - tagList
 structuredData: none
+h1: Blogroll
+includeTOC: true
 ---
-<article data-pagefind-body>
-
-	<h1>Blogroll</h1>
 	<p class="nodropcap">Here are some blogs and independent news outlets I like to read. You can click the RSS icon next to each to subscribe using <a href="../about-feeds/">your newsreader</a>, or import all of them at once by downloading and importing this convenient <a href="./nathanUpchurchBlogroll.opml" download>.opml file</a>.</p>
-	<p class="page-block">
-	<em>Skip to category:
-	{% for category in blogroll.categories %}
-	<a href="#{{ category.name | slugify }}">{{ category.name }}</a>{% if loop.last %}.{% else %},{% endif %}
-	{% endfor %}
-	</em></p>
 
 	{% for category in blogroll.categories %}
 	<section class="blogroll">
-		<h2 id="{{ category.name | slugify }}">{{ category.name }}:<a class="header-anchor" href="#{{ category.name | slugify }}">#</a></h2>
+		<h2 id="{{ category.name | slugify }}">{{ category.name }}<a class="header-anchor" href="#{{ category.name | slugify }}">#</a></h2>
 			{% for blog in category.blogs %}
 			<div class="blogroll-category-group">
 				<a href="{{ blog.url }}"><h3>{{ blog.title }}</h3></a>
@@ -36,5 +32,3 @@ structuredData: none
 			{% endfor %}
 		</section>
 	{% endfor %}
-
-</article>

content/changelog/index.md

@@ -2,12 +2,24 @@
 layout: layouts/base.njk
 title: Nathan Upchurch | Changelog
 structuredData: none
+h1: Changelog
+includeTOC: true
 ---
-<article data-pagefind-body>
+## 2026
-
+### April
-# Changelog
+* 2026-04-17
+	* Added tables of contents to list pages where it makes sense.
+	* Refactored CSS so that unnecessary styles are not loaded on every page.
+* 2026-04-16
+	* Updated [/incense](/incense).
+	* Some type styling changes.
+* 2026-04-15
+	* Updated [/incense](/incense).
+	* Updated [/not-amazon](/not-amazon).
 * 2026-04-07
 	* Updated [/wish](/wish).
+
+### March
 * 2026-03-16
 	* Updated [/incense](/incense).
 	* Updated [/links](/links).
@@ -20,6 +32,8 @@ structuredData: none
 	* Updated [/incense](/incense).
 * 2026-03-05
 	* Updated [/wish](/wish) and [/incense](/incense).
+
+### February
 * 2026-02-07
 	* Updated [/wish](/wish).
 * 2026-02-04
@@ -28,6 +42,8 @@ structuredData: none
 	* Implement togglable site-wide Woo-Mode™ in site settings.
 * 2026-02-01
 	* Added [Woo-Woo Incense Description Generator](/special/woo-woo-incense-description-generator).
+
+### January
 * 2026-01-21
 	* Updated [blogroll](/blogroll).
 * 2026-01-16
@@ -48,6 +64,9 @@ structuredData: none
 	* Updated [/sitemap](/sitemap).
 	* Organized site source files.
 	* Added estimated read time to blog posts with [a neat plugin](https://www.npmjs.com/package/@11tyrocks/eleventy-plugin-emoji-readtime).
+
+## 2025
+### December
 * 2025-12-16
 	* Updated [/links](/links).
 * 2025-12-08
@@ -56,6 +75,8 @@ structuredData: none
 	* Added [/ai](/ai) [slashpage](https://slashpages.net/) a la [the /ai 'manifesto'](https://www.bydamo.la/p/ai-manifesto).
 	* Added [/blank](/blank) [slashpage](https://slashpages.net/).
 	* Added [/referrals](/referrals) [slashpage](https://slashpages.net/).
+
+### November
 * 2025-11-28
 	* Added styling for [guestbook](/guestbook) replies now that [the reply feature](https://codeberg.org/meadowingc/guestbooks/issues/25) is live.
 	* The [main RSS feed](/feed/feed.xml) now includes [now](/now) entries.
@@ -68,6 +89,8 @@ structuredData: none
 	* Updated [/incense](/incense).
 	* Added snow / weather, and site settings button and dialog.
 	* Added [/links](/links).
+
+### October
 * 2025-10-20
 	* Added [Moist Poetry Journal](https://moistpoetryjournal.com) to the [blogroll](/blogroll).
 	* Removed some less active and/or abandoned blogs from the [blogroll](/blogroll).
@@ -81,10 +104,14 @@ structuredData: none
 	* Created [/incense](/incense).
 	* Added "not by AI" badge.
 	* Updated [/sitemap](/sitemap).
+
+### August
 * 2025-08-22
 	* Updated [/wish](/wish).
 * 2025-08-14
 	* Implemented a [guestbook](/guestbook/).
+
+### July
 * 2025-07-29
 	* Added [The 74](https://www.the74million.org/) to the [blogroll](/blogroll).
 * 2025-07-14
@@ -98,6 +125,8 @@ structuredData: none
 	* Added [Toxel](https://www.toxel.com/) to the [blogroll](/blogroll).
 * 2025-07-02
 	* Added [A Tea Addict's Journal](https://marshaln.com), [Bear Blog Discover](https://bearblog.dev/discover/), [Essence of Tea Blog](https://essenceoftea.com/blogs/blog), [Tea DB](https://teadb.org/), and [white2tea](https://white2tea.com/blogs/blog) to the [blogroll](/blogroll).
+
+### June
 * 2025-06-26
 	* Added [Justine the Incenseur](https://justinetheincenseur.substack.com) to the [blogroll](/blogroll).
 * 2025-06-24
@@ -106,6 +135,8 @@ structuredData: none
 	* Added [Freethought Blogs](https://freethoughtblogs.com/) and [Cwyn's Death by Tea](https://deathbytea.blogspot.com/) to the [blogroll](/blogroll).
 * 2025-06-06
 	* Implement [/now-burning](/now-burning/) and [/once-burned](/once-burned/).
+
+### April
 * 2025-04-19
 	* Improve post list image sizing on mobile.
 * 2025-04-08
@@ -114,6 +145,8 @@ structuredData: none
 	* Updated the [colophon](/about/colophon/).
 * 2025-04-03
 	* Added [Graphic Rage with Aubrey Hirsch](https://aubreyhirsch.substack.com/) and [Usermag](https://www.usermag.co/) to the [blogroll](/blogroll).
+
+### March
 * 2025-03-28
 	* Updated header on [/tags/](/tags/).
 * 2025-03-27
@@ -124,6 +157,8 @@ structuredData: none
 	* Removed [Kevin Drum's blog](https://jabberwocking.com/) from the [blogroll](/blogroll) in light of [his passing](https://jabberwocking.com/health-update-100/) on the seventh of March, 2025. Rest in peace, Kevin.
 * 2025-03-11
 	* Updated [/wish](/wish).
+
+### February
 * 2025-02-21
 	* Updated [/wish](/wish) again as my mum bought me some incense sticks for my birthday.
 * 2025-02-20
@@ -145,6 +180,8 @@ structuredData: none
 	* Add "image" meta tag for all pages, using either the image specified for the page / post, or my smiling face as a default.
 	* Fix issue with metadata output on gallery image pages.
 	* Stopped bundling CSS and injecting it into pages as I was sick of 1,000 lines of CSS on *every single page* (My build times are now a third of what they were).
+
+### January
 * 2025-01-31
 	* Update the copyright notice in the footer.
 * 2025-1-29
@@ -158,6 +195,9 @@ structuredData: none
 	* Prettier date formatting throughout.
 * 2025-1-13
 	* Added [Popular Information](https://popular.info/) to the [blogroll](/blogroll).
+
+## 2024
+### December
 * 2024-12-16
 	* Update PeerTube instance on [/me](/me).
 * 2024-12-15
@@ -171,5 +211,3 @@ structuredData: none
 	* Added [Aftermath](https://aftermath.site/) to the [blogroll](/blogroll).
 	* Implemented [/changelog](/changelog) 🎉.
 	* Implemented [/ai](/ai) a la [slashai.page](https://slashai.page/).
-
-</article>

content/galleries/gallery-image-page-generator.njk

@@ -4,6 +4,8 @@ pagination:
   size: 1
   alias: picture
 layout: layouts/base.njk
+tags:
+  - galleryImage
 structuredData: none
 eleventyComputed:
   imageURL: "{{ picture.baseUrl }}/{{ picture.filename }}"

content/galleries/gallery-page-generator.njk

@@ -4,8 +4,11 @@ pagination:
   size: 1
   alias: gallery
 layout: layouts/base.njk
-tags: gallery
+tags:
+  - gallery
+  - galleryImage
 structuredData: none
+eleventyExcludeFromCollections: true
 eleventyComputed:
   title: "{{ gallery.title }}"
   permalink: "/gallery/{{ gallery.title | slugify }}/"

content/galleries/index.njk

@@ -1,8 +1,11 @@
 ---
 layout: layouts/base.njk
+tags:
+  - metadata
+  - postList
 ---
 <div data-pagefind-body>
-	<h1>My image galleries.</h1>
+	<h1>My image galleries</h1>
 	<p class="page-block nodropcap">
 	Photography trips, memes, and other pictures I thought would be worth sharing.
 	</p>

content/guestbook/index.njk

@@ -2,6 +2,7 @@
 layout: layouts/base.njk
 title: Nathan Upchurch | Guestbook
 structuredData: none
+tag: guestbook
 ---
 <h1>Sign My Guestbook</h1>
 <!-- Guestbook Script -->

content/incense/index.md

@@ -2,10 +2,9 @@
 layout: layouts/base.njk
 title: Nathan Upchurch | Incense
 structuredData: none
+includeTOC: true
+h1: "Incense: Writing & Resources"
 ---
-<article data-pagefind-body>
-
-# Incense: Writing & Resources
 ::: info
 For my writing on incense see [the incense tag page](/tags/incense). Is this page missing something? [Let me know](/me).
 :::
@@ -31,8 +30,10 @@ Incense making is hard. While parts of the world with strong incense cultures en
 
 ## Advanced Incense Making Techniques
 ### Articles
+* [*Enfleurage an Esoteric and Ancient Art*, Be-en-Foret](https://mermadearts.com/i/enfleurage-an-esoteric-and-ancient-art)
 * [*Filtering Conifer Resins*, Dave of The World Makes Scents](https://incensemakers.org/d/20-filtering-conifer-resins)
 * [*Incorporating Soft Resin Into Your Incense Recipe*, Dave of The World Makes Scents](https://incensemakers.org/d/26-incorporating-soft-resin-into-your-incense-recipe)
+* [*Powder Enfleurage! An Ancient Fragrant Art*, Anya’s Garden Perfumes](https://anyasgarden.com/powder-enfleurage-ancient-fragrant-art-giveaway/)
 * [*Traditional Processing of Aloeswood*, Dr. Incense](https://dr-incense.com/blogs/dr-incense-blog/traditional-processing-of-aloeswood)
 * [*Washing Frankincense*, Nathan Upchurch](/blog/washing-frankincense/)
 
@@ -41,9 +42,11 @@ Incense making is hard. While parts of the world with strong incense cultures en
 
 ## Writing on Incense and Related Topics
 ### Articles
-* [A New Incense Bibliography Part 1: History & Art, Incense Apprentice](https://incenseapprentice.substack.com/p/a-new-incense-bibliography-part-1)
+* [*A New Incense Bibliography Part 1*: History & Art, Incense Apprentice](https://incenseapprentice.substack.com/p/a-new-incense-bibliography-part-1)
-* [A New Incense Bibliography Part 2: Worldwide Incense Traditions, Incense Apprentice](https://incenseapprentice.substack.com/p/a-new-incense-bibliography-part-2)
+* [*A New Incense Bibliography Part 2*: Worldwide Incense Traditions, Incense Apprentice](https://incenseapprentice.substack.com/p/a-new-incense-bibliography-part-2)
 * [Ancient Chinese kneaded incense recipes translated from Zhou Jiaxuan's *History of Incense* (香乘 / xiāng shèng)](https://web.archive.org/web/20230216230731/https://talesofincense.com/scent-materia/)
+* [*Bakhour (Turaren Wuta) In Nigeria*, Dr Ruqayya Abba Tofa](https://www.fragrantica.com/news/Bakhour-Turaren-Wuta-In-Nigeria-21456.html)
+* [*Bakhour (Turaren Wuta) in Nigeria (Part 2)*, Dr Ruqayya Abba Tofa](https://www.fragrantica.com/news/Bakhour-Turaren-Wuta-in-Nigeria-Part-2-21989.html)
 * [Chinese incense ingredient name translations](https://web.archive.org/web/20230216230731/https://talesofincense.com/scent-materia/)
 * [*Japanese Incense Types*, Kyarazen](https://www.kyarazen.com/japanese-incense-types-in-modern-day/)
 * [*Pressed Incense Tablets*, Kyarazen](https://www.kyarazen.com/pressed-incense-tablets/)
@@ -97,12 +100,14 @@ Incense making is hard. While parts of the world with strong incense cultures en
 * [New Mountain Merchants (Australia)](https://newmountain.com.au/)—Oils, Woods
 * [ResinaeBotanica (UK)](https://www.etsy.com/shop/ResinaeBotanica)—Resins
 * [Scents of Earth (USA)](https://scents-of-earth.com/)—Absolutes, Herbs, Oils, Resins, Woods
+* [Tame the Spirit Herbs (USA)](https://tamethespiritherbs.com/)—Herbs, Resins, Woods
 * [The Incense Dragon (USA)](https://www.theincensedragon.com/supplies)—Herbs, Resins, Woods
 * [The World Makes Scents (USA)](https://theworldmakesscents.com/)—Herbs, Resins, Woods
 
 
 ## Studies on Incense and Related Topics
-* [*Odor Tenacity of Perfumery Materials*, Hayato Hosokawa and Takayuki Shibamoto](https://web.archive.org/web/20240616105228/https://img.perfumerflavorist.com/files/base/allured/all/document/2016/04/pf.7775.pdf)
+* [*Key Issues and Challenges in Spice Grinding*, HPramod P. Aradwad, Arun Kumar T V, P.K. Sahoo, Indra Mani (PDF, 3.7 MiB)](/documents/key_issues_and_challenges_in_spice_grinding.pdf)
+* [*Odor Tenacity of Perfumery Materials*, Hayato Hosokawa and Takayuki Shibamoto (PDF, 158.8 KiB)](/documents/odor_tenacity_of_perfume_materials.pdf)
 
 ## Forums / Discussion Boards
 * [Reddit (/r/incense)](https://reddit.com/r/incense)—Unfortunately, this is currently *the* place to discuss incense and incense making on the English-speaking internet. If you would like to avoid a platform that spies on you and uses your writing to train AI, you are welcome to help me bring some life to the following alternative option (currently pretty much only populated by me):
@@ -115,4 +120,3 @@ Incense making is hard. While parts of the world with strong incense cultures en
 
 
 [^1]: Here I am referring to traditional incense making, using actual plants as aromatics. There is certainly no lack of knowledge or production of "dipped" incense here, an extremely easy to make category of incense which is considered the absolute bottom of the barrel in terms of quality.
-</article>

content/links/index.md

@@ -2,11 +2,9 @@
 layout: layouts/base.njk
 title: Nathan Upchurch | Links
 structuredData: none
+h1: Links
+includeTOC: true
 ---
-
-<article data-pagefind-body>
-
-# Links
 Here are some links to pages and resources that I believe are worth sharing.
 ## Design tools and resources
 ### Education
@@ -261,5 +259,3 @@ Unlimited creativity, zero ads.
 	* VPN
 ## Random cool stuff
 * [intertapes.net](https://intertapes.net/)—An updating collection of found cassette tapes from different locations. The audio fragments include: voice memos, field recordings, mixtapes, bootlegs and more.
-
-</article>

content/not-amazon/index.md

@@ -2,10 +2,9 @@
 layout: layouts/base.njk
 title: "Nathan Upchurch | Not Amazon"
 structuredData: none
+h1: Not Amazon
+includeTOC: true
 ---
-<article data-pagefind-body>
-
-# Not Amazon
 Mostly for my own use, this is a list of U.S.-based online shops that are not Amazon. If you are looking to stop paying for J-Beezy's yacht maintenance while his workers piss in bottles, and you're based in the U.S.A., you might find this list useful too. Vegan and small independent brands get priority, of course. I do not receive any sort of commission or kick-back from any of the below stores. If you do want to buy something that I get a kick-back from, check out my (sparse) [referrals](/referrals) page. I haven't personally tried all of these retailers, so use judgment before purchasing.
 
 ## Clothing & Apparel
@@ -114,6 +113,7 @@ Mostly for my own use, this is a list of U.S.-based online shops that are not Am
 ### Bath & Body
 * [Ethique](https://ethique.com/)—Shampoo and conditioner bars from Aotearoa New Zealand.
 * [Dr. Jen](https://drjennatural.com/)—Nano-Hydroxyapatite toothpaste. They also sell a strawberry flavor for those sensitive to mint.
+* [HiBAR](https://hellohibar.com/)—Vegan and plastic free deodorant, body wash, hair care, and more.
 * [J•R•Liggett's](https://jrliggett.com/)—All natural shampoo bars.
 * [Palestinian Soap Cooperative](https://palestiniansoap.coop/)—Olive oil soap from Nablus, Palestine, made using a traditional process practiced for well over four millennia.
 * [Phoenix Shaving](https://phoenixshaving.com/)—A wide array of razors, aftershaves, brushes, and other wet-shaving products, including the fantastic [CK-6 line of vegan shaving soaps](https://phoenixshaving.com/collections/ultra-premium-formula-ck-6).
@@ -129,5 +129,3 @@ Mostly for my own use, this is a list of U.S.-based online shops that are not Am
 [^1]: I know what you're thinking, but I have not once had any issues with peeling or damage on the faux-leather uppers from this brand (most intentionally vegan brands have this handled). In fact, they last and look good for longer than animal-skin shoes because the material is not damaged by moisture or road salt. If you really want a true buy-it-for-life option, though (and if they have them in your size), go for the Goodyear welt options so that the shoes are properly resoleable at a cobbler.
 
 [^2]: I bought a sofa with angled legs; not the most structurally sound arrangement. When one broke, it took me years to get around to making a warranty claim. They honored it, but I first had to send the couch back. They then told me that the model I bought was no longer available, but I could select one from the website of the same value before any sales or discounts. There were two problems with this. First, years had passed and prices had risen. Second, just about everything on that website seems to be perpetually on sale. And so I went to war. There were mysterious email deliverability issues, negotiations, and many phone calls. Eventually, I got a nice new replacement couch for Sol to leave crumbs on with entirely vertical legs. Result.
-
-</article>

content/now-burning/Now Burning_2026-04-07_10:46.md

@@ -0,0 +1,7 @@
+---
+title: Morning Star Pine
+manufacturer: Nippon Kodo
+date: 2026-04-07 10:46:00
+time: 10:46 AM
+---
+

content/now-burning/Now Burning_2026-04-08_15:58.md

@@ -0,0 +1,7 @@
+---
+title: "Frankincense & Myrrh with Sacred Sage"
+manufacturer: Fred Soll
+date: 2026-04-08 15:57:00
+time: 3:57 PM
+---
+A very powerfully fragranced stick.

content/now-burning/Now Burning_2026-04-13_13:02.md

@@ -0,0 +1,7 @@
+---
+title: Hagi
+manufacturer: Tennendo
+date: 2026-04-13 13:02:00
+time: 1:02 PM
+---
+

content/now-burning/Now Burning_2026-04-14_19:33.md

@@ -0,0 +1,7 @@
+---
+title: Koin
+manufacturer: Gyokushodo
+date: 2026-04-14 19:33:00
+time: 7:33 PM
+---
+

content/now-burning/Now Burning_2026-04-15_11:31.md

@@ -0,0 +1,7 @@
+---
+title: Friend of Pine
+manufacturer: Shoyeido
+date: 2026-04-15 11:31:00
+time: 11:31 AM
+---
+

content/now/index.njk

@@ -3,9 +3,13 @@ eleventyExcludeFromCollections: true
 layout: layouts/base.njk
 title: Nathan Upchurch | Now
 structuredData: none
+tags:
+  - metadata
+  - postList
+  - tagList
 ---
 <article class="post" data-pagefind-body>
-<h1>Now: Life updates.</h1>
+<h1>Now: Life updates</h1>
 {% set now = collections.now | last %}
 <h2>{{ now.data.title }} • {{ now.date | niceDate }}</h2>
 {{ now.content | safe }}

content/now/now.11tydata.js

@@ -1,4 +1,4 @@
 export default {
-	tags: ["now"],
+	tags: ["now", "metadata", "profilePic", "tags"],
 	layout: "layouts/post.njk",
 };

content/once-burned/index.njk

@@ -1,5 +1,8 @@
 ---
 layout: layouts/base.njk
+tags:
+  - nowBurning
+  - metadata
 title: "Nathan Upchurch | Once Burned: Incense I've burning in the past."
 structuredData: none
 pagination:

content/prior-thoughts/index.njk

@@ -1,6 +1,8 @@
 ---
 layout: layouts/base.njk
 title: "Nathan Upchurch | Prior Thoughts"
+tags:
+  - status
 pagination:
   data: collections.priorThoughts
   generatePageOnEmptyData: true

content/quizzes/index.njk

@@ -2,6 +2,8 @@
 eleventyExcludeFromCollections: true
 layout: layouts/base.njk
 title: Nathan Upchurch | Quizzes
+tags:
+  - metadata
 structuredData: none
 description: "Bored? Take a fun quiz to while away the time!"
 ---

content/quizzes/quizzes.11tydata.js

@@ -1,4 +1,4 @@
 export default {
-	tags: ["quiz"],
+	tags: ["quiz", "metadata", "profilePic", "postList"],
 	layout: "layouts/quizzes.njk",
 };

content/referrals/index.md

@@ -5,7 +5,7 @@ structuredData: none
 ---
 <article data-pagefind-body>
 
-# Referrals / Affiliate Links
+<h1>Referrals / Affiliate Links</h1>
 
 Here are some referral links to services / products that I use and recommend. Yes, I do get a kickback if you buy something using these links.
 

content/sitemap/index.md

@@ -4,8 +4,8 @@ title: Nathan Upchurch | Sitemap
 structuredData: none
 ---
 <article data-pagefind-body>
+<h1>Sitemap</h1>
 
-# Sitemap
 * [Home](/)
 * [About](/about)
 	* [AI](/ai)

content/slashes/index.md

@@ -5,7 +5,7 @@ structuredData: none
 ---
 <article data-pagefind-body>
 
-# Slashes
+<h1>Slashes</h1>
 
 This is an index of all my [slash pages](https://slashpages.net/). These are pages you can add to your website, usually with a standard slugs like [/now](/now), [/about](/about), or [/sitemap](/sitemap). They tend to describe the individual behind the site and are [common on the IndieWeb](https://indieweb.org/page).
 

content/tags/index.njk

@@ -3,6 +3,8 @@ permalink: /tags/
 layout: layouts/base.njk
 title: Nathan Upchurch | Tags
 structuredData: none
+tags:
+  - tagList
 ---
 <article data-pagefind-body>
 

content/tags/tag-page-generator.njk

@@ -5,18 +5,30 @@ pagination:
   alias: tag
   filter:
     - all
+    - blogroll
+    - galleryImage
+    - galleryImages
     - post
     - posts
     - tagList
+    - tags
     - feed
     - onceBurned
+    - metadata
+    - navigator
     - nowBurning
+    - postList
     - status
     - priorThoughts
   addAllPagesToCollections: true
 layout: layouts/base.njk
 postlistHeaderText: "Latest Posts:"
 structuredData: none
+eleventyExcludeFromCollections: true
+tags:
+  - tagList
+  - metadata
+  - postList
 eleventyComputed:
   title: Posts tagged “{{ tag }}”
   permalink: "/tags/{{ tag | slugify }}/"

content/wish/index.md

@@ -5,7 +5,8 @@ structuredData: none
 ---
 <article data-pagefind-body>
 
-# My Wishlist
+<h1>My Wishlist</h1>
+
 ## What is this?
 This page is a list of wishes, a la [taylor.town/wish-manifesto](https://taylor.town/wish-manifesto), both tangible and intangible.
 

eleventy.config.js

@@ -12,6 +12,7 @@ import pluginNavigation from "@11ty/eleventy-navigation";
 import prettier from "prettier";
 import { EleventyHtmlBasePlugin } from "@11ty/eleventy";
 import { dateSuffixAdder, monthMap } from "./public/js/modules/dateTools.js";
+import tocPlugin from "eleventy-plugin-nesting-toc";
 // For PageFind
 import childProcess from "child_process";
 
@@ -127,6 +128,7 @@ export default async function (eleventyConfig) {
 	eleventyConfig.addPlugin(emojiReadTime, {
 		label: "minute read time",
 	});
+	eleventyConfig.addPlugin(tocPlugin);
 
 	// Filters
 	eleventyConfig.addFilter("niceDate", (date) => {
@@ -146,14 +148,21 @@ export default async function (eleventyConfig) {
 		return arr.slice(0, arr.length - 1);
 	});
 
+	// Add abbreviation
 	eleventyConfig.addFilter("abbr", (abbr, def) => {
 		return `<abbr title="${def}">${abbr}</abbr>`;
 	});
 
+	// Parse as markdown
 	eleventyConfig.addFilter("markdownify", (markdownString) => {
 		return mdLib.renderInline(markdownString);
 	});
 
+	// Remove trailing "#" from links
+	eleventyConfig.addFilter("removeHash", (str) => {
+		return str.replace(/#<\/a>/g, "</a>");
+	});
+
 	// Shortcodes
 	// Audio player
 	eleventyConfig.addShortcode(
@@ -211,12 +220,24 @@ export default async function (eleventyConfig) {
 			(tag) =>
 				[
 					"all",
-					"nav",
+					"blogroll",
-					"post",
+					"feed",
-					"posts",
 					"gallery",
-					"quiz",
+					"galleryImage",
+					"guestbook",
+					"metadata",
+					"nav",
+					"navigator",
 					"nowBurning",
+					"onceBurned",
+					"post",
+					"postList",
+					"posts",
+					"profilePic",
+					"status",
+					"tagList",
+					"tags",
+					"quiz",
 				].indexOf(tag) === -1,
 		);
 	});

package.json

@@ -42,6 +42,7 @@
 	},
 	"dependencies": {
 		"@11tyrocks/eleventy-plugin-emoji-readtime": "^1.0.1",
+		"eleventy-plugin-nesting-toc": "^1.3.0",
 		"markdown-it-container": "^4.0.0",
 		"markdown-it-footnote": "^3.0.3",
 		"markdown-it-image-figures": "^2.1.1",

public/css/code.css

@@ -1,4 +1,17 @@
-code[class*="language-"], pre[class*="language-"] {
+code {
+	background-color: var(--color-gray-20);
+	border-radius: 0.3em;
+	font-size: var(--step--1);
+	padding: 0 var(--space-3xs);
+}
+@media (prefers-color-scheme: dark) {
+	code {
+		background-color: var(--card-color);
+	}
+}
+
+code[class*="language-"],
+pre[class*="language-"] {
 	color: #f8f8f2;
 	background: none;
 	text-shadow: 0 1px rgba(0, 0, 0, 0.3);
@@ -21,10 +34,30 @@ code[class*="language-"], pre[class*="language-"] {
 	hyphens: none;
 }
 
+/* Code Fences */
+pre,
+code {
+	font-family: var(--font-family-monospace);
+}
+pre:not([class*="language-"]) {
+	margin: 0.5em 0;
+	-moz-tab-size: var(--syntax-tab-size);
+	-o-tab-size: var(--syntax-tab-size);
+	tab-size: var(--syntax-tab-size);
+	-webkit-hyphens: none;
+	-ms-hyphens: none;
+	hyphens: none;
+	direction: ltr;
+	text-align: left;
+	white-space: pre;
+	word-spacing: normal;
+	word-break: normal;
+}
+
 /* Code blocks */
 pre[class*="language-"] {
 	padding: var(--space-2xs);
-	margin: .5em 0;
+	margin: 0.5em 0;
 	overflow: auto;
 	border-radius: 0.3em;
 }
@@ -36,8 +69,8 @@ pre[class*="language-"] {
 
 /* Inline code */
 :not(pre) > code[class*="language-"] {
-	padding: .1em;
+	padding: 0.1em;
-	border-radius: .3em;
+	border-radius: 0.3em;
 	white-space: normal;
 }
 
@@ -53,7 +86,7 @@ pre[class*="language-"] {
 }
 
 .token.namespace {
-	opacity: .7;
+	opacity: 0.7;
 }
 
 .token.property,
@@ -146,7 +179,7 @@ pre[class*="language-diff-"] {
 .token.prefix.inserted,
 .token.prefix.deleted {
 	width: var(--eleventy-code-padding);
-	background-color: rgba(0,0,0,.2);
+	background-color: rgba(0, 0, 0, 0.2);
 }
 
 /* Optional: full-width background color */

public/css/index.css

@@ -153,9 +153,6 @@ html {
 	font-size: 13px;
 	overflow-y: scroll;
 }
-input.answer {
-	display: inline;
-}
 input:not(.answer, .siteSettingsToggle input),
 textarea {
 	background-color: var(--background-color);
@@ -179,12 +176,10 @@ label {
 	display: block;
 	margin-bottom: var(--space-3xs);
 }
-.answerBox > label {
+article:not(.postlist-item) {
-	display: inline;
+	& h2 {
+		padding-top: var(--space-m);
 	}
-article:not(.postlist-item) h3 {
-	margin-bottom: var(--space-s);
-	margin-top: var(--space-m);
 }
 blockquote p {
 	font-style: italic;
@@ -231,20 +226,6 @@ button,
 .nav-item {
 	font-family: var(--font-family-ui);
 }
-code {
-	background-color: var(--color-gray-20);
-	border-radius: 0.3em;
-	font-size: var(--step--1);
-	padding: 0 var(--space-3xs);
-}
-@media (prefers-color-scheme: dark) {
-	code {
-		background-color: var(--card-color);
-	}
-}
-.links-nextprev > .postlist-item-container {
-	grid-column: var(--span-grid);
-}
 header,
 footer,
 main {
@@ -273,12 +254,6 @@ section {
 	p {
 		grid-column: var(--span-grid);
 	}
-	/* Add fleuron to last <p> in section */
-	> p:not(blockquote > p, p.isso-post-action):last-child:after {
-		content: "\2766";
-		display: inline;
-		font-size: var(--step-1);
-	}
 }
 ::selection {
 	background: var(--contrast-color);
@@ -405,7 +380,6 @@ figure > div > iframe {
 	border-top-left-radius: 0;
 	padding: 0;
 	width: 100%;
-	/* box-shadow: var(--space-2xs) var(--space-2xs) 0 0 var(--contrast-color); */
 }
 
 html.barebones,
@@ -479,85 +453,6 @@ table th {
 	padding-right: 1em;
 }
 
-/* Audio Player */
-.albumCover {
-	object-fit: cover;
-}
-
-.albumCover,
-.coverContainer {
-	width: var(--space-4xl);
-	height: var(--space-4xl);
-	border-radius: var(--border-radius);
-}
-
-.artist {
-	font-size: var(--meta-font-size);
-	margin-bottom: var(--space-s);
-}
-
-.captionAndPlayer {
-	display: flex;
-	flex-flow: column nowrap;
-	justify-content: space-between;
-	width: 100%;
-}
-
-.mplayer {
-	background-color: var(--card-color);
-	border-radius: var(--border-radius);
-	box-shadow: var(--box-shadow);
-	display: flex;
-	gap: var(--space-s);
-	margin: 0 0 var(--space-s) 0;
-	padding: var(--space-m);
-	width: 100%;
-}
-
-.player {
-	align-self: flex-end;
-	border-radius: var(--border-radius);
-	width: 100%;
-}
-
-.songTitle {
-	font-size: var(--step-1);
-	font-variation-settings:
-		"opsz" 50,
-		"wght" 350,
-		"SOFT" 20,
-		"WONK" 1;
-}
-
-/* Mastodon */
-.continue-discussion {
-	grid-column: var(--span-grid);
-}
-.continue-discussion button {
-	margin-top: calc(var(--space-s) * -1);
-	margin-bottom: var(--space-m);
-}
-
-/* Code Fences */
-pre,
-code {
-	font-family: var(--font-family-monospace);
-}
-pre:not([class*="language-"]) {
-	margin: 0.5em 0;
-	-moz-tab-size: var(--syntax-tab-size);
-	-o-tab-size: var(--syntax-tab-size);
-	tab-size: var(--syntax-tab-size);
-	-webkit-hyphens: none;
-	-ms-hyphens: none;
-	hyphens: none;
-	direction: ltr;
-	text-align: left;
-	white-space: pre;
-	word-spacing: normal;
-	word-break: normal;
-}
-
 /* Footnotes */
 .footnotes-list {
 	font-style: italic;
@@ -585,24 +480,6 @@ hr {
 	width: 100%;
 }
 
-/* Dropcap */
-main > section > article.post > p:not(.nodropcap):first-of-type:first-letter {
-	float: left;
-	font-size: var(--step-5);
-	padding: var(--space-2xs);
-	color: var(--contrast-color);
-	border: solid 2px var(--contrast-color);
-	font-family: var(--font-family-headline);
-	font-variation-settings:
-		"opsz" 144,
-		"wght" 500,
-		"SOFT" 10,
-		"WONK" 0;
-	margin: 0.5rem 0.7rem 0 0;
-	border-radius: 0.2em;
-	border-top-left-radius: 0;
-}
-
 /* Header */
 header .home-link {
 	display: grid;
@@ -613,63 +490,6 @@ header .home-link {
 	width: var(--space-l-xl);
 }
 
-/* Microblog */
-.microblog-comment {
-	p {
-		font-style: italic;
-		margin: 0;
-		padding: var(--space-s) 0 0 0;
-	}
-}
-
-.microblog-emoji {
-	font-size: var(--step-6);
-	margin-right: var(--space-s);
-}
-
-.microblog-icon {
-	filter: var(--logo-filter);
-	height: var(--space-4xl);
-	padding-right: var(--space-s);
-	width: var(--space-2xl);
-}
-.microblog-list {
-	.post-metadata {
-		padding: 0;
-	}
-}
-.microblog-post {
-	display: flex;
-	.microblog-comment {
-		p {
-			padding-top: 0;
-			padding-bottom: var(--space-2xs);
-		}
-	}
-}
-
-.microblog-status {
-	&.card {
-		align-items: center;
-		padding: var(--space-s);
-	}
-	.microblog-status-copy {
-		align-items: center;
-		display: flex;
-		flex-flow: column nowrap;
-		p {
-			margin: 0;
-		}
-		.status-metadata {
-			font-family: var(--meta-font-family);
-			font-size: var(--meta-font-size);
-			font-style: var(--meta-font-style);
-			font-variation-settings: var(--meta-font-variation-settings);
-			line-height: calc(var(--meta-font-size) * 0.5 + var(--meta-font-size));
-		}
-	}
-}
-
 /* Info Box */
 
 .info {
@@ -751,120 +571,6 @@ nav ul {
 	); /* Compensate for border thickness */
 }
 
-/* Navigator */
-.navigator {
-	display: grid;
-	gap: var(--space-2xs) var(--space-2xs);
-	grid-template-columns: repeat(auto-fill, minmax(var(--space-6xl), 1fr));
-	width: 100%;
-	.navigatorItem {
-		background-color: var(--background-color);
-		border: 1.5px solid var(--color-gray-20);
-		border-radius: var(--border-radius);
-		color: var(--text-color);
-		display: flex;
-		flex-flow: column wrap;
-		height: var(--space-3xl);
-		text-align: center;
-		a {
-			height: 100%;
-			padding: var(--space-s) var(--space-xs);
-			text-decoration: none;
-			width: 100%;
-			img {
-				aspect-ratio: 1 / 1;
-				filter: var(--logo-filter);
-				width: var(--space-m);
-			}
-		}
-		&:hover {
-			background-color: var(--text-color);
-			border: 1.25px solid var(--text-color);
-			transition: var(--transition-normal);
-			a {
-				color: var(--background-color);
-				transition: var(--transition-normal);
-				img {
-					filter: none;
-					transition: var(--transition-normal);
-				}
-				@media (prefers-color-scheme: dark) {
-					img {
-						filter: brightness(0) saturate(100%) invert(16%) sepia(0%)
-							saturate(1024%) hue-rotate(177deg) brightness(99%) contrast(88%);
-					}
-				}
-			}
-		}
-	}
-}
-
-/* Posts list */
-.postlist,
-.links-nextprev {
-	container: postlist / inline-size;
-}
-.postlist-item {
-	align-items: flex-start;
-	display: flex;
-	flex-flow: row nowrap;
-	justify-content: flex-start;
-	width: 100%;
-}
-.postlist-item-container {
-	display: flex;
-	flex-flow: column nowrap;
-	gap: var(--space-s);
-}
-.post-image {
-	width: var(--space-4xl);
-	height: var(--space-4xl);
-	object-fit: cover;
-	object-position: 50% 50%;
-}
-.post-image-container {
-	border-radius: var(--border-radius);
-	box-shadow: var(--box-shadow);
-	height: var(--space-4xl);
-	max-height: var(--space-4xl);
-	overflow: hidden;
-	width: var(--space-4xl);
-}
-
-.postlist-date,
-.postlist-item:before {
-	color: var(--color-gray-90);
-	font-size: var(--meta-font-size);
-	/*margin: var(--space-2xs) 0;*/
-}
-.postlist-date {
-	word-spacing: -0.5px;
-}
-.postlist-link {
-	font-size: var(--step-5);
-	padding-right: 0.5em;
-	text-decoration: none;
-}
-
-.postlist-link p {
-	background-color: var(--color-gray-90);
-	border-radius: 100px;
-	color: var(--background-color);
-	font-family: var(--font-family-ui);
-	font-size: var(--step--2);
-	font-variation-settings: var(--font-variation-ui);
-	letter-spacing: var(--ui-letter-spacing);
-	margin-top: calc(var(--space-3xs) * -1);
-	padding-left: var(--space-xs);
-	padding-right: var(--space-xs);
-	text-transform: uppercase;
-	width: max-content;
-}
-.post-copy {
-	display: flex;
-	flex-flow: column wrap;
-}
-
 sup {
 	line-height: 0;
 }
@@ -899,121 +605,6 @@ sup {
 	}
 }
 
-/* Tags */
-a.post-tag {
-	background-color: var(--color-gray-20);
-	border-radius: 1rem;
-	color: var(--text-color);
-	font-family: var(--meta-font-family);
-	font-variation-settings: "wght" 300;
-	margin-top: var(--space-3xs);
-	margin-right: var(--space-3xs);
-	padding: 0 var(--space-3xs);
-	text-decoration: none;
-}
-a.post-tag:before {
-	content: "#";
-}
-a.post-tag:visited {
-	color: var(--text-color);
-}
-a.post-tag:hover {
-	color: var(--text-color);
-}
-.tag-feed-icon {
-	fill: var(--rss-orange);
-	height: var(--space-m);
-	transition: var(--transition-normal);
-	width: var(--space-m);
-	&.small {
-		height: var(--space-s);
-		width: var(--space-s);
-	}
-}
-.taglist {
-	display: flex;
-	flex-flow: row wrap;
-	list-style-type: none;
-	padding-left: 0;
-}
-.taglist li a {
-	display: inline-block;
-	font-size: var(--step--1);
-	margin: 0 var(--space-2xs) var(--space-2xs) 0;
-}
-
-.postlist-item > .post-tag {
-	align-self: center;
-}
-
-/* Post Metadata */
-.post-metadata {
-	display: flex;
-	flex-flow: row nowrap;
-	padding: 0 0 var(--space-l) 0;
-}
-
-.post-metadata-copy {
-	display: flex;
-	flex-flow: column nowrap;
-	justify-content: center;
-}
-
-.post-metadata p,
-.post-metadata ul,
-.post-metadata ul li,
-time,
-.metadata {
-	display: flex;
-	flex-flow: row wrap;
-	font-family: var(--meta-font-family);
-	font-size: var(--meta-font-size);
-	font-style: var(--meta-font-style);
-	font-variation-settings: var(--meta-font-variation-settings);
-	line-height: calc(var(--meta-font-size) * 0.5 + var(--meta-font-size));
-	list-style: none;
-	margin: 0;
-	padding-left: 0em;
-}
-
-.post-metadata {
-	padding-left: 0.15rem;
-}
-
-@container postlist (max-width: 500px) {
-	.postlist-item {
-		flex-flow: column wrap;
-	}
-	.post-image-container {
-		margin-left: 0;
-		min-height: var(--space-10xl);
-		width: 100%;
-	}
-	.post-image-container img.post-image {
-		width: 100cqw;
-		height: var(--space-10xl);
-	}
-	.postlist-link {
-		padding: 0;
-	}
-	.postlist-link h3 {
-		padding-top: var(--space-m);
-	}
-	.postlist-link p {
-		margin-top: var(--space-xs);
-	}
-	.post-metadata {
-		padding-bottom: 0;
-	}
-}
-
-.profilePic:not(.links-container > img.profilePic) {
-	border-radius: 100%;
-	height: var(--space-xl);
-	margin-right: var(--space-s);
-	width: var(--space-xl);
-}
-
 /* Direct Links / Markdown Headers */
 a.header-anchor {
 	font-style: normal;
@@ -1037,30 +628,8 @@ h2 + .header-anchor {
 }
 
 /* Components */
-article.post {
-	grid-column: var(--span-grid);
-	container: article / inline-size;
-	/* Add fleuron after last <p> in article */
-	> p:not(blockquote > p):last-child:after {
-		content: "\2766";
-		display: inline;
-		font-size: var(--step-1);
-	}
-}
-.blogroll {
-	display: inline;
-}
-.blogroll-category-group {
-	margin-bottom: var(--space-l);
-	margin-left: var(--space-m);
-	h3 {
-		display: inline;
-	}
-	p {
-		margin: var(--space-2xs) auto;
-	}
-}
 #buttonsAndStuffContainer {
+	/* This lives in the footer*/
 	display: flex;
 	grid-column: var(--span-grid);
 	width: 100%;
@@ -1084,152 +653,7 @@ article.post {
 	padding: var(--single-gap) 1.1rem var(--single-gap) 1.1rem;
 	width: 100%;
 }
-.gallery-images {
-	display: flex;
-	flex-flow: row wrap;
-	row-gap: var(--space-xs-s);
-	column-gap: var(--space-m-l);
-	.gallery-image-container {
-		width: var(--space-7xl-8xl);
-		height: var(--space-7xl-8xl);
-		.gallery-image {
-			border-radius: var(--border-radius);
-			width: var(--space-7xl-8xl);
-			height: var(--space-7xl-8xl);
-			object-fit: cover;
-		}
-	}
-}
 
-/* Guestbook */
-.guestbook-message blockquote {
-	margin-bottom: var(--space-m);
-	margin-top: var(--space-3xs);
-}
-.guestbook-message p {
-	margin-block: 0 0;
-	position: relative;
-	z-index: 1;
-}
-.guestbook-message p b,
-.guestbook-message p small {
-	font-family: var(--meta-font-family);
-	font-size: var(--meta-font-size);
-	font-variation-settings: var(--meta-font-variation-settings);
-}
-#guestbooks___challenge-answer-container br,
-.guestbooks___input-container br {
-	display: none;
-}
-.guestbook-message-reply {
-	border-left: var(--border-details);
-	margin-left: var(--space-l);
-	margin-top: calc(var(--space-s) * -1);
-	opacity: 0.9;
-	padding-left: var(--space-s);
-	font-style: italic;
-	& blockquote {
-		margin-left: 0;
-	}
-	& blockquote::before {
-		content: "";
-	}
-	& p::before {
-		content: "Reply from ";
-		font-family: var(--meta-font-family);
-		font-size: var(--meta-font-size);
-		font-variation-settings: var(--meta-font-variation-settings);
-	}
-}
-
-/* Add fleuron after <p> in article when footnotes are present */
-p:has(+ hr.footnotes-sep):after {
-	content: "\2766";
-	display: inline;
-	font-size: var(--step-1);
-}
-
-/* Quiz */
-.answerBox {
-	margin-bottom: var(--space-3xs);
-}
-.answersBox > input {
-	display: block;
-}
-details {
-	background-color: var(--card-color);
-	border: var(--border-details);
-	border-radius: var(--border-radius);
-	color: var(--text-color);
-	margin-top: var(--space-s);
-	padding: var(--space-xs);
-	width: 100%;
-	font-size: var(--step--2);
-	font-variation-settings: var(--font-variation-ui);
-	text-transform: uppercase;
-	letter-spacing: var(--ui-letter-spacing);
-	font-family: var(--font-family-ui);
-
-	::marker {
-		content: "+ ";
-	}
-	&[open] p {
-		font-size: var(--step--2);
-		line-height: calc(var(--step--2) * 0.25 + var(--step--2));
-	}
-	&[open] summary::marker {
-		content: "- ";
-	}
-	&[open] summary {
-		border-bottom: var(--border-details);
-		margin-bottom: var(--space-xs);
-		padding-bottom: var(--space-xs);
-	}
-	summary {
-		font-size: var(--step--2);
-		font-variation-settings: var(--font-variation-ui);
-		text-transform: uppercase;
-		letter-spacing: var(--ui-letter-spacing);
-		font-family: var(--font-family-ui);
-	}
-}
-dialog {
-	background-color: var(--card-color);
-	border: none;
-	border-radius: var(--border-radius);
-	box-shadow: var(--box-shadow);
-	width: var(--grid-max-width);
-	h2 {
-		padding-top: 0;
-	}
-	p {
-		color: var(--text-color);
-	}
-	&::backdrop {
-		background-color: var(--contrast-color);
-		opacity: 0.5;
-	}
-	img {
-		max-width: 100%;
-		padding-top: var(--space-s);
-	}
-}
-.questionBox {
-	margin: var(--space-s) 0;
-	figure {
-		padding-top: 0;
-		padding-bottom: 0;
-	}
-}
-.quizQuestion {
-	font-size: var(--step-2);
-	font-variation-settings:
-		"opsz" 50,
-		"wght" 350,
-		"SOFT" 20,
-		"WONK" 1;
-	line-height: calc(var(--step-2) * 0.25 + var(--step-2));
-}
 /* Utilities */
 .grid-container {
 	max-width: var(--grid-max-width);

public/img/icons/breeze/amarok_cart_view.svg

@@ -0,0 +1,41 @@
+<?xml version="1.0" encoding="UTF-8" standalone="no"?>
+<svg
+   viewBox="0 0 16 16"
+   version="1.1"
+   id="svg1"
+   sodipodi:docname="amarok_cart_view.svg"
+   inkscape:version="1.4.3 (0d15f75042, 2025-12-25)"
+   xmlns:inkscape="http://www.inkscape.org/namespaces/inkscape"
+   xmlns:sodipodi="http://sodipodi.sourceforge.net/DTD/sodipodi-0.dtd"
+   xmlns="http://www.w3.org/2000/svg"
+   xmlns:svg="http://www.w3.org/2000/svg">
+  <sodipodi:namedview
+     id="namedview1"
+     pagecolor="#ffffff"
+     bordercolor="#000000"
+     borderopacity="0.25"
+     inkscape:showpageshadow="2"
+     inkscape:pageopacity="0.0"
+     inkscape:pagecheckerboard="0"
+     inkscape:deskcolor="#d1d1d1"
+     inkscape:zoom="20.17464"
+     inkscape:cx="3.4449189"
+     inkscape:cy="7.1624573"
+     inkscape:window-width="2048"
+     inkscape:window-height="1080"
+     inkscape:window-x="0"
+     inkscape:window-y="0"
+     inkscape:window-maximized="1"
+     inkscape:current-layer="svg1" />
+  <defs
+     id="defs3051">
+    <style
+       type="text/css"
+       id="current-color-scheme">.ColorScheme-Text { color: #fcfcfc; } </style>
+  </defs>
+  <path
+     style="fill:#faf5f5;fill-opacity:1;stroke:none"
+     d="M 8 2 A 3 3 0 0 0 5 5 L 2 5 L 2 6 L 2 13 L 2 14 L 14 14 L 14 13 L 14 6 L 14 5 L 11 5 A 3 3 0 0 0 8 2 z M 8 3 A 2 2 0 0 1 10 5 L 6 5 A 2 2 0 0 1 8 3 z M 3 6 L 5 6 L 5 7.0878906 A 1.5 1.5 0 0 0 4 8.5 A 1.5 1.5 0 0 0 5.5 10 A 1.5 1.5 0 0 0 7 8.5 A 1.5 1.5 0 0 0 6 7.0878906 L 6 6 L 10 6 L 10 7.0878906 A 1.5 1.5 0 0 0 9 8.5 A 1.5 1.5 0 0 0 10.5 10 A 1.5 1.5 0 0 0 12 8.5 A 1.5 1.5 0 0 0 11 7.0878906 L 11 6 L 13 6 L 13 13 L 3 13 L 3 6 z M 5.5 8 A 0.5 0.5 0 0 1 6 8.5 A 0.5 0.5 0 0 1 5.5 9 A 0.5 0.5 0 0 1 5 8.5 A 0.5 0.5 0 0 1 5.5 8 z M 10.5 8 A 0.5 0.5 0 0 1 11 8.5 A 0.5 0.5 0 0 1 10.5 9 A 0.5 0.5 0 0 1 10 8.5 A 0.5 0.5 0 0 1 10.5 8 z "
+     class="ColorScheme-Text"
+     id="path1" />
+</svg>

public/xsl/basic.xsl

@@ -11,12 +11,14 @@
       </title>
       <link rel="stylesheet" href="../css/index.css"/>
       <link rel="stylesheet" href="../css/webfonts/webfonts.css"/>
+      <link rel="stylesheet" href="../css/post-list.css"/>
+      <link rel="stylesheet" href="../css/metadata.css"/>
     </head>
     <body>
 			<main>
 				<h1>RSS Feed Preview</h1>
 				<p class="nodropcap page-block">This is an RSS feed. Subscribe by copying the URL from the address bar into your newsreader. Don’t have a newsreader? <a href="../about-feeds/">Learn more and get started</a>. It’s free. Below is a preview of what you’ll see in your newsreader when you subscribe. Done here? <a href="../">Go back to nathanupchurch.com</a></p>
-				<h2>Latest posts</h2>
+				<h2>Posts</h2>
 				<section class="postlist">
 					<div class="postlist-item-container">
 						<xsl:for-each select="/atom:feed/atom:entry">