n_u/nathanupchurch.com
1
0
Fork 0
Code Issues Pull Requests Packages Projects Releases Wiki Activity

Compare commits

base: n_u:6d6302bf5a2fc60adc24f19120f02e185faf57f6
Branches Tags
n_u:main n_u:responsive-images
...
compare: n_u:main
Branches Tags
n_u:main n_u:responsive-images

2 Commits
6d6302bf5a ... main

Author SHA1 Message Date
Nathan Upchurch
6621b20829 Add posts 2026-02-13 14:03:04 -06:00
Nathan Upchurch
72c0fddf02 Move styles to head, lower woo audio 2026-02-13 14:02:54 -06:00
17 changed files with 198 additions and 141 deletions
Expand all files Collapse all files

2
_includes/layouts/base.njk
View File

@@ -12,6 +12,8 @@
<!-- /Indieweb profile links -->
{% include "structuredData.njk" %}
{% include "analytics.html" %}
{% include "weatherStyle.njk" %}
{% include "wooModeStyle.njk" %}
</head>
<body>
{% include "header.njk" %}

8
_includes/siteSettings.njk
View File

@@ -1,11 +1,3 @@
<style>
#siteSettingsContainer {
& button:not(#settingsDone) {
margin-top: 0;
}
}
</style>
<div id="siteSettingsContainer">
<button onclick="siteSettings.showModal();">Site Settings</button>
<dialog id="siteSettings">

111
_includes/weather.njk
View File

@@ -1,117 +1,6 @@
<!-- 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>

112
_includes/weatherStyle.njk Normal file
View File

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

19
_includes/wooMode.njk
View File

@@ -173,22 +173,6 @@
}
</script>
<style>
body {
background: none;
}
canvas {
display: block;
opacity: .35;
pointer-events: none;
position: fixed;
top: 0;
left: 0;
z-index: -1;
}
}
</style>
<script>
const wooCanvas = document.getElementById("shaderCanvas");
const wooToggle = document.getElementById("wooToggle");
@@ -211,7 +195,8 @@
if (this.checked) {
localStorage.setItem("wooMode", 1);
const wooAudio = new Audio("/audio/30995__unclesigmund__woo-2.mp3");
let wooAudio = new Audio("/audio/30995__unclesigmund__woo-2.mp3");
wooAudio.volume = 0.4;
wooAudio.play();
wooCanvas.classList.remove("hidden");

16
_includes/wooModeStyle.njk Normal file
View File

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

4
content/blog/woo-woo-incense-description-generator-and-other-updates.md
View File

@@ -10,7 +10,7 @@ synopsis: "New on this website: a handy tool to generate woo, comments, and weat
mastodon_id: "116021705122518903"
---
## Woo-woo incense description generator
Whether they are spiritually inclined or mere earth-bound fragrance-heads, all sorts of people are attracted to the fragrant world of incense. It's no surprise, then, that the language people use to describe incense can get pretty colorful. If you've ever wished you could write so… *interestingly* about incense, my brand new [Woo-woo incense description generator](/special/woo-woo-incense-description-generator/) is just the ticket! Occupying the "special" section of [my sitemap](/sitemap/) along-side the flying toasters, with but one click of a button it spits out a fresh serving of woo, complete with ingredients and "medicinal effects."[^1] Why not [give it a try?](/special/woo-woo-incense-description-generator/)
Whether they are spiritually inclined or mere earth-bound fragrance-heads, all sorts of people are attracted to the fragrant world of incense. It's no surprise, then, that the language people use to describe the incense they make can get pretty colorful. If you've ever wished you could write so… *interestingly* about incense, my brand new [Woo-woo incense description generator](/special/woo-woo-incense-description-generator/) is just the ticket! Occupying the "special" section of [my sitemap](/sitemap/) along-side the flying toasters, with but one click of a button it spits out a fresh serving of woo, complete with ingredients and "medicinal effects."[^1] Why not [give it a try?](/special/woo-woo-incense-description-generator/)
[![A screenshot of the generator. Swirling rainbow colors form the background.](/img/woo-woo-incense-description-generator-and-other-updates/woo-woo-incense-description-generator_copy.webp "It comes with a psychedelic background animation and everything.")](/img/woo-woo-incense-description-generator-and-other-updates/woo-woo-incense-description-generator_copy.webp)
@@ -23,6 +23,6 @@ You may have noticed a "site settings" button at the bottom of the page. I set t
For a while, the service that powers my [guestbook](/guestbook/) went down due to [some drama with Azure](https://meadow.cafe/blog/0008-azure-disabled-my-account-trip-to-the-cabin/) and lost some data. Therefore, if you notice that your message is missing, know that I didn't delete it on purpose and feel free to leave another.
## Comments now available
I have, at long last, set up commenting via [Isso](https://isso-comments.de/) on blog posts and, as an unintended side effect, [quizzes](quizzes), which I kind of like so I left it (there's only one quiz at the minute anyway). I wanted to do this ages ago, but I couldn't get Isso working on my [YunoHost](https://yunohost.org/index.en.html) server until recently. YunoHost is fantastic, but support can be scarce as hen's teeth, so we'll see how things go. Hopefully, it'll be rock solid and serve me well for years to come. Hopefully people will leave polite, thoughtful comments. Hopefully, spam is thin on the ground. Time will tell all!
I have, at long last, set up commenting via [Isso](https://isso-comments.de/) on blog posts and, as an unintended side effect, [quizzes](/quizzes), which I kind of like so I left it (there's only one quiz at the minute anyway). I wanted to do this ages ago, but I couldn't get Isso working on my [YunoHost](https://yunohost.org/index.en.html) server until recently. YunoHost is fantastic, but support can be scarce as hen's teeth, so we'll see how things go. Hopefully, it'll be rock solid and serve me well for years to come. Hopefully people will leave polite, thoughtful comments. Hopefully, spam is thin on the ground. Time will tell all!
[^1]: For the love of all that is good in this world do not take these seriously.

2
content/changelog/index.md
View File

@@ -4,6 +4,8 @@ title: Nathan Upchurch | Changelog
structuredData: none
---
# Changelog
* 2026-02-07
* Updated [/wish](/wish).
* 2026-02-04
* Added post comments via [Isso](https://isso-comments.de/). Please don't make me regret this.
* Add [Mochi](https://mochi.meadow.cafe/) privacy respecting analytics.

7
content/now-burning/Now Burning_2026-02-09_13:28.md Normal file
View File

@@ -0,0 +1,7 @@
---
title: Agarwood
manufacturer: Ganesha
date: 2026-02-09 13:20:00
time: 1:20 PM
---

7
content/now-burning/Now Burning_2026-02-09_22:56.md Normal file
View File

@@ -0,0 +1,7 @@
---
title: Musk
manufacturer: "The Mother’s Fragrances"
date: 2026-02-09 22:56:00
time: 10:56 PM
---

7
content/now-burning/Now Burning_2026-02-10_10:06.md Normal file
View File

@@ -0,0 +1,7 @@
---
title: Patchouli
manufacturer: "The Mother’s Fragrances"
date: 2026-02-10 10:06:00
time: 10:06 AM
---

7
content/now-burning/Now Burning_2026-02-10_12:42.md Normal file
View File

@@ -0,0 +1,7 @@
---
title: Oud
manufacturer: Flora Botanical Incense
date: 2026-02-10 12:42:00
time: 12:42 PM
---

7
content/now-burning/Now Burning_2026-02-11_10:17.md Normal file
View File

@@ -0,0 +1,7 @@
---
title: Hawaiian Summer
manufacturer: Incense Apprentice
date: 2026-02-11 10:16:00
time: 10:16 AM
---
I think a little age has done this stick good. It's got a pleasant coolness.

7
content/now-burning/Now Burning_2026-02-13_10:03.md Normal file
View File

@@ -0,0 +1,7 @@
---
title: "Frankincense & Myrrh with Sacred Sage"
manufacturer: Fred Soll
date: 2026-02-13 10:02:00
time: 10:02 AM
---
An incredibly strong stick. Ventilation is key!

10
content/special/woo-woo-incense-description-generator/index.njk
View File

@@ -6,12 +6,16 @@ forcedWoo: true
---
<div class="container">
<h1>Woo-Woo Incense Description Generator</h1>
<p>Ever wonder how people come up with those confusing esoteric descriptions of their incense complete with “medicinal effects?” Want some ideas to spice up your Instagram profile, website, or Etsy listings? Well you’re in luck! Click the button below to generate an incense description so mystical you’ll swear your chakras are aligned! Music by <a href="https://pixabay.com/users/saavane-32312792/">saavane on Pixabay</a>. Woo sound effect by <a href="https://freesound.org/s/30995/">UncleSigmund on freesound</a>. Background effect from <a href="https://codepen.io/tommyho/pen/JjgoZLK">Tommy Ho on Codepen</a>. No <a href="/ai">AI</a> used—I can write slop on my own!</p>
<p>Ever wonder how incense makers come up with those confusing esoteric descriptions of their incense complete with “medicinal effects?” Want some ideas to spice up your Instagram profile, website, or Etsy listings? Well you’re in luck! Click the button below to generate an incense description so mystical you’ll swear your chakras are aligned! Music by <a href="https://pixabay.com/users/saavane-32312792/">saavane on Pixabay</a>. Woo sound effect by <a href="https://freesound.org/s/30995/">UncleSigmund on freesound</a>. Background effect from <a href="https://codepen.io/tommyho/pen/JjgoZLK">Tommy Ho on Codepen</a>. No <a href="/ai">AI</a> used—I can write slop on my own!</p>
<script src="/js/incense-description-generator.js"></script>
<script>
const audioOnClick = new Audio("/audio/30995__unclesigmund__woo-2.mp3");
const bgMusic = new Audio("/audio/new-sun-428916.mp3");
let audioOnClick = new Audio("/audio/30995__unclesigmund__woo-2.mp3");
let bgMusic = new Audio("/audio/new-sun-428916.mp3");
audioOnClick.volume = 0.4;
bgMusic.volume = 0.4;
bgMusic.loop = true;
window.addEventListener("pointermove", (e) => {
bgMusic.play();

8
content/wish/index.md
View File

@@ -41,18 +41,26 @@ However if abstention seems unconscionable, I would be delighted if you were to
* [Kida Jinseido Ranjatai Incense](https://kikohincense.com/collections/kida-jinseido-incense-since-1937/products/kida-jinseido-ranjatai-incense)
* [Kunmeido Shin Tokusen Reiryokoh Incense](https://kikohincense.com/collections/kunmeido-incense-kikoh/products/kunmeido-shin-tokusen-reiryokoh-incense)
* [Minorien Kyara Fu-In](https://kikohincense.com/collections/minorien-incense-kikoh/products/minorien-kyara-fu-in-incense)
* [Nippon Kodo Kayuragi - Rose](https://kikohincense.com/collections/roses-and-chocolates-incense-collection/products/nippon-kodo-kayuragi-incense-rose)
* [Nippon Kodo Hana no Hana - Rose](https://kikohincense.com/collections/roses-and-chocolates-incense-collection/products/nippon-kodo-hana-no-hana-incense-rose)
* [Kin Objects Red Soil Aloeswood](https://kinobjects.com/products/red-soil-aloeswood-agarwood-incense-sticks?variant=40432647929879)
* [Kokando Kaori no Kioku Chocolate](https://kikohincense.com/collections/roses-and-chocolates-incense-collection/products/kokando-kaori-no-kioku-chocolate-incense)
* [Kokando Kunpūshi Aloeswood](https://kikohincense.com/products/kokando-kunpushi-aloeswood)
* [Kunmeido Shin Tokusen Reiryokoh](https://kikohincense.com/collections/kunmeido-incense-kikoh/products/kunmeido-shin-tokusen-reiryokoh-incense)
* [Les Encens du Monde - Moonlit Night | Karin](https://lotuszenincense.com/products/moonlit-night-karin-by-les-encens-du-monde?shpxid=fa2eb8b9-373c-44b6-b675-585881e5540b)
* [Mysore](https://www.aliexpress.us/item/3256808362085525.html)
* [Shoyeido Horin Assortment](https://shoyeido.com/products/horin-incense-assortment-sampler)
* [Shoyeido Kohbai Pressed Incense](https://shoyeido.com/products/kohbai-red-plum-blossoms?variant=41714738921590)
* [Shoyeido Kunro Incense Assortment](https://shoyeido.com/products/kunro-incense-assortment)
* [Shoyeido Overtones Patchouli](https://shoyeido.com/products/overtones-patchouli-incense)
* [Shoyeido Premium Incense Sampler](https://shoyeido.com/products/premium-incense-assortment-sampler)
* [Tennendo Hagi Rose Incense](https://kikohincense.com/collections/tennendo-incense-kikoh/products/tennendo-hagi-rose-incense)
* [Tennendo Hanano Byakudan](https://www.japanincense.com/tn-0051.html)
* [Tennendo Kyara Incense](https://kikohincense.com/products/tennendo-kyara-incense)
* [Tennendo Sumire Violet Incense](https://kikohincense.com/products/tennendo-ysumire-violet-incense)
* [Yamadamatsu Hyofu](https://kikohincense.com/collections/yamadamatsu-incense-kikoh/products/yamadamatsu-hyofu-incense)
* [Yamadamatsu Kumoi](https://kikohincense.com/products/yamadamatsu-kumoyi-incense)
* [Yamadamatsu Shoyo](https://www.japanincense.com/ym-0037.html)
### Tea
* A malty black tea from either [Spirit Tea](https://spirittea.co/) or [Yunnan Sourcing](https://yunnansourcing.com/).

5
public/css/index.css
View File

@@ -867,6 +867,11 @@ sup {
}
/* Site Settings */
#siteSettingsContainer {
& button:not(#settingsDone) {
margin-top: 0;
}
}
.siteSettingsToggle {
color: var(--text-color);
font-size: var(--step--2);