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

Move styles to head, lower woo audio

Browse Source
This commit is contained in:
Nathan Upchurch
2026-02-13 14:02:54 -06:00
parent 6d6302bf5a
commit 72c0fddf02
11 changed files with 156 additions and 141 deletions
Download Patch File Download Diff File Expand all files Collapse all files

2
_includes/layouts/base.njk
View File

@@ -12,6 +12,8 @@
<!-- /Indieweb profile links --> <!-- /Indieweb profile links -->
{% include "structuredData.njk" %} {% include "structuredData.njk" %}
{% include "analytics.html" %} {% include "analytics.html" %}
{% include "weatherStyle.njk" %}
{% include "wooModeStyle.njk" %}
</head> </head>
<body> <body>
{% include "header.njk" %} {% 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"> <div id="siteSettingsContainer">
<button onclick="siteSettings.showModal();">Site Settings</button> <button onclick="siteSettings.showModal();">Site Settings</button>
<dialog id="siteSettings"> <dialog id="siteSettings">

111
_includes/weather.njk
View File

@@ -1,117 +1,6 @@
<!-- weather --> <!-- weather -->
<!-- Based on https://codepen.io/codeconvey/pen/xRzQay --> <!-- 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. #} {# 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="fallingObjects" id="weather" aria-hidden="true">
<div class="fallingObject"> <div class="fallingObject">
<div>{{ metadata.weatherSymbol }}</div> <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> </script>
<style>
body {
background: none;
}
canvas {
display: block;
opacity: .35;
pointer-events: none;
position: fixed;
top: 0;
left: 0;
z-index: -1;
}
}
</style>
<script> <script>
const wooCanvas = document.getElementById("shaderCanvas"); const wooCanvas = document.getElementById("shaderCanvas");
const wooToggle = document.getElementById("wooToggle"); const wooToggle = document.getElementById("wooToggle");
@@ -211,7 +195,8 @@
if (this.checked) { if (this.checked) {
localStorage.setItem("wooMode", 1); 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(); wooAudio.play();
wooCanvas.classList.remove("hidden"); 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" mastodon_id: "116021705122518903"
--- ---
## Woo-woo incense description generator ## 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) [![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. 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 ## 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. [^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 structuredData: none
--- ---
# Changelog # Changelog
* 2026-02-07
* Updated [/wish](/wish).
* 2026-02-04 * 2026-02-04
* Added post comments via [Isso](https://isso-comments.de/). Please don't make me regret this. * 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. * Add [Mochi](https://mochi.meadow.cafe/) privacy respecting analytics.

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

@@ -6,12 +6,16 @@ forcedWoo: true
--- ---
<div class="container"> <div class="container">
<h1>Woo-Woo Incense Description Generator</h1> <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 src="/js/incense-description-generator.js"></script>
<script> <script>
const audioOnClick = new Audio("/audio/30995__unclesigmund__woo-2.mp3"); let audioOnClick = new Audio("/audio/30995__unclesigmund__woo-2.mp3");
const bgMusic = new Audio("/audio/new-sun-428916.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) => { window.addEventListener("pointermove", (e) => {
bgMusic.play(); 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) * [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) * [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) * [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) * [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) * [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) * [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 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 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 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) * [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 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 Hanano Byakudan](https://www.japanincense.com/tn-0051.html)
* [Tennendo Kyara Incense](https://kikohincense.com/products/tennendo-kyara-incense) * [Tennendo Kyara Incense](https://kikohincense.com/products/tennendo-kyara-incense)
* [Tennendo Sumire Violet Incense](https://kikohincense.com/products/tennendo-ysumire-violet-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 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 ### Tea
* A malty black tea from either [Spirit Tea](https://spirittea.co/) or [Yunnan Sourcing](https://yunnansourcing.com/). * 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 */ /* Site Settings */
#siteSettingsContainer {
& button:not(#settingsDone) {
margin-top: 0;
}
}
.siteSettingsToggle { .siteSettingsToggle {
color: var(--text-color); color: var(--text-color);
font-size: var(--step--2); font-size: var(--step--2);