Add post

_data/metadata.js

@@ -3,18 +3,19 @@ export default {
 	logo: "/img/logo.svg",
 	url: "https://nathanupchurch.com/",
 	language: "en",
-	description: "The personal website and blog of Nathan Upchurch, where I write about incense, free and open source software, design, vegan cooking, music, and all sorts of other topics that I find interesting.",
+	description:
+		"The personal website and blog of Nathan Upchurch, where I write about incense, free and open source software, design, vegan cooking, music, and all sorts of other topics that I find interesting.",
 	author: {
 		givenName: "Nathan",
 		familyName: "Upchurch",
 		name: "Nathan Upchurch",
 		email: "blog@upchur.ch",
 		url: "https://nathanupchurch.com/me",
-		profilePic: "/img/CN20191025_301_Srt_SQUARE_crop.jpg"
+		profilePic: "/img/CN20191025_301_Srt_SQUARE_crop.jpg",
 	},
 	copyrightNotice: "© Nathan Upchurch 2022 - 2024",
-	defaultPostImageURL: "/img/vasilina-sirotina-1NMPvajSt9Q-unsplash_copy.avif",
-	defaultPostImageAlt: "The default post image: a close picture of the dark green leaves of a plant.",
+	defaultPostImageURL: "/img/logo_post.svg",
+	defaultPostImageAlt: "The logo for this blog: a capital letter N.",
 	mastodonHost: "lounge.town",
 	mastodonUser: "nathanu",
 	postlistHeaderText: "Latest posts from the blog:",
@@ -23,70 +24,70 @@ export default {
 			title: "My Blog",
 			linkURL: "https://nathanupchurch.com",
 			linkDisplay: "My Blog",
-			iconURL: "/img/logo.svg"
+			iconURL: "/img/logo.svg",
 		},
 		{
 			title: "Mastodon",
 			linkURL: "https://lounge.town/@nathanu",
 			customAttribute: `rel="me"`,
 			linkDisplay: "Mastodon",
-			iconURL: "/img/mastodon.svg"
+			iconURL: "/img/mastodon.svg",
 		},
 		{
 			title: "Email Me",
 			linkURL: "Mailto:blog@upchur.ch",
 			linkDisplay: "Email",
-			iconURL: "/img/envelope.svg"
+			iconURL: "/img/envelope.svg",
 		},
 		{
 			title: "Matrix",
 			linkURL: "https://matrix.to/#/@nathan:upchur.ch",
 			linkDisplay: "Matrix",
-			iconURL: "/img/matrix-org.svg"
+			iconURL: "/img/matrix-org.svg",
 		},
 		{
 			title: "BookWyrm",
 			linkURL: "https://ramblingreaders.org/user/NathanU",
 			linkDisplay: "BookWyrm",
-			iconURL: "/img/book.svg"
+			iconURL: "/img/book.svg",
 		},
 		{
 			title: "Pixelfed",
 			linkURL: "https://pixelfed.social/@nathanu",
 			linkDisplay: "Pixelfed",
-			iconURL: "/img/pixelfed.svg"
+			iconURL: "/img/pixelfed.svg",
 		},
 		{
 			title: "Lemmy",
 			linkURL: "https://lemmy.ml/u/NathanUp",
 			linkDisplay: "Lemmy",
-			iconURL: "/img/Lemmy_logo.svg"
+			iconURL: "/img/Lemmy_logo.svg",
 		},
 		{
 			title: "PeerTube",
 			linkURL: "https://dalek.zone/a/nathan_upchurch/",
 			linkDisplay: "PeerTube",
-			iconURL: "/img/peertube.svg"
+			iconURL: "/img/peertube.svg",
 		},
 		{
 			title: "Keyoxide Identity Profile",
 			linkURL: "https://keyoxide.org/31E809FAEA1532AC91BBDCF1EC499D3513F69340",
 			linkDisplay: "Keyoxide Identity Profile",
-			iconURL: "/img/keyoxide.svg"
-		}
+			iconURL: "/img/keyoxide.svg",
+		},
 	],
 	webrings: [
 		{
 			name: "Fediring",
 			ringURL: "https://fediring.net/",
 			previousURL: "https://fediring.net/previous?host=nathanupchurch.com",
-			nextURL: "https://fediring.net/next?host=nathanupchurch.com"
+			nextURL: "https://fediring.net/next?host=nathanupchurch.com",
 		},
 		{
 			name: "Geekring",
 			ringURL: "https://geekring.net/",
 			previousURL: "http://geekring.net/site/350/previous",
-			nextURL: "http://geekring.net/site/350/next"
-		}
-	]
-}
+			nextURL: "http://geekring.net/site/350/next",
+		},
+	],
+};

_includes/layouts/home.njk

@@ -3,6 +3,6 @@ layout: layouts/base.njk
 showPostListHeader: yep
 ---
 <h1>Hi there, friend.</h1>
-<p class="nodropcap page-block">My name is Nathan Upchurch. Welcome to my personal website and blog, where I write about <a href="./tags/incense/">incense,</a> <a href="./tags/foss-floss/">free and open source software,</a> design, <a href="./tags/vegan-cooking/">vegan cooking,</a> music, and all sorts of <a href="/tags">other topics</a> that I find interesting. Learn more <a href="about">about me,</a> see <a href="now">what I’ve been up to lately,</a> or have a look at my latest blog posts below.</p>
+<p class="nodropcap page-block">My name is Nathan Upchurch. Welcome to my personal website and blog, where I write about <a href="./tags/incense/">incense</a>, <a href="./tags/foss-floss/">free and open source software</a>, design, <a href="./tags/vegan-cooking/">vegan cooking</a>, music, and all sorts of <a href="/tags">other topics</a> that I find interesting. Learn more <a href="about">about me</a>, see <a href="now">what I’ve been up to lately</a>, or have a look at my latest blog posts below.</p>
 
 {{ content | safe }}

_includes/layouts/post.njk

@@ -13,7 +13,7 @@ layout: layouts/base.njk
 	{% endif %}
 	<div class="post-metadata-copy">
 		<p>{% if author.url %}<a href="{{ author.url }}">{% endif %}
-		{% if author.name %}{{ author.name }},&nbsp;{% endif %}{% if author.url %}</a>{% endif %}<time datetime="{{ page.date | htmlDateString }}">{{ page.date | readableDate }}</time></p>
+		{% if author.name %}{{ author.name }}{% endif %}{% if author.url %}</a>,&nbsp;{% endif %}<time datetime="{{ page.date | htmlDateString }}">{{ page.date | readableDate }}</time></p>
 
 	{% else %}
 	{% if metadata.author.profilePic %}
@@ -21,7 +21,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 %}{{ metadata.author.name }},&nbsp;{% endif %}{% if metadata.author.url %}</a>{% endif %}<time datetime="{{ page.date | htmlDateString }}">{{ page.date | readableDate }}</time></p>
+		{% if metadata.author.name %}{{ metadata.author.name }}{% endif %}{% if metadata.author.url %}</a>,&nbsp;{% endif %}<time datetime="{{ page.date | htmlDateString }}">{{ page.date | readableDate }}</time></p>
 
 	{% endif %}
 

content/blog.njk

@@ -7,7 +7,7 @@ eleventyNavigation:
 <h1>Nathan’s Blog.</h1>
 
 <p class="page-block nodropcap">
-Thank you for visiting my blog; I write about lots of things here, from <a href="/tags/storytime">personal stories,</a> to <a href="/tags/gnu-linux">tech,</a> <a href="/tags/vegan-cooking">food,</a> and <a href="/tags/incense">incense.</a> Explore all posts below or <a href="/tags/">choose a topic.</a>
+Thank you for visiting my blog; I write about lots of things here, from <a href="/tags/storytime">personal stories</a>, to <a href="/tags/gnu-linux">tech</a>, <a href="/tags/vegan-cooking">food</a>, and <a href="/tags/incense">incense</a>. Explore all posts below or <a href="/tags/">choose a topic</a>.
 </p>
 <h2>What’s New:</h2>
 {% set postslist = collections.posts %}

content/blog/silvertip.md

@@ -0,0 +1,41 @@
+---
+title: "Silver Tip: an Incense Build Featuring Osmanthus and Mastic"
+description: "I make a fresh, sweet, and green incense build reminiscent of the flavor of white tea"
+date: 2024-09-20
+tags:
+  - Incense
+synopsis: "I make a fresh, sweet, and green incense build reminiscent of the flavor of white tea."
+imageURL: /img/testAsh.webp
+imageAlt: "A small tin labelled 'test ash' beside a small glass jar containing matches."
+mastodon_id: "113173725532729481"
+---
+If my memory serves me, some time ago I tried a stick from [Yi-Xin](https://craft-incense.com/) that contained osmanthus flowers and mastic gum. I recall enjoying the combination, so when I found a bag of dried osmanthus on sale while [doing some online grocery shopping](https://www.sayweee.com), I set out to make something using these ingredients.
+
+Having read that osmanthus, like lavender, was one of those few flowers that could be used successfully in incense, I was brimming with confidence as I ground them finely and made an attempt at a batch of sticks containing 19% of the powder. The result was ghastly. At this percentage, alongside that characteristic beautiful fruity fragrance was a proportionate helping of the acrid scent of burning plant matter. Following this failure, I put aside my hubris, opened my tin of 'test ash'[^1] and began testing incense powders comprised of differing ratios of osmanthus and base-wood in a series of trail-burning tests, eventually finding that a ratio of 10% osmanthus to base wood seemed to return a reasonably good fragrance in the burn.
+
+[![A small tin labelled "test ash" beside a small glass jar containing matches.](/img/testAsh.webp "My test ash; a very convenient way to perform a quick trail burn.")](/img/testAsh.webp)
+
+Armed with this knowledge, I put together a build. The star aromatics sit atop a woody base of sandalwood and juniper sweetened by a touch of benzoin; the composition is slightly lifted with a minuscule amount of camphor, bound with guar gum and a little acacia gum. While also acting as a weak binder, the acacia gum is present to lower the burn temperature and strengthen the sticks.
+
+## The Build
+|Ingredient|Grams|% of Build|
+|----------|------|-----------|
+|Juniperus Virginiana|2.6|35.62%|
+|Santalum Spicatum|2.6|35.62%|
+|Osmanthus Fragrans|0.73|10%|
+|Mastic Gum|0.5|6.85%|
+|Acacia Gum|0.3|4.11%|
+|Benzoin Siam|0.25|3.42%|
+|Guar Gum|0.25|3.42%|
+|Borneol Camphor|0.07|0.96%|
+
+As with all of my incense, I extruded the dough into 2-2.5mm coreless sticks which I then dried on a mesh screen at room temperature and left to cure for a number of weeks.
+
+## Conclusion
+The sticks this build produces offer a [quiet listen](https://kikohincense.com/pages/listening-to-incense), but I find it very pleasant. Something about the combination of juniper, mastic, and osmanthus forms a fragrance that's at once green and fruity, with a bright, peachy, stone-fruit note, all atop a woody base. After a couple of months, the camphor is barely there on the stick; whether it is present in the burn is difficult to say without trying a build sans borneol.[^2]
+
+My partner has a small wood-burning backpacking stove they like to use to make tea while camping. While I haven't yet had the pleasure, I have to imagine that making a cup of white tea on such a stove in a juniper forest would smell similar to the fragrance of this stick.
+
+
+[^1]: I use the stick of a cotton swab to create a divot in the ash bed, which I carefully fill with incense powder to be tamped down, lit, and evaluated. When I'm done, I simply close the lid, shake the container, and drop it once or twice on a flat surface to smooth the ash and prepare it for the next use.
+[^2]: Such a tricky ingredient, camphor. The tiniest amount can seem utterly overwhelming when blending or on a fresh stick, and as incense cures and ages, it seems as though it may or may not mellow out in the burn.

content/blog/tech-wizard.md

@@ -0,0 +1,23 @@
+---
+title: "The Office Tech Wizard"
+description: "Knowing how to operate a PDF viewer does not a tech wizard make; what it means to be good at your job."
+date: 2024-09-21
+tags:
+  - Quick Thoughts
+synopsis: "Knowing how to operate a PDF viewer does not a tech wizard make; what it means to be good at your job."
+mastodon_id: "113178005978869507"
+---
+
+I came across [this submission to *Not Always Right*](https://notalwaysright.com/pdf-pretty-darn-futile-part-2/) today, and it got me thinking about some of the attitudes towards technology I've seen over the years. There is a contingent of people in many workplaces who believe they can do a perfectly good job without investing the time in learning about the tech they use each day; after all, their work gets done, doesn't it? We've all encountered this sort; the sort of person who's so far removed from a basic understanding of the tools they use each day that they'll brand you the office tech-wizard for knowing how to use the zoom function in a PDF viewer, copy and paste with the keyboard alone, or *(gasp!)* googling how to restart the print spooler when a job gets stuck. And sure, many of these folks do manage to get things done, but a problem arises when you consider *how.*
+
+Early career folk don't have the luxury of being bad at their tools; it's sink or swim. So when older colleagues or those later in their career don't know how to use a particular piece of software, guess who has to pick up the slack? This isn't necessarily a problem in and of itself; there's nothing wrong with not knowing something and needing a bit of assistance, but this quickly becomes a problem when people decide that they are exempt from learning because of their age, position, workload, et cetera. At this stage, one individual's job becomes a team effort; because of someone's attitude towards technology, another person who also has their own tasks and responsibilities is *doing their job with them.*
+
+In considering what it is to be good at one's job, let's leave outcomes off the table for a minute. If someone has to rely on a team to do their job, no matter the result, can they seriously claim to be good at it? Surely knowledge and experience are moot if someone cannot actually perform their work. What sort of value does this individual provide an organization when they systematically reduce the productivity of their more capable colleagues each day? Further, in what other industry can people get away with this attitude? It's unthinkable that there might be a mechanic who refused to learn to work a hammer, a writer who refuses to sharpen a pencil, or a microbiologist who can't operate a microscope and is just 'too swamped' to learn how to prepare a slide. To me, a white-collar worker not knowing how to use the zoom function in a PDF viewer is equally ridiculous when working with PDFs is something they do on a regular basis.
+
+So when we consider whether we are good at what we do, atop knowledge, experience, and outcomes, let's include a few new criteria:
+
+1. Do we create or reduce work for others?
+2. Do we truly understand the tools that we use every day?
+3. Can we perform basic maintenance and troubleshooting on our tools?
+
+…or do we rely on a wizard?

eleventy.config.js

@@ -27,7 +27,7 @@ export default async function(eleventyConfig) {
 	// Transforms
 	eleventyConfig.addTransform("prettier", function (content, outputPath) {
 		if (outputPath && outputPath.endsWith(".html")) {
-			return prettier.format(content, {parser: "html", bracketSameLine: true, vueIndentScriptAndStyle: true, singleAttributePerLine: true, htmlWhitespaceSensitivity: "ignore"});
+			return prettier.format(content, {parser: "html", bracketSameLine: true, vueIndentScriptAndStyle: true, singleAttributePerLine: true, htmlWhitespaceSensitivity: "css"});
 		} else {
 			return content;
 		}

public/css/index.css

@@ -9,7 +9,6 @@
 	}
 }
 
-
 /* Defaults */
 :root {
 	--font-family: "Fraunces", serif;
@@ -17,7 +16,10 @@
 	--font-family-ui: "Manrope", sans-serif;
 	--font-variation-default: "opsz" 18, "wght" 310, "SOFT" 40, "WONK" 0;
 	--font-variation-ui: "wght" 500;
-	--font-family-monospace: Consolas, Menlo, Monaco, Andale Mono WT, Andale Mono, Lucida Console, Lucida Sans Typewriter, DejaVu Sans Mono, Bitstream Vera Sans Mono, Liberation Mono, Nimbus Mono L, Courier New, Courier, monospace;
+	--font-family-monospace: Consolas, Menlo, Monaco, Andale Mono WT, Andale Mono,
+		Lucida Console, Lucida Sans Typewriter, DejaVu Sans Mono,
+		Bitstream Vera Sans Mono, Liberation Mono, Nimbus Mono L, Courier New,
+		Courier, monospace;
 	--meta-font-family: "Fraunces", serif;
 	--meta-font-size: var(--step--1);
 	--meta-font-style: normal;
@@ -42,7 +44,8 @@
 /* Design Tokens */
 :root {
 	/* Animations */
-	--slide-in-blurred-bottom: slide-in-blurred-bottom 0.75s cubic-bezier(0.230, 1.000, 0.320, 1.000) both;
+	--slide-in-blurred-bottom: slide-in-blurred-bottom 0.75s
+		cubic-bezier(0.23, 1, 0.32, 1) both;
 
 	/* Colors */
 	--color-gray-20: #e0e0e0;
@@ -50,7 +53,7 @@
 
 	--card-color: white;
 	--contrast-color: #027860;
-	--background-color: #FAF5F5;
+	--background-color: #faf5f5;
 	--rss-orange: rgb(255, 152, 0);
 	--text-color: var(--color-gray-90);
 	--text-color-link: var(--text-color);
@@ -91,33 +94,35 @@
 	--space-2xl-3xl: clamp(5rem, 2.7465rem + 11.2676vw, 9rem);
 
 	/* Custom pairs - https://utopia.fyi/ */
-  --space-s-l: clamp(1.25rem, 0.2641rem + 4.9296vw, 3rem);
+	--space-s-l: clamp(1.25rem, 0.2641rem + 4.9296vw, 3rem);
 
 	/* Fluid Grid Tokens - https://utopia.fyi/ */
-	--grid-max-width: 55.50rem;
+	--grid-max-width: 55.5rem;
 	--grid-gutter: var(--space-s-s, clamp(1.25rem, 1.1092rem + 0.7042vw, 1.5rem));
 	--grid-columns: 12;
 
 	/* Change <img> SVG color with filter */
-	--logo-filter: brightness(0) saturate(100%) invert(16%) sepia(0%) saturate(1024%) hue-rotate(177deg) brightness(99%) contrast(88%);
+	--logo-filter: brightness(0) saturate(100%) invert(16%) sepia(0%)
+		saturate(1024%) hue-rotate(177deg) brightness(99%) contrast(88%);
 	--icon-filter: none;
 
 	/* Corners */
-	--border-radius: .3rem;
+	--border-radius: 0.3rem;
 
 	/* Transitions */
-	--transition-normal: all .3s;
+	--transition-normal: all 0.3s;
 
 	/* Links */
-	--link-decoration-thickness: .1rem;
+	--link-decoration-thickness: 0.1rem;
 
 	/* Borders */
+	--border-hr: 0.5px solid var(--color-gray-20);
 	--border-nav: 1px solid var(--text-color);
 	--border-nav-currentpage: var(--space-xs-s) solid var(--contrast-color);
 	--border-nav-hover: var(--space-xs-s) solid var(--text-color);
 
 	/* Shadow */
-	--box-shadow: 0 4px 8px 0 rgba(0,0,0,0.2);
+	--box-shadow: 0 4px 8px 0 rgba(0, 0, 0, 0.2);
 
 	/* Web Component Tokens */
 	--wc-card-background-color: var(--card-color);
@@ -144,7 +149,8 @@
 
 		--background-color: #15202b;
 		--logo-filter: none;
-		--icon-filter: brightness(0) saturate(100%) invert(9%) sepia(76%) saturate(340%) hue-rotate(168deg) brightness(95%) contrast(94%);
+		--icon-filter: brightness(0) saturate(100%) invert(9%) sepia(76%)
+			saturate(340%) hue-rotate(168deg) brightness(95%) contrast(94%);
 	}
 	.socialLinks a li img {
 		filter: auto;
@@ -162,7 +168,7 @@ body {
 	color: var(--text-color);
 	font-family: var(--font-family);
 	font-variation-settings: var(--font-variation-default);
-	font-variant-Ligatures: normal;
+	font-variant-ligatures: normal;
 	margin: 0 auto;
 	padding: 0;
 }
@@ -179,7 +185,7 @@ blockquote:before {
 	margin-left: -4rem;
 	margin-top: -2rem;
 	position: fixed;
-	filter: opacity(.15);
+	filter: opacity(0.15);
 }
 body {
 	animation: var(--slide-in-blurred-bottom);
@@ -190,7 +196,8 @@ body {
 	padding-top: var(--space-m);
 	padding-bottom: var(--space-m);
 }
-button, .nav-item {
+button,
+.nav-item {
 	font-family: var(--font-family-ui);
 }
 code {
@@ -204,7 +211,9 @@ code {
 		background-color: var(--card-color);
 	}
 }
-header, footer, main {
+header,
+footer,
+main {
 	display: grid;
 	gap: var(--grid-gutter);
 	grid-template-columns: repeat(var(--grid-columns), 1fr);
@@ -229,7 +238,7 @@ section {
 	grid-column: 1 / span 12;
 	font-size: var(--step-1);
 	margin: 0;
-	padding-bottom:  var(--space-xl);
+	padding-bottom: var(--space-xl);
 	padding-top: var(--space-l);
 	line-height: calc(var(--step-1) * 0.5 + var(--step-1));
 }
@@ -260,7 +269,9 @@ footer p {
 	font-size: var(--step-0);
 	grid-column: 1 / span 12;
 }
-h1, h2, h3 {
+h1,
+h2,
+h3 {
 	color: var(--text-color);
 	grid-column: 1 / span 12;
 	margin: 0;
@@ -268,14 +279,22 @@ h1, h2, h3 {
 }
 h1 {
 	font-family: var(--font-family-headline);
-	font-variation-settings: "opsz" 100, "wght" 500, "SOFT" 10, "WONK" 1;
+	font-variation-settings:
+		"opsz" 100,
+		"wght" 500,
+		"SOFT" 10,
+		"WONK" 1;
 	font-size: var(--step-5);
 	font-style: normal;
 	line-height: calc(var(--step-5) * 0.25 + var(--step-5));
 }
 h2 {
 	font-size: var(--step-2);
-	font-variation-settings: "opsz" 50, "wght" 350, "SOFT" 20, "WONK" 1;
+	font-variation-settings:
+		"opsz" 50,
+		"wght" 350,
+		"SOFT" 20,
+		"WONK" 1;
 	padding-bottom: var(--space-l);
 	padding-top: var(--space-xl);
 }
@@ -292,7 +311,8 @@ main {
 	grid-column: 1 / 12;
 	padding-top: var(--space-3xl);
 }
-main > p > img, main > p > a > img {
+main > p > img,
+main > p > a > img {
 	width: 100%;
 	padding-top: var(--space-l);
 }
@@ -306,12 +326,17 @@ pre {
 p:last-child {
 	margin-bottom: 0;
 }
-p, li {
+p,
+li {
 	font-size: var(--step-0);
 	line-height: calc(var(--step-0) * 0.5 + var(--step-0));
 }
 th {
-	font-variation-settings: "opsz" 25, "wght" 500, "SOFT" 40, "WONK" 0;
+	font-variation-settings:
+		"opsz" 25,
+		"wght" 500,
+		"SOFT" 40,
+		"WONK" 0;
 	padding-bottom: var(--space-2xs);
 	text-align: left;
 }
@@ -328,7 +353,8 @@ figure > a > img {
 	box-shadow: var(--space-2xs) var(--space-2xs) 0 0 var(--contrast-color);
 }
 
-html.barebones, body.barebones {
+html.barebones,
+body.barebones {
 	background-color: var(--background-color);
 	text-align: center;
 }
@@ -354,7 +380,7 @@ button {
 }
 button > img {
 	max-width: 1em;
-	margin-right: .5em;
+	margin-right: 0.5em;
 	filter: var(--icon-filter);
 }
 a.link-button {
@@ -401,14 +427,16 @@ table th {
 .continue-discussion button {
 	margin-top: var(--space-xs);
 }
-wc-comment::part(author-link), wc-toot::part(author-link) {
+wc-comment::part(author-link),
+wc-toot::part(author-link) {
 	font-size: var(--step-0);
 	text-decoration: none;
 }
 wc-comment::part(main) {
 	padding: var(--space-m);
 }
-wc-comment::part(publish-date), wc-toot::part(publish-date) {
+wc-comment::part(publish-date),
+wc-toot::part(publish-date) {
 	font-family: var(--meta-font-family);
 	font-size: var(--meta-font-size);
 	font-style: var(--meta-font-style);
@@ -419,7 +447,8 @@ wc-toot::part(main) {
 	font-family: var(--meta-font-family);
 	font-size: var(--step--1);
 }
-wc-toot::part(author), wc-toot::part(author-link){
+wc-toot::part(author),
+wc-toot::part(author-link) {
 	color: white;
 	font-style: var(--meta-font-style);
 	font-variation-settings: "wght" 600;
@@ -430,7 +459,7 @@ code {
 	font-family: var(--font-family-monospace);
 }
 pre:not([class*="language-"]) {
-	margin: .5em 0;
+	margin: 0.5em 0;
 	-moz-tab-size: var(--syntax-tab-size);
 	-o-tab-size: var(--syntax-tab-size);
 	tab-size: var(--syntax-tab-size);
@@ -447,18 +476,47 @@ code {
 	word-break: break-all;
 }
 
-/* Dropcap */
+/* Footnotes */
+.footnotes-list {
+	font-style: italic;
+	margin-top: 0;
+	margin-bottom: 0;
+	> li,
+	> li > p {
+		font-size: var(--step--1);
+	}
+}
+.footnote-item::marker {
+	font-style: normal;
+}
+.footnote-ref {
+	> a {
+		font-size: var(--step--2);
+		text-decoration: none;
+	}
+	:before {
+		content: " ";
+	}
+}
+hr.footnotes-sep {
+	border: var(--border-hr);
+}
 
+/* Dropcap */
 main > section > article > p:not(.nodropcap):first-of-type:first-letter {
 	float: left;
 	font-size: var(--step-6);
-	padding: .5rem .5rem .5rem .5rem;
+	padding: 0.5rem 0.5rem 0.5rem 0.5rem;
 	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: .5rem .7rem 0 0;
-	border-radius: .2em;
+	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;
 }
 
@@ -487,7 +545,7 @@ nav ul {
 .nav-icon {
 	fill: var(--color-gray-90);
 	height: var(--space-2xs);
-	margin-right: .25rem;
+	margin-right: 0.25rem;
 	transition: var(--transition-normal);
 	width: var(--space-2xs);
 }
@@ -513,7 +571,9 @@ nav ul {
 	border-top: var(--border-nav-hover); /* Increase border thickness */
 }
 .nav-item:hover a {
-	margin-top: calc(var(--space-xs-s) * -2); /* Compensate for border thickness */
+	margin-top: calc(
+		var(--space-xs-s) * -2
+	); /* Compensate for border thickness */
 }
 .nav-item a[href]:visited {
 	color: var(--text-color);
@@ -528,9 +588,13 @@ nav ul {
 .nav-item[data-currentpage="true"] {
 	border-top: var(--border-nav-currentpage);
 }
-.nav-item[data-currentpage="true"] a, .nav-item[data-currentpage="true"] a[href]:visited, .nav-item[data-currentpage="true"]:hover a {
+.nav-item[data-currentpage="true"] a,
+.nav-item[data-currentpage="true"] a[href]:visited,
+.nav-item[data-currentpage="true"]:hover a {
 	color: var(--contrast-color);
-	margin-top: calc(var(--space-xs-s) * -2); /* Compensate for border thickness */
+	margin-top: calc(
+		var(--space-xs-s) * -2
+	); /* Compensate for border thickness */
 }
 
 /* Posts list */
@@ -543,7 +607,7 @@ nav ul {
 	align-items: flex-start;
 	background-color: var(--card-color);
 	border-radius: var(--border-radius);
-	box-shadow: 0 4px 8px 0 rgba(0,0,0,0.2);
+	box-shadow: 0 4px 8px 0 rgba(0, 0, 0, 0.2);
 	display: flex;
 	flex-flow: row nowrap;
 	justify-content: flex-start;
@@ -551,10 +615,10 @@ nav ul {
 	width: 100%;
 }
 
-
-.postlist, .links-nextprev {
+.postlist,
+.links-nextprev {
 	container: postlist / inline-size;
- }
+}
 
 .post-image-container {
 	border-radius: var(--border-radius);
@@ -576,8 +640,8 @@ nav ul {
 }
 .postlist-link {
 	font-size: var(--step-5); /* 19px /16 */
-	padding-right: .5em;
- 	text-decoration: none;
+	padding-right: 0.5em;
+	text-decoration: none;
 }
 
 .postlist-link p {
@@ -657,7 +721,7 @@ a.post-tag:hover {
 	padding-left: 0;
 }
 .taglist li {
-	margin: 0em .5em 1.25em 0em;
+	margin: 0em 0.5em 1.25em 0em;
 }
 .taglist li a {
 	font-size: var(--step-2);
@@ -681,7 +745,11 @@ a.post-tag:hover {
 	padding-left: var(--space-s);
 }
 
-.post-metadata p, .post-metadata ul, .post-metadata ul li, time, .metadata {
+.post-metadata p,
+.post-metadata ul,
+.post-metadata ul li,
+time,
+.metadata {
 	display: flex;
 	flex-flow: row wrap;
 	font-size: var(--meta-font-size);
@@ -694,7 +762,7 @@ a.post-tag:hover {
 }
 
 .post-metadata time {
-	padding-left: .15rem;
+	padding-left: 0.15rem;
 }
 
 .profilePic:not(.links-container > img.profilePic) {
@@ -705,7 +773,7 @@ a.post-tag:hover {
 /* Direct Links / Markdown Headers */
 a.header-anchor {
 	font-style: normal;
-	margin-left: .1em;
+	margin-left: 0.1em;
 	text-decoration: none;
 }
 a[href].header-anchor,
@@ -728,14 +796,21 @@ h2 + .header-anchor {
 article.post {
 	grid-column: 1 / span 12;
 	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);
+	}
 }
 
-/* Adds fleuron to article end */
-article.post > p:not(blockquote > p):last-child:after {
+/* 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);
 }
+
 /* Utilities */
 .grid-container {
 	max-width: var(--grid-max-width);