Add new post

_data/blogroll.js

@@ -620,6 +620,13 @@ export default {
 					url: "https://thefoggiest.dev",
 					description: "The personal blog of Diederick de Vries of Amsterdam.",
 				},
+				{
+					title: "ThinksTooMuch",
+					feedUrl: "https://thinkstoomuch.net/index.xml",
+					url: "https://thinkstoomuch.net/",
+					description:
+						"Thoughts on atheism, leftism, firearms, work, and life.",
+				},
 			],
 		},
 		{

_data/galleries.js

@@ -1,4 +1,81 @@
 export default [
+	{
+		title: "Cooking",
+		description: "Some stuff I've made in the kitchen.",
+		synopsis: "Some stuff I've made in the kitchen.",
+		url: "/img/gallery/food/",
+		date: new Date("October 20, 2025"),
+		galleryImage: "_DSC0036_compressed.webp",
+		galleryImageAlt: "",
+		pictures: [
+			{
+				title: "A batch of palmiers",
+				filename: "_DSC0033_compressed.webp",
+				altText:
+					"Fifteen sugar-encrusted palmier pastries on a cooling rack atop a wooden table. The cookies are curled on both ends such that they resemble ears.",
+				thumbAltText:
+					"Fifteen sugar-encrusted palmier pastries on a cooling rack atop a wooden table. The cookies are curled on both ends such that they resemble ears.",
+				caption:
+					"2025-10-18 - Part of a batch of palmiers I made over the weekend; these crunchy, sugary little ears are quite possibly my favorite thing to make with a box of frozen puff pastry.",
+			},
+			{
+				title: "Would you believe this is tofu?",
+				filename: "double-frozen-silken-tofu.webp",
+				altText:
+					"What looks like seared sliced chicken breast on top of some greens next to some pickled beet slices.",
+				thumbAltText:
+					"What looks like seared sliced chicken breast on top of some greens next to some pickled beet slices.",
+				caption:
+					"2025-03-27 - This is what you get if you freeze and defrost silken tofu twice, press hard to drain all water, then sear in a pan.",
+			},
+		],
+	},
+	{
+		title: "Illustration",
+		description:
+			"I'm not much of an illustrator, but here are a few things I've done over the years.",
+		synopsis:
+			"I'm not much of an illustrator, but here are a few things I've done over the years.",
+		url: "/img/gallery/illustration/",
+		date: new Date("October 20, 2025"),
+		galleryImage: "doodle.webp",
+		galleryImageAlt: "",
+		pictures: [
+			{
+				title: "Just a wee ice-cream doodle",
+				filename: "doodle.webp",
+				altText:
+					"A rubber-hose doodle of an ice cream cone holding two mini ice-cream cones.",
+				thumbAltText:
+					"A rubber-hose doodle of an ice cream cone holding two mini ice-cream cones.",
+				caption:
+					"Doodled this one day and decided to do a vector trace for fun.",
+			},
+			{
+				title: "A vector illustration of a vape",
+				filename: "Evod Vector-01_white_copy.webp",
+				altText: "A vector illustration of an old-school Evod vape pen.",
+				thumbAltText: "A vector illustration of an old-school Evod vape pen.",
+				caption:
+					"I made this many years ago when vapes were just hitting the market for a website selling e-liquid. The site actually won Adobe Muse Site of the Day!",
+			},
+			{
+				title: "A vector illustration of an empty e-liquid bottle",
+				filename: "10MlBottleVector-08_copy.webp",
+				altText: "A vector illustration of a 10ml e-liquid bottle.",
+				thumbAltText: "A vector illustration of a 10ml e-liquid bottle.",
+				caption: "I also made this for the aforementioned website.",
+			},
+			{
+				title: "A vector illustration of a Sony Xperia Phone",
+				filename: "sony illustration-01.webp",
+				altText: "A vector illustration of an old-school Sony Xperia phone.",
+				thumbAltText:
+					"A vector illustration of an old-school Sony Xperia phone.",
+				caption: "I made this just for fun. It took ages.",
+			},
+		],
+	},
 	{
 		title: "Pop Tart Flavor Memes",
 		description:
@@ -360,4 +437,71 @@ export default [
 			},
 		],
 	},
+	{
+		title: "Shots on film",
+		description: "Some random pictures I took on film years ago.",
+		synopsis: "Some random pictures I took on film years ago.",
+		url: "/img/gallery/film/",
+		date: new Date("October 20, 2025"),
+		galleryImage: "3.webp",
+		galleryImageAlt: "",
+		pictures: [
+			{
+				title: "Tat",
+				filename: "1.webp",
+				altText:
+					"A not-very-good close-up of some oils, spices, and sauces on a kitchen counter.",
+				thumbAltText:
+					"A not-very-good close-up of some oils, spices, and sauces on a kitchen counter.",
+				caption: "I do like to take pictures of random tat.",
+			},
+			{
+				title: "A scented candle",
+				filename: "2.webp",
+				altText: "A scented candle on the corner of a table.",
+				thumbAltText: "A scented candle on the corner of a table.",
+				caption: "More tat.",
+			},
+			{
+				title: "A pretty old camera",
+				filename: "3.webp",
+				altText: "A blurry Pentax camera.",
+				thumbAltText: "A blurry Pentax camera.",
+				caption:
+					"Given to me, like the camera I am using to take the picture, by a photography friend years ago.",
+			},
+			{
+				title: "Double exposure tat",
+				filename: "4.webp",
+				altText:
+					"A double exposure of a carved wood incense burner in the shape of a man and a surreal silk painting.",
+				thumbAltText:
+					"A double exposure of a carved wood incense burner in the shape of a man and a surreal silk painting.",
+				caption: "Is that a box of Satya in the background? Hard to say.",
+			},
+			{
+				title: "Birds on pot",
+				filename: "5.webp",
+				altText: "Some bird silhouettes sat atop a chimney pot.",
+				thumbAltText: "Some bird silhouettes sat atop a chimney pot.",
+				caption: "Dare to resist pot.",
+			},
+			{
+				title: "Streetlamp",
+				filename: "6.webp",
+				altText:
+					"A streetlamp with snow on top, by some snowy trees, all in front of a stone building.",
+				thumbAltText:
+					"A streetlamp with snow on top, by some snowy trees, all in front of a stone building.",
+				caption: "Pretty sure I took this through a window.",
+			},
+			{
+				title: "The cutting edge",
+				filename: "7.webp",
+				altText: "A small electric paper guillotine.",
+				thumbAltText: "A small electric paper guillotine.",
+				caption: "Lost a fingernail to this thing once.",
+			},
+		],
+	},
 ];

_data/metadata.js

@@ -1,6 +1,7 @@
 export default {
 	title: "Nathan Upchurch",
 	logo: "/img/logo.svg",
+	holidayLogo: "",
 	url: "https://nathanupchurch.com/",
 	language: "en",
 	description:
@@ -50,6 +51,11 @@ export default {
 			linkDisplay: "Life Updates",
 			linkURL: "/now/",
 		},
+		{
+			iconURL: "/img/icons/breeze/link-symbolic.svg",
+			linkDisplay: "Links",
+			linkURL: "/links/",
+		},
 		{
 			iconURL: "/img/burn.svg",
 			linkDisplay: "Now Burning",
@@ -166,6 +172,7 @@ export default {
 			iconURL: "/img/wafrn.svg",
 		},
 	],
+	weatherSymbol: "🍁",
 	webrings: [
 		{
 			name: "Fediring",

_includes/footer.njk

@@ -1,8 +1,4 @@
 <footer>
-	<a href="https://notbyai.fyi/">
-		<img src="/img/written-by-human-not-by-ai-white.svg" alt="Written by humans, not by AI.">
-	</a>
-
 	<p>{% if metadata.copyrightNotice %}<span class="copyright-notice">{{ metadata.copyrightNotice }}</span>{% endif %}
 
 	{% if metadata.webrings %}<br>
@@ -15,6 +11,11 @@
 	{% endfor %}
 	{% endif %}
 		<a href="/sitemap/">Sitemap</a>
-		<a href="/special/flying-toasters" style="color: var(--background-color); text-decoration: none;">Fly</a>
 	</p>
+	<div id="buttonsAndStuffContainer">
+		<a href="https://notbyai.fyi/">
+			<img src="/img/written-by-human-not-by-ai-white.svg" alt="Written by humans, not by AI.">
+		</a>
+		{% include "siteSettings.njk" %}
+	</div>
 </footer>

_includes/gallerieslist.njk

@@ -1,6 +1,6 @@
 <section class="postlist">
 <div class="postlist-item-container">
-	{% for gallery in galleries | reverse %}
+	{% for gallery in galleries %}
 	{% if not numberOfGalleriesToShow or loop.index <= numberOfGalleriesToShow %}
 	<article class="postlist-item">
 		<a href="../gallery/{{ gallery.title | slugify }}" class="postlist-link">

_includes/header.njk

@@ -5,7 +5,7 @@
 	class="home-link">
 		<img
 		class="logo"
-		src="{{ metadata.logo }}"
+		src="{% if metadata.holidayLogo %}{{ metadata.holidayLogo }}{% else %}{{ metadata.logo }}{% endif %}"
 		alt="{{ metadata.title }}">
 	</a>
 	{% if not hideNav %}{% include "nav.njk" %}{% endif %}

_includes/layouts/base.njk

@@ -16,5 +16,6 @@
 			</section>
 		</main>
 		{% include "footer.njk" %}
+		{% include "weather.njk" %}
 	</body>
 </html>

_includes/siteSettings.njk

@@ -0,0 +1,16 @@
+<style>
+	#siteSettingsContainer {
+		& button:not(#settingsDone) {
+			margin-top: 0;
+		}
+	}
+</style>
+
+<div id="siteSettingsContainer">
+	<button onclick="siteSettings.showModal();">Site Settings</button>
+	<dialog id="siteSettings">
+		<h2>Site Settings</h2>
+		{% include "weatherController.njk" %}
+		<button id="settingsDone" onclick="siteSettings.close();">Done</button>
+	</dialog>
+</div>

_includes/weather.njk

@@ -0,0 +1,173 @@
+<!-- weather -->
+		<!-- Based on https://codepen.io/codeconvey/pen/xRzQay -->
+		{# This include causes a symbol (text, emoji, et cetera; from metadata.weatherSymbol) to fall from the top of the viewport like snow. #}
+
+		<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>
+		<div class="fallingObjects" id="weather" aria-hidden="true">
+			<div class="fallingObject">
+				<div>{{ metadata.weatherSymbol }}</div>
+			</div>
+			<div class="fallingObject">
+				<div>{{ metadata.weatherSymbol }}</div>
+			</div>
+			<div class="fallingObject">
+				<div>{{ metadata.weatherSymbol }}</div>
+			</div>
+			<div class="fallingObject">
+				<div>{{ metadata.weatherSymbol }}</div>
+			</div>
+			<div class="fallingObject">
+				<div>{{ metadata.weatherSymbol }}</div>
+			</div>
+			<div class="fallingObject">
+				<div>{{ metadata.weatherSymbol }}</div>
+			</div>
+			<div class="fallingObject">
+				<div>{{ metadata.weatherSymbol }}</div>
+			</div>
+			<div class="fallingObject">
+				<div>{{ metadata.weatherSymbol }}</div>
+			</div>
+			<div class="fallingObject">
+				<div>{{ metadata.weatherSymbol }}</div>
+			</div>
+			<div class="fallingObject">
+				<div>{{ metadata.weatherSymbol }}</div>
+			</div>
+		</div>
+
+		<script>
+			const weather = document.getElementById("weather");
+			const weatherToggle = document.getElementById("weatherToggle");
+			const weatherPreference = localStorage.getItem("weather");
+
+			// Initial weather preference check on page load
+			if (weatherPreference == 0) {
+				weather.classList.add("hidden");
+				weatherToggle.checked = false;
+			} else {
+				weather.classList.remove("hidden");
+				weatherToggle.checked = true;
+			};
+
+			// Handle weather setting toggle
+			weatherToggle.addEventListener('change', function() {
+				if (this.checked) {
+					localStorage.setItem("weather", 1);
+					weather.classList.remove("hidden");
+				} else {
+					localStorage.setItem("weather", 0);
+					weather.classList.add("hidden");
+				};
+			});
+		</script>
+<!-- /weather -->

_includes/weatherController.njk

@@ -0,0 +1,30 @@
+<style>
+	#weatherController {
+		color: var(--text-color);
+		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);
+		& label {
+			display: inline;
+		}
+		& input {
+			accent-color: var(--contrast-color);
+			background-color: var(--background-color);
+			border: var(--border-details);
+			border-color: var(--contrast-color);
+			border-radius: var(--border-radius);
+			color: var(--text-color);
+			&:focus {
+				box-shadow: 0 0 0 2px var(--contrast-color);
+				outline: none;
+			}
+		}
+	}
+</style>
+
+<form id="weatherController">
+	<input type="checkbox" id="weatherToggle" checked />
+	<label for="weatherToggle">Show weather?</label>
+</form>

content/blog/job-paranoia-am-i-getting-fired.md

@@ -0,0 +1,24 @@
+---
+title: "Job Paranoia: Is My Boss Out to Get Me?"
+description: "Some thoughts on understanding what actually gets people fired."
+date: 2025-11-14
+tags:
+  - Quick Thoughts
+  - Work
+synopsis: "Some thoughts on understanding what actually gets people fired."
+---
+I occasionally talk to people facing what I can best describe as job paranoia—the fear that their boss is out to get them, see them fired, et cetera. If you're someone who occasionally feels like this, as someone who has both hired and fired people, I'm here to offer some reassurance. Before we proceed—and I know you'll understand this intuitively because you have excellent reading comprehension—my description to come of certain hiring and management practices is not an endorsement of them.
+
+In cases of exceptionally poor management, it surely happens that bosses occasionally develop some sort of personal vendetta against someone[^1] but, in these instances, the red flags will usually have been waving for some time. If your workplace seems to be relatively sanely run, however, in most cases management chiefly wants one thing out of you: reliability.
+
+Getting hired and staying hired are two very different things. You might not have been the best candidate at all; it may be that you simply met some particular piece of the job description that someone far more skilled than you did not (such as a driver's license, even if it's not necessary for the role), and so the better candidate was removed from the pipeline simply because the company has to be able to claim that all candidates were judged by the same criteria (in order to avoid discrimination suits[^2]). Maybe you were hired because management thought your lack of experience would enable them to pay you less. Maybe management used "culture fit" as an excuse to hire you instead of a person who is BIPOC, LGBTQ+, disabled, or a member of some other group for which they harbor a bias against. Maybe your interviewer just thought you seemed especially affable. You will likely never know. All this to say that finding a good fit for a role in question is only one piece of the puzzle when a company decides who to hire.
+
+Staying hired, however, is another matter (as is getting promoted). Once you're in a position, no one cares about your resume, credentials, experience, or schooling. The quality of your work isn't necessarily of much import either, so long as it meets a minimum standard. When a new hire is made, the principal concern of a busy manager is that they are not a nuisance. Do they show up on time? Can they work independently? Do they get along with others, or are they a frequent subject of complaints? Are they frequently making complaints themself? Can I assign a task to this person and expect them to just get on with it, or will I face a barrage of inane questions? Can this person work out how to use [insert simple software with drag and drop interface here] on their own, or are they going to need training for something others could suss out by clicking around for ten minutes? It's as simple as that. If management feels that you fit in nicely without any grinding or squeaking, you'll typically remain fitted[^3].
+
+Hiring people and getting them up to speed is a pain that no one wants to go through; firing people makes that pain necessary. This is why people that may seem blisteringly incompetent to you manage to keep their jobs without issue: they simply don't generate sufficient friction for management such that it is worth the hassle of replacing them. These types aren't likely to be promoted either, but that's another matter.
+
+So, if you find yourself wondering how likely you are to be escorted off the premises carrying a box of your belongings, here's a quick litmus test: How much time am I making management spend on me that could be spent on other tasks? Assuming all else is well, the lower the number, the safer you are.
+
+[^1]: If you do find yourself in one of these scenarios, or in fact, if you find yourself facing any red flags at all from management, the best thing to do is start applying for other positions right away. This ought to alleviate some of your anxiety about the situation, helping prevent burnout from bad management.
+[^2]: This should not be taken as an indictment of DEI, nor a suggestion that certain groups of people are commonly hired regardless of their ability to perform a job (with the possible exception of white men).
+[^3]: Some astute readers may notice that a few of the previous points may disadvantage people with various disabilities. Unfortunately, this is true. If this is a concern for you, you may also benefit from taking measures to protect yourself such as requesting accommodations in writing for *documented* conditions that are *legally recognized as disabilities*, but this is beyond the scope of this post; dealing with these matters is a tricky path best undertaken with individual advice and support.

content/blog/let-it-snow.md

@@ -0,0 +1,245 @@
+---
+title: "Let it Snow: Adding a Falling-Snow Effect to Your Eleventy Website"
+description: As you can see, I'm getting my priorities in order. Here's how I added a falling-snow effect to my website.
+date: 2025-11-10
+tags:
+  - Site Updates
+  - Eleventy
+synopsis: As you can see, I'm getting my priorities in order. Here's how I added a falling-snow effect to my website.
+mastodon_id: "115528575840719665"
+---
+I'm pretty happy with the look and feel of my website but, looking around the indieweb, I see so many creative and fun websites with neat animations and interactive features. Reader, I was jealous; I wanted my website to be more fun. The [flying toasters](/special/flying-toasters) just weren't enough anymore. My first thought was to add a midi-player. I spent a few hours in a hyperfocus-hole digging up all sorts of fun midi tracks, from Kate Bush to Rammstein. I was *excited.* But reality hit me like a truck when I learned that HTML5 dropped support for midi files. This meant that it was either going to be a monumental pain in the arse to implement my midi payer, or I was going to have to rely on some pretty heavy [dependencies](https://github.com/cifkao/html-midi-player?tab=readme-ov-file#installing-from-npm). And look, I know typing `npm install blah` doesn't seem like a big deal to some folk but, where I can, I would really rather avoid summoning from the ether giant directories full of code that I don't understand for my little website. To add to that, provided you don't want your midi files played by some dead-simple synth sound, there's the business of soundfonts: gigabytes of audio samples from mysterious origins which you have to host yourself if you don't want [Google's servers](https://github.com/cifkao/html-midi-player?tab=readme-ov-file#soundfonts) tracking all of your visitors. At least one popular soundfont also seems to be a bit of a mystery; where does SGM Plus come from? No one seems to know. How is it licensed? I sure couldn't find an answer.
+
+So, yea, I gave up on that idea and decided to implement a falling-snow effect instead. Here's how I did it.
+
+## Humble beginnings
+I set out to look for an implementation with as little JavaScript as possible. I have nothing against JavaScript, but I figure it's best to try trimming your toenails with clippers before reaching for a chainsaw. The search led me to a codepen with [this HTML and CSS-only solution](https://codepen.io/codeconvey/pen/xRzQay). I tidied up the formatting, stripped out anything unnecessary, and put together my include, `_includes/weather.njk`:
+
+{% raw %}
+``` html
+<!-- weather -->
+		<!-- Based on https://codepen.io/codeconvey/pen/xRzQay -->
+		{# This include causes a symbol (text, emoji, et cetera; from metadata.weatherSymbol) to fall from the top of the viewport like snow. #}
+
+		<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>
+		<div class="fallingObjects" id="weather" aria-hidden="true">
+			<div class="fallingObject">
+				<div>{{ metadata.weatherSymbol }}</div>
+			</div>
+			<div class="fallingObject">
+				<div>{{ metadata.weatherSymbol }}</div>
+			</div>
+			<div class="fallingObject">
+				<div>{{ metadata.weatherSymbol }}</div>
+			</div>
+			<div class="fallingObject">
+				<div>{{ metadata.weatherSymbol }}</div>
+			</div>
+			<div class="fallingObject">
+				<div>{{ metadata.weatherSymbol }}</div>
+			</div>
+			<div class="fallingObject">
+				<div>{{ metadata.weatherSymbol }}</div>
+			</div>
+			<div class="fallingObject">
+				<div>{{ metadata.weatherSymbol }}</div>
+			</div>
+			<div class="fallingObject">
+				<div>{{ metadata.weatherSymbol }}</div>
+			</div>
+			<div class="fallingObject">
+				<div>{{ metadata.weatherSymbol }}</div>
+			</div>
+			<div class="fallingObject">
+				<div>{{ metadata.weatherSymbol }}</div>
+			</div>
+		</div>
+<!-- /weather -->
+```
+{% endraw %}
+I added this include in my base layout, after the footer, just before the the closing `</body>` tag. Beyond cleanup, I made the following changes:
+* I replaced the snowflakes in the example with {% raw %}`{{ metadata.weatherSymbol }}`{% endraw %} so that I can easily change the symbol that falls (that's right folks, this'll do more than just snowflakes!).
+* I added a random amount of rotation to each object.
+* I changed the class names from anything snowflake related because I'm a pedant.
+
+Now all we need to do is make sure {% raw %}`{{ metadata.weatherSymbol }}`{% endraw %} exists and we should be cooking with gas. To `_data/metadata.js` I added: `weatherSymbol: "🍁",`; a falling leaf for autumn.
+
+## Settings
+Now we have our ~~falling-snow~~ falling leaf effect working but, as with anything fun, there are going to be at least a few crabbit souls who will hate this. For them, let's implement a toggle. First, the toggle itself, in `_includes/weatherController.njk`:
+
+``` html
+<form id="weatherController">
+	<input type="checkbox" id="weatherToggle" checked />
+	<label for="weatherToggle">Show weather?</label>
+</form>
+```
+
+Second, a settings modal to hold the toggle, in `_includes/siteSettings.njk` (if the feature happens to be turned on at the moment you should be able to scroll down to the bottom of the page to see this in action):
+{% raw %}
+``` html
+<div id="siteSettingsContainer">
+	<button onclick="siteSettings.showModal();">Site Settings</button>
+	<dialog id="siteSettings">
+		<h2>Site Settings</h2>
+		{% include "weatherController.njk" %}
+		<button id="settingsDone" onclick="siteSettings.close();">Done</button>
+	</dialog>
+</div>
+```
+{% endraw %}
+Alright, now we just need to pop our site settings include into the site footer and wire everything up together.
+
+## Wiring it all up
+Let's first add a quick rule to our CSS:
+``` CSS
+.hidden {
+	display: none;
+}
+```
+
+Then we can work on our script. Let's add it to the bottom of our weather include, `_includes/weather.njk`, as it's positioned right before the closing `</body>` tag.
+
+First, we'll check local storage to see if the user has set a preference before; if so, we'll add/remove the `.hidden` CSS rule to our weather element and update the weather-controller checkbox accordingly:
+
+``` javascript
+<script>
+	const weather = document.getElementById("weather");
+	const weatherToggle = document.getElementById("weatherToggle");
+	const weatherPreference = localStorage.getItem("weather");
+
+	// Initial weather preference check on page load
+	if (weatherPreference == 0) {
+		weather.classList.add("hidden");
+		weatherToggle.checked = false;
+	} else {
+		weather.classList.remove("hidden");
+		weatherToggle.checked = true;
+	};
+```
+
+Then, we'll create an event listener on the checkbox, which will add a value into local storage to save our visitor's preference and add/remove that CSS rule whenever a change to the checkbox value is detected:
+
+``` javascript
+	// Handle weather setting toggle
+	weatherToggle.addEventListener('change', function() {
+		if (this.checked) {
+			localStorage.setItem("weather", 1);
+			weather.classList.remove("hidden");
+		} else {
+			localStorage.setItem("weather", 0);
+			weather.classList.add("hidden");
+		};
+	});
+</script>
+```
+## Done!
+With that, we're done! We now have a "falling-snow" effect that can take any emoji (or arbitrary text) set in `_data/metadata.js`, and can be toggled on and off by the visitor whose preference is retained in local storage across sessions.

content/changelog.md

@@ -4,10 +4,20 @@ title: Nathan Upchurch | Changelog
 structuredData: none
 ---
 # Changelog
+* 2025-11-12
+	* Added [Milne Open Textbooks](https://milneopentextbooks.org/) to [/links](/links).
+* 2025-11-11
+	* Updated [/links](/links).
+* 2025-11-9
+	* Added [ThinksTooMuch](https://thinkstoomuch.net) to the [blogroll](/blogroll).
+	* Updated [/incense](/incense).
+	* Added snow / weather, and site settings button and dialog.
+	* Added [/links](/links).
 * 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).
 	* Updated [/wish](/wish).
+	* Added a few [galleries](/galleries).
 * 2025-10-17
 	* Updated [/me](/me) to include Movim, XMPP, and WAFRN.
 * 2025-10-07

content/incense/index.md

@@ -55,6 +55,7 @@ Incense making is hard. While parts of the world with strong incense cultures en
 ### Other
 * [A list of archived URLs](https://web.archive.org/web/*/https://talesofincense.com/*) from a now-defunct site with some good information on Chinese incense.
 * [All of my writing on incense](/tags/incense/)
+* [Aromasublime Learning Center](https://www.aromasublime.com/news/category/key+articles++-+learning+center)—Articles on agarwood and agarwood oil.
 * [incensemakers.org](https://incensemakers.org/) is an invitation-only forum for relatively experienced incense makers. It is not incredibly active, but it does have a number of useful threads visible to non-members. If you are interested in joining, your best bet is to have an existing member you know personally get in touch with [me](/me) to provide a recommendation on your behalf.
 * See the [incense, fragrance, and perfumery section of my blogroll](/blogroll/#incense-fragrance-and-perfumery) for a list of blogs with writing on incense and related topics.
 
@@ -78,6 +79,7 @@ Incense making is hard. While parts of the world with strong incense cultures en
 * [Shoyeido Factory Works (YouTube)](https://www.youtube.com/watch?v=EQRxB4Gz-JM)
 * [The Frankincense Trail](https://www.imdb.com/title/tt2056414/)—Kate Humble follows the ancient frankincense trade route from Oman to Palestine. I have linked to the IMDB page, but this documentary series is well worth sailing the high seas for.
 * [*The Scent of Heaven: Inside Vietnam’s Incense Village* (YouTube)](https://www.youtube.com/watch?v=Wy8pDpIH31g)
+* [*'The Scent of Sakai' 堺の香り - Handmade incense stick craftsman* (YouTube)](https://www.youtube.com/watch?v=-4vOPSJYvX4)
 * [*Turf Peat Incense* (YouTube)](https://www.youtube.com/watch?v=4F7Xvdpq-GE)
 
 ## Reputable Suppliers of Aromatics

content/links/index.md

@@ -0,0 +1,109 @@
+---
+layout: layouts/base.njk
+title: Nathan Upchurch | Links
+structuredData: none
+---
+
+# Links
+Here are some links to pages and resources that I believe are worth sharing.
+## Design tools and resources
+### Education
+* [Butterick’s Practical Typography](https://practicaltypography.com/)
+### Reference
+* [Design Systems Gallery](https://designsystemsrepo.com/design-systems-recent/)
+### Software
+* [Converseen](https://converseen.fasterland.net/)—A Batch Image Converter and Resizer Tool for Windows, Linux and macOS
+* [darktable](https://www.darktable.org/)—An open source photography workflow application and raw developer
+* [digiKam](https://www.digikam.org/)—Open-source digital asset manager and image editor
+* [DisplayCAL](https://displaycal.net/)—Display Calibration and Characterization powered by ArgyllCMS
+* [G'MIC](https://gmic.eu/)—A Full-Featured Open-Source Framework for Image Processing
+* [Glaxnimate](https://glaxnimate.org/)—An open-source vector animation and motion design desktop application
+* [Inkscape](https://inkscape.org/)—A FLOSS vector graphics editor
+* [Krita](https://krita.org/en/)—A professional FLOSS painting and raster editing tool
+* [RawTherapee](https://www.rawtherapee.com/)—A free, cross-platform raw image processing program
+* [Scribus](https://www.scribus.net/)—The Go-To Libre Desktop Publishing Application
+### Stock graphics
+* [Artvee](https://artvee.com/)—Browse and download high-resolution, public domain paintings, posters and illustrations
+* [CocoMaterial](https://cocomaterial.com/)—The Open Source hand-drawn illustration library with 3,293 images
+* [Free and open source icons](https://www.toools.design/free-open-source-icon-libraries)
+* [Getty Search Gateway](https://search.getty.edu/gateway/search?q=&cat=type&r=%22Paintings%22&types=%22Paintings$Paintings%22&highlights=%22Open%20Content%20Images$Recent%20Acquisitions%22&rows=10&srt=a&dir=s&dsp=0&img=0&pg=1)
+* [Museo](https://museo.app/)—A visual search engine that connects you with the Art Institute of Chicago, the Rijksmuseum, the Harvard Art Museums, the Minneapolis Institute of Art, the The Cleveland Museum of Art, and the New York Public Library Digital Collection
+* [Pexels](https://www.pexels.com/)—The best free stock photos, royalty free images & videos shared by creators
+* [Pixabay](https://pixabay.com/)—Stunning royalty-free images & royalty-free stock
+* [Smithsonian Open Access](https://www.si.edu/openaccess)—Download, share, and reuse millions of the Smithsonian’s images
+### Typefaces
+* [Badass Libre Fonts By Womxn](https://www.design-research.be/by-womxn/)
+* [Collletttivo](https://www.collletttivo.it/)—An Open-Source type foundry and a network of people promoting the practice of type design through mutual exchange and collaboration
+* [coolLabs Fonts](https://fonts.coollabs.io/)—A privacy-friendly drop-in replacement for Google Fonts
+* [Cyreal](https://cyreal.org/info/)—A Libre/Opensource foundry with expertise in Latin and Cyrillic scripts
+* [Font Library](https://fontlibrary.org/en)
+* [FontCDN](https://thomaspark.co/projects/fontcdn/)—A search tool for Google fonts
+* [Fontsource](https://fontsource.org/)—An updating monorepo full of self-hostable Open Source fonts bundled into individual NPM packages
+* [Fontspace](https://www.fontspace.com/)—Free downloads of 150,000+ legally licensed fonts
+* [google-webfonts-helper](https://gwfh.mranftl.com/fonts)—A hassle-free way to self-host google fonts
+* [Use & Modify](https://usemodify.com/)—A personal selection of beautiful, classy, punk, professional, incomplete, weird typefaces
+* [Open Foundry](https://open-foundry.com/fonts)
+* [Open Source Publishing Foundry](https://osp.kitchen/foundry/)
+## Education
+### Code
+* [freeCodeCamp](https://www.freecodecamp.org/)—Advance your career by learning in-demand skills in Programming, DevOps, Cybersecurity, AI Engineering, and English for Developers
+### Credit-bearing courses and degrees
+* [saylor.org Academy](https://learn.saylor.org/)—Learn new skills or earn credit towards a degree using free courses from Saylor Academy
+* [Sophia Learning](https://www.sophia.org/)—Online college-level courses for $99 a month, designed to transfer to 100+ partner colleges, reviewed for credit at 1,000+ other colleges and universities
+* [University of The People](https://www.uopeople.edu/)—A tuition-free online university, accredited by WSCUC and DEAC
+### GNU/Linux
+* [KillerCoda](https://killercoda.com/)—Interactive environments for tech you study, teach or present
+* [Linux Upskill Challenge](https://linuxupskillchallenge.org/)—Learn the skills required to sysadmin a remote Linux server from the command line
+* [SadServers](https://sadservers.com/)—Master Linux & DevOps troubleshooting on live servers
+### Open Textbooks
+* [LibreTexts Commons](https://commons.libretexts.org/)—The LibreText Commons hosts curated Open Educational Resources from all 16 libraries in the LibreVerse in one convenient location
+* [Milne Open Textbooks](https://milneopentextbooks.org/)—Milne Library Publishing at SUNY Geneseo manages and maintains Milne Open Textbooks, a catalog of open textbooks authored and peer-reviewed by SUNY faculty and staff
+* [OER Commons](https://oercommons.org/)—A public digital library of open educational resources
+* [Open Textbook Library](https://open.umn.edu/opentextbooks/)—Now offering 1739 open textbooks, the Open Textbook Library is supported by the Open Education Network
+* [openstax](https://openstax.org/)—The world’s largest publisher of open education resources
+### Scots language
+* [OpenLearn Create Scots language and culture](https://www.open.edu/openlearncreate/course/index.php?categoryid=382)—This course teaches aspects of Scots, one of the three indigenous languages spoken in Scotland alongside English and Scottish Gaelic
+* [Scots Language Center](https://www.scotslanguage.com/pages/view/id/9)—Educational resources relating to the Scots language
+* [ScotsHoose Yaldi](https://www.scotshooseyaldi.com/)—Scots language learning and creativity resource for children, young people, teachers and parents
+
+
+## Eleventy resources
+* [11tyBundle](https://11tybundle.dev/)—Learn how others are making the most of 11ty, an exceptionally simple, flexible, and performant, open-source static site generator
+* [11tyCMS](https://11tycms.com/)—A local, serverless, dependable, and FLOSS CMS for websites made with Eleventy
+
+## Free/libre software
+* [Free Software Foundation](https://fsf.org)—A nonprofit with a worldwide mission to promote computer user freedom
+* [GNU](https://gnu.org)—An operating system that is free software—that is, it respects users' freedom
+* [KDE](https://kde.org)—An international community developing the world’s finest free and open-source software
+
+## Friendly Sites (Those not linked elsewhere on this site)
+* [Davey Dynamite](https://daveydynamite.neocities.org/)
+* [Mercury Retro](https://calam.us/)
+
+## Indieweb: discovery
+* [blogroll.org](https://blogroll.org/)—Because blogs are the soul of the web
+* [blogs.hn](https://blogs.hn/)—A directory of tech sites, primarily sourced from HackerNews
+* [blogscroll.com](https://blogscroll.com/)—An open directory of personal sites and blogs
+* [Feedle](https://feedle.world/)—A search engine for blogs and podcasts
+* [indieblog.page](https://indieblog.page/)—Discover the indieweb
+* [Kagi Smallweb](https://kagi.com/smallweb/)
+* [Marginalia Search](https://marginalia-search.com/)—Search that prioritizes non-commercial content
+* [Mwmbl](https://mwmbl.org/)—A crowd-sourced search engine
+* [Mydora](https://mydora.restorativland.org/)—A continuous streaming player that gives you a deep dive into the lost archives of Myspace Music
+* [ooh.directory](https://ooh.directory/)—A collection of 2,358 blogs about every topic
+* [searchmysite.net](https://searchmysite.net/)—Search real content by real people from their personal websites
+
+## Indieweb: resources
+* [90s Cursor Effects](https://tholman.com/cursor-effects/)
+* [blinkies.cafe](https://blinkies.cafe/)—Blinkie maker
+* [GIF Printer 2000](https://melonking.net/frames/pixelsea)
+* [GifCities](https://gifcities.org/)—The Geocities animated gif search from Internet Archive
+* [Gify Pet](https://melonking.net/frames/pet)
+* [Guestbooks](https://guestbooks.meadow.cafe/)
+* [Hit counters](https://www.websiteout.net/counter.php)
+* [Nekoweb](https://nekoweb.org/)—A free static website hosting service
+* [tamaNOTchi](https://tamanotchi.world/)
+
+## Literature
+* [TypeLit.io](https://www.typelit.io/)—Test your typing online by practicing on your favorite literature
+* [Wee Windaes—A continuum o the Scots Leid](https://wee-windaes.nls.uk/)

content/now-burning/Now Burning_Beau Soir_Myself_2025-11-13 11:28:00_11:28 AM.md

@@ -0,0 +1,7 @@
+---
+title: Beau Soir
+manufacturer: Myself
+date: 2025-11-13 11:28:00
+time: 11:28 AM
+---
+

content/now-burning/Now Burning_Brunei Kinam_Ensar Oud_2025-11-10 11:54:00_11:54 AM.md

@@ -0,0 +1,7 @@
+---
+title: Brunei Kinam
+manufacturer: Ensar Oud
+date: 2025-11-10 11:54:00
+time: 11:54 AM
+---
+Carrying on with the agarwood theme by putting a chip (sliver) on the heater.

content/now-burning/Now Burning_Butterfly Spring Incense_Lijiali_2025-10-28 12:07:00_12:07 PM.md

@@ -0,0 +1,7 @@
+---
+title: Butterfly Spring Incense
+manufacturer: Lijiali
+date: 2025-10-28 12:07:00
+time: 12:07 PM
+---
+

content/now-burning/Now Burning_Cambodi AAA_Agaroots_2025-11-11 15:45:00_3:45 PM.md

@@ -0,0 +1,7 @@
+---
+title: Cambodi AAA
+manufacturer: Agaroots
+date: 2025-11-11 15:45:00
+time: 3:45 PM
+---
+

content/now-burning/Now Burning_Green Kinam, AAA_Yuzhi Oud_2025-11-03 11:41:00_11:41 AM.md

@@ -0,0 +1,7 @@
+---
+title: Green Kinam, AAA
+manufacturer: Yuzhi Oud
+date: 2025-11-03 11:41:00
+time: 11:41 AM
+---
+

content/now-burning/Now Burning_Jinko Daikoboku_Seikado_2025-11-10 9:21:00_9:21 AM.md

@@ -0,0 +1,7 @@
+---
+title: Jinko Daikoboku
+manufacturer: Seikado
+date: 2025-11-10 9:21:00
+time: 9:21 AM
+---
+The falling snow outside has put me in the mood for a spicy agarwood stick; this is just the ticket!

content/now-burning/Now Burning_Palo Santo_Some random shop_2025-11-05 14:37:00_2:37 PM.md

@@ -0,0 +1,7 @@
+---
+title: Palo Santo
+manufacturer: Some random shop
+date: 2025-11-05 14:37:00
+time: 2:37 PM
+---
+

content/now-burning/Now Burning_Some weird cedar, lavender, and orris composition I've been working on_Myself_2025-11-03 9:33:00_9:33 AM.md

@@ -0,0 +1,7 @@
+---
+title: Some weird cedar, lavender, and orris composition I've been working on
+manufacturer: Myself
+date: 2025-11-03 9:33:00
+time: 9:33 AM
+---
+

eleventy.config.js

@@ -193,7 +193,6 @@ export default async function (eleventyConfig) {
 	);
 
 	// Passthrough
-
 	eleventyConfig
 		.addPassthroughCopy({ "./public/": "/" })
 		.addPassthroughCopy("./content/special/");

package.json

@@ -41,6 +41,7 @@
 		"mdfigcaption": "^0.1.1"
 	},
 	"dependencies": {
+		"html-midi-player": "^1.6.0",
 		"markdown-it-container": "^4.0.0",
 		"markdown-it-footnote": "^3.0.3",
 		"markdown-it-image-figures": "^2.1.1",

public/css/index.css

@@ -183,7 +183,7 @@ html {
 input.answer {
 	display: inline;
 }
-input:not(.answer),
+input:not(.answer):not(#weatherToggle),
 textarea {
 	background-color: var(--background-color);
 	border: var(--border-details);
@@ -334,15 +334,17 @@ a {
 }
 footer {
 	padding: var(--space-xl) 0 var(--space-m) 0;
+	& p {
+		font-size: var(--step-0);
+		grid-column: var(--span-grid);
+		margin-bottom: 0;
 	}
-footer .webring {
+	& .webring {
 		display: inline;
 		padding-right: var(--space-xs);
 	}
-footer p {
-	font-size: var(--step-0);
-	grid-column: var(--span-grid);
 }
+
 h1,
 h2,
 h3 {
@@ -602,9 +604,6 @@ pre:not([class*="language-"]) {
 	word-spacing: normal;
 	word-break: normal;
 }
-code {
-	word-break: break-all;
-}
 
 /* Footnotes */
 .footnotes-list {
@@ -1051,6 +1050,18 @@ article.post {
 		margin: var(--space-2xs) auto;
 	}
 }
+#buttonsAndStuffContainer {
+	display: flex;
+	grid-column: var(--span-grid);
+	width: 100%;
+	& a,
+	img,
+	div {
+		display: inline-block;
+		height: var(--space-m-l);
+		margin-right: var(--space-3xs);
+	}
+}
 .gallery-images {
 	display: flex;
 	flex-flow: row wrap;
@@ -1188,3 +1199,6 @@ dialog {
 	gap: var(--grid-gutter);
 	grid-template-columns: repeat(var(--grid-columns), 1fr);
 }
+.hidden {
+	display: none;
+}

public/img/gallery/illustration/doodle.webp

@@ -0,0 +1 @@
+/home/n_u/Repos/nathanupchurch.com/public/img/doodle.webp

public/img/icons/breeze/link-symbolic.svg

@@ -0,0 +1,42 @@
+<?xml version="1.0" encoding="UTF-8" standalone="no"?>
+<svg
+   viewBox="0 0 16 16"
+   version="1.1"
+   id="svg1"
+   sodipodi:docname="link-symbolic.svg"
+   xml:space="preserve"
+   inkscape:version="1.4.2 (ebf0e940d0, 2025-05-08)"
+   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="40.349281"
+     inkscape:cx="7.360726"
+     inkscape:cy="7.6705209"
+     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><style
+       type="text/css"
+       id="current-color-scheme-0">.ColorScheme-Text { color: #fcfcfc; } </style></defs><g
+     transform="translate(-3,-1033.3622)"
+     id="g1"
+     style="fill:#faf5f5;fill-opacity:1"><path
+       style="fill:#faf5f5;fill-opacity:1;stroke:none"
+       d="M 4,7 C 3.4459904,7 3,7.4459904 3,8 l 0,6 c 0,0.55401 0.4459904,1 1,1 l 5,0 c 0.55401,0 1,-0.44599 1,-1 l 0,-1 2,0 0,1 c 0,0.554 0.44599,1 1,1 l 5,0 c 0.55401,0 1,-0.446 1,-1 L 19,8 C 19,7.446 18.55401,7 18,7 l -5,0 c -0.55401,0 -1,0.446 -1,1 l 0,1 -2,0 0,-1 C 10,7.4459904 9.55401,7 9,7 Z M 4,8 7,8 9,8 9,9 C 8.4459904,9 8,9.4459904 8,10 l 0,2 c 0,0.55401 0.4459904,1 1,1 l 0,1 -2,0 -3,0 z m 9,0 3,0 2,0 0,6 -2,0 -3,0 0,-1 c 0.55401,0 1,-0.44599 1,-1 l 0,-2 C 14,9.4459904 13.55401,9 13,9 Z m -4,2 4,0 0,2 -4,0 z"
+       transform="translate(0,1030.3622)"
+       id="rect4161"
+       class="ColorScheme-Text" /></g></svg>

public/img/icons/breeze/story-editor.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="story-editor.svg"
+   inkscape:version="1.4.2 (ebf0e940d0, 2025-05-08)"
+   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="57.0625"
+     inkscape:cx="8"
+     inkscape:cy="8"
+     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 3 2 L 3 14 L 7 14 L 7 13 L 4 13 L 4 5 L 12 5 L 12 7 L 13 7 L 13 2 L 12 2 L 12 4 L 11 4 L 11 2 L 5 2 L 5 4 L 4 4 L 4 2 L 3 2 z M 5 6 L 5 7 L 11 7 L 11 6 L 5 6 z M 5 8 L 5 9 L 8 9 L 8 8 L 5 8 z M 12 8 L 8 12 L 8 14 L 10 14 L 14 10 L 12 8 z M 11.689453 9.6894531 L 12.28125 10.28125 L 10.59375 11.96875 L 10.59375 11.984375 L 9.3125 13.28125 L 8.71875 12.6875 L 11.689453 9.6894531 z M 5 10 L 5 11 L 7 11 L 7 10 L 5 10 z "
+     class="ColorScheme-Text"
+     id="path1" />
+</svg>