inherentlee/leecat.art-site
0
0 Fork 0
Code Issues Pull Requests Actions Packages Projects Releases Wiki Activity

drone build Mon Sep 21 15:40:57 PDT 2026

Browse Source
This commit is contained in:
inherentlee committed 2026-09-21 22:40:57 +00:00
1 parent 683db4c7dd
commit 2d090a4541
327 files changed
+4703 -6772
Download Patch File Download Diff File Expand all files Collapse all files

No files matched your search

1/index.html
+15 -15
View File
@@ -1397,20 +1397,6 @@ switch (currentThemeValue) {
<ol id="postlist">
<li class="post">
<a class="postlink" href="/accessible-image-modals/">
<h2 data-ha-exclude="">accessible image modals </h2>
<ul class="postlist-tags">
<li>software</li>
</ul>
<img src="/img/snacking-seagull.jpg" alt="Image unrelated to post. A seagull floating in the water with a starfish hanging out of eir mouth." loading="lazy" decoding="async" width="1000" height="666">
</a>
</li>
<li class="post">
<a class="postlink" href="/eleventy-lessons/">
<h2 data-ha-exclude="">eleventy lessons </h2>
@@ -1581,6 +1567,20 @@ switch (currentThemeValue) {
</a>
</li>
<li class="post">
<a class="postlink" href="/spinning-plants/">
<h2 data-ha-exclude="">spinning plants </h2>
<ul class="postlist-tags">
<li>yarn</li>
</ul>
<img src="/img/plant-handspun.jpg" alt="6 small skeins of handspun yarn, each made from a different plant fiber. from top, we have flax (medium brown, rough); what is probably lotus (golden, shiny and soft); banana (white and semi shiny); hemp (light brown, rough); tencel (white and very shiny); ramie (a particularly small skein, white and semi shiny)" loading="lazy" decoding="async" width="1000" height="874">
</a>
</li>
</ol>
@@ -1655,6 +1655,6 @@ switch (currentThemeValue) {
</footer>
<!-- This page `/1/` was built on 2026-09-21T20:55:49.610Z -->
<!-- This page `/1/` was built on 2026-09-21T22:40:48.068Z -->
</body>
</html>
10/index.html
+19 -15
View File
@@ -1397,20 +1397,6 @@ switch (currentThemeValue) {
<ol id="postlist">
<li class="post">
<a class="postlink" href="/leather-lighter-case/">
<h2 data-ha-exclude="">leather lighter case </h2>
<ul class="postlist-tags">
<li>leather</li>
</ul>
<img src="/img/leather-lighter-case.jpg" alt="A bic lighter wrapped in leather and hand-stitched up one side." loading="lazy" decoding="async" width="1000" height="750">
</a>
</li>
<li class="post">
<a class="postlink" href="/leather-chest-harness/">
<h2 data-ha-exclude="">leather chest harness </h2>
@@ -1617,6 +1603,24 @@ switch (currentThemeValue) {
</a>
</li>
<li class="post">
<a class="postlink" href="/coming-out/">
<h2 data-ha-exclude="">coming out </h2>
<ul class="postlist-tags">
<li>print</li>
<li>card</li>
<li>gender</li>
</ul>
<img src="/img/coming-out-card-print.jpg" alt="A card and print in the same design - a chick and a broken eggshell, and a simple font reading &#39;congrats on coming out of your shell&#39;" loading="lazy" decoding="async" width="1000" height="750">
</a>
</li>
</ol>
@@ -1691,6 +1695,6 @@ switch (currentThemeValue) {
</footer>
<!-- This page `/10/` was built on 2026-09-21T20:55:52.494Z -->
<!-- This page `/10/` was built on 2026-09-21T22:40:50.891Z -->
</body>
</html>
11/index.html
+15 -19
View File
@@ -1397,24 +1397,6 @@ switch (currentThemeValue) {
<ol id="postlist">
<li class="post">
<a class="postlink" href="/coming-out/">
<h2 data-ha-exclude="">coming out </h2>
<ul class="postlist-tags">
<li>print</li>
<li>card</li>
<li>gender</li>
</ul>
<img src="/img/coming-out-card-print.jpg" alt="A card and print in the same design - a chick and a broken eggshell, and a simple font reading &#39;congrats on coming out of your shell&#39;" loading="lazy" decoding="async" width="1000" height="750">
</a>
</li>
<li class="post">
<a class="postlink" href="/happy-bihrtday/">
<h2 data-ha-exclude="">happy biHRTday </h2>
@@ -1609,6 +1591,20 @@ switch (currentThemeValue) {
</a>
</li>
<li class="post">
<a class="postlink" href="/stampede-journal/">
<h2 data-ha-exclude="">stampede journal </h2>
<ul class="postlist-tags">
<li>book</li>
</ul>
<img src="/img/stampede-journal.jpg" alt="A 4-part collage of a hardcover book, showing a coloring page with &#39;stampede!&#39; written across it." loading="lazy" decoding="async" width="1000" height="1777">
</a>
</li>
</ol>
@@ -1683,6 +1679,6 @@ switch (currentThemeValue) {
</footer>
<!-- This page `/11/` was built on 2026-09-21T20:55:52.922Z -->
<!-- This page `/11/` was built on 2026-09-21T22:40:51.240Z -->
</body>
</html>
12/index.html
+15 -15
View File
@@ -1397,20 +1397,6 @@ switch (currentThemeValue) {
<ol id="postlist">
<li class="post">
<a class="postlink" href="/stampede-journal/">
<h2 data-ha-exclude="">stampede journal </h2>
<ul class="postlist-tags">
<li>book</li>
</ul>
<img src="/img/stampede-journal.jpg" alt="A 4-part collage of a hardcover book, showing a coloring page with &#39;stampede!&#39; written across it." loading="lazy" decoding="async" width="1000" height="1777">
</a>
</li>
<li class="post">
<a class="postlink" href="/orange-green-journal/">
<h2 data-ha-exclude="">orange green journal </h2>
@@ -1615,6 +1601,20 @@ switch (currentThemeValue) {
</a>
</li>
<li class="post">
<a class="postlink" href="/backend-accessibility/">
<h2 data-ha-exclude="">backend accessibility </h2>
<ul class="postlist-tags">
<li>software</li>
</ul>
<img src="/img/camelCase-print.jpg" alt="A carved stamp next to its print. The print reads &#39;#camelCase&#39; in a slightly formal-looking italic font." loading="lazy" decoding="async" width="1000" height="750">
</a>
</li>
</ol>
@@ -1689,6 +1689,6 @@ switch (currentThemeValue) {
</footer>
<!-- This page `/12/` was built on 2026-09-21T20:55:53.131Z -->
<!-- This page `/12/` was built on 2026-09-21T22:40:51.432Z -->
</body>
</html>
13/index.html
+17 -15
View File
@@ -1397,20 +1397,6 @@ switch (currentThemeValue) {
<ol id="postlist">
<li class="post">
<a class="postlink" href="/backend-accessibility/">
<h2 data-ha-exclude="">backend accessibility </h2>
<ul class="postlist-tags">
<li>software</li>
</ul>
<img src="/img/camelCase-print.jpg" alt="A carved stamp next to its print. The print reads &#39;#camelCase&#39; in a slightly formal-looking italic font." loading="lazy" decoding="async" width="1000" height="750">
</a>
</li>
<li class="post">
<a class="postlink" href="/block-printing-transfer-method/">
<h2 data-ha-exclude="">block printing transfer method </h2>
@@ -1603,6 +1589,22 @@ switch (currentThemeValue) {
</a>
</li>
<li class="post">
<a class="postlink" href="/butch-hands-pattern/">
<h2 data-ha-exclude="">butch hands pattern </h2>
<ul class="postlist-tags">
<li>knit</li>
<li>highlight</li>
</ul>
<img src="/img/butch-hands.jpg" alt="Hands wearing a pair of pink and grey gloves with convertable mitten tops." loading="lazy" decoding="async" width="1000" height="750">
</a>
</li>
</ol>
@@ -1677,6 +1679,6 @@ switch (currentThemeValue) {
</footer>
<!-- This page `/13/` was built on 2026-09-21T20:55:53.306Z -->
<!-- This page `/13/` was built on 2026-09-21T22:40:51.520Z -->
</body>
</html>
14/index.html
+15 -17
View File
@@ -1397,22 +1397,6 @@ switch (currentThemeValue) {
<ol id="postlist">
<li class="post">
<a class="postlink" href="/butch-hands-pattern/">
<h2 data-ha-exclude="">butch hands pattern </h2>
<ul class="postlist-tags">
<li>knit</li>
<li>highlight</li>
</ul>
<img src="/img/butch-hands.jpg" alt="Hands wearing a pair of pink and grey gloves with convertable mitten tops." loading="lazy" decoding="async" width="1000" height="750">
</a>
</li>
<li class="post">
<a class="postlink" href="/iris/">
<h2 data-ha-exclude="">iris </h2>
@@ -1591,6 +1575,20 @@ switch (currentThemeValue) {
</a>
</li>
<li class="post">
<a class="postlink" href="/orange-journal/">
<h2 data-ha-exclude="">orange journal </h2>
<ul class="postlist-tags">
<li>book</li>
</ul>
<img src="/img/orange-journal.jpg" alt="A three panel collage showcasing a small book with foldout pages and a bright orange cover." loading="lazy" decoding="async" width="1000" height="1776">
</a>
</li>
</ol>
@@ -1665,6 +1663,6 @@ switch (currentThemeValue) {
</footer>
<!-- This page `/14/` was built on 2026-09-21T20:55:53.503Z -->
<!-- This page `/14/` was built on 2026-09-21T22:40:51.658Z -->
</body>
</html>
15/index.html
+1 -15
View File
@@ -1397,20 +1397,6 @@ switch (currentThemeValue) {
<ol id="postlist">
<li class="post">
<a class="postlink" href="/orange-journal/">
<h2 data-ha-exclude="">orange journal </h2>
<ul class="postlist-tags">
<li>book</li>
</ul>
<img src="/img/orange-journal.jpg" alt="A three panel collage showcasing a small book with foldout pages and a bright orange cover." loading="lazy" decoding="async" width="1000" height="1776">
</a>
</li>
<li class="post">
<a class="postlink" href="/striped-journal/">
<h2 data-ha-exclude="">striped journal </h2>
@@ -1597,6 +1583,6 @@ switch (currentThemeValue) {
</footer>
<!-- This page `/15/` was built on 2026-09-21T20:55:53.665Z -->
<!-- This page `/15/` was built on 2026-09-21T22:40:51.827Z -->
</body>
</html>
2/index.html
+15 -15
View File
@@ -1397,20 +1397,6 @@ switch (currentThemeValue) {
<ol id="postlist">
<li class="post">
<a class="postlink" href="/spinning-plants/">
<h2 data-ha-exclude="">spinning plants </h2>
<ul class="postlist-tags">
<li>yarn</li>
</ul>
<img src="/img/plant-handspun.jpg" alt="6 small skeins of handspun yarn, each made from a different plant fiber. from top, we have flax (medium brown, rough); what is probably lotus (golden, shiny and soft); banana (white and semi shiny); hemp (light brown, rough); tencel (white and very shiny); ramie (a particularly small skein, white and semi shiny)" loading="lazy" decoding="async" width="1000" height="874">
</a>
</li>
<li class="post">
<a class="postlink" href="/comparing-text-editors/">
<h2 data-ha-exclude="">comparing text editors </h2>
@@ -1579,6 +1565,20 @@ switch (currentThemeValue) {
</a>
</li>
<li class="post">
<a class="postlink" href="/my-favorite-git-flag/">
<h2 data-ha-exclude="">my favorite git flag </h2>
<ul class="postlist-tags">
<li>software</li>
</ul>
<img src="/img/shelf-mushrooms.jpg" alt="Picture unrelated to post. Creamy beige shelf mushrooms on a mossy tree trunk." loading="lazy" decoding="async" width="1000" height="666">
</a>
</li>
</ol>
@@ -1653,6 +1653,6 @@ switch (currentThemeValue) {
</footer>
<!-- This page `/2/` was built on 2026-09-21T20:55:49.952Z -->
<!-- This page `/2/` was built on 2026-09-21T22:40:48.476Z -->
</body>
</html>
3/index.html
+15 -15
View File
@@ -1397,20 +1397,6 @@ switch (currentThemeValue) {
<ol id="postlist">
<li class="post">
<a class="postlink" href="/my-favorite-git-flag/">
<h2 data-ha-exclude="">my favorite git flag </h2>
<ul class="postlist-tags">
<li>software</li>
</ul>
<img src="/img/shelf-mushrooms.jpg" alt="Picture unrelated to post. Creamy beige shelf mushrooms on a mossy tree trunk." loading="lazy" decoding="async" width="1000" height="666">
</a>
</li>
<li class="post">
<a class="postlink" href="/dragon-mask/">
<h2 data-ha-exclude="">dragon mask </h2>
@@ -1585,6 +1571,20 @@ switch (currentThemeValue) {
</a>
</li>
<li class="post">
<a class="postlink" href="/redirections/">
<h2 data-ha-exclude="">redirections </h2>
<ul class="postlist-tags">
<li>software</li>
</ul>
<img src="/img/angle-brackets-uwu.jpg" alt="Ascii art of an emoticon with pinched eyes and a small mouth made with two angle brackets." loading="lazy" decoding="async" width="1000" height="316">
</a>
</li>
</ol>
@@ -1659,6 +1659,6 @@ switch (currentThemeValue) {
</footer>
<!-- This page `/3/` was built on 2026-09-21T20:55:50.223Z -->
<!-- This page `/3/` was built on 2026-09-21T22:40:48.763Z -->
</body>
</html>
4/index.html
+17 -15
View File
@@ -1397,20 +1397,6 @@ switch (currentThemeValue) {
<ol id="postlist">
<li class="post">
<a class="postlink" href="/redirections/">
<h2 data-ha-exclude="">redirections </h2>
<ul class="postlist-tags">
<li>software</li>
</ul>
<img src="/img/angle-brackets-uwu.jpg" alt="Ascii art of an emoticon with pinched eyes and a small mouth made with two angle brackets." loading="lazy" decoding="async" width="1000" height="316">
</a>
</li>
<li class="post">
<a class="postlink" href="/azure-locations-and-file-crawling/">
<h2 data-ha-exclude="">azure locations and file crawling </h2>
@@ -1591,6 +1577,22 @@ switch (currentThemeValue) {
</a>
</li>
<li class="post">
<a class="postlink" href="/leather-long-stitch-journals/">
<h2 data-ha-exclude="">leather long-stitch journals </h2>
<ul class="postlist-tags">
<li>leather</li>
<li>book</li>
</ul>
<img src="/img/long-stitch-journals.jpg" alt="A stack of hand-bound journals showing long stitches aligned with the spines. They are leather bound and have tie closures." loading="lazy" decoding="async" width="1000" height="1333">
</a>
</li>
</ol>
@@ -1665,6 +1667,6 @@ switch (currentThemeValue) {
</footer>
<!-- This page `/4/` was built on 2026-09-21T20:55:50.505Z -->
<!-- This page `/4/` was built on 2026-09-21T22:40:49.151Z -->
</body>
</html>
404.html
+1 -1
View File
@@ -1451,6 +1451,6 @@ switch (currentThemeValue) {
</footer>
<!-- This page `/404.html` was built on 2026-09-21T20:55:47.800Z -->
<!-- This page `/404.html` was built on 2026-09-21T22:40:46.033Z -->
</body>
</html>
5/index.html
+15 -17
View File
@@ -1397,22 +1397,6 @@ switch (currentThemeValue) {
<ol id="postlist">
<li class="post">
<a class="postlink" href="/leather-long-stitch-journals/">
<h2 data-ha-exclude="">leather long-stitch journals </h2>
<ul class="postlist-tags">
<li>leather</li>
<li>book</li>
</ul>
<img src="/img/long-stitch-journals.jpg" alt="A stack of hand-bound journals showing long stitches aligned with the spines. They are leather bound and have tie closures." loading="lazy" decoding="async" width="1000" height="1333">
</a>
</li>
<li class="post">
<a class="postlink" href="/lobstah/">
<h2 data-ha-exclude="">lobstah </h2>
@@ -1585,6 +1569,20 @@ switch (currentThemeValue) {
</a>
</li>
<li class="post">
<a class="postlink" href="/triangle-pouch/">
<h2 data-ha-exclude="">triangle pouch </h2>
<ul class="postlist-tags">
<li>leather</li>
</ul>
<img src="/img/triangle-pouch.jpg" alt="5 small triangular pouches made of leather in two sizes and various colors." loading="lazy" decoding="async" width="1000" height="750">
</a>
</li>
</ol>
@@ -1659,6 +1657,6 @@ switch (currentThemeValue) {
</footer>
<!-- This page `/5/` was built on 2026-09-21T20:55:50.894Z -->
<!-- This page `/5/` was built on 2026-09-21T22:40:49.565Z -->
</body>
</html>
6/index.html
+15 -15
View File
@@ -1397,20 +1397,6 @@ switch (currentThemeValue) {
<ol id="postlist">
<li class="post">
<a class="postlink" href="/triangle-pouch/">
<h2 data-ha-exclude="">triangle pouch </h2>
<ul class="postlist-tags">
<li>leather</li>
</ul>
<img src="/img/triangle-pouch.jpg" alt="5 small triangular pouches made of leather in two sizes and various colors." loading="lazy" decoding="async" width="1000" height="750">
</a>
</li>
<li class="post">
<a class="postlink" href="/tiny-portraits/">
<h2 data-ha-exclude="">tiny portraits </h2>
@@ -1583,6 +1569,20 @@ switch (currentThemeValue) {
</a>
</li>
<li class="post">
<a class="postlink" href="/shrimp-cat-toy/">
<h2 data-ha-exclude="">shrimp cat toy </h2>
<ul class="postlist-tags">
<li>leather</li>
</ul>
<img src="/img/two-shrimp.jpg" alt="Two leather shrimp-shaped cat toys. They have long dangly antennae and are stitched in red and orange." loading="lazy" decoding="async" width="1000" height="666">
</a>
</li>
</ol>
@@ -1657,6 +1657,6 @@ switch (currentThemeValue) {
</footer>
<!-- This page `/6/` was built on 2026-09-21T20:55:51.151Z -->
<!-- This page `/6/` was built on 2026-09-21T22:40:49.753Z -->
</body>
</html>
7/index.html
+19 -15
View File
@@ -1397,20 +1397,6 @@ switch (currentThemeValue) {
<ol id="postlist">
<li class="post">
<a class="postlink" href="/shrimp-cat-toy/">
<h2 data-ha-exclude="">shrimp cat toy </h2>
<ul class="postlist-tags">
<li>leather</li>
</ul>
<img src="/img/two-shrimp.jpg" alt="Two leather shrimp-shaped cat toys. They have long dangly antennae and are stitched in red and orange." loading="lazy" decoding="async" width="1000" height="666">
</a>
</li>
<li class="post">
<a class="postlink" href="/foldy-wallet-with-thumb-slide/">
<h2 data-ha-exclude="">foldy wallet with thumb slide </h2>
@@ -1587,6 +1573,24 @@ switch (currentThemeValue) {
</a>
</li>
<li class="post">
<a class="postlink" href="/slightly-weird-man-club/">
<h2 data-ha-exclude="">slightly weird man club </h2>
<ul class="postlist-tags">
<li>print</li>
<li>shirt</li>
<li>gender</li>
</ul>
<img src="/img/slightly-weird-man-club-print.jpg" alt="A print that reads &#39;slightly weird man club&#39; in a nonbinary flag colored gradient" loading="lazy" decoding="async" width="1000" height="750">
</a>
</li>
</ol>
@@ -1661,6 +1665,6 @@ switch (currentThemeValue) {
</footer>
<!-- This page `/7/` was built on 2026-09-21T20:55:51.478Z -->
<!-- This page `/7/` was built on 2026-09-21T22:40:50.011Z -->
</body>
</html>
8/index.html
+15 -19
View File
@@ -1397,24 +1397,6 @@ switch (currentThemeValue) {
<ol id="postlist">
<li class="post">
<a class="postlink" href="/slightly-weird-man-club/">
<h2 data-ha-exclude="">slightly weird man club </h2>
<ul class="postlist-tags">
<li>print</li>
<li>shirt</li>
<li>gender</li>
</ul>
<img src="/img/slightly-weird-man-club-print.jpg" alt="A print that reads &#39;slightly weird man club&#39; in a nonbinary flag colored gradient" loading="lazy" decoding="async" width="1000" height="750">
</a>
</li>
<li class="post">
<a class="postlink" href="/pins/">
<h2 data-ha-exclude="">pins! </h2>
@@ -1589,6 +1571,20 @@ switch (currentThemeValue) {
</a>
</li>
<li class="post">
<a class="postlink" href="/brookes-collar/">
<h2 data-ha-exclude="">brooke&#39;s collar </h2>
<ul class="postlist-tags">
<li>leather</li>
</ul>
<img src="/img/lined-shearling-collar.jpg" alt="A green leather collar lined with brown/grey shearling and fitted with two sizes of silver-toned spikes." loading="lazy" decoding="async" width="1000" height="750">
</a>
</li>
</ol>
@@ -1663,6 +1659,6 @@ switch (currentThemeValue) {
</footer>
<!-- This page `/8/` was built on 2026-09-21T20:55:51.740Z -->
<!-- This page `/8/` was built on 2026-09-21T22:40:50.315Z -->
</body>
</html>
9/index.html
+15 -15
View File
@@ -1397,20 +1397,6 @@ switch (currentThemeValue) {
<ol id="postlist">
<li class="post">
<a class="postlink" href="/brookes-collar/">
<h2 data-ha-exclude="">brooke&#39;s collar </h2>
<ul class="postlist-tags">
<li>leather</li>
</ul>
<img src="/img/lined-shearling-collar.jpg" alt="A green leather collar lined with brown/grey shearling and fitted with two sizes of silver-toned spikes." loading="lazy" decoding="async" width="1000" height="750">
</a>
</li>
<li class="post">
<a class="postlink" href="/bag-strap/">
<h2 data-ha-exclude="">bag strap </h2>
@@ -1579,6 +1565,20 @@ switch (currentThemeValue) {
</a>
</li>
<li class="post">
<a class="postlink" href="/leather-lighter-case/">
<h2 data-ha-exclude="">leather lighter case </h2>
<ul class="postlist-tags">
<li>leather</li>
</ul>
<img src="/img/leather-lighter-case.jpg" alt="A bic lighter wrapped in leather and hand-stitched up one side." loading="lazy" decoding="async" width="1000" height="750">
</a>
</li>
</ol>
@@ -1653,6 +1653,6 @@ switch (currentThemeValue) {
</footer>
<!-- This page `/9/` was built on 2026-09-21T20:55:52.072Z -->
<!-- This page `/9/` was built on 2026-09-21T22:40:50.591Z -->
</body>
</html>
aarons-mask/index.html
+10 -12
View File
@@ -1887,45 +1887,43 @@ switch (currentThemeValue) {
<ol id="postlist">
<li class="post">
<a class="postlink" href="/x-acto-knife-sheath/">
<h2 data-ha-exclude="">x-acto knife sheath </h2>
<a class="postlink" href="/soras-collar/">
<h2 data-ha-exclude="">sora&#39;s collar </h2>
<ul class="postlist-tags">
<li>leather</li>
</ul>
<img src="/img/knife-sheaths.jpg" alt="Several blades with leather sheaths, and a few extra sheaths. There&#39;s a #2 blade with an orange sheath with yellow stitching, a #11 blade with a blue sheath with light grey stitching, and a skiving knife with a plum sheath and pink stitching." loading="lazy" decoding="async" width="1000" height="750">
<img src="/img/sora-collar.jpg" alt="A collage showing a red and black leather dog collar tooled with roses and the name Sora. It&#39;s fully stitched with dark red stitching and has brass hardware." loading="lazy" decoding="async" width="1000" height="1000">
</a>
</li>
<li class="post">
<a class="postlink" href="/leather-long-stitch-journals/">
<h2 data-ha-exclude="">leather long-stitch journals </h2>
<a class="postlink" href="/zipper-bifold-green/">
<h2 data-ha-exclude="">zipper bifold (green) </h2>
<ul class="postlist-tags">
<li>leather</li>
<li>book</li>
</ul>
<img src="/img/long-stitch-journals.jpg" alt="A stack of hand-bound journals showing long stitches aligned with the spines. They are leather bound and have tie closures." loading="lazy" decoding="async" width="1000" height="1333">
<img src="/img/zipper-bifold-green.jpg" alt="A collage showing a green leather wallet with a zippered pocket built into one external side." loading="lazy" decoding="async" width="1000" height="1332">
</a>
</li>
<li class="post">
<a class="postlink" href="/shrimp-cat-toy/">
<h2 data-ha-exclude="">shrimp cat toy </h2>
<a class="postlink" href="/vertical-zipper-card-wallet/">
<h2 data-ha-exclude="">vertical zipper card wallet </h2>
<ul class="postlist-tags">
<li>leather</li>
</ul>
<img src="/img/two-shrimp.jpg" alt="Two leather shrimp-shaped cat toys. They have long dangly antennae and are stitched in red and orange." loading="lazy" decoding="async" width="1000" height="666">
<img src="/img/vertical-zipper-card-wallet.jpg" alt="A collage showing a hand-stitched leather card wallet with 3 card pockets, a hidden pocket, and a zippered coin pouch." loading="lazy" decoding="async" width="1000" height="1000">
</a>
</li>
@@ -1982,6 +1980,6 @@ switch (currentThemeValue) {
</footer>
<!-- This page `/aarons-mask/` was built on 2026-09-21T20:55:47.793Z -->
<!-- This page `/aarons-mask/` was built on 2026-09-21T22:40:46.001Z -->
</body>
</html>
about/index.html
+1 -1
View File
@@ -1568,6 +1568,6 @@ switch (currentThemeValue) {
</footer>
<!-- This page `/about/` was built on 2026-09-21T20:55:47.799Z -->
<!-- This page `/about/` was built on 2026-09-21T22:40:46.033Z -->
</body>
</html>
acadia-coloring-journal/index.html
+20 -20
View File
@@ -1902,6 +1902,22 @@ switch (currentThemeValue) {
<h2 data-ha-exclude="">related posts</h2>
<ol id="postlist">
<li class="post">
<a class="postlink" href="/brookes-notebook/">
<h2 data-ha-exclude="">brooke&#39;s notebook </h2>
<ul class="postlist-tags">
<li>book</li>
<li>highlight</li>
</ul>
<img src="/img/brooke-notebook.jpg" alt="A six panel collage showing the covers, endpapers, and some of the pages of a notebook." loading="lazy" decoding="async" width="1000" height="1500">
</a>
</li>
<li class="post">
<a class="postlink" href="/square-watercolor-pad/">
<h2 data-ha-exclude="">square watercolor pad </h2>
@@ -1917,31 +1933,15 @@ switch (currentThemeValue) {
</li>
<li class="post">
<a class="postlink" href="/leather-long-stitch-journals/">
<h2 data-ha-exclude="">leather long-stitch journals </h2>
<ul class="postlist-tags">
<li>leather</li>
<li>book</li>
</ul>
<img src="/img/long-stitch-journals.jpg" alt="A stack of hand-bound journals showing long stitches aligned with the spines. They are leather bound and have tie closures." loading="lazy" decoding="async" width="1000" height="1333">
</a>
</li>
<li class="post">
<a class="postlink" href="/orange-green-journal/">
<h2 data-ha-exclude="">orange green journal </h2>
<a class="postlink" href="/striped-journal/">
<h2 data-ha-exclude="">striped journal </h2>
<ul class="postlist-tags">
<li>book</li>
</ul>
<img src="/img/orange-green-journal.jpg" alt="A 4-part collage of a slim handbound book." loading="lazy" decoding="async" width="1000" height="1777">
<img src="/img/striped-journal.jpg" alt="A three panel collage showcasing a journal with a striped cover." loading="lazy" decoding="async" width="1000" height="1776">
</a>
</li>
@@ -1998,6 +1998,6 @@ switch (currentThemeValue) {
</footer>
<!-- This page `/acadia-coloring-journal/` was built on 2026-09-21T20:55:47.771Z -->
<!-- This page `/acadia-coloring-journal/` was built on 2026-09-21T22:40:45.999Z -->
</body>
</html>
acadia-mitts/index.html
+15 -15
View File
@@ -1886,20 +1886,6 @@ switch (currentThemeValue) {
<h2 data-ha-exclude="">related posts</h2>
<ol id="postlist">
<li class="post">
<a class="postlink" href="/knit-shrimp/">
<h2 data-ha-exclude="">knit shrimp </h2>
<ul class="postlist-tags">
<li>knit</li>
</ul>
<img src="/img/knit-shrimp.jpg" alt="Four knitted shrimp in various shades of pink. They are all somewhere around hand-sized, and have little yarn antennae and leggies." loading="lazy" decoding="async" width="1000" height="750">
</a>
</li>
<li class="post">
<a class="postlink" href="/brookes-socks/">
<h2 data-ha-exclude="">brooke&#39;s socks </h2>
@@ -1930,6 +1916,20 @@ switch (currentThemeValue) {
</a>
</li>
<li class="post">
<a class="postlink" href="/sideways-canvas-shirt/">
<h2 data-ha-exclude="">sideways canvas shirt </h2>
<ul class="postlist-tags">
<li>knit</li>
</ul>
<img src="/img/sideways-canvas.jpg" alt="someone&#39;s torso in a knitted short sleeve shirt. the front is teal, and the bit of back we can see is mustard yellow. looking closely, it&#39;s notable that the stitches are turned 90 degrees from a standard knit garment." loading="lazy" decoding="async" width="1000" height="1338">
</a>
</li>
</ol>
</section>
@@ -1982,6 +1982,6 @@ switch (currentThemeValue) {
</footer>
<!-- This page `/acadia-mitts/` was built on 2026-09-21T20:55:47.796Z -->
<!-- This page `/acadia-mitts/` was built on 2026-09-21T22:40:46.028Z -->
</body>
</html>
accessibility/index.html
+1 -1
View File
@@ -1456,6 +1456,6 @@ switch (currentThemeValue) {
</footer>
<!-- This page `/accessibility/` was built on 2026-09-21T20:55:47.800Z -->
<!-- This page `/accessibility/` was built on 2026-09-21T22:40:46.033Z -->
</body>
</html>
accessible-image-modals/index.html
+48 -41
View File
@@ -93,40 +93,43 @@
top: -1.25rem;
}
/* my baby my child my `tree` list style */
#toc ol,
#toc li {
margin-block: 0;
list-style: none;
/* `tree` style toc */
#toc nav > ol {
margin-left: 1rem;
}
#toc ol {
margin-left: 0;
margin: 0;
}
#toc li {
border-left: .095rem solid var(--color-pink);
margin-left: 1.5rem;
line-height: 1.15;
text-indent: 1.22rem hanging;
position: relative;
padding-inline-start: 1em;
list-style: none;
margin-block: 0;
margin-left: .35rem;
}
#toc li::before,
#toc li::after {
display: block;
position: absolute;
box-sizing: border-box;
inset-block: 0 auto;
inset-inline: 0 auto;
inline-size: .75em;
border-inline-start: .1rem solid var(--color-pink);
}
#toc li::before {
content: '├─' / "";
color: var(--color-pink);
position: relative;
left: -.34rem;
block-size: .5lh;
border-block-end: .1rem solid var(--color-pink);
content: "";
}
#toc li:last-child {
border-left-color: transparent;
}
#toc li:last-child::before {
/* Technically, we could use this content for all of them, but doing the full
bar for the non-last-childs keeps the border a *smidge* more consistent for
different levels of magnification */
content: '└─' / "";
#toc li:not(:last-child)::after {
block-size: 100%;
content: "";
}
/* underlines are unnecessary in this context */
@@ -2091,15 +2094,33 @@ switch (currentThemeValue) {
<ol id="postlist">
<li class="post">
<a class="postlink" href="/backend-accessibility/">
<h2 data-ha-exclude="">backend accessibility </h2>
<a class="postlink" href="/designing-a-bag/">
<h2 data-ha-exclude="">designing a bag </h2>
<ul class="postlist-tags">
<li>leather</li>
<li>software</li>
</ul>
<img src="/img/shoelace-bag.jpg" alt="a 3-image collage showcasing a leather crossbody bag. the leather body is brown and fairly simple. up the narrow sides, rope is laced through grommets in a style resembling a shoe lacing. the rope forms the handle and loops seamlessly through the other side of the bag, joining in one point in a figure-8 follow-through knot. At the bottom corners, there are small diagonal lines of stitching to give the bag a small lip around the base and ensure small objects don&#39;t slide out." loading="lazy" decoding="async" width="1000" height="1777">
</a>
</li>
<li class="post">
<a class="postlink" href="/core-css/">
<h2 data-ha-exclude="">core CSS </h2>
<ul class="postlist-tags">
<li>software</li>
<li>highlight</li>
</ul>
<img src="/img/camelCase-print.jpg" alt="A carved stamp next to its print. The print reads &#39;#camelCase&#39; in a slightly formal-looking italic font." loading="lazy" decoding="async" width="1000" height="750">
<img src="/img/core-css.png" alt="A website mockup in dark mode with light pink accents. Everything is filler text such as the title &#39;This is my cool website&#39;, headers reading things like &#39;This is an h1&#39;, nav items &#39;Nav item 1&#39;, etc. There is a paragraph block - the opening of the Bee Movie - and part of an image visible - a screencap of the music video for Never Gonna Give You Up by Rick Astley." loading="lazy" decoding="async" width="1000" height="447">
</a>
</li>
@@ -2118,20 +2139,6 @@ switch (currentThemeValue) {
</a>
</li>
<li class="post">
<a class="postlink" href="/visual-site-builders-and-accessibility/">
<h2 data-ha-exclude="">visual site builders and accessibility </h2>
<ul class="postlist-tags">
<li>software</li>
</ul>
<img src="/img/roses.jpg" alt="Image unrelated to post. Two peach-colored roses, the farther away one a bit out of focus." loading="lazy" decoding="async" width="1000" height="666">
</a>
</li>
</ol>
</section>
@@ -2184,6 +2191,6 @@ switch (currentThemeValue) {
</footer>
<!-- This page `/accessible-image-modals/` was built on 2026-09-21T20:55:47.817Z -->
<!-- This page `/accessible-image-modals/` was built on 2026-09-21T22:40:46.046Z -->
</body>
</html>
an-intro-to-git/index.html
+33 -30
View File
@@ -93,40 +93,43 @@
top: -1.25rem;
}
/* my baby my child my `tree` list style */
#toc ol,
#toc li {
margin-block: 0;
list-style: none;
/* `tree` style toc */
#toc nav > ol {
margin-left: 1rem;
}
#toc ol {
margin-left: 0;
margin: 0;
}
#toc li {
border-left: .095rem solid var(--color-pink);
margin-left: 1.5rem;
line-height: 1.15;
text-indent: 1.22rem hanging;
position: relative;
padding-inline-start: 1em;
list-style: none;
margin-block: 0;
margin-left: .35rem;
}
#toc li::before,
#toc li::after {
display: block;
position: absolute;
box-sizing: border-box;
inset-block: 0 auto;
inset-inline: 0 auto;
inline-size: .75em;
border-inline-start: .1rem solid var(--color-pink);
}
#toc li::before {
content: '├─' / "";
color: var(--color-pink);
position: relative;
left: -.34rem;
block-size: .5lh;
border-block-end: .1rem solid var(--color-pink);
content: "";
}
#toc li:last-child {
border-left-color: transparent;
}
#toc li:last-child::before {
/* Technically, we could use this content for all of them, but doing the full
bar for the non-last-childs keeps the border a *smidge* more consistent for
different levels of magnification */
content: '└─' / "";
#toc li:not(:last-child)::after {
block-size: 100%;
content: "";
}
/* underlines are unnecessary in this context */
@@ -2486,15 +2489,15 @@ codeberg https://codeberg.org/inherentlee/git-intro.git (push)</code></pre>
<ol id="postlist">
<li class="post">
<a class="postlink" href="/screen-reader-optimizations/">
<h2 data-ha-exclude="">screen reader optimizations </h2>
<a class="postlink" href="/redirections/">
<h2 data-ha-exclude="">redirections </h2>
<ul class="postlist-tags">
<li>software</li>
</ul>
<img src="/img/crow.jpg" alt="Image unrelated to post. A crow poses on driftwood against a whitish sky." loading="lazy" decoding="async" width="1000" height="666">
<img src="/img/angle-brackets-uwu.jpg" alt="Ascii art of an emoticon with pinched eyes and a small mouth made with two angle brackets." loading="lazy" decoding="async" width="1000" height="316">
</a>
</li>
@@ -2514,15 +2517,15 @@ codeberg https://codeberg.org/inherentlee/git-intro.git (push)</code></pre>
</li>
<li class="post">
<a class="postlink" href="/eleventy-lessons/">
<h2 data-ha-exclude="">eleventy lessons </h2>
<a class="postlink" href="/handedness-toggle/">
<h2 data-ha-exclude="">handedness toggle </h2>
<ul class="postlist-tags">
<li>software</li>
</ul>
<img src="/img/hellebore.jpg" alt="Image unrelated to post. Close up on a pale green hellebore flower." loading="lazy" decoding="async" width="1000" height="666">
<img src="/img/handedness-toggle-0.png" alt="A screenshot of the rescue trans rescue navbar centered on a button that shows a hand pointing left." loading="lazy" decoding="async" width="1000" height="257">
</a>
</li>
@@ -2579,6 +2582,6 @@ codeberg https://codeberg.org/inherentlee/git-intro.git (push)</code></pre>
</footer>
<!-- This page `/an-intro-to-git/` was built on 2026-09-21T20:55:47.817Z -->
<!-- This page `/an-intro-to-git/` was built on 2026-09-21T22:40:46.046Z -->
</body>
</html>
anarchy-autism/index.html
+20 -24
View File
@@ -1909,49 +1909,45 @@ switch (currentThemeValue) {
<ol id="postlist">
<li class="post">
<a class="postlink" href="/crow/">
<h2 data-ha-exclude="">crow </h2>
<a class="postlink" href="/loon/">
<h2 data-ha-exclude="">loon </h2>
<ul class="postlist-tags">
<li>print</li>
</ul>
<img src="/img/crow-print.jpg" alt="a block print in dark indigo ink on white paper depicting a perched crow looking over one shoulder. one side of the crow is lit with fine feather detail, and the other side is almost entirely in shadow." loading="lazy" decoding="async" width="1000" height="1333">
<img src="/img/loon-print.jpg" alt="A print of a loon rearing up with wings spread" loading="lazy" decoding="async" width="1000" height="1333">
</a>
</li>
<li class="post">
<a class="postlink" href="/coming-out/">
<h2 data-ha-exclude="">coming out </h2>
<a class="postlink" href="/squarsh/">
<h2 data-ha-exclude="">squarsh </h2>
<ul class="postlist-tags">
<li>print</li>
<li>card</li>
</ul>
<img src="/img/squarsh-prints.jpg" alt="Two identical prints of a delicata squash. The body of the squash is cornsilk (muted yellow), the stem and stripes in mint green, and the shadows in lilac." loading="lazy" decoding="async" width="1000" height="1000">
</a>
</li>
<li class="post">
<a class="postlink" href="/bottom-growth/">
<h2 data-ha-exclude="">bottom growth (mature)</h2>
<ul class="postlist-tags">
<li>print</li>
<li>gender</li>
</ul>
<img src="/img/coming-out-card-print.jpg" alt="A card and print in the same design - a chick and a broken eggshell, and a simple font reading &#39;congrats on coming out of your shell&#39;" loading="lazy" decoding="async" width="1000" height="750">
</a>
</li>
<li class="post">
<a class="postlink" href="/five-of-them/">
<h2 data-ha-exclude="">five of them </h2>
<ul class="postlist-tags">
<li>print</li>
<li>shirt</li>
</ul>
<img src="/img/five-of-them-print.jpg" alt="A block print of five mule deer grazing in a dark green field. The deer are partially negative space and partially brown ink detailing." loading="lazy" decoding="async" width="1000" height="594">
<img src="/img/bottom-growth-prints.jpg" alt="4 copies of the same print in various color schemes, laid out in a 2x2 grid. The print shows testosterone-driven bottom growth of a clitoris. The color schemes are, clockwise from top right, brown on turquoise, red on cornsilk (muted yellow), violet on magenta, and mint green on lilac." class="blur" loading="lazy" decoding="async" width="1000" height="1000">
</a>
</li>
@@ -2008,6 +2004,6 @@ switch (currentThemeValue) {
</footer>
<!-- This page `/anarchy-autism/` was built on 2026-09-21T20:55:47.790Z -->
<!-- This page `/anarchy-autism/` was built on 2026-09-21T22:40:46.023Z -->
</body>
</html>
art-shows-and-events/index.html
+1 -1
View File
@@ -1945,6 +1945,6 @@ switch (currentThemeValue) {
</footer>
<!-- This page `/art-shows-and-events/` was built on 2026-09-21T20:55:47.796Z -->
<!-- This page `/art-shows-and-events/` was built on 2026-09-21T22:40:46.028Z -->
</body>
</html>
artisans-cooperative-cards/index.html
+16 -18
View File
@@ -1894,55 +1894,53 @@ switch (currentThemeValue) {
<ol id="postlist">
<li class="post">
<a class="postlink" href="/nonbinary-flag/">
<h2 data-ha-exclude="">nonbinary flag </h2>
<a class="postlink" href="/loon/">
<h2 data-ha-exclude="">loon </h2>
<ul class="postlist-tags">
<li>print</li>
<li>card</li>
<li>gender</li>
</ul>
<img src="/img/nonbinary-flag-print.jpg" alt="A print of a nonbinary flag waving, with yellow, white (uninked), purple, and black stripes." loading="lazy" decoding="async" width="1000" height="750">
<img src="/img/loon-print.jpg" alt="A print of a loon rearing up with wings spread" loading="lazy" decoding="async" width="1000" height="1333">
</a>
</li>
<li class="post">
<a class="postlink" href="/swallowtail-on-snowdrops/">
<h2 data-ha-exclude="">swallowtail on snowdrops </h2>
<a class="postlink" href="/five-of-them/">
<h2 data-ha-exclude="">five of them </h2>
<ul class="postlist-tags">
<li>print</li>
<li>card</li>
<li>shirt</li>
</ul>
<img src="/img/swallowtail-on-snowdrops-print.jpg" alt="A block print of a tiger swallowtail butterfly dangling from Japanese snowdrops, a white drooping flower." loading="lazy" decoding="async" width="1000" height="1332">
<img src="/img/five-of-them-print.jpg" alt="A block print of five mule deer grazing in a dark green field. The deer are partially negative space and partially brown ink detailing." loading="lazy" decoding="async" width="1000" height="594">
</a>
</li>
<li class="post">
<a class="postlink" href="/kestrel-zine/">
<h2 data-ha-exclude="">kestrel zine </h2>
<a class="postlink" href="/trans-wrongs-skull/">
<h2 data-ha-exclude="">trans wrongs skull </h2>
<ul class="postlist-tags">
<li>print</li>
<li>zine</li>
<li>card</li>
<li>highlight</li>
<li>sticker</li>
<li>pin</li>
<li>gender</li>
</ul>
<img src="/img/kestrel-zine.jpg" alt="A 5 photo collage showing the front and back cover as well as 3 full spreads of a folded zine about Kestrel, my dog, who is a 65lb Malinois with a goofy smile and floppy ears. it is printed in two layers of color, blue and orange, and each image depicts Kestrel in various posts... alert and watchful, resting, looking mopey, wearing a sweatshirt." loading="lazy" decoding="async" width="1000" height="1000">
<img src="/img/trans-wrongs-print.jpg" alt="A smiling skull with devil horns and a little spiked tail, and a speech bubble reading &#39;trans wrongs!&#39;" loading="lazy" decoding="async" width="1000" height="750">
</a>
</li>
@@ -1999,6 +1997,6 @@ switch (currentThemeValue) {
</footer>
<!-- This page `/artisans-cooperative-cards/` was built on 2026-09-21T20:55:47.788Z -->
<!-- This page `/artisans-cooperative-cards/` was built on 2026-09-21T22:40:46.021Z -->
</body>
</html>
artisans-cooperative-shirts/index.html
+38 -32
View File
@@ -1895,36 +1895,8 @@ switch (currentThemeValue) {
<ol id="postlist">
<li class="post">
<a class="postlink" href="/brown-creeper/">
<h2 data-ha-exclude="">brown creeper </h2>
<ul class="postlist-tags">
<li>print</li>
</ul>
<img src="/img/brown-creeper-print.jpg" alt="2 copies of the same print side by side. In yellow, black, and purple ink, a brown creeper, a small bird, is depicted, well camouflaged against a tree trunk." loading="lazy" decoding="async" width="1000" height="1000">
</a>
</li>
<li class="post">
<a class="postlink" href="/shirts/">
<h2 data-ha-exclude="">shirts! </h2>
<ul class="postlist-tags">
<li>shirt</li>
</ul>
<img src="/img/shirts.jpg" alt="A row of shirts hanging in front of a window, with a variety of hand-printed designs." loading="lazy" decoding="async" width="1000" height="750">
</a>
</li>
<li class="post">
<a class="postlink" href="/iris/">
<h2 data-ha-exclude="">iris </h2>
<a class="postlink" href="/coming-out/">
<h2 data-ha-exclude="">coming out </h2>
<ul class="postlist-tags">
@@ -1932,8 +1904,42 @@ switch (currentThemeValue) {
<li>card</li>
<li>gender</li>
</ul>
<img src="/img/iris-prints.jpg" alt="3 copies of the same print of iris flowers and a bud, done in slightly varied color schemes." loading="lazy" decoding="async" width="1000" height="562">
<img src="/img/coming-out-card-print.jpg" alt="A card and print in the same design - a chick and a broken eggshell, and a simple font reading &#39;congrats on coming out of your shell&#39;" loading="lazy" decoding="async" width="1000" height="750">
</a>
</li>
<li class="post">
<a class="postlink" href="/five-of-them/">
<h2 data-ha-exclude="">five of them </h2>
<ul class="postlist-tags">
<li>print</li>
<li>shirt</li>
</ul>
<img src="/img/five-of-them-print.jpg" alt="A block print of five mule deer grazing in a dark green field. The deer are partially negative space and partially brown ink detailing." loading="lazy" decoding="async" width="1000" height="594">
</a>
</li>
<li class="post">
<a class="postlink" href="/greeting-quorbs/">
<h2 data-ha-exclude="">greeting quorbs </h2>
<ul class="postlist-tags">
<li>card</li>
<li>print</li>
</ul>
<img src="/img/greeting-quorbs.jpg" alt="A pile of hand-printed A2 size greeting cards. Only the front is visible, showing a particularly round quail." loading="lazy" decoding="async" width="1000" height="1000">
</a>
</li>
@@ -1990,6 +1996,6 @@ switch (currentThemeValue) {
</footer>
<!-- This page `/artisans-cooperative-shirts/` was built on 2026-09-21T20:55:47.789Z -->
<!-- This page `/artisans-cooperative-shirts/` was built on 2026-09-21T22:40:46.023Z -->
</body>
</html>
artists-conk/index.html
+1 -1
View File
@@ -1921,6 +1921,6 @@ switch (currentThemeValue) {
</footer>
<!-- This page `/artists-conk/` was built on 2026-09-21T20:55:47.791Z -->
<!-- This page `/artists-conk/` was built on 2026-09-21T22:40:46.025Z -->
</body>
</html>
azure-locations-and-file-crawling/index.html
+58 -59
View File
@@ -93,40 +93,43 @@
top: -1.25rem;
}
/* my baby my child my `tree` list style */
#toc ol,
#toc li {
margin-block: 0;
list-style: none;
/* `tree` style toc */
#toc nav > ol {
margin-left: 1rem;
}
#toc ol {
margin-left: 0;
margin: 0;
}
#toc li {
border-left: .095rem solid var(--color-pink);
margin-left: 1.5rem;
line-height: 1.15;
text-indent: 1.22rem hanging;
position: relative;
padding-inline-start: 1em;
list-style: none;
margin-block: 0;
margin-left: .35rem;
}
#toc li::before,
#toc li::after {
display: block;
position: absolute;
box-sizing: border-box;
inset-block: 0 auto;
inset-inline: 0 auto;
inline-size: .75em;
border-inline-start: .1rem solid var(--color-pink);
}
#toc li::before {
content: '├─' / "";
color: var(--color-pink);
position: relative;
left: -.34rem;
block-size: .5lh;
border-block-end: .1rem solid var(--color-pink);
content: "";
}
#toc li:last-child {
border-left-color: transparent;
}
#toc li:last-child::before {
/* Technically, we could use this content for all of them, but doing the full
bar for the non-last-childs keeps the border a *smidge* more consistent for
different levels of magnification */
content: '└─' / "";
#toc li:not(:last-child)::after {
block-size: 100%;
content: "";
}
/* underlines are unnecessary in this context */
@@ -2296,47 +2299,43 @@ switch (currentThemeValue) {
<ol id="postlist">
<li class="post">
<a class="postlink" href="/butch-hands-pattern/">
<h2 data-ha-exclude="">butch hands pattern </h2>
<ul class="postlist-tags">
<li>knit</li>
<li>highlight</li>
</ul>
<img src="/img/butch-hands.jpg" alt="Hands wearing a pair of pink and grey gloves with convertable mitten tops." loading="lazy" decoding="async" width="1000" height="750">
</a>
</li>
<li class="post">
<a class="postlink" href="/rambouillet-handspun/">
<h2 data-ha-exclude="">rambouillet handspun </h2>
<ul class="postlist-tags">
<li>yarn</li>
<li>highlight</li>
</ul>
<img src="/img/rambouillet-handspun.jpg" alt="1 large and 2 small skeins of handspun yarn in a sport or DK weight that has been dyed in light and dark teal, green, and rusty green-gold." loading="lazy" decoding="async" width="1000" height="666">
</a>
</li>
<li class="post">
<a class="postlink" href="/backend-accessibility/">
<h2 data-ha-exclude="">backend accessibility </h2>
<a class="postlink" href="/handedness-toggle/">
<h2 data-ha-exclude="">handedness toggle </h2>
<ul class="postlist-tags">
<li>software</li>
</ul>
<img src="/img/camelCase-print.jpg" alt="A carved stamp next to its print. The print reads &#39;#camelCase&#39; in a slightly formal-looking italic font." loading="lazy" decoding="async" width="1000" height="750">
<img src="/img/handedness-toggle-0.png" alt="A screenshot of the rescue trans rescue navbar centered on a button that shows a hand pointing left." loading="lazy" decoding="async" width="1000" height="257">
</a>
</li>
<li class="post">
<a class="postlink" href="/framer-accessibility/">
<h2 data-ha-exclude="">framer accessibility </h2>
<ul class="postlist-tags">
<li>software</li>
</ul>
<img src="/img/feather.jpg" alt="Image unrelated to post. A very frail and wispy feather with variegated white and brown markings on top of pine-needle-covered ground." loading="lazy" decoding="async" width="1000" height="666">
</a>
</li>
<li class="post">
<a class="postlink" href="/moving-images/">
<h2 data-ha-exclude="">moving images </h2>
<ul class="postlist-tags">
<li>software</li>
</ul>
<img src="/img/cormorant.jpg" alt="Image unrelated to post. A cormorant, a type of black waterfowl, poses with wings spread on a buoy in Puget Sound. Off to the left, another bird floats." loading="lazy" decoding="async" width="1000" height="666">
</a>
</li>
@@ -2393,6 +2392,6 @@ switch (currentThemeValue) {
</footer>
<!-- This page `/azure-locations-and-file-crawling/` was built on 2026-09-21T20:55:47.816Z -->
<!-- This page `/azure-locations-and-file-crawling/` was built on 2026-09-21T22:40:46.045Z -->
</body>
</html>
backend-accessibility/index.html
+44 -47
View File
@@ -93,40 +93,43 @@
top: -1.25rem;
}
/* my baby my child my `tree` list style */
#toc ol,
#toc li {
margin-block: 0;
list-style: none;
/* `tree` style toc */
#toc nav > ol {
margin-left: 1rem;
}
#toc ol {
margin-left: 0;
margin: 0;
}
#toc li {
border-left: .095rem solid var(--color-pink);
margin-left: 1.5rem;
line-height: 1.15;
text-indent: 1.22rem hanging;
position: relative;
padding-inline-start: 1em;
list-style: none;
margin-block: 0;
margin-left: .35rem;
}
#toc li::before,
#toc li::after {
display: block;
position: absolute;
box-sizing: border-box;
inset-block: 0 auto;
inset-inline: 0 auto;
inline-size: .75em;
border-inline-start: .1rem solid var(--color-pink);
}
#toc li::before {
content: '├─' / "";
color: var(--color-pink);
position: relative;
left: -.34rem;
block-size: .5lh;
border-block-end: .1rem solid var(--color-pink);
content: "";
}
#toc li:last-child {
border-left-color: transparent;
}
#toc li:last-child::before {
/* Technically, we could use this content for all of them, but doing the full
bar for the non-last-childs keeps the border a *smidge* more consistent for
different levels of magnification */
content: '└─' / "";
#toc li:not(:last-child)::after {
block-size: 100%;
content: "";
}
/* underlines are unnecessary in this context */
@@ -2093,6 +2096,20 @@ switch (currentThemeValue) {
<h2 data-ha-exclude="">related posts</h2>
<ol id="postlist">
<li class="post">
<a class="postlink" href="/handedness-toggle/">
<h2 data-ha-exclude="">handedness toggle </h2>
<ul class="postlist-tags">
<li>software</li>
</ul>
<img src="/img/handedness-toggle-0.png" alt="A screenshot of the rescue trans rescue navbar centered on a button that shows a hand pointing left." loading="lazy" decoding="async" width="1000" height="257">
</a>
</li>
<li class="post">
<a class="postlink" href="/comparing-text-editors/">
<h2 data-ha-exclude="">comparing text editors </h2>
@@ -2108,35 +2125,15 @@ switch (currentThemeValue) {
</li>
<li class="post">
<a class="postlink" href="/gender-in-data-models/">
<h2 data-ha-exclude="">gender in data models </h2>
<ul class="postlist-tags">
<li>gender</li>
<li>software</li>
<li>highlight</li>
</ul>
<img src="/img/peony.jpg" alt="Image unrelated to post. A light pink peony in full bloom, close up." loading="lazy" decoding="async" width="1000" height="666">
</a>
</li>
<li class="post">
<a class="postlink" href="/azure-locations-and-file-crawling/">
<h2 data-ha-exclude="">azure locations and file crawling </h2>
<a class="postlink" href="/redirections/">
<h2 data-ha-exclude="">redirections </h2>
<ul class="postlist-tags">
<li>software</li>
<li>highlight</li>
</ul>
<img src="/img/azure-locations.jpg" alt="A Linux terminal. There is a fun rainbow flag in ascii art at the top, and then the user has called a command asking Azure for a list of locations applicable to a specific resource type. The output is lengthy." loading="lazy" decoding="async" width="1000" height="827">
<img src="/img/angle-brackets-uwu.jpg" alt="Ascii art of an emoticon with pinched eyes and a small mouth made with two angle brackets." loading="lazy" decoding="async" width="1000" height="316">
</a>
</li>
@@ -2193,6 +2190,6 @@ switch (currentThemeValue) {
</footer>
<!-- This page `/backend-accessibility/` was built on 2026-09-21T20:55:47.816Z -->
<!-- This page `/backend-accessibility/` was built on 2026-09-21T22:40:46.045Z -->
</body>
</html>
bag-strap/index.html
+10 -10
View File
@@ -1887,43 +1887,43 @@ switch (currentThemeValue) {
<ol id="postlist">
<li class="post">
<a class="postlink" href="/zipper-bifold/">
<h2 data-ha-exclude="">zipper bifold </h2>
<a class="postlink" href="/leather-lighter-case/">
<h2 data-ha-exclude="">leather lighter case </h2>
<ul class="postlist-tags">
<li>leather</li>
</ul>
<img src="/img/zipper-bifold.jpg" alt="A collage showing a hand-stitched leather bifold with a zippered coin pocket on one exterior side." loading="lazy" decoding="async" width="1000" height="1777">
<img src="/img/leather-lighter-case.jpg" alt="A bic lighter wrapped in leather and hand-stitched up one side." loading="lazy" decoding="async" width="1000" height="750">
</a>
</li>
<li class="post">
<a class="postlink" href="/vertical-bifold/">
<h2 data-ha-exclude="">vertical bifold </h2>
<a class="postlink" href="/double-bill-pocket-bifold/">
<h2 data-ha-exclude="">double bill pocket bifold </h2>
<ul class="postlist-tags">
<li>leather</li>
</ul>
<img src="/img/vertical-bifold.jpg" alt="A collage showing a hand-stitched leather vertical bifold wallet with 6 card pockets, 2 hidden pockets, and 1 bill pocket." loading="lazy" decoding="async" width="1000" height="1777">
<img src="/img/double-bill-pocket-bifold.jpg" alt="A 3-picture collage showing a hand-stitched leather wallet in plum and light natural leather, with a double bill pocket." loading="lazy" decoding="async" width="1000" height="1777">
</a>
</li>
<li class="post">
<a class="postlink" href="/rachels-bracelets/">
<h2 data-ha-exclude="">rachel&#39;s bracelets </h2>
<a class="postlink" href="/x-acto-knife-sheath/">
<h2 data-ha-exclude="">x-acto knife sheath </h2>
<ul class="postlist-tags">
<li>leather</li>
</ul>
<img src="/img/rachel-bracelets.jpg" alt="Two pink leather bracelets with stainless steel hardware and aqua stitching." loading="lazy" decoding="async" width="1000" height="750">
<img src="/img/knife-sheaths.jpg" alt="Several blades with leather sheaths, and a few extra sheaths. There&#39;s a #2 blade with an orange sheath with yellow stitching, a #11 blade with a blue sheath with light grey stitching, and a skiving knife with a plum sheath and pink stitching." loading="lazy" decoding="async" width="1000" height="750">
</a>
</li>
@@ -1980,6 +1980,6 @@ switch (currentThemeValue) {
</footer>
<!-- This page `/bag-strap/` was built on 2026-09-21T20:55:47.791Z -->
<!-- This page `/bag-strap/` was built on 2026-09-21T22:40:46.025Z -->
</body>
</html>
baseball-journal/index.html
+12 -10
View File
@@ -1897,43 +1897,45 @@ switch (currentThemeValue) {
<ol id="postlist">
<li class="post">
<a class="postlink" href="/leather-strap-journal/">
<h2 data-ha-exclude="">leather strap journal </h2>
<a class="postlink" href="/leather-long-stitch-journals/">
<h2 data-ha-exclude="">leather long-stitch journals </h2>
<ul class="postlist-tags">
<li>leather</li>
<li>book</li>
</ul>
<img src="/img/leather-strap-journal.jpg" alt="A 3-part collage showing a blue journal with leather straps woven into the covers." loading="lazy" decoding="async" width="1000" height="1000">
<img src="/img/long-stitch-journals.jpg" alt="A stack of hand-bound journals showing long stitches aligned with the spines. They are leather bound and have tie closures." loading="lazy" decoding="async" width="1000" height="1333">
</a>
</li>
<li class="post">
<a class="postlink" href="/stampede-journal/">
<h2 data-ha-exclude="">stampede journal </h2>
<a class="postlink" href="/green-memo-pad/">
<h2 data-ha-exclude="">green memo pad </h2>
<ul class="postlist-tags">
<li>book</li>
</ul>
<img src="/img/stampede-journal.jpg" alt="A 4-part collage of a hardcover book, showing a coloring page with &#39;stampede!&#39; written across it." loading="lazy" decoding="async" width="1000" height="1777">
<img src="/img/green-memo-pad.jpg" alt="A three panel collage showcasing a small green memo pad." loading="lazy" decoding="async" width="1000" height="1776">
</a>
</li>
<li class="post">
<a class="postlink" href="/blue-and-brown-leather-journal/">
<h2 data-ha-exclude="">blue and brown leather journal </h2>
<a class="postlink" href="/square-watercolor-pad/">
<h2 data-ha-exclude="">square watercolor pad </h2>
<ul class="postlist-tags">
<li>book</li>
</ul>
<img src="/img/blue-brown-leather-journal.jpg" alt="A three panel collage showcasing a blue and brown leather-covered journal." loading="lazy" decoding="async" width="1000" height="1776">
<img src="/img/square-watercolor-pad.jpg" alt="A two panel collage showing a square book with a tan cover and blue and gold endpapers." loading="lazy" decoding="async" width="1000" height="1331">
</a>
</li>
@@ -1990,6 +1992,6 @@ switch (currentThemeValue) {
</footer>
<!-- This page `/baseball-journal/` was built on 2026-09-21T20:55:47.786Z -->
<!-- This page `/baseball-journal/` was built on 2026-09-21T22:40:46.020Z -->
</body>
</html>
become-unbutterable/index.html
+16 -16
View File
@@ -1894,8 +1894,8 @@ switch (currentThemeValue) {
<ol id="postlist">
<li class="post">
<a class="postlink" href="/heron/">
<h2 data-ha-exclude="">heron </h2>
<a class="postlink" href="/spotted-towhee/">
<h2 data-ha-exclude="">spotted towhee </h2>
<ul class="postlist-tags">
@@ -1903,46 +1903,46 @@ switch (currentThemeValue) {
<li>card</li>
<li>shirt</li>
</ul>
<img src="/img/heron-print.jpg" alt="A print in black ink of a great blue heron, leaning downwards so that eir beak is level with eir feet." loading="lazy" decoding="async" width="1000" height="1333">
<img src="/img/spotted-towhee-print.jpg" alt="A block print of a spotted towhee mid-leap." loading="lazy" decoding="async" width="1000" height="750">
</a>
</li>
<li class="post">
<a class="postlink" href="/anarchy-autism/">
<h2 data-ha-exclude="">anarchy autism </h2>
<a class="postlink" href="/trans-wrongs-skull/">
<h2 data-ha-exclude="">trans wrongs skull </h2>
<ul class="postlist-tags">
<li>print</li>
<li>card</li>
<li>sticker</li>
<li>shirt</li>
<li>pin</li>
<li>gender</li>
</ul>
<img src="/img/anarchy-autism-rainbow-print.jpg" alt="A print in rainbow ink that says autism with the anarchy A." loading="lazy" decoding="async" width="1000" height="750">
<img src="/img/trans-wrongs-print.jpg" alt="A smiling skull with devil horns and a little spiked tail, and a speech bubble reading &#39;trans wrongs!&#39;" loading="lazy" decoding="async" width="1000" height="750">
</a>
</li>
<li class="post">
<a class="postlink" href="/not-a-drill/">
<h2 data-ha-exclude="">not a drill </h2>
<a class="postlink" href="/greeting-quorbs/">
<h2 data-ha-exclude="">greeting quorbs </h2>
<ul class="postlist-tags">
<li>card</li>
<li>print</li>
<li>shirt</li>
</ul>
<img src="/img/not-a-drill-print.jpg" alt="A print in dark teal ink depicting a power drill with text in cursive below that reads &#39;ceci n&#39;est pas un exercice&#39; or &#39;this is not a drill&#39;" loading="lazy" decoding="async" width="1000" height="750">
<img src="/img/greeting-quorbs.jpg" alt="A pile of hand-printed A2 size greeting cards. Only the front is visible, showing a particularly round quail." loading="lazy" decoding="async" width="1000" height="1000">
</a>
</li>
@@ -1999,6 +1999,6 @@ switch (currentThemeValue) {
</footer>
<!-- This page `/become-unbutterable/` was built on 2026-09-21T20:55:47.771Z -->
<!-- This page `/become-unbutterable/` was built on 2026-09-21T22:40:45.998Z -->
</body>
</html>
bfl-silk-handspun/index.html
+7 -9
View File
@@ -1887,17 +1887,15 @@ switch (currentThemeValue) {
<ol id="postlist">
<li class="post">
<a class="postlink" href="/rambouillet-handspun/">
<h2 data-ha-exclude="">rambouillet handspun </h2>
<a class="postlink" href="/orion-handspun/">
<h2 data-ha-exclude="">orion handspun </h2>
<ul class="postlist-tags">
<li>yarn</li>
<li>highlight</li>
</ul>
<img src="/img/rambouillet-handspun.jpg" alt="1 large and 2 small skeins of handspun yarn in a sport or DK weight that has been dyed in light and dark teal, green, and rusty green-gold." loading="lazy" decoding="async" width="1000" height="666">
<img src="/img/orion-handspun.jpg" alt="3 skeins of handspun yarn, 1 large and 2 small. One of the small skeins is a little more inconsistent weight than the other two - this one was spun on drop spindle about 2 years ago. The other two are about a sport or maybe a DK weight. All three are a gold colorway with tiny hints of orange and a pale light green." loading="lazy" decoding="async" width="1000" height="666">
</a>
</li>
@@ -1917,15 +1915,15 @@ switch (currentThemeValue) {
</li>
<li class="post">
<a class="postlink" href="/petrichor-handspun/">
<h2 data-ha-exclude="">petrichor handspun </h2>
<a class="postlink" href="/light-grey-jacobs-handspun/">
<h2 data-ha-exclude="">light grey jacobs handspun </h2>
<ul class="postlist-tags">
<li>yarn</li>
</ul>
<img src="/img/petrichor-handspun.jpg" alt="3 skeins of handspun yarn, 2 large and 1 small. the large ones are a rich earth-tone blend of reds, pinks, browns, and hints of green and gold. the smaller skein is similar but with a decidedly greener hue" loading="lazy" decoding="async" width="1000" height="750">
<img src="/img/light-grey-jacobs.jpg" alt="a skein of light grey handspun yarn" loading="lazy" decoding="async" width="1000" height="666">
</a>
</li>
@@ -1982,6 +1980,6 @@ switch (currentThemeValue) {
</footer>
<!-- This page `/bfl-silk-handspun/` was built on 2026-09-21T20:55:47.798Z -->
<!-- This page `/bfl-silk-handspun/` was built on 2026-09-21T22:40:46.030Z -->
</body>
</html>
big-pidge/index.html
+22 -22
View File
@@ -1904,26 +1904,38 @@ switch (currentThemeValue) {
<ol id="postlist">
<li class="post">
<a class="postlink" href="/congrats-on-the-gay/">
<h2 data-ha-exclude="">congrats on the gay </h2>
<a class="postlink" href="/rope-one/">
<h2 data-ha-exclude="">rope (one) (mature)</h2>
<ul class="postlist-tags">
<li>print</li>
<li>card</li>
<li>gender</li>
</ul>
<img src="/img/congrats-on-the-gay.jpg" alt="A greeting card reading, in black. &#39;Congrats on the,&#39; and then, in rainbow, &#39;Gay!&#39;" loading="lazy" decoding="async" width="1000" height="750">
<img src="/img/rope-print-1.jpg" alt="A print of a nude trans woman in an asymmetrical rope harness." class="blur" loading="lazy" decoding="async" width="1000" height="1242">
</a>
</li>
<li class="post">
<a class="postlink" href="/seedling/">
<h2 data-ha-exclude="">seedling </h2>
<a class="postlink" href="/shirts/">
<h2 data-ha-exclude="">shirts! </h2>
<ul class="postlist-tags">
<li>shirt</li>
</ul>
<img src="/img/shirts.jpg" alt="A row of shirts hanging in front of a window, with a variety of hand-printed designs." loading="lazy" decoding="async" width="1000" height="750">
</a>
</li>
<li class="post">
<a class="postlink" href="/hummingbird-become-ungovernable/">
<h2 data-ha-exclude="">hummingbird become ungovernable </h2>
<ul class="postlist-tags">
@@ -1931,22 +1943,10 @@ switch (currentThemeValue) {
<li>card</li>
</ul>
<img src="/img/seedling-print.jpg" alt="A print of a 3-stage design of a green seedling barely open, starting to straighten up, and growing strong, with little piles of dirt beneath each one." loading="lazy" decoding="async" width="1000" height="1333">
</a>
</li>
<li class="post">
<a class="postlink" href="/fix-your-hearts/">
<h2 data-ha-exclude="">fix your hearts </h2>
<ul class="postlist-tags">
<li>print</li>
<li>shirt</li>
</ul>
<img src="/img/fix-your-hearts-print.jpg" alt="2 copies of the same print, one in black ink and one in dark teal. The print is text that reads &#39;fix your hearts or die&#39;, with the text shaped into a somewhat long and narrow heart." loading="lazy" decoding="async" width="1000" height="750">
<img src="/img/hummingbird-ungovernable-print.jpg" alt="A block print in black and orange ink of a rufous hummingbird, tail flared, hovering in midair. Clutched in eir tiny claws is a banner that waves in the wind and reads &#39;become ungovernable&#39;" loading="lazy" decoding="async" width="1000" height="750">
</a>
</li>
@@ -2003,6 +2003,6 @@ switch (currentThemeValue) {
</footer>
<!-- This page `/big-pidge/` was built on 2026-09-21T20:55:47.785Z -->
<!-- This page `/big-pidge/` was built on 2026-09-21T22:40:46.019Z -->
</body>
</html>
black-and-red-journal/index.html
+22 -22
View File
@@ -1891,8 +1891,22 @@ switch (currentThemeValue) {
<ol id="postlist">
<li class="post">
<a class="postlink" href="/little-critter-pouch/">
<h2 data-ha-exclude="">little critter pouch </h2>
<a class="postlink" href="/square-watercolor-pad/">
<h2 data-ha-exclude="">square watercolor pad </h2>
<ul class="postlist-tags">
<li>book</li>
</ul>
<img src="/img/square-watercolor-pad.jpg" alt="A two panel collage showing a square book with a tan cover and blue and gold endpapers." loading="lazy" decoding="async" width="1000" height="1331">
</a>
</li>
<li class="post">
<a class="postlink" href="/dragon-mask/">
<h2 data-ha-exclude="">dragon mask </h2>
<ul class="postlist-tags">
@@ -1901,35 +1915,21 @@ switch (currentThemeValue) {
<li>highlight</li>
</ul>
<img src="/img/little-critter-pouch.jpg" alt="A leather pouch shaped a bit like a d10 but with eight sides. It has a rainbow zippered opening and a wristlet strap." loading="lazy" decoding="async" width="1000" height="750">
<img src="/img/dragon-mask.jpg" alt="lee (a white person with glasses and a side shave) holds up a leather dragon mask in black and dark green. ze sticks hir tongue out at it." loading="lazy" decoding="async" width="1000" height="746">
</a>
</li>
<li class="post">
<a class="postlink" href="/lined-notebook/">
<h2 data-ha-exclude="">lined notebook </h2>
<a class="postlink" href="/leather-lighter-case/">
<h2 data-ha-exclude="">leather lighter case </h2>
<ul class="postlist-tags">
<li>book</li>
<li>leather</li>
</ul>
<img src="/img/lined-notebook.jpg" alt="A three panel collage showing a the endpapers, cover, and pages of a small hardbound notebook." loading="lazy" decoding="async" width="1000" height="1776">
</a>
</li>
<li class="post">
<a class="postlink" href="/blue-and-brown-leather-journal/">
<h2 data-ha-exclude="">blue and brown leather journal </h2>
<ul class="postlist-tags">
<li>book</li>
</ul>
<img src="/img/blue-brown-leather-journal.jpg" alt="A three panel collage showcasing a blue and brown leather-covered journal." loading="lazy" decoding="async" width="1000" height="1776">
<img src="/img/leather-lighter-case.jpg" alt="A bic lighter wrapped in leather and hand-stitched up one side." loading="lazy" decoding="async" width="1000" height="750">
</a>
</li>
@@ -1986,6 +1986,6 @@ switch (currentThemeValue) {
</footer>
<!-- This page `/black-and-red-journal/` was built on 2026-09-21T20:55:47.798Z -->
<!-- This page `/black-and-red-journal/` was built on 2026-09-21T22:40:46.032Z -->
</body>
</html>
block-printing-transfer-method/index.html
+13 -17
View File
@@ -1927,53 +1927,49 @@ switch (currentThemeValue) {
<ol id="postlist">
<li class="post">
<a class="postlink" href="/not-a-drill/">
<h2 data-ha-exclude="">not a drill </h2>
<a class="postlink" href="/kestrel-zine/">
<h2 data-ha-exclude="">kestrel zine </h2>
<ul class="postlist-tags">
<li>print</li>
<li>shirt</li>
<li>zine</li>
<li>highlight</li>
</ul>
<img src="/img/not-a-drill-print.jpg" alt="A print in dark teal ink depicting a power drill with text in cursive below that reads &#39;ceci n&#39;est pas un exercice&#39; or &#39;this is not a drill&#39;" loading="lazy" decoding="async" width="1000" height="750">
<img src="/img/kestrel-zine.jpg" alt="A 5 photo collage showing the front and back cover as well as 3 full spreads of a folded zine about Kestrel, my dog, who is a 65lb Malinois with a goofy smile and floppy ears. it is printed in two layers of color, blue and orange, and each image depicts Kestrel in various posts... alert and watchful, resting, looking mopey, wearing a sweatshirt." loading="lazy" decoding="async" width="1000" height="1000">
</a>
</li>
<li class="post">
<a class="postlink" href="/trans-the-world/">
<h2 data-ha-exclude="">trans the world </h2>
<a class="postlink" href="/bottom-growth/">
<h2 data-ha-exclude="">bottom growth (mature)</h2>
<ul class="postlist-tags">
<li>print</li>
<li>shirt</li>
<li>gender</li>
</ul>
<img src="/img/trans-the-world-print.jpg" alt="A print that reads &#39;trans the world&#39; surrounding an image of a globe and a trans symbol. It&#39;s in a ping-to-blue gradient." loading="lazy" decoding="async" width="1000" height="750">
<img src="/img/bottom-growth-prints.jpg" alt="4 copies of the same print in various color schemes, laid out in a 2x2 grid. The print shows testosterone-driven bottom growth of a clitoris. The color schemes are, clockwise from top right, brown on turquoise, red on cornsilk (muted yellow), violet on magenta, and mint green on lilac." class="blur" loading="lazy" decoding="async" width="1000" height="1000">
</a>
</li>
<li class="post">
<a class="postlink" href="/happy-bihrtday/">
<h2 data-ha-exclude="">happy biHRTday </h2>
<a class="postlink" href="/loon/">
<h2 data-ha-exclude="">loon </h2>
<ul class="postlist-tags">
<li>print</li>
<li>card</li>
<li>gender</li>
</ul>
<img src="/img/happy-bihrtday-card-print.jpg" alt="A card and print in the same design - a bouncy, cheery font reading &#39;happy biHRTday&#39;" loading="lazy" decoding="async" width="1000" height="750">
<img src="/img/loon-print.jpg" alt="A print of a loon rearing up with wings spread" loading="lazy" decoding="async" width="1000" height="1333">
</a>
</li>
@@ -2030,6 +2026,6 @@ switch (currentThemeValue) {
</footer>
<!-- This page `/block-printing-transfer-method/` was built on 2026-09-21T20:55:47.785Z -->
<!-- This page `/block-printing-transfer-method/` was built on 2026-09-21T22:40:46.019Z -->
</body>
</html>
blue-and-brown-leather-journal/index.html
+19 -19
View File
@@ -1902,6 +1902,20 @@ switch (currentThemeValue) {
<h2 data-ha-exclude="">related posts</h2>
<ol id="postlist">
<li class="post">
<a class="postlink" href="/tiny-books/">
<h2 data-ha-exclude="">tiny books </h2>
<ul class="postlist-tags">
<li>book</li>
</ul>
<img src="/img/tiny-book.jpg" alt="A three panel collage showing a book held in the palm of a hand." loading="lazy" decoding="async" width="1000" height="1000">
</a>
</li>
<li class="post">
<a class="postlink" href="/stampede-journal/">
<h2 data-ha-exclude="">stampede journal </h2>
@@ -1917,31 +1931,17 @@ switch (currentThemeValue) {
</li>
<li class="post">
<a class="postlink" href="/black-and-red-journal/">
<h2 data-ha-exclude="">black and red journal </h2>
<a class="postlink" href="/brookes-notebook/">
<h2 data-ha-exclude="">brooke&#39;s notebook </h2>
<ul class="postlist-tags">
<li>book</li>
<li>leather</li>
<li>highlight</li>
</ul>
<img src="/img/black-red-journal.jpg" alt="3 image collage showing a leather-bound journal. The cover is black, with long red vertical stitches along the spine and a red leather strap for a closure. On the back in one lower corner is stamped LEE CAT ART" loading="lazy" decoding="async" width="1000" height="1000">
</a>
</li>
<li class="post">
<a class="postlink" href="/striped-journal/">
<h2 data-ha-exclude="">striped journal </h2>
<ul class="postlist-tags">
<li>book</li>
</ul>
<img src="/img/striped-journal.jpg" alt="A three panel collage showcasing a journal with a striped cover." loading="lazy" decoding="async" width="1000" height="1776">
<img src="/img/brooke-notebook.jpg" alt="A six panel collage showing the covers, endpapers, and some of the pages of a notebook." loading="lazy" decoding="async" width="1000" height="1500">
</a>
</li>
@@ -1998,6 +1998,6 @@ switch (currentThemeValue) {
</footer>
<!-- This page `/blue-and-brown-leather-journal/` was built on 2026-09-21T20:55:47.771Z -->
<!-- This page `/blue-and-brown-leather-journal/` was built on 2026-09-21T22:40:45.999Z -->
</body>
</html>
booby-congrats-on-the-top-surgery/index.html
+17 -17
View File
@@ -1897,53 +1897,53 @@ switch (currentThemeValue) {
<ol id="postlist">
<li class="post">
<a class="postlink" href="/on-pronouns/">
<h2 data-ha-exclude="">on pronouns </h2>
<a class="postlink" href="/fishhook-pride-keychains/">
<h2 data-ha-exclude="">fishhook pride keychains </h2>
<ul class="postlist-tags">
<li>leather</li>
<li>gender</li>
</ul>
<img src="/img/starling.jpg" alt="Image unrelated to post. A starling, a beautifully iridescent black bird, stands on a hanging suet feeder." loading="lazy" decoding="async" width="1000" height="666">
<img src="/img/fishhook-keychain-nonbinary.jpg" alt="a keychain with an iridescent fishhook style attachment linked via leather to an iridescent keyring. the leather is stitched with nonbinary flag colors." loading="lazy" decoding="async" width="1000" height="750">
</a>
</li>
<li class="post">
<a class="postlink" href="/boypussy/">
<h2 data-ha-exclude="">boypussy (mature)</h2>
<a class="postlink" href="/hummingbird-become-ungovernable/">
<h2 data-ha-exclude="">hummingbird become ungovernable </h2>
<ul class="postlist-tags">
<li>print</li>
<li>sticker</li>
<li>card</li>
<li>shirt</li>
<li>pin</li>
<li>gender</li>
</ul>
<img src="/img/boypussy-shirt.jpg" alt="A butch holding a chainsaw and wearing a tank top that reads boypussy in pink Barbie font." class="blur" loading="lazy" decoding="async" width="1000" height="1250">
<img src="/img/hummingbird-ungovernable-print.jpg" alt="A block print in black and orange ink of a rufous hummingbird, tail flared, hovering in midair. Clutched in eir tiny claws is a banner that waves in the wind and reads &#39;become ungovernable&#39;" loading="lazy" decoding="async" width="1000" height="750">
</a>
</li>
<li class="post">
<a class="postlink" href="/artisans-cooperative-shirts/">
<h2 data-ha-exclude="">artisans cooperative shirts </h2>
<a class="postlink" href="/foxgloves/">
<h2 data-ha-exclude="">foxgloves </h2>
<ul class="postlist-tags">
<li>shirt</li>
<li>print</li>
<li>card</li>
<li>shirt</li>
</ul>
<img src="/img/artisans-coop-shirt.jpg" alt="A black tank top laid on a desk. In white ink it reads &#39;Artisans Cooperative&#39; with a print of some chickens and a quail." loading="lazy" decoding="async" width="1000" height="1333">
<img src="/img/foxgloves-print.jpg" alt="A print of a cluster of foxgloves. The background is inked in green, with negative space and pink details making up the foxgloves." loading="lazy" decoding="async" width="1000" height="750">
</a>
</li>
@@ -2000,6 +2000,6 @@ switch (currentThemeValue) {
</footer>
<!-- This page `/booby-congrats-on-the-top-surgery/` was built on 2026-09-21T20:55:47.794Z -->
<!-- This page `/booby-congrats-on-the-top-surgery/` was built on 2026-09-21T22:40:46.003Z -->
</body>
</html>
bottom-growth/index.html
+16 -14
View File
@@ -1892,49 +1892,51 @@ switch (currentThemeValue) {
<ol id="postlist">
<li class="post">
<a class="postlink" href="/geese-trans-wrongs/">
<h2 data-ha-exclude="">geese/trans wrongs </h2>
<a class="postlink" href="/tooled-leather-patches/">
<h2 data-ha-exclude="">tooled leather patches </h2>
<ul class="postlist-tags">
<li>print</li>
<li>shirt</li>
<li>leather</li>
<li>gender</li>
<li>patch</li>
</ul>
<img src="/img/trans-wrongs-geese-print.jpg" alt="Two Canada geese and their reflections in the water. One is calmly swimming away, while the over leans over towards them and HONKS! Both have speech bubbles; the calm goose says &#39;trans rights!&#39; while the honking goose says &#39;trans wrongs!&#39;" loading="lazy" decoding="async" width="1000" height="750">
<img src="/img/pronoun-patch-scroll.jpg" alt="two tooled leather patches. they have scrolls tooled on them that read various pronoun sets." loading="lazy" decoding="async" width="1000" height="750">
</a>
</li>
<li class="post">
<a class="postlink" href="/luminescent/">
<h2 data-ha-exclude="">luminescent (mature)</h2>
<a class="postlink" href="/killdeer/">
<h2 data-ha-exclude="">killdeer </h2>
<ul class="postlist-tags">
<li>print</li>
<li>gender</li>
<li>card</li>
</ul>
<img src="/img/luminescent-print.jpg" alt="A print of a tattooed woman in bright highlighter yellow underwear." class="blur" loading="lazy" decoding="async" width="900" height="1200">
<img src="/img/killdeer-print.jpg" alt="A print of a killdeer in black ink." loading="lazy" decoding="async" width="1000" height="1333">
</a>
</li>
<li class="post">
<a class="postlink" href="/in-the-news/">
<h2 data-ha-exclude="">in the news </h2>
<a class="postlink" href="/pride-dice-bags/">
<h2 data-ha-exclude="">pride dice bags </h2>
<ul class="postlist-tags">
<li>knit</li>
<li>gender</li>
</ul>
<img src="/img/shrimp-knitting.jpg" alt="Picture unrelated to post. Lee, sitting in a chair and seen in profile, looks up and smiles. Ze is holding and working on a partially knit shrimp." loading="lazy" decoding="async" width="1000" height="666">
<img src="/img/pride-dice-bags.jpg" alt="Several knitted drawstring dice bags sit in front of a bookshelf. They are in different pride flag colors; from right to left (skipping a few duplicates) bisexual, lesbian, nonbinary, trans, and genderqueer. The trans-colored dice bag in the center opens towards the camera, showing a variety of colorful dice inside." loading="lazy" decoding="async" width="1000" height="500">
</a>
</li>
@@ -1991,6 +1993,6 @@ switch (currentThemeValue) {
</footer>
<!-- This page `/bottom-growth/` was built on 2026-09-21T20:55:47.793Z -->
<!-- This page `/bottom-growth/` was built on 2026-09-21T22:40:46.002Z -->
</body>
</html>
bowtie/index.html
+10 -12
View File
@@ -1887,45 +1887,43 @@ switch (currentThemeValue) {
<ol id="postlist">
<li class="post">
<a class="postlink" href="/brookes-collar/">
<h2 data-ha-exclude="">brooke&#39;s collar </h2>
<a class="postlink" href="/leather-chest-harness/">
<h2 data-ha-exclude="">leather chest harness </h2>
<ul class="postlist-tags">
<li>leather</li>
</ul>
<img src="/img/lined-shearling-collar.jpg" alt="A green leather collar lined with brown/grey shearling and fitted with two sizes of silver-toned spikes." loading="lazy" decoding="async" width="1000" height="750">
<img src="/img/leather-chest-harness.jpg" alt="Someone from chin to mid-torso, wearing a dark teal leather chest harness with matte black fittings over a t shirt." loading="lazy" decoding="async" width="1000" height="750">
</a>
</li>
<li class="post">
<a class="postlink" href="/fishhook-pride-keychains/">
<h2 data-ha-exclude="">fishhook pride keychains </h2>
<a class="postlink" href="/long-zipper-bifold/">
<h2 data-ha-exclude="">long zipper bifold </h2>
<ul class="postlist-tags">
<li>leather</li>
<li>gender</li>
</ul>
<img src="/img/fishhook-keychain-nonbinary.jpg" alt="a keychain with an iridescent fishhook style attachment linked via leather to an iridescent keyring. the leather is stitched with nonbinary flag colors." loading="lazy" decoding="async" width="1000" height="750">
<img src="/img/long-zipper-bifold.jpg" alt="A collage showing an orange leather wallet with a long zipper running the length of the outside." loading="lazy" decoding="async" width="1000" height="1000">
</a>
</li>
<li class="post">
<a class="postlink" href="/shrimp-cat-toy/">
<h2 data-ha-exclude="">shrimp cat toy </h2>
<a class="postlink" href="/sunflower/">
<h2 data-ha-exclude="">sunflower </h2>
<ul class="postlist-tags">
<li>leather</li>
</ul>
<img src="/img/two-shrimp.jpg" alt="Two leather shrimp-shaped cat toys. They have long dangly antennae and are stitched in red and orange." loading="lazy" decoding="async" width="1000" height="666">
<img src="/img/sunflower.jpg" alt="A sunflower made of leather. Many individual natural toned leather petals are sewn onto a brown center ." loading="lazy" decoding="async" width="1000" height="750">
</a>
</li>
@@ -1982,6 +1980,6 @@ switch (currentThemeValue) {
</footer>
<!-- This page `/bowtie/` was built on 2026-09-21T20:55:47.794Z -->
<!-- This page `/bowtie/` was built on 2026-09-21T22:40:46.003Z -->
</body>
</html>
boypussy/index.html
+18 -16
View File
@@ -1914,49 +1914,51 @@ switch (currentThemeValue) {
<ol id="postlist">
<li class="post">
<a class="postlink" href="/flatfish/">
<h2 data-ha-exclude="">flatfish </h2>
<a class="postlink" href="/geese-trans-wrongs/">
<h2 data-ha-exclude="">geese/trans wrongs </h2>
<ul class="postlist-tags">
<li>print</li>
<li>card</li>
<li>shirt</li>
<li>gender</li>
</ul>
<img src="/img/flatfish-print.jpg" alt="A print of a simple flatfish design inked in sepia." loading="lazy" decoding="async" width="1000" height="1333">
<img src="/img/trans-wrongs-geese-print.jpg" alt="Two Canada geese and their reflections in the water. One is calmly swimming away, while the over leans over towards them and HONKS! Both have speech bubbles; the calm goose says &#39;trans rights!&#39; while the honking goose says &#39;trans wrongs!&#39;" loading="lazy" decoding="async" width="1000" height="750">
</a>
</li>
<li class="post">
<a class="postlink" href="/greeting-quorbs/">
<h2 data-ha-exclude="">greeting quorbs </h2>
<a class="postlink" href="/on-the-ubiquity-of-enby/">
<h2 data-ha-exclude="">on the ubiquity of &#39;enby&#39; </h2>
<ul class="postlist-tags">
<li>card</li>
<li>print</li>
<li>gender</li>
</ul>
<img src="/img/greeting-quorbs.jpg" alt="A pile of hand-printed A2 size greeting cards. Only the front is visible, showing a particularly round quail." loading="lazy" decoding="async" width="1000" height="1000">
<img src="/img/gender-census.jpg" alt="A screenshot of part of the Gender Census reports page, showing the header bar and a title that reads &#39;Gender Census 2023 Worldwide Report&#39;" loading="lazy" decoding="async" width="1000" height="364">
</a>
</li>
<li class="post">
<a class="postlink" href="/killdeer/">
<h2 data-ha-exclude="">killdeer </h2>
<a class="postlink" href="/tooled-leather-patches/">
<h2 data-ha-exclude="">tooled leather patches </h2>
<ul class="postlist-tags">
<li>print</li>
<li>leather</li>
<li>card</li>
<li>gender</li>
<li>patch</li>
</ul>
<img src="/img/killdeer-print.jpg" alt="A print of a killdeer in black ink." loading="lazy" decoding="async" width="1000" height="1333">
<img src="/img/pronoun-patch-scroll.jpg" alt="two tooled leather patches. they have scrolls tooled on them that read various pronoun sets." loading="lazy" decoding="async" width="1000" height="750">
</a>
</li>
@@ -2013,6 +2015,6 @@ switch (currentThemeValue) {
</footer>
<!-- This page `/boypussy/` was built on 2026-09-21T20:55:47.789Z -->
<!-- This page `/boypussy/` was built on 2026-09-21T22:40:46.022Z -->
</body>
</html>
brookes-collar/index.html
+10 -10
View File
@@ -1887,43 +1887,43 @@ switch (currentThemeValue) {
<ol id="postlist">
<li class="post">
<a class="postlink" href="/bowtie/">
<h2 data-ha-exclude="">bowtie </h2>
<a class="postlink" href="/aarons-mask/">
<h2 data-ha-exclude="">aaron&#39;s mask </h2>
<ul class="postlist-tags">
<li>leather</li>
</ul>
<img src="/img/bowtie.jpg" alt="A black leather bow tie with black stitching." loading="lazy" decoding="async" width="1000" height="750">
<img src="/img/aaron-mask.jpg" alt="A brown/grey leather mask of a long snouted dog with visible teeth and red detailing." loading="lazy" decoding="async" width="900" height="1200">
</a>
</li>
<li class="post">
<a class="postlink" href="/pinatex-wallet-with-zipper/">
<h2 data-ha-exclude="">piñatex wallet with zipper </h2>
<a class="postlink" href="/stephanie-collar/">
<h2 data-ha-exclude="">stephanie collar </h2>
<ul class="postlist-tags">
<li>leather</li>
</ul>
<img src="/img/pinatex-ten-pocket-bifold.jpg" alt="A two-picture collage showing the inside and outside of a wallet made with piñatex, a leather alternative made from pineapple leaves. It is two tone blue with a pink accent and has a zippered pocket built in." loading="lazy" decoding="async" width="1000" height="1331">
<img src="/img/stephanie-collar.jpg" alt="A white woman with a shaved side cut wearing a black leather collar with a large dangling o-ring." loading="lazy" decoding="async" width="1000" height="562">
</a>
</li>
<li class="post">
<a class="postlink" href="/zipper-bifold/">
<h2 data-ha-exclude="">zipper bifold </h2>
<a class="postlink" href="/lobstah/">
<h2 data-ha-exclude="">lobstah </h2>
<ul class="postlist-tags">
<li>leather</li>
</ul>
<img src="/img/zipper-bifold.jpg" alt="A collage showing a hand-stitched leather bifold with a zippered coin pocket on one exterior side." loading="lazy" decoding="async" width="1000" height="1777">
<img src="/img/lobstah.jpg" alt="Two red leather lobster ornaments, about 4-5 in long each." loading="lazy" decoding="async" width="1000" height="750">
</a>
</li>
@@ -1980,6 +1980,6 @@ switch (currentThemeValue) {
</footer>
<!-- This page `/brookes-collar/` was built on 2026-09-21T20:55:47.791Z -->
<!-- This page `/brookes-collar/` was built on 2026-09-21T22:40:46.025Z -->
</body>
</html>
brookes-cuff-bracelets/index.html
+14 -10
View File
@@ -1887,43 +1887,47 @@ switch (currentThemeValue) {
<ol id="postlist">
<li class="post">
<a class="postlink" href="/leather-lighter-case/">
<h2 data-ha-exclude="">leather lighter case </h2>
<a class="postlink" href="/brookes-suspenders/">
<h2 data-ha-exclude="">brooke&#39;s suspenders </h2>
<ul class="postlist-tags">
<li>leather</li>
</ul>
<img src="/img/leather-lighter-case.jpg" alt="A bic lighter wrapped in leather and hand-stitched up one side." loading="lazy" decoding="async" width="1000" height="750">
<img src="/img/brooke-suspenders.jpg" alt="a two image collage showing the front and back of a person, neck to waist. she&#39;s wearing leather suspenders with a button attachment, buckles for adjustment, and a stitched diamond where the straps cross in the back." loading="lazy" decoding="async" width="1000" height="750">
</a>
</li>
<li class="post">
<a class="postlink" href="/triangle-pouch/">
<h2 data-ha-exclude="">triangle pouch </h2>
<a class="postlink" href="/dragon-mask/">
<h2 data-ha-exclude="">dragon mask </h2>
<ul class="postlist-tags">
<li>leather</li>
<li>highlight</li>
</ul>
<img src="/img/triangle-pouch.jpg" alt="5 small triangular pouches made of leather in two sizes and various colors." loading="lazy" decoding="async" width="1000" height="750">
<img src="/img/dragon-mask.jpg" alt="lee (a white person with glasses and a side shave) holds up a leather dragon mask in black and dark green. ze sticks hir tongue out at it." loading="lazy" decoding="async" width="1000" height="746">
</a>
</li>
<li class="post">
<a class="postlink" href="/wrap-bracelets/">
<h2 data-ha-exclude="">wrap bracelets </h2>
<a class="postlink" href="/little-critter-pouch/">
<h2 data-ha-exclude="">little critter pouch </h2>
<ul class="postlist-tags">
<li>leather</li>
<li>highlight</li>
</ul>
<img src="/img/leather-wrap-bracelets.jpg" alt="two wrists, each wearing a black leather wrap bracelet. the upper bracelet is a thin strap wrapped 3 times around the wrist. the lower bracelet wraps twice, with a thicker strap, and has carefully placed spikes that avoid the wrap spots." loading="lazy" decoding="async" width="1000" height="1333">
<img src="/img/little-critter-pouch.jpg" alt="A leather pouch shaped a bit like a d10 but with eight sides. It has a rainbow zippered opening and a wristlet strap." loading="lazy" decoding="async" width="1000" height="750">
</a>
</li>
@@ -1980,6 +1984,6 @@ switch (currentThemeValue) {
</footer>
<!-- This page `/brookes-cuff-bracelets/` was built on 2026-09-21T20:55:47.793Z -->
<!-- This page `/brookes-cuff-bracelets/` was built on 2026-09-21T22:40:46.001Z -->
</body>
</html>
brookes-notebook/index.html
+12 -12
View File
@@ -1902,47 +1902,47 @@ switch (currentThemeValue) {
<ol id="postlist">
<li class="post">
<a class="postlink" href="/leather-strap-journal/">
<h2 data-ha-exclude="">leather strap journal </h2>
<a class="postlink" href="/stampede-journal/">
<h2 data-ha-exclude="">stampede journal </h2>
<ul class="postlist-tags">
<li>book</li>
</ul>
<img src="/img/leather-strap-journal.jpg" alt="A 3-part collage showing a blue journal with leather straps woven into the covers." loading="lazy" decoding="async" width="1000" height="1000">
<img src="/img/stampede-journal.jpg" alt="A 4-part collage of a hardcover book, showing a coloring page with &#39;stampede!&#39; written across it." loading="lazy" decoding="async" width="1000" height="1777">
</a>
</li>
<li class="post">
<a class="postlink" href="/dragon-mask/">
<h2 data-ha-exclude="">dragon mask </h2>
<a class="postlink" href="/quorbs/">
<h2 data-ha-exclude="">quorbs </h2>
<ul class="postlist-tags">
<li>leather</li>
<li>print</li>
<li>highlight</li>
</ul>
<img src="/img/dragon-mask.jpg" alt="lee (a white person with glasses and a side shave) holds up a leather dragon mask in black and dark green. ze sticks hir tongue out at it." loading="lazy" decoding="async" width="1000" height="746">
<img src="/img/quorbs-print.jpg" alt="A print in two layers of color showing two rotund quails on a branch. Most of the details are in black ink, then there is a layer with a brown gradient filling in some color on the head and breast." loading="lazy" decoding="async" width="1000" height="750">
</a>
</li>
<li class="post">
<a class="postlink" href="/little-critter-pouch/">
<h2 data-ha-exclude="">little critter pouch </h2>
<a class="postlink" href="/textures-unite/">
<h2 data-ha-exclude="">textures unite </h2>
<ul class="postlist-tags">
<li>leather</li>
<li>knit</li>
<li>highlight</li>
</ul>
<img src="/img/little-critter-pouch.jpg" alt="A leather pouch shaped a bit like a d10 but with eight sides. It has a rainbow zippered opening and a wristlet strap." loading="lazy" decoding="async" width="1000" height="750">
<img src="/img/textures-unite.jpg" alt="a largely unseen person holds up an expansive knitted shawl, built in 6 sections of different textures and colors. in the background, trees and dappled sunlight." loading="lazy" decoding="async" width="1000" height="1334">
</a>
</li>
@@ -1999,6 +1999,6 @@ switch (currentThemeValue) {
</footer>
<!-- This page `/brookes-notebook/` was built on 2026-09-21T20:55:47.772Z -->
<!-- This page `/brookes-notebook/` was built on 2026-09-21T22:40:46.000Z -->
</body>
</html>
brookes-scarf/index.html
+14 -10
View File
@@ -1894,43 +1894,47 @@ switch (currentThemeValue) {
<ol id="postlist">
<li class="post">
<a class="postlink" href="/acadia-mitts/">
<h2 data-ha-exclude="">acadia mitts </h2>
<a class="postlink" href="/textures-unite/">
<h2 data-ha-exclude="">textures unite </h2>
<ul class="postlist-tags">
<li>knit</li>
<li>highlight</li>
</ul>
<img src="/img/acadia-mitts.jpg" alt="a hand wearing a knitted fingerless mitten. it&#39;s knit in a slubby, almost tweedy yarn, with the body being blue grey stockinette and the cuffs and tips a vibrant green rib." loading="lazy" decoding="async" width="1000" height="1000">
<img src="/img/textures-unite.jpg" alt="a largely unseen person holds up an expansive knitted shawl, built in 6 sections of different textures and colors. in the background, trees and dappled sunlight." loading="lazy" decoding="async" width="1000" height="1334">
</a>
</li>
<li class="post">
<a class="postlink" href="/knit-shrimp/">
<h2 data-ha-exclude="">knit shrimp </h2>
<a class="postlink" href="/butch-hands-pattern/">
<h2 data-ha-exclude="">butch hands pattern </h2>
<ul class="postlist-tags">
<li>knit</li>
<li>highlight</li>
</ul>
<img src="/img/knit-shrimp.jpg" alt="Four knitted shrimp in various shades of pink. They are all somewhere around hand-sized, and have little yarn antennae and leggies." loading="lazy" decoding="async" width="1000" height="750">
<img src="/img/butch-hands.jpg" alt="Hands wearing a pair of pink and grey gloves with convertable mitten tops." loading="lazy" decoding="async" width="1000" height="750">
</a>
</li>
<li class="post">
<a class="postlink" href="/brookes-socks/">
<h2 data-ha-exclude="">brooke&#39;s socks </h2>
<a class="postlink" href="/pink-socks/">
<h2 data-ha-exclude="">pink socks </h2>
<ul class="postlist-tags">
<li>knit</li>
</ul>
<img src="/img/brooke-socks.jpg" alt="Feet in a pair of colorful socks. They are identically striped and quickly vary between yellow, green, blue, white, and gray." loading="lazy" decoding="async" width="1000" height="750">
<img src="/img/pink-socks.jpg" alt="Feet propped up on a car dashboard, with a desert landscape beyond. The feet are in salmon-colored socks with black flecks, and decorative lines running down the socks." loading="lazy" decoding="async" width="1000" height="1333">
</a>
</li>
@@ -1987,6 +1991,6 @@ switch (currentThemeValue) {
</footer>
<!-- This page `/brookes-scarf/` was built on 2026-09-21T20:55:47.797Z -->
<!-- This page `/brookes-scarf/` was built on 2026-09-21T22:40:46.029Z -->
</body>
</html>
brookes-socks/index.html
+12 -14
View File
@@ -1887,47 +1887,45 @@ switch (currentThemeValue) {
<ol id="postlist">
<li class="post">
<a class="postlink" href="/keffiyah-fishing-net-pattern/">
<h2 data-ha-exclude="">keffiyah fishing net pattern </h2>
<a class="postlink" href="/pride-dice-bags/">
<h2 data-ha-exclude="">pride dice bags </h2>
<ul class="postlist-tags">
<li>knit</li>
<li>gender</li>
</ul>
<img src="/img/keffiyah-nets.jpg" alt="a knitted swatch. it&#39;s mostly white yarn, but a grid of dark red- purple- green yarn that looks like a chain link fence is built into it. the diagonal lines are achieved with floats of yarn from one row, then picked up and knit into several rows later." loading="lazy" decoding="async" width="1000" height="750">
<img src="/img/pride-dice-bags.jpg" alt="Several knitted drawstring dice bags sit in front of a bookshelf. They are in different pride flag colors; from right to left (skipping a few duplicates) bisexual, lesbian, nonbinary, trans, and genderqueer. The trans-colored dice bag in the center opens towards the camera, showing a variety of colorful dice inside." loading="lazy" decoding="async" width="1000" height="500">
</a>
</li>
<li class="post">
<a class="postlink" href="/butch-hands-pattern/">
<h2 data-ha-exclude="">butch hands pattern </h2>
<a class="postlink" href="/acadia-mitts/">
<h2 data-ha-exclude="">acadia mitts </h2>
<ul class="postlist-tags">
<li>knit</li>
<li>highlight</li>
</ul>
<img src="/img/butch-hands.jpg" alt="Hands wearing a pair of pink and grey gloves with convertable mitten tops." loading="lazy" decoding="async" width="1000" height="750">
<img src="/img/acadia-mitts.jpg" alt="a hand wearing a knitted fingerless mitten. it&#39;s knit in a slubby, almost tweedy yarn, with the body being blue grey stockinette and the cuffs and tips a vibrant green rib." loading="lazy" decoding="async" width="1000" height="1000">
</a>
</li>
<li class="post">
<a class="postlink" href="/on-the-shoulders-of-giants/">
<h2 data-ha-exclude="">on the shoulders of giants </h2>
<a class="postlink" href="/knit-shrimp/">
<h2 data-ha-exclude="">knit shrimp </h2>
<ul class="postlist-tags">
<li>zine</li>
<li>knit</li>
</ul>
<img src="/img/on-the-shoulders.jpg" alt="ok so. five image collage showing the front, 3 inner spreads, and back of a riso-printed zine in green and light blue. it&#39;s called &#39;on the shoulders of giants&#39; and it&#39;s about a knitting technique I learned from Stephen west and how I built on that technique. it talks about joining two adjacent panels without seaming, instead knitting the second panel onto the selvedge of the first. then it uses that technique to approach two panels knit with significantly different weights of yarn" loading="lazy" decoding="async" width="1000" height="1000">
<img src="/img/knit-shrimp.jpg" alt="Four knitted shrimp in various shades of pink. They are all somewhere around hand-sized, and have little yarn antennae and leggies." loading="lazy" decoding="async" width="1000" height="750">
</a>
</li>
@@ -1984,6 +1982,6 @@ switch (currentThemeValue) {
</footer>
<!-- This page `/brookes-socks/` was built on 2026-09-21T20:55:47.772Z -->
<!-- This page `/brookes-socks/` was built on 2026-09-21T22:40:46.000Z -->
</body>
</html>
brookes-suspenders/index.html
+14 -10
View File
@@ -1887,43 +1887,47 @@ switch (currentThemeValue) {
<ol id="postlist">
<li class="post">
<a class="postlink" href="/x-acto-knife-sheath/">
<h2 data-ha-exclude="">x-acto knife sheath </h2>
<a class="postlink" href="/tooled-leather-patches/">
<h2 data-ha-exclude="">tooled leather patches </h2>
<ul class="postlist-tags">
<li>leather</li>
<li>gender</li>
<li>patch</li>
</ul>
<img src="/img/knife-sheaths.jpg" alt="Several blades with leather sheaths, and a few extra sheaths. There&#39;s a #2 blade with an orange sheath with yellow stitching, a #11 blade with a blue sheath with light grey stitching, and a skiving knife with a plum sheath and pink stitching." loading="lazy" decoding="async" width="1000" height="750">
<img src="/img/pronoun-patch-scroll.jpg" alt="two tooled leather patches. they have scrolls tooled on them that read various pronoun sets." loading="lazy" decoding="async" width="1000" height="750">
</a>
</li>
<li class="post">
<a class="postlink" href="/double-bill-pocket-bifold/">
<h2 data-ha-exclude="">double bill pocket bifold </h2>
<a class="postlink" href="/zipper-bifold/">
<h2 data-ha-exclude="">zipper bifold </h2>
<ul class="postlist-tags">
<li>leather</li>
</ul>
<img src="/img/double-bill-pocket-bifold.jpg" alt="A 3-picture collage showing a hand-stitched leather wallet in plum and light natural leather, with a double bill pocket." loading="lazy" decoding="async" width="1000" height="1777">
<img src="/img/zipper-bifold.jpg" alt="A collage showing a hand-stitched leather bifold with a zippered coin pocket on one exterior side." loading="lazy" decoding="async" width="1000" height="1777">
</a>
</li>
<li class="post">
<a class="postlink" href="/lobstah/">
<h2 data-ha-exclude="">lobstah </h2>
<a class="postlink" href="/leather-lighter-case/">
<h2 data-ha-exclude="">leather lighter case </h2>
<ul class="postlist-tags">
<li>leather</li>
</ul>
<img src="/img/lobstah.jpg" alt="Two red leather lobster ornaments, about 4-5 in long each." loading="lazy" decoding="async" width="1000" height="750">
<img src="/img/leather-lighter-case.jpg" alt="A bic lighter wrapped in leather and hand-stitched up one side." loading="lazy" decoding="async" width="1000" height="750">
</a>
</li>
@@ -1980,6 +1984,6 @@ switch (currentThemeValue) {
</footer>
<!-- This page `/brookes-suspenders/` was built on 2026-09-21T20:55:47.796Z -->
<!-- This page `/brookes-suspenders/` was built on 2026-09-21T22:40:46.029Z -->
</body>
</html>
brown-creeper/index.html
+23 -21
View File
@@ -1888,33 +1888,17 @@ switch (currentThemeValue) {
<ol id="postlist">
<li class="post">
<a class="postlink" href="/tiny-mushrooms/">
<h2 data-ha-exclude="">tiny mushrooms </h2>
<a class="postlink" href="/junco/">
<h2 data-ha-exclude="">junco </h2>
<ul class="postlist-tags">
<li>print</li>
</ul>
<img src="/img/pixels-mushrooms.jpg" alt="3 tiny mushroom stamps next to their impressions. They are all about 1 inch square. There is a chanterelle in yellow, a russula in pink, and witch&#39;s hat mycena in indigo." loading="lazy" decoding="async" width="1000" height="750">
</a>
</li>
<li class="post">
<a class="postlink" href="/slightly-weird-man-club/">
<h2 data-ha-exclude="">slightly weird man club </h2>
<ul class="postlist-tags">
<li>print</li>
<li>shirt</li>
<li>gender</li>
<li>card</li>
</ul>
<img src="/img/slightly-weird-man-club-print.jpg" alt="A print that reads &#39;slightly weird man club&#39; in a nonbinary flag colored gradient" loading="lazy" decoding="async" width="1000" height="750">
<img src="/img/junco-print.jpg" alt="A print of a junco mid-takeoff from a branch. Eir head is inked in black, body in gray, and the branch in sepia." loading="lazy" decoding="async" width="1000" height="1333">
</a>
</li>
@@ -1935,6 +1919,24 @@ switch (currentThemeValue) {
</a>
</li>
<li class="post">
<a class="postlink" href="/swallowtail-on-snowdrops/">
<h2 data-ha-exclude="">swallowtail on snowdrops </h2>
<ul class="postlist-tags">
<li>print</li>
<li>card</li>
<li>shirt</li>
</ul>
<img src="/img/swallowtail-on-snowdrops-print.jpg" alt="A block print of a tiger swallowtail butterfly dangling from Japanese snowdrops, a white drooping flower." loading="lazy" decoding="async" width="1000" height="1332">
</a>
</li>
</ol>
</section>
@@ -1987,6 +1989,6 @@ switch (currentThemeValue) {
</footer>
<!-- This page `/brown-creeper/` was built on 2026-09-21T20:55:47.795Z -->
<!-- This page `/brown-creeper/` was built on 2026-09-21T22:40:46.004Z -->
</body>
</html>
butch-hands-pattern/index.html
+40 -37
View File
@@ -93,40 +93,43 @@
top: -1.25rem;
}
/* my baby my child my `tree` list style */
#toc ol,
#toc li {
margin-block: 0;
list-style: none;
/* `tree` style toc */
#toc nav > ol {
margin-left: 1rem;
}
#toc ol {
margin-left: 0;
margin: 0;
}
#toc li {
border-left: .095rem solid var(--color-pink);
margin-left: 1.5rem;
line-height: 1.15;
text-indent: 1.22rem hanging;
position: relative;
padding-inline-start: 1em;
list-style: none;
margin-block: 0;
margin-left: .35rem;
}
#toc li::before,
#toc li::after {
display: block;
position: absolute;
box-sizing: border-box;
inset-block: 0 auto;
inset-inline: 0 auto;
inline-size: .75em;
border-inline-start: .1rem solid var(--color-pink);
}
#toc li::before {
content: '├─' / "";
color: var(--color-pink);
position: relative;
left: -.34rem;
block-size: .5lh;
border-block-end: .1rem solid var(--color-pink);
content: "";
}
#toc li:last-child {
border-left-color: transparent;
}
#toc li:last-child::before {
/* Technically, we could use this content for all of them, but doing the full
bar for the non-last-childs keeps the border a *smidge* more consistent for
different levels of magnification */
content: '└─' / "";
#toc li:not(:last-child)::after {
block-size: 100%;
content: "";
}
/* underlines are unnecessary in this context */
@@ -2120,47 +2123,47 @@ switch (currentThemeValue) {
<ol id="postlist">
<li class="post">
<a class="postlink" href="/keffiyah-fishing-net-pattern/">
<h2 data-ha-exclude="">keffiyah fishing net pattern </h2>
<a class="postlink" href="/core-css/">
<h2 data-ha-exclude="">core CSS </h2>
<ul class="postlist-tags">
<li>knit</li>
<li>software</li>
<li>highlight</li>
</ul>
<img src="/img/keffiyah-nets.jpg" alt="a knitted swatch. it&#39;s mostly white yarn, but a grid of dark red- purple- green yarn that looks like a chain link fence is built into it. the diagonal lines are achieved with floats of yarn from one row, then picked up and knit into several rows later." loading="lazy" decoding="async" width="1000" height="750">
<img src="/img/core-css.png" alt="A website mockup in dark mode with light pink accents. Everything is filler text such as the title &#39;This is my cool website&#39;, headers reading things like &#39;This is an h1&#39;, nav items &#39;Nav item 1&#39;, etc. There is a paragraph block - the opening of the Bee Movie - and part of an image visible - a screencap of the music video for Never Gonna Give You Up by Rick Astley." loading="lazy" decoding="async" width="1000" height="447">
</a>
</li>
<li class="post">
<a class="postlink" href="/greeting-loons/">
<h2 data-ha-exclude="">greeting loons </h2>
<a class="postlink" href="/quorbs/">
<h2 data-ha-exclude="">quorbs </h2>
<ul class="postlist-tags">
<li>card</li>
<li>print</li>
<li>highlight</li>
</ul>
<img src="/img/greeting-loons.jpg" alt="A pile of hand-printed A2 size greeting cards. A loon rearing up with outstretched wings spans the front and back of the cards." loading="lazy" decoding="async" width="1000" height="750">
<img src="/img/quorbs-print.jpg" alt="A print in two layers of color showing two rotund quails on a branch. Most of the details are in black ink, then there is a layer with a brown gradient filling in some color on the head and breast." loading="lazy" decoding="async" width="1000" height="750">
</a>
</li>
<li class="post">
<a class="postlink" href="/sideways-canvas-shirt/">
<h2 data-ha-exclude="">sideways canvas shirt </h2>
<a class="postlink" href="/recommendations-and-favorites/">
<h2 data-ha-exclude="">recommendations &amp; favorites </h2>
<ul class="postlist-tags">
<li>knit</li>
<li>highlight</li>
</ul>
<img src="/img/sideways-canvas.jpg" alt="someone&#39;s torso in a knitted short sleeve shirt. the front is teal, and the bit of back we can see is mustard yellow. looking closely, it&#39;s notable that the stitches are turned 90 degrees from a standard knit garment." loading="lazy" decoding="async" width="1000" height="1338">
<img src="/img/metal-curl.jpg" alt="Photo unrelated to content of post. A metal sculpture rises up and curls into itself, with similar sculptures around it. Looking through the very center of the curve, an any-gender bathroom sign is visible." loading="lazy" decoding="async" width="1000" height="666">
</a>
</li>
@@ -2217,6 +2220,6 @@ switch (currentThemeValue) {
</footer>
<!-- This page `/butch-hands-pattern/` was built on 2026-09-21T20:55:47.816Z -->
<!-- This page `/butch-hands-pattern/` was built on 2026-09-21T22:40:46.045Z -->
</body>
</html>
chanterelle/index.html
+23 -25
View File
@@ -1898,6 +1898,24 @@ switch (currentThemeValue) {
<h2 data-ha-exclude="">related posts</h2>
<ol id="postlist">
<li class="post">
<a class="postlink" href="/coming-out/">
<h2 data-ha-exclude="">coming out </h2>
<ul class="postlist-tags">
<li>print</li>
<li>card</li>
<li>gender</li>
</ul>
<img src="/img/coming-out-card-print.jpg" alt="A card and print in the same design - a chick and a broken eggshell, and a simple font reading &#39;congrats on coming out of your shell&#39;" loading="lazy" decoding="async" width="1000" height="750">
</a>
</li>
<li class="post">
<a class="postlink" href="/quorbs/">
<h2 data-ha-exclude="">quorbs </h2>
@@ -1915,37 +1933,17 @@ switch (currentThemeValue) {
</li>
<li class="post">
<a class="postlink" href="/hair/">
<h2 data-ha-exclude="">hair </h2>
<a class="postlink" href="/artisans-cooperative-cards/">
<h2 data-ha-exclude="">artisans cooperative cards </h2>
<ul class="postlist-tags">
<li>print</li>
<li>gender</li>
<li>card</li>
</ul>
<img src="/img/hair-print.jpg" alt="A print in black ink of belly hair." loading="lazy" decoding="async" width="1000" height="710">
</a>
</li>
<li class="post">
<a class="postlink" href="/anarchy-autism/">
<h2 data-ha-exclude="">anarchy autism </h2>
<ul class="postlist-tags">
<li>print</li>
<li>sticker</li>
<li>shirt</li>
<li>pin</li>
</ul>
<img src="/img/anarchy-autism-rainbow-print.jpg" alt="A print in rainbow ink that says autism with the anarchy A." loading="lazy" decoding="async" width="1000" height="750">
<img src="/img/artisans-coop-cards.jpg" alt="2 white greeting cards with the Artisans Cooperative logo, a chicken. One card has a single print of the chicken in black ink, and the other has two overlapping prints in blue and red ink" loading="lazy" decoding="async" width="1000" height="1000">
</a>
</li>
@@ -2002,6 +2000,6 @@ switch (currentThemeValue) {
</footer>
<!-- This page `/chanterelle/` was built on 2026-09-21T20:55:47.773Z -->
<!-- This page `/chanterelle/` was built on 2026-09-21T22:40:46.005Z -->
</body>
</html>
charlie-the-alpaca-handspun/index.html
+29 -29
View File
@@ -1886,6 +1886,34 @@ switch (currentThemeValue) {
<h2 data-ha-exclude="">related posts</h2>
<ol id="postlist">
<li class="post">
<a class="postlink" href="/petrichor-handspun/">
<h2 data-ha-exclude="">petrichor handspun </h2>
<ul class="postlist-tags">
<li>yarn</li>
</ul>
<img src="/img/petrichor-handspun.jpg" alt="3 skeins of handspun yarn, 2 large and 1 small. the large ones are a rich earth-tone blend of reds, pinks, browns, and hints of green and gold. the smaller skein is similar but with a decidedly greener hue" loading="lazy" decoding="async" width="1000" height="750">
</a>
</li>
<li class="post">
<a class="postlink" href="/light-grey-jacobs-handspun/">
<h2 data-ha-exclude="">light grey jacobs handspun </h2>
<ul class="postlist-tags">
<li>yarn</li>
</ul>
<img src="/img/light-grey-jacobs.jpg" alt="a skein of light grey handspun yarn" loading="lazy" decoding="async" width="1000" height="666">
</a>
</li>
<li class="post">
<a class="postlink" href="/orion-handspun/">
<h2 data-ha-exclude="">orion handspun </h2>
@@ -1900,34 +1928,6 @@ switch (currentThemeValue) {
</a>
</li>
<li class="post">
<a class="postlink" href="/spinning-plants/">
<h2 data-ha-exclude="">spinning plants </h2>
<ul class="postlist-tags">
<li>yarn</li>
</ul>
<img src="/img/plant-handspun.jpg" alt="6 small skeins of handspun yarn, each made from a different plant fiber. from top, we have flax (medium brown, rough); what is probably lotus (golden, shiny and soft); banana (white and semi shiny); hemp (light brown, rough); tencel (white and very shiny); ramie (a particularly small skein, white and semi shiny)" loading="lazy" decoding="async" width="1000" height="874">
</a>
</li>
<li class="post">
<a class="postlink" href="/handspun-yarn-in-party-mix-and-orange-gold/">
<h2 data-ha-exclude="">handspun yarn in party mix and orange-gold </h2>
<ul class="postlist-tags">
<li>yarn</li>
</ul>
<img src="/img/handspun0.jpg" alt="4 skeins of handspun yarn, two in a somewhat pastel multicolor and two in a blend of orange, gold, and white." loading="lazy" decoding="async" width="1000" height="750">
</a>
</li>
</ol>
</section>
@@ -1980,6 +1980,6 @@ switch (currentThemeValue) {
</footer>
<!-- This page `/charlie-the-alpaca-handspun/` was built on 2026-09-21T20:55:47.798Z -->
<!-- This page `/charlie-the-alpaca-handspun/` was built on 2026-09-21T22:40:46.031Z -->
</body>
</html>
circle-bag/index.html
+12 -10
View File
@@ -1887,43 +1887,45 @@ switch (currentThemeValue) {
<ol id="postlist">
<li class="post">
<a class="postlink" href="/leather-keychains/">
<h2 data-ha-exclude="">leather keychains </h2>
<a class="postlink" href="/vertical-card-wallet/">
<h2 data-ha-exclude="">vertical card wallet </h2>
<ul class="postlist-tags">
<li>leather</li>
</ul>
<img src="/img/leather-keychains.jpg" alt="A picture of multiple leather keychains sitting on a wood table. Many of them are simple rectangle shapes with stitching around the edge; a few are odd wavy or geometric shapes. A few say things like &#39;MOM&#39; or &#39;EGG&#39;." loading="lazy" decoding="async" width="1000" height="1333">
<img src="/img/vertical-card-wallet.jpg" alt="A collage showing a hand-stitched leather card wallet with 3 card pockets and 1 interior pocket." loading="lazy" decoding="async" width="1000" height="750">
</a>
</li>
<li class="post">
<a class="postlink" href="/foldy-wallet/">
<h2 data-ha-exclude="">foldy wallet </h2>
<a class="postlink" href="/lobstah/">
<h2 data-ha-exclude="">lobstah </h2>
<ul class="postlist-tags">
<li>leather</li>
</ul>
<img src="/img/foldy-wallet.jpg" alt="A four part collage showing a single piece of deep red leather folding up to become a card wallet." loading="lazy" decoding="async" width="1000" height="1000">
<img src="/img/lobstah.jpg" alt="Two red leather lobster ornaments, about 4-5 in long each." loading="lazy" decoding="async" width="1000" height="750">
</a>
</li>
<li class="post">
<a class="postlink" href="/vix-collar/">
<h2 data-ha-exclude="">vix collar </h2>
<a class="postlink" href="/leather-long-stitch-journals/">
<h2 data-ha-exclude="">leather long-stitch journals </h2>
<ul class="postlist-tags">
<li>leather</li>
<li>book</li>
</ul>
<img src="/img/vix-collar.jpg" alt="A collar rests on a leather-wrapped lighter. It is lined with shearling and built of two other layers of leather - a wider mustard yellow layer and a thinner teal layer over that. the teal layer holds a heart shaped o-ring in place." loading="lazy" decoding="async" width="1000" height="750">
<img src="/img/long-stitch-journals.jpg" alt="A stack of hand-bound journals showing long stitches aligned with the spines. They are leather bound and have tie closures." loading="lazy" decoding="async" width="1000" height="1333">
</a>
</li>
@@ -1980,6 +1982,6 @@ switch (currentThemeValue) {
</footer>
<!-- This page `/circle-bag/` was built on 2026-09-21T20:55:47.792Z -->
<!-- This page `/circle-bag/` was built on 2026-09-21T22:40:46.026Z -->
</body>
</html>
colophon/index.html
+1 -1
View File
@@ -1460,6 +1460,6 @@ switch (currentThemeValue) {
</footer>
<!-- This page `/colophon/` was built on 2026-09-21T20:55:47.800Z -->
<!-- This page `/colophon/` was built on 2026-09-21T22:40:46.033Z -->
</body>
</html>
coming-out/index.html
+38 -30
View File
@@ -1903,8 +1903,24 @@ switch (currentThemeValue) {
<ol id="postlist">
<li class="post">
<a class="postlink" href="/stellars-jay/">
<h2 data-ha-exclude="">stellar&#39;s jay </h2>
<a class="postlink" href="/pride-dice-bags/">
<h2 data-ha-exclude="">pride dice bags </h2>
<ul class="postlist-tags">
<li>knit</li>
<li>gender</li>
</ul>
<img src="/img/pride-dice-bags.jpg" alt="Several knitted drawstring dice bags sit in front of a bookshelf. They are in different pride flag colors; from right to left (skipping a few duplicates) bisexual, lesbian, nonbinary, trans, and genderqueer. The trans-colored dice bag in the center opens towards the camera, showing a variety of colorful dice inside." loading="lazy" decoding="async" width="1000" height="500">
</a>
</li>
<li class="post">
<a class="postlink" href="/trans-rights-skull/">
<h2 data-ha-exclude="">trans rights skull </h2>
<ul class="postlist-tags">
@@ -1912,38 +1928,30 @@ switch (currentThemeValue) {
<li>card</li>
<li>shirt</li>
<li>sticker</li>
</ul>
<img src="/img/stellars-jay-print.jpg" alt="A print of a stellar&#39;s jay, a beautiful black and blue bird, about to take off from a branch" loading="lazy" decoding="async" width="1000" height="750">
</a>
</li>
<li class="post">
<a class="postlink" href="/squarsh/">
<h2 data-ha-exclude="">squarsh </h2>
<ul class="postlist-tags">
<li>print</li>
</ul>
<img src="/img/squarsh-prints.jpg" alt="Two identical prints of a delicata squash. The body of the squash is cornsilk (muted yellow), the stem and stripes in mint green, and the shadows in lilac." loading="lazy" decoding="async" width="1000" height="1000">
</a>
</li>
<li class="post">
<a class="postlink" href="/gender/">
<h2 data-ha-exclude="">gender? </h2>
<ul class="postlist-tags">
<li>pin</li>
<li>gender</li>
</ul>
<img src="/img/gender-notes.png" alt="A page of handwritten notes with some loosely drawn charts, described further in the post." loading="lazy" decoding="async" width="865" height="1080">
<img src="/img/trans-rights-print.jpg" alt="A print in mostly black ink of a smiling skull with a speech bubble. In pink and blue, the speech bubble reads &#39;trans rights!&#39;" loading="lazy" decoding="async" width="1000" height="750">
</a>
</li>
<li class="post">
<a class="postlink" href="/greeting-quorbs/">
<h2 data-ha-exclude="">greeting quorbs </h2>
<ul class="postlist-tags">
<li>card</li>
<li>print</li>
</ul>
<img src="/img/greeting-quorbs.jpg" alt="A pile of hand-printed A2 size greeting cards. Only the front is visible, showing a particularly round quail." loading="lazy" decoding="async" width="1000" height="1000">
</a>
</li>
@@ -2000,6 +2008,6 @@ switch (currentThemeValue) {
</footer>
<!-- This page `/coming-out/` was built on 2026-09-21T20:55:47.788Z -->
<!-- This page `/coming-out/` was built on 2026-09-21T22:40:46.022Z -->
</body>
</html>
comparing-text-editors/index.html
+36 -33
View File
@@ -93,40 +93,43 @@
top: -1.25rem;
}
/* my baby my child my `tree` list style */
#toc ol,
#toc li {
margin-block: 0;
list-style: none;
/* `tree` style toc */
#toc nav > ol {
margin-left: 1rem;
}
#toc ol {
margin-left: 0;
margin: 0;
}
#toc li {
border-left: .095rem solid var(--color-pink);
margin-left: 1.5rem;
line-height: 1.15;
text-indent: 1.22rem hanging;
position: relative;
padding-inline-start: 1em;
list-style: none;
margin-block: 0;
margin-left: .35rem;
}
#toc li::before,
#toc li::after {
display: block;
position: absolute;
box-sizing: border-box;
inset-block: 0 auto;
inset-inline: 0 auto;
inline-size: .75em;
border-inline-start: .1rem solid var(--color-pink);
}
#toc li::before {
content: '├─' / "";
color: var(--color-pink);
position: relative;
left: -.34rem;
block-size: .5lh;
border-block-end: .1rem solid var(--color-pink);
content: "";
}
#toc li:last-child {
border-left-color: transparent;
}
#toc li:last-child::before {
/* Technically, we could use this content for all of them, but doing the full
bar for the non-last-childs keeps the border a *smidge* more consistent for
different levels of magnification */
content: '└─' / "";
#toc li:not(:last-child)::after {
block-size: 100%;
content: "";
}
/* underlines are unnecessary in this context */
@@ -2254,43 +2257,43 @@ switch (currentThemeValue) {
<ol id="postlist">
<li class="post">
<a class="postlink" href="/tree-style-table-of-contents/">
<h2 data-ha-exclude="">tree-style table of contents </h2>
<a class="postlink" href="/domain-and-site-setup/">
<h2 data-ha-exclude="">domain and site setup </h2>
<ul class="postlist-tags">
<li>software</li>
</ul>
<img src="/img/tree-styling-0.png" alt="screenshot of the table of contents for a blog post (this blog post, in fact). it&#39;s been styled so that the output resembles the hierarchical file system output from the shell program &#39;tree.&#39;" loading="lazy" decoding="async" width="621" height="450">
<img src="/img/crinkly-mushrooms.jpg" alt="Picture unrelated to post. Some crinkly brown-orange mushrooms in vibrant green grass." loading="lazy" decoding="async" width="1000" height="750">
</a>
</li>
<li class="post">
<a class="postlink" href="/handedness-toggle/">
<h2 data-ha-exclude="">handedness toggle </h2>
<a class="postlink" href="/intro-to-wireframing/">
<h2 data-ha-exclude="">intro to wireframing </h2>
<ul class="postlist-tags">
<li>software</li>
</ul>
<img src="/img/handedness-toggle-0.png" alt="A screenshot of the rescue trans rescue navbar centered on a button that shows a hand pointing left." loading="lazy" decoding="async" width="1000" height="257">
<img src="/img/aggregator-wireframes.jpg" alt="a figma page with 4 major sections titled aggregator, aggregator mobile, aggregator color, and aggregator mobile color. each section has 7 pages in it - all sections pretty clearly have the same 7 pages, with the mobile sections shown on mobile screens and the color sections in a rainbow of pastels rather than grayscale." loading="lazy" decoding="async" width="1000" height="1042">
</a>
</li>
<li class="post">
<a class="postlink" href="/eleventy-lessons/">
<h2 data-ha-exclude="">eleventy lessons </h2>
<a class="postlink" href="/visual-site-builders-and-accessibility/">
<h2 data-ha-exclude="">visual site builders and accessibility </h2>
<ul class="postlist-tags">
<li>software</li>
</ul>
<img src="/img/hellebore.jpg" alt="Image unrelated to post. Close up on a pale green hellebore flower." loading="lazy" decoding="async" width="1000" height="666">
<img src="/img/roses.jpg" alt="Image unrelated to post. Two peach-colored roses, the farther away one a bit out of focus." loading="lazy" decoding="async" width="1000" height="666">
</a>
</li>
@@ -2347,6 +2350,6 @@ switch (currentThemeValue) {
</footer>
<!-- This page `/comparing-text-editors/` was built on 2026-09-21T20:55:47.817Z -->
<!-- This page `/comparing-text-editors/` was built on 2026-09-21T22:40:46.046Z -->
</body>
</html>
congrats-on-the-autism-adhd/index.html
+40 -36
View File
@@ -1900,8 +1900,26 @@ switch (currentThemeValue) {
<ol id="postlist">
<li class="post">
<a class="postlink" href="/trans-wrongs-skull/">
<h2 data-ha-exclude="">trans wrongs skull </h2>
<a class="postlink" href="/greeting-loons/">
<h2 data-ha-exclude="">greeting loons </h2>
<ul class="postlist-tags">
<li>card</li>
<li>print</li>
<li>highlight</li>
</ul>
<img src="/img/greeting-loons.jpg" alt="A pile of hand-printed A2 size greeting cards. A loon rearing up with outstretched wings spans the front and back of the cards." loading="lazy" decoding="async" width="1000" height="750">
</a>
</li>
<li class="post">
<a class="postlink" href="/happy-bihrtday/">
<h2 data-ha-exclude="">happy biHRTday </h2>
<ul class="postlist-tags">
@@ -1909,46 +1927,32 @@ switch (currentThemeValue) {
<li>card</li>
<li>gender</li>
</ul>
<img src="/img/happy-bihrtday-card-print.jpg" alt="A card and print in the same design - a bouncy, cheery font reading &#39;happy biHRTday&#39;" loading="lazy" decoding="async" width="1000" height="750">
</a>
</li>
<li class="post">
<a class="postlink" href="/girldick/">
<h2 data-ha-exclude="">girldick (mature)</h2>
<ul class="postlist-tags">
<li>print</li>
<li>sticker</li>
<li>shirt</li>
<li>pin</li>
<li>gender</li>
</ul>
<img src="/img/trans-wrongs-print.jpg" alt="A smiling skull with devil horns and a little spiked tail, and a speech bubble reading &#39;trans wrongs!&#39;" loading="lazy" decoding="async" width="1000" height="750">
</a>
</li>
<li class="post">
<a class="postlink" href="/chanterelle/">
<h2 data-ha-exclude="">chanterelle </h2>
<ul class="postlist-tags">
<li>print</li>
<li>card</li>
</ul>
<img src="/img/chanterelle-print.jpg" alt="A print of two chanterelle mushrooms inked in a dark-to-light yellow gradient." loading="lazy" decoding="async" width="1000" height="1333">
</a>
</li>
<li class="post">
<a class="postlink" href="/junco/">
<h2 data-ha-exclude="">junco </h2>
<ul class="postlist-tags">
<li>print</li>
<li>card</li>
</ul>
<img src="/img/junco-print.jpg" alt="A print of a junco mid-takeoff from a branch. Eir head is inked in black, body in gray, and the branch in sepia." loading="lazy" decoding="async" width="1000" height="1333">
<img src="/img/girldick-shirt.jpg" alt="A butch cooking and wearing a cropped tee with blue cap sleeves that reads girldick in blue G.I.Joe font." class="blur" loading="lazy" decoding="async" width="1000" height="750">
</a>
</li>
@@ -2005,6 +2009,6 @@ switch (currentThemeValue) {
</footer>
<!-- This page `/congrats-on-the-autism-adhd/` was built on 2026-09-21T20:55:47.771Z -->
<!-- This page `/congrats-on-the-autism-adhd/` was built on 2026-09-21T22:40:45.998Z -->
</body>
</html>
congrats-on-the-gay/index.html
+23 -25
View File
@@ -1906,47 +1906,45 @@ switch (currentThemeValue) {
<ol id="postlist">
<li class="post">
<a class="postlink" href="/squarsh/">
<h2 data-ha-exclude="">squarsh </h2>
<a class="postlink" href="/chanterelle/">
<h2 data-ha-exclude="">chanterelle </h2>
<ul class="postlist-tags">
<li>print</li>
<li>card</li>
</ul>
<img src="/img/chanterelle-print.jpg" alt="A print of two chanterelle mushrooms inked in a dark-to-light yellow gradient." loading="lazy" decoding="async" width="1000" height="1333">
</a>
</li>
<li class="post">
<a class="postlink" href="/loon/">
<h2 data-ha-exclude="">loon </h2>
<ul class="postlist-tags">
<li>print</li>
</ul>
<img src="/img/squarsh-prints.jpg" alt="Two identical prints of a delicata squash. The body of the squash is cornsilk (muted yellow), the stem and stripes in mint green, and the shadows in lilac." loading="lazy" decoding="async" width="1000" height="1000">
<img src="/img/loon-print.jpg" alt="A print of a loon rearing up with wings spread" loading="lazy" decoding="async" width="1000" height="1333">
</a>
</li>
<li class="post">
<a class="postlink" href="/gender-in-data-models/">
<h2 data-ha-exclude="">gender in data models </h2>
<ul class="postlist-tags">
<li>gender</li>
<li>software</li>
<li>highlight</li>
</ul>
<img src="/img/peony.jpg" alt="Image unrelated to post. A light pink peony in full bloom, close up." loading="lazy" decoding="async" width="1000" height="666">
</a>
</li>
<li class="post">
<a class="postlink" href="/block-printing-transfer-method/">
<h2 data-ha-exclude="">block printing transfer method </h2>
<a class="postlink" href="/printmaking-paper-notes/">
<h2 data-ha-exclude="">printmaking paper notes </h2>
<ul class="postlist-tags">
<li>print</li>
</ul>
<img src="/img/transfer-wip.jpg" alt="A pink block of carving material with a printed design of a bird attached to it. The paper has been partially rubbed away (process described in this post) to reveal the inked design on the carving material." loading="lazy" decoding="async" width="1000" height="750">
<img src="/img/killdeer.jpg" alt="Image unrelated to post. A very fluffed up killdeer stands on a rocky beach." loading="lazy" decoding="async" width="1000" height="666">
</a>
</li>
@@ -2003,6 +2001,6 @@ switch (currentThemeValue) {
</footer>
<!-- This page `/congrats-on-the-gay/` was built on 2026-09-21T20:55:47.773Z -->
<!-- This page `/congrats-on-the-gay/` was built on 2026-09-21T22:40:46.005Z -->
</body>
</html>
contact/index.html
+1 -1
View File
@@ -1539,6 +1539,6 @@ switch (currentThemeValue) {
</footer>
<!-- This page `/contact/` was built on 2026-09-21T20:55:47.800Z -->
<!-- This page `/contact/` was built on 2026-09-21T22:40:46.034Z -->
</body>
</html>
coral-reef-handspun/index.html
+10 -12
View File
@@ -1887,45 +1887,43 @@ switch (currentThemeValue) {
<ol id="postlist">
<li class="post">
<a class="postlink" href="/rambouillet-handspun/">
<h2 data-ha-exclude="">rambouillet handspun </h2>
<a class="postlink" href="/spinners-dream-handspun/">
<h2 data-ha-exclude="">spinner&#39;s dream handspun </h2>
<ul class="postlist-tags">
<li>yarn</li>
<li>highlight</li>
</ul>
<img src="/img/rambouillet-handspun.jpg" alt="1 large and 2 small skeins of handspun yarn in a sport or DK weight that has been dyed in light and dark teal, green, and rusty green-gold." loading="lazy" decoding="async" width="1000" height="666">
<img src="/img/spinners-dream-handspun.jpg" alt="a skein of a lightly variegated grey yarn in about a sport or DK weight." loading="lazy" decoding="async" width="1000" height="666">
</a>
</li>
<li class="post">
<a class="postlink" href="/handspun-yarn-in-party-mix-and-orange-gold/">
<h2 data-ha-exclude="">handspun yarn in party mix and orange-gold </h2>
<a class="postlink" href="/spinning-plants/">
<h2 data-ha-exclude="">spinning plants </h2>
<ul class="postlist-tags">
<li>yarn</li>
</ul>
<img src="/img/handspun0.jpg" alt="4 skeins of handspun yarn, two in a somewhat pastel multicolor and two in a blend of orange, gold, and white." loading="lazy" decoding="async" width="1000" height="750">
<img src="/img/plant-handspun.jpg" alt="6 small skeins of handspun yarn, each made from a different plant fiber. from top, we have flax (medium brown, rough); what is probably lotus (golden, shiny and soft); banana (white and semi shiny); hemp (light brown, rough); tencel (white and very shiny); ramie (a particularly small skein, white and semi shiny)" loading="lazy" decoding="async" width="1000" height="874">
</a>
</li>
<li class="post">
<a class="postlink" href="/icelandic-lamb-handspun/">
<h2 data-ha-exclude="">icelandic lamb handspun </h2>
<a class="postlink" href="/hand-dyed-gold-handspun/">
<h2 data-ha-exclude="">hand-dyed gold handspun </h2>
<ul class="postlist-tags">
<li>yarn</li>
</ul>
<img src="/img/icelandic-lamb.jpg" alt="a skein of black handspun yarn" loading="lazy" decoding="async" width="1000" height="666">
<img src="/img/gold-handspun.jpg" alt="3 skeins, one small and two large, of a rich golden-orange handspun with light tonal effects, in about a DK weight" loading="lazy" decoding="async" width="1000" height="666">
</a>
</li>
@@ -1982,6 +1980,6 @@ switch (currentThemeValue) {
</footer>
<!-- This page `/coral-reef-handspun/` was built on 2026-09-21T20:55:47.798Z -->
<!-- This page `/coral-reef-handspun/` was built on 2026-09-21T22:40:46.030Z -->
</body>
</html>
core-css/index.html
+53 -46
View File
@@ -93,40 +93,43 @@
top: -1.25rem;
}
/* my baby my child my `tree` list style */
#toc ol,
#toc li {
margin-block: 0;
list-style: none;
/* `tree` style toc */
#toc nav > ol {
margin-left: 1rem;
}
#toc ol {
margin-left: 0;
margin: 0;
}
#toc li {
border-left: .095rem solid var(--color-pink);
margin-left: 1.5rem;
line-height: 1.15;
text-indent: 1.22rem hanging;
position: relative;
padding-inline-start: 1em;
list-style: none;
margin-block: 0;
margin-left: .35rem;
}
#toc li::before,
#toc li::after {
display: block;
position: absolute;
box-sizing: border-box;
inset-block: 0 auto;
inset-inline: 0 auto;
inline-size: .75em;
border-inline-start: .1rem solid var(--color-pink);
}
#toc li::before {
content: '├─' / "";
color: var(--color-pink);
position: relative;
left: -.34rem;
block-size: .5lh;
border-block-end: .1rem solid var(--color-pink);
content: "";
}
#toc li:last-child {
border-left-color: transparent;
}
#toc li:last-child::before {
/* Technically, we could use this content for all of them, but doing the full
bar for the non-last-childs keeps the border a *smidge* more consistent for
different levels of magnification */
content: '└─' / "";
#toc li:not(:last-child)::after {
block-size: 100%;
content: "";
}
/* underlines are unnecessary in this context */
@@ -2373,45 +2376,49 @@ footer a[aria-current="page"]::after</span> <span class="token punctuation">{</s
<ol id="postlist">
<li class="post">
<a class="postlink" href="/brookes-notebook/">
<h2 data-ha-exclude="">brooke&#39;s notebook </h2>
<a class="postlink" href="/my-favorite-git-flag/">
<h2 data-ha-exclude="">my favorite git flag </h2>
<ul class="postlist-tags">
<li>book</li>
<li>software</li>
</ul>
<img src="/img/shelf-mushrooms.jpg" alt="Picture unrelated to post. Creamy beige shelf mushrooms on a mossy tree trunk." loading="lazy" decoding="async" width="1000" height="666">
</a>
</li>
<li class="post">
<a class="postlink" href="/kestrel-zine/">
<h2 data-ha-exclude="">kestrel zine </h2>
<ul class="postlist-tags">
<li>print</li>
<li>zine</li>
<li>highlight</li>
</ul>
<img src="/img/brooke-notebook.jpg" alt="A six panel collage showing the covers, endpapers, and some of the pages of a notebook." loading="lazy" decoding="async" width="1000" height="1500">
<img src="/img/kestrel-zine.jpg" alt="A 5 photo collage showing the front and back cover as well as 3 full spreads of a folded zine about Kestrel, my dog, who is a 65lb Malinois with a goofy smile and floppy ears. it is printed in two layers of color, blue and orange, and each image depicts Kestrel in various posts... alert and watchful, resting, looking mopey, wearing a sweatshirt." loading="lazy" decoding="async" width="1000" height="1000">
</a>
</li>
<li class="post">
<a class="postlink" href="/backend-accessibility/">
<h2 data-ha-exclude="">backend accessibility </h2>
<a class="postlink" href="/rambouillet-handspun/">
<h2 data-ha-exclude="">rambouillet handspun </h2>
<ul class="postlist-tags">
<li>software</li>
<li>yarn</li>
<li>highlight</li>
</ul>
<img src="/img/camelCase-print.jpg" alt="A carved stamp next to its print. The print reads &#39;#camelCase&#39; in a slightly formal-looking italic font." loading="lazy" decoding="async" width="1000" height="750">
</a>
</li>
<li class="post">
<a class="postlink" href="/comparing-text-editors/">
<h2 data-ha-exclude="">comparing text editors </h2>
<ul class="postlist-tags">
<li>software</li>
</ul>
<img src="/img/horsetail.jpg" alt="Image unrelated to post. Close up on a horsetail plant&#39;s stem, with many small needle-like leaves emerging from all sides of the circular stem at each segmented joint." loading="lazy" decoding="async" width="1000" height="666">
<img src="/img/rambouillet-handspun.jpg" alt="1 large and 2 small skeins of handspun yarn in a sport or DK weight that has been dyed in light and dark teal, green, and rusty green-gold." loading="lazy" decoding="async" width="1000" height="666">
</a>
</li>
@@ -2468,6 +2475,6 @@ footer a[aria-current="page"]::after</span> <span class="token punctuation">{</s
</footer>
<!-- This page `/core-css/` was built on 2026-09-21T20:55:47.817Z -->
<!-- This page `/core-css/` was built on 2026-09-21T22:40:46.046Z -->
</body>
</html>
crow/index.html
+23 -23
View File
@@ -1886,22 +1886,8 @@ switch (currentThemeValue) {
<ol id="postlist">
<li class="post">
<a class="postlink" href="/tiny-mushrooms/">
<h2 data-ha-exclude="">tiny mushrooms </h2>
<ul class="postlist-tags">
<li>print</li>
</ul>
<img src="/img/pixels-mushrooms.jpg" alt="3 tiny mushroom stamps next to their impressions. They are all about 1 inch square. There is a chanterelle in yellow, a russula in pink, and witch&#39;s hat mycena in indigo." loading="lazy" decoding="async" width="1000" height="750">
</a>
</li>
<li class="post">
<a class="postlink" href="/lupine/">
<h2 data-ha-exclude="">lupine </h2>
<a class="postlink" href="/chanterelle/">
<h2 data-ha-exclude="">chanterelle </h2>
<ul class="postlist-tags">
@@ -1909,17 +1895,31 @@ switch (currentThemeValue) {
<li>card</li>
<li>shirt</li>
</ul>
<img src="/img/lupine-prints.jpg" alt="6 versions of a print of lupine flowers with the leaves inked in light green and the blossoms inked in a variety of blues, purples, and pinks." loading="lazy" decoding="async" width="1000" height="750">
<img src="/img/chanterelle-print.jpg" alt="A print of two chanterelle mushrooms inked in a dark-to-light yellow gradient." loading="lazy" decoding="async" width="1000" height="1333">
</a>
</li>
<li class="post">
<a class="postlink" href="/trans-wrongs-skull/">
<h2 data-ha-exclude="">trans wrongs skull </h2>
<a class="postlink" href="/junco/">
<h2 data-ha-exclude="">junco </h2>
<ul class="postlist-tags">
<li>print</li>
<li>card</li>
</ul>
<img src="/img/junco-print.jpg" alt="A print of a junco mid-takeoff from a branch. Eir head is inked in black, body in gray, and the branch in sepia." loading="lazy" decoding="async" width="1000" height="1333">
</a>
</li>
<li class="post">
<a class="postlink" href="/trans-rights-skull/">
<h2 data-ha-exclude="">trans rights skull </h2>
<ul class="postlist-tags">
@@ -1934,7 +1934,7 @@ switch (currentThemeValue) {
<li>gender</li>
</ul>
<img src="/img/trans-wrongs-print.jpg" alt="A smiling skull with devil horns and a little spiked tail, and a speech bubble reading &#39;trans wrongs!&#39;" loading="lazy" decoding="async" width="1000" height="750">
<img src="/img/trans-rights-print.jpg" alt="A print in mostly black ink of a smiling skull with a speech bubble. In pink and blue, the speech bubble reads &#39;trans rights!&#39;" loading="lazy" decoding="async" width="1000" height="750">
</a>
</li>
@@ -1991,6 +1991,6 @@ switch (currentThemeValue) {
</footer>
<!-- This page `/crow/` was built on 2026-09-21T20:55:47.798Z -->
<!-- This page `/crow/` was built on 2026-09-21T22:40:46.031Z -->
</body>
</html>
designing-a-bag/index.html
+23 -21
View File
@@ -1903,43 +1903,45 @@ switch (currentThemeValue) {
<ol id="postlist">
<li class="post">
<a class="postlink" href="/nine-pocket-bifold/">
<h2 data-ha-exclude="">nine pocket bifold </h2>
<a class="postlink" href="/proud-dad-wallet/">
<h2 data-ha-exclude="">proud dad wallet </h2>
<ul class="postlist-tags">
<li>leather</li>
<li>gender</li>
</ul>
<img src="/img/proud-dad-wallet.jpg" alt="A brown leather wallet with a subtle trans flag stitching across the top." loading="lazy" decoding="async" width="1000" height="750">
</a>
</li>
<li class="post">
<a class="postlink" href="/x-acto-knife-sheath/">
<h2 data-ha-exclude="">x-acto knife sheath </h2>
<ul class="postlist-tags">
<li>leather</li>
</ul>
<img src="/img/nine-pocket-bifold.jpg" alt="A hand stitched full grain leather bifold wallet in dark plum leather. It has a main bill pocket and a symmetrical interior with a hidden pocket and 3 card pockets on each side." loading="lazy" decoding="async" width="1000" height="750">
<img src="/img/knife-sheaths.jpg" alt="Several blades with leather sheaths, and a few extra sheaths. There&#39;s a #2 blade with an orange sheath with yellow stitching, a #11 blade with a blue sheath with light grey stitching, and a skiving knife with a plum sheath and pink stitching." loading="lazy" decoding="async" width="1000" height="750">
</a>
</li>
<li class="post">
<a class="postlink" href="/brookes-cuff-bracelets/">
<h2 data-ha-exclude="">brooke&#39;s cuff bracelets </h2>
<a class="postlink" href="/soras-collar/">
<h2 data-ha-exclude="">sora&#39;s collar </h2>
<ul class="postlist-tags">
<li>leather</li>
</ul>
<img src="/img/brooke-cuffs.jpg" alt="Olive green leather cuffs with silver spikes and a shearling lining." loading="lazy" decoding="async" width="900" height="1200">
</a>
</li>
<li class="post">
<a class="postlink" href="/accessible-image-modals/">
<h2 data-ha-exclude="">accessible image modals </h2>
<ul class="postlist-tags">
<li>software</li>
</ul>
<img src="/img/snacking-seagull.jpg" alt="Image unrelated to post. A seagull floating in the water with a starfish hanging out of eir mouth." loading="lazy" decoding="async" width="1000" height="666">
<img src="/img/sora-collar.jpg" alt="A collage showing a red and black leather dog collar tooled with roses and the name Sora. It&#39;s fully stitched with dark red stitching and has brass hardware." loading="lazy" decoding="async" width="1000" height="1000">
</a>
</li>
@@ -1996,6 +1998,6 @@ switch (currentThemeValue) {
</footer>
<!-- This page `/designing-a-bag/` was built on 2026-09-21T20:55:47.797Z -->
<!-- This page `/designing-a-bag/` was built on 2026-09-21T22:40:46.029Z -->
</body>
</html>
domain-and-site-setup/index.html
+59 -52
View File
@@ -93,40 +93,43 @@
top: -1.25rem;
}
/* my baby my child my `tree` list style */
#toc ol,
#toc li {
margin-block: 0;
list-style: none;
/* `tree` style toc */
#toc nav > ol {
margin-left: 1rem;
}
#toc ol {
margin-left: 0;
margin: 0;
}
#toc li {
border-left: .095rem solid var(--color-pink);
margin-left: 1.5rem;
line-height: 1.15;
text-indent: 1.22rem hanging;
position: relative;
padding-inline-start: 1em;
list-style: none;
margin-block: 0;
margin-left: .35rem;
}
#toc li::before,
#toc li::after {
display: block;
position: absolute;
box-sizing: border-box;
inset-block: 0 auto;
inset-inline: 0 auto;
inline-size: .75em;
border-inline-start: .1rem solid var(--color-pink);
}
#toc li::before {
content: '├─' / "";
color: var(--color-pink);
position: relative;
left: -.34rem;
block-size: .5lh;
border-block-end: .1rem solid var(--color-pink);
content: "";
}
#toc li:last-child {
border-left-color: transparent;
}
#toc li:last-child::before {
/* Technically, we could use this content for all of them, but doing the full
bar for the non-last-childs keeps the border a *smidge* more consistent for
different levels of magnification */
content: '└─' / "";
#toc li:not(:last-child)::after {
block-size: 100%;
content: "";
}
/* underlines are unnecessary in this context */
@@ -2094,34 +2097,6 @@ switch (currentThemeValue) {
<h2 data-ha-exclude="">related posts</h2>
<ol id="postlist">
<li class="post">
<a class="postlink" href="/accessible-image-modals/">
<h2 data-ha-exclude="">accessible image modals </h2>
<ul class="postlist-tags">
<li>software</li>
</ul>
<img src="/img/snacking-seagull.jpg" alt="Image unrelated to post. A seagull floating in the water with a starfish hanging out of eir mouth." loading="lazy" decoding="async" width="1000" height="666">
</a>
</li>
<li class="post">
<a class="postlink" href="/my-favorite-git-flag/">
<h2 data-ha-exclude="">my favorite git flag </h2>
<ul class="postlist-tags">
<li>software</li>
</ul>
<img src="/img/shelf-mushrooms.jpg" alt="Picture unrelated to post. Creamy beige shelf mushrooms on a mossy tree trunk." loading="lazy" decoding="async" width="1000" height="666">
</a>
</li>
<li class="post">
<a class="postlink" href="/visual-site-builders-and-accessibility/">
<h2 data-ha-exclude="">visual site builders and accessibility </h2>
@@ -2136,6 +2111,38 @@ switch (currentThemeValue) {
</a>
</li>
<li class="post">
<a class="postlink" href="/redirections/">
<h2 data-ha-exclude="">redirections </h2>
<ul class="postlist-tags">
<li>software</li>
</ul>
<img src="/img/angle-brackets-uwu.jpg" alt="Ascii art of an emoticon with pinched eyes and a small mouth made with two angle brackets." loading="lazy" decoding="async" width="1000" height="316">
</a>
</li>
<li class="post">
<a class="postlink" href="/gender-in-data-models/">
<h2 data-ha-exclude="">gender in data models </h2>
<ul class="postlist-tags">
<li>gender</li>
<li>software</li>
<li>highlight</li>
</ul>
<img src="/img/peony.jpg" alt="Image unrelated to post. A light pink peony in full bloom, close up." loading="lazy" decoding="async" width="1000" height="666">
</a>
</li>
</ol>
</section>
@@ -2188,6 +2195,6 @@ switch (currentThemeValue) {
</footer>
<!-- This page `/domain-and-site-setup/` was built on 2026-09-21T20:55:47.816Z -->
<!-- This page `/domain-and-site-setup/` was built on 2026-09-21T22:40:46.045Z -->
</body>
</html>
double-bill-pocket-bifold/index.html
+10 -12
View File
@@ -1887,45 +1887,43 @@ switch (currentThemeValue) {
<ol id="postlist">
<li class="post">
<a class="postlink" href="/patchwork-wallet/">
<h2 data-ha-exclude="">patchwork wallet </h2>
<a class="postlink" href="/leather-lighter-case/">
<h2 data-ha-exclude="">leather lighter case </h2>
<ul class="postlist-tags">
<li>leather</li>
<li>highlight</li>
</ul>
<img src="/img/patchwork-wallet.jpg" alt="A collage showing a wallet in a patchwork style, with different colors of leather all stitched together to make up the exterior and the top interior pockets. Other pockets inside are dyed various colors." loading="lazy" decoding="async" width="1000" height="1000">
<img src="/img/leather-lighter-case.jpg" alt="A bic lighter wrapped in leather and hand-stitched up one side." loading="lazy" decoding="async" width="1000" height="750">
</a>
</li>
<li class="post">
<a class="postlink" href="/soras-collar/">
<h2 data-ha-exclude="">sora&#39;s collar </h2>
<a class="postlink" href="/makers-mark-keychain/">
<h2 data-ha-exclude="">maker&#39;s mark keychain </h2>
<ul class="postlist-tags">
<li>leather</li>
</ul>
<img src="/img/sora-collar.jpg" alt="A collage showing a red and black leather dog collar tooled with roses and the name Sora. It&#39;s fully stitched with dark red stitching and has brass hardware." loading="lazy" decoding="async" width="1000" height="1000">
<img src="/img/makers-mark-keychain.jpg" alt="A keychain on an iridescent rainbow split ring. It is dark brown/grey leather and has LEE CAT ART stamped into it." loading="lazy" decoding="async" width="1000" height="1333">
</a>
</li>
<li class="post">
<a class="postlink" href="/foldy-wallet-with-thumb-slide/">
<h2 data-ha-exclude="">foldy wallet with thumb slide </h2>
<a class="postlink" href="/mouse-coin-purse/">
<h2 data-ha-exclude="">mouse coin purse </h2>
<ul class="postlist-tags">
<li>leather</li>
</ul>
<img src="/img/foldy-thumb-slide.jpg" alt="A card wallet with one main pocket and one quick access slot with a thumb slide. The cover of the main pocket curves around the thumb slide." loading="lazy" decoding="async" width="1000" height="1000">
<img src="/img/mouse-purse.jpg" alt="2 image collage. Both images show different sides of a small black leather mouse-shaped coin purse. There is a rainbow zipper that travels along the &#39;spine&#39; of the mouse, and the zipper pull becomes the tail." loading="lazy" decoding="async" width="1000" height="1777">
</a>
</li>
@@ -1982,6 +1980,6 @@ switch (currentThemeValue) {
</footer>
<!-- This page `/double-bill-pocket-bifold/` was built on 2026-09-21T20:55:47.790Z -->
<!-- This page `/double-bill-pocket-bifold/` was built on 2026-09-21T22:40:46.024Z -->
</body>
</html>
dragon-mask/index.html
+25 -27
View File
@@ -1892,49 +1892,47 @@ switch (currentThemeValue) {
<ol id="postlist">
<li class="post">
<a class="postlink" href="/nine-pocket-bifold/">
<h2 data-ha-exclude="">nine pocket bifold </h2>
<a class="postlink" href="/patchwork-wallet/">
<h2 data-ha-exclude="">patchwork wallet </h2>
<ul class="postlist-tags">
<li>leather</li>
<li>highlight</li>
</ul>
<img src="/img/patchwork-wallet.jpg" alt="A collage showing a wallet in a patchwork style, with different colors of leather all stitched together to make up the exterior and the top interior pockets. Other pockets inside are dyed various colors." loading="lazy" decoding="async" width="1000" height="1000">
</a>
</li>
<li class="post">
<a class="postlink" href="/brookes-collar/">
<h2 data-ha-exclude="">brooke&#39;s collar </h2>
<ul class="postlist-tags">
<li>leather</li>
</ul>
<img src="/img/nine-pocket-bifold.jpg" alt="A hand stitched full grain leather bifold wallet in dark plum leather. It has a main bill pocket and a symmetrical interior with a hidden pocket and 3 card pockets on each side." loading="lazy" decoding="async" width="1000" height="750">
<img src="/img/lined-shearling-collar.jpg" alt="A green leather collar lined with brown/grey shearling and fitted with two sizes of silver-toned spikes." loading="lazy" decoding="async" width="1000" height="750">
</a>
</li>
<li class="post">
<a class="postlink" href="/greeting-loons/">
<h2 data-ha-exclude="">greeting loons </h2>
<a class="postlink" href="/designing-a-bag/">
<h2 data-ha-exclude="">designing a bag </h2>
<ul class="postlist-tags">
<li>card</li>
<li>leather</li>
<li>print</li>
<li>highlight</li>
<li>software</li>
</ul>
<img src="/img/greeting-loons.jpg" alt="A pile of hand-printed A2 size greeting cards. A loon rearing up with outstretched wings spans the front and back of the cards." loading="lazy" decoding="async" width="1000" height="750">
</a>
</li>
<li class="post">
<a class="postlink" href="/brookes-notebook/">
<h2 data-ha-exclude="">brooke&#39;s notebook </h2>
<ul class="postlist-tags">
<li>book</li>
<li>highlight</li>
</ul>
<img src="/img/brooke-notebook.jpg" alt="A six panel collage showing the covers, endpapers, and some of the pages of a notebook." loading="lazy" decoding="async" width="1000" height="1500">
<img src="/img/shoelace-bag.jpg" alt="a 3-image collage showcasing a leather crossbody bag. the leather body is brown and fairly simple. up the narrow sides, rope is laced through grommets in a style resembling a shoe lacing. the rope forms the handle and loops seamlessly through the other side of the bag, joining in one point in a figure-8 follow-through knot. At the bottom corners, there are small diagonal lines of stitching to give the bag a small lip around the base and ensure small objects don&#39;t slide out." loading="lazy" decoding="async" width="1000" height="1777">
</a>
</li>
@@ -1991,6 +1989,6 @@ switch (currentThemeValue) {
</footer>
<!-- This page `/dragon-mask/` was built on 2026-09-21T20:55:47.797Z -->
<!-- This page `/dragon-mask/` was built on 2026-09-21T22:40:46.029Z -->
</body>
</html>
dyeing-fiber/index.html
+7 -7
View File
@@ -1887,15 +1887,15 @@ switch (currentThemeValue) {
<ol id="postlist">
<li class="post">
<a class="postlink" href="/icelandic-lamb-handspun/">
<h2 data-ha-exclude="">icelandic lamb handspun </h2>
<a class="postlink" href="/spinners-dream-handspun/">
<h2 data-ha-exclude="">spinner&#39;s dream handspun </h2>
<ul class="postlist-tags">
<li>yarn</li>
</ul>
<img src="/img/icelandic-lamb.jpg" alt="a skein of black handspun yarn" loading="lazy" decoding="async" width="1000" height="666">
<img src="/img/spinners-dream-handspun.jpg" alt="a skein of a lightly variegated grey yarn in about a sport or DK weight." loading="lazy" decoding="async" width="1000" height="666">
</a>
</li>
@@ -1915,15 +1915,15 @@ switch (currentThemeValue) {
</li>
<li class="post">
<a class="postlink" href="/petrichor-handspun/">
<h2 data-ha-exclude="">petrichor handspun </h2>
<a class="postlink" href="/icelandic-lamb-handspun/">
<h2 data-ha-exclude="">icelandic lamb handspun </h2>
<ul class="postlist-tags">
<li>yarn</li>
</ul>
<img src="/img/petrichor-handspun.jpg" alt="3 skeins of handspun yarn, 2 large and 1 small. the large ones are a rich earth-tone blend of reds, pinks, browns, and hints of green and gold. the smaller skein is similar but with a decidedly greener hue" loading="lazy" decoding="async" width="1000" height="750">
<img src="/img/icelandic-lamb.jpg" alt="a skein of black handspun yarn" loading="lazy" decoding="async" width="1000" height="666">
</a>
</li>
@@ -1980,6 +1980,6 @@ switch (currentThemeValue) {
</footer>
<!-- This page `/dyeing-fiber/` was built on 2026-09-21T20:55:47.798Z -->
<!-- This page `/dyeing-fiber/` was built on 2026-09-21T22:40:46.031Z -->
</body>
</html>
ecommerce-options/index.html
+1 -1
View File
@@ -1962,6 +1962,6 @@ switch (currentThemeValue) {
</footer>
<!-- This page `/ecommerce-options/` was built on 2026-09-21T20:55:47.790Z -->
<!-- This page `/ecommerce-options/` was built on 2026-09-21T22:40:46.023Z -->
</body>
</html>
eight-pocket-bifold/index.html
+11 -13
View File
@@ -1887,47 +1887,45 @@ switch (currentThemeValue) {
<ol id="postlist">
<li class="post">
<a class="postlink" href="/black-and-red-journal/">
<h2 data-ha-exclude="">black and red journal </h2>
<a class="postlink" href="/mom-bag/">
<h2 data-ha-exclude="">mom bag </h2>
<ul class="postlist-tags">
<li>book</li>
<li>leather</li>
</ul>
<img src="/img/black-red-journal.jpg" alt="3 image collage showing a leather-bound journal. The cover is black, with long red vertical stitches along the spine and a red leather strap for a closure. On the back in one lower corner is stamped LEE CAT ART" loading="lazy" decoding="async" width="1000" height="1000">
<img src="/img/mom-bag.jpg" alt="A leather bag sized for a large smartphone with a main pocket and a wraparound smaller pocket. It has a magnetic clasp." loading="lazy" decoding="async" width="900" height="1200">
</a>
</li>
<li class="post">
<a class="postlink" href="/leather-lighter-case/">
<h2 data-ha-exclude="">leather lighter case </h2>
<a class="postlink" href="/vix-collar/">
<h2 data-ha-exclude="">vix collar </h2>
<ul class="postlist-tags">
<li>leather</li>
</ul>
<img src="/img/leather-lighter-case.jpg" alt="A bic lighter wrapped in leather and hand-stitched up one side." loading="lazy" decoding="async" width="1000" height="750">
<img src="/img/vix-collar.jpg" alt="A collar rests on a leather-wrapped lighter. It is lined with shearling and built of two other layers of leather - a wider mustard yellow layer and a thinner teal layer over that. the teal layer holds a heart shaped o-ring in place." loading="lazy" decoding="async" width="1000" height="750">
</a>
</li>
<li class="post">
<a class="postlink" href="/fishhook-pride-keychains/">
<h2 data-ha-exclude="">fishhook pride keychains </h2>
<a class="postlink" href="/designing-a-bag/">
<h2 data-ha-exclude="">designing a bag </h2>
<ul class="postlist-tags">
<li>leather</li>
<li>gender</li>
<li>software</li>
</ul>
<img src="/img/fishhook-keychain-nonbinary.jpg" alt="a keychain with an iridescent fishhook style attachment linked via leather to an iridescent keyring. the leather is stitched with nonbinary flag colors." loading="lazy" decoding="async" width="1000" height="750">
<img src="/img/shoelace-bag.jpg" alt="a 3-image collage showcasing a leather crossbody bag. the leather body is brown and fairly simple. up the narrow sides, rope is laced through grommets in a style resembling a shoe lacing. the rope forms the handle and loops seamlessly through the other side of the bag, joining in one point in a figure-8 follow-through knot. At the bottom corners, there are small diagonal lines of stitching to give the bag a small lip around the base and ensure small objects don&#39;t slide out." loading="lazy" decoding="async" width="1000" height="1777">
</a>
</li>
@@ -1984,6 +1982,6 @@ switch (currentThemeValue) {
</footer>
<!-- This page `/eight-pocket-bifold/` was built on 2026-09-21T20:55:47.790Z -->
<!-- This page `/eight-pocket-bifold/` was built on 2026-09-21T22:40:46.024Z -->
</body>
</html>
eleventy-lessons/index.html
+38 -33
View File
@@ -93,40 +93,43 @@
top: -1.25rem;
}
/* my baby my child my `tree` list style */
#toc ol,
#toc li {
margin-block: 0;
list-style: none;
/* `tree` style toc */
#toc nav > ol {
margin-left: 1rem;
}
#toc ol {
margin-left: 0;
margin: 0;
}
#toc li {
border-left: .095rem solid var(--color-pink);
margin-left: 1.5rem;
line-height: 1.15;
text-indent: 1.22rem hanging;
position: relative;
padding-inline-start: 1em;
list-style: none;
margin-block: 0;
margin-left: .35rem;
}
#toc li::before,
#toc li::after {
display: block;
position: absolute;
box-sizing: border-box;
inset-block: 0 auto;
inset-inline: 0 auto;
inline-size: .75em;
border-inline-start: .1rem solid var(--color-pink);
}
#toc li::before {
content: '├─' / "";
color: var(--color-pink);
position: relative;
left: -.34rem;
block-size: .5lh;
border-block-end: .1rem solid var(--color-pink);
content: "";
}
#toc li:last-child {
border-left-color: transparent;
}
#toc li:last-child::before {
/* Technically, we could use this content for all of them, but doing the full
bar for the non-last-childs keeps the border a *smidge* more consistent for
different levels of magnification */
content: '└─' / "";
#toc li:not(:last-child)::after {
block-size: 100%;
content: "";
}
/* underlines are unnecessary in this context */
@@ -2380,43 +2383,45 @@ eleventyExcludeFromCollections: true
<ol id="postlist">
<li class="post">
<a class="postlink" href="/handedness-toggle/">
<h2 data-ha-exclude="">handedness toggle </h2>
<a class="postlink" href="/framer-accessibility/">
<h2 data-ha-exclude="">framer accessibility </h2>
<ul class="postlist-tags">
<li>software</li>
</ul>
<img src="/img/handedness-toggle-0.png" alt="A screenshot of the rescue trans rescue navbar centered on a button that shows a hand pointing left." loading="lazy" decoding="async" width="1000" height="257">
<img src="/img/feather.jpg" alt="Image unrelated to post. A very frail and wispy feather with variegated white and brown markings on top of pine-needle-covered ground." loading="lazy" decoding="async" width="1000" height="666">
</a>
</li>
<li class="post">
<a class="postlink" href="/moving-images/">
<h2 data-ha-exclude="">moving images </h2>
<a class="postlink" href="/designing-a-bag/">
<h2 data-ha-exclude="">designing a bag </h2>
<ul class="postlist-tags">
<li>leather</li>
<li>software</li>
</ul>
<img src="/img/cormorant.jpg" alt="Image unrelated to post. A cormorant, a type of black waterfowl, poses with wings spread on a buoy in Puget Sound. Off to the left, another bird floats." loading="lazy" decoding="async" width="1000" height="666">
<img src="/img/shoelace-bag.jpg" alt="a 3-image collage showcasing a leather crossbody bag. the leather body is brown and fairly simple. up the narrow sides, rope is laced through grommets in a style resembling a shoe lacing. the rope forms the handle and loops seamlessly through the other side of the bag, joining in one point in a figure-8 follow-through knot. At the bottom corners, there are small diagonal lines of stitching to give the bag a small lip around the base and ensure small objects don&#39;t slide out." loading="lazy" decoding="async" width="1000" height="1777">
</a>
</li>
<li class="post">
<a class="postlink" href="/intro-to-wireframing/">
<h2 data-ha-exclude="">intro to wireframing </h2>
<a class="postlink" href="/backend-accessibility/">
<h2 data-ha-exclude="">backend accessibility </h2>
<ul class="postlist-tags">
<li>software</li>
</ul>
<img src="/img/aggregator-wireframes.jpg" alt="a figma page with 4 major sections titled aggregator, aggregator mobile, aggregator color, and aggregator mobile color. each section has 7 pages in it - all sections pretty clearly have the same 7 pages, with the mobile sections shown on mobile screens and the color sections in a rainbow of pastels rather than grayscale." loading="lazy" decoding="async" width="1000" height="1042">
<img src="/img/camelCase-print.jpg" alt="A carved stamp next to its print. The print reads &#39;#camelCase&#39; in a slightly formal-looking italic font." loading="lazy" decoding="async" width="1000" height="750">
</a>
</li>
@@ -2473,6 +2478,6 @@ eleventyExcludeFromCollections: true
</footer>
<!-- This page `/eleventy-lessons/` was built on 2026-09-21T20:55:47.817Z -->
<!-- This page `/eleventy-lessons/` was built on 2026-09-21T22:40:46.046Z -->
</body>
</html>
euphorbia/index.html
+36 -36
View File
@@ -1887,8 +1887,8 @@ switch (currentThemeValue) {
<ol id="postlist">
<li class="post">
<a class="postlink" href="/trans-rights-skull/">
<h2 data-ha-exclude="">trans rights skull </h2>
<a class="postlink" href="/chanterelle/">
<h2 data-ha-exclude="">chanterelle </h2>
<ul class="postlist-tags">
@@ -1896,44 +1896,44 @@ switch (currentThemeValue) {
<li>card</li>
<li>sticker</li>
</ul>
<img src="/img/chanterelle-print.jpg" alt="A print of two chanterelle mushrooms inked in a dark-to-light yellow gradient." loading="lazy" decoding="async" width="1000" height="1333">
</a>
</li>
<li class="post">
<a class="postlink" href="/swallowtail-on-snowdrops/">
<h2 data-ha-exclude="">swallowtail on snowdrops </h2>
<ul class="postlist-tags">
<li>pin</li>
<li>print</li>
<li>card</li>
<li>shirt</li>
</ul>
<img src="/img/swallowtail-on-snowdrops-print.jpg" alt="A block print of a tiger swallowtail butterfly dangling from Japanese snowdrops, a white drooping flower." loading="lazy" decoding="async" width="1000" height="1332">
</a>
</li>
<li class="post">
<a class="postlink" href="/booby-congrats-on-the-top-surgery/">
<h2 data-ha-exclude="">booby (congrats on the top surgery) </h2>
<ul class="postlist-tags">
<li>print</li>
<li>card</li>
<li>gender</li>
</ul>
<img src="/img/trans-rights-print.jpg" alt="A print in mostly black ink of a smiling skull with a speech bubble. In pink and blue, the speech bubble reads &#39;trans rights!&#39;" loading="lazy" decoding="async" width="1000" height="750">
</a>
</li>
<li class="post">
<a class="postlink" href="/kniphofia/">
<h2 data-ha-exclude="">kniphofia </h2>
<ul class="postlist-tags">
<li>print</li>
</ul>
<img src="/img/kniphofia-print.jpg" alt="A print of a brightly colored flower in 4 layers of color" loading="lazy" decoding="async" width="1000" height="1333">
</a>
</li>
<li class="post">
<a class="postlink" href="/quorbs/">
<h2 data-ha-exclude="">quorbs </h2>
<ul class="postlist-tags">
<li>print</li>
<li>highlight</li>
</ul>
<img src="/img/quorbs-print.jpg" alt="A print in two layers of color showing two rotund quails on a branch. Most of the details are in black ink, then there is a layer with a brown gradient filling in some color on the head and breast." loading="lazy" decoding="async" width="1000" height="750">
<img src="/img/booby-card.jpg" alt="A landscape-oriented white card with a two-color print of a blue-footed booby." loading="lazy" decoding="async" width="1000" height="750">
</a>
</li>
@@ -1990,6 +1990,6 @@ switch (currentThemeValue) {
</footer>
<!-- This page `/euphorbia/` was built on 2026-09-21T20:55:47.795Z -->
<!-- This page `/euphorbia/` was built on 2026-09-21T22:40:46.004Z -->
</body>
</html>
fat-raccoon/index.html
+35 -31
View File
@@ -1903,6 +1903,40 @@ switch (currentThemeValue) {
<h2 data-ha-exclude="">related posts</h2>
<ol id="postlist">
<li class="post">
<a class="postlink" href="/kestrel-zine/">
<h2 data-ha-exclude="">kestrel zine </h2>
<ul class="postlist-tags">
<li>print</li>
<li>zine</li>
<li>highlight</li>
</ul>
<img src="/img/kestrel-zine.jpg" alt="A 5 photo collage showing the front and back cover as well as 3 full spreads of a folded zine about Kestrel, my dog, who is a 65lb Malinois with a goofy smile and floppy ears. it is printed in two layers of color, blue and orange, and each image depicts Kestrel in various posts... alert and watchful, resting, looking mopey, wearing a sweatshirt." loading="lazy" decoding="async" width="1000" height="1000">
</a>
</li>
<li class="post">
<a class="postlink" href="/killdeer/">
<h2 data-ha-exclude="">killdeer </h2>
<ul class="postlist-tags">
<li>print</li>
<li>card</li>
</ul>
<img src="/img/killdeer-print.jpg" alt="A print of a killdeer in black ink." loading="lazy" decoding="async" width="1000" height="1333">
</a>
</li>
<li class="post">
<a class="postlink" href="/seedling/">
<h2 data-ha-exclude="">seedling </h2>
@@ -1919,36 +1953,6 @@ switch (currentThemeValue) {
</a>
</li>
<li class="post">
<a class="postlink" href="/flatfish/">
<h2 data-ha-exclude="">flatfish </h2>
<ul class="postlist-tags">
<li>print</li>
<li>card</li>
</ul>
<img src="/img/flatfish-print.jpg" alt="A print of a simple flatfish design inked in sepia." loading="lazy" decoding="async" width="1000" height="1333">
</a>
</li>
<li class="post">
<a class="postlink" href="/tiny-mushrooms/">
<h2 data-ha-exclude="">tiny mushrooms </h2>
<ul class="postlist-tags">
<li>print</li>
</ul>
<img src="/img/pixels-mushrooms.jpg" alt="3 tiny mushroom stamps next to their impressions. They are all about 1 inch square. There is a chanterelle in yellow, a russula in pink, and witch&#39;s hat mycena in indigo." loading="lazy" decoding="async" width="1000" height="750">
</a>
</li>
</ol>
</section>
@@ -2001,6 +2005,6 @@ switch (currentThemeValue) {
</footer>
<!-- This page `/fat-raccoon/` was built on 2026-09-21T20:55:47.785Z -->
<!-- This page `/fat-raccoon/` was built on 2026-09-21T22:40:46.020Z -->
</body>
</html>
fd-signifier-and-oppositional-sexism/index.html
+25 -27
View File
@@ -1921,48 +1921,46 @@ switch (currentThemeValue) {
<ol id="postlist">
<li class="post">
<a class="postlink" href="/tooled-leather-patches/">
<h2 data-ha-exclude="">tooled leather patches </h2>
<ul class="postlist-tags">
<li>leather</li>
<li>gender</li>
<li>patch</li>
</ul>
<img src="/img/pronoun-patch-scroll.jpg" alt="two tooled leather patches. they have scrolls tooled on them that read various pronoun sets." loading="lazy" decoding="async" width="1000" height="750">
</a>
</li>
<li class="post">
<a class="postlink" href="/boypussy/">
<h2 data-ha-exclude="">boypussy (mature)</h2>
<a class="postlink" href="/bottom-growth/">
<h2 data-ha-exclude="">bottom growth (mature)</h2>
<ul class="postlist-tags">
<li>print</li>
<li>sticker</li>
<li>gender</li>
<li>shirt</li>
</ul>
<img src="/img/bottom-growth-prints.jpg" alt="4 copies of the same print in various color schemes, laid out in a 2x2 grid. The print shows testosterone-driven bottom growth of a clitoris. The color schemes are, clockwise from top right, brown on turquoise, red on cornsilk (muted yellow), violet on magenta, and mint green on lilac." class="blur" loading="lazy" decoding="async" width="1000" height="1000">
</a>
</li>
<li class="post">
<a class="postlink" href="/trans-rights-skull/">
<h2 data-ha-exclude="">trans rights skull </h2>
<ul class="postlist-tags">
<li>print</li>
<li>card</li>
<li>sticker</li>
<li>pin</li>
<li>gender</li>
</ul>
<img src="/img/boypussy-shirt.jpg" alt="A butch holding a chainsaw and wearing a tank top that reads boypussy in pink Barbie font." class="blur" loading="lazy" decoding="async" width="1000" height="1250">
<img src="/img/trans-rights-print.jpg" alt="A print in mostly black ink of a smiling skull with a speech bubble. In pink and blue, the speech bubble reads &#39;trans rights!&#39;" loading="lazy" decoding="async" width="1000" height="750">
</a>
</li>
<li class="post">
<a class="postlink" href="/rope-one/">
<h2 data-ha-exclude="">rope (one) (mature)</h2>
<a class="postlink" href="/hair/">
<h2 data-ha-exclude="">hair </h2>
<ul class="postlist-tags">
@@ -1971,7 +1969,7 @@ switch (currentThemeValue) {
<li>gender</li>
</ul>
<img src="/img/rope-print-1.jpg" alt="A print of a nude trans woman in an asymmetrical rope harness." class="blur" loading="lazy" decoding="async" width="1000" height="1242">
<img src="/img/hair-print.jpg" alt="A print in black ink of belly hair." loading="lazy" decoding="async" width="1000" height="710">
</a>
</li>
@@ -2028,6 +2026,6 @@ switch (currentThemeValue) {
</footer>
<!-- This page `/fd-signifier-and-oppositional-sexism/` was built on 2026-09-21T20:55:47.794Z -->
<!-- This page `/fd-signifier-and-oppositional-sexism/` was built on 2026-09-21T22:40:46.003Z -->
</body>
</html>
fedilearns/index.html
+1 -1
View File
@@ -1921,6 +1921,6 @@ switch (currentThemeValue) {
</footer>
<!-- This page `/fedilearns/` was built on 2026-09-21T20:55:47.798Z -->
<!-- This page `/fedilearns/` was built on 2026-09-21T22:40:46.032Z -->
</body>
</html>
fedizinefest-2025/index.html
+21 -19
View File
@@ -1887,31 +1887,17 @@ switch (currentThemeValue) {
<ol id="postlist">
<li class="post">
<a class="postlink" href="/fedizinefest-2026-2027/">
<h2 data-ha-exclude="">fediZineFest 2026-2027 </h2>
<a class="postlink" href="/on-the-shoulders-of-giants/">
<h2 data-ha-exclude="">on the shoulders of giants </h2>
<ul class="postlist-tags">
<li>zine</li>
</ul>
<img src="/img/fedizinefest.png" alt="the logo of FediZineFest 2026-2027 which is a 4 by 4 grid of blocky letters reading fedi zine fest 26-27, randomly colored with the 26-27 palette." loading="lazy" decoding="async" width="645" height="645">
</a>
</li>
<li class="post">
<a class="postlink" href="/leatherworking-zine/">
<h2 data-ha-exclude="">leatherworking zine </h2>
<ul class="postlist-tags">
<li>zine</li>
<li>leather</li>
<li>knit</li>
</ul>
<img src="/img/leatherworking-zine.jpg" alt="3 copies of the same zine with different colored cardstock covers. The cover reads &#39;Leatherworking Tools&#39; and lists myself as the author. Surrounding the text are many small icons of tools and explanatory diagrams. The text is dark teal and the icons are dark pink." loading="lazy" decoding="async" width="1000" height="750">
<img src="/img/on-the-shoulders.jpg" alt="ok so. five image collage showing the front, 3 inner spreads, and back of a riso-printed zine in green and light blue. it&#39;s called &#39;on the shoulders of giants&#39; and it&#39;s about a knitting technique I learned from Stephen west and how I built on that technique. it talks about joining two adjacent panels without seaming, instead knitting the second panel onto the selvedge of the first. then it uses that technique to approach two panels knit with significantly different weights of yarn" loading="lazy" decoding="async" width="1000" height="1000">
</a>
</li>
@@ -1934,6 +1920,22 @@ switch (currentThemeValue) {
</a>
</li>
<li class="post">
<a class="postlink" href="/gender-as-a-proxy-variable/">
<h2 data-ha-exclude="">gender as a proxy variable </h2>
<ul class="postlist-tags">
<li>gender</li>
<li>zine</li>
</ul>
<img src="/img/gender-zine-cover.png" alt="Part of a scan of the cover of my zine, Gender as a Proxy Variable. It shows the title and a bit of handsewn binding." loading="lazy" decoding="async" width="1000" height="444">
</a>
</li>
</ol>
</section>
@@ -1986,6 +1988,6 @@ switch (currentThemeValue) {
</footer>
<!-- This page `/fedizinefest-2025/` was built on 2026-09-21T20:55:47.795Z -->
<!-- This page `/fedizinefest-2025/` was built on 2026-09-21T22:40:46.004Z -->
</body>
</html>
fedizinefest-2026-2027/index.html
+17 -23
View File
@@ -1866,12 +1866,6 @@ switch (currentThemeValue) {
</li>
<li class="newer">
<a href="/tree-style-table-of-contents/">
tree-style table of contents <i class="fa-solid fa-hand-point-right" aria-hidden="true"></i>
</a>
</li>
</ol>
</nav>
@@ -1886,22 +1880,6 @@ switch (currentThemeValue) {
<h2 data-ha-exclude="">related posts</h2>
<ol id="postlist">
<li class="post">
<a class="postlink" href="/leatherworking-zine/">
<h2 data-ha-exclude="">leatherworking zine </h2>
<ul class="postlist-tags">
<li>zine</li>
<li>leather</li>
</ul>
<img src="/img/leatherworking-zine.jpg" alt="3 copies of the same zine with different colored cardstock covers. The cover reads &#39;Leatherworking Tools&#39; and lists myself as the author. Surrounding the text are many small icons of tools and explanatory diagrams. The text is dark teal and the icons are dark pink." loading="lazy" decoding="async" width="1000" height="750">
</a>
</li>
<li class="post">
<a class="postlink" href="/gender-as-a-proxy-variable/">
<h2 data-ha-exclude="">gender as a proxy variable </h2>
@@ -1918,6 +1896,22 @@ switch (currentThemeValue) {
</a>
</li>
<li class="post">
<a class="postlink" href="/leatherworking-zine/">
<h2 data-ha-exclude="">leatherworking zine </h2>
<ul class="postlist-tags">
<li>zine</li>
<li>leather</li>
</ul>
<img src="/img/leatherworking-zine.jpg" alt="3 copies of the same zine with different colored cardstock covers. The cover reads &#39;Leatherworking Tools&#39; and lists myself as the author. Surrounding the text are many small icons of tools and explanatory diagrams. The text is dark teal and the icons are dark pink." loading="lazy" decoding="async" width="1000" height="750">
</a>
</li>
<li class="post">
<a class="postlink" href="/kestrel-zine/">
<h2 data-ha-exclude="">kestrel zine </h2>
@@ -1988,6 +1982,6 @@ switch (currentThemeValue) {
</footer>
<!-- This page `/fedizinefest-2026-2027/` was built on 2026-09-21T20:55:47.799Z -->
<!-- This page `/fedizinefest-2026-2027/` was built on 2026-09-21T22:40:46.032Z -->
</body>
</html>
feed.xml
+320 -145
View File
@@ -11,151 +11,6 @@
<name>Lee Cattarin</name>
<email>lee.cattarin@gmail.com</email>
</author>
<entry>
<title>tree-style table of contents</title>
<link href="https://leecat.art/tree-style-table-of-contents/" />
<updated>2026-09-21T00:00:00Z</updated>
<id>https://leecat.art/tree-style-table-of-contents/</id>
<content type="html">&lt;p&gt;I have a shiny new Table of Contents (hereafter ToC) section for some of my posts (like this one)! And for fun and profit, it&#39;s styled like the output of &lt;a href=&quot;https://en.wikipedia.org/wiki/Tree_(command)&quot; target=&quot;_blank&quot; rel=&quot;external&quot;&gt;&lt;code&gt;tree&lt;/code&gt;&lt;/a&gt;. I want to lay out the CSS I used for this. Fair warning, there&#39;s some hyper-specific border widths and positioning that &lt;em&gt;probably&lt;/em&gt; should be a &lt;code&gt;calc()&lt;/code&gt; function of some kind.&lt;/p&gt;
&lt;p&gt;I drew inspiration from this &lt;a href=&quot;https://stackoverflow.com/questions/14423671/best-method-for-displaying-a-tree-list-using-css-only-no-images-or-js-example&quot; target=&quot;_blank&quot; rel=&quot;external&quot;&gt;StackOverflow issue regarding tree styling for lists&lt;/a&gt;.&lt;/p&gt;
&lt;h2 id=&quot;tree&quot;&gt;&lt;code&gt;tree&lt;/code&gt;&lt;/h2&gt;
&lt;p&gt;Just for reference, here&#39;s some sample &lt;code&gt;tree&lt;/code&gt; output:&lt;/p&gt;
&lt;pre class=&quot;language-txt&quot;&gt;&lt;code class=&quot;language-txt&quot;&gt;.
├── footer.njk
├── head-content.njk
├── header.njk
├── layouts
│ ├── base.njk
│ ├── page-lists.njk
│ ├── page.njk
│ ├── post.njk
│ ├── post-with-toc.njk
│ └── tag-redirect.njk
├── pagination.njk
├── postlist.njk
└── webring.njk&lt;/code&gt;&lt;/pre&gt;
&lt;p&gt;(You&#39;ll note that there are gaps between the verticals of each line. That&#39;s due to the line-height on the page, but in a standard terminal those vertical lines would be contiguous.)&lt;/p&gt;
&lt;h2 id=&quot;html&quot;&gt;HTML&lt;/h2&gt;
&lt;p&gt;Our ToC uses the following HTML structure:&lt;/p&gt;
&lt;pre class=&quot;language-html&quot;&gt;&lt;code class=&quot;language-html&quot;&gt;&lt;span class=&quot;token tag&quot;&gt;&lt;span class=&quot;token tag&quot;&gt;&lt;span class=&quot;token punctuation&quot;&gt;&amp;lt;&lt;/span&gt;aside&lt;/span&gt; &lt;span class=&quot;token attr-name&quot;&gt;id&lt;/span&gt;&lt;span class=&quot;token attr-value&quot;&gt;&lt;span class=&quot;token punctuation attr-equals&quot;&gt;=&lt;/span&gt;&lt;span class=&quot;token punctuation&quot;&gt;&quot;&lt;/span&gt;toc&lt;span class=&quot;token punctuation&quot;&gt;&quot;&lt;/span&gt;&lt;/span&gt;&lt;span class=&quot;token punctuation&quot;&gt;&gt;&lt;/span&gt;&lt;/span&gt;
&lt;span class=&quot;token tag&quot;&gt;&lt;span class=&quot;token tag&quot;&gt;&lt;span class=&quot;token punctuation&quot;&gt;&amp;lt;&lt;/span&gt;details&lt;/span&gt;&lt;span class=&quot;token punctuation&quot;&gt;&gt;&lt;/span&gt;&lt;/span&gt;
&lt;span class=&quot;token tag&quot;&gt;&lt;span class=&quot;token tag&quot;&gt;&lt;span class=&quot;token punctuation&quot;&gt;&amp;lt;&lt;/span&gt;summary&lt;/span&gt;&lt;span class=&quot;token punctuation&quot;&gt;&gt;&lt;/span&gt;&lt;/span&gt;&lt;span class=&quot;token tag&quot;&gt;&lt;span class=&quot;token tag&quot;&gt;&lt;span class=&quot;token punctuation&quot;&gt;&amp;lt;&lt;/span&gt;h2&lt;/span&gt;&lt;span class=&quot;token punctuation&quot;&gt;&gt;&lt;/span&gt;&lt;/span&gt;table of contents&lt;span class=&quot;token tag&quot;&gt;&lt;span class=&quot;token tag&quot;&gt;&lt;span class=&quot;token punctuation&quot;&gt;&amp;lt;/&lt;/span&gt;h2&lt;/span&gt;&lt;span class=&quot;token punctuation&quot;&gt;&gt;&lt;/span&gt;&lt;/span&gt;&lt;span class=&quot;token tag&quot;&gt;&lt;span class=&quot;token tag&quot;&gt;&lt;span class=&quot;token punctuation&quot;&gt;&amp;lt;/&lt;/span&gt;summary&lt;/span&gt;&lt;span class=&quot;token punctuation&quot;&gt;&gt;&lt;/span&gt;&lt;/span&gt;
&lt;span class=&quot;token tag&quot;&gt;&lt;span class=&quot;token tag&quot;&gt;&lt;span class=&quot;token punctuation&quot;&gt;&amp;lt;&lt;/span&gt;nav&lt;/span&gt;&lt;span class=&quot;token punctuation&quot;&gt;&gt;&lt;/span&gt;&lt;/span&gt;
&lt;span class=&quot;token tag&quot;&gt;&lt;span class=&quot;token tag&quot;&gt;&lt;span class=&quot;token punctuation&quot;&gt;&amp;lt;&lt;/span&gt;ol&lt;/span&gt;&lt;span class=&quot;token punctuation&quot;&gt;&gt;&lt;/span&gt;&lt;/span&gt;
&lt;span class=&quot;token tag&quot;&gt;&lt;span class=&quot;token tag&quot;&gt;&lt;span class=&quot;token punctuation&quot;&gt;&amp;lt;&lt;/span&gt;li&lt;/span&gt;&lt;span class=&quot;token punctuation&quot;&gt;&gt;&lt;/span&gt;&lt;/span&gt;&lt;span class=&quot;token tag&quot;&gt;&lt;span class=&quot;token tag&quot;&gt;&lt;span class=&quot;token punctuation&quot;&gt;&amp;lt;&lt;/span&gt;a&lt;/span&gt;&lt;span class=&quot;token punctuation&quot;&gt;&gt;&lt;/span&gt;&lt;/span&gt;h2 1&lt;span class=&quot;token tag&quot;&gt;&lt;span class=&quot;token tag&quot;&gt;&lt;span class=&quot;token punctuation&quot;&gt;&amp;lt;/&lt;/span&gt;a&lt;/span&gt;&lt;span class=&quot;token punctuation&quot;&gt;&gt;&lt;/span&gt;&lt;/span&gt;&lt;span class=&quot;token tag&quot;&gt;&lt;span class=&quot;token tag&quot;&gt;&lt;span class=&quot;token punctuation&quot;&gt;&amp;lt;/&lt;/span&gt;li&lt;/span&gt;&lt;span class=&quot;token punctuation&quot;&gt;&gt;&lt;/span&gt;&lt;/span&gt;
&lt;span class=&quot;token tag&quot;&gt;&lt;span class=&quot;token tag&quot;&gt;&lt;span class=&quot;token punctuation&quot;&gt;&amp;lt;&lt;/span&gt;li&lt;/span&gt;&lt;span class=&quot;token punctuation&quot;&gt;&gt;&lt;/span&gt;&lt;/span&gt;&lt;span class=&quot;token tag&quot;&gt;&lt;span class=&quot;token tag&quot;&gt;&lt;span class=&quot;token punctuation&quot;&gt;&amp;lt;&lt;/span&gt;a&lt;/span&gt;&lt;span class=&quot;token punctuation&quot;&gt;&gt;&lt;/span&gt;&lt;/span&gt;h2 2&lt;span class=&quot;token tag&quot;&gt;&lt;span class=&quot;token tag&quot;&gt;&lt;span class=&quot;token punctuation&quot;&gt;&amp;lt;/&lt;/span&gt;a&lt;/span&gt;&lt;span class=&quot;token punctuation&quot;&gt;&gt;&lt;/span&gt;&lt;/span&gt;
&lt;span class=&quot;token tag&quot;&gt;&lt;span class=&quot;token tag&quot;&gt;&lt;span class=&quot;token punctuation&quot;&gt;&amp;lt;&lt;/span&gt;ol&lt;/span&gt;&lt;span class=&quot;token punctuation&quot;&gt;&gt;&lt;/span&gt;&lt;/span&gt;
&lt;span class=&quot;token tag&quot;&gt;&lt;span class=&quot;token tag&quot;&gt;&lt;span class=&quot;token punctuation&quot;&gt;&amp;lt;&lt;/span&gt;li&lt;/span&gt;&lt;span class=&quot;token punctuation&quot;&gt;&gt;&lt;/span&gt;&lt;/span&gt;&lt;span class=&quot;token tag&quot;&gt;&lt;span class=&quot;token tag&quot;&gt;&lt;span class=&quot;token punctuation&quot;&gt;&amp;lt;&lt;/span&gt;a&lt;/span&gt;&lt;span class=&quot;token punctuation&quot;&gt;&gt;&lt;/span&gt;&lt;/span&gt;h3 2a&lt;span class=&quot;token tag&quot;&gt;&lt;span class=&quot;token tag&quot;&gt;&lt;span class=&quot;token punctuation&quot;&gt;&amp;lt;/&lt;/span&gt;a&lt;/span&gt;&lt;span class=&quot;token punctuation&quot;&gt;&gt;&lt;/span&gt;&lt;/span&gt;&lt;span class=&quot;token tag&quot;&gt;&lt;span class=&quot;token tag&quot;&gt;&lt;span class=&quot;token punctuation&quot;&gt;&amp;lt;/&lt;/span&gt;li&lt;/span&gt;&lt;span class=&quot;token punctuation&quot;&gt;&gt;&lt;/span&gt;&lt;/span&gt;
&lt;span class=&quot;token tag&quot;&gt;&lt;span class=&quot;token tag&quot;&gt;&lt;span class=&quot;token punctuation&quot;&gt;&amp;lt;&lt;/span&gt;li&lt;/span&gt;&lt;span class=&quot;token punctuation&quot;&gt;&gt;&lt;/span&gt;&lt;/span&gt;&lt;span class=&quot;token tag&quot;&gt;&lt;span class=&quot;token tag&quot;&gt;&lt;span class=&quot;token punctuation&quot;&gt;&amp;lt;&lt;/span&gt;a&lt;/span&gt;&lt;span class=&quot;token punctuation&quot;&gt;&gt;&lt;/span&gt;&lt;/span&gt;h3 2b&lt;span class=&quot;token tag&quot;&gt;&lt;span class=&quot;token tag&quot;&gt;&lt;span class=&quot;token punctuation&quot;&gt;&amp;lt;/&lt;/span&gt;a&lt;/span&gt;&lt;span class=&quot;token punctuation&quot;&gt;&gt;&lt;/span&gt;&lt;/span&gt;&lt;span class=&quot;token tag&quot;&gt;&lt;span class=&quot;token tag&quot;&gt;&lt;span class=&quot;token punctuation&quot;&gt;&amp;lt;/&lt;/span&gt;li&lt;/span&gt;&lt;span class=&quot;token punctuation&quot;&gt;&gt;&lt;/span&gt;&lt;/span&gt;
&lt;span class=&quot;token tag&quot;&gt;&lt;span class=&quot;token tag&quot;&gt;&lt;span class=&quot;token punctuation&quot;&gt;&amp;lt;/&lt;/span&gt;ol&lt;/span&gt;&lt;span class=&quot;token punctuation&quot;&gt;&gt;&lt;/span&gt;&lt;/span&gt;
&lt;span class=&quot;token tag&quot;&gt;&lt;span class=&quot;token tag&quot;&gt;&lt;span class=&quot;token punctuation&quot;&gt;&amp;lt;/&lt;/span&gt;li&lt;/span&gt;&lt;span class=&quot;token punctuation&quot;&gt;&gt;&lt;/span&gt;&lt;/span&gt;
&lt;span class=&quot;token tag&quot;&gt;&lt;span class=&quot;token tag&quot;&gt;&lt;span class=&quot;token punctuation&quot;&gt;&amp;lt;&lt;/span&gt;li&lt;/span&gt;&lt;span class=&quot;token punctuation&quot;&gt;&gt;&lt;/span&gt;&lt;/span&gt;&lt;span class=&quot;token tag&quot;&gt;&lt;span class=&quot;token tag&quot;&gt;&lt;span class=&quot;token punctuation&quot;&gt;&amp;lt;&lt;/span&gt;a&lt;/span&gt;&lt;span class=&quot;token punctuation&quot;&gt;&gt;&lt;/span&gt;&lt;/span&gt;h2 3&lt;span class=&quot;token tag&quot;&gt;&lt;span class=&quot;token tag&quot;&gt;&lt;span class=&quot;token punctuation&quot;&gt;&amp;lt;/&lt;/span&gt;a&lt;/span&gt;&lt;span class=&quot;token punctuation&quot;&gt;&gt;&lt;/span&gt;&lt;/span&gt;&lt;span class=&quot;token tag&quot;&gt;&lt;span class=&quot;token tag&quot;&gt;&lt;span class=&quot;token punctuation&quot;&gt;&amp;lt;/&lt;/span&gt;li&lt;/span&gt;&lt;span class=&quot;token punctuation&quot;&gt;&gt;&lt;/span&gt;&lt;/span&gt;
&lt;span class=&quot;token comment&quot;&gt;&amp;lt;!-- etc --&gt;&lt;/span&gt;
&lt;span class=&quot;token tag&quot;&gt;&lt;span class=&quot;token tag&quot;&gt;&lt;span class=&quot;token punctuation&quot;&gt;&amp;lt;/&lt;/span&gt;ol&lt;/span&gt;&lt;span class=&quot;token punctuation&quot;&gt;&gt;&lt;/span&gt;&lt;/span&gt;
&lt;span class=&quot;token tag&quot;&gt;&lt;span class=&quot;token tag&quot;&gt;&lt;span class=&quot;token punctuation&quot;&gt;&amp;lt;/&lt;/span&gt;nav&lt;/span&gt;&lt;span class=&quot;token punctuation&quot;&gt;&gt;&lt;/span&gt;&lt;/span&gt;
&lt;span class=&quot;token tag&quot;&gt;&lt;span class=&quot;token tag&quot;&gt;&lt;span class=&quot;token punctuation&quot;&gt;&amp;lt;/&lt;/span&gt;details&lt;/span&gt;&lt;span class=&quot;token punctuation&quot;&gt;&gt;&lt;/span&gt;&lt;/span&gt;
&lt;span class=&quot;token tag&quot;&gt;&lt;span class=&quot;token tag&quot;&gt;&lt;span class=&quot;token punctuation&quot;&gt;&amp;lt;/&lt;/span&gt;aside&lt;/span&gt;&lt;span class=&quot;token punctuation&quot;&gt;&gt;&lt;/span&gt;&lt;/span&gt;&lt;/code&gt;&lt;/pre&gt;
&lt;p&gt;We can ignore the &lt;code&gt;&amp;lt;aside&amp;gt;&lt;/code&gt;, &lt;code&gt;&amp;lt;details&amp;gt;&lt;/code&gt;, &lt;code&gt;&amp;lt;summary&amp;gt;&lt;/code&gt;, and &lt;code&gt;&amp;lt;nav&amp;gt;&lt;/code&gt; components - we&#39;re going to focus on the &lt;code&gt;&amp;lt;ol&amp;gt;&lt;/code&gt;s and &lt;code&gt;&amp;lt;li&amp;gt;&lt;/code&gt;s.&lt;/p&gt;
&lt;h2 id=&quot;css&quot;&gt;CSS&lt;/h2&gt;
&lt;p&gt;Despite referencing a StackOverflow issue above, I never like to just copy-paste a chunk of StackOverflow code into place. I don&#39;t like extraneous CSS, and sometimes there&#39;s stuff mixed in there that just isn&#39;t necessary. Let&#39;s build from the ground up.&lt;/p&gt;
&lt;h3 id=&quot;remove-styling-that-will-be-in-the-way&quot;&gt;remove styling that will be in the way&lt;/h3&gt;
&lt;p&gt;By default, my lists have a lot of space around them for legibility when reading longer list items. We&#39;ll be accomplishing the vertical bars with borders here, so it&#39;s critical we not have any block-oriented spacing on &lt;code&gt;&amp;lt;ol&amp;gt;&lt;/code&gt;s and &lt;code&gt;&amp;lt;li&amp;gt;&lt;/code&gt;s. We&#39;re also going to take the numeric &lt;code&gt;list-style&lt;/code&gt; off.&lt;/p&gt;
&lt;pre class=&quot;language-css&quot;&gt;&lt;code class=&quot;language-css&quot;&gt;&lt;span class=&quot;token selector&quot;&gt;#toc ol,
#toc li&lt;/span&gt; &lt;span class=&quot;token punctuation&quot;&gt;{&lt;/span&gt;
&lt;span class=&quot;token property&quot;&gt;margin-block&lt;/span&gt;&lt;span class=&quot;token punctuation&quot;&gt;:&lt;/span&gt; 0&lt;span class=&quot;token punctuation&quot;&gt;;&lt;/span&gt;
&lt;span class=&quot;token property&quot;&gt;list-style&lt;/span&gt;&lt;span class=&quot;token punctuation&quot;&gt;:&lt;/span&gt; none&lt;span class=&quot;token punctuation&quot;&gt;;&lt;/span&gt;
&lt;span class=&quot;token punctuation&quot;&gt;}&lt;/span&gt;&lt;/code&gt;&lt;/pre&gt;
&lt;h3 id=&quot;start-the-structure-with-borders&quot;&gt;start the structure with borders&lt;/h3&gt;
&lt;p&gt;The &lt;code&gt;tree&lt;/code&gt;-like structure will be accomplished with both symbols (stolen directly from the tree output) and borders. Let&#39;s throw some borders on.&lt;/p&gt;
&lt;pre class=&quot;language-css&quot;&gt;&lt;code class=&quot;language-css&quot;&gt;&lt;span class=&quot;token selector&quot;&gt;#toc li&lt;/span&gt; &lt;span class=&quot;token punctuation&quot;&gt;{&lt;/span&gt;
&lt;span class=&quot;token property&quot;&gt;border-left&lt;/span&gt;&lt;span class=&quot;token punctuation&quot;&gt;:&lt;/span&gt; .095rem solid &lt;span class=&quot;token function&quot;&gt;var&lt;/span&gt;&lt;span class=&quot;token punctuation&quot;&gt;(&lt;/span&gt;--color-pink&lt;span class=&quot;token punctuation&quot;&gt;)&lt;/span&gt;&lt;span class=&quot;token punctuation&quot;&gt;;&lt;/span&gt;
&lt;span class=&quot;token punctuation&quot;&gt;}&lt;/span&gt;&lt;/code&gt;&lt;/pre&gt;
&lt;p&gt;&lt;img src=&quot;https://leecat.art/img/tree-styling-1.png&quot; alt=&quot;Phase 1. There are thin pink vertical left-side borders for the list item elements, create long contiguous vertical lines. They are directly next to the list items with no spacing.&quot; loading=&quot;lazy&quot; decoding=&quot;async&quot; width=&quot;610&quot; height=&quot;297&quot;&gt;&lt;/p&gt;
&lt;p&gt;Those are super off. First, they&#39;re tabbed too far in to the left; second, there&#39;s &lt;em&gt;no&lt;/em&gt; space between the border and the list item. We&#39;re going to fix the first thing by removing left margins on the &lt;code&gt;&amp;lt;ol&amp;gt;&lt;/code&gt;s. The second is where we pull in the most critical piece of infrastructure.&lt;/p&gt;
&lt;pre class=&quot;language-css&quot;&gt;&lt;code class=&quot;language-css&quot;&gt;&lt;span class=&quot;token selector&quot;&gt;#toc ol&lt;/span&gt; &lt;span class=&quot;token punctuation&quot;&gt;{&lt;/span&gt;
&lt;span class=&quot;token property&quot;&gt;margin-left&lt;/span&gt;&lt;span class=&quot;token punctuation&quot;&gt;:&lt;/span&gt; 0&lt;span class=&quot;token punctuation&quot;&gt;;&lt;/span&gt;
&lt;span class=&quot;token punctuation&quot;&gt;}&lt;/span&gt;&lt;/code&gt;&lt;/pre&gt;
&lt;h3 id=&quot;li%3A%3Abefore&quot;&gt;&lt;code&gt;li::before&lt;/code&gt;&lt;/h3&gt;
&lt;p&gt;We&#39;re going to use a character (technically two) from the &lt;code&gt;tree&lt;/code&gt; output and place it before our list items.&lt;/p&gt;
&lt;pre class=&quot;language-css&quot;&gt;&lt;code class=&quot;language-css&quot;&gt;&lt;span class=&quot;token selector&quot;&gt;#toc li::before&lt;/span&gt; &lt;span class=&quot;token punctuation&quot;&gt;{&lt;/span&gt;
&lt;span class=&quot;token property&quot;&gt;content&lt;/span&gt;&lt;span class=&quot;token punctuation&quot;&gt;:&lt;/span&gt; &lt;span class=&quot;token string&quot;&gt;&#39;├─&#39;&lt;/span&gt; / &lt;span class=&quot;token string&quot;&gt;&quot;&quot;&lt;/span&gt;&lt;span class=&quot;token punctuation&quot;&gt;;&lt;/span&gt;
&lt;span class=&quot;token property&quot;&gt;color&lt;/span&gt;&lt;span class=&quot;token punctuation&quot;&gt;:&lt;/span&gt; &lt;span class=&quot;token function&quot;&gt;var&lt;/span&gt;&lt;span class=&quot;token punctuation&quot;&gt;(&lt;/span&gt;--color-pink&lt;span class=&quot;token punctuation&quot;&gt;)&lt;/span&gt;&lt;span class=&quot;token punctuation&quot;&gt;;&lt;/span&gt;
&lt;span class=&quot;token punctuation&quot;&gt;}&lt;/span&gt;&lt;/code&gt;&lt;/pre&gt;
&lt;p&gt;Notably, without additional positioning, the bars will be spaced away from the border. We want them to overlap perfectly.&lt;/p&gt;
&lt;p&gt;&lt;img src=&quot;https://leecat.art/img/tree-styling-2.png&quot; alt=&quot;Phase 2, shown with the new characters before any positioning adjustment. There are tree line leaders before each list item, but they are a few pixels off from overlapping with the border.&quot; loading=&quot;lazy&quot; decoding=&quot;async&quot; width=&quot;605&quot; height=&quot;339&quot;&gt;&lt;/p&gt;
&lt;pre class=&quot;language-css&quot;&gt;&lt;code class=&quot;language-css&quot;&gt;&lt;span class=&quot;token selector&quot;&gt;#toc li::before&lt;/span&gt; &lt;span class=&quot;token punctuation&quot;&gt;{&lt;/span&gt;
&lt;span class=&quot;token property&quot;&gt;position&lt;/span&gt;&lt;span class=&quot;token punctuation&quot;&gt;:&lt;/span&gt; relative&lt;span class=&quot;token punctuation&quot;&gt;;&lt;/span&gt;
&lt;span class=&quot;token property&quot;&gt;left&lt;/span&gt;&lt;span class=&quot;token punctuation&quot;&gt;:&lt;/span&gt; -.34rem&lt;span class=&quot;token punctuation&quot;&gt;;&lt;/span&gt; &lt;span class=&quot;token comment&quot;&gt;/* I fiddled a lot and this is where I landed */&lt;/span&gt;
&lt;span class=&quot;token punctuation&quot;&gt;}&lt;/span&gt;&lt;/code&gt;&lt;/pre&gt;
&lt;p&gt;&lt;img src=&quot;https://leecat.art/img/tree-styling-3.png&quot; alt=&quot;Phase 3. The tree line leaders now perfectly overlap the border and it looks like a contiguous vertical line with small tabs inwards.&quot; loading=&quot;lazy&quot; decoding=&quot;async&quot; width=&quot;607&quot; height=&quot;341&quot;&gt;&lt;/p&gt;
&lt;h3 id=&quot;adjust-left-margins&quot;&gt;adjust left margins&lt;/h3&gt;
&lt;p&gt;Right now, the vertical lines don&#39;t nest nicely underneath the level above. Let&#39;s change our margins. I also adjusted the line height very slightly, because I noticed on some levels of magnification that the tree line leader characters weren&#39;t actually meeting.&lt;/p&gt;
&lt;pre class=&quot;language-css&quot;&gt;&lt;code class=&quot;language-css&quot;&gt;&lt;span class=&quot;token selector&quot;&gt;#toc li&lt;/span&gt; &lt;span class=&quot;token punctuation&quot;&gt;{&lt;/span&gt;
&lt;span class=&quot;token property&quot;&gt;margin-left&lt;/span&gt;&lt;span class=&quot;token punctuation&quot;&gt;:&lt;/span&gt; 1.5rem&lt;span class=&quot;token punctuation&quot;&gt;;&lt;/span&gt;
&lt;span class=&quot;token property&quot;&gt;line-height&lt;/span&gt;&lt;span class=&quot;token punctuation&quot;&gt;:&lt;/span&gt; 1.15&lt;span class=&quot;token punctuation&quot;&gt;;&lt;/span&gt;
&lt;span class=&quot;token punctuation&quot;&gt;}&lt;/span&gt;&lt;/code&gt;&lt;/pre&gt;
&lt;p&gt;&lt;img src=&quot;https://leecat.art/img/tree-styling-4.png&quot; alt=&quot;Phase 4. The vertical border comes down directly below the first character of the parent level.&quot; loading=&quot;lazy&quot; decoding=&quot;async&quot; width=&quot;600&quot; height=&quot;318&quot;&gt;&lt;/p&gt;
&lt;h3 id=&quot;fix-those-pesky-last-children&quot;&gt;fix those pesky last children&lt;/h3&gt;
&lt;p&gt;You&#39;ve probably noticed that the last children in the tree output had a bend rather than the T-shape we&#39;ve been using. We&#39;ll want to remove the border from the last children and change the character we&#39;re using.&lt;/p&gt;
&lt;pre class=&quot;language-css&quot;&gt;&lt;code class=&quot;language-css&quot;&gt;&lt;span class=&quot;token selector&quot;&gt;#toc li:last-child&lt;/span&gt; &lt;span class=&quot;token punctuation&quot;&gt;{&lt;/span&gt;
&lt;span class=&quot;token property&quot;&gt;border-left-color&lt;/span&gt;&lt;span class=&quot;token punctuation&quot;&gt;:&lt;/span&gt; transparent&lt;span class=&quot;token punctuation&quot;&gt;;&lt;/span&gt;
&lt;span class=&quot;token punctuation&quot;&gt;}&lt;/span&gt;
&lt;span class=&quot;token selector&quot;&gt;#toc li:last-child::before&lt;/span&gt; &lt;span class=&quot;token punctuation&quot;&gt;{&lt;/span&gt;
&lt;span class=&quot;token comment&quot;&gt;/* Technically, we could use this content for all of them, but doing the full
bar for the non-last-childs keeps the border a *smidge* more consistent for
different levels of magnification */&lt;/span&gt;
&lt;span class=&quot;token property&quot;&gt;content&lt;/span&gt;&lt;span class=&quot;token punctuation&quot;&gt;:&lt;/span&gt; &lt;span class=&quot;token string&quot;&gt;&#39;└─&#39;&lt;/span&gt; / &lt;span class=&quot;token string&quot;&gt;&quot;&quot;&lt;/span&gt;&lt;span class=&quot;token punctuation&quot;&gt;;&lt;/span&gt;
&lt;span class=&quot;token punctuation&quot;&gt;}&lt;/span&gt;&lt;/code&gt;&lt;/pre&gt;
&lt;p&gt;With that, it starts to look complete!&lt;/p&gt;
&lt;p&gt;&lt;img src=&quot;https://leecat.art/img/tree-styling-5.png&quot; alt=&quot;Phase 5, almost done. The last children no longer have a border that continues onward as though there will be more children.&quot; loading=&quot;lazy&quot; decoding=&quot;async&quot; width=&quot;614&quot; height=&quot;349&quot;&gt;&lt;/p&gt;
&lt;h3 id=&quot;but-what-about-really%2C-really%2C-really%2C-really%2C-really-long-headers%3F&quot;&gt;but what about really, really, really, really, REALLY long headers?&lt;/h3&gt;
&lt;p&gt;What about line wrapping? It looks pretty bad right now.&lt;/p&gt;
&lt;p&gt;&lt;img src=&quot;https://leecat.art/img/tree-styling-6.png&quot; alt=&quot;Table of contents now shown with the above header. When the line wraps, instead of lining up with the beginning of the first character on the previous line, it nests under the tree line leader and right in line with the vertical border.&quot; loading=&quot;lazy&quot; decoding=&quot;async&quot; width=&quot;609&quot; height=&quot;405&quot;&gt;&lt;/p&gt;
&lt;p&gt;(And for the record, this happens for middle children too, it&#39;s not just a last child issue.)&lt;/p&gt;
&lt;p&gt;We can fix this with a hanging indent.&lt;/p&gt;
&lt;pre class=&quot;language-css&quot;&gt;&lt;code class=&quot;language-css&quot;&gt;&lt;span class=&quot;token selector&quot;&gt;#toc li&lt;/span&gt; &lt;span class=&quot;token punctuation&quot;&gt;{&lt;/span&gt;
&lt;span class=&quot;token property&quot;&gt;text-indent&lt;/span&gt;&lt;span class=&quot;token punctuation&quot;&gt;:&lt;/span&gt; 1.22rem hanging&lt;span class=&quot;token punctuation&quot;&gt;;&lt;/span&gt; &lt;span class=&quot;token comment&quot;&gt;/* Again, I fiddled */&lt;/span&gt;
&lt;span class=&quot;token punctuation&quot;&gt;}&lt;/span&gt;&lt;/code&gt;&lt;/pre&gt;
&lt;p&gt;&lt;img src=&quot;https://leecat.art/img/tree-styling-7.png&quot; alt=&quot;Final version with the hanging indent implemented. Now the second line of text for this header lines up nicely with the start of the text above it.&quot; loading=&quot;lazy&quot; decoding=&quot;async&quot; width=&quot;608&quot; height=&quot;408&quot;&gt;&lt;/p&gt;
&lt;h2 id=&quot;summary&quot;&gt;summary&lt;/h2&gt;
&lt;p&gt;Here&#39;s the final collected CSS:&lt;/p&gt;
&lt;pre class=&quot;language-css&quot;&gt;&lt;code class=&quot;language-css&quot;&gt;&lt;span class=&quot;token selector&quot;&gt;#toc ol,
#toc li&lt;/span&gt; &lt;span class=&quot;token punctuation&quot;&gt;{&lt;/span&gt;
&lt;span class=&quot;token property&quot;&gt;margin-block&lt;/span&gt;&lt;span class=&quot;token punctuation&quot;&gt;:&lt;/span&gt; 0&lt;span class=&quot;token punctuation&quot;&gt;;&lt;/span&gt;
&lt;span class=&quot;token property&quot;&gt;list-style&lt;/span&gt;&lt;span class=&quot;token punctuation&quot;&gt;:&lt;/span&gt; none&lt;span class=&quot;token punctuation&quot;&gt;;&lt;/span&gt;
&lt;span class=&quot;token punctuation&quot;&gt;}&lt;/span&gt;
&lt;span class=&quot;token selector&quot;&gt;#toc ol&lt;/span&gt; &lt;span class=&quot;token punctuation&quot;&gt;{&lt;/span&gt;
&lt;span class=&quot;token property&quot;&gt;margin-left&lt;/span&gt;&lt;span class=&quot;token punctuation&quot;&gt;:&lt;/span&gt; 0&lt;span class=&quot;token punctuation&quot;&gt;;&lt;/span&gt;
&lt;span class=&quot;token punctuation&quot;&gt;}&lt;/span&gt;
&lt;span class=&quot;token selector&quot;&gt;#toc li&lt;/span&gt; &lt;span class=&quot;token punctuation&quot;&gt;{&lt;/span&gt;
&lt;span class=&quot;token property&quot;&gt;border-left&lt;/span&gt;&lt;span class=&quot;token punctuation&quot;&gt;:&lt;/span&gt; .095rem solid &lt;span class=&quot;token function&quot;&gt;var&lt;/span&gt;&lt;span class=&quot;token punctuation&quot;&gt;(&lt;/span&gt;--color-pink&lt;span class=&quot;token punctuation&quot;&gt;)&lt;/span&gt;&lt;span class=&quot;token punctuation&quot;&gt;;&lt;/span&gt;
&lt;span class=&quot;token property&quot;&gt;margin-left&lt;/span&gt;&lt;span class=&quot;token punctuation&quot;&gt;:&lt;/span&gt; 1.5rem&lt;span class=&quot;token punctuation&quot;&gt;;&lt;/span&gt;
&lt;span class=&quot;token property&quot;&gt;line-height&lt;/span&gt;&lt;span class=&quot;token punctuation&quot;&gt;:&lt;/span&gt; 1.15&lt;span class=&quot;token punctuation&quot;&gt;;&lt;/span&gt;
&lt;span class=&quot;token property&quot;&gt;text-indent&lt;/span&gt;&lt;span class=&quot;token punctuation&quot;&gt;:&lt;/span&gt; 1.22rem hanging&lt;span class=&quot;token punctuation&quot;&gt;;&lt;/span&gt;
&lt;span class=&quot;token punctuation&quot;&gt;}&lt;/span&gt;
&lt;span class=&quot;token selector&quot;&gt;#toc li::before&lt;/span&gt; &lt;span class=&quot;token punctuation&quot;&gt;{&lt;/span&gt;
&lt;span class=&quot;token property&quot;&gt;content&lt;/span&gt;&lt;span class=&quot;token punctuation&quot;&gt;:&lt;/span&gt; &lt;span class=&quot;token string&quot;&gt;&#39;├─&#39;&lt;/span&gt; / &lt;span class=&quot;token string&quot;&gt;&quot;&quot;&lt;/span&gt;&lt;span class=&quot;token punctuation&quot;&gt;;&lt;/span&gt;
&lt;span class=&quot;token property&quot;&gt;color&lt;/span&gt;&lt;span class=&quot;token punctuation&quot;&gt;:&lt;/span&gt; &lt;span class=&quot;token function&quot;&gt;var&lt;/span&gt;&lt;span class=&quot;token punctuation&quot;&gt;(&lt;/span&gt;--color-pink&lt;span class=&quot;token punctuation&quot;&gt;)&lt;/span&gt;&lt;span class=&quot;token punctuation&quot;&gt;;&lt;/span&gt;
&lt;span class=&quot;token property&quot;&gt;position&lt;/span&gt;&lt;span class=&quot;token punctuation&quot;&gt;:&lt;/span&gt; relative&lt;span class=&quot;token punctuation&quot;&gt;;&lt;/span&gt;
&lt;span class=&quot;token property&quot;&gt;left&lt;/span&gt;&lt;span class=&quot;token punctuation&quot;&gt;:&lt;/span&gt; -.34rem&lt;span class=&quot;token punctuation&quot;&gt;;&lt;/span&gt;
&lt;span class=&quot;token punctuation&quot;&gt;}&lt;/span&gt;
&lt;span class=&quot;token selector&quot;&gt;#toc li:last-child&lt;/span&gt; &lt;span class=&quot;token punctuation&quot;&gt;{&lt;/span&gt;
&lt;span class=&quot;token property&quot;&gt;border-left-color&lt;/span&gt;&lt;span class=&quot;token punctuation&quot;&gt;:&lt;/span&gt; transparent&lt;span class=&quot;token punctuation&quot;&gt;;&lt;/span&gt;
&lt;span class=&quot;token punctuation&quot;&gt;}&lt;/span&gt;
&lt;span class=&quot;token selector&quot;&gt;#toc li:last-child::before&lt;/span&gt; &lt;span class=&quot;token punctuation&quot;&gt;{&lt;/span&gt;
&lt;span class=&quot;token comment&quot;&gt;/* Technically, we could use this content for all of them, but doing the full
bar for the non-last-childs keeps the border a *smidge* more consistent for
different levels of magnification */&lt;/span&gt;
&lt;span class=&quot;token property&quot;&gt;content&lt;/span&gt;&lt;span class=&quot;token punctuation&quot;&gt;:&lt;/span&gt; &lt;span class=&quot;token string&quot;&gt;&#39;└─&#39;&lt;/span&gt; / &lt;span class=&quot;token string&quot;&gt;&quot;&quot;&lt;/span&gt;&lt;span class=&quot;token punctuation&quot;&gt;;&lt;/span&gt;
&lt;span class=&quot;token punctuation&quot;&gt;}&lt;/span&gt;&lt;/code&gt;&lt;/pre&gt;
</content>
</entry>
<entry>
<title>fediZineFest 2026-2027</title>
<link href="https://leecat.art/fedizinefest-2026-2027/" />
@@ -1227,6 +1082,326 @@
<id>https://leecat.art/log-cabin-dishtowels/</id>
<content type="html">&lt;p&gt;Yarn: &lt;a href=&quot;https://woolery.com/products/circulo-anne-weaving-yarn&quot; target=&quot;_blank&quot; rel=&quot;external&quot;&gt;Circulo Anne Weaving Yarn&lt;/a&gt;.&lt;/p&gt;
&lt;p&gt;3 towels. Woven area roughly 12&amp;quot;x24&amp;quot;. Hemstitched.&lt;/p&gt;
</content>
</entry>
<entry>
<title>core CSS</title>
<link href="https://leecat.art/core-css/" />
<updated>2026-06-30T00:00:00Z</updated>
<id>https://leecat.art/core-css/</id>
<content type="html">&lt;p&gt;What CSS would you implement if you had no or very low vision? Recently, a Blind friend wanted to know more about CSS. This is my attempt at a very minimal CSS file that cleans up a few &lt;a href=&quot;https://browserdefaultstyles.com/&quot; target=&quot;_blank&quot; rel=&quot;external&quot;&gt;browser defaults&lt;/a&gt; for a more pleasant browsing experience without needing much if any visual testing.&lt;/p&gt;
&lt;p&gt;Want to just see the final stylesheet? &lt;a href=&quot;https://leecat.art/core-css/#result&quot;&gt;Skip to the end of the page&lt;/a&gt;.&lt;/p&gt;
&lt;h2 id=&quot;css-resets&quot;&gt;CSS resets&lt;/h2&gt;
&lt;p&gt;Before we start: this isn&#39;t a CSS reset. You may want to apply it in concert with one. While writing this, a friend recommended &lt;a href=&quot;https://www.joshwcomeau.com/css/custom-css-reset/&quot; target=&quot;_blank&quot; rel=&quot;external&quot;&gt;Josh W. Comeau&#39;s CSS Reset&lt;/a&gt;, which looks largely very solid to me. However, if using that particular reset, I would &lt;em&gt;&lt;strong&gt;not&lt;/strong&gt;&lt;/em&gt; reset default margins (rule 2). They are tremendously useful in this case, where we are unlikely to be setting margins on elements individually.&lt;/p&gt;
&lt;h2 id=&quot;color&quot;&gt;color&lt;/h2&gt;
&lt;p&gt;Complex color palettes are a no-go. But browser defaults are also pretty bad - stark black and white are really hard on sighted users&#39; eyes. Dulling the black and white down to nearby grays helps a lot. And of course, we&#39;ll support light and dark modes.&lt;/p&gt;
&lt;pre class=&quot;language-css&quot;&gt;&lt;code class=&quot;language-css&quot;&gt;&lt;span class=&quot;token selector&quot;&gt;:root&lt;/span&gt; &lt;span class=&quot;token punctuation&quot;&gt;{&lt;/span&gt;
&lt;span class=&quot;token property&quot;&gt;color-scheme&lt;/span&gt;&lt;span class=&quot;token punctuation&quot;&gt;:&lt;/span&gt; light dark&lt;span class=&quot;token punctuation&quot;&gt;;&lt;/span&gt;
&lt;span class=&quot;token property&quot;&gt;--color-light&lt;/span&gt;&lt;span class=&quot;token punctuation&quot;&gt;:&lt;/span&gt; #ddd&lt;span class=&quot;token punctuation&quot;&gt;;&lt;/span&gt;
&lt;span class=&quot;token property&quot;&gt;--color-dark&lt;/span&gt;&lt;span class=&quot;token punctuation&quot;&gt;:&lt;/span&gt; #222&lt;span class=&quot;token punctuation&quot;&gt;;&lt;/span&gt;
&lt;span class=&quot;token property&quot;&gt;--color-bg&lt;/span&gt;&lt;span class=&quot;token punctuation&quot;&gt;:&lt;/span&gt; &lt;span class=&quot;token function&quot;&gt;light-dark&lt;/span&gt;&lt;span class=&quot;token punctuation&quot;&gt;(&lt;/span&gt;&lt;span class=&quot;token function&quot;&gt;var&lt;/span&gt;&lt;span class=&quot;token punctuation&quot;&gt;(&lt;/span&gt;--color-light&lt;span class=&quot;token punctuation&quot;&gt;)&lt;/span&gt;&lt;span class=&quot;token punctuation&quot;&gt;,&lt;/span&gt; &lt;span class=&quot;token function&quot;&gt;var&lt;/span&gt;&lt;span class=&quot;token punctuation&quot;&gt;(&lt;/span&gt;--color-dark&lt;span class=&quot;token punctuation&quot;&gt;)&lt;/span&gt;&lt;span class=&quot;token punctuation&quot;&gt;)&lt;/span&gt;&lt;span class=&quot;token punctuation&quot;&gt;;&lt;/span&gt;
&lt;span class=&quot;token property&quot;&gt;--color-text&lt;/span&gt;&lt;span class=&quot;token punctuation&quot;&gt;:&lt;/span&gt; &lt;span class=&quot;token function&quot;&gt;light-dark&lt;/span&gt;&lt;span class=&quot;token punctuation&quot;&gt;(&lt;/span&gt;&lt;span class=&quot;token function&quot;&gt;var&lt;/span&gt;&lt;span class=&quot;token punctuation&quot;&gt;(&lt;/span&gt;--color-dark&lt;span class=&quot;token punctuation&quot;&gt;)&lt;/span&gt;&lt;span class=&quot;token punctuation&quot;&gt;,&lt;/span&gt; &lt;span class=&quot;token function&quot;&gt;var&lt;/span&gt;&lt;span class=&quot;token punctuation&quot;&gt;(&lt;/span&gt;--color-light&lt;span class=&quot;token punctuation&quot;&gt;)&lt;/span&gt;&lt;span class=&quot;token punctuation&quot;&gt;)&lt;/span&gt;&lt;span class=&quot;token punctuation&quot;&gt;;&lt;/span&gt;
&lt;span class=&quot;token punctuation&quot;&gt;}&lt;/span&gt;
&lt;span class=&quot;token selector&quot;&gt;body&lt;/span&gt; &lt;span class=&quot;token punctuation&quot;&gt;{&lt;/span&gt;
&lt;span class=&quot;token property&quot;&gt;color&lt;/span&gt;&lt;span class=&quot;token punctuation&quot;&gt;:&lt;/span&gt; &lt;span class=&quot;token function&quot;&gt;var&lt;/span&gt;&lt;span class=&quot;token punctuation&quot;&gt;(&lt;/span&gt;--color-text&lt;span class=&quot;token punctuation&quot;&gt;)&lt;/span&gt;&lt;span class=&quot;token punctuation&quot;&gt;;&lt;/span&gt;
&lt;span class=&quot;token property&quot;&gt;background-color&lt;/span&gt;&lt;span class=&quot;token punctuation&quot;&gt;:&lt;/span&gt; &lt;span class=&quot;token function&quot;&gt;var&lt;/span&gt;&lt;span class=&quot;token punctuation&quot;&gt;(&lt;/span&gt;--color-bg&lt;span class=&quot;token punctuation&quot;&gt;)&lt;/span&gt;&lt;span class=&quot;token punctuation&quot;&gt;;&lt;/span&gt;
&lt;span class=&quot;token punctuation&quot;&gt;}&lt;/span&gt;&lt;/code&gt;&lt;/pre&gt;
&lt;h3 id=&quot;accents&quot;&gt;accents&lt;/h3&gt;
&lt;p&gt;To skip reading about accent colors, head right to &lt;a href=&quot;https://leecat.art/core-css/#focus-indication&quot;&gt;focus indication&lt;/a&gt;.&lt;/p&gt;
&lt;p&gt;If you have any opinions about color, you might pick accents. At the simplest level, I&#39;d pick one for light mode and one for dark mode. &lt;a href=&quot;https://xkcd.com/color/rgb/&quot; target=&quot;_blank&quot; rel=&quot;external&quot;&gt;XKCD has a color sheet based on a wide survey&lt;/a&gt; that is potentially useful here. Validate that the color contrast is enough with a tool like &lt;a href=&quot;https://webaim.org/resources/contrastchecker/&quot; target=&quot;_blank&quot; rel=&quot;external&quot;&gt;WebAIM&#39;s Contrast Checker&lt;/a&gt;. You might color your headers and links.&lt;/p&gt;
&lt;p&gt;If you&#39;re coloring links, it&#39;s worth considering browser defaults. Blue is unvisited, purple is visited, and red is inactive. Choosing a red or purple link color might confuse users. Blues are pretty safe. A green might be fun.&lt;/p&gt;
&lt;p&gt;Being the person that I am, I&#39;m picking a teal and a pink. XKCD labels these &amp;quot;dark teal&amp;quot; (contrast ratio of 7.11 against our gray-white) and &amp;quot;powder pink&amp;quot; (contrast ratio of 9.49 against our gray-black) respectively.&lt;/p&gt;
&lt;pre class=&quot;language-css&quot;&gt;&lt;code class=&quot;language-css&quot;&gt;&lt;span class=&quot;token selector&quot;&gt;:root&lt;/span&gt; &lt;span class=&quot;token punctuation&quot;&gt;{&lt;/span&gt;
&lt;span class=&quot;token property&quot;&gt;--color-teal&lt;/span&gt;&lt;span class=&quot;token punctuation&quot;&gt;:&lt;/span&gt; #014d4e&lt;span class=&quot;token punctuation&quot;&gt;;&lt;/span&gt;
&lt;span class=&quot;token property&quot;&gt;--color-pink&lt;/span&gt;&lt;span class=&quot;token punctuation&quot;&gt;:&lt;/span&gt; #ffb2d0&lt;span class=&quot;token punctuation&quot;&gt;;&lt;/span&gt;
&lt;span class=&quot;token property&quot;&gt;--color-accent&lt;/span&gt;&lt;span class=&quot;token punctuation&quot;&gt;:&lt;/span&gt; &lt;span class=&quot;token function&quot;&gt;light-dark&lt;/span&gt;&lt;span class=&quot;token punctuation&quot;&gt;(&lt;/span&gt;&lt;span class=&quot;token function&quot;&gt;var&lt;/span&gt;&lt;span class=&quot;token punctuation&quot;&gt;(&lt;/span&gt;--color-teal&lt;span class=&quot;token punctuation&quot;&gt;)&lt;/span&gt;&lt;span class=&quot;token punctuation&quot;&gt;,&lt;/span&gt; &lt;span class=&quot;token function&quot;&gt;var&lt;/span&gt;&lt;span class=&quot;token punctuation&quot;&gt;(&lt;/span&gt;--color-pink&lt;span class=&quot;token punctuation&quot;&gt;)&lt;/span&gt;&lt;span class=&quot;token punctuation&quot;&gt;)&lt;/span&gt;&lt;span class=&quot;token punctuation&quot;&gt;;&lt;/span&gt;
&lt;span class=&quot;token punctuation&quot;&gt;}&lt;/span&gt;
&lt;span class=&quot;token selector&quot;&gt;h1, h2, h3, h4, h5, h6,
a&lt;/span&gt; &lt;span class=&quot;token punctuation&quot;&gt;{&lt;/span&gt;
&lt;span class=&quot;token property&quot;&gt;color&lt;/span&gt;&lt;span class=&quot;token punctuation&quot;&gt;:&lt;/span&gt; &lt;span class=&quot;token function&quot;&gt;var&lt;/span&gt;&lt;span class=&quot;token punctuation&quot;&gt;(&lt;/span&gt;--color-accent&lt;span class=&quot;token punctuation&quot;&gt;)&lt;/span&gt;&lt;span class=&quot;token punctuation&quot;&gt;;&lt;/span&gt;
&lt;span class=&quot;token punctuation&quot;&gt;}&lt;/span&gt;&lt;/code&gt;&lt;/pre&gt;
&lt;h2 id=&quot;focus-indication&quot;&gt;focus indication&lt;/h2&gt;
&lt;p&gt;Focus indication is a visual change that occurs when something interactive on the screen (like a link) receives keyboard focus. Without it, sighted keyboard-only users can&#39;t tell where they are on the page. Conventionally, it&#39;s an outline. &lt;a href=&quot;https://www.sarasoueidan.com/blog/focus-indicators/&quot; target=&quot;_blank&quot; rel=&quot;external&quot;&gt;Read more about accessible focus indication&lt;/a&gt;.&lt;/p&gt;
&lt;p&gt;I would recommend a &lt;em&gt;smidge&lt;/em&gt; of padding (spacing &lt;em&gt;inside&lt;/em&gt; the border or outline of an element) around your links to allow for more space between the letters and focus outline in order to help with legibility.&lt;/p&gt;
&lt;p&gt;If you recolor your links as mentioned in the previous section, recolor your focus indication for cohesiveness! Additionally, if you overwrite the browser default focus outline in this way or any other, you might want to add a very small border radius to your links. I find that perfectly square corners are a bit of a harsh look, but I&#39;ll admit this one is kind of personal preference.&lt;/p&gt;
&lt;pre class=&quot;language-css&quot;&gt;&lt;code class=&quot;language-css&quot;&gt;&lt;span class=&quot;token selector&quot;&gt;a&lt;/span&gt; &lt;span class=&quot;token punctuation&quot;&gt;{&lt;/span&gt;
&lt;span class=&quot;token property&quot;&gt;padding&lt;/span&gt;&lt;span class=&quot;token punctuation&quot;&gt;:&lt;/span&gt; .1rem&lt;span class=&quot;token punctuation&quot;&gt;;&lt;/span&gt;
&lt;span class=&quot;token property&quot;&gt;border-radius&lt;/span&gt;&lt;span class=&quot;token punctuation&quot;&gt;:&lt;/span&gt; .05rem&lt;span class=&quot;token punctuation&quot;&gt;;&lt;/span&gt;
&lt;span class=&quot;token punctuation&quot;&gt;}&lt;/span&gt;
&lt;span class=&quot;token selector&quot;&gt;a:focus-visible&lt;/span&gt; &lt;span class=&quot;token punctuation&quot;&gt;{&lt;/span&gt;
&lt;span class=&quot;token property&quot;&gt;outline&lt;/span&gt;&lt;span class=&quot;token punctuation&quot;&gt;:&lt;/span&gt; solid &lt;span class=&quot;token function&quot;&gt;var&lt;/span&gt;&lt;span class=&quot;token punctuation&quot;&gt;(&lt;/span&gt;--color-accent&lt;span class=&quot;token punctuation&quot;&gt;)&lt;/span&gt;&lt;span class=&quot;token punctuation&quot;&gt;;&lt;/span&gt;
&lt;span class=&quot;token punctuation&quot;&gt;}&lt;/span&gt;&lt;/code&gt;&lt;/pre&gt;
&lt;h2 id=&quot;font&quot;&gt;font&lt;/h2&gt;
&lt;p&gt;All-serif everything (a common browser default) is, uh, kinda ugly and overwhelming. Little tails on every letter are visual clutter, at least to my eyes. It feels outdated, like an old-timey newspaper. Picking serif for headers and sans-serif for body (or vice versa) can be a nice alternative. Plus, the contrast will help on lower-level headings... if you ever drill down to &lt;code&gt;h5&lt;/code&gt;s or &lt;code&gt;h6&lt;/code&gt;s anyway.&lt;/p&gt;
&lt;pre class=&quot;language-css&quot;&gt;&lt;code class=&quot;language-css&quot;&gt;&lt;span class=&quot;token selector&quot;&gt;body&lt;/span&gt; &lt;span class=&quot;token punctuation&quot;&gt;{&lt;/span&gt;
&lt;span class=&quot;token property&quot;&gt;font-family&lt;/span&gt;&lt;span class=&quot;token punctuation&quot;&gt;:&lt;/span&gt; sans-serif&lt;span class=&quot;token punctuation&quot;&gt;;&lt;/span&gt;
&lt;span class=&quot;token punctuation&quot;&gt;}&lt;/span&gt;
&lt;span class=&quot;token selector&quot;&gt;h1, h2, h3, h4, h5, h6&lt;/span&gt; &lt;span class=&quot;token punctuation&quot;&gt;{&lt;/span&gt;
&lt;span class=&quot;token property&quot;&gt;font-family&lt;/span&gt;&lt;span class=&quot;token punctuation&quot;&gt;:&lt;/span&gt; serif&lt;span class=&quot;token punctuation&quot;&gt;;&lt;/span&gt;
&lt;span class=&quot;token punctuation&quot;&gt;}&lt;/span&gt;&lt;/code&gt;&lt;/pre&gt;
&lt;h2 id=&quot;margins&quot;&gt;margins&lt;/h2&gt;
&lt;p&gt;Margins create visual space around an element, and this whitespace helps significantly with focus. We&#39;re &lt;em&gt;super super not&lt;/em&gt; going to reset the margins for everything. That puts us in design hell and becomes a very visually-oriented problem. Instead, we&#39;re just changing two things: the width of the body and where it sits on the page. Readers, particularly dyslexic readers, can more easily move to the next line when they are not trying to track back across the full width of the screen.&lt;/p&gt;
&lt;p&gt;This margin rule defines a small amount of top/bottom space first (&lt;code&gt;1rem&lt;/code&gt;), and then tells the page to make the left and right margins equal with &lt;code&gt;auto&lt;/code&gt; - centering the body in the middle of the page. I&#39;m also going to set a &lt;code&gt;max-width&lt;/code&gt; to handle those mystical ultra-wide screens (never used one), and a couple of breakpoints for tablets and mobile.&lt;/p&gt;
&lt;pre class=&quot;language-css&quot;&gt;&lt;code class=&quot;language-css&quot;&gt;&lt;span class=&quot;token selector&quot;&gt;body&lt;/span&gt; &lt;span class=&quot;token punctuation&quot;&gt;{&lt;/span&gt;
&lt;span class=&quot;token property&quot;&gt;width&lt;/span&gt;&lt;span class=&quot;token punctuation&quot;&gt;:&lt;/span&gt; 65%&lt;span class=&quot;token punctuation&quot;&gt;;&lt;/span&gt;
&lt;span class=&quot;token property&quot;&gt;max-width&lt;/span&gt;&lt;span class=&quot;token punctuation&quot;&gt;:&lt;/span&gt; 1800px&lt;span class=&quot;token punctuation&quot;&gt;;&lt;/span&gt;
&lt;span class=&quot;token property&quot;&gt;margin&lt;/span&gt;&lt;span class=&quot;token punctuation&quot;&gt;:&lt;/span&gt; 1rem auto&lt;span class=&quot;token punctuation&quot;&gt;;&lt;/span&gt;
&lt;span class=&quot;token punctuation&quot;&gt;}&lt;/span&gt;
&lt;span class=&quot;token atrule&quot;&gt;&lt;span class=&quot;token rule&quot;&gt;@media&lt;/span&gt; &lt;span class=&quot;token punctuation&quot;&gt;(&lt;/span&gt;&lt;span class=&quot;token property&quot;&gt;max-width&lt;/span&gt;&lt;span class=&quot;token punctuation&quot;&gt;:&lt;/span&gt; 1050px&lt;span class=&quot;token punctuation&quot;&gt;)&lt;/span&gt;&lt;/span&gt; &lt;span class=&quot;token punctuation&quot;&gt;{&lt;/span&gt;
&lt;span class=&quot;token selector&quot;&gt;body&lt;/span&gt; &lt;span class=&quot;token punctuation&quot;&gt;{&lt;/span&gt;
&lt;span class=&quot;token property&quot;&gt;width&lt;/span&gt;&lt;span class=&quot;token punctuation&quot;&gt;:&lt;/span&gt; 85%&lt;span class=&quot;token punctuation&quot;&gt;;&lt;/span&gt;
&lt;span class=&quot;token punctuation&quot;&gt;}&lt;/span&gt;
&lt;span class=&quot;token punctuation&quot;&gt;}&lt;/span&gt;
&lt;span class=&quot;token atrule&quot;&gt;&lt;span class=&quot;token rule&quot;&gt;@media&lt;/span&gt; &lt;span class=&quot;token punctuation&quot;&gt;(&lt;/span&gt;&lt;span class=&quot;token property&quot;&gt;max-width&lt;/span&gt;&lt;span class=&quot;token punctuation&quot;&gt;:&lt;/span&gt; 650px&lt;span class=&quot;token punctuation&quot;&gt;)&lt;/span&gt;&lt;/span&gt; &lt;span class=&quot;token punctuation&quot;&gt;{&lt;/span&gt;
&lt;span class=&quot;token selector&quot;&gt;body&lt;/span&gt; &lt;span class=&quot;token punctuation&quot;&gt;{&lt;/span&gt;
&lt;span class=&quot;token property&quot;&gt;width&lt;/span&gt;&lt;span class=&quot;token punctuation&quot;&gt;:&lt;/span&gt; 92%&lt;span class=&quot;token punctuation&quot;&gt;;&lt;/span&gt;
&lt;span class=&quot;token punctuation&quot;&gt;}&lt;/span&gt;
&lt;span class=&quot;token punctuation&quot;&gt;}&lt;/span&gt;&lt;/code&gt;&lt;/pre&gt;
&lt;h2 id=&quot;links&quot;&gt;links&lt;/h2&gt;
&lt;p&gt;One quick note about accessible links: they should be identifiable by a method other than color. Basically, don&#39;t turn off your underlines! Additionally, I would recommend against using underlines for emphasis elsewhere - use &lt;code&gt;&amp;lt;em&amp;gt;&lt;/code&gt; or &lt;code&gt;&amp;lt;strong&amp;gt;&lt;/code&gt; instead.&lt;/p&gt;
&lt;h2 id=&quot;images&quot;&gt;images&lt;/h2&gt;
&lt;p&gt;As mentioned up top, this overlaps with the linked CSS Reset writeup.&lt;/p&gt;
&lt;p&gt;By default, an image will be full size. If it&#39;s a large image, that can be even larger than the viewport. We&#39;ll give them a &lt;code&gt;max-width&lt;/code&gt; and center them in case they are narrower than the body. &lt;code&gt;display: block&lt;/code&gt; allows that centering to actually work.&lt;/p&gt;
&lt;pre class=&quot;language-css&quot;&gt;&lt;code class=&quot;language-css&quot;&gt;&lt;span class=&quot;token selector&quot;&gt;img, picture, video, canvas, svg&lt;/span&gt; &lt;span class=&quot;token punctuation&quot;&gt;{&lt;/span&gt;
&lt;span class=&quot;token property&quot;&gt;display&lt;/span&gt;&lt;span class=&quot;token punctuation&quot;&gt;:&lt;/span&gt; block&lt;span class=&quot;token punctuation&quot;&gt;;&lt;/span&gt;
&lt;span class=&quot;token property&quot;&gt;max-width&lt;/span&gt;&lt;span class=&quot;token punctuation&quot;&gt;:&lt;/span&gt; 100%&lt;span class=&quot;token punctuation&quot;&gt;;&lt;/span&gt;
&lt;span class=&quot;token property&quot;&gt;margin&lt;/span&gt;&lt;span class=&quot;token punctuation&quot;&gt;:&lt;/span&gt; 0 auto&lt;span class=&quot;token punctuation&quot;&gt;;&lt;/span&gt;
&lt;span class=&quot;token punctuation&quot;&gt;}&lt;/span&gt;&lt;/code&gt;&lt;/pre&gt;
&lt;h2 id=&quot;headers%2C-footers%2C-navs&quot;&gt;headers, footers, navs&lt;/h2&gt;
&lt;p&gt;Let&#39;s talk the components that every page likely has - a header, a footer, and navs. I&#39;m going to use a very simple design for our header - a &lt;a href=&quot;https://webaim.org/techniques/skipnav/&quot; target=&quot;_blank&quot; rel=&quot;external&quot;&gt;skip link&lt;/a&gt;, an (optional) site title (the title could also be one of the nav links), and then an unordered list of links enclosed in a &lt;code&gt;nav&lt;/code&gt; element. Like the following:&lt;/p&gt;
&lt;pre class=&quot;language-html&quot;&gt;&lt;code class=&quot;language-html&quot;&gt;&lt;span class=&quot;token tag&quot;&gt;&lt;span class=&quot;token tag&quot;&gt;&lt;span class=&quot;token punctuation&quot;&gt;&amp;lt;&lt;/span&gt;header&lt;/span&gt;&lt;span class=&quot;token punctuation&quot;&gt;&gt;&lt;/span&gt;&lt;/span&gt;
&lt;span class=&quot;token tag&quot;&gt;&lt;span class=&quot;token tag&quot;&gt;&lt;span class=&quot;token punctuation&quot;&gt;&amp;lt;&lt;/span&gt;a&lt;/span&gt; &lt;span class=&quot;token attr-name&quot;&gt;id&lt;/span&gt;&lt;span class=&quot;token attr-value&quot;&gt;&lt;span class=&quot;token punctuation attr-equals&quot;&gt;=&lt;/span&gt;&lt;span class=&quot;token punctuation&quot;&gt;&quot;&lt;/span&gt;skip&lt;span class=&quot;token punctuation&quot;&gt;&quot;&lt;/span&gt;&lt;/span&gt; &lt;span class=&quot;token attr-name&quot;&gt;href&lt;/span&gt;&lt;span class=&quot;token attr-value&quot;&gt;&lt;span class=&quot;token punctuation attr-equals&quot;&gt;=&lt;/span&gt;&lt;span class=&quot;token punctuation&quot;&gt;&quot;&lt;/span&gt;#main&lt;span class=&quot;token punctuation&quot;&gt;&quot;&lt;/span&gt;&lt;/span&gt;&lt;span class=&quot;token punctuation&quot;&gt;&gt;&lt;/span&gt;&lt;/span&gt;Skip to content&lt;span class=&quot;token tag&quot;&gt;&lt;span class=&quot;token tag&quot;&gt;&lt;span class=&quot;token punctuation&quot;&gt;&amp;lt;/&lt;/span&gt;a&lt;/span&gt;&lt;span class=&quot;token punctuation&quot;&gt;&gt;&lt;/span&gt;&lt;/span&gt;
&lt;span class=&quot;token tag&quot;&gt;&lt;span class=&quot;token tag&quot;&gt;&lt;span class=&quot;token punctuation&quot;&gt;&amp;lt;&lt;/span&gt;h2&lt;/span&gt;&lt;span class=&quot;token punctuation&quot;&gt;&gt;&lt;/span&gt;&lt;/span&gt;&lt;span class=&quot;token tag&quot;&gt;&lt;span class=&quot;token tag&quot;&gt;&lt;span class=&quot;token punctuation&quot;&gt;&amp;lt;&lt;/span&gt;a&lt;/span&gt; &lt;span class=&quot;token attr-name&quot;&gt;href&lt;/span&gt;&lt;span class=&quot;token attr-value&quot;&gt;&lt;span class=&quot;token punctuation attr-equals&quot;&gt;=&lt;/span&gt;&lt;span class=&quot;token punctuation&quot;&gt;&quot;&lt;/span&gt;/&lt;span class=&quot;token punctuation&quot;&gt;&quot;&lt;/span&gt;&lt;/span&gt;&lt;span class=&quot;token punctuation&quot;&gt;&gt;&lt;/span&gt;&lt;/span&gt;This is my cool website&lt;span class=&quot;token tag&quot;&gt;&lt;span class=&quot;token tag&quot;&gt;&lt;span class=&quot;token punctuation&quot;&gt;&amp;lt;/&lt;/span&gt;a&lt;/span&gt;&lt;span class=&quot;token punctuation&quot;&gt;&gt;&lt;/span&gt;&lt;/span&gt;&lt;span class=&quot;token tag&quot;&gt;&lt;span class=&quot;token tag&quot;&gt;&lt;span class=&quot;token punctuation&quot;&gt;&amp;lt;/&lt;/span&gt;h2&lt;/span&gt;&lt;span class=&quot;token punctuation&quot;&gt;&gt;&lt;/span&gt;&lt;/span&gt;
&lt;span class=&quot;token tag&quot;&gt;&lt;span class=&quot;token tag&quot;&gt;&lt;span class=&quot;token punctuation&quot;&gt;&amp;lt;&lt;/span&gt;nav&lt;/span&gt; &lt;span class=&quot;token attr-name&quot;&gt;aria-label&lt;/span&gt;&lt;span class=&quot;token attr-value&quot;&gt;&lt;span class=&quot;token punctuation attr-equals&quot;&gt;=&lt;/span&gt;&lt;span class=&quot;token punctuation&quot;&gt;&quot;&lt;/span&gt;main menu navigation&lt;span class=&quot;token punctuation&quot;&gt;&quot;&lt;/span&gt;&lt;/span&gt;&lt;span class=&quot;token punctuation&quot;&gt;&gt;&lt;/span&gt;&lt;/span&gt;
&lt;span class=&quot;token tag&quot;&gt;&lt;span class=&quot;token tag&quot;&gt;&lt;span class=&quot;token punctuation&quot;&gt;&amp;lt;&lt;/span&gt;ul&lt;/span&gt;&lt;span class=&quot;token punctuation&quot;&gt;&gt;&lt;/span&gt;&lt;/span&gt;
&lt;span class=&quot;token tag&quot;&gt;&lt;span class=&quot;token tag&quot;&gt;&lt;span class=&quot;token punctuation&quot;&gt;&amp;lt;&lt;/span&gt;li&lt;/span&gt;&lt;span class=&quot;token punctuation&quot;&gt;&gt;&lt;/span&gt;&lt;/span&gt;&lt;span class=&quot;token tag&quot;&gt;&lt;span class=&quot;token tag&quot;&gt;&lt;span class=&quot;token punctuation&quot;&gt;&amp;lt;&lt;/span&gt;a&lt;/span&gt; &lt;span class=&quot;token attr-name&quot;&gt;href&lt;/span&gt;&lt;span class=&quot;token attr-value&quot;&gt;&lt;span class=&quot;token punctuation attr-equals&quot;&gt;=&lt;/span&gt;&lt;span class=&quot;token punctuation&quot;&gt;&quot;&lt;/span&gt;/header-nav-1/&lt;span class=&quot;token punctuation&quot;&gt;&quot;&lt;/span&gt;&lt;/span&gt;&lt;span class=&quot;token punctuation&quot;&gt;&gt;&lt;/span&gt;&lt;/span&gt;Header nav item 1&lt;span class=&quot;token tag&quot;&gt;&lt;span class=&quot;token tag&quot;&gt;&lt;span class=&quot;token punctuation&quot;&gt;&amp;lt;/&lt;/span&gt;a&lt;/span&gt;&lt;span class=&quot;token punctuation&quot;&gt;&gt;&lt;/span&gt;&lt;/span&gt;&lt;span class=&quot;token tag&quot;&gt;&lt;span class=&quot;token tag&quot;&gt;&lt;span class=&quot;token punctuation&quot;&gt;&amp;lt;/&lt;/span&gt;li&lt;/span&gt;&lt;span class=&quot;token punctuation&quot;&gt;&gt;&lt;/span&gt;&lt;/span&gt;
&lt;span class=&quot;token tag&quot;&gt;&lt;span class=&quot;token tag&quot;&gt;&lt;span class=&quot;token punctuation&quot;&gt;&amp;lt;&lt;/span&gt;li&lt;/span&gt;&lt;span class=&quot;token punctuation&quot;&gt;&gt;&lt;/span&gt;&lt;/span&gt;&lt;span class=&quot;token tag&quot;&gt;&lt;span class=&quot;token tag&quot;&gt;&lt;span class=&quot;token punctuation&quot;&gt;&amp;lt;&lt;/span&gt;a&lt;/span&gt; &lt;span class=&quot;token attr-name&quot;&gt;href&lt;/span&gt;&lt;span class=&quot;token attr-value&quot;&gt;&lt;span class=&quot;token punctuation attr-equals&quot;&gt;=&lt;/span&gt;&lt;span class=&quot;token punctuation&quot;&gt;&quot;&lt;/span&gt;/header-nav-2/&lt;span class=&quot;token punctuation&quot;&gt;&quot;&lt;/span&gt;&lt;/span&gt;&lt;span class=&quot;token punctuation&quot;&gt;&gt;&lt;/span&gt;&lt;/span&gt;Header nav item 2&lt;span class=&quot;token tag&quot;&gt;&lt;span class=&quot;token tag&quot;&gt;&lt;span class=&quot;token punctuation&quot;&gt;&amp;lt;/&lt;/span&gt;a&lt;/span&gt;&lt;span class=&quot;token punctuation&quot;&gt;&gt;&lt;/span&gt;&lt;/span&gt;&lt;span class=&quot;token tag&quot;&gt;&lt;span class=&quot;token tag&quot;&gt;&lt;span class=&quot;token punctuation&quot;&gt;&amp;lt;/&lt;/span&gt;li&lt;/span&gt;&lt;span class=&quot;token punctuation&quot;&gt;&gt;&lt;/span&gt;&lt;/span&gt;
&lt;span class=&quot;token tag&quot;&gt;&lt;span class=&quot;token tag&quot;&gt;&lt;span class=&quot;token punctuation&quot;&gt;&amp;lt;&lt;/span&gt;li&lt;/span&gt;&lt;span class=&quot;token punctuation&quot;&gt;&gt;&lt;/span&gt;&lt;/span&gt;&lt;span class=&quot;token tag&quot;&gt;&lt;span class=&quot;token tag&quot;&gt;&lt;span class=&quot;token punctuation&quot;&gt;&amp;lt;&lt;/span&gt;a&lt;/span&gt; &lt;span class=&quot;token attr-name&quot;&gt;href&lt;/span&gt;&lt;span class=&quot;token attr-value&quot;&gt;&lt;span class=&quot;token punctuation attr-equals&quot;&gt;=&lt;/span&gt;&lt;span class=&quot;token punctuation&quot;&gt;&quot;&lt;/span&gt;/header-nav-3/&lt;span class=&quot;token punctuation&quot;&gt;&quot;&lt;/span&gt;&lt;/span&gt;&lt;span class=&quot;token punctuation&quot;&gt;&gt;&lt;/span&gt;&lt;/span&gt;Header nav item 3&lt;span class=&quot;token tag&quot;&gt;&lt;span class=&quot;token tag&quot;&gt;&lt;span class=&quot;token punctuation&quot;&gt;&amp;lt;/&lt;/span&gt;a&lt;/span&gt;&lt;span class=&quot;token punctuation&quot;&gt;&gt;&lt;/span&gt;&lt;/span&gt;&lt;span class=&quot;token tag&quot;&gt;&lt;span class=&quot;token tag&quot;&gt;&lt;span class=&quot;token punctuation&quot;&gt;&amp;lt;/&lt;/span&gt;li&lt;/span&gt;&lt;span class=&quot;token punctuation&quot;&gt;&gt;&lt;/span&gt;&lt;/span&gt;
&lt;span class=&quot;token tag&quot;&gt;&lt;span class=&quot;token tag&quot;&gt;&lt;span class=&quot;token punctuation&quot;&gt;&amp;lt;/&lt;/span&gt;ul&lt;/span&gt;&lt;span class=&quot;token punctuation&quot;&gt;&gt;&lt;/span&gt;&lt;/span&gt;
&lt;span class=&quot;token tag&quot;&gt;&lt;span class=&quot;token tag&quot;&gt;&lt;span class=&quot;token punctuation&quot;&gt;&amp;lt;/&lt;/span&gt;nav&lt;/span&gt;&lt;span class=&quot;token punctuation&quot;&gt;&gt;&lt;/span&gt;&lt;/span&gt;
&lt;span class=&quot;token tag&quot;&gt;&lt;span class=&quot;token tag&quot;&gt;&lt;span class=&quot;token punctuation&quot;&gt;&amp;lt;/&lt;/span&gt;header&lt;/span&gt;&lt;span class=&quot;token punctuation&quot;&gt;&gt;&lt;/span&gt;&lt;/span&gt;&lt;/code&gt;&lt;/pre&gt;
&lt;p&gt;and our footer will be similar:&lt;/p&gt;
&lt;pre class=&quot;language-html&quot;&gt;&lt;code class=&quot;language-html&quot;&gt;&lt;span class=&quot;token tag&quot;&gt;&lt;span class=&quot;token tag&quot;&gt;&lt;span class=&quot;token punctuation&quot;&gt;&amp;lt;&lt;/span&gt;footer&lt;/span&gt;&lt;span class=&quot;token punctuation&quot;&gt;&gt;&lt;/span&gt;&lt;/span&gt;
&lt;span class=&quot;token tag&quot;&gt;&lt;span class=&quot;token tag&quot;&gt;&lt;span class=&quot;token punctuation&quot;&gt;&amp;lt;&lt;/span&gt;nav&lt;/span&gt; &lt;span class=&quot;token attr-name&quot;&gt;aria-label&lt;/span&gt;&lt;span class=&quot;token attr-value&quot;&gt;&lt;span class=&quot;token punctuation attr-equals&quot;&gt;=&lt;/span&gt;&lt;span class=&quot;token punctuation&quot;&gt;&quot;&lt;/span&gt;footer navigation&lt;span class=&quot;token punctuation&quot;&gt;&quot;&lt;/span&gt;&lt;/span&gt;&lt;span class=&quot;token punctuation&quot;&gt;&gt;&lt;/span&gt;&lt;/span&gt;
&lt;span class=&quot;token tag&quot;&gt;&lt;span class=&quot;token tag&quot;&gt;&lt;span class=&quot;token punctuation&quot;&gt;&amp;lt;&lt;/span&gt;ul&lt;/span&gt;&lt;span class=&quot;token punctuation&quot;&gt;&gt;&lt;/span&gt;&lt;/span&gt;
&lt;span class=&quot;token tag&quot;&gt;&lt;span class=&quot;token tag&quot;&gt;&lt;span class=&quot;token punctuation&quot;&gt;&amp;lt;&lt;/span&gt;li&lt;/span&gt;&lt;span class=&quot;token punctuation&quot;&gt;&gt;&lt;/span&gt;&lt;/span&gt;&lt;span class=&quot;token tag&quot;&gt;&lt;span class=&quot;token tag&quot;&gt;&lt;span class=&quot;token punctuation&quot;&gt;&amp;lt;&lt;/span&gt;a&lt;/span&gt; &lt;span class=&quot;token attr-name&quot;&gt;href&lt;/span&gt;&lt;span class=&quot;token attr-value&quot;&gt;&lt;span class=&quot;token punctuation attr-equals&quot;&gt;=&lt;/span&gt;&lt;span class=&quot;token punctuation&quot;&gt;&quot;&lt;/span&gt;/footer-nav-1/&lt;span class=&quot;token punctuation&quot;&gt;&quot;&lt;/span&gt;&lt;/span&gt;&lt;span class=&quot;token punctuation&quot;&gt;&gt;&lt;/span&gt;&lt;/span&gt;Footer nav item 1&lt;span class=&quot;token tag&quot;&gt;&lt;span class=&quot;token tag&quot;&gt;&lt;span class=&quot;token punctuation&quot;&gt;&amp;lt;/&lt;/span&gt;a&lt;/span&gt;&lt;span class=&quot;token punctuation&quot;&gt;&gt;&lt;/span&gt;&lt;/span&gt;&lt;span class=&quot;token tag&quot;&gt;&lt;span class=&quot;token tag&quot;&gt;&lt;span class=&quot;token punctuation&quot;&gt;&amp;lt;/&lt;/span&gt;li&lt;/span&gt;&lt;span class=&quot;token punctuation&quot;&gt;&gt;&lt;/span&gt;&lt;/span&gt;
&lt;span class=&quot;token tag&quot;&gt;&lt;span class=&quot;token tag&quot;&gt;&lt;span class=&quot;token punctuation&quot;&gt;&amp;lt;&lt;/span&gt;li&lt;/span&gt;&lt;span class=&quot;token punctuation&quot;&gt;&gt;&lt;/span&gt;&lt;/span&gt;&lt;span class=&quot;token tag&quot;&gt;&lt;span class=&quot;token tag&quot;&gt;&lt;span class=&quot;token punctuation&quot;&gt;&amp;lt;&lt;/span&gt;a&lt;/span&gt; &lt;span class=&quot;token attr-name&quot;&gt;href&lt;/span&gt;&lt;span class=&quot;token attr-value&quot;&gt;&lt;span class=&quot;token punctuation attr-equals&quot;&gt;=&lt;/span&gt;&lt;span class=&quot;token punctuation&quot;&gt;&quot;&lt;/span&gt;/footer-nav-2/&lt;span class=&quot;token punctuation&quot;&gt;&quot;&lt;/span&gt;&lt;/span&gt;&lt;span class=&quot;token punctuation&quot;&gt;&gt;&lt;/span&gt;&lt;/span&gt;Footer nav item 2&lt;span class=&quot;token tag&quot;&gt;&lt;span class=&quot;token tag&quot;&gt;&lt;span class=&quot;token punctuation&quot;&gt;&amp;lt;/&lt;/span&gt;a&lt;/span&gt;&lt;span class=&quot;token punctuation&quot;&gt;&gt;&lt;/span&gt;&lt;/span&gt;&lt;span class=&quot;token tag&quot;&gt;&lt;span class=&quot;token tag&quot;&gt;&lt;span class=&quot;token punctuation&quot;&gt;&amp;lt;/&lt;/span&gt;li&lt;/span&gt;&lt;span class=&quot;token punctuation&quot;&gt;&gt;&lt;/span&gt;&lt;/span&gt;
&lt;span class=&quot;token tag&quot;&gt;&lt;span class=&quot;token tag&quot;&gt;&lt;span class=&quot;token punctuation&quot;&gt;&amp;lt;/&lt;/span&gt;ul&lt;/span&gt;&lt;span class=&quot;token punctuation&quot;&gt;&gt;&lt;/span&gt;&lt;/span&gt;
&lt;span class=&quot;token tag&quot;&gt;&lt;span class=&quot;token tag&quot;&gt;&lt;span class=&quot;token punctuation&quot;&gt;&amp;lt;/&lt;/span&gt;nav&lt;/span&gt;&lt;span class=&quot;token punctuation&quot;&gt;&gt;&lt;/span&gt;&lt;/span&gt;
&lt;span class=&quot;token tag&quot;&gt;&lt;span class=&quot;token tag&quot;&gt;&lt;span class=&quot;token punctuation&quot;&gt;&amp;lt;/&lt;/span&gt;footer&lt;/span&gt;&lt;span class=&quot;token punctuation&quot;&gt;&gt;&lt;/span&gt;&lt;/span&gt;&lt;/code&gt;&lt;/pre&gt;
&lt;h3 id=&quot;skip-link&quot;&gt;skip link&lt;/h3&gt;
&lt;p&gt;Let&#39;s handle the skip link first. Your skip link can be hard to style without visual feedback. Commonly, they start hidden and only appear when receiving keyboard focus. It&#39;s entirely reasonable, in my opinion, to leave it visible. &lt;strong&gt;I actually like this as a design choice&lt;/strong&gt;, as it highlights the idea and hopefully purpose of a skip link to sighted readers. However, if you want to hide it, there&#39;s a lot (a &lt;em&gt;lot&lt;/em&gt;) of ways to do so. Using &lt;code&gt;position: absolute&lt;/code&gt;, &lt;code&gt;left&lt;/code&gt;, and &lt;code&gt;top&lt;/code&gt;, we can place the skip link outside of the page, then move it in when it receives focus. We&#39;ll also stick a background on there to prevent the text from overlaying our site title and becoming illegible.&lt;/p&gt;
&lt;pre class=&quot;language-css&quot;&gt;&lt;code class=&quot;language-css&quot;&gt;&lt;span class=&quot;token selector&quot;&gt;#skip&lt;/span&gt; &lt;span class=&quot;token punctuation&quot;&gt;{&lt;/span&gt;
&lt;span class=&quot;token property&quot;&gt;background-color&lt;/span&gt;&lt;span class=&quot;token punctuation&quot;&gt;:&lt;/span&gt; &lt;span class=&quot;token function&quot;&gt;var&lt;/span&gt;&lt;span class=&quot;token punctuation&quot;&gt;(&lt;/span&gt;--color-bg&lt;span class=&quot;token punctuation&quot;&gt;)&lt;/span&gt;&lt;span class=&quot;token punctuation&quot;&gt;;&lt;/span&gt;
&lt;span class=&quot;token property&quot;&gt;position&lt;/span&gt;&lt;span class=&quot;token punctuation&quot;&gt;:&lt;/span&gt; absolute&lt;span class=&quot;token punctuation&quot;&gt;;&lt;/span&gt;
&lt;span class=&quot;token property&quot;&gt;left&lt;/span&gt;&lt;span class=&quot;token punctuation&quot;&gt;:&lt;/span&gt; -999px&lt;span class=&quot;token punctuation&quot;&gt;;&lt;/span&gt;
&lt;span class=&quot;token property&quot;&gt;top&lt;/span&gt;&lt;span class=&quot;token punctuation&quot;&gt;:&lt;/span&gt; -999px&lt;span class=&quot;token punctuation&quot;&gt;;&lt;/span&gt;
&lt;span class=&quot;token punctuation&quot;&gt;}&lt;/span&gt;
&lt;span class=&quot;token selector&quot;&gt;#skip:focus-visible&lt;/span&gt; &lt;span class=&quot;token punctuation&quot;&gt;{&lt;/span&gt;
&lt;span class=&quot;token property&quot;&gt;left&lt;/span&gt;&lt;span class=&quot;token punctuation&quot;&gt;:&lt;/span&gt; 10%&lt;span class=&quot;token punctuation&quot;&gt;;&lt;/span&gt;
&lt;span class=&quot;token property&quot;&gt;top&lt;/span&gt;&lt;span class=&quot;token punctuation&quot;&gt;:&lt;/span&gt; 5%&lt;span class=&quot;token punctuation&quot;&gt;;&lt;/span&gt;
&lt;span class=&quot;token punctuation&quot;&gt;}&lt;/span&gt;&lt;/code&gt;&lt;/pre&gt;
&lt;h3 id=&quot;site-title&quot;&gt;site title&lt;/h3&gt;
&lt;p&gt;I won&#39;t do much here, but I am going to remove the underline (which is the default for links). It&#39;s commonly understood that the site title (or sometimes just the word &amp;quot;home&amp;quot;) links to the home page, and the underline is unnecessary visual clutter.&lt;/p&gt;
&lt;pre class=&quot;language-css&quot;&gt;&lt;code class=&quot;language-css&quot;&gt;&lt;span class=&quot;token selector&quot;&gt;header h2&lt;/span&gt; &lt;span class=&quot;token punctuation&quot;&gt;{&lt;/span&gt;
&lt;span class=&quot;token property&quot;&gt;text-decoration&lt;/span&gt;&lt;span class=&quot;token punctuation&quot;&gt;:&lt;/span&gt; none&lt;span class=&quot;token punctuation&quot;&gt;;&lt;/span&gt;
&lt;span class=&quot;token punctuation&quot;&gt;}&lt;/span&gt;&lt;/code&gt;&lt;/pre&gt;
&lt;h3 id=&quot;flexbox-navs&quot;&gt;flexbox navs&lt;/h3&gt;
&lt;p&gt;We&#39;re going to dip our toes into flexbox for this one - it allows us to make content fall neatly into rows or columns. It&#39;s pretty powerful, and can get pretty weird, but we&#39;ll keep it bare-bones.&lt;/p&gt;
&lt;p&gt;By default, the unordered lists in the navs will display with each list item on a new line with a bullet point in front of the list item. Let&#39;s take up less space by putting them all on one line. I&#39;m going to center the items, and I&#39;m going to allow them to wrap onto a new line. I&#39;m also taking the bullet points off of the list items and allowing for a bit of space between each item.&lt;/p&gt;
&lt;pre class=&quot;language-css&quot;&gt;&lt;code class=&quot;language-css&quot;&gt;&lt;span class=&quot;token selector&quot;&gt;nav ul&lt;/span&gt; &lt;span class=&quot;token punctuation&quot;&gt;{&lt;/span&gt;
&lt;span class=&quot;token property&quot;&gt;display&lt;/span&gt;&lt;span class=&quot;token punctuation&quot;&gt;:&lt;/span&gt; flex&lt;span class=&quot;token punctuation&quot;&gt;;&lt;/span&gt;
&lt;span class=&quot;token property&quot;&gt;justify-content&lt;/span&gt;&lt;span class=&quot;token punctuation&quot;&gt;:&lt;/span&gt; center&lt;span class=&quot;token punctuation&quot;&gt;;&lt;/span&gt;
&lt;span class=&quot;token property&quot;&gt;flex-flow&lt;/span&gt;&lt;span class=&quot;token punctuation&quot;&gt;:&lt;/span&gt; row wrap&lt;span class=&quot;token punctuation&quot;&gt;;&lt;/span&gt;
&lt;span class=&quot;token property&quot;&gt;list-style&lt;/span&gt;&lt;span class=&quot;token punctuation&quot;&gt;:&lt;/span&gt; none&lt;span class=&quot;token punctuation&quot;&gt;;&lt;/span&gt;
&lt;span class=&quot;token property&quot;&gt;gap&lt;/span&gt;&lt;span class=&quot;token punctuation&quot;&gt;:&lt;/span&gt; 1rem&lt;span class=&quot;token punctuation&quot;&gt;;&lt;/span&gt;
&lt;span class=&quot;token punctuation&quot;&gt;}&lt;/span&gt;&lt;/code&gt;&lt;/pre&gt;
&lt;h3 id=&quot;aria-current&quot;&gt;aria-current&lt;/h3&gt;
&lt;p&gt;Screen reader users get &lt;code&gt;aria-current&lt;/code&gt; information, and it can be helpful to present it to sighted users as well. There are of course many ways to do this with color, but we&#39;ll avoid that. Let&#39;s add carets before and after the current page link to indicate this. We&#39;ll scope them only to the header and footer just in case we run across a weird case.&lt;/p&gt;
&lt;pre class=&quot;language-css&quot;&gt;&lt;code class=&quot;language-css&quot;&gt;&lt;span class=&quot;token selector&quot;&gt;header a[aria-current=&quot;page&quot;]::before,
footer a[aria-current=&quot;page&quot;]::before&lt;/span&gt; &lt;span class=&quot;token punctuation&quot;&gt;{&lt;/span&gt;
&lt;span class=&quot;token property&quot;&gt;content&lt;/span&gt;&lt;span class=&quot;token punctuation&quot;&gt;:&lt;/span&gt; &lt;span class=&quot;token string&quot;&gt;&quot;&gt; &quot;&lt;/span&gt; / &lt;span class=&quot;token string&quot;&gt;&quot;&quot;&lt;/span&gt;&lt;span class=&quot;token punctuation&quot;&gt;;&lt;/span&gt;
&lt;span class=&quot;token punctuation&quot;&gt;}&lt;/span&gt;
&lt;span class=&quot;token selector&quot;&gt;header a[aria-current=&quot;page&quot;]::after,
footer a[aria-current=&quot;page&quot;]::after&lt;/span&gt; &lt;span class=&quot;token punctuation&quot;&gt;{&lt;/span&gt;
&lt;span class=&quot;token property&quot;&gt;content&lt;/span&gt;&lt;span class=&quot;token punctuation&quot;&gt;:&lt;/span&gt; &lt;span class=&quot;token string&quot;&gt;&quot; &amp;lt;&quot;&lt;/span&gt; / &lt;span class=&quot;token string&quot;&gt;&quot;&quot;&lt;/span&gt;&lt;span class=&quot;token punctuation&quot;&gt;;&lt;/span&gt;
&lt;span class=&quot;token punctuation&quot;&gt;}&lt;/span&gt;&lt;/code&gt;&lt;/pre&gt;
&lt;p&gt;The content after the forward slash is what is conveyed to screen reader users. The carets are not useful from a screen reader perspective, so this excerpts them.&lt;/p&gt;
&lt;h3 id=&quot;separating-header-and-footer-from-main&quot;&gt;separating header and footer from main&lt;/h3&gt;
&lt;p&gt;The header and footer can visually run into the main text area if there&#39;s not extra space or a border. We&#39;ll keep it simple with borders. If you&#39;re not using an accent color, use your text color instead.&lt;/p&gt;
&lt;pre class=&quot;language-css&quot;&gt;&lt;code class=&quot;language-css&quot;&gt;&lt;span class=&quot;token selector&quot;&gt;header&lt;/span&gt; &lt;span class=&quot;token punctuation&quot;&gt;{&lt;/span&gt;
&lt;span class=&quot;token property&quot;&gt;border-bottom&lt;/span&gt;&lt;span class=&quot;token punctuation&quot;&gt;:&lt;/span&gt; solid &lt;span class=&quot;token function&quot;&gt;var&lt;/span&gt;&lt;span class=&quot;token punctuation&quot;&gt;(&lt;/span&gt;--color-accent&lt;span class=&quot;token punctuation&quot;&gt;)&lt;/span&gt;&lt;span class=&quot;token punctuation&quot;&gt;;&lt;/span&gt;
&lt;span class=&quot;token punctuation&quot;&gt;}&lt;/span&gt;
&lt;span class=&quot;token selector&quot;&gt;footer&lt;/span&gt; &lt;span class=&quot;token punctuation&quot;&gt;{&lt;/span&gt;
&lt;span class=&quot;token property&quot;&gt;border-top&lt;/span&gt;&lt;span class=&quot;token punctuation&quot;&gt;:&lt;/span&gt; solid &lt;span class=&quot;token function&quot;&gt;var&lt;/span&gt;&lt;span class=&quot;token punctuation&quot;&gt;(&lt;/span&gt;--color-accent&lt;span class=&quot;token punctuation&quot;&gt;)&lt;/span&gt;&lt;span class=&quot;token punctuation&quot;&gt;;&lt;/span&gt;
&lt;span class=&quot;token punctuation&quot;&gt;}&lt;/span&gt;&lt;/code&gt;&lt;/pre&gt;
&lt;h2 id=&quot;print-media&quot;&gt;print media&lt;/h2&gt;
&lt;p&gt;There&#39;s a couple straightforward additions we can make to handle printing the site cleanly and making best use of the physical paper space. Remove the header and footer, reset the width and colors to limit ink usage, and print link URLs after the link.&lt;/p&gt;
&lt;pre class=&quot;language-css&quot;&gt;&lt;code class=&quot;language-css&quot;&gt;&lt;span class=&quot;token atrule&quot;&gt;&lt;span class=&quot;token rule&quot;&gt;@media&lt;/span&gt; print&lt;/span&gt; &lt;span class=&quot;token punctuation&quot;&gt;{&lt;/span&gt;
&lt;span class=&quot;token selector&quot;&gt;header,
footer,
nav&lt;/span&gt; &lt;span class=&quot;token punctuation&quot;&gt;{&lt;/span&gt;
&lt;span class=&quot;token property&quot;&gt;display&lt;/span&gt;&lt;span class=&quot;token punctuation&quot;&gt;:&lt;/span&gt; none&lt;span class=&quot;token punctuation&quot;&gt;;&lt;/span&gt;
&lt;span class=&quot;token punctuation&quot;&gt;}&lt;/span&gt;
&lt;span class=&quot;token selector&quot;&gt;body&lt;/span&gt; &lt;span class=&quot;token punctuation&quot;&gt;{&lt;/span&gt;
&lt;span class=&quot;token property&quot;&gt;background-color&lt;/span&gt;&lt;span class=&quot;token punctuation&quot;&gt;:&lt;/span&gt; #fff&lt;span class=&quot;token punctuation&quot;&gt;;&lt;/span&gt;
&lt;span class=&quot;token property&quot;&gt;width&lt;/span&gt;&lt;span class=&quot;token punctuation&quot;&gt;:&lt;/span&gt; 95vw&lt;span class=&quot;token punctuation&quot;&gt;;&lt;/span&gt;
&lt;span class=&quot;token punctuation&quot;&gt;}&lt;/span&gt;
&lt;span class=&quot;token selector&quot;&gt;body,
h1, h2, h3, h4, h5,
a&lt;/span&gt; &lt;span class=&quot;token punctuation&quot;&gt;{&lt;/span&gt;
&lt;span class=&quot;token property&quot;&gt;color&lt;/span&gt;&lt;span class=&quot;token punctuation&quot;&gt;:&lt;/span&gt; #000&lt;span class=&quot;token punctuation&quot;&gt;;&lt;/span&gt;
&lt;span class=&quot;token punctuation&quot;&gt;}&lt;/span&gt;
&lt;span class=&quot;token selector&quot;&gt;a::after&lt;/span&gt; &lt;span class=&quot;token punctuation&quot;&gt;{&lt;/span&gt;
&lt;span class=&quot;token property&quot;&gt;content&lt;/span&gt;&lt;span class=&quot;token punctuation&quot;&gt;:&lt;/span&gt; &lt;span class=&quot;token string&quot;&gt;&quot; (&quot;&lt;/span&gt; &lt;span class=&quot;token function&quot;&gt;attr&lt;/span&gt;&lt;span class=&quot;token punctuation&quot;&gt;(&lt;/span&gt;href&lt;span class=&quot;token punctuation&quot;&gt;)&lt;/span&gt; &lt;span class=&quot;token string&quot;&gt;&quot;)&quot;&lt;/span&gt;&lt;span class=&quot;token punctuation&quot;&gt;;&lt;/span&gt;
&lt;span class=&quot;token punctuation&quot;&gt;}&lt;/span&gt;
&lt;span class=&quot;token punctuation&quot;&gt;}&lt;/span&gt;&lt;/code&gt;&lt;/pre&gt;
&lt;h2 id=&quot;feedback&quot;&gt;feedback&lt;/h2&gt;
&lt;p&gt;Did I make a mistake? Is there more I could add? &lt;a href=&quot;https://leecat.art/contact/&quot;&gt;Reach out&lt;/a&gt;!&lt;/p&gt;
&lt;h2 id=&quot;result&quot;&gt;result&lt;/h2&gt;
&lt;p&gt;Here&#39;s our outcome.&lt;/p&gt;
&lt;pre class=&quot;language-css&quot;&gt;&lt;code class=&quot;language-css&quot;&gt;&lt;span class=&quot;token selector&quot;&gt;:root&lt;/span&gt; &lt;span class=&quot;token punctuation&quot;&gt;{&lt;/span&gt;
&lt;span class=&quot;token property&quot;&gt;color-scheme&lt;/span&gt;&lt;span class=&quot;token punctuation&quot;&gt;:&lt;/span&gt; light dark&lt;span class=&quot;token punctuation&quot;&gt;;&lt;/span&gt;
&lt;span class=&quot;token property&quot;&gt;--color-light&lt;/span&gt;&lt;span class=&quot;token punctuation&quot;&gt;:&lt;/span&gt; #ddd&lt;span class=&quot;token punctuation&quot;&gt;;&lt;/span&gt;
&lt;span class=&quot;token property&quot;&gt;--color-dark&lt;/span&gt;&lt;span class=&quot;token punctuation&quot;&gt;:&lt;/span&gt; #222&lt;span class=&quot;token punctuation&quot;&gt;;&lt;/span&gt;
&lt;span class=&quot;token property&quot;&gt;--color-teal&lt;/span&gt;&lt;span class=&quot;token punctuation&quot;&gt;:&lt;/span&gt; #014d4e&lt;span class=&quot;token punctuation&quot;&gt;;&lt;/span&gt;
&lt;span class=&quot;token property&quot;&gt;--color-pink&lt;/span&gt;&lt;span class=&quot;token punctuation&quot;&gt;:&lt;/span&gt; #ffb2d0&lt;span class=&quot;token punctuation&quot;&gt;;&lt;/span&gt;
&lt;span class=&quot;token property&quot;&gt;--color-bg&lt;/span&gt;&lt;span class=&quot;token punctuation&quot;&gt;:&lt;/span&gt; &lt;span class=&quot;token function&quot;&gt;light-dark&lt;/span&gt;&lt;span class=&quot;token punctuation&quot;&gt;(&lt;/span&gt;&lt;span class=&quot;token function&quot;&gt;var&lt;/span&gt;&lt;span class=&quot;token punctuation&quot;&gt;(&lt;/span&gt;--color-light&lt;span class=&quot;token punctuation&quot;&gt;)&lt;/span&gt;&lt;span class=&quot;token punctuation&quot;&gt;,&lt;/span&gt; &lt;span class=&quot;token function&quot;&gt;var&lt;/span&gt;&lt;span class=&quot;token punctuation&quot;&gt;(&lt;/span&gt;--color-dark&lt;span class=&quot;token punctuation&quot;&gt;)&lt;/span&gt;&lt;span class=&quot;token punctuation&quot;&gt;)&lt;/span&gt;&lt;span class=&quot;token punctuation&quot;&gt;;&lt;/span&gt;
&lt;span class=&quot;token property&quot;&gt;--color-text&lt;/span&gt;&lt;span class=&quot;token punctuation&quot;&gt;:&lt;/span&gt; &lt;span class=&quot;token function&quot;&gt;light-dark&lt;/span&gt;&lt;span class=&quot;token punctuation&quot;&gt;(&lt;/span&gt;&lt;span class=&quot;token function&quot;&gt;var&lt;/span&gt;&lt;span class=&quot;token punctuation&quot;&gt;(&lt;/span&gt;--color-dark&lt;span class=&quot;token punctuation&quot;&gt;)&lt;/span&gt;&lt;span class=&quot;token punctuation&quot;&gt;,&lt;/span&gt; &lt;span class=&quot;token function&quot;&gt;var&lt;/span&gt;&lt;span class=&quot;token punctuation&quot;&gt;(&lt;/span&gt;--color-light&lt;span class=&quot;token punctuation&quot;&gt;)&lt;/span&gt;&lt;span class=&quot;token punctuation&quot;&gt;)&lt;/span&gt;&lt;span class=&quot;token punctuation&quot;&gt;;&lt;/span&gt;
&lt;span class=&quot;token property&quot;&gt;--color-accent&lt;/span&gt;&lt;span class=&quot;token punctuation&quot;&gt;:&lt;/span&gt; &lt;span class=&quot;token function&quot;&gt;light-dark&lt;/span&gt;&lt;span class=&quot;token punctuation&quot;&gt;(&lt;/span&gt;&lt;span class=&quot;token function&quot;&gt;var&lt;/span&gt;&lt;span class=&quot;token punctuation&quot;&gt;(&lt;/span&gt;--color-teal&lt;span class=&quot;token punctuation&quot;&gt;)&lt;/span&gt;&lt;span class=&quot;token punctuation&quot;&gt;,&lt;/span&gt; &lt;span class=&quot;token function&quot;&gt;var&lt;/span&gt;&lt;span class=&quot;token punctuation&quot;&gt;(&lt;/span&gt;--color-pink&lt;span class=&quot;token punctuation&quot;&gt;)&lt;/span&gt;&lt;span class=&quot;token punctuation&quot;&gt;)&lt;/span&gt;&lt;span class=&quot;token punctuation&quot;&gt;;&lt;/span&gt;
&lt;span class=&quot;token punctuation&quot;&gt;}&lt;/span&gt;
&lt;span class=&quot;token selector&quot;&gt;body&lt;/span&gt; &lt;span class=&quot;token punctuation&quot;&gt;{&lt;/span&gt;
&lt;span class=&quot;token property&quot;&gt;color&lt;/span&gt;&lt;span class=&quot;token punctuation&quot;&gt;:&lt;/span&gt; &lt;span class=&quot;token function&quot;&gt;var&lt;/span&gt;&lt;span class=&quot;token punctuation&quot;&gt;(&lt;/span&gt;--color-text&lt;span class=&quot;token punctuation&quot;&gt;)&lt;/span&gt;&lt;span class=&quot;token punctuation&quot;&gt;;&lt;/span&gt;
&lt;span class=&quot;token property&quot;&gt;background-color&lt;/span&gt;&lt;span class=&quot;token punctuation&quot;&gt;:&lt;/span&gt; &lt;span class=&quot;token function&quot;&gt;var&lt;/span&gt;&lt;span class=&quot;token punctuation&quot;&gt;(&lt;/span&gt;--color-bg&lt;span class=&quot;token punctuation&quot;&gt;)&lt;/span&gt;&lt;span class=&quot;token punctuation&quot;&gt;;&lt;/span&gt;
&lt;span class=&quot;token property&quot;&gt;font-family&lt;/span&gt;&lt;span class=&quot;token punctuation&quot;&gt;:&lt;/span&gt; sans-serif&lt;span class=&quot;token punctuation&quot;&gt;;&lt;/span&gt;
&lt;span class=&quot;token property&quot;&gt;width&lt;/span&gt;&lt;span class=&quot;token punctuation&quot;&gt;:&lt;/span&gt; 65%&lt;span class=&quot;token punctuation&quot;&gt;;&lt;/span&gt;
&lt;span class=&quot;token property&quot;&gt;max-width&lt;/span&gt;&lt;span class=&quot;token punctuation&quot;&gt;:&lt;/span&gt; 1800px&lt;span class=&quot;token punctuation&quot;&gt;;&lt;/span&gt;
&lt;span class=&quot;token property&quot;&gt;margin&lt;/span&gt;&lt;span class=&quot;token punctuation&quot;&gt;:&lt;/span&gt; 1rem auto&lt;span class=&quot;token punctuation&quot;&gt;;&lt;/span&gt;
&lt;span class=&quot;token punctuation&quot;&gt;}&lt;/span&gt;
&lt;span class=&quot;token atrule&quot;&gt;&lt;span class=&quot;token rule&quot;&gt;@media&lt;/span&gt; &lt;span class=&quot;token punctuation&quot;&gt;(&lt;/span&gt;&lt;span class=&quot;token property&quot;&gt;max-width&lt;/span&gt;&lt;span class=&quot;token punctuation&quot;&gt;:&lt;/span&gt; 1100px&lt;span class=&quot;token punctuation&quot;&gt;)&lt;/span&gt;&lt;/span&gt; &lt;span class=&quot;token punctuation&quot;&gt;{&lt;/span&gt;
&lt;span class=&quot;token selector&quot;&gt;body&lt;/span&gt; &lt;span class=&quot;token punctuation&quot;&gt;{&lt;/span&gt;
&lt;span class=&quot;token property&quot;&gt;width&lt;/span&gt;&lt;span class=&quot;token punctuation&quot;&gt;:&lt;/span&gt; 85%&lt;span class=&quot;token punctuation&quot;&gt;;&lt;/span&gt;
&lt;span class=&quot;token punctuation&quot;&gt;}&lt;/span&gt;
&lt;span class=&quot;token punctuation&quot;&gt;}&lt;/span&gt;
&lt;span class=&quot;token atrule&quot;&gt;&lt;span class=&quot;token rule&quot;&gt;@media&lt;/span&gt; &lt;span class=&quot;token punctuation&quot;&gt;(&lt;/span&gt;&lt;span class=&quot;token property&quot;&gt;max-width&lt;/span&gt;&lt;span class=&quot;token punctuation&quot;&gt;:&lt;/span&gt; 650px&lt;span class=&quot;token punctuation&quot;&gt;)&lt;/span&gt;&lt;/span&gt; &lt;span class=&quot;token punctuation&quot;&gt;{&lt;/span&gt;
&lt;span class=&quot;token selector&quot;&gt;body&lt;/span&gt; &lt;span class=&quot;token punctuation&quot;&gt;{&lt;/span&gt;
&lt;span class=&quot;token property&quot;&gt;width&lt;/span&gt;&lt;span class=&quot;token punctuation&quot;&gt;:&lt;/span&gt; 92%&lt;span class=&quot;token punctuation&quot;&gt;;&lt;/span&gt;
&lt;span class=&quot;token punctuation&quot;&gt;}&lt;/span&gt;
&lt;span class=&quot;token punctuation&quot;&gt;}&lt;/span&gt;
&lt;span class=&quot;token comment&quot;&gt;/* Basic elements */&lt;/span&gt;
&lt;span class=&quot;token selector&quot;&gt;h1, h2, h3, h4, h5, h6&lt;/span&gt; &lt;span class=&quot;token punctuation&quot;&gt;{&lt;/span&gt;
&lt;span class=&quot;token property&quot;&gt;font-family&lt;/span&gt;&lt;span class=&quot;token punctuation&quot;&gt;:&lt;/span&gt; serif&lt;span class=&quot;token punctuation&quot;&gt;;&lt;/span&gt;
&lt;span class=&quot;token punctuation&quot;&gt;}&lt;/span&gt;
&lt;span class=&quot;token selector&quot;&gt;h1, h2, h3, h4, h5, h6,
a&lt;/span&gt; &lt;span class=&quot;token punctuation&quot;&gt;{&lt;/span&gt;
&lt;span class=&quot;token property&quot;&gt;color&lt;/span&gt;&lt;span class=&quot;token punctuation&quot;&gt;:&lt;/span&gt; &lt;span class=&quot;token function&quot;&gt;var&lt;/span&gt;&lt;span class=&quot;token punctuation&quot;&gt;(&lt;/span&gt;--color-accent&lt;span class=&quot;token punctuation&quot;&gt;)&lt;/span&gt;&lt;span class=&quot;token punctuation&quot;&gt;;&lt;/span&gt;
&lt;span class=&quot;token punctuation&quot;&gt;}&lt;/span&gt;
&lt;span class=&quot;token selector&quot;&gt;a&lt;/span&gt; &lt;span class=&quot;token punctuation&quot;&gt;{&lt;/span&gt;
&lt;span class=&quot;token property&quot;&gt;padding&lt;/span&gt;&lt;span class=&quot;token punctuation&quot;&gt;:&lt;/span&gt; .1rem&lt;span class=&quot;token punctuation&quot;&gt;;&lt;/span&gt;
&lt;span class=&quot;token property&quot;&gt;border-radius&lt;/span&gt;&lt;span class=&quot;token punctuation&quot;&gt;:&lt;/span&gt; .05rem&lt;span class=&quot;token punctuation&quot;&gt;;&lt;/span&gt;
&lt;span class=&quot;token punctuation&quot;&gt;}&lt;/span&gt;
&lt;span class=&quot;token selector&quot;&gt;a:focus-visible&lt;/span&gt; &lt;span class=&quot;token punctuation&quot;&gt;{&lt;/span&gt;
&lt;span class=&quot;token property&quot;&gt;outline&lt;/span&gt;&lt;span class=&quot;token punctuation&quot;&gt;:&lt;/span&gt; solid &lt;span class=&quot;token function&quot;&gt;var&lt;/span&gt;&lt;span class=&quot;token punctuation&quot;&gt;(&lt;/span&gt;--color-accent&lt;span class=&quot;token punctuation&quot;&gt;)&lt;/span&gt;&lt;span class=&quot;token punctuation&quot;&gt;;&lt;/span&gt;
&lt;span class=&quot;token punctuation&quot;&gt;}&lt;/span&gt;
&lt;span class=&quot;token selector&quot;&gt;img, picture, video, canvas, svg&lt;/span&gt; &lt;span class=&quot;token punctuation&quot;&gt;{&lt;/span&gt;
&lt;span class=&quot;token property&quot;&gt;display&lt;/span&gt;&lt;span class=&quot;token punctuation&quot;&gt;:&lt;/span&gt; block&lt;span class=&quot;token punctuation&quot;&gt;;&lt;/span&gt;
&lt;span class=&quot;token property&quot;&gt;max-width&lt;/span&gt;&lt;span class=&quot;token punctuation&quot;&gt;:&lt;/span&gt; 100%&lt;span class=&quot;token punctuation&quot;&gt;;&lt;/span&gt;
&lt;span class=&quot;token property&quot;&gt;margin&lt;/span&gt;&lt;span class=&quot;token punctuation&quot;&gt;:&lt;/span&gt; 0 auto&lt;span class=&quot;token punctuation&quot;&gt;;&lt;/span&gt;
&lt;span class=&quot;token punctuation&quot;&gt;}&lt;/span&gt;
&lt;span class=&quot;token comment&quot;&gt;/* Header, footer, nav */&lt;/span&gt;
&lt;span class=&quot;token selector&quot;&gt;header&lt;/span&gt; &lt;span class=&quot;token punctuation&quot;&gt;{&lt;/span&gt;
&lt;span class=&quot;token property&quot;&gt;border-bottom&lt;/span&gt;&lt;span class=&quot;token punctuation&quot;&gt;:&lt;/span&gt; solid &lt;span class=&quot;token function&quot;&gt;var&lt;/span&gt;&lt;span class=&quot;token punctuation&quot;&gt;(&lt;/span&gt;--color-accent&lt;span class=&quot;token punctuation&quot;&gt;)&lt;/span&gt;&lt;span class=&quot;token punctuation&quot;&gt;;&lt;/span&gt;
&lt;span class=&quot;token punctuation&quot;&gt;}&lt;/span&gt;
&lt;span class=&quot;token selector&quot;&gt;#skip&lt;/span&gt; &lt;span class=&quot;token punctuation&quot;&gt;{&lt;/span&gt;
&lt;span class=&quot;token property&quot;&gt;background-color&lt;/span&gt;&lt;span class=&quot;token punctuation&quot;&gt;:&lt;/span&gt; &lt;span class=&quot;token function&quot;&gt;var&lt;/span&gt;&lt;span class=&quot;token punctuation&quot;&gt;(&lt;/span&gt;--color-bg&lt;span class=&quot;token punctuation&quot;&gt;)&lt;/span&gt;&lt;span class=&quot;token punctuation&quot;&gt;;&lt;/span&gt;
&lt;span class=&quot;token property&quot;&gt;position&lt;/span&gt;&lt;span class=&quot;token punctuation&quot;&gt;:&lt;/span&gt; absolute&lt;span class=&quot;token punctuation&quot;&gt;;&lt;/span&gt;
&lt;span class=&quot;token property&quot;&gt;left&lt;/span&gt;&lt;span class=&quot;token punctuation&quot;&gt;:&lt;/span&gt; -999px&lt;span class=&quot;token punctuation&quot;&gt;;&lt;/span&gt;
&lt;span class=&quot;token property&quot;&gt;top&lt;/span&gt;&lt;span class=&quot;token punctuation&quot;&gt;:&lt;/span&gt; -999px&lt;span class=&quot;token punctuation&quot;&gt;;&lt;/span&gt;
&lt;span class=&quot;token punctuation&quot;&gt;}&lt;/span&gt;
&lt;span class=&quot;token selector&quot;&gt;#skip:focus-visible&lt;/span&gt; &lt;span class=&quot;token punctuation&quot;&gt;{&lt;/span&gt;
&lt;span class=&quot;token property&quot;&gt;left&lt;/span&gt;&lt;span class=&quot;token punctuation&quot;&gt;:&lt;/span&gt; 10%&lt;span class=&quot;token punctuation&quot;&gt;;&lt;/span&gt;
&lt;span class=&quot;token property&quot;&gt;top&lt;/span&gt;&lt;span class=&quot;token punctuation&quot;&gt;:&lt;/span&gt; 5%&lt;span class=&quot;token punctuation&quot;&gt;;&lt;/span&gt;
&lt;span class=&quot;token punctuation&quot;&gt;}&lt;/span&gt;
&lt;span class=&quot;token selector&quot;&gt;header a[aria-current=&quot;page&quot;]::before,
footer a[aria-current=&quot;page&quot;]::before&lt;/span&gt; &lt;span class=&quot;token punctuation&quot;&gt;{&lt;/span&gt;
&lt;span class=&quot;token property&quot;&gt;content&lt;/span&gt;&lt;span class=&quot;token punctuation&quot;&gt;:&lt;/span&gt; &lt;span class=&quot;token string&quot;&gt;&quot;&gt; &quot;&lt;/span&gt; / &lt;span class=&quot;token string&quot;&gt;&quot;&quot;&lt;/span&gt;&lt;span class=&quot;token punctuation&quot;&gt;;&lt;/span&gt;
&lt;span class=&quot;token punctuation&quot;&gt;}&lt;/span&gt;
&lt;span class=&quot;token selector&quot;&gt;header a[aria-current=&quot;page&quot;]::after,
footer a[aria-current=&quot;page&quot;]::after&lt;/span&gt; &lt;span class=&quot;token punctuation&quot;&gt;{&lt;/span&gt;
&lt;span class=&quot;token property&quot;&gt;content&lt;/span&gt;&lt;span class=&quot;token punctuation&quot;&gt;:&lt;/span&gt; &lt;span class=&quot;token string&quot;&gt;&quot; &amp;lt;&quot;&lt;/span&gt; / &lt;span class=&quot;token string&quot;&gt;&quot;&quot;&lt;/span&gt;&lt;span class=&quot;token punctuation&quot;&gt;;&lt;/span&gt;
&lt;span class=&quot;token punctuation&quot;&gt;}&lt;/span&gt;
&lt;span class=&quot;token selector&quot;&gt;header h2 a&lt;/span&gt; &lt;span class=&quot;token punctuation&quot;&gt;{&lt;/span&gt;
&lt;span class=&quot;token property&quot;&gt;text-decoration&lt;/span&gt;&lt;span class=&quot;token punctuation&quot;&gt;:&lt;/span&gt; none&lt;span class=&quot;token punctuation&quot;&gt;;&lt;/span&gt;
&lt;span class=&quot;token punctuation&quot;&gt;}&lt;/span&gt;
&lt;span class=&quot;token selector&quot;&gt;nav ul&lt;/span&gt; &lt;span class=&quot;token punctuation&quot;&gt;{&lt;/span&gt;
&lt;span class=&quot;token property&quot;&gt;display&lt;/span&gt;&lt;span class=&quot;token punctuation&quot;&gt;:&lt;/span&gt; flex&lt;span class=&quot;token punctuation&quot;&gt;;&lt;/span&gt;
&lt;span class=&quot;token property&quot;&gt;justify-content&lt;/span&gt;&lt;span class=&quot;token punctuation&quot;&gt;:&lt;/span&gt; center&lt;span class=&quot;token punctuation&quot;&gt;;&lt;/span&gt;
&lt;span class=&quot;token property&quot;&gt;flex-flow&lt;/span&gt;&lt;span class=&quot;token punctuation&quot;&gt;:&lt;/span&gt; row wrap&lt;span class=&quot;token punctuation&quot;&gt;;&lt;/span&gt;
&lt;span class=&quot;token property&quot;&gt;list-style&lt;/span&gt;&lt;span class=&quot;token punctuation&quot;&gt;:&lt;/span&gt; none&lt;span class=&quot;token punctuation&quot;&gt;;&lt;/span&gt;
&lt;span class=&quot;token property&quot;&gt;gap&lt;/span&gt;&lt;span class=&quot;token punctuation&quot;&gt;:&lt;/span&gt; 1rem&lt;span class=&quot;token punctuation&quot;&gt;;&lt;/span&gt;
&lt;span class=&quot;token punctuation&quot;&gt;}&lt;/span&gt;
&lt;span class=&quot;token selector&quot;&gt;footer&lt;/span&gt; &lt;span class=&quot;token punctuation&quot;&gt;{&lt;/span&gt;
&lt;span class=&quot;token property&quot;&gt;border-top&lt;/span&gt;&lt;span class=&quot;token punctuation&quot;&gt;:&lt;/span&gt; solid &lt;span class=&quot;token function&quot;&gt;var&lt;/span&gt;&lt;span class=&quot;token punctuation&quot;&gt;(&lt;/span&gt;--color-accent&lt;span class=&quot;token punctuation&quot;&gt;)&lt;/span&gt;&lt;span class=&quot;token punctuation&quot;&gt;;&lt;/span&gt;
&lt;span class=&quot;token punctuation&quot;&gt;}&lt;/span&gt;
&lt;span class=&quot;token comment&quot;&gt;/* Print media */&lt;/span&gt;
&lt;span class=&quot;token atrule&quot;&gt;&lt;span class=&quot;token rule&quot;&gt;@media&lt;/span&gt; print&lt;/span&gt; &lt;span class=&quot;token punctuation&quot;&gt;{&lt;/span&gt;
&lt;span class=&quot;token selector&quot;&gt;header,
footer,
nav&lt;/span&gt; &lt;span class=&quot;token punctuation&quot;&gt;{&lt;/span&gt;
&lt;span class=&quot;token property&quot;&gt;display&lt;/span&gt;&lt;span class=&quot;token punctuation&quot;&gt;:&lt;/span&gt; none&lt;span class=&quot;token punctuation&quot;&gt;;&lt;/span&gt;
&lt;span class=&quot;token punctuation&quot;&gt;}&lt;/span&gt;
&lt;span class=&quot;token selector&quot;&gt;body&lt;/span&gt; &lt;span class=&quot;token punctuation&quot;&gt;{&lt;/span&gt;
&lt;span class=&quot;token property&quot;&gt;background-color&lt;/span&gt;&lt;span class=&quot;token punctuation&quot;&gt;:&lt;/span&gt; #fff&lt;span class=&quot;token punctuation&quot;&gt;;&lt;/span&gt;
&lt;span class=&quot;token property&quot;&gt;width&lt;/span&gt;&lt;span class=&quot;token punctuation&quot;&gt;:&lt;/span&gt; 95vw&lt;span class=&quot;token punctuation&quot;&gt;;&lt;/span&gt;
&lt;span class=&quot;token punctuation&quot;&gt;}&lt;/span&gt;
&lt;span class=&quot;token selector&quot;&gt;body,
h1, h2, h3, h4, h5,
a&lt;/span&gt; &lt;span class=&quot;token punctuation&quot;&gt;{&lt;/span&gt;
&lt;span class=&quot;token property&quot;&gt;color&lt;/span&gt;&lt;span class=&quot;token punctuation&quot;&gt;:&lt;/span&gt; #000&lt;span class=&quot;token punctuation&quot;&gt;;&lt;/span&gt;
&lt;span class=&quot;token punctuation&quot;&gt;}&lt;/span&gt;
&lt;span class=&quot;token selector&quot;&gt;a::after&lt;/span&gt; &lt;span class=&quot;token punctuation&quot;&gt;{&lt;/span&gt;
&lt;span class=&quot;token property&quot;&gt;content&lt;/span&gt;&lt;span class=&quot;token punctuation&quot;&gt;:&lt;/span&gt; &lt;span class=&quot;token string&quot;&gt;&quot; (&quot;&lt;/span&gt; &lt;span class=&quot;token function&quot;&gt;attr&lt;/span&gt;&lt;span class=&quot;token punctuation&quot;&gt;(&lt;/span&gt;href&lt;span class=&quot;token punctuation&quot;&gt;)&lt;/span&gt; &lt;span class=&quot;token string&quot;&gt;&quot;)&quot;&lt;/span&gt;&lt;span class=&quot;token punctuation&quot;&gt;;&lt;/span&gt;
&lt;span class=&quot;token punctuation&quot;&gt;}&lt;/span&gt;
&lt;span class=&quot;token punctuation&quot;&gt;}&lt;/span&gt;&lt;/code&gt;&lt;/pre&gt;
</content>
</entry>
</feed>
fire-and-ice-handspun/index.html
+18 -18
View File
@@ -1887,29 +1887,15 @@ switch (currentThemeValue) {
<ol id="postlist">
<li class="post">
<a class="postlink" href="/hand-dyed-gold-handspun/">
<h2 data-ha-exclude="">hand-dyed gold handspun </h2>
<a class="postlink" href="/orion-handspun/">
<h2 data-ha-exclude="">orion handspun </h2>
<ul class="postlist-tags">
<li>yarn</li>
</ul>
<img src="/img/gold-handspun.jpg" alt="3 skeins, one small and two large, of a rich golden-orange handspun with light tonal effects, in about a DK weight" loading="lazy" decoding="async" width="1000" height="666">
</a>
</li>
<li class="post">
<a class="postlink" href="/handspun-yarn-in-party-mix-and-orange-gold/">
<h2 data-ha-exclude="">handspun yarn in party mix and orange-gold </h2>
<ul class="postlist-tags">
<li>yarn</li>
</ul>
<img src="/img/handspun0.jpg" alt="4 skeins of handspun yarn, two in a somewhat pastel multicolor and two in a blend of orange, gold, and white." loading="lazy" decoding="async" width="1000" height="750">
<img src="/img/orion-handspun.jpg" alt="3 skeins of handspun yarn, 1 large and 2 small. One of the small skeins is a little more inconsistent weight than the other two - this one was spun on drop spindle about 2 years ago. The other two are about a sport or maybe a DK weight. All three are a gold colorway with tiny hints of orange and a pale light green." loading="lazy" decoding="async" width="1000" height="666">
</a>
</li>
@@ -1928,6 +1914,20 @@ switch (currentThemeValue) {
</a>
</li>
<li class="post">
<a class="postlink" href="/light-grey-jacobs-handspun/">
<h2 data-ha-exclude="">light grey jacobs handspun </h2>
<ul class="postlist-tags">
<li>yarn</li>
</ul>
<img src="/img/light-grey-jacobs.jpg" alt="a skein of light grey handspun yarn" loading="lazy" decoding="async" width="1000" height="666">
</a>
</li>
</ol>
</section>
@@ -1980,6 +1980,6 @@ switch (currentThemeValue) {
</footer>
<!-- This page `/fire-and-ice-handspun/` was built on 2026-09-21T20:55:47.798Z -->
<!-- This page `/fire-and-ice-handspun/` was built on 2026-09-21T22:40:46.031Z -->
</body>
</html>
fishhook-pride-keychains/index.html
+19 -13
View File
@@ -1892,45 +1892,51 @@ switch (currentThemeValue) {
<ol id="postlist">
<li class="post">
<a class="postlink" href="/vertical-zipper-card-wallet/">
<h2 data-ha-exclude="">vertical zipper card wallet </h2>
<a class="postlink" href="/trans-wrongs-skull/">
<h2 data-ha-exclude="">trans wrongs skull </h2>
<ul class="postlist-tags">
<li>leather</li>
<li>print</li>
<li>card</li>
<li>sticker</li>
<li>pin</li>
<li>gender</li>
</ul>
<img src="/img/vertical-zipper-card-wallet.jpg" alt="A collage showing a hand-stitched leather card wallet with 3 card pockets, a hidden pocket, and a zippered coin pouch." loading="lazy" decoding="async" width="1000" height="1000">
<img src="/img/trans-wrongs-print.jpg" alt="A smiling skull with devil horns and a little spiked tail, and a speech bubble reading &#39;trans wrongs!&#39;" loading="lazy" decoding="async" width="1000" height="750">
</a>
</li>
<li class="post">
<a class="postlink" href="/little-critter-pouch/">
<h2 data-ha-exclude="">little critter pouch </h2>
<a class="postlink" href="/zipper-bifold-green/">
<h2 data-ha-exclude="">zipper bifold (green) </h2>
<ul class="postlist-tags">
<li>leather</li>
<li>highlight</li>
</ul>
<img src="/img/little-critter-pouch.jpg" alt="A leather pouch shaped a bit like a d10 but with eight sides. It has a rainbow zippered opening and a wristlet strap." loading="lazy" decoding="async" width="1000" height="750">
<img src="/img/zipper-bifold-green.jpg" alt="A collage showing a green leather wallet with a zippered pocket built into one external side." loading="lazy" decoding="async" width="1000" height="1332">
</a>
</li>
<li class="post">
<a class="postlink" href="/swoop-wallet/">
<h2 data-ha-exclude="">swoop wallet </h2>
<a class="postlink" href="/zipper-bifold/">
<h2 data-ha-exclude="">zipper bifold </h2>
<ul class="postlist-tags">
<li>leather</li>
</ul>
<img src="/img/swoop-wallet.jpg" alt="A collage showing 3 pictures of a red and brown leather card wallet. The red pocket separator folds around to the back to become a fetching curlicue." loading="lazy" decoding="async" width="900" height="1200">
<img src="/img/zipper-bifold.jpg" alt="A collage showing a hand-stitched leather bifold with a zippered coin pocket on one exterior side." loading="lazy" decoding="async" width="1000" height="1777">
</a>
</li>
@@ -1987,6 +1993,6 @@ switch (currentThemeValue) {
</footer>
<!-- This page `/fishhook-pride-keychains/` was built on 2026-09-21T20:55:47.792Z -->
<!-- This page `/fishhook-pride-keychains/` was built on 2026-09-21T22:40:46.026Z -->
</body>
</html>
five-of-them/index.html
+10 -20
View File
@@ -1899,53 +1899,43 @@ switch (currentThemeValue) {
<ol id="postlist">
<li class="post">
<a class="postlink" href="/fat-raccoon/">
<h2 data-ha-exclude="">fat raccoon </h2>
<a class="postlink" href="/tiny-mushrooms/">
<h2 data-ha-exclude="">tiny mushrooms </h2>
<ul class="postlist-tags">
<li>print</li>
<li>card</li>
<li>shirt</li>
</ul>
<img src="/img/fat-raccoon-print.jpg" alt="A block print in black ink of a rotund raccoon raising a welcoming paw towards the viewer." loading="lazy" decoding="async" width="1000" height="1333">
<img src="/img/pixels-mushrooms.jpg" alt="3 tiny mushroom stamps next to their impressions. They are all about 1 inch square. There is a chanterelle in yellow, a russula in pink, and witch&#39;s hat mycena in indigo." loading="lazy" decoding="async" width="1000" height="750">
</a>
</li>
<li class="post">
<a class="postlink" href="/congrats-on-the-autism-adhd/">
<h2 data-ha-exclude="">congrats on the autism/adhd </h2>
<a class="postlink" href="/block-printing-transfer-method/">
<h2 data-ha-exclude="">block printing transfer method </h2>
<ul class="postlist-tags">
<li>print</li>
<li>card</li>
</ul>
<img src="/img/congrats-on-the.jpg" alt="4 greeting cards propped up on a keyboard. On the right hand side, two cards read &#39;Congrats on the Autism&#39;; one in rainbow ink and one in black ink with a glittery gold shadow. On the left, two cards read &#39;Congrats on the ADHD&#39;; one in red and one in black, both with glittery pink shadows." loading="lazy" decoding="async" width="1000" height="562">
<img src="/img/transfer-wip.jpg" alt="A pink block of carving material with a printed design of a bird attached to it. The paper has been partially rubbed away (process described in this post) to reveal the inked design on the carving material." loading="lazy" decoding="async" width="1000" height="750">
</a>
</li>
<li class="post">
<a class="postlink" href="/slightly-weird-man-club/">
<h2 data-ha-exclude="">slightly weird man club </h2>
<a class="postlink" href="/brown-creeper/">
<h2 data-ha-exclude="">brown creeper </h2>
<ul class="postlist-tags">
<li>print</li>
<li>shirt</li>
<li>gender</li>
</ul>
<img src="/img/slightly-weird-man-club-print.jpg" alt="A print that reads &#39;slightly weird man club&#39; in a nonbinary flag colored gradient" loading="lazy" decoding="async" width="1000" height="750">
<img src="/img/brown-creeper-print.jpg" alt="2 copies of the same print side by side. In yellow, black, and purple ink, a brown creeper, a small bird, is depicted, well camouflaged against a tree trunk." loading="lazy" decoding="async" width="1000" height="1000">
</a>
</li>
@@ -2002,6 +1992,6 @@ switch (currentThemeValue) {
</footer>
<!-- This page `/five-of-them/` was built on 2026-09-21T20:55:47.787Z -->
<!-- This page `/five-of-them/` was built on 2026-09-21T22:40:46.021Z -->
</body>
</html>
fix-your-hearts/index.html
+38 -36
View File
@@ -1886,8 +1886,40 @@ switch (currentThemeValue) {
<ol id="postlist">
<li class="post">
<a class="postlink" href="/coming-out/">
<h2 data-ha-exclude="">coming out </h2>
<a class="postlink" href="/loon/">
<h2 data-ha-exclude="">loon </h2>
<ul class="postlist-tags">
<li>print</li>
</ul>
<img src="/img/loon-print.jpg" alt="A print of a loon rearing up with wings spread" loading="lazy" decoding="async" width="1000" height="1333">
</a>
</li>
<li class="post">
<a class="postlink" href="/kestrel-zine/">
<h2 data-ha-exclude="">kestrel zine </h2>
<ul class="postlist-tags">
<li>print</li>
<li>zine</li>
<li>highlight</li>
</ul>
<img src="/img/kestrel-zine.jpg" alt="A 5 photo collage showing the front and back cover as well as 3 full spreads of a folded zine about Kestrel, my dog, who is a 65lb Malinois with a goofy smile and floppy ears. it is printed in two layers of color, blue and orange, and each image depicts Kestrel in various posts... alert and watchful, resting, looking mopey, wearing a sweatshirt." loading="lazy" decoding="async" width="1000" height="1000">
</a>
</li>
<li class="post">
<a class="postlink" href="/queer/">
<h2 data-ha-exclude="">queer </h2>
<ul class="postlist-tags">
@@ -1895,44 +1927,14 @@ switch (currentThemeValue) {
<li>card</li>
<li>gender</li>
</ul>
<img src="/img/coming-out-card-print.jpg" alt="A card and print in the same design - a chick and a broken eggshell, and a simple font reading &#39;congrats on coming out of your shell&#39;" loading="lazy" decoding="async" width="1000" height="750">
</a>
</li>
<li class="post">
<a class="postlink" href="/become-unbutterable/">
<h2 data-ha-exclude="">become unbutterable </h2>
<ul class="postlist-tags">
<li>print</li>
</ul>
<img src="/img/become-unbutterable.jpg" alt="3 copies of the same stamp in orange ink are spread out next to the hand carved rubber stamp they were made from. They show a cat lying on his back with paws curled, holding a butter knife in his mouth. Text around the cat reads, in all caps, &#39;become unbutterable.&#39;" loading="lazy" decoding="async" width="1000" height="562">
</a>
</li>
<li class="post">
<a class="postlink" href="/anarchy-autism/">
<h2 data-ha-exclude="">anarchy autism </h2>
<ul class="postlist-tags">
<li>print</li>
<li>sticker</li>
<li>shirt</li>
<li>pin</li>
<li>gender</li>
</ul>
<img src="/img/anarchy-autism-rainbow-print.jpg" alt="A print in rainbow ink that says autism with the anarchy A." loading="lazy" decoding="async" width="1000" height="750">
<img src="/img/queer-print.jpg" alt="A print of the word queer in black ink. The letters are rounded with elongated oval negative space." loading="lazy" decoding="async" width="1000" height="750">
</a>
</li>
@@ -1989,6 +1991,6 @@ switch (currentThemeValue) {
</footer>
<!-- This page `/fix-your-hearts/` was built on 2026-09-21T20:55:47.796Z -->
<!-- This page `/fix-your-hearts/` was built on 2026-09-21T22:40:46.027Z -->
</body>
</html>
flatfish/index.html
+19 -13
View File
@@ -1899,24 +1899,30 @@ switch (currentThemeValue) {
<ol id="postlist">
<li class="post">
<a class="postlink" href="/bottom-growth/">
<h2 data-ha-exclude="">bottom growth (mature)</h2>
<a class="postlink" href="/boypussy/">
<h2 data-ha-exclude="">boypussy (mature)</h2>
<ul class="postlist-tags">
<li>print</li>
<li>sticker</li>
<li>shirt</li>
<li>pin</li>
<li>gender</li>
</ul>
<img src="/img/bottom-growth-prints.jpg" alt="4 copies of the same print in various color schemes, laid out in a 2x2 grid. The print shows testosterone-driven bottom growth of a clitoris. The color schemes are, clockwise from top right, brown on turquoise, red on cornsilk (muted yellow), violet on magenta, and mint green on lilac." class="blur" loading="lazy" decoding="async" width="1000" height="1000">
<img src="/img/boypussy-shirt.jpg" alt="A butch holding a chainsaw and wearing a tank top that reads boypussy in pink Barbie font." class="blur" loading="lazy" decoding="async" width="1000" height="1250">
</a>
</li>
<li class="post">
<a class="postlink" href="/nonbinary-flag/">
<h2 data-ha-exclude="">nonbinary flag </h2>
<a class="postlink" href="/hummingbird-become-ungovernable/">
<h2 data-ha-exclude="">hummingbird become ungovernable </h2>
<ul class="postlist-tags">
@@ -1924,28 +1930,28 @@ switch (currentThemeValue) {
<li>card</li>
<li>gender</li>
<li>shirt</li>
</ul>
<img src="/img/nonbinary-flag-print.jpg" alt="A print of a nonbinary flag waving, with yellow, white (uninked), purple, and black stripes." loading="lazy" decoding="async" width="1000" height="750">
<img src="/img/hummingbird-ungovernable-print.jpg" alt="A block print in black and orange ink of a rufous hummingbird, tail flared, hovering in midair. Clutched in eir tiny claws is a banner that waves in the wind and reads &#39;become ungovernable&#39;" loading="lazy" decoding="async" width="1000" height="750">
</a>
</li>
<li class="post">
<a class="postlink" href="/geese-trans-wrongs/">
<h2 data-ha-exclude="">geese/trans wrongs </h2>
<a class="postlink" href="/geese/">
<h2 data-ha-exclude="">geese </h2>
<ul class="postlist-tags">
<li>print</li>
<li>card</li>
<li>shirt</li>
<li>gender</li>
</ul>
<img src="/img/trans-wrongs-geese-print.jpg" alt="Two Canada geese and their reflections in the water. One is calmly swimming away, while the over leans over towards them and HONKS! Both have speech bubbles; the calm goose says &#39;trans rights!&#39; while the honking goose says &#39;trans wrongs!&#39;" loading="lazy" decoding="async" width="1000" height="750">
<img src="/img/geese-print.jpg" alt="Two Canada geese and their reflections in the water. One is calmly swimming away, while the over leans over and HONKS!" loading="lazy" decoding="async" width="1000" height="750">
</a>
</li>
@@ -2002,6 +2008,6 @@ switch (currentThemeValue) {
</footer>
<!-- This page `/flatfish/` was built on 2026-09-21T20:55:47.773Z -->
<!-- This page `/flatfish/` was built on 2026-09-21T22:40:46.005Z -->
</body>
</html>
flicker/index.html
+17 -19
View File
@@ -1903,6 +1903,22 @@ switch (currentThemeValue) {
<h2 data-ha-exclude="">related posts</h2>
<ol id="postlist">
<li class="post">
<a class="postlink" href="/quorbs/">
<h2 data-ha-exclude="">quorbs </h2>
<ul class="postlist-tags">
<li>print</li>
<li>highlight</li>
</ul>
<img src="/img/quorbs-print.jpg" alt="A print in two layers of color showing two rotund quails on a branch. Most of the details are in black ink, then there is a layer with a brown gradient filling in some color on the head and breast." loading="lazy" decoding="async" width="1000" height="750">
</a>
</li>
<li class="post">
<a class="postlink" href="/shirts/">
<h2 data-ha-exclude="">shirts! </h2>
@@ -1917,24 +1933,6 @@ switch (currentThemeValue) {
</a>
</li>
<li class="post">
<a class="postlink" href="/hummingbird-become-ungovernable/">
<h2 data-ha-exclude="">hummingbird become ungovernable </h2>
<ul class="postlist-tags">
<li>print</li>
<li>card</li>
<li>shirt</li>
</ul>
<img src="/img/hummingbird-ungovernable-print.jpg" alt="A block print in black and orange ink of a rufous hummingbird, tail flared, hovering in midair. Clutched in eir tiny claws is a banner that waves in the wind and reads &#39;become ungovernable&#39;" loading="lazy" decoding="async" width="1000" height="750">
</a>
</li>
<li class="post">
<a class="postlink" href="/squarsh/">
<h2 data-ha-exclude="">squarsh </h2>
@@ -2001,6 +1999,6 @@ switch (currentThemeValue) {
</footer>
<!-- This page `/flicker/` was built on 2026-09-21T20:55:47.784Z -->
<!-- This page `/flicker/` was built on 2026-09-21T22:40:46.006Z -->
</body>
</html>
flocked-notebook/index.html
+18 -18
View File
@@ -1900,29 +1900,15 @@ switch (currentThemeValue) {
<ol id="postlist">
<li class="post">
<a class="postlink" href="/tiny-books/">
<h2 data-ha-exclude="">tiny books </h2>
<a class="postlink" href="/acadia-coloring-journal/">
<h2 data-ha-exclude="">Acadia coloring journal </h2>
<ul class="postlist-tags">
<li>book</li>
</ul>
<img src="/img/tiny-book.jpg" alt="A three panel collage showing a book held in the palm of a hand." loading="lazy" decoding="async" width="1000" height="1000">
</a>
</li>
<li class="post">
<a class="postlink" href="/leather-strap-journal/">
<h2 data-ha-exclude="">leather strap journal </h2>
<ul class="postlist-tags">
<li>book</li>
</ul>
<img src="/img/leather-strap-journal.jpg" alt="A 3-part collage showing a blue journal with leather straps woven into the covers." loading="lazy" decoding="async" width="1000" height="1000">
<img src="/img/acadia-coloring-journal.jpg" alt="A five panel collage showcasing a book that is part graph papers of various sizes, and part coloring pages based on Acadia National Park." loading="lazy" decoding="async" width="1000" height="562">
</a>
</li>
@@ -1941,6 +1927,20 @@ switch (currentThemeValue) {
</a>
</li>
<li class="post">
<a class="postlink" href="/orange-green-journal/">
<h2 data-ha-exclude="">orange green journal </h2>
<ul class="postlist-tags">
<li>book</li>
</ul>
<img src="/img/orange-green-journal.jpg" alt="A 4-part collage of a slim handbound book." loading="lazy" decoding="async" width="1000" height="1777">
</a>
</li>
</ol>
</section>
@@ -1993,6 +1993,6 @@ switch (currentThemeValue) {
</footer>
<!-- This page `/flocked-notebook/` was built on 2026-09-21T20:55:47.772Z -->
<!-- This page `/flocked-notebook/` was built on 2026-09-21T22:40:46.000Z -->
</body>
</html>
foldy-wallet-with-thumb-slide/index.html
+19 -17
View File
@@ -1886,6 +1886,20 @@ switch (currentThemeValue) {
<h2 data-ha-exclude="">related posts</h2>
<ol id="postlist">
<li class="post">
<a class="postlink" href="/vertical-card-wallet/">
<h2 data-ha-exclude="">vertical card wallet </h2>
<ul class="postlist-tags">
<li>leather</li>
</ul>
<img src="/img/vertical-card-wallet.jpg" alt="A collage showing a hand-stitched leather card wallet with 3 card pockets and 1 interior pocket." loading="lazy" decoding="async" width="1000" height="750">
</a>
</li>
<li class="post">
<a class="postlink" href="/leaf-patches/">
<h2 data-ha-exclude="">leaf patches </h2>
@@ -1901,29 +1915,17 @@ switch (currentThemeValue) {
</li>
<li class="post">
<a class="postlink" href="/bowtie/">
<h2 data-ha-exclude="">bowtie </h2>
<a class="postlink" href="/dragon-mask/">
<h2 data-ha-exclude="">dragon mask </h2>
<ul class="postlist-tags">
<li>leather</li>
</ul>
<img src="/img/bowtie.jpg" alt="A black leather bow tie with black stitching." loading="lazy" decoding="async" width="1000" height="750">
</a>
</li>
<li class="post">
<a class="postlink" href="/stephanie-collar/">
<h2 data-ha-exclude="">stephanie collar </h2>
<ul class="postlist-tags">
<li>leather</li>
<li>highlight</li>
</ul>
<img src="/img/stephanie-collar.jpg" alt="A white woman with a shaved side cut wearing a black leather collar with a large dangling o-ring." loading="lazy" decoding="async" width="1000" height="562">
<img src="/img/dragon-mask.jpg" alt="lee (a white person with glasses and a side shave) holds up a leather dragon mask in black and dark green. ze sticks hir tongue out at it." loading="lazy" decoding="async" width="1000" height="746">
</a>
</li>
@@ -1980,6 +1982,6 @@ switch (currentThemeValue) {
</footer>
<!-- This page `/foldy-wallet-with-thumb-slide/` was built on 2026-09-21T20:55:47.793Z -->
<!-- This page `/foldy-wallet-with-thumb-slide/` was built on 2026-09-21T22:40:46.001Z -->
</body>
</html>
foldy-wallet/index.html
+10 -12
View File
@@ -1887,45 +1887,43 @@ switch (currentThemeValue) {
<ol id="postlist">
<li class="post">
<a class="postlink" href="/fishhook-pride-keychains/">
<h2 data-ha-exclude="">fishhook pride keychains </h2>
<a class="postlink" href="/vertical-zipper-card-wallet/">
<h2 data-ha-exclude="">vertical zipper card wallet </h2>
<ul class="postlist-tags">
<li>leather</li>
<li>gender</li>
</ul>
<img src="/img/fishhook-keychain-nonbinary.jpg" alt="a keychain with an iridescent fishhook style attachment linked via leather to an iridescent keyring. the leather is stitched with nonbinary flag colors." loading="lazy" decoding="async" width="1000" height="750">
<img src="/img/vertical-zipper-card-wallet.jpg" alt="A collage showing a hand-stitched leather card wallet with 3 card pockets, a hidden pocket, and a zippered coin pouch." loading="lazy" decoding="async" width="1000" height="1000">
</a>
</li>
<li class="post">
<a class="postlink" href="/bag-strap/">
<h2 data-ha-exclude="">bag strap </h2>
<a class="postlink" href="/mom-bag/">
<h2 data-ha-exclude="">mom bag </h2>
<ul class="postlist-tags">
<li>leather</li>
</ul>
<img src="/img/bag-strap.jpg" alt="A nylon webbing shoulder strap in bright teal with clips on each end." loading="lazy" decoding="async" width="1000" height="750">
<img src="/img/mom-bag.jpg" alt="A leather bag sized for a large smartphone with a main pocket and a wraparound smaller pocket. It has a magnetic clasp." loading="lazy" decoding="async" width="900" height="1200">
</a>
</li>
<li class="post">
<a class="postlink" href="/o-ring-bracelet/">
<h2 data-ha-exclude="">o-ring bracelet </h2>
<a class="postlink" href="/lobstah/">
<h2 data-ha-exclude="">lobstah </h2>
<ul class="postlist-tags">
<li>leather</li>
</ul>
<img src="/img/oring-bracelet.jpg" alt="A green leather bracelet, stitched along the edges with dark blue thread, holds an ouroborous o-ring in place with two black snaps." loading="lazy" decoding="async" width="900" height="1200">
<img src="/img/lobstah.jpg" alt="Two red leather lobster ornaments, about 4-5 in long each." loading="lazy" decoding="async" width="1000" height="750">
</a>
</li>
@@ -1982,6 +1980,6 @@ switch (currentThemeValue) {
</footer>
<!-- This page `/foldy-wallet/` was built on 2026-09-21T20:55:47.793Z -->
<!-- This page `/foldy-wallet/` was built on 2026-09-21T22:40:46.001Z -->
</body>
</html>
fountain-pen-friendly-stationery/index.html
+15 -15
View File
@@ -1901,20 +1901,6 @@ switch (currentThemeValue) {
<h2 data-ha-exclude="">related posts</h2>
<ol id="postlist">
<li class="post">
<a class="postlink" href="/stationery-exchange/">
<h2 data-ha-exclude="">stationery exchange </h2>
<ul class="postlist-tags">
<li>stationery</li>
</ul>
<img src="/img/clustered-brown-mushrooms.jpg" alt="Picture unrelated to post. A tight close-up on a cluster of tannish brown mushrooms." loading="lazy" decoding="async" width="1000" height="666">
</a>
</li>
<li class="post">
<a class="postlink" href="/siblinghood-of-the-traveling-greeting-card/">
<h2 data-ha-exclude="">siblinghood of the traveling greeting card </h2>
@@ -1929,6 +1915,20 @@ switch (currentThemeValue) {
</a>
</li>
<li class="post">
<a class="postlink" href="/stationery-exchange/">
<h2 data-ha-exclude="">stationery exchange </h2>
<ul class="postlist-tags">
<li>stationery</li>
</ul>
<img src="/img/clustered-brown-mushrooms.jpg" alt="Picture unrelated to post. A tight close-up on a cluster of tannish brown mushrooms." loading="lazy" decoding="async" width="1000" height="666">
</a>
</li>
</ol>
</section>
@@ -1981,6 +1981,6 @@ switch (currentThemeValue) {
</footer>
<!-- This page `/fountain-pen-friendly-stationery/` was built on 2026-09-21T20:55:47.795Z -->
<!-- This page `/fountain-pen-friendly-stationery/` was built on 2026-09-21T22:40:46.004Z -->
</body>
</html>
foxgloves/index.html
+43 -33
View File
@@ -1903,47 +1903,57 @@ switch (currentThemeValue) {
<ol id="postlist">
<li class="post">
<a class="postlink" href="/kestrel-zine/">
<h2 data-ha-exclude="">kestrel zine </h2>
<a class="postlink" href="/trans-rights-skull/">
<h2 data-ha-exclude="">trans rights skull </h2>
<ul class="postlist-tags">
<li>print</li>
<li>zine</li>
<li>card</li>
<li>sticker</li>
<li>pin</li>
<li>gender</li>
</ul>
<img src="/img/trans-rights-print.jpg" alt="A print in mostly black ink of a smiling skull with a speech bubble. In pink and blue, the speech bubble reads &#39;trans rights!&#39;" loading="lazy" decoding="async" width="1000" height="750">
</a>
</li>
<li class="post">
<a class="postlink" href="/lupine/">
<h2 data-ha-exclude="">lupine </h2>
<ul class="postlist-tags">
<li>print</li>
<li>card</li>
<li>shirt</li>
</ul>
<img src="/img/lupine-prints.jpg" alt="6 versions of a print of lupine flowers with the leaves inked in light green and the blossoms inked in a variety of blues, purples, and pinks." loading="lazy" decoding="async" width="1000" height="750">
</a>
</li>
<li class="post">
<a class="postlink" href="/quorbs/">
<h2 data-ha-exclude="">quorbs </h2>
<ul class="postlist-tags">
<li>print</li>
<li>highlight</li>
</ul>
<img src="/img/kestrel-zine.jpg" alt="A 5 photo collage showing the front and back cover as well as 3 full spreads of a folded zine about Kestrel, my dog, who is a 65lb Malinois with a goofy smile and floppy ears. it is printed in two layers of color, blue and orange, and each image depicts Kestrel in various posts... alert and watchful, resting, looking mopey, wearing a sweatshirt." loading="lazy" decoding="async" width="1000" height="1000">
</a>
</li>
<li class="post">
<a class="postlink" href="/crow/">
<h2 data-ha-exclude="">crow </h2>
<ul class="postlist-tags">
<li>print</li>
</ul>
<img src="/img/crow-print.jpg" alt="a block print in dark indigo ink on white paper depicting a perched crow looking over one shoulder. one side of the crow is lit with fine feather detail, and the other side is almost entirely in shadow." loading="lazy" decoding="async" width="1000" height="1333">
</a>
</li>
<li class="post">
<a class="postlink" href="/kniphofia/">
<h2 data-ha-exclude="">kniphofia </h2>
<ul class="postlist-tags">
<li>print</li>
</ul>
<img src="/img/kniphofia-print.jpg" alt="A print of a brightly colored flower in 4 layers of color" loading="lazy" decoding="async" width="1000" height="1333">
<img src="/img/quorbs-print.jpg" alt="A print in two layers of color showing two rotund quails on a branch. Most of the details are in black ink, then there is a layer with a brown gradient filling in some color on the head and breast." loading="lazy" decoding="async" width="1000" height="750">
</a>
</li>
@@ -2000,6 +2010,6 @@ switch (currentThemeValue) {
</footer>
<!-- This page `/foxgloves/` was built on 2026-09-21T20:55:47.788Z -->
<!-- This page `/foxgloves/` was built on 2026-09-21T22:40:46.021Z -->
</body>
</html>
framer-accessibility/index.html
+33 -32
View File
@@ -93,40 +93,43 @@
top: -1.25rem;
}
/* my baby my child my `tree` list style */
#toc ol,
#toc li {
margin-block: 0;
list-style: none;
/* `tree` style toc */
#toc nav > ol {
margin-left: 1rem;
}
#toc ol {
margin-left: 0;
margin: 0;
}
#toc li {
border-left: .095rem solid var(--color-pink);
margin-left: 1.5rem;
line-height: 1.15;
text-indent: 1.22rem hanging;
position: relative;
padding-inline-start: 1em;
list-style: none;
margin-block: 0;
margin-left: .35rem;
}
#toc li::before,
#toc li::after {
display: block;
position: absolute;
box-sizing: border-box;
inset-block: 0 auto;
inset-inline: 0 auto;
inline-size: .75em;
border-inline-start: .1rem solid var(--color-pink);
}
#toc li::before {
content: '├─' / "";
color: var(--color-pink);
position: relative;
left: -.34rem;
block-size: .5lh;
border-block-end: .1rem solid var(--color-pink);
content: "";
}
#toc li:last-child {
border-left-color: transparent;
}
#toc li:last-child::before {
/* Technically, we could use this content for all of them, but doing the full
bar for the non-last-childs keeps the border a *smidge* more consistent for
different levels of magnification */
content: '└─' / "";
#toc li:not(:last-child)::after {
block-size: 100%;
content: "";
}
/* underlines are unnecessary in this context */
@@ -2195,15 +2198,15 @@ switch (currentThemeValue) {
<ol id="postlist">
<li class="post">
<a class="postlink" href="/accessible-image-modals/">
<h2 data-ha-exclude="">accessible image modals </h2>
<a class="postlink" href="/eleventy-lessons/">
<h2 data-ha-exclude="">eleventy lessons </h2>
<ul class="postlist-tags">
<li>software</li>
</ul>
<img src="/img/snacking-seagull.jpg" alt="Image unrelated to post. A seagull floating in the water with a starfish hanging out of eir mouth." loading="lazy" decoding="async" width="1000" height="666">
<img src="/img/hellebore.jpg" alt="Image unrelated to post. Close up on a pale green hellebore flower." loading="lazy" decoding="async" width="1000" height="666">
</a>
</li>
@@ -2223,19 +2226,17 @@ switch (currentThemeValue) {
</li>
<li class="post">
<a class="postlink" href="/gender-in-data-models/">
<h2 data-ha-exclude="">gender in data models </h2>
<a class="postlink" href="/azure-locations-and-file-crawling/">
<h2 data-ha-exclude="">azure locations and file crawling </h2>
<ul class="postlist-tags">
<li>gender</li>
<li>software</li>
<li>highlight</li>
</ul>
<img src="/img/peony.jpg" alt="Image unrelated to post. A light pink peony in full bloom, close up." loading="lazy" decoding="async" width="1000" height="666">
<img src="/img/azure-locations.jpg" alt="A Linux terminal. There is a fun rainbow flag in ascii art at the top, and then the user has called a command asking Azure for a list of locations applicable to a specific resource type. The output is lengthy." loading="lazy" decoding="async" width="1000" height="827">
</a>
</li>
@@ -2292,6 +2293,6 @@ switch (currentThemeValue) {
</footer>
<!-- This page `/framer-accessibility/` was built on 2026-09-21T20:55:47.817Z -->
<!-- This page `/framer-accessibility/` was built on 2026-09-21T22:40:46.047Z -->
</body>
</html>
gallery/1/index.html
+1 -1
View File
@@ -1656,6 +1656,6 @@ switch (currentThemeValue) {
</footer>
<!-- This page `/gallery/1/` was built on 2026-09-21T20:55:49.609Z -->
<!-- This page `/gallery/1/` was built on 2026-09-21T22:40:48.046Z -->
</body>
</html>
gallery/10/index.html
+1 -1
View File
@@ -1676,6 +1676,6 @@ switch (currentThemeValue) {
</footer>
<!-- This page `/gallery/10/` was built on 2026-09-21T20:55:52.378Z -->
<!-- This page `/gallery/10/` was built on 2026-09-21T22:40:50.785Z -->
</body>
</html>
gallery/11/index.html
+1 -1
View File
@@ -1656,6 +1656,6 @@ switch (currentThemeValue) {
</footer>
<!-- This page `/gallery/11/` was built on 2026-09-21T20:55:52.675Z -->
<!-- This page `/gallery/11/` was built on 2026-09-21T22:40:51.076Z -->
</body>
</html>
gallery/2/index.html
+1 -1
View File
@@ -1668,6 +1668,6 @@ switch (currentThemeValue) {
</footer>
<!-- This page `/gallery/2/` was built on 2026-09-21T20:55:49.880Z -->
<!-- This page `/gallery/2/` was built on 2026-09-21T22:40:48.348Z -->
</body>
</html>
gallery/3/index.html
+1 -1
View File
@@ -1666,6 +1666,6 @@ switch (currentThemeValue) {
</footer>
<!-- This page `/gallery/3/` was built on 2026-09-21T20:55:50.151Z -->
<!-- This page `/gallery/3/` was built on 2026-09-21T22:40:48.672Z -->
</body>
</html>
gallery/4/index.html
+1 -1
View File
@@ -1658,6 +1658,6 @@ switch (currentThemeValue) {
</footer>
<!-- This page `/gallery/4/` was built on 2026-09-21T20:55:50.475Z -->
<!-- This page `/gallery/4/` was built on 2026-09-21T22:40:49.026Z -->
</body>
</html>
gallery/5/index.html
+1 -1
View File
@@ -1670,6 +1670,6 @@ switch (currentThemeValue) {
</footer>
<!-- This page `/gallery/5/` was built on 2026-09-21T20:55:50.684Z -->
<!-- This page `/gallery/5/` was built on 2026-09-21T22:40:49.355Z -->
</body>
</html>
gallery/6/index.html
+1 -1
View File
@@ -1656,6 +1656,6 @@ switch (currentThemeValue) {
</footer>
<!-- This page `/gallery/6/` was built on 2026-09-21T20:55:51.043Z -->
<!-- This page `/gallery/6/` was built on 2026-09-21T22:40:49.674Z -->
</body>
</html>
gallery/7/index.html
+1 -1
View File
@@ -1694,6 +1694,6 @@ switch (currentThemeValue) {
</footer>
<!-- This page `/gallery/7/` was built on 2026-09-21T20:55:51.430Z -->
<!-- This page `/gallery/7/` was built on 2026-09-21T22:40:49.975Z -->
</body>
</html>
gallery/8/index.html
+1 -1
View File
@@ -1682,6 +1682,6 @@ switch (currentThemeValue) {
</footer>
<!-- This page `/gallery/8/` was built on 2026-09-21T20:55:51.678Z -->
<!-- This page `/gallery/8/` was built on 2026-09-21T22:40:50.272Z -->
</body>
</html>
gallery/9/index.html
+1 -1
View File
@@ -1702,6 +1702,6 @@ switch (currentThemeValue) {
</footer>
<!-- This page `/gallery/9/` was built on 2026-09-21T20:55:51.941Z -->
<!-- This page `/gallery/9/` was built on 2026-09-21T22:40:50.523Z -->
</body>
</html>
Loaded 100 of 327 files, more files were not shown because too many files have changed in this diff. Show more