Add post

Fix <li> inside <a> so screenreader can parse nav

_data/metadata.js

@@ -3,16 +3,19 @@ export default {
 	logo: "/img/logo.svg",
 	url: "https://nathanupchurch.com/",
 	language: "en",
-	description: "The personal website and blog of Nathan Upchurch.",
+	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:",
@@ -21,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/#/@nathanu:matrix.org",
+			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 %}
 

_includes/nav.njk

@@ -2,14 +2,9 @@
 	<h2 class="visually-hidden">Top level navigation menu</h2>
 	<ul class="nav">
 	{%- for entry in collections.all | eleventyNavigation %}
-		<a class="nav-item" href="{{ entry.url }}"{% if entry.url == page.url %} aria-current="page" data-currentpage="true"{% endif %}>
-			<li>{{ entry.title }}</li>
-		</a>
+		<li class="nav-item" {% if entry.url == page.url %} aria-current="page" data-currentpage="true"{% endif %}><a href="{{ entry.url }}">{{ entry.title }}</a></li>
 	{%- endfor %}
-		<a class="nav-item" href="/feed/feed.xml">
-			<li class="subscribe">
-			{% include "rssLogo.njk" %}Feed
+		<li class="subscribe nav-item"><a href="/feed/feed.xml">{% include "rssLogo.njk" %}Feed</a>
 		</li>
-		</a>
 	</ul>
 </nav>

_includes/structuredData.njk

@@ -3,17 +3,23 @@
 <script type="application/ld+json">
 {
 	"@context": "https://schema.org/",
-	"@type": "Article",
-	"headline": "{{ title }}",
+	"@type": "BlogPosting",
+	"articleBody": "{{ content | striptags }}"
 	"author": {
 		"@type": "Person",
-		"name": "{{ metadata.author.name }}"
+		"familyName": "{{ metadata.author.familyName }}",
+		"givenName": "{{ metadata.author.givenName }}",
+		"image": "{{ metadata.url }}{{ metadata.author.profilePic }}",
+		"name": "{{ metadata.author.name }}",
+		"url": "{{ metadata.author.url }}"
 	},
 	"datePublished": "{{ date }}",
 	"description": "{% if synopsis %}{{ synopsis}}{% endif %}",
+	"headline": "{{ title }}",
 	"image": "{% if imageURL %}{{ imageURL | htmlBaseUrl(metadata.url) }}{% else %}{{ metadata.defaultPostImageURL | htmlBaseUrl(metadata.url) }}{% endif %}",
+	"inLanguage": "{{ metadata.language }}",
+	"name": "{{ title }}",
 	"url": "{{ page.url | htmlBaseUrl(metadata.url) }}",
-	"articleBody": "{{ content | striptags }}"
 }
 </script>
 <!-- Open Graph -->

content/blog.njk

@@ -7,7 +7,7 @@ eleventyNavigation:
 <h1>Nathan’s Blog.</h1>
 
 <p class="page-block nodropcap">
-Looking for something in particular? Have a look at <a href="/tags/">this convenient list of post categories</a> to filter results by topic.
+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/cowsay_2024-01-02.md

@@ -10,5 +10,4 @@ imageAlt: An ASCII cow with a thought bubble containing the word wut
 mastodon_id: "111688829907363670"
 ---
 As a big-old nerd, I spend a lot of time in the terminal on my computer. When you spend a lot of time somewhere, you want it to be comfortable. As a part of making my terminal more homey, I've set it up to give me a random quote each time I start a new session, delivered, of course, by a cow. Here's today's cowsay of the day:
-
 {{  cowList.onScience | cowsay | safe }}

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?

content/blog/that-time-i-drew-my-ex.md

@@ -0,0 +1,31 @@
+---
+title: That Time I Drew My Ex
+description:  The tale of the time I made my best effort to draw my live-modeling ex. Also some not-very-good art.
+date: 2024-08-20
+tags:
+  - Storytime
+  - Quick Thoughts
+synopsis: The tale of the time I made my best effort to draw my live-modeling ex. Also some not-very-good art.
+imageURL: /img/doodle.webp
+imageAlt: A wiggly vector ice cream cone with a wee smiling face and colorful sprinkles. The cone is holding two smaller ice cream cones in its long, wiggly arms, one of which is wrapped around its body.
+mastodon_id: "112996800811207774"
+---
+At the start of the pandemic, I had just begun a relationship with an artist who had the occasional gig doing a bit of nude live modeling.
+
+[![A wiggly vector ice cream cone with a wee smiling face and colorful sprinkles. The cone is holding two smaller ice cream cones in its long, wiggly arms, one of which is wrapped around its body.](/img/doodle.webp "Not my ex")](/img/doodle.webp)
+
+When he invited me to join a session via zoom, I was apprehensive. Drawing has never been my strong suit. I can *doodle,* but I can't *draw.* But hey, I thought, I'm not completely devoid of artistic skill. I *have* been doing design work for years; while graphic design is not art, it's at least art-adjacent. Hell, when I sit down and take my time, I can produce something that's downright fridge-worthy!
+
+[![A crude oil pastel ocean-scape featuring a sunset. Wee boats bob about on the waves and little birds fly above them.](/img/pastel.webp "I'd put that on my fridge!")](/img/pastel.webp)
+
+Prepared to do my best, I settled down with my laptop, some pencils, and a pad of paper. What I was not prepared for, however, was how quickly the poses would change. There I was, expecting a good chunk of time to carefully render my new boyfriend in loving detail, only to have the pose end before I'd even managed an outline! And so I changed my strategy: I decided to prioritize *speed.* That didn't work either. Here are some of the results:
+
+[![A very speedily drawn cat, with what I think is my ex behind it. It looks like a sack of potatoes.](/img/quicklydrawncat.webp "I'm fairly certain this was supposed to be his cat.")](/img/quicklydrawncat.webp)
+
+[![This drawing, honest to god, looks like a rotisserie chicken with a perm.](/img/chicken.webp "I really don't know what happened  here.")](/img/chicken.webp)
+
+After much scribbling, I did begin to improve, eventually turning out this:
+
+[![A half decent drawing of what is quite clearly a human sitting on the floor.](/img/notbad.webp "I stopped while I was ahead here.")](/img/notbad.webp)
+
+I put the pencil down after that.

content/tags.njk

@@ -11,8 +11,9 @@ pagination:
   addAllPagesToCollections: true
 layout: layouts/base.njk
 eleventyComputed:
-  title: Tagged “{{ tag }}”
-permalink: "/tags/{{ tag | slugify }}/"
+  title: Posts tagged “{{ tag }}”
+	permalink: "/tags/{{ tag | slugify }}/"
+	description: A list of every post I've written tagged “{{ tag }}.”
 ---
 <h1>More posts tagged “{{ tag }}.”
 	<a href="/feeds/{{ tag | slugify }}.xml">
@@ -37,7 +38,7 @@ permalink: "/tags/{{ tag | slugify }}/"
 		</svg>
 	</a>
 </h1>
-<p class="page-block nodropcap">Here’s everything I’ve posted with the tag “{{ tag }}:”</p>
+<p class="page-block nodropcap">Here’s everything I’ve posted tagged “{{ tag }}.” Want to be notified when I post on this topic? <a href="/feeds/{{ tag | slugify }}.xml">Subscribe to “{{ tag }}.”</a></p>
 
 {% set postslist = collections[ tag ] %}
 {% include "postslist.njk" %}

eleventy.config.js

@@ -1,5 +1,4 @@
 import { DateTime } from "luxon";
-import { eleventyImageTransformPlugin } from "@11ty/eleventy-img";
 import markdownIt from "markdown-it";
 import markdownItFootnote from "markdown-it-footnote";
 import markdownItAnchor from "markdown-it-anchor";
@@ -28,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;
 		}
@@ -37,17 +36,6 @@ export default async function(eleventyConfig) {
 	eleventyConfig.addWatchTarget("content/**/*.{svg,webp,png,jpeg}");
 
 	// Official plugins
-	/*
-	eleventyConfig.addPlugin(eleventyImageTransformPlugin, {
-		extensions: "html",
-		formats: ["webp"],
-		widths: [270,540,810,1080],
-			defaultAttributes: {
-				loading: "lazy",
-				decoding: "async",
-			},
-			urlPath: "/img/",
-	});*/
 	eleventyConfig.addPlugin(pluginRss);
 	eleventyConfig.addPlugin(pluginSyntaxHighlight, {
 		preAttributes: { tabindex: 0 }
@@ -74,7 +62,7 @@ export default async function(eleventyConfig) {
 	// Shortcodes
 
 	// Cowsay
-	eleventyConfig.addNunjucksFilter("cowsay", cowText => {
+	eleventyConfig.addFilter("cowsay", cowText => {
 		const cowCaptionReplacementTable = [
 			[`
 					o   ^__^
@@ -130,15 +118,8 @@ export default async function(eleventyConfig) {
 	});
 
 	// Passthrough
-	eleventyConfig.addPassthroughCopy({ 'public/xsl/*': "/xsl/" });
-	eleventyConfig.addPassthroughCopy({ 'public/img/*': "/img/" });
-	eleventyConfig.addPassthroughCopy({ 'public/robots.txt': "/" });
-	eleventyConfig.addPassthroughCopy({ 'public/js/*': "/js/" });
-	eleventyConfig.addPassthroughCopy({ 'public/js/webComponents/*': "/js/webComponents" });
-	eleventyConfig.addPassthroughCopy({ 'public/js/modules/*': "/js/modules" });
-	// Copying so that basic.xsl can use it
-	eleventyConfig.addPassthroughCopy({ 'public/css/index.css': "/css/index.css" });
-	eleventyConfig.addPassthroughCopy({ 'public/css/webfonts/*': "/css/webfonts/" });
+
+	eleventyConfig.addPassthroughCopy({ './public/': "/" });
 
 	// Get the first `n` elements of a collection.
 	eleventyConfig.addFilter("head", (array, n) => {

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);
@@ -94,30 +97,32 @@
 	--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);
@@ -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,18 +545,13 @@ 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);
 }
 .nav-item {
-	display: inline-block;
-	text-decoration: none;
-	border-top: var(--border-nav);
-}
-.nav-item li {
 	align-items: baseline;
-	color: var(--text-color);
+	border-top: var(--border-nav);
 	display: flex;
 	font-size: var(--step--2);
 	font-variation-settings: var(--font-variation-ui);
@@ -509,37 +562,39 @@ nav ul {
 	transition: var(--transition-normal);
 	letter-spacing: var(--ui-letter-spacing);
 }
-.nav-item:hover {
-	border-top: var(--border-nav-hover);
+.nav-item a {
+	color: var(--text-color);
+	margin-top: calc(var(--space-xs-s) * -1); /* Compensate for padding */
+	padding-top: var(--space-xs-s); /* Give <a> a larger click area */
 }
-/* Compensate for increased border thickness on hover of a.nav-item */
-.nav-item:hover li {
-	margin-top: calc(var(--space-xs-s) * -1);
+.nav-item:hover {
+	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 */
 }
 .nav-item a[href]:visited {
 	color: var(--text-color);
 }
-.nav-item a[href]:hover {
+.nav-item:hover a[href] {
 	color: var(--text-color);
 	text-decoration: none;
-
 }
 .nav-item a[href]:not(:hover) {
-	color: var(--text-color);
 	text-decoration: none;
 }
 .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 {
 	color: var(--contrast-color);
-}
-.nav-item[data-currentpage="true"] li {
-	margin-top: calc(var(--space-xs-s) * -1);
-}
-.nav a[href][aria-current="page"] li {
-	color: var(--contrast-color);
-}
-.subscribe:hover {
-	color: var(--text-color);
+	margin-top: calc(
+		var(--space-xs-s) * -2
+	); /* Compensate for border thickness */
 }
 
 /* Posts list */
@@ -552,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;
@@ -560,17 +615,19 @@ nav ul {
 	width: 100%;
 }
 
-
-.postlist, .links-nextprev {
+.postlist,
+.links-nextprev {
 	container: postlist / inline-size;
- }
+}
 
 .post-image-container {
 	border-radius: var(--border-radius);
 	box-shadow: var(--box-shadow);
+	height: 15rem;
 	margin-left: calc(var(--space-l) * -1);
 	max-height: 15rem;
 	overflow: hidden;
+	width: 15rem;
 }
 
 .postlist-date,
@@ -583,7 +640,7 @@ nav ul {
 }
 .postlist-link {
 	font-size: var(--step-5); /* 19px /16 */
-	padding-right: .5em;
+	padding-right: 0.5em;
 	text-decoration: none;
 }
 
@@ -664,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);
@@ -688,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);
@@ -701,7 +762,7 @@ a.post-tag:hover {
 }
 
 .post-metadata time {
-	padding-left: .15rem;
+	padding-left: 0.15rem;
 }
 
 .profilePic:not(.links-container > img.profilePic) {
@@ -712,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,
@@ -735,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);

public/css/webfonts/webfonts.css

@@ -1,16 +1,19 @@
 @font-face {
+	font-display: swap;
 	font-family: Manrope;
 	font-style: normal;
 	font-weight: 200 900;
 	src: url(/css/webfonts/Manrope[wght].woff2) format("woff2");
 }
 @font-face {
+	font-display: swap;
 	font-family: Fraunces;
 	font-style: normal;
 	font-weight: 100 900;
 	src: url(/css/webfonts/Fraunces[SOFT,WONK,opsz,wght].woff2) format("woff2");
 }
 @font-face {
+	font-display: swap;
 	font-family: Fraunces;
 	font-style: italic;
 	font-weight: 100 900;

public/img/logo_favicon.svg.2024_08_06_11_23_44.0.svg

@@ -0,0 +1,56 @@
+<?xml version="1.0" encoding="UTF-8" standalone="no"?>
+<!-- Created with Inkscape (http://www.inkscape.org/) -->
+
+<svg
+   width="8.4666662mm"
+   height="8.4666662mm"
+   viewBox="0 0 8.4666662 8.4666662"
+   version="1.1"
+   id="svg1"
+   sodipodi:docname="logo_favicon.svg"
+   inkscape:version="1.3.2 (091e20ef0f, 2023-11-25, custom)"
+   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:document-units="mm"
+     inkscape:zoom="9.5624995"
+     inkscape:cx="25.098041"
+     inkscape:cy="34.19608"
+     inkscape:current-layer="g1"
+     inkscape:window-width="1337"
+     inkscape:window-height="1077"
+     inkscape:window-x="522"
+     inkscape:window-y="231"
+     inkscape:window-maximized="0" />
+  <defs
+     id="defs1" />
+  <g
+     id="layer1"
+     transform="translate(-23.248082,-20.452073)">
+    <g
+       id="g1">
+      <path
+         d="m 24.299497,21.503489 v 1.520267 0.734109 2.589192 c 0,0.842244 0.678022,1.520267 1.520266,1.520267 h 3.323302 c 0.842243,0 1.520266,-0.678023 1.520266,-1.520267 v -3.323301 c 0,-0.842245 -0.678023,-1.520267 -1.520266,-1.520267 h -2.875068 -0.448234 z"
+         style="fill:#faf5f5;fill-opacity:1;stroke-width:0.121929;stroke-linecap:round;stroke-linejoin:round;paint-order:stroke fill markers"
+         id="path3" />
+      <path
+         d="m 29.856464,26.04708 c 0.144453,0 0.263097,0.04267 0.356568,0.127641 0.09347,0.08497 0.140559,0.197242 0.140559,0.337447 0,0.140205 -0.04709,0.252992 -0.140559,0.337964 -0.09347,0.08497 -0.212115,0.127124 -0.356568,0.127124 -0.148702,0 -0.269815,-0.04215 -0.363285,-0.127124 -0.08922,-0.08497 -0.133842,-0.197759 -0.133842,-0.337964 0,-0.140205 0.04462,-0.252474 0.133842,-0.337447 0.09347,-0.08497 0.214583,-0.127641 0.363285,-0.127641 z"
+         style="fill:#333333;stroke-width:0.162218;stroke-linecap:round;stroke-linejoin:round;paint-order:stroke fill markers"
+         id="path4" />
+      <path
+         d="m 24.764269,22.375987 v 0.12764 c 0.140203,0.0042 0.244145,0.02142 0.312125,0.05116 0.07223,0.02549 0.11932,0.07648 0.14056,0.152962 0.02549,0.07223 0.03824,0.186965 0.03824,0.344165 v 2.944007 c 0,0.186938 -0.01275,0.33355 -0.03824,0.439766 -0.02124,0.106217 -0.06833,0.182714 -0.14056,0.229443 -0.06798,0.04673 -0.171922,0.07861 -0.312125,0.0956 v 0.127641 c 0.06798,-0.0085 0.152798,-0.01292 0.254764,-0.01292 0.106216,-0.0042 0.210675,-0.0062 0.312643,-0.0062 0.114713,0 0.235827,0.002 0.363285,0.0062 0.127459,0 0.231396,0.0044 0.312126,0.01292 v -0.127641 c -0.178443,-0.01699 -0.312306,-0.04887 -0.401526,-0.0956 -0.08497,-0.05098 -0.140392,-0.131381 -0.165882,-0.241845 -0.02549,-0.114713 -0.03824,-0.274073 -0.03824,-0.478007 v -2.753321 l 2.7342,3.715536 c 0.05098,-0.0042 0.09755,-0.0062 0.140043,-0.0062 0.04673,0 0.0894,0.002 0.127641,0.0062 v -3.639054 c 0,-0.19119 0.01079,-0.3378 0.03204,-0.439767 0.02549,-0.106217 0.07401,-0.182713 0.146245,-0.229443 0.07223,-0.05098 0.176685,-0.08285 0.312642,-0.0956 v -0.12764 c -0.06373,0.0043 -0.149066,0.0087 -0.255282,0.01292 -0.101965,0.0042 -0.205909,0.0062 -0.312125,0.0062 -0.110465,0 -0.231578,-0.002 -0.363286,-0.0062 -0.127457,-0.0043 -0.231405,-0.0087 -0.312125,-0.01292 v 0.12764 c 0.182692,0.01274 0.316556,0.04461 0.401526,0.0956 0.08497,0.05098 0.139874,0.131898 0.165364,0.242362 0.02549,0.110465 0.03824,0.269823 0.03824,0.478007 v 2.236556 l -2.389518,-3.180167 c -0.07223,0.0043 -0.155094,0.0087 -0.248564,0.01292 -0.09347,0.0042 -0.189084,0.0062 -0.286804,0.0062 -0.101968,0 -0.206427,-0.002 -0.312643,-0.0062 -0.101966,-0.0043 -0.186785,-0.0087 -0.254764,-0.01292 z"
+         style="fill:#333333;stroke-width:0.162218;stroke-linecap:round;stroke-linejoin:round;paint-order:stroke fill markers"
+         id="path5" />
+    </g>
+  </g>
+</svg>