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

Compare commits

base: inherentlee/leecat.art:9a483ad27c1d6d0d0b1cc143aee701755d820eb1
Branches Tags
inherentlee/leecat.art:main
..
compare: inherentlee/leecat.art:72c5904c274693c49152c20c424f011a500a68e7
Branches Tags
inherentlee/leecat.art:main
3 Commits
9a483ad27c .. 72c5904c27
Author SHA1 Message Date
inherentlee 72c5904c27 build 2026-05-13 20:44:22 -07:00
inherentlee e615e6a91f image modals for posts 2026-05-13 20:42:31 -07:00
inherentlee a56ca4c03e remove pdf link 2026-05-07 14:30:54 -07:00
287 changed files with 25061 additions and 3784 deletions
Expand all files Collapse all files
_includes/layouts/post.njk
+7 -1
View File
@@ -4,7 +4,9 @@ layout: base.njk
{% css %}{% include "css/post.css" %}{% endcss %}
{% css %}{% include "css/highlighting.css" %}{% endcss %}
{% css %}{% include "css/lists.css" %}{% endcss %}
{% css %}{% include "css/modal.css" %}{% endcss %}
{% js %}{% include "node_modules/@zachleat/heading-anchors/heading-anchors.js" %}{% endjs %}
{% js %}{% include "js/modal.js" %}{% endjs %}
<heading-anchors content="<i class='fa-solid fa-anchor'></i>">
<article>
@@ -30,7 +32,11 @@ layout: base.njk
</div>
{% if image %}
<img src="/img/{{ image.src }}" alt="{{ image.alt }}">
<dialog closedby="any" aria-label="image modal" tabindex="-1">
<button class="close-dialog" autofocus aria-label="close the image modal">&times;</button>
<img class="modal-img" src="/img/{{ image.src }}" alt="{{ image.alt }}">
</dialog>
<img tabindex="0" class="hero" src="/img/{{ image.src }}" alt="{{ image.alt }}">
{% endif %}
{{ content | safe }}
_site/1/index.html
+1 -2
View File
@@ -434,7 +434,6 @@ span.ha-placeholder {
opacity: .55;
}
/* Lists */
::marker {
color: var(--color-pink);
@@ -1216,6 +1215,6 @@ footer a:focus-visible {
</footer>
<!-- This page `/1/` was built on 2026-05-06T18:04:14.123Z -->
<!-- This page `/1/` was built on 2026-05-14T03:43:31.176Z -->
</body>
</html>
_site/10/index.html
+1 -2
View File
@@ -434,7 +434,6 @@ span.ha-placeholder {
opacity: .55;
}
/* Lists */
::marker {
color: var(--color-pink);
@@ -1246,6 +1245,6 @@ footer a:focus-visible {
</footer>
<!-- This page `/10/` was built on 2026-05-06T18:04:17.719Z -->
<!-- This page `/10/` was built on 2026-05-14T03:43:35.943Z -->
</body>
</html>
_site/11/index.html
+1 -2
View File
@@ -434,7 +434,6 @@ span.ha-placeholder {
opacity: .55;
}
/* Lists */
::marker {
color: var(--color-pink);
@@ -1252,6 +1251,6 @@ footer a:focus-visible {
</footer>
<!-- This page `/11/` was built on 2026-05-06T18:04:17.942Z -->
<!-- This page `/11/` was built on 2026-05-14T03:43:36.527Z -->
</body>
</html>
_site/12/index.html
+1 -2
View File
@@ -434,7 +434,6 @@ span.ha-placeholder {
opacity: .55;
}
/* Lists */
::marker {
color: var(--color-pink);
@@ -1240,6 +1239,6 @@ footer a:focus-visible {
</footer>
<!-- This page `/12/` was built on 2026-05-06T18:04:18.116Z -->
<!-- This page `/12/` was built on 2026-05-14T03:43:36.860Z -->
</body>
</html>
_site/13/index.html
+1 -2
View File
@@ -434,7 +434,6 @@ span.ha-placeholder {
opacity: .55;
}
/* Lists */
::marker {
color: var(--color-pink);
@@ -1228,6 +1227,6 @@ footer a:focus-visible {
</footer>
<!-- This page `/13/` was built on 2026-05-06T18:04:18.439Z -->
<!-- This page `/13/` was built on 2026-05-14T03:43:37.321Z -->
</body>
</html>
_site/14/index.html
+1 -2
View File
@@ -434,7 +434,6 @@ span.ha-placeholder {
opacity: .55;
}
/* Lists */
::marker {
color: var(--color-pink);
@@ -1160,6 +1159,6 @@ footer a:focus-visible {
</footer>
<!-- This page `/14/` was built on 2026-05-06T18:04:18.599Z -->
<!-- This page `/14/` was built on 2026-05-14T03:43:37.482Z -->
</body>
</html>
_site/2/index.html
+1 -2
View File
@@ -434,7 +434,6 @@ span.ha-placeholder {
opacity: .55;
}
/* Lists */
::marker {
color: var(--color-pink);
@@ -1220,6 +1219,6 @@ footer a:focus-visible {
</footer>
<!-- This page `/2/` was built on 2026-05-06T18:04:14.774Z -->
<!-- This page `/2/` was built on 2026-05-14T03:43:31.933Z -->
</body>
</html>
_site/3/index.html
+1 -2
View File
@@ -434,7 +434,6 @@ span.ha-placeholder {
opacity: .55;
}
/* Lists */
::marker {
color: var(--color-pink);
@@ -1228,6 +1227,6 @@ footer a:focus-visible {
</footer>
<!-- This page `/3/` was built on 2026-05-06T18:04:15.148Z -->
<!-- This page `/3/` was built on 2026-05-14T03:43:32.496Z -->
</body>
</html>
_site/4/index.html
+1 -2
View File
@@ -434,7 +434,6 @@ span.ha-placeholder {
opacity: .55;
}
/* Lists */
::marker {
color: var(--color-pink);
@@ -1224,6 +1223,6 @@ footer a:focus-visible {
</footer>
<!-- This page `/4/` was built on 2026-05-06T18:04:15.737Z -->
<!-- This page `/4/` was built on 2026-05-14T03:43:33.114Z -->
</body>
</html>
_site/404.html
+1 -2
View File
@@ -211,7 +211,6 @@ span.ha-placeholder {
opacity: .55;
}
/* Lists */
::marker {
color: var(--color-pink);
@@ -1014,6 +1013,6 @@ export { HeadingAnchors }</script>
</footer>
<!-- This page `/404.html` was built on 2026-05-06T18:04:11.578Z -->
<!-- This page `/404.html` was built on 2026-05-14T03:43:28.028Z -->
</body>
</html>
_site/5/index.html
+1 -2
View File
@@ -434,7 +434,6 @@ span.ha-placeholder {
opacity: .55;
}
/* Lists */
::marker {
color: var(--color-pink);
@@ -1220,6 +1219,6 @@ footer a:focus-visible {
</footer>
<!-- This page `/5/` was built on 2026-05-06T18:04:15.981Z -->
<!-- This page `/5/` was built on 2026-05-14T03:43:33.495Z -->
</body>
</html>
_site/6/index.html
+1 -2
View File
@@ -434,7 +434,6 @@ span.ha-placeholder {
opacity: .55;
}
/* Lists */
::marker {
color: var(--color-pink);
@@ -1218,6 +1217,6 @@ footer a:focus-visible {
</footer>
<!-- This page `/6/` was built on 2026-05-06T18:04:16.277Z -->
<!-- This page `/6/` was built on 2026-05-14T03:43:33.930Z -->
</body>
</html>
_site/7/index.html
+1 -2
View File
@@ -434,7 +434,6 @@ span.ha-placeholder {
opacity: .55;
}
/* Lists */
::marker {
color: var(--color-pink);
@@ -1228,6 +1227,6 @@ footer a:focus-visible {
</footer>
<!-- This page `/7/` was built on 2026-05-06T18:04:16.676Z -->
<!-- This page `/7/` was built on 2026-05-14T03:43:34.497Z -->
</body>
</html>
_site/8/index.html
+1 -2
View File
@@ -434,7 +434,6 @@ span.ha-placeholder {
opacity: .55;
}
/* Lists */
::marker {
color: var(--color-pink);
@@ -1216,6 +1215,6 @@ footer a:focus-visible {
</footer>
<!-- This page `/8/` was built on 2026-05-06T18:04:16.946Z -->
<!-- This page `/8/` was built on 2026-05-14T03:43:34.899Z -->
</body>
</html>
_site/9/index.html
+1 -2
View File
@@ -434,7 +434,6 @@ span.ha-placeholder {
opacity: .55;
}
/* Lists */
::marker {
color: var(--color-pink);
@@ -1254,6 +1253,6 @@ footer a:focus-visible {
</footer>
<!-- This page `/9/` was built on 2026-05-06T18:04:17.343Z -->
<!-- This page `/9/` was built on 2026-05-14T03:43:35.371Z -->
</body>
</html>
_site/aarons-mask/index.html
+128 -13
View File
@@ -457,6 +457,90 @@ pre[class*=language-]::selection {
.tag:nth-child(odd) p {
text-align: right;
}
img[tabindex="0"]:focus-visible {
outline: .15rem solid var(--color-teal);
}
dialog {
margin: auto;
flex-flow: column;
background: transparent;
border: none;
position: absolute;
}
dialog[open] {
display: flex;
}
dialog::backdrop {
background-color: rgba(from var(--color-bg) r g b / .8);
backdrop-filter: blur(4px);
}
body:has(dialog[open]) {
overflow: hidden;
}
.close-dialog {
background-color: rgba(from var(--color-teal) r g b / .2);
font-size: 1.5rem;
padding: 0 .5rem .15rem;
border-radius: 1rem;
color: var(--color-teal);
box-shadow: .15rem .15rem var(--color-shadow);
border: .08rem solid var(--color-teal);
align-self: flex-end;
justify-self: flex-start;
margin: 0 .1rem;
/* Click animation handling */
position: relative;
top: 1rem;
left: -.15rem;
transition: top .1s ease-in, left .1s ease-in;
}
.close-dialog:focus-visible {
outline: none;
background-color: var(--color-teal);
color: var(--color-bg);
}
@media (any-hover: hover) {
.close-dialog:hover {
outline: none;
background-color: var(--color-teal);
color: var(--color-bg);
}
}
@media (forced-colors: active) {
.close-dialog:focus-visible {
outline-offset: .08rem;
outline: .08rem solid;
}
@media (any-hover: hover) {
.close-dialog:hover {
outline-offset: .08rem;
outline: .08rem solid;
}
}
}
/* Click animation */
.close-dialog:active {
top: 1.1rem;
left: -.05rem;
box-shadow: .05rem .05rem var(--color-shadow);
}
.modal-img {
max-height: calc(90vh - 2rem);
object-fit: contain;
width: auto;
margin: 0 1rem;
}
:root {
color-scheme: light dark;
@@ -637,7 +721,6 @@ span.ha-placeholder {
opacity: .55;
}
/* Lists */
::marker {
color: var(--color-pink);
@@ -1351,7 +1434,29 @@ class HeadingAnchors extends HTMLElement {
HeadingAnchors.register();
export { HeadingAnchors }</script>
export { HeadingAnchors }
/* don't even bother on mobile */
if (window.innerWidth > 650) {
const dialog = document.querySelector("dialog");
const closeButton = document.querySelector(".close-dialog");
const hero = document.querySelector(".hero");
hero.addEventListener("click", (e) => dialog.showModal());
hero.addEventListener("keydown", (e) => {
if (e.key === "Enter" || e.key === " ") {
e.preventDefault();
dialog.showModal();
}
});
closeButton.addEventListener("click", (e) => dialog.close());
closeButton.addEventListener("keydown", (e) => {
if (e.key === "Enter" || e.key === " ") {
e.preventDefault();
dialog.close();
}
});
}</script>
</head>
<body>
@@ -1411,6 +1516,8 @@ export { HeadingAnchors }</script>
<heading-anchors content="<i class='fa-solid fa-anchor'></i>">
<article>
<h1 id="aarons-mask">aaron&#39;s mask</h1>
@@ -1435,7 +1542,11 @@ export { HeadingAnchors }</script>
</div>
<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">
<dialog closedby="any" aria-label="image modal" tabindex="-1">
<button class="close-dialog" autofocus="" aria-label="close the image modal">&times;</button>
<img class="modal-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">
</dialog>
<img tabindex="0" class="hero" 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">
<p>Commission piece; based on an existing pattern. The red detailing and teeth are my own design.</p>
@@ -1481,43 +1592,47 @@ export { HeadingAnchors }</script>
<ol id="postlist">
<li class="post">
<a class="postlink" href="/vertical-zipper-card-wallet/">
<h2 data-ha-exclude="" id="vertical-zipper-card-wallet">vertical zipper card wallet </h2>
<a class="postlink" href="/little-critter-pouch/">
<h2 data-ha-exclude="" id="little-critter-pouch">little critter pouch </h2>
<ul class="postlist-tags">
<li>leather</li>
<li>highlight</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/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>
<li class="post">
<a class="postlink" href="/lobstah/">
<h2 data-ha-exclude="" id="lobstah">lobstah </h2>
<a class="postlink" href="/leather-chest-harness/">
<h2 data-ha-exclude="" id="leather-chest-harness">leather chest harness </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-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="/o-ring-bracelet/">
<h2 data-ha-exclude="" id="o-ring-bracelet">o-ring bracelet </h2>
<a class="postlink" href="/dragon-mask/">
<h2 data-ha-exclude="" id="dragon-mask">dragon mask </h2>
<ul class="postlist-tags">
<li>leather</li>
<li>highlight</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/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>
@@ -1553,6 +1668,6 @@ export { HeadingAnchors }</script>
</footer>
<!-- This page `/aarons-mask/` was built on 2026-05-06T18:04:11.554Z -->
<!-- This page `/aarons-mask/` was built on 2026-05-14T03:43:27.985Z -->
</body>
</html>
_site/about/index.html
+1 -2
View File
@@ -211,7 +211,6 @@ span.ha-placeholder {
opacity: .55;
}
/* Lists */
::marker {
color: var(--color-pink);
@@ -1131,6 +1130,6 @@ export { HeadingAnchors }</script>
</footer>
<!-- This page `/about/` was built on 2026-05-06T18:04:11.578Z -->
<!-- This page `/about/` was built on 2026-05-14T03:43:28.028Z -->
</body>
</html>
_site/acadia-coloring-journal/index.html
+128 -13
View File
@@ -457,6 +457,90 @@ pre[class*=language-]::selection {
.tag:nth-child(odd) p {
text-align: right;
}
img[tabindex="0"]:focus-visible {
outline: .15rem solid var(--color-teal);
}
dialog {
margin: auto;
flex-flow: column;
background: transparent;
border: none;
position: absolute;
}
dialog[open] {
display: flex;
}
dialog::backdrop {
background-color: rgba(from var(--color-bg) r g b / .8);
backdrop-filter: blur(4px);
}
body:has(dialog[open]) {
overflow: hidden;
}
.close-dialog {
background-color: rgba(from var(--color-teal) r g b / .2);
font-size: 1.5rem;
padding: 0 .5rem .15rem;
border-radius: 1rem;
color: var(--color-teal);
box-shadow: .15rem .15rem var(--color-shadow);
border: .08rem solid var(--color-teal);
align-self: flex-end;
justify-self: flex-start;
margin: 0 .1rem;
/* Click animation handling */
position: relative;
top: 1rem;
left: -.15rem;
transition: top .1s ease-in, left .1s ease-in;
}
.close-dialog:focus-visible {
outline: none;
background-color: var(--color-teal);
color: var(--color-bg);
}
@media (any-hover: hover) {
.close-dialog:hover {
outline: none;
background-color: var(--color-teal);
color: var(--color-bg);
}
}
@media (forced-colors: active) {
.close-dialog:focus-visible {
outline-offset: .08rem;
outline: .08rem solid;
}
@media (any-hover: hover) {
.close-dialog:hover {
outline-offset: .08rem;
outline: .08rem solid;
}
}
}
/* Click animation */
.close-dialog:active {
top: 1.1rem;
left: -.05rem;
box-shadow: .05rem .05rem var(--color-shadow);
}
.modal-img {
max-height: calc(90vh - 2rem);
object-fit: contain;
width: auto;
margin: 0 1rem;
}
:root {
color-scheme: light dark;
@@ -637,7 +721,6 @@ span.ha-placeholder {
opacity: .55;
}
/* Lists */
::marker {
color: var(--color-pink);
@@ -1351,7 +1434,29 @@ class HeadingAnchors extends HTMLElement {
HeadingAnchors.register();
export { HeadingAnchors }</script>
export { HeadingAnchors }
/* don't even bother on mobile */
if (window.innerWidth > 650) {
const dialog = document.querySelector("dialog");
const closeButton = document.querySelector(".close-dialog");
const hero = document.querySelector(".hero");
hero.addEventListener("click", (e) => dialog.showModal());
hero.addEventListener("keydown", (e) => {
if (e.key === "Enter" || e.key === " ") {
e.preventDefault();
dialog.showModal();
}
});
closeButton.addEventListener("click", (e) => dialog.close());
closeButton.addEventListener("keydown", (e) => {
if (e.key === "Enter" || e.key === " ") {
e.preventDefault();
dialog.close();
}
});
}</script>
</head>
<body>
@@ -1411,6 +1516,8 @@ export { HeadingAnchors }</script>
<heading-anchors content="<i class='fa-solid fa-anchor'></i>">
<article>
<h1 id="acadia-coloring-journal">Acadia coloring journal</h1>
@@ -1435,7 +1542,11 @@ export { HeadingAnchors }</script>
</div>
<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">
<dialog closedby="any" aria-label="image modal" tabindex="-1">
<button class="close-dialog" autofocus="" aria-label="close the image modal">&times;</button>
<img class="modal-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">
</dialog>
<img tabindex="0" class="hero" 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">
<p>A green journal with a blue leather spine. The coloring pages are from the book <a href="https://www.ellsworthamerican.com/living/arts-a-living/color-acadia/" target="_blank" rel="external">Color Acadia</a> with art by Katie Dube and Keri Kimura.</p>
@@ -1497,43 +1608,47 @@ export { HeadingAnchors }</script>
<ol id="postlist">
<li class="post">
<a class="postlink" href="/baseball-journal/">
<h2 data-ha-exclude="" id="baseball-journal">baseball journal </h2>
<a class="postlink" href="/brookes-notebook/">
<h2 data-ha-exclude="" id="brookes-notebook">brooke&#39;s notebook </h2>
<ul class="postlist-tags">
<li>book</li>
<li>highlight</li>
</ul>
<img src="/img/baseball-journal.jpg" alt="A 3-part collage of a leather-covered book with baseball-style stitching across the spine." loading="lazy" decoding="async" width="1000" height="1000">
<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="/tiny-books/">
<h2 data-ha-exclude="" id="tiny-books">tiny books </h2>
<a class="postlink" href="/leather-long-stitch-journals/">
<h2 data-ha-exclude="" id="leather-long-stitch-journals">leather long-stitch journals </h2>
<ul class="postlist-tags">
<li>leather</li>
<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">
<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="/flocked-notebook/">
<h2 data-ha-exclude="" id="flocked-notebook">flocked notebook </h2>
<a class="postlink" href="/square-watercolor-pad/">
<h2 data-ha-exclude="" id="square-watercolor-pad">square watercolor pad </h2>
<ul class="postlist-tags">
<li>book</li>
</ul>
<img src="/img/flocked-notebook.jpg" alt="A two panel collage showing the cover and endpapers of a thick notebook." loading="lazy" decoding="async" width="1000" height="1331">
<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>
@@ -1569,6 +1684,6 @@ export { HeadingAnchors }</script>
</footer>
<!-- This page `/acadia-coloring-journal/` was built on 2026-05-06T18:04:11.546Z -->
<!-- This page `/acadia-coloring-journal/` was built on 2026-05-14T03:43:27.981Z -->
</body>
</html>
_site/acadia-mitts/index.html
+129 -18
View File
@@ -457,6 +457,90 @@ pre[class*=language-]::selection {
.tag:nth-child(odd) p {
text-align: right;
}
img[tabindex="0"]:focus-visible {
outline: .15rem solid var(--color-teal);
}
dialog {
margin: auto;
flex-flow: column;
background: transparent;
border: none;
position: absolute;
}
dialog[open] {
display: flex;
}
dialog::backdrop {
background-color: rgba(from var(--color-bg) r g b / .8);
backdrop-filter: blur(4px);
}
body:has(dialog[open]) {
overflow: hidden;
}
.close-dialog {
background-color: rgba(from var(--color-teal) r g b / .2);
font-size: 1.5rem;
padding: 0 .5rem .15rem;
border-radius: 1rem;
color: var(--color-teal);
box-shadow: .15rem .15rem var(--color-shadow);
border: .08rem solid var(--color-teal);
align-self: flex-end;
justify-self: flex-start;
margin: 0 .1rem;
/* Click animation handling */
position: relative;
top: 1rem;
left: -.15rem;
transition: top .1s ease-in, left .1s ease-in;
}
.close-dialog:focus-visible {
outline: none;
background-color: var(--color-teal);
color: var(--color-bg);
}
@media (any-hover: hover) {
.close-dialog:hover {
outline: none;
background-color: var(--color-teal);
color: var(--color-bg);
}
}
@media (forced-colors: active) {
.close-dialog:focus-visible {
outline-offset: .08rem;
outline: .08rem solid;
}
@media (any-hover: hover) {
.close-dialog:hover {
outline-offset: .08rem;
outline: .08rem solid;
}
}
}
/* Click animation */
.close-dialog:active {
top: 1.1rem;
left: -.05rem;
box-shadow: .05rem .05rem var(--color-shadow);
}
.modal-img {
max-height: calc(90vh - 2rem);
object-fit: contain;
width: auto;
margin: 0 1rem;
}
:root {
color-scheme: light dark;
@@ -637,7 +721,6 @@ span.ha-placeholder {
opacity: .55;
}
/* Lists */
::marker {
color: var(--color-pink);
@@ -1351,7 +1434,29 @@ class HeadingAnchors extends HTMLElement {
HeadingAnchors.register();
export { HeadingAnchors }</script>
export { HeadingAnchors }
/* don't even bother on mobile */
if (window.innerWidth > 650) {
const dialog = document.querySelector("dialog");
const closeButton = document.querySelector(".close-dialog");
const hero = document.querySelector(".hero");
hero.addEventListener("click", (e) => dialog.showModal());
hero.addEventListener("keydown", (e) => {
if (e.key === "Enter" || e.key === " ") {
e.preventDefault();
dialog.showModal();
}
});
closeButton.addEventListener("click", (e) => dialog.close());
closeButton.addEventListener("keydown", (e) => {
if (e.key === "Enter" || e.key === " ") {
e.preventDefault();
dialog.close();
}
});
}</script>
</head>
<body>
@@ -1411,6 +1516,8 @@ export { HeadingAnchors }</script>
<heading-anchors content="<i class='fa-solid fa-anchor'></i>">
<article>
<h1 id="acadia-mitts">acadia mitts</h1>
@@ -1435,7 +1542,11 @@ export { HeadingAnchors }</script>
</div>
<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">
<dialog closedby="any" aria-label="image modal" tabindex="-1">
<button class="close-dialog" autofocus="" aria-label="close the image modal">&times;</button>
<img class="modal-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">
</dialog>
<img tabindex="0" class="hero" 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">
<p>Yarn: <a href="https://thefibreco.com/products/acadia" target="_blank" rel="external">The Fibre Co. Acadia</a></p>
@@ -1480,20 +1591,6 @@ export { HeadingAnchors }</script>
<h2 data-ha-exclude="" id="related-posts">related posts</h2>
<ol id="postlist">
<li class="post">
<a class="postlink" href="/sideways-canvas-shirt/">
<h2 data-ha-exclude="" id="sideways-canvas-shirt">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>
<li class="post">
<a class="postlink" href="/pink-socks/">
<h2 data-ha-exclude="" id="pink-socks">pink socks </h2>
@@ -1522,6 +1619,20 @@ export { HeadingAnchors }</script>
</a>
</li>
<li class="post">
<a class="postlink" href="/keffiyah-fishing-net-pattern/">
<h2 data-ha-exclude="" id="keffiyah-fishing-net-pattern">keffiyah fishing net pattern </h2>
<ul class="postlist-tags">
<li>knit</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">
</a>
</li>
</ol>
</section>
@@ -1553,6 +1664,6 @@ export { HeadingAnchors }</script>
</footer>
<!-- This page `/acadia-mitts/` was built on 2026-05-06T18:04:11.551Z -->
<!-- This page `/acadia-mitts/` was built on 2026-05-14T03:43:27.994Z -->
</body>
</html>
_site/accessible-image-modals/index.html
+125 -10
View File
@@ -457,6 +457,90 @@ pre[class*=language-]::selection {
.tag:nth-child(odd) p {
text-align: right;
}
img[tabindex="0"]:focus-visible {
outline: .15rem solid var(--color-teal);
}
dialog {
margin: auto;
flex-flow: column;
background: transparent;
border: none;
position: absolute;
}
dialog[open] {
display: flex;
}
dialog::backdrop {
background-color: rgba(from var(--color-bg) r g b / .8);
backdrop-filter: blur(4px);
}
body:has(dialog[open]) {
overflow: hidden;
}
.close-dialog {
background-color: rgba(from var(--color-teal) r g b / .2);
font-size: 1.5rem;
padding: 0 .5rem .15rem;
border-radius: 1rem;
color: var(--color-teal);
box-shadow: .15rem .15rem var(--color-shadow);
border: .08rem solid var(--color-teal);
align-self: flex-end;
justify-self: flex-start;
margin: 0 .1rem;
/* Click animation handling */
position: relative;
top: 1rem;
left: -.15rem;
transition: top .1s ease-in, left .1s ease-in;
}
.close-dialog:focus-visible {
outline: none;
background-color: var(--color-teal);
color: var(--color-bg);
}
@media (any-hover: hover) {
.close-dialog:hover {
outline: none;
background-color: var(--color-teal);
color: var(--color-bg);
}
}
@media (forced-colors: active) {
.close-dialog:focus-visible {
outline-offset: .08rem;
outline: .08rem solid;
}
@media (any-hover: hover) {
.close-dialog:hover {
outline-offset: .08rem;
outline: .08rem solid;
}
}
}
/* Click animation */
.close-dialog:active {
top: 1.1rem;
left: -.05rem;
box-shadow: .05rem .05rem var(--color-shadow);
}
.modal-img {
max-height: calc(90vh - 2rem);
object-fit: contain;
width: auto;
margin: 0 1rem;
}
:root {
color-scheme: light dark;
@@ -637,7 +721,6 @@ span.ha-placeholder {
opacity: .55;
}
/* Lists */
::marker {
color: var(--color-pink);
@@ -1351,7 +1434,29 @@ class HeadingAnchors extends HTMLElement {
HeadingAnchors.register();
export { HeadingAnchors }</script>
export { HeadingAnchors }
/* don't even bother on mobile */
if (window.innerWidth > 650) {
const dialog = document.querySelector("dialog");
const closeButton = document.querySelector(".close-dialog");
const hero = document.querySelector(".hero");
hero.addEventListener("click", (e) => dialog.showModal());
hero.addEventListener("keydown", (e) => {
if (e.key === "Enter" || e.key === " ") {
e.preventDefault();
dialog.showModal();
}
});
closeButton.addEventListener("click", (e) => dialog.close());
closeButton.addEventListener("keydown", (e) => {
if (e.key === "Enter" || e.key === " ") {
e.preventDefault();
dialog.close();
}
});
}</script>
</head>
<body>
@@ -1411,6 +1516,8 @@ export { HeadingAnchors }</script>
<heading-anchors content="<i class='fa-solid fa-anchor'></i>">
<article>
<h1 id="accessible-image-modals">accessible image modals</h1>
@@ -1435,7 +1542,11 @@ export { HeadingAnchors }</script>
</div>
<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">
<dialog closedby="any" aria-label="image modal" tabindex="-1">
<button class="close-dialog" autofocus="" aria-label="close the image modal">&times;</button>
<img class="modal-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">
</dialog>
<img tabindex="0" class="hero" 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">
<p>Recently I've been working on a single-page digital rendition of a zine complete with many hand-drawn images. The author wanted to be able to bring images up to a full-screen view, to either zoom in or to put the whole enlarged image on one screen with no scrolling. It was a real struggle to find resources on how to do this in an accessible manner, so I'm writing up what I did.</p>
@@ -1540,15 +1651,19 @@ export { HeadingAnchors }</script>
<ol id="postlist">
<li class="post">
<a class="postlink" href="/an-intro-to-git/">
<h2 data-ha-exclude="" id="an-intro-to-git">an intro to git </h2>
<a class="postlink" href="/gender-in-data-models/">
<h2 data-ha-exclude="" id="gender-in-data-models">gender in data models </h2>
<ul class="postlist-tags">
<li>gender</li>
<li>software</li>
<li>highlight</li>
</ul>
<img src="/img/goldeneye-tail.jpg" alt="Image unrelated to post. The tail of a diving duck pokes out from the water with a small splash." loading="lazy" decoding="async" width="1000" height="666">
<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>
@@ -1568,15 +1683,15 @@ export { HeadingAnchors }</script>
</li>
<li class="post">
<a class="postlink" href="/intro-to-wireframing/">
<h2 data-ha-exclude="" id="intro-to-wireframing">intro to wireframing </h2>
<a class="postlink" href="/comparing-text-editors/">
<h2 data-ha-exclude="" id="comparing-text-editors">comparing text editors </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/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">
</a>
</li>
@@ -1612,6 +1727,6 @@ export { HeadingAnchors }</script>
</footer>
<!-- This page `/accessible-image-modals/` was built on 2026-05-06T18:04:11.565Z -->
<!-- This page `/accessible-image-modals/` was built on 2026-05-14T03:43:28.005Z -->
</body>
</html>
_site/an-intro-to-git/index.html
+126 -13
View File
@@ -457,6 +457,90 @@ pre[class*=language-]::selection {
.tag:nth-child(odd) p {
text-align: right;
}
img[tabindex="0"]:focus-visible {
outline: .15rem solid var(--color-teal);
}
dialog {
margin: auto;
flex-flow: column;
background: transparent;
border: none;
position: absolute;
}
dialog[open] {
display: flex;
}
dialog::backdrop {
background-color: rgba(from var(--color-bg) r g b / .8);
backdrop-filter: blur(4px);
}
body:has(dialog[open]) {
overflow: hidden;
}
.close-dialog {
background-color: rgba(from var(--color-teal) r g b / .2);
font-size: 1.5rem;
padding: 0 .5rem .15rem;
border-radius: 1rem;
color: var(--color-teal);
box-shadow: .15rem .15rem var(--color-shadow);
border: .08rem solid var(--color-teal);
align-self: flex-end;
justify-self: flex-start;
margin: 0 .1rem;
/* Click animation handling */
position: relative;
top: 1rem;
left: -.15rem;
transition: top .1s ease-in, left .1s ease-in;
}
.close-dialog:focus-visible {
outline: none;
background-color: var(--color-teal);
color: var(--color-bg);
}
@media (any-hover: hover) {
.close-dialog:hover {
outline: none;
background-color: var(--color-teal);
color: var(--color-bg);
}
}
@media (forced-colors: active) {
.close-dialog:focus-visible {
outline-offset: .08rem;
outline: .08rem solid;
}
@media (any-hover: hover) {
.close-dialog:hover {
outline-offset: .08rem;
outline: .08rem solid;
}
}
}
/* Click animation */
.close-dialog:active {
top: 1.1rem;
left: -.05rem;
box-shadow: .05rem .05rem var(--color-shadow);
}
.modal-img {
max-height: calc(90vh - 2rem);
object-fit: contain;
width: auto;
margin: 0 1rem;
}
:root {
color-scheme: light dark;
@@ -637,7 +721,6 @@ span.ha-placeholder {
opacity: .55;
}
/* Lists */
::marker {
color: var(--color-pink);
@@ -1351,7 +1434,29 @@ class HeadingAnchors extends HTMLElement {
HeadingAnchors.register();
export { HeadingAnchors }</script>
export { HeadingAnchors }
/* don't even bother on mobile */
if (window.innerWidth > 650) {
const dialog = document.querySelector("dialog");
const closeButton = document.querySelector(".close-dialog");
const hero = document.querySelector(".hero");
hero.addEventListener("click", (e) => dialog.showModal());
hero.addEventListener("keydown", (e) => {
if (e.key === "Enter" || e.key === " ") {
e.preventDefault();
dialog.showModal();
}
});
closeButton.addEventListener("click", (e) => dialog.close());
closeButton.addEventListener("keydown", (e) => {
if (e.key === "Enter" || e.key === " ") {
e.preventDefault();
dialog.close();
}
});
}</script>
</head>
<body>
@@ -1411,6 +1516,8 @@ export { HeadingAnchors }</script>
<heading-anchors content="<i class='fa-solid fa-anchor'></i>">
<article>
<h1 id="an-intro-to-git">an intro to git</h1>
@@ -1435,7 +1542,11 @@ export { HeadingAnchors }</script>
</div>
<img src="/img/goldeneye-tail.jpg" alt="Image unrelated to post. The tail of a diving duck pokes out from the water with a small splash." loading="lazy" decoding="async" width="1000" height="666">
<dialog closedby="any" aria-label="image modal" tabindex="-1">
<button class="close-dialog" autofocus="" aria-label="close the image modal">&times;</button>
<img class="modal-img" src="/img/goldeneye-tail.jpg" alt="Image unrelated to post. The tail of a diving duck pokes out from the water with a small splash." loading="lazy" decoding="async" width="1000" height="666">
</dialog>
<img tabindex="0" class="hero" src="/img/goldeneye-tail.jpg" alt="Image unrelated to post. The tail of a diving duck pokes out from the water with a small splash." loading="lazy" decoding="async" width="1000" height="666">
<p>alrighty, this one's a real doozy. Strap in.</p>
@@ -1896,43 +2007,45 @@ codeberg https://codeberg.org/inherentlee/git-intro.git (push)</code></pre>
<ol id="postlist">
<li class="post">
<a class="postlink" href="/moving-images/">
<h2 data-ha-exclude="" id="moving-images">moving images </h2>
<a class="postlink" href="/azure-locations-and-file-crawling/">
<h2 data-ha-exclude="" id="azure-locations-and-file-crawling">azure locations and file crawling </h2>
<ul class="postlist-tags">
<li>software</li>
<li>highlight</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/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>
<li class="post">
<a class="postlink" href="/my-favorite-git-flag/">
<h2 data-ha-exclude="" id="my-favorite-git-flag">my favorite git flag </h2>
<a class="postlink" href="/intro-to-wireframing/">
<h2 data-ha-exclude="" id="intro-to-wireframing">intro to wireframing </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">
<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="/screen-reader-optimizations/">
<h2 data-ha-exclude="" id="screen-reader-optimizations">screen reader optimizations </h2>
<a class="postlink" href="/eleventy-lessons/">
<h2 data-ha-exclude="" id="eleventy-lessons">eleventy lessons </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/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>
@@ -1968,6 +2081,6 @@ codeberg https://codeberg.org/inherentlee/git-intro.git (push)</code></pre>
</footer>
<!-- This page `/an-intro-to-git/` was built on 2026-05-06T18:04:11.560Z -->
<!-- This page `/an-intro-to-git/` was built on 2026-05-14T03:43:28.002Z -->
</body>
</html>
_site/anarchy-autism/index.html
+137 -28
View File
@@ -457,6 +457,90 @@ pre[class*=language-]::selection {
.tag:nth-child(odd) p {
text-align: right;
}
img[tabindex="0"]:focus-visible {
outline: .15rem solid var(--color-teal);
}
dialog {
margin: auto;
flex-flow: column;
background: transparent;
border: none;
position: absolute;
}
dialog[open] {
display: flex;
}
dialog::backdrop {
background-color: rgba(from var(--color-bg) r g b / .8);
backdrop-filter: blur(4px);
}
body:has(dialog[open]) {
overflow: hidden;
}
.close-dialog {
background-color: rgba(from var(--color-teal) r g b / .2);
font-size: 1.5rem;
padding: 0 .5rem .15rem;
border-radius: 1rem;
color: var(--color-teal);
box-shadow: .15rem .15rem var(--color-shadow);
border: .08rem solid var(--color-teal);
align-self: flex-end;
justify-self: flex-start;
margin: 0 .1rem;
/* Click animation handling */
position: relative;
top: 1rem;
left: -.15rem;
transition: top .1s ease-in, left .1s ease-in;
}
.close-dialog:focus-visible {
outline: none;
background-color: var(--color-teal);
color: var(--color-bg);
}
@media (any-hover: hover) {
.close-dialog:hover {
outline: none;
background-color: var(--color-teal);
color: var(--color-bg);
}
}
@media (forced-colors: active) {
.close-dialog:focus-visible {
outline-offset: .08rem;
outline: .08rem solid;
}
@media (any-hover: hover) {
.close-dialog:hover {
outline-offset: .08rem;
outline: .08rem solid;
}
}
}
/* Click animation */
.close-dialog:active {
top: 1.1rem;
left: -.05rem;
box-shadow: .05rem .05rem var(--color-shadow);
}
.modal-img {
max-height: calc(90vh - 2rem);
object-fit: contain;
width: auto;
margin: 0 1rem;
}
:root {
color-scheme: light dark;
@@ -637,7 +721,6 @@ span.ha-placeholder {
opacity: .55;
}
/* Lists */
::marker {
color: var(--color-pink);
@@ -1351,7 +1434,29 @@ class HeadingAnchors extends HTMLElement {
HeadingAnchors.register();
export { HeadingAnchors }</script>
export { HeadingAnchors }
/* don't even bother on mobile */
if (window.innerWidth > 650) {
const dialog = document.querySelector("dialog");
const closeButton = document.querySelector(".close-dialog");
const hero = document.querySelector(".hero");
hero.addEventListener("click", (e) => dialog.showModal());
hero.addEventListener("keydown", (e) => {
if (e.key === "Enter" || e.key === " ") {
e.preventDefault();
dialog.showModal();
}
});
closeButton.addEventListener("click", (e) => dialog.close());
closeButton.addEventListener("keydown", (e) => {
if (e.key === "Enter" || e.key === " ") {
e.preventDefault();
dialog.close();
}
});
}</script>
</head>
<body>
@@ -1411,6 +1516,8 @@ export { HeadingAnchors }</script>
<heading-anchors content="<i class='fa-solid fa-anchor'></i>">
<article>
<h1 id="anarchy-autism">anarchy autism</h1>
@@ -1450,7 +1557,11 @@ export { HeadingAnchors }</script>
</div>
<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">
<dialog closedby="any" aria-label="image modal" tabindex="-1">
<button class="close-dialog" autofocus="" aria-label="close the image modal">&times;</button>
<img class="modal-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">
</dialog>
<img tabindex="0" class="hero" 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">
<p>my therapist's idea</p>
@@ -1503,8 +1614,8 @@ export { HeadingAnchors }</script>
<ol id="postlist">
<li class="post">
<a class="postlink" href="/congrats-on-the-gay/">
<h2 data-ha-exclude="" id="congrats-on-the-gay">congrats on the gay </h2>
<a class="postlink" href="/chanterelle/">
<h2 data-ha-exclude="" id="chanterelle">chanterelle </h2>
<ul class="postlist-tags">
@@ -1512,17 +1623,29 @@ export { HeadingAnchors }</script>
<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/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="/nonbinary-flag/">
<h2 data-ha-exclude="" id="nonbinary-flag">nonbinary flag </h2>
<a class="postlink" href="/crow/">
<h2 data-ha-exclude="" id="crow">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="/queer/">
<h2 data-ha-exclude="" id="queer">queer </h2>
<ul class="postlist-tags">
@@ -1530,28 +1653,14 @@ export { HeadingAnchors }</script>
<li>card</li>
<li>gender</li>
<li>sticker</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">
</a>
</li>
<li class="post">
<a class="postlink" href="/trans-the-world/">
<h2 data-ha-exclude="" id="trans-the-world">trans the world </h2>
<ul class="postlist-tags">
<li>print</li>
<li>shirt</li>
<li>pin</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/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>
@@ -1587,6 +1696,6 @@ export { HeadingAnchors }</script>
</footer>
<!-- This page `/anarchy-autism/` was built on 2026-05-06T18:04:11.573Z -->
<!-- This page `/anarchy-autism/` was built on 2026-05-14T03:43:28.020Z -->
</body>
</html>
_site/art-shows-and-events/index.html
+115 -4
View File
@@ -457,6 +457,90 @@ pre[class*=language-]::selection {
.tag:nth-child(odd) p {
text-align: right;
}
img[tabindex="0"]:focus-visible {
outline: .15rem solid var(--color-teal);
}
dialog {
margin: auto;
flex-flow: column;
background: transparent;
border: none;
position: absolute;
}
dialog[open] {
display: flex;
}
dialog::backdrop {
background-color: rgba(from var(--color-bg) r g b / .8);
backdrop-filter: blur(4px);
}
body:has(dialog[open]) {
overflow: hidden;
}
.close-dialog {
background-color: rgba(from var(--color-teal) r g b / .2);
font-size: 1.5rem;
padding: 0 .5rem .15rem;
border-radius: 1rem;
color: var(--color-teal);
box-shadow: .15rem .15rem var(--color-shadow);
border: .08rem solid var(--color-teal);
align-self: flex-end;
justify-self: flex-start;
margin: 0 .1rem;
/* Click animation handling */
position: relative;
top: 1rem;
left: -.15rem;
transition: top .1s ease-in, left .1s ease-in;
}
.close-dialog:focus-visible {
outline: none;
background-color: var(--color-teal);
color: var(--color-bg);
}
@media (any-hover: hover) {
.close-dialog:hover {
outline: none;
background-color: var(--color-teal);
color: var(--color-bg);
}
}
@media (forced-colors: active) {
.close-dialog:focus-visible {
outline-offset: .08rem;
outline: .08rem solid;
}
@media (any-hover: hover) {
.close-dialog:hover {
outline-offset: .08rem;
outline: .08rem solid;
}
}
}
/* Click animation */
.close-dialog:active {
top: 1.1rem;
left: -.05rem;
box-shadow: .05rem .05rem var(--color-shadow);
}
.modal-img {
max-height: calc(90vh - 2rem);
object-fit: contain;
width: auto;
margin: 0 1rem;
}
:root {
color-scheme: light dark;
@@ -637,7 +721,6 @@ span.ha-placeholder {
opacity: .55;
}
/* Lists */
::marker {
color: var(--color-pink);
@@ -1351,7 +1434,29 @@ class HeadingAnchors extends HTMLElement {
HeadingAnchors.register();
export { HeadingAnchors }</script>
export { HeadingAnchors }
/* don't even bother on mobile */
if (window.innerWidth > 650) {
const dialog = document.querySelector("dialog");
const closeButton = document.querySelector(".close-dialog");
const hero = document.querySelector(".hero");
hero.addEventListener("click", (e) => dialog.showModal());
hero.addEventListener("keydown", (e) => {
if (e.key === "Enter" || e.key === " ") {
e.preventDefault();
dialog.showModal();
}
});
closeButton.addEventListener("click", (e) => dialog.close());
closeButton.addEventListener("keydown", (e) => {
if (e.key === "Enter" || e.key === " ") {
e.preventDefault();
dialog.close();
}
});
}</script>
</head>
<body>
@@ -1411,6 +1516,8 @@ export { HeadingAnchors }</script>
<heading-anchors content="<i class='fa-solid fa-anchor'></i>">
<article>
<h1 id="art-shows-and-events">art shows and events</h1>
@@ -1426,7 +1533,11 @@ export { HeadingAnchors }</script>
</div>
<img src="/img/pink-yellow-flowers.jpg" alt="Image unrelated to post. A cluster of small, four-petaled flowers, varying in color between a purpley-pink and yellow." loading="lazy" decoding="async" width="1000" height="750">
<dialog closedby="any" aria-label="image modal" tabindex="-1">
<button class="close-dialog" autofocus="" aria-label="close the image modal">&times;</button>
<img class="modal-img" src="/img/pink-yellow-flowers.jpg" alt="Image unrelated to post. A cluster of small, four-petaled flowers, varying in color between a purpley-pink and yellow." loading="lazy" decoding="async" width="1000" height="750">
</dialog>
<img tabindex="0" class="hero" src="/img/pink-yellow-flowers.jpg" alt="Image unrelated to post. A cluster of small, four-petaled flowers, varying in color between a purpley-pink and yellow." loading="lazy" decoding="async" width="1000" height="750">
<p>Listed by recency.</p>
@@ -1517,6 +1628,6 @@ export { HeadingAnchors }</script>
</footer>
<!-- This page `/art-shows-and-events/` was built on 2026-05-06T18:04:11.550Z -->
<!-- This page `/art-shows-and-events/` was built on 2026-05-14T03:43:27.993Z -->
</body>
</html>
_site/artisans-cooperative-cards/index.html
+154 -39
View File
@@ -457,6 +457,90 @@ pre[class*=language-]::selection {
.tag:nth-child(odd) p {
text-align: right;
}
img[tabindex="0"]:focus-visible {
outline: .15rem solid var(--color-teal);
}
dialog {
margin: auto;
flex-flow: column;
background: transparent;
border: none;
position: absolute;
}
dialog[open] {
display: flex;
}
dialog::backdrop {
background-color: rgba(from var(--color-bg) r g b / .8);
backdrop-filter: blur(4px);
}
body:has(dialog[open]) {
overflow: hidden;
}
.close-dialog {
background-color: rgba(from var(--color-teal) r g b / .2);
font-size: 1.5rem;
padding: 0 .5rem .15rem;
border-radius: 1rem;
color: var(--color-teal);
box-shadow: .15rem .15rem var(--color-shadow);
border: .08rem solid var(--color-teal);
align-self: flex-end;
justify-self: flex-start;
margin: 0 .1rem;
/* Click animation handling */
position: relative;
top: 1rem;
left: -.15rem;
transition: top .1s ease-in, left .1s ease-in;
}
.close-dialog:focus-visible {
outline: none;
background-color: var(--color-teal);
color: var(--color-bg);
}
@media (any-hover: hover) {
.close-dialog:hover {
outline: none;
background-color: var(--color-teal);
color: var(--color-bg);
}
}
@media (forced-colors: active) {
.close-dialog:focus-visible {
outline-offset: .08rem;
outline: .08rem solid;
}
@media (any-hover: hover) {
.close-dialog:hover {
outline-offset: .08rem;
outline: .08rem solid;
}
}
}
/* Click animation */
.close-dialog:active {
top: 1.1rem;
left: -.05rem;
box-shadow: .05rem .05rem var(--color-shadow);
}
.modal-img {
max-height: calc(90vh - 2rem);
object-fit: contain;
width: auto;
margin: 0 1rem;
}
:root {
color-scheme: light dark;
@@ -637,7 +721,6 @@ span.ha-placeholder {
opacity: .55;
}
/* Lists */
::marker {
color: var(--color-pink);
@@ -1351,7 +1434,29 @@ class HeadingAnchors extends HTMLElement {
HeadingAnchors.register();
export { HeadingAnchors }</script>
export { HeadingAnchors }
/* don't even bother on mobile */
if (window.innerWidth > 650) {
const dialog = document.querySelector("dialog");
const closeButton = document.querySelector(".close-dialog");
const hero = document.querySelector(".hero");
hero.addEventListener("click", (e) => dialog.showModal());
hero.addEventListener("keydown", (e) => {
if (e.key === "Enter" || e.key === " ") {
e.preventDefault();
dialog.showModal();
}
});
closeButton.addEventListener("click", (e) => dialog.close());
closeButton.addEventListener("keydown", (e) => {
if (e.key === "Enter" || e.key === " ") {
e.preventDefault();
dialog.close();
}
});
}</script>
</head>
<body>
@@ -1411,6 +1516,8 @@ export { HeadingAnchors }</script>
<heading-anchors content="<i class='fa-solid fa-anchor'></i>">
<article>
<h1 id="artisans-cooperative-cards">artisans cooperative cards</h1>
@@ -1440,7 +1547,11 @@ export { HeadingAnchors }</script>
</div>
<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">
<dialog closedby="any" aria-label="image modal" tabindex="-1">
<button class="close-dialog" autofocus="" aria-label="close the image modal">&times;</button>
<img class="modal-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">
</dialog>
<img tabindex="0" class="hero" 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">
<p>Learn more about <a href="https://artisans.coop/" target="_blank" rel="external">Artisans Cooperative</a>, a new platform for makers and supporters.</p>
@@ -1488,40 +1599,8 @@ export { HeadingAnchors }</script>
<ol id="postlist">
<li class="post">
<a class="postlink" href="/geese-trans-wrongs/">
<h2 data-ha-exclude="" id="geese-trans-wrongs">geese/trans wrongs </h2>
<ul class="postlist-tags">
<li>print</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">
</a>
</li>
<li class="post">
<a class="postlink" href="/printmaking-paper-notes/">
<h2 data-ha-exclude="" id="printmaking-paper-notes">printmaking paper notes </h2>
<ul class="postlist-tags">
<li>print</li>
</ul>
<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>
<li class="post">
<a class="postlink" href="/junco/">
<h2 data-ha-exclude="" id="junco">junco </h2>
<a class="postlink" href="/queer/">
<h2 data-ha-exclude="" id="queer">queer </h2>
<ul class="postlist-tags">
@@ -1529,8 +1608,44 @@ export { HeadingAnchors }</script>
<li>card</li>
<li>sticker</li>
<li>pin</li>
<li>gender</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/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>
<li class="post">
<a class="postlink" href="/rope-one/">
<h2 data-ha-exclude="" id="rope-one-mature">rope (one) (mature)</h2>
<ul class="postlist-tags">
<li>print</li>
<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">
</a>
</li>
<li class="post">
<a class="postlink" href="/brown-creeper/">
<h2 data-ha-exclude="" id="brown-creeper">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>
@@ -1566,6 +1681,6 @@ export { HeadingAnchors }</script>
</footer>
<!-- This page `/artisans-cooperative-cards/` was built on 2026-05-06T18:04:11.571Z -->
<!-- This page `/artisans-cooperative-cards/` was built on 2026-05-14T03:43:28.016Z -->
</body>
</html>
_site/artisans-cooperative-shirts/index.html
+141 -24
View File
@@ -457,6 +457,90 @@ pre[class*=language-]::selection {
.tag:nth-child(odd) p {
text-align: right;
}
img[tabindex="0"]:focus-visible {
outline: .15rem solid var(--color-teal);
}
dialog {
margin: auto;
flex-flow: column;
background: transparent;
border: none;
position: absolute;
}
dialog[open] {
display: flex;
}
dialog::backdrop {
background-color: rgba(from var(--color-bg) r g b / .8);
backdrop-filter: blur(4px);
}
body:has(dialog[open]) {
overflow: hidden;
}
.close-dialog {
background-color: rgba(from var(--color-teal) r g b / .2);
font-size: 1.5rem;
padding: 0 .5rem .15rem;
border-radius: 1rem;
color: var(--color-teal);
box-shadow: .15rem .15rem var(--color-shadow);
border: .08rem solid var(--color-teal);
align-self: flex-end;
justify-self: flex-start;
margin: 0 .1rem;
/* Click animation handling */
position: relative;
top: 1rem;
left: -.15rem;
transition: top .1s ease-in, left .1s ease-in;
}
.close-dialog:focus-visible {
outline: none;
background-color: var(--color-teal);
color: var(--color-bg);
}
@media (any-hover: hover) {
.close-dialog:hover {
outline: none;
background-color: var(--color-teal);
color: var(--color-bg);
}
}
@media (forced-colors: active) {
.close-dialog:focus-visible {
outline-offset: .08rem;
outline: .08rem solid;
}
@media (any-hover: hover) {
.close-dialog:hover {
outline-offset: .08rem;
outline: .08rem solid;
}
}
}
/* Click animation */
.close-dialog:active {
top: 1.1rem;
left: -.05rem;
box-shadow: .05rem .05rem var(--color-shadow);
}
.modal-img {
max-height: calc(90vh - 2rem);
object-fit: contain;
width: auto;
margin: 0 1rem;
}
:root {
color-scheme: light dark;
@@ -637,7 +721,6 @@ span.ha-placeholder {
opacity: .55;
}
/* Lists */
::marker {
color: var(--color-pink);
@@ -1351,7 +1434,29 @@ class HeadingAnchors extends HTMLElement {
HeadingAnchors.register();
export { HeadingAnchors }</script>
export { HeadingAnchors }
/* don't even bother on mobile */
if (window.innerWidth > 650) {
const dialog = document.querySelector("dialog");
const closeButton = document.querySelector(".close-dialog");
const hero = document.querySelector(".hero");
hero.addEventListener("click", (e) => dialog.showModal());
hero.addEventListener("keydown", (e) => {
if (e.key === "Enter" || e.key === " ") {
e.preventDefault();
dialog.showModal();
}
});
closeButton.addEventListener("click", (e) => dialog.close());
closeButton.addEventListener("keydown", (e) => {
if (e.key === "Enter" || e.key === " ") {
e.preventDefault();
dialog.close();
}
});
}</script>
</head>
<body>
@@ -1411,6 +1516,8 @@ export { HeadingAnchors }</script>
<heading-anchors content="<i class='fa-solid fa-anchor'></i>">
<article>
<h1 id="artisans-cooperative-shirts">artisans cooperative shirts</h1>
@@ -1440,7 +1547,11 @@ export { HeadingAnchors }</script>
</div>
<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">
<dialog closedby="any" aria-label="image modal" tabindex="-1">
<button class="close-dialog" autofocus="" aria-label="close the image modal">&times;</button>
<img class="modal-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">
</dialog>
<img tabindex="0" class="hero" 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">
<p>Learn more about <a href="https://artisans.coop/" target="_blank" rel="external">Artisans Cooperative</a>, a new platform for makers and supporters.</p>
@@ -1489,8 +1600,26 @@ export { HeadingAnchors }</script>
<ol id="postlist">
<li class="post">
<a class="postlink" href="/seedling/">
<h2 data-ha-exclude="" id="seedling">seedling </h2>
<a class="postlink" href="/trans-the-world/">
<h2 data-ha-exclude="" id="trans-the-world">trans the world </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">
</a>
</li>
<li class="post">
<a class="postlink" href="/iris/">
<h2 data-ha-exclude="" id="iris">iris </h2>
<ul class="postlist-tags">
@@ -1499,37 +1628,25 @@ export { HeadingAnchors }</script>
<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">
<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">
</a>
</li>
<li class="post">
<a class="postlink" href="/become-unbutterable/">
<h2 data-ha-exclude="" id="become-unbutterable">become unbutterable </h2>
<a class="postlink" href="/swallowtail-on-snowdrops/">
<h2 data-ha-exclude="" id="swallowtail-on-snowdrops">swallowtail on snowdrops </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">
<li>card</li>
</a>
</li>
<li class="post">
<a class="postlink" href="/quorbs/">
<h2 data-ha-exclude="" id="quorbs">quorbs </h2>
<ul class="postlist-tags">
<li>print</li>
<li>highlight</li>
<li>shirt</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/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>
@@ -1565,6 +1682,6 @@ export { HeadingAnchors }</script>
</footer>
<!-- This page `/artisans-cooperative-shirts/` was built on 2026-05-06T18:04:11.572Z -->
<!-- This page `/artisans-cooperative-shirts/` was built on 2026-05-14T03:43:28.019Z -->
</body>
</html>
_site/artists-conk/index.html
+115 -4
View File
@@ -457,6 +457,90 @@ pre[class*=language-]::selection {
.tag:nth-child(odd) p {
text-align: right;
}
img[tabindex="0"]:focus-visible {
outline: .15rem solid var(--color-teal);
}
dialog {
margin: auto;
flex-flow: column;
background: transparent;
border: none;
position: absolute;
}
dialog[open] {
display: flex;
}
dialog::backdrop {
background-color: rgba(from var(--color-bg) r g b / .8);
backdrop-filter: blur(4px);
}
body:has(dialog[open]) {
overflow: hidden;
}
.close-dialog {
background-color: rgba(from var(--color-teal) r g b / .2);
font-size: 1.5rem;
padding: 0 .5rem .15rem;
border-radius: 1rem;
color: var(--color-teal);
box-shadow: .15rem .15rem var(--color-shadow);
border: .08rem solid var(--color-teal);
align-self: flex-end;
justify-self: flex-start;
margin: 0 .1rem;
/* Click animation handling */
position: relative;
top: 1rem;
left: -.15rem;
transition: top .1s ease-in, left .1s ease-in;
}
.close-dialog:focus-visible {
outline: none;
background-color: var(--color-teal);
color: var(--color-bg);
}
@media (any-hover: hover) {
.close-dialog:hover {
outline: none;
background-color: var(--color-teal);
color: var(--color-bg);
}
}
@media (forced-colors: active) {
.close-dialog:focus-visible {
outline-offset: .08rem;
outline: .08rem solid;
}
@media (any-hover: hover) {
.close-dialog:hover {
outline-offset: .08rem;
outline: .08rem solid;
}
}
}
/* Click animation */
.close-dialog:active {
top: 1.1rem;
left: -.05rem;
box-shadow: .05rem .05rem var(--color-shadow);
}
.modal-img {
max-height: calc(90vh - 2rem);
object-fit: contain;
width: auto;
margin: 0 1rem;
}
:root {
color-scheme: light dark;
@@ -637,7 +721,6 @@ span.ha-placeholder {
opacity: .55;
}
/* Lists */
::marker {
color: var(--color-pink);
@@ -1351,7 +1434,29 @@ class HeadingAnchors extends HTMLElement {
HeadingAnchors.register();
export { HeadingAnchors }</script>
export { HeadingAnchors }
/* don't even bother on mobile */
if (window.innerWidth > 650) {
const dialog = document.querySelector("dialog");
const closeButton = document.querySelector(".close-dialog");
const hero = document.querySelector(".hero");
hero.addEventListener("click", (e) => dialog.showModal());
hero.addEventListener("keydown", (e) => {
if (e.key === "Enter" || e.key === " ") {
e.preventDefault();
dialog.showModal();
}
});
closeButton.addEventListener("click", (e) => dialog.close());
closeButton.addEventListener("keydown", (e) => {
if (e.key === "Enter" || e.key === " ") {
e.preventDefault();
dialog.close();
}
});
}</script>
</head>
<body>
@@ -1411,6 +1516,8 @@ export { HeadingAnchors }</script>
<heading-anchors content="<i class='fa-solid fa-anchor'></i>">
<article>
<h1 id="artists-conk">artists conk!</h1>
@@ -1426,7 +1533,11 @@ export { HeadingAnchors }</script>
</div>
<img src="/img/artists-conk-leatherworking.jpg" alt="A hand holding a mushroom with a whitish surface. Scratched into the surface and showing up as brown lines is an illustration of many leatherworking tools." loading="lazy" decoding="async" width="1000" height="750">
<dialog closedby="any" aria-label="image modal" tabindex="-1">
<button class="close-dialog" autofocus="" aria-label="close the image modal">&times;</button>
<img class="modal-img" src="/img/artists-conk-leatherworking.jpg" alt="A hand holding a mushroom with a whitish surface. Scratched into the surface and showing up as brown lines is an illustration of many leatherworking tools." loading="lazy" decoding="async" width="1000" height="750">
</dialog>
<img tabindex="0" class="hero" src="/img/artists-conk-leatherworking.jpg" alt="A hand holding a mushroom with a whitish surface. Scratched into the surface and showing up as brown lines is an illustration of many leatherworking tools." loading="lazy" decoding="async" width="1000" height="750">
<p>did you know you can draw on (certain) mushrooms</p>
@@ -1494,6 +1605,6 @@ export { HeadingAnchors }</script>
</footer>
<!-- This page `/artists-conk/` was built on 2026-05-06T18:04:11.575Z -->
<!-- This page `/artists-conk/` was built on 2026-05-14T03:43:28.023Z -->
</body>
</html>
_site/azure-locations-and-file-crawling/index.html
+121 -14
View File
@@ -457,6 +457,90 @@ pre[class*=language-]::selection {
.tag:nth-child(odd) p {
text-align: right;
}
img[tabindex="0"]:focus-visible {
outline: .15rem solid var(--color-teal);
}
dialog {
margin: auto;
flex-flow: column;
background: transparent;
border: none;
position: absolute;
}
dialog[open] {
display: flex;
}
dialog::backdrop {
background-color: rgba(from var(--color-bg) r g b / .8);
backdrop-filter: blur(4px);
}
body:has(dialog[open]) {
overflow: hidden;
}
.close-dialog {
background-color: rgba(from var(--color-teal) r g b / .2);
font-size: 1.5rem;
padding: 0 .5rem .15rem;
border-radius: 1rem;
color: var(--color-teal);
box-shadow: .15rem .15rem var(--color-shadow);
border: .08rem solid var(--color-teal);
align-self: flex-end;
justify-self: flex-start;
margin: 0 .1rem;
/* Click animation handling */
position: relative;
top: 1rem;
left: -.15rem;
transition: top .1s ease-in, left .1s ease-in;
}
.close-dialog:focus-visible {
outline: none;
background-color: var(--color-teal);
color: var(--color-bg);
}
@media (any-hover: hover) {
.close-dialog:hover {
outline: none;
background-color: var(--color-teal);
color: var(--color-bg);
}
}
@media (forced-colors: active) {
.close-dialog:focus-visible {
outline-offset: .08rem;
outline: .08rem solid;
}
@media (any-hover: hover) {
.close-dialog:hover {
outline-offset: .08rem;
outline: .08rem solid;
}
}
}
/* Click animation */
.close-dialog:active {
top: 1.1rem;
left: -.05rem;
box-shadow: .05rem .05rem var(--color-shadow);
}
.modal-img {
max-height: calc(90vh - 2rem);
object-fit: contain;
width: auto;
margin: 0 1rem;
}
:root {
color-scheme: light dark;
@@ -637,7 +721,6 @@ span.ha-placeholder {
opacity: .55;
}
/* Lists */
::marker {
color: var(--color-pink);
@@ -1351,7 +1434,29 @@ class HeadingAnchors extends HTMLElement {
HeadingAnchors.register();
export { HeadingAnchors }</script>
export { HeadingAnchors }
/* don't even bother on mobile */
if (window.innerWidth > 650) {
const dialog = document.querySelector("dialog");
const closeButton = document.querySelector(".close-dialog");
const hero = document.querySelector(".hero");
hero.addEventListener("click", (e) => dialog.showModal());
hero.addEventListener("keydown", (e) => {
if (e.key === "Enter" || e.key === " ") {
e.preventDefault();
dialog.showModal();
}
});
closeButton.addEventListener("click", (e) => dialog.close());
closeButton.addEventListener("keydown", (e) => {
if (e.key === "Enter" || e.key === " ") {
e.preventDefault();
dialog.close();
}
});
}</script>
</head>
<body>
@@ -1411,6 +1516,8 @@ export { HeadingAnchors }</script>
<heading-anchors content="<i class='fa-solid fa-anchor'></i>">
<article>
<h1 id="azure-locations-and-file-crawling">azure locations and file crawling</h1>
@@ -1440,7 +1547,11 @@ export { HeadingAnchors }</script>
</div>
<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">
<dialog closedby="any" aria-label="image modal" tabindex="-1">
<button class="close-dialog" autofocus="" aria-label="close the image modal">&times;</button>
<img class="modal-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">
</dialog>
<img tabindex="0" class="hero" 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">
<h2 id="context">context</h2>
@@ -1728,33 +1839,29 @@ export { HeadingAnchors }</script>
</li>
<li class="post">
<a class="postlink" href="/kestrel-zine/">
<h2 data-ha-exclude="" id="kestrel-zine">kestrel zine </h2>
<a class="postlink" href="/recommendations-and-favorites/">
<h2 data-ha-exclude="" id="recommendations-and-favorites">recommendations &amp; favorites </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">
<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>
<li class="post">
<a class="postlink" href="/backend-accessibility/">
<h2 data-ha-exclude="" id="backend-accessibility">backend accessibility </h2>
<a class="postlink" href="/my-favorite-git-flag/">
<h2 data-ha-exclude="" id="my-favorite-git-flag">my favorite git flag </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/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>
@@ -1790,6 +1897,6 @@ export { HeadingAnchors }</script>
</footer>
<!-- This page `/azure-locations-and-file-crawling/` was built on 2026-05-06T18:04:11.549Z -->
<!-- This page `/azure-locations-and-file-crawling/` was built on 2026-05-14T03:43:27.993Z -->
</body>
</html>
_site/backend-accessibility/index.html
+123 -10
View File
@@ -457,6 +457,90 @@ pre[class*=language-]::selection {
.tag:nth-child(odd) p {
text-align: right;
}
img[tabindex="0"]:focus-visible {
outline: .15rem solid var(--color-teal);
}
dialog {
margin: auto;
flex-flow: column;
background: transparent;
border: none;
position: absolute;
}
dialog[open] {
display: flex;
}
dialog::backdrop {
background-color: rgba(from var(--color-bg) r g b / .8);
backdrop-filter: blur(4px);
}
body:has(dialog[open]) {
overflow: hidden;
}
.close-dialog {
background-color: rgba(from var(--color-teal) r g b / .2);
font-size: 1.5rem;
padding: 0 .5rem .15rem;
border-radius: 1rem;
color: var(--color-teal);
box-shadow: .15rem .15rem var(--color-shadow);
border: .08rem solid var(--color-teal);
align-self: flex-end;
justify-self: flex-start;
margin: 0 .1rem;
/* Click animation handling */
position: relative;
top: 1rem;
left: -.15rem;
transition: top .1s ease-in, left .1s ease-in;
}
.close-dialog:focus-visible {
outline: none;
background-color: var(--color-teal);
color: var(--color-bg);
}
@media (any-hover: hover) {
.close-dialog:hover {
outline: none;
background-color: var(--color-teal);
color: var(--color-bg);
}
}
@media (forced-colors: active) {
.close-dialog:focus-visible {
outline-offset: .08rem;
outline: .08rem solid;
}
@media (any-hover: hover) {
.close-dialog:hover {
outline-offset: .08rem;
outline: .08rem solid;
}
}
}
/* Click animation */
.close-dialog:active {
top: 1.1rem;
left: -.05rem;
box-shadow: .05rem .05rem var(--color-shadow);
}
.modal-img {
max-height: calc(90vh - 2rem);
object-fit: contain;
width: auto;
margin: 0 1rem;
}
:root {
color-scheme: light dark;
@@ -637,7 +721,6 @@ span.ha-placeholder {
opacity: .55;
}
/* Lists */
::marker {
color: var(--color-pink);
@@ -1351,7 +1434,29 @@ class HeadingAnchors extends HTMLElement {
HeadingAnchors.register();
export { HeadingAnchors }</script>
export { HeadingAnchors }
/* don't even bother on mobile */
if (window.innerWidth > 650) {
const dialog = document.querySelector("dialog");
const closeButton = document.querySelector(".close-dialog");
const hero = document.querySelector(".hero");
hero.addEventListener("click", (e) => dialog.showModal());
hero.addEventListener("keydown", (e) => {
if (e.key === "Enter" || e.key === " ") {
e.preventDefault();
dialog.showModal();
}
});
closeButton.addEventListener("click", (e) => dialog.close());
closeButton.addEventListener("keydown", (e) => {
if (e.key === "Enter" || e.key === " ") {
e.preventDefault();
dialog.close();
}
});
}</script>
</head>
<body>
@@ -1411,6 +1516,8 @@ export { HeadingAnchors }</script>
<heading-anchors content="<i class='fa-solid fa-anchor'></i>">
<article>
<h1 id="backend-accessibility">backend accessibility</h1>
@@ -1435,7 +1542,11 @@ export { HeadingAnchors }</script>
</div>
<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">
<dialog closedby="any" aria-label="image modal" tabindex="-1">
<button class="close-dialog" autofocus="" aria-label="close the image modal">&times;</button>
<img class="modal-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">
</dialog>
<img tabindex="0" class="hero" 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">
<blockquote>
@@ -1542,15 +1653,15 @@ export { HeadingAnchors }</script>
<ol id="postlist">
<li class="post">
<a class="postlink" href="/screen-reader-optimizations/">
<h2 data-ha-exclude="" id="screen-reader-optimizations">screen reader optimizations </h2>
<a class="postlink" href="/handedness-toggle/">
<h2 data-ha-exclude="" id="handedness-toggle">handedness toggle </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/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>
@@ -1570,17 +1681,19 @@ export { HeadingAnchors }</script>
</li>
<li class="post">
<a class="postlink" href="/azure-locations-and-file-crawling/">
<h2 data-ha-exclude="" id="azure-locations-and-file-crawling">azure locations and file crawling </h2>
<a class="postlink" href="/gender-in-data-models/">
<h2 data-ha-exclude="" id="gender-in-data-models">gender in data models </h2>
<ul class="postlist-tags">
<li>gender</li>
<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/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>
@@ -1616,6 +1729,6 @@ export { HeadingAnchors }</script>
</footer>
<!-- This page `/backend-accessibility/` was built on 2026-05-06T18:04:11.568Z -->
<!-- This page `/backend-accessibility/` was built on 2026-05-14T03:43:28.009Z -->
</body>
</html>
_site/bag-strap/index.html
+124 -13
View File
@@ -457,6 +457,90 @@ pre[class*=language-]::selection {
.tag:nth-child(odd) p {
text-align: right;
}
img[tabindex="0"]:focus-visible {
outline: .15rem solid var(--color-teal);
}
dialog {
margin: auto;
flex-flow: column;
background: transparent;
border: none;
position: absolute;
}
dialog[open] {
display: flex;
}
dialog::backdrop {
background-color: rgba(from var(--color-bg) r g b / .8);
backdrop-filter: blur(4px);
}
body:has(dialog[open]) {
overflow: hidden;
}
.close-dialog {
background-color: rgba(from var(--color-teal) r g b / .2);
font-size: 1.5rem;
padding: 0 .5rem .15rem;
border-radius: 1rem;
color: var(--color-teal);
box-shadow: .15rem .15rem var(--color-shadow);
border: .08rem solid var(--color-teal);
align-self: flex-end;
justify-self: flex-start;
margin: 0 .1rem;
/* Click animation handling */
position: relative;
top: 1rem;
left: -.15rem;
transition: top .1s ease-in, left .1s ease-in;
}
.close-dialog:focus-visible {
outline: none;
background-color: var(--color-teal);
color: var(--color-bg);
}
@media (any-hover: hover) {
.close-dialog:hover {
outline: none;
background-color: var(--color-teal);
color: var(--color-bg);
}
}
@media (forced-colors: active) {
.close-dialog:focus-visible {
outline-offset: .08rem;
outline: .08rem solid;
}
@media (any-hover: hover) {
.close-dialog:hover {
outline-offset: .08rem;
outline: .08rem solid;
}
}
}
/* Click animation */
.close-dialog:active {
top: 1.1rem;
left: -.05rem;
box-shadow: .05rem .05rem var(--color-shadow);
}
.modal-img {
max-height: calc(90vh - 2rem);
object-fit: contain;
width: auto;
margin: 0 1rem;
}
:root {
color-scheme: light dark;
@@ -637,7 +721,6 @@ span.ha-placeholder {
opacity: .55;
}
/* Lists */
::marker {
color: var(--color-pink);
@@ -1351,7 +1434,29 @@ class HeadingAnchors extends HTMLElement {
HeadingAnchors.register();
export { HeadingAnchors }</script>
export { HeadingAnchors }
/* don't even bother on mobile */
if (window.innerWidth > 650) {
const dialog = document.querySelector("dialog");
const closeButton = document.querySelector(".close-dialog");
const hero = document.querySelector(".hero");
hero.addEventListener("click", (e) => dialog.showModal());
hero.addEventListener("keydown", (e) => {
if (e.key === "Enter" || e.key === " ") {
e.preventDefault();
dialog.showModal();
}
});
closeButton.addEventListener("click", (e) => dialog.close());
closeButton.addEventListener("keydown", (e) => {
if (e.key === "Enter" || e.key === " ") {
e.preventDefault();
dialog.close();
}
});
}</script>
</head>
<body>
@@ -1411,6 +1516,8 @@ export { HeadingAnchors }</script>
<heading-anchors content="<i class='fa-solid fa-anchor'></i>">
<article>
<h1 id="bag-strap">bag strap</h1>
@@ -1435,7 +1542,11 @@ export { HeadingAnchors }</script>
</div>
<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">
<dialog closedby="any" aria-label="image modal" tabindex="-1">
<button class="close-dialog" autofocus="" aria-label="close the image modal">&times;</button>
<img class="modal-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">
</dialog>
<img tabindex="0" class="hero" 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">
<p>adjustable! also can be made with rainbow fittings.</p>
@@ -1481,43 +1592,43 @@ export { HeadingAnchors }</script>
<ol id="postlist">
<li class="post">
<a class="postlink" href="/nine-pocket-bifold/">
<h2 data-ha-exclude="" id="nine-pocket-bifold">nine pocket bifold </h2>
<a class="postlink" href="/makers-mark-keychain/">
<h2 data-ha-exclude="" id="makers-mark-keychain">maker&#39;s mark keychain </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/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="/aarons-mask/">
<h2 data-ha-exclude="" id="aarons-mask">aaron&#39;s mask </h2>
<a class="postlink" href="/vertical-zipper-card-wallet/">
<h2 data-ha-exclude="" id="vertical-zipper-card-wallet">vertical zipper card wallet </h2>
<ul class="postlist-tags">
<li>leather</li>
</ul>
<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">
<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="/foldy-wallet/">
<h2 data-ha-exclude="" id="foldy-wallet">foldy wallet </h2>
<a class="postlink" href="/eight-pocket-bifold/">
<h2 data-ha-exclude="" id="eight-pocket-bifold">eight pocket bifold </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/eight-pocket-bifold.jpg" alt="A 3-picture collage showing a hand stitched full grain leather bifold wallet in dark plum leather. It has a main bill pocket and a asymmetrical interior with a hidden pocket and 3 card pockets on the right, and a hidden pocket and 2 card pockets on the left. The left front pocket has a small naturally occuring hole." loading="lazy" decoding="async" width="1000" height="1777">
</a>
</li>
@@ -1553,6 +1664,6 @@ export { HeadingAnchors }</script>
</footer>
<!-- This page `/bag-strap/` was built on 2026-05-06T18:04:11.575Z -->
<!-- This page `/bag-strap/` was built on 2026-05-14T03:43:28.023Z -->
</body>
</html>
_site/baseball-journal/index.html
+126 -13
View File
@@ -457,6 +457,90 @@ pre[class*=language-]::selection {
.tag:nth-child(odd) p {
text-align: right;
}
img[tabindex="0"]:focus-visible {
outline: .15rem solid var(--color-teal);
}
dialog {
margin: auto;
flex-flow: column;
background: transparent;
border: none;
position: absolute;
}
dialog[open] {
display: flex;
}
dialog::backdrop {
background-color: rgba(from var(--color-bg) r g b / .8);
backdrop-filter: blur(4px);
}
body:has(dialog[open]) {
overflow: hidden;
}
.close-dialog {
background-color: rgba(from var(--color-teal) r g b / .2);
font-size: 1.5rem;
padding: 0 .5rem .15rem;
border-radius: 1rem;
color: var(--color-teal);
box-shadow: .15rem .15rem var(--color-shadow);
border: .08rem solid var(--color-teal);
align-self: flex-end;
justify-self: flex-start;
margin: 0 .1rem;
/* Click animation handling */
position: relative;
top: 1rem;
left: -.15rem;
transition: top .1s ease-in, left .1s ease-in;
}
.close-dialog:focus-visible {
outline: none;
background-color: var(--color-teal);
color: var(--color-bg);
}
@media (any-hover: hover) {
.close-dialog:hover {
outline: none;
background-color: var(--color-teal);
color: var(--color-bg);
}
}
@media (forced-colors: active) {
.close-dialog:focus-visible {
outline-offset: .08rem;
outline: .08rem solid;
}
@media (any-hover: hover) {
.close-dialog:hover {
outline-offset: .08rem;
outline: .08rem solid;
}
}
}
/* Click animation */
.close-dialog:active {
top: 1.1rem;
left: -.05rem;
box-shadow: .05rem .05rem var(--color-shadow);
}
.modal-img {
max-height: calc(90vh - 2rem);
object-fit: contain;
width: auto;
margin: 0 1rem;
}
:root {
color-scheme: light dark;
@@ -637,7 +721,6 @@ span.ha-placeholder {
opacity: .55;
}
/* Lists */
::marker {
color: var(--color-pink);
@@ -1351,7 +1434,29 @@ class HeadingAnchors extends HTMLElement {
HeadingAnchors.register();
export { HeadingAnchors }</script>
export { HeadingAnchors }
/* don't even bother on mobile */
if (window.innerWidth > 650) {
const dialog = document.querySelector("dialog");
const closeButton = document.querySelector(".close-dialog");
const hero = document.querySelector(".hero");
hero.addEventListener("click", (e) => dialog.showModal());
hero.addEventListener("keydown", (e) => {
if (e.key === "Enter" || e.key === " ") {
e.preventDefault();
dialog.showModal();
}
});
closeButton.addEventListener("click", (e) => dialog.close());
closeButton.addEventListener("keydown", (e) => {
if (e.key === "Enter" || e.key === " ") {
e.preventDefault();
dialog.close();
}
});
}</script>
</head>
<body>
@@ -1411,6 +1516,8 @@ export { HeadingAnchors }</script>
<heading-anchors content="<i class='fa-solid fa-anchor'></i>">
<article>
<h1 id="baseball-journal">baseball journal</h1>
@@ -1435,7 +1542,11 @@ export { HeadingAnchors }</script>
</div>
<img src="/img/baseball-journal.jpg" alt="A 3-part collage of a leather-covered book with baseball-style stitching across the spine." loading="lazy" decoding="async" width="1000" height="1000">
<dialog closedby="any" aria-label="image modal" tabindex="-1">
<button class="close-dialog" autofocus="" aria-label="close the image modal">&times;</button>
<img class="modal-img" src="/img/baseball-journal.jpg" alt="A 3-part collage of a leather-covered book with baseball-style stitching across the spine." loading="lazy" decoding="async" width="1000" height="1000">
</dialog>
<img tabindex="0" class="hero" src="/img/baseball-journal.jpg" alt="A 3-part collage of a leather-covered book with baseball-style stitching across the spine." loading="lazy" decoding="async" width="1000" height="1000">
<p>Baseball stitched book!</p>
@@ -1491,43 +1602,45 @@ export { HeadingAnchors }</script>
<ol id="postlist">
<li class="post">
<a class="postlink" href="/green-memo-pad/">
<h2 data-ha-exclude="" id="green-memo-pad">green memo pad </h2>
<a class="postlink" href="/flocked-notebook/">
<h2 data-ha-exclude="" id="flocked-notebook">flocked notebook </h2>
<ul class="postlist-tags">
<li>book</li>
</ul>
<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">
<img src="/img/flocked-notebook.jpg" alt="A two panel collage showing the cover and endpapers of a thick notebook." loading="lazy" decoding="async" width="1000" height="1331">
</a>
</li>
<li class="post">
<a class="postlink" href="/striped-journal/">
<h2 data-ha-exclude="" id="striped-journal">striped journal </h2>
<a class="postlink" href="/blue-and-brown-leather-journal/">
<h2 data-ha-exclude="" id="blue-and-brown-leather-journal">blue and brown leather 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/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">
</a>
</li>
<li class="post">
<a class="postlink" href="/leather-strap-journal/">
<h2 data-ha-exclude="" id="leather-strap-journal">leather strap journal </h2>
<a class="postlink" href="/brookes-notebook/">
<h2 data-ha-exclude="" id="brookes-notebook">brooke&#39;s notebook </h2>
<ul class="postlist-tags">
<li>book</li>
<li>highlight</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/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>
@@ -1563,6 +1676,6 @@ export { HeadingAnchors }</script>
</footer>
<!-- This page `/baseball-journal/` was built on 2026-05-06T18:04:11.569Z -->
<!-- This page `/baseball-journal/` was built on 2026-05-14T03:43:28.013Z -->
</body>
</html>
_site/become-unbutterable/index.html
+135 -26
View File
@@ -457,6 +457,90 @@ pre[class*=language-]::selection {
.tag:nth-child(odd) p {
text-align: right;
}
img[tabindex="0"]:focus-visible {
outline: .15rem solid var(--color-teal);
}
dialog {
margin: auto;
flex-flow: column;
background: transparent;
border: none;
position: absolute;
}
dialog[open] {
display: flex;
}
dialog::backdrop {
background-color: rgba(from var(--color-bg) r g b / .8);
backdrop-filter: blur(4px);
}
body:has(dialog[open]) {
overflow: hidden;
}
.close-dialog {
background-color: rgba(from var(--color-teal) r g b / .2);
font-size: 1.5rem;
padding: 0 .5rem .15rem;
border-radius: 1rem;
color: var(--color-teal);
box-shadow: .15rem .15rem var(--color-shadow);
border: .08rem solid var(--color-teal);
align-self: flex-end;
justify-self: flex-start;
margin: 0 .1rem;
/* Click animation handling */
position: relative;
top: 1rem;
left: -.15rem;
transition: top .1s ease-in, left .1s ease-in;
}
.close-dialog:focus-visible {
outline: none;
background-color: var(--color-teal);
color: var(--color-bg);
}
@media (any-hover: hover) {
.close-dialog:hover {
outline: none;
background-color: var(--color-teal);
color: var(--color-bg);
}
}
@media (forced-colors: active) {
.close-dialog:focus-visible {
outline-offset: .08rem;
outline: .08rem solid;
}
@media (any-hover: hover) {
.close-dialog:hover {
outline-offset: .08rem;
outline: .08rem solid;
}
}
}
/* Click animation */
.close-dialog:active {
top: 1.1rem;
left: -.05rem;
box-shadow: .05rem .05rem var(--color-shadow);
}
.modal-img {
max-height: calc(90vh - 2rem);
object-fit: contain;
width: auto;
margin: 0 1rem;
}
:root {
color-scheme: light dark;
@@ -637,7 +721,6 @@ span.ha-placeholder {
opacity: .55;
}
/* Lists */
::marker {
color: var(--color-pink);
@@ -1351,7 +1434,29 @@ class HeadingAnchors extends HTMLElement {
HeadingAnchors.register();
export { HeadingAnchors }</script>
export { HeadingAnchors }
/* don't even bother on mobile */
if (window.innerWidth > 650) {
const dialog = document.querySelector("dialog");
const closeButton = document.querySelector(".close-dialog");
const hero = document.querySelector(".hero");
hero.addEventListener("click", (e) => dialog.showModal());
hero.addEventListener("keydown", (e) => {
if (e.key === "Enter" || e.key === " ") {
e.preventDefault();
dialog.showModal();
}
});
closeButton.addEventListener("click", (e) => dialog.close());
closeButton.addEventListener("keydown", (e) => {
if (e.key === "Enter" || e.key === " ") {
e.preventDefault();
dialog.close();
}
});
}</script>
</head>
<body>
@@ -1411,6 +1516,8 @@ export { HeadingAnchors }</script>
<heading-anchors content="<i class='fa-solid fa-anchor'></i>">
<article>
<h1 id="become-unbutterable">become unbutterable</h1>
@@ -1435,7 +1542,11 @@ export { HeadingAnchors }</script>
</div>
<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">
<dialog closedby="any" aria-label="image modal" tabindex="-1">
<button class="close-dialog" autofocus="" aria-label="close the image modal">&times;</button>
<img class="modal-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">
</dialog>
<img tabindex="0" class="hero" 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">
<p>Hand carved stamp based on a photo of Jorts the cat.</p>
@@ -1488,22 +1599,8 @@ export { HeadingAnchors }</script>
<ol id="postlist">
<li class="post">
<a class="postlink" href="/loon/">
<h2 data-ha-exclude="" id="loon">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="/coming-out/">
<h2 data-ha-exclude="" id="coming-out">coming out </h2>
<a class="postlink" href="/nonbinary-flag/">
<h2 data-ha-exclude="" id="nonbinary-flag">nonbinary flag </h2>
<ul class="postlist-tags">
@@ -1514,25 +1611,37 @@ export { HeadingAnchors }</script>
<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">
<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">
</a>
</li>
<li class="post">
<a class="postlink" href="/slightly-weird-man-club/">
<h2 data-ha-exclude="" id="slightly-weird-man-club">slightly weird man club </h2>
<a class="postlink" href="/fix-your-hearts/">
<h2 data-ha-exclude="" id="fix-your-hearts">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">
<li>gender</li>
</a>
</li>
<li class="post">
<a class="postlink" href="/seedling/">
<h2 data-ha-exclude="" id="seedling">seedling </h2>
<ul class="postlist-tags">
<li>print</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/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>
@@ -1568,6 +1677,6 @@ export { HeadingAnchors }</script>
</footer>
<!-- This page `/become-unbutterable/` was built on 2026-05-06T18:04:11.545Z -->
<!-- This page `/become-unbutterable/` was built on 2026-05-14T03:43:27.981Z -->
</body>
</html>
_site/bfl-silk-handspun/index.html
+143 -32
View File
@@ -457,6 +457,90 @@ pre[class*=language-]::selection {
.tag:nth-child(odd) p {
text-align: right;
}
img[tabindex="0"]:focus-visible {
outline: .15rem solid var(--color-teal);
}
dialog {
margin: auto;
flex-flow: column;
background: transparent;
border: none;
position: absolute;
}
dialog[open] {
display: flex;
}
dialog::backdrop {
background-color: rgba(from var(--color-bg) r g b / .8);
backdrop-filter: blur(4px);
}
body:has(dialog[open]) {
overflow: hidden;
}
.close-dialog {
background-color: rgba(from var(--color-teal) r g b / .2);
font-size: 1.5rem;
padding: 0 .5rem .15rem;
border-radius: 1rem;
color: var(--color-teal);
box-shadow: .15rem .15rem var(--color-shadow);
border: .08rem solid var(--color-teal);
align-self: flex-end;
justify-self: flex-start;
margin: 0 .1rem;
/* Click animation handling */
position: relative;
top: 1rem;
left: -.15rem;
transition: top .1s ease-in, left .1s ease-in;
}
.close-dialog:focus-visible {
outline: none;
background-color: var(--color-teal);
color: var(--color-bg);
}
@media (any-hover: hover) {
.close-dialog:hover {
outline: none;
background-color: var(--color-teal);
color: var(--color-bg);
}
}
@media (forced-colors: active) {
.close-dialog:focus-visible {
outline-offset: .08rem;
outline: .08rem solid;
}
@media (any-hover: hover) {
.close-dialog:hover {
outline-offset: .08rem;
outline: .08rem solid;
}
}
}
/* Click animation */
.close-dialog:active {
top: 1.1rem;
left: -.05rem;
box-shadow: .05rem .05rem var(--color-shadow);
}
.modal-img {
max-height: calc(90vh - 2rem);
object-fit: contain;
width: auto;
margin: 0 1rem;
}
:root {
color-scheme: light dark;
@@ -637,7 +721,6 @@ span.ha-placeholder {
opacity: .55;
}
/* Lists */
::marker {
color: var(--color-pink);
@@ -1351,7 +1434,29 @@ class HeadingAnchors extends HTMLElement {
HeadingAnchors.register();
export { HeadingAnchors }</script>
export { HeadingAnchors }
/* don't even bother on mobile */
if (window.innerWidth > 650) {
const dialog = document.querySelector("dialog");
const closeButton = document.querySelector(".close-dialog");
const hero = document.querySelector(".hero");
hero.addEventListener("click", (e) => dialog.showModal());
hero.addEventListener("keydown", (e) => {
if (e.key === "Enter" || e.key === " ") {
e.preventDefault();
dialog.showModal();
}
});
closeButton.addEventListener("click", (e) => dialog.close());
closeButton.addEventListener("keydown", (e) => {
if (e.key === "Enter" || e.key === " ") {
e.preventDefault();
dialog.close();
}
});
}</script>
</head>
<body>
@@ -1411,6 +1516,8 @@ export { HeadingAnchors }</script>
<heading-anchors content="<i class='fa-solid fa-anchor'></i>">
<article>
<h1 id="bfl-silk-handspun">BFL/silk handspun</h1>
@@ -1435,7 +1542,11 @@ export { HeadingAnchors }</script>
</div>
<img src="/img/bfl-silk-handspun.jpg" alt="a spinning wheel bobbin full of undyed white handspun yarn in about a sport or DK weight." loading="lazy" decoding="async" width="1000" height="750">
<dialog closedby="any" aria-label="image modal" tabindex="-1">
<button class="close-dialog" autofocus="" aria-label="close the image modal">&times;</button>
<img class="modal-img" src="/img/bfl-silk-handspun.jpg" alt="a spinning wheel bobbin full of undyed white handspun yarn in about a sport or DK weight." loading="lazy" decoding="async" width="1000" height="750">
</dialog>
<img tabindex="0" class="hero" src="/img/bfl-silk-handspun.jpg" alt="a spinning wheel bobbin full of undyed white handspun yarn in about a sport or DK weight." loading="lazy" decoding="async" width="1000" height="750">
<p>Fiber from <a href="https://woolgatherings.com" target="_blank" rel="external">Woolgatherings</a>. 70% Blue-Faced Leicester 30% tussah silk.</p>
@@ -1480,34 +1591,6 @@ export { HeadingAnchors }</script>
<h2 data-ha-exclude="" id="related-posts">related posts</h2>
<ol id="postlist">
<li class="post">
<a class="postlink" href="/handspun-yarn-in-party-mix-and-orange-gold/">
<h2 data-ha-exclude="" id="handspun-yarn-in-party-mix-and-orange-gold">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>
<li class="post">
<a class="postlink" href="/ruby-the-alpaca-handspun/">
<h2 data-ha-exclude="" id="ruby-the-alpaca-handspun">ruby the alpaca handspun </h2>
<ul class="postlist-tags">
<li>yarn</li>
</ul>
<img src="/img/ruby-alpaca-handspun.jpg" alt="one large skein and two smaller skeins of a rich chocolatey brown alpaca handspun, in about a DK weight" loading="lazy" decoding="async" width="1000" height="666">
</a>
</li>
<li class="post">
<a class="postlink" href="/hand-dyed-gold-handspun/">
<h2 data-ha-exclude="" id="hand-dyed-gold-handspun">hand-dyed gold handspun </h2>
@@ -1522,6 +1605,34 @@ export { HeadingAnchors }</script>
</a>
</li>
<li class="post">
<a class="postlink" href="/petrichor-handspun/">
<h2 data-ha-exclude="" id="petrichor-handspun">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="/orion-handspun/">
<h2 data-ha-exclude="" id="orion-handspun">orion handspun </h2>
<ul class="postlist-tags">
<li>yarn</li>
</ul>
<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>
</ol>
</section>
@@ -1553,6 +1664,6 @@ export { HeadingAnchors }</script>
</footer>
<!-- This page `/bfl-silk-handspun/` was built on 2026-05-06T18:04:11.560Z -->
<!-- This page `/bfl-silk-handspun/` was built on 2026-05-14T03:43:28.003Z -->
</body>
</html>
_site/big-pidge/index.html
+152 -43
View File
@@ -457,6 +457,90 @@ pre[class*=language-]::selection {
.tag:nth-child(odd) p {
text-align: right;
}
img[tabindex="0"]:focus-visible {
outline: .15rem solid var(--color-teal);
}
dialog {
margin: auto;
flex-flow: column;
background: transparent;
border: none;
position: absolute;
}
dialog[open] {
display: flex;
}
dialog::backdrop {
background-color: rgba(from var(--color-bg) r g b / .8);
backdrop-filter: blur(4px);
}
body:has(dialog[open]) {
overflow: hidden;
}
.close-dialog {
background-color: rgba(from var(--color-teal) r g b / .2);
font-size: 1.5rem;
padding: 0 .5rem .15rem;
border-radius: 1rem;
color: var(--color-teal);
box-shadow: .15rem .15rem var(--color-shadow);
border: .08rem solid var(--color-teal);
align-self: flex-end;
justify-self: flex-start;
margin: 0 .1rem;
/* Click animation handling */
position: relative;
top: 1rem;
left: -.15rem;
transition: top .1s ease-in, left .1s ease-in;
}
.close-dialog:focus-visible {
outline: none;
background-color: var(--color-teal);
color: var(--color-bg);
}
@media (any-hover: hover) {
.close-dialog:hover {
outline: none;
background-color: var(--color-teal);
color: var(--color-bg);
}
}
@media (forced-colors: active) {
.close-dialog:focus-visible {
outline-offset: .08rem;
outline: .08rem solid;
}
@media (any-hover: hover) {
.close-dialog:hover {
outline-offset: .08rem;
outline: .08rem solid;
}
}
}
/* Click animation */
.close-dialog:active {
top: 1.1rem;
left: -.05rem;
box-shadow: .05rem .05rem var(--color-shadow);
}
.modal-img {
max-height: calc(90vh - 2rem);
object-fit: contain;
width: auto;
margin: 0 1rem;
}
:root {
color-scheme: light dark;
@@ -637,7 +721,6 @@ span.ha-placeholder {
opacity: .55;
}
/* Lists */
::marker {
color: var(--color-pink);
@@ -1351,7 +1434,29 @@ class HeadingAnchors extends HTMLElement {
HeadingAnchors.register();
export { HeadingAnchors }</script>
export { HeadingAnchors }
/* don't even bother on mobile */
if (window.innerWidth > 650) {
const dialog = document.querySelector("dialog");
const closeButton = document.querySelector(".close-dialog");
const hero = document.querySelector(".hero");
hero.addEventListener("click", (e) => dialog.showModal());
hero.addEventListener("keydown", (e) => {
if (e.key === "Enter" || e.key === " ") {
e.preventDefault();
dialog.showModal();
}
});
closeButton.addEventListener("click", (e) => dialog.close());
closeButton.addEventListener("keydown", (e) => {
if (e.key === "Enter" || e.key === " ") {
e.preventDefault();
dialog.close();
}
});
}</script>
</head>
<body>
@@ -1411,6 +1516,8 @@ export { HeadingAnchors }</script>
<heading-anchors content="<i class='fa-solid fa-anchor'></i>">
<article>
<h1 id="big-pidge">big pidge</h1>
@@ -1445,7 +1552,11 @@ export { HeadingAnchors }</script>
</div>
<img src="/img/big-pidge-print.jpg" alt="A block print of a superb speciman of pigeon, inked mostly in black but with patches of green, blue, and purple to indicate iridescence." loading="lazy" decoding="async" width="1000" height="750">
<dialog closedby="any" aria-label="image modal" tabindex="-1">
<button class="close-dialog" autofocus="" aria-label="close the image modal">&times;</button>
<img class="modal-img" src="/img/big-pidge-print.jpg" alt="A block print of a superb speciman of pigeon, inked mostly in black but with patches of green, blue, and purple to indicate iridescence." loading="lazy" decoding="async" width="1000" height="750">
</dialog>
<img tabindex="0" class="hero" src="/img/big-pidge-print.jpg" alt="A block print of a superb speciman of pigeon, inked mostly in black but with patches of green, blue, and purple to indicate iridescence." loading="lazy" decoding="async" width="1000" height="750">
<p>A large, <em>large</em> pigeon. Based on a fantastic photograph by <a href="https://studiochris.us/" target="_blank" rel="external">Chris Price</a>.</p>
@@ -1498,44 +1609,8 @@ export { HeadingAnchors }</script>
<ol id="postlist">
<li class="post">
<a class="postlink" href="/five-of-them/">
<h2 data-ha-exclude="" id="five-of-them">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="/shrimp/">
<h2 data-ha-exclude="" id="shrimp">shrimp </h2>
<ul class="postlist-tags">
<li>print</li>
<li>card</li>
<li>sticker</li>
<li>pin</li>
</ul>
<img src="/img/shrimp-print.jpg" alt="A print of a small shrimp with slender little leggies in orange ink." loading="lazy" decoding="async" width="1000" height="750">
</a>
</li>
<li class="post">
<a class="postlink" href="/heron/">
<h2 data-ha-exclude="" id="heron">heron </h2>
<a class="postlink" href="/geese/">
<h2 data-ha-exclude="" id="geese">geese </h2>
<ul class="postlist-tags">
@@ -1546,7 +1621,41 @@ export { HeadingAnchors }</script>
<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/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>
<li class="post">
<a class="postlink" href="/rope-one/">
<h2 data-ha-exclude="" id="rope-one-mature">rope (one) (mature)</h2>
<ul class="postlist-tags">
<li>print</li>
<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">
</a>
</li>
<li class="post">
<a class="postlink" href="/happy-bihrtday/">
<h2 data-ha-exclude="" id="happy-bihrtday">happy biHRTday </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">
</a>
</li>
@@ -1582,6 +1691,6 @@ export { HeadingAnchors }</script>
</footer>
<!-- This page `/big-pidge/` was built on 2026-05-06T18:04:11.568Z -->
<!-- This page `/big-pidge/` was built on 2026-05-14T03:43:28.011Z -->
</body>
</html>
_site/block-printing-transfer-method/index.html
+124 -15
View File
@@ -457,6 +457,90 @@ pre[class*=language-]::selection {
.tag:nth-child(odd) p {
text-align: right;
}
img[tabindex="0"]:focus-visible {
outline: .15rem solid var(--color-teal);
}
dialog {
margin: auto;
flex-flow: column;
background: transparent;
border: none;
position: absolute;
}
dialog[open] {
display: flex;
}
dialog::backdrop {
background-color: rgba(from var(--color-bg) r g b / .8);
backdrop-filter: blur(4px);
}
body:has(dialog[open]) {
overflow: hidden;
}
.close-dialog {
background-color: rgba(from var(--color-teal) r g b / .2);
font-size: 1.5rem;
padding: 0 .5rem .15rem;
border-radius: 1rem;
color: var(--color-teal);
box-shadow: .15rem .15rem var(--color-shadow);
border: .08rem solid var(--color-teal);
align-self: flex-end;
justify-self: flex-start;
margin: 0 .1rem;
/* Click animation handling */
position: relative;
top: 1rem;
left: -.15rem;
transition: top .1s ease-in, left .1s ease-in;
}
.close-dialog:focus-visible {
outline: none;
background-color: var(--color-teal);
color: var(--color-bg);
}
@media (any-hover: hover) {
.close-dialog:hover {
outline: none;
background-color: var(--color-teal);
color: var(--color-bg);
}
}
@media (forced-colors: active) {
.close-dialog:focus-visible {
outline-offset: .08rem;
outline: .08rem solid;
}
@media (any-hover: hover) {
.close-dialog:hover {
outline-offset: .08rem;
outline: .08rem solid;
}
}
}
/* Click animation */
.close-dialog:active {
top: 1.1rem;
left: -.05rem;
box-shadow: .05rem .05rem var(--color-shadow);
}
.modal-img {
max-height: calc(90vh - 2rem);
object-fit: contain;
width: auto;
margin: 0 1rem;
}
:root {
color-scheme: light dark;
@@ -637,7 +721,6 @@ span.ha-placeholder {
opacity: .55;
}
/* Lists */
::marker {
color: var(--color-pink);
@@ -1351,7 +1434,29 @@ class HeadingAnchors extends HTMLElement {
HeadingAnchors.register();
export { HeadingAnchors }</script>
export { HeadingAnchors }
/* don't even bother on mobile */
if (window.innerWidth > 650) {
const dialog = document.querySelector("dialog");
const closeButton = document.querySelector(".close-dialog");
const hero = document.querySelector(".hero");
hero.addEventListener("click", (e) => dialog.showModal());
hero.addEventListener("keydown", (e) => {
if (e.key === "Enter" || e.key === " ") {
e.preventDefault();
dialog.showModal();
}
});
closeButton.addEventListener("click", (e) => dialog.close());
closeButton.addEventListener("keydown", (e) => {
if (e.key === "Enter" || e.key === " ") {
e.preventDefault();
dialog.close();
}
});
}</script>
</head>
<body>
@@ -1411,6 +1516,8 @@ export { HeadingAnchors }</script>
<heading-anchors content="<i class='fa-solid fa-anchor'></i>">
<article>
<h1 id="block-printing-transfer-method">block printing transfer method</h1>
@@ -1435,7 +1542,11 @@ export { HeadingAnchors }</script>
</div>
<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">
<dialog closedby="any" aria-label="image modal" tabindex="-1">
<button class="close-dialog" autofocus="" aria-label="close the image modal">&times;</button>
<img class="modal-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">
</dialog>
<img tabindex="0" class="hero" 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">
<h2 id="materials">materials</h2>
@@ -1521,37 +1632,35 @@ export { HeadingAnchors }</script>
<ol id="postlist">
<li class="post">
<a class="postlink" href="/greeting-loons/">
<h2 data-ha-exclude="" id="greeting-loons">greeting loons </h2>
<a class="postlink" href="/printmaking-paper-notes/">
<h2 data-ha-exclude="" id="printmaking-paper-notes">printmaking paper notes </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/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>
<li class="post">
<a class="postlink" href="/fat-raccoon/">
<h2 data-ha-exclude="" id="fat-raccoon">fat raccoon </h2>
<a class="postlink" href="/anarchy-autism/">
<h2 data-ha-exclude="" id="anarchy-autism">anarchy autism </h2>
<ul class="postlist-tags">
<li>print</li>
<li>card</li>
<li>sticker</li>
<li>shirt</li>
<li>pin</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/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">
</a>
</li>
@@ -1601,6 +1710,6 @@ export { HeadingAnchors }</script>
</footer>
<!-- This page `/block-printing-transfer-method/` was built on 2026-05-06T18:04:11.568Z -->
<!-- This page `/block-printing-transfer-method/` was built on 2026-05-14T03:43:28.009Z -->
</body>
</html>
_site/blue-and-brown-leather-journal/index.html
+132 -23
View File
@@ -457,6 +457,90 @@ pre[class*=language-]::selection {
.tag:nth-child(odd) p {
text-align: right;
}
img[tabindex="0"]:focus-visible {
outline: .15rem solid var(--color-teal);
}
dialog {
margin: auto;
flex-flow: column;
background: transparent;
border: none;
position: absolute;
}
dialog[open] {
display: flex;
}
dialog::backdrop {
background-color: rgba(from var(--color-bg) r g b / .8);
backdrop-filter: blur(4px);
}
body:has(dialog[open]) {
overflow: hidden;
}
.close-dialog {
background-color: rgba(from var(--color-teal) r g b / .2);
font-size: 1.5rem;
padding: 0 .5rem .15rem;
border-radius: 1rem;
color: var(--color-teal);
box-shadow: .15rem .15rem var(--color-shadow);
border: .08rem solid var(--color-teal);
align-self: flex-end;
justify-self: flex-start;
margin: 0 .1rem;
/* Click animation handling */
position: relative;
top: 1rem;
left: -.15rem;
transition: top .1s ease-in, left .1s ease-in;
}
.close-dialog:focus-visible {
outline: none;
background-color: var(--color-teal);
color: var(--color-bg);
}
@media (any-hover: hover) {
.close-dialog:hover {
outline: none;
background-color: var(--color-teal);
color: var(--color-bg);
}
}
@media (forced-colors: active) {
.close-dialog:focus-visible {
outline-offset: .08rem;
outline: .08rem solid;
}
@media (any-hover: hover) {
.close-dialog:hover {
outline-offset: .08rem;
outline: .08rem solid;
}
}
}
/* Click animation */
.close-dialog:active {
top: 1.1rem;
left: -.05rem;
box-shadow: .05rem .05rem var(--color-shadow);
}
.modal-img {
max-height: calc(90vh - 2rem);
object-fit: contain;
width: auto;
margin: 0 1rem;
}
:root {
color-scheme: light dark;
@@ -637,7 +721,6 @@ span.ha-placeholder {
opacity: .55;
}
/* Lists */
::marker {
color: var(--color-pink);
@@ -1351,7 +1434,29 @@ class HeadingAnchors extends HTMLElement {
HeadingAnchors.register();
export { HeadingAnchors }</script>
export { HeadingAnchors }
/* don't even bother on mobile */
if (window.innerWidth > 650) {
const dialog = document.querySelector("dialog");
const closeButton = document.querySelector(".close-dialog");
const hero = document.querySelector(".hero");
hero.addEventListener("click", (e) => dialog.showModal());
hero.addEventListener("keydown", (e) => {
if (e.key === "Enter" || e.key === " ") {
e.preventDefault();
dialog.showModal();
}
});
closeButton.addEventListener("click", (e) => dialog.close());
closeButton.addEventListener("keydown", (e) => {
if (e.key === "Enter" || e.key === " ") {
e.preventDefault();
dialog.close();
}
});
}</script>
</head>
<body>
@@ -1411,6 +1516,8 @@ export { HeadingAnchors }</script>
<heading-anchors content="<i class='fa-solid fa-anchor'></i>">
<article>
<h1 id="blue-and-brown-leather-journal">blue and brown leather journal</h1>
@@ -1435,7 +1542,11 @@ export { HeadingAnchors }</script>
</div>
<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">
<dialog closedby="any" aria-label="image modal" tabindex="-1">
<button class="close-dialog" autofocus="" aria-label="close the image modal">&times;</button>
<img class="modal-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">
</dialog>
<img tabindex="0" class="hero" 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">
<p>A two-tone blue and brown leather journal closed by a button. The inside front cover has a small pocket.</p>
@@ -1496,6 +1607,20 @@ export { HeadingAnchors }</script>
<h2 data-ha-exclude="" id="related-posts">related posts</h2>
<ol id="postlist">
<li class="post">
<a class="postlink" href="/square-watercolor-pad/">
<h2 data-ha-exclude="" id="square-watercolor-pad">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="/leather-strap-journal/">
<h2 data-ha-exclude="" id="leather-strap-journal">leather strap journal </h2>
@@ -1511,31 +1636,15 @@ export { HeadingAnchors }</script>
</li>
<li class="post">
<a class="postlink" href="/orange-green-journal/">
<h2 data-ha-exclude="" id="orange-green-journal">orange green journal </h2>
<a class="postlink" href="/stampede-journal/">
<h2 data-ha-exclude="" id="stampede-journal">stampede 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>
<li class="post">
<a class="postlink" href="/brookes-notebook/">
<h2 data-ha-exclude="" id="brookes-notebook">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/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>
@@ -1571,6 +1680,6 @@ export { HeadingAnchors }</script>
</footer>
<!-- This page `/blue-and-brown-leather-journal/` was built on 2026-05-06T18:04:11.546Z -->
<!-- This page `/blue-and-brown-leather-journal/` was built on 2026-05-14T03:43:27.982Z -->
</body>
</html>
_site/booby-congrats-on-the-top-surgery/index.html
+140 -25
View File
@@ -457,6 +457,90 @@ pre[class*=language-]::selection {
.tag:nth-child(odd) p {
text-align: right;
}
img[tabindex="0"]:focus-visible {
outline: .15rem solid var(--color-teal);
}
dialog {
margin: auto;
flex-flow: column;
background: transparent;
border: none;
position: absolute;
}
dialog[open] {
display: flex;
}
dialog::backdrop {
background-color: rgba(from var(--color-bg) r g b / .8);
backdrop-filter: blur(4px);
}
body:has(dialog[open]) {
overflow: hidden;
}
.close-dialog {
background-color: rgba(from var(--color-teal) r g b / .2);
font-size: 1.5rem;
padding: 0 .5rem .15rem;
border-radius: 1rem;
color: var(--color-teal);
box-shadow: .15rem .15rem var(--color-shadow);
border: .08rem solid var(--color-teal);
align-self: flex-end;
justify-self: flex-start;
margin: 0 .1rem;
/* Click animation handling */
position: relative;
top: 1rem;
left: -.15rem;
transition: top .1s ease-in, left .1s ease-in;
}
.close-dialog:focus-visible {
outline: none;
background-color: var(--color-teal);
color: var(--color-bg);
}
@media (any-hover: hover) {
.close-dialog:hover {
outline: none;
background-color: var(--color-teal);
color: var(--color-bg);
}
}
@media (forced-colors: active) {
.close-dialog:focus-visible {
outline-offset: .08rem;
outline: .08rem solid;
}
@media (any-hover: hover) {
.close-dialog:hover {
outline-offset: .08rem;
outline: .08rem solid;
}
}
}
/* Click animation */
.close-dialog:active {
top: 1.1rem;
left: -.05rem;
box-shadow: .05rem .05rem var(--color-shadow);
}
.modal-img {
max-height: calc(90vh - 2rem);
object-fit: contain;
width: auto;
margin: 0 1rem;
}
:root {
color-scheme: light dark;
@@ -637,7 +721,6 @@ span.ha-placeholder {
opacity: .55;
}
/* Lists */
::marker {
color: var(--color-pink);
@@ -1351,7 +1434,29 @@ class HeadingAnchors extends HTMLElement {
HeadingAnchors.register();
export { HeadingAnchors }</script>
export { HeadingAnchors }
/* don't even bother on mobile */
if (window.innerWidth > 650) {
const dialog = document.querySelector("dialog");
const closeButton = document.querySelector(".close-dialog");
const hero = document.querySelector(".hero");
hero.addEventListener("click", (e) => dialog.showModal());
hero.addEventListener("keydown", (e) => {
if (e.key === "Enter" || e.key === " ") {
e.preventDefault();
dialog.showModal();
}
});
closeButton.addEventListener("click", (e) => dialog.close());
closeButton.addEventListener("keydown", (e) => {
if (e.key === "Enter" || e.key === " ") {
e.preventDefault();
dialog.close();
}
});
}</script>
</head>
<body>
@@ -1411,6 +1516,8 @@ export { HeadingAnchors }</script>
<heading-anchors content="<i class='fa-solid fa-anchor'></i>">
<article>
<h1 id="booby-congrats-on-the-top-surgery">booby (congrats on the top surgery)</h1>
@@ -1445,7 +1552,11 @@ export { HeadingAnchors }</script>
</div>
<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">
<dialog closedby="any" aria-label="image modal" tabindex="-1">
<button class="close-dialog" autofocus="" aria-label="close the image modal">&times;</button>
<img class="modal-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">
</dialog>
<img tabindex="0" class="hero" 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">
<p>cheeky lil congrats on the top surgery card :D</p>
@@ -1491,47 +1602,51 @@ export { HeadingAnchors }</script>
<ol id="postlist">
<li class="post">
<a class="postlink" href="/in-the-news/">
<h2 data-ha-exclude="" id="in-the-news">in the news </h2>
<a class="postlink" href="/queer-book-list/">
<h2 data-ha-exclude="" id="queer-book-list">queer book list </h2>
<ul class="postlist-tags">
<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/rainbow-books.jpg" alt="A bookshelf with a variety of books on LGBTQ+ themes, arranged roughly in rainbow order" loading="lazy" decoding="async" width="1000" height="562">
</a>
</li>
<li class="post">
<a class="postlink" href="/swallowtail-on-snowdrops/">
<h2 data-ha-exclude="" id="swallowtail-on-snowdrops">swallowtail on snowdrops </h2>
<a class="postlink" href="/gender-in-data-models/">
<h2 data-ha-exclude="" id="gender-in-data-models">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="/trans-the-world/">
<h2 data-ha-exclude="" id="trans-the-world">trans the world </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>
<li class="post">
<a class="postlink" href="/brown-creeper/">
<h2 data-ha-exclude="" id="brown-creeper">brown creeper </h2>
<ul class="postlist-tags">
<li>print</li>
<li>gender</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">
<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">
</a>
</li>
@@ -1567,6 +1682,6 @@ export { HeadingAnchors }</script>
</footer>
<!-- This page `/booby-congrats-on-the-top-surgery/` was built on 2026-05-06T18:04:11.557Z -->
<!-- This page `/booby-congrats-on-the-top-surgery/` was built on 2026-05-14T03:43:27.989Z -->
</body>
</html>
_site/bottom-growth/index.html
+143 -26
View File
@@ -457,6 +457,90 @@ pre[class*=language-]::selection {
.tag:nth-child(odd) p {
text-align: right;
}
img[tabindex="0"]:focus-visible {
outline: .15rem solid var(--color-teal);
}
dialog {
margin: auto;
flex-flow: column;
background: transparent;
border: none;
position: absolute;
}
dialog[open] {
display: flex;
}
dialog::backdrop {
background-color: rgba(from var(--color-bg) r g b / .8);
backdrop-filter: blur(4px);
}
body:has(dialog[open]) {
overflow: hidden;
}
.close-dialog {
background-color: rgba(from var(--color-teal) r g b / .2);
font-size: 1.5rem;
padding: 0 .5rem .15rem;
border-radius: 1rem;
color: var(--color-teal);
box-shadow: .15rem .15rem var(--color-shadow);
border: .08rem solid var(--color-teal);
align-self: flex-end;
justify-self: flex-start;
margin: 0 .1rem;
/* Click animation handling */
position: relative;
top: 1rem;
left: -.15rem;
transition: top .1s ease-in, left .1s ease-in;
}
.close-dialog:focus-visible {
outline: none;
background-color: var(--color-teal);
color: var(--color-bg);
}
@media (any-hover: hover) {
.close-dialog:hover {
outline: none;
background-color: var(--color-teal);
color: var(--color-bg);
}
}
@media (forced-colors: active) {
.close-dialog:focus-visible {
outline-offset: .08rem;
outline: .08rem solid;
}
@media (any-hover: hover) {
.close-dialog:hover {
outline-offset: .08rem;
outline: .08rem solid;
}
}
}
/* Click animation */
.close-dialog:active {
top: 1.1rem;
left: -.05rem;
box-shadow: .05rem .05rem var(--color-shadow);
}
.modal-img {
max-height: calc(90vh - 2rem);
object-fit: contain;
width: auto;
margin: 0 1rem;
}
:root {
color-scheme: light dark;
@@ -637,7 +721,6 @@ span.ha-placeholder {
opacity: .55;
}
/* Lists */
::marker {
color: var(--color-pink);
@@ -1351,7 +1434,29 @@ class HeadingAnchors extends HTMLElement {
HeadingAnchors.register();
export { HeadingAnchors }</script>
export { HeadingAnchors }
/* don't even bother on mobile */
if (window.innerWidth > 650) {
const dialog = document.querySelector("dialog");
const closeButton = document.querySelector(".close-dialog");
const hero = document.querySelector(".hero");
hero.addEventListener("click", (e) => dialog.showModal());
hero.addEventListener("keydown", (e) => {
if (e.key === "Enter" || e.key === " ") {
e.preventDefault();
dialog.showModal();
}
});
closeButton.addEventListener("click", (e) => dialog.close());
closeButton.addEventListener("keydown", (e) => {
if (e.key === "Enter" || e.key === " ") {
e.preventDefault();
dialog.close();
}
});
}</script>
</head>
<body>
@@ -1411,6 +1516,8 @@ export { HeadingAnchors }</script>
<heading-anchors content="<i class='fa-solid fa-anchor'></i>">
<article>
<h1 id="bottom-growth">bottom growth</h1>
@@ -1440,7 +1547,11 @@ export { HeadingAnchors }</script>
</div>
<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." loading="lazy" decoding="async" width="1000" height="1000">
<dialog closedby="any" aria-label="image modal" tabindex="-1">
<button class="close-dialog" autofocus="" aria-label="close the image modal">&times;</button>
<img class="modal-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." loading="lazy" decoding="async" width="1000" height="1000">
</dialog>
<img tabindex="0" class="hero" 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." loading="lazy" decoding="async" width="1000" height="1000">
<p>Celebration of testosterone-driven bottom growth. Submitted for T! the Zine.</p>
@@ -1486,22 +1597,8 @@ export { HeadingAnchors }</script>
<ol id="postlist">
<li class="post">
<a class="postlink" href="/block-printing-transfer-method/">
<h2 data-ha-exclude="" id="block-printing-transfer-method">block printing transfer method </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">
</a>
</li>
<li class="post">
<a class="postlink" href="/booby-congrats-on-the-top-surgery/">
<h2 data-ha-exclude="" id="booby-congrats-on-the-top-surgery">booby (congrats on the top surgery) </h2>
<a class="postlink" href="/geese/">
<h2 data-ha-exclude="" id="geese">geese </h2>
<ul class="postlist-tags">
@@ -1509,26 +1606,46 @@ export { HeadingAnchors }</script>
<li>card</li>
<li>shirt</li>
</ul>
<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>
<li class="post">
<a class="postlink" href="/girldick/">
<h2 data-ha-exclude="" id="girldick-mature">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/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">
<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>
<li class="post">
<a class="postlink" href="/artisans-cooperative-cards/">
<h2 data-ha-exclude="" id="artisans-cooperative-cards">artisans cooperative cards </h2>
<a class="postlink" href="/become-unbutterable/">
<h2 data-ha-exclude="" id="become-unbutterable">become unbutterable </h2>
<ul class="postlist-tags">
<li>print</li>
<li>card</li>
</ul>
<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">
<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>
@@ -1564,6 +1681,6 @@ export { HeadingAnchors }</script>
</footer>
<!-- This page `/bottom-growth/` was built on 2026-05-06T18:04:11.555Z -->
<!-- This page `/bottom-growth/` was built on 2026-05-14T03:43:27.986Z -->
</body>
</html>
_site/bowtie/index.html
+124 -13
View File
@@ -457,6 +457,90 @@ pre[class*=language-]::selection {
.tag:nth-child(odd) p {
text-align: right;
}
img[tabindex="0"]:focus-visible {
outline: .15rem solid var(--color-teal);
}
dialog {
margin: auto;
flex-flow: column;
background: transparent;
border: none;
position: absolute;
}
dialog[open] {
display: flex;
}
dialog::backdrop {
background-color: rgba(from var(--color-bg) r g b / .8);
backdrop-filter: blur(4px);
}
body:has(dialog[open]) {
overflow: hidden;
}
.close-dialog {
background-color: rgba(from var(--color-teal) r g b / .2);
font-size: 1.5rem;
padding: 0 .5rem .15rem;
border-radius: 1rem;
color: var(--color-teal);
box-shadow: .15rem .15rem var(--color-shadow);
border: .08rem solid var(--color-teal);
align-self: flex-end;
justify-self: flex-start;
margin: 0 .1rem;
/* Click animation handling */
position: relative;
top: 1rem;
left: -.15rem;
transition: top .1s ease-in, left .1s ease-in;
}
.close-dialog:focus-visible {
outline: none;
background-color: var(--color-teal);
color: var(--color-bg);
}
@media (any-hover: hover) {
.close-dialog:hover {
outline: none;
background-color: var(--color-teal);
color: var(--color-bg);
}
}
@media (forced-colors: active) {
.close-dialog:focus-visible {
outline-offset: .08rem;
outline: .08rem solid;
}
@media (any-hover: hover) {
.close-dialog:hover {
outline-offset: .08rem;
outline: .08rem solid;
}
}
}
/* Click animation */
.close-dialog:active {
top: 1.1rem;
left: -.05rem;
box-shadow: .05rem .05rem var(--color-shadow);
}
.modal-img {
max-height: calc(90vh - 2rem);
object-fit: contain;
width: auto;
margin: 0 1rem;
}
:root {
color-scheme: light dark;
@@ -637,7 +721,6 @@ span.ha-placeholder {
opacity: .55;
}
/* Lists */
::marker {
color: var(--color-pink);
@@ -1351,7 +1434,29 @@ class HeadingAnchors extends HTMLElement {
HeadingAnchors.register();
export { HeadingAnchors }</script>
export { HeadingAnchors }
/* don't even bother on mobile */
if (window.innerWidth > 650) {
const dialog = document.querySelector("dialog");
const closeButton = document.querySelector(".close-dialog");
const hero = document.querySelector(".hero");
hero.addEventListener("click", (e) => dialog.showModal());
hero.addEventListener("keydown", (e) => {
if (e.key === "Enter" || e.key === " ") {
e.preventDefault();
dialog.showModal();
}
});
closeButton.addEventListener("click", (e) => dialog.close());
closeButton.addEventListener("keydown", (e) => {
if (e.key === "Enter" || e.key === " ") {
e.preventDefault();
dialog.close();
}
});
}</script>
</head>
<body>
@@ -1411,6 +1516,8 @@ export { HeadingAnchors }</script>
<heading-anchors content="<i class='fa-solid fa-anchor'></i>">
<article>
<h1 id="bowtie">bowtie</h1>
@@ -1435,7 +1542,11 @@ export { HeadingAnchors }</script>
</div>
<img src="/img/bowtie.jpg" alt="A black leather bow tie with black stitching." loading="lazy" decoding="async" width="1000" height="750">
<dialog closedby="any" aria-label="image modal" tabindex="-1">
<button class="close-dialog" autofocus="" aria-label="close the image modal">&times;</button>
<img class="modal-img" src="/img/bowtie.jpg" alt="A black leather bow tie with black stitching." loading="lazy" decoding="async" width="1000" height="750">
</dialog>
<img tabindex="0" class="hero" src="/img/bowtie.jpg" alt="A black leather bow tie with black stitching." loading="lazy" decoding="async" width="1000" height="750">
<p>Handstitched leather bowtie with standard clasp.</p>
@@ -1481,43 +1592,43 @@ export { HeadingAnchors }</script>
<ol id="postlist">
<li class="post">
<a class="postlink" href="/eight-pocket-bifold/">
<h2 data-ha-exclude="" id="eight-pocket-bifold">eight pocket bifold </h2>
<a class="postlink" href="/leather-chest-harness/">
<h2 data-ha-exclude="" id="leather-chest-harness">leather chest harness </h2>
<ul class="postlist-tags">
<li>leather</li>
</ul>
<img src="/img/eight-pocket-bifold.jpg" alt="A 3-picture collage showing a hand stitched full grain leather bifold wallet in dark plum leather. It has a main bill pocket and a asymmetrical interior with a hidden pocket and 3 card pockets on the right, and a hidden pocket and 2 card pockets on the left. The left front pocket has a small naturally occuring hole." loading="lazy" decoding="async" width="1000" height="1777">
<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="/shrimp-cat-toy/">
<h2 data-ha-exclude="" id="shrimp-cat-toy">shrimp cat toy </h2>
<a class="postlink" href="/brookes-cuff-bracelets/">
<h2 data-ha-exclude="" id="brookes-cuff-bracelets">brooke&#39;s cuff bracelets </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/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="/lobstah/">
<h2 data-ha-exclude="" id="lobstah">lobstah </h2>
<a class="postlink" href="/moss-harness/">
<h2 data-ha-exclude="" id="moss-harness">moss harness </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/moss-harness.jpg" alt="A nylon webbing harness in bright teal laid out on a desk." loading="lazy" decoding="async" width="1000" height="750">
</a>
</li>
@@ -1553,6 +1664,6 @@ export { HeadingAnchors }</script>
</footer>
<!-- This page `/bowtie/` was built on 2026-05-06T18:04:11.555Z -->
<!-- This page `/bowtie/` was built on 2026-05-14T03:43:27.987Z -->
</body>
</html>
_site/boypussy/index.html
+132 -13
View File
@@ -457,6 +457,90 @@ pre[class*=language-]::selection {
.tag:nth-child(odd) p {
text-align: right;
}
img[tabindex="0"]:focus-visible {
outline: .15rem solid var(--color-teal);
}
dialog {
margin: auto;
flex-flow: column;
background: transparent;
border: none;
position: absolute;
}
dialog[open] {
display: flex;
}
dialog::backdrop {
background-color: rgba(from var(--color-bg) r g b / .8);
backdrop-filter: blur(4px);
}
body:has(dialog[open]) {
overflow: hidden;
}
.close-dialog {
background-color: rgba(from var(--color-teal) r g b / .2);
font-size: 1.5rem;
padding: 0 .5rem .15rem;
border-radius: 1rem;
color: var(--color-teal);
box-shadow: .15rem .15rem var(--color-shadow);
border: .08rem solid var(--color-teal);
align-self: flex-end;
justify-self: flex-start;
margin: 0 .1rem;
/* Click animation handling */
position: relative;
top: 1rem;
left: -.15rem;
transition: top .1s ease-in, left .1s ease-in;
}
.close-dialog:focus-visible {
outline: none;
background-color: var(--color-teal);
color: var(--color-bg);
}
@media (any-hover: hover) {
.close-dialog:hover {
outline: none;
background-color: var(--color-teal);
color: var(--color-bg);
}
}
@media (forced-colors: active) {
.close-dialog:focus-visible {
outline-offset: .08rem;
outline: .08rem solid;
}
@media (any-hover: hover) {
.close-dialog:hover {
outline-offset: .08rem;
outline: .08rem solid;
}
}
}
/* Click animation */
.close-dialog:active {
top: 1.1rem;
left: -.05rem;
box-shadow: .05rem .05rem var(--color-shadow);
}
.modal-img {
max-height: calc(90vh - 2rem);
object-fit: contain;
width: auto;
margin: 0 1rem;
}
:root {
color-scheme: light dark;
@@ -637,7 +721,6 @@ span.ha-placeholder {
opacity: .55;
}
/* Lists */
::marker {
color: var(--color-pink);
@@ -1351,7 +1434,29 @@ class HeadingAnchors extends HTMLElement {
HeadingAnchors.register();
export { HeadingAnchors }</script>
export { HeadingAnchors }
/* don't even bother on mobile */
if (window.innerWidth > 650) {
const dialog = document.querySelector("dialog");
const closeButton = document.querySelector(".close-dialog");
const hero = document.querySelector(".hero");
hero.addEventListener("click", (e) => dialog.showModal());
hero.addEventListener("keydown", (e) => {
if (e.key === "Enter" || e.key === " ") {
e.preventDefault();
dialog.showModal();
}
});
closeButton.addEventListener("click", (e) => dialog.close());
closeButton.addEventListener("keydown", (e) => {
if (e.key === "Enter" || e.key === " ") {
e.preventDefault();
dialog.close();
}
});
}</script>
</head>
<body>
@@ -1411,6 +1516,8 @@ export { HeadingAnchors }</script>
<heading-anchors content="<i class='fa-solid fa-anchor'></i>">
<article>
<h1 id="boypussy">boypussy</h1>
@@ -1455,7 +1562,11 @@ export { HeadingAnchors }</script>
</div>
<img src="/img/boypussy-shirt.jpg" alt="A butch holding a chainsaw and wearing a tank top that reads boypussy in pink Barbie font." loading="lazy" decoding="async" width="1000" height="1250">
<dialog closedby="any" aria-label="image modal" tabindex="-1">
<button class="close-dialog" autofocus="" aria-label="close the image modal">&times;</button>
<img class="modal-img" src="/img/boypussy-shirt.jpg" alt="A butch holding a chainsaw and wearing a tank top that reads boypussy in pink Barbie font." loading="lazy" decoding="async" width="1000" height="1250">
</dialog>
<img tabindex="0" class="hero" src="/img/boypussy-shirt.jpg" alt="A butch holding a chainsaw and wearing a tank top that reads boypussy in pink Barbie font." loading="lazy" decoding="async" width="1000" height="1250">
<p>To order this as a shirt, please fill out <s>the order form</s> (Sep 2024: no longer taking orders via this method).</p>
@@ -1508,43 +1619,51 @@ export { HeadingAnchors }</script>
<ol id="postlist">
<li class="post">
<a class="postlink" href="/printmaking-paper-notes/">
<h2 data-ha-exclude="" id="printmaking-paper-notes">printmaking paper notes </h2>
<a class="postlink" href="/slightly-weird-man-club/">
<h2 data-ha-exclude="" id="slightly-weird-man-club">slightly weird man club </h2>
<ul class="postlist-tags">
<li>print</li>
<li>shirt</li>
<li>gender</li>
</ul>
<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">
<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="/become-unbutterable/">
<h2 data-ha-exclude="" id="become-unbutterable">become unbutterable </h2>
<a class="postlink" href="/brown-creeper/">
<h2 data-ha-exclude="" id="brown-creeper">brown creeper </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">
<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="/block-printing-transfer-method/">
<h2 data-ha-exclude="" id="block-printing-transfer-method">block printing transfer method </h2>
<a class="postlink" href="/hummingbird-become-ungovernable/">
<h2 data-ha-exclude="" id="hummingbird-become-ungovernable">hummingbird become ungovernable </h2>
<ul class="postlist-tags">
<li>print</li>
<li>card</li>
<li>shirt</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/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>
@@ -1580,6 +1699,6 @@ export { HeadingAnchors }</script>
</footer>
<!-- This page `/boypussy/` was built on 2026-05-06T18:04:11.572Z -->
<!-- This page `/boypussy/` was built on 2026-05-14T03:43:28.018Z -->
</body>
</html>
_site/brookes-collar/index.html
+124 -13
View File
@@ -457,6 +457,90 @@ pre[class*=language-]::selection {
.tag:nth-child(odd) p {
text-align: right;
}
img[tabindex="0"]:focus-visible {
outline: .15rem solid var(--color-teal);
}
dialog {
margin: auto;
flex-flow: column;
background: transparent;
border: none;
position: absolute;
}
dialog[open] {
display: flex;
}
dialog::backdrop {
background-color: rgba(from var(--color-bg) r g b / .8);
backdrop-filter: blur(4px);
}
body:has(dialog[open]) {
overflow: hidden;
}
.close-dialog {
background-color: rgba(from var(--color-teal) r g b / .2);
font-size: 1.5rem;
padding: 0 .5rem .15rem;
border-radius: 1rem;
color: var(--color-teal);
box-shadow: .15rem .15rem var(--color-shadow);
border: .08rem solid var(--color-teal);
align-self: flex-end;
justify-self: flex-start;
margin: 0 .1rem;
/* Click animation handling */
position: relative;
top: 1rem;
left: -.15rem;
transition: top .1s ease-in, left .1s ease-in;
}
.close-dialog:focus-visible {
outline: none;
background-color: var(--color-teal);
color: var(--color-bg);
}
@media (any-hover: hover) {
.close-dialog:hover {
outline: none;
background-color: var(--color-teal);
color: var(--color-bg);
}
}
@media (forced-colors: active) {
.close-dialog:focus-visible {
outline-offset: .08rem;
outline: .08rem solid;
}
@media (any-hover: hover) {
.close-dialog:hover {
outline-offset: .08rem;
outline: .08rem solid;
}
}
}
/* Click animation */
.close-dialog:active {
top: 1.1rem;
left: -.05rem;
box-shadow: .05rem .05rem var(--color-shadow);
}
.modal-img {
max-height: calc(90vh - 2rem);
object-fit: contain;
width: auto;
margin: 0 1rem;
}
:root {
color-scheme: light dark;
@@ -637,7 +721,6 @@ span.ha-placeholder {
opacity: .55;
}
/* Lists */
::marker {
color: var(--color-pink);
@@ -1351,7 +1434,29 @@ class HeadingAnchors extends HTMLElement {
HeadingAnchors.register();
export { HeadingAnchors }</script>
export { HeadingAnchors }
/* don't even bother on mobile */
if (window.innerWidth > 650) {
const dialog = document.querySelector("dialog");
const closeButton = document.querySelector(".close-dialog");
const hero = document.querySelector(".hero");
hero.addEventListener("click", (e) => dialog.showModal());
hero.addEventListener("keydown", (e) => {
if (e.key === "Enter" || e.key === " ") {
e.preventDefault();
dialog.showModal();
}
});
closeButton.addEventListener("click", (e) => dialog.close());
closeButton.addEventListener("keydown", (e) => {
if (e.key === "Enter" || e.key === " ") {
e.preventDefault();
dialog.close();
}
});
}</script>
</head>
<body>
@@ -1411,6 +1516,8 @@ export { HeadingAnchors }</script>
<heading-anchors content="<i class='fa-solid fa-anchor'></i>">
<article>
<h1 id="brookes-collar">brooke&#39;s collar</h1>
@@ -1435,7 +1542,11 @@ export { HeadingAnchors }</script>
</div>
<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">
<dialog closedby="any" aria-label="image modal" tabindex="-1">
<button class="close-dialog" autofocus="" aria-label="close the image modal">&times;</button>
<img class="modal-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">
</dialog>
<img tabindex="0" class="hero" 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">
<p>3/4&quot; wide collar with stainless/nickel fittings.</p>
@@ -1481,43 +1592,43 @@ export { HeadingAnchors }</script>
<ol id="postlist">
<li class="post">
<a class="postlink" href="/moss-harness/">
<h2 data-ha-exclude="" id="moss-harness">moss harness </h2>
<a class="postlink" href="/lobstah/">
<h2 data-ha-exclude="" id="lobstah">lobstah </h2>
<ul class="postlist-tags">
<li>leather</li>
</ul>
<img src="/img/moss-harness.jpg" alt="A nylon webbing harness in bright teal laid out on a desk." loading="lazy" decoding="async" width="1000" height="750">
<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="/nine-pocket-bifold/">
<h2 data-ha-exclude="" id="nine-pocket-bifold">nine pocket bifold </h2>
<a class="postlink" href="/foldy-wallet-with-thumb-slide/">
<h2 data-ha-exclude="" id="foldy-wallet-with-thumb-slide">foldy wallet with thumb slide </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/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">
</a>
</li>
<li class="post">
<a class="postlink" href="/brookes-suspenders/">
<h2 data-ha-exclude="" id="brookes-suspenders">brooke&#39;s suspenders </h2>
<a class="postlink" href="/zipper-bifold-green/">
<h2 data-ha-exclude="" id="zipper-bifold-green">zipper bifold (green) </h2>
<ul class="postlist-tags">
<li>leather</li>
</ul>
<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">
<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>
@@ -1553,6 +1664,6 @@ export { HeadingAnchors }</script>
</footer>
<!-- This page `/brookes-collar/` was built on 2026-05-06T18:04:11.575Z -->
<!-- This page `/brookes-collar/` was built on 2026-05-14T03:43:28.023Z -->
</body>
</html>
_site/brookes-cuff-bracelets/index.html
+124 -13
View File
@@ -457,6 +457,90 @@ pre[class*=language-]::selection {
.tag:nth-child(odd) p {
text-align: right;
}
img[tabindex="0"]:focus-visible {
outline: .15rem solid var(--color-teal);
}
dialog {
margin: auto;
flex-flow: column;
background: transparent;
border: none;
position: absolute;
}
dialog[open] {
display: flex;
}
dialog::backdrop {
background-color: rgba(from var(--color-bg) r g b / .8);
backdrop-filter: blur(4px);
}
body:has(dialog[open]) {
overflow: hidden;
}
.close-dialog {
background-color: rgba(from var(--color-teal) r g b / .2);
font-size: 1.5rem;
padding: 0 .5rem .15rem;
border-radius: 1rem;
color: var(--color-teal);
box-shadow: .15rem .15rem var(--color-shadow);
border: .08rem solid var(--color-teal);
align-self: flex-end;
justify-self: flex-start;
margin: 0 .1rem;
/* Click animation handling */
position: relative;
top: 1rem;
left: -.15rem;
transition: top .1s ease-in, left .1s ease-in;
}
.close-dialog:focus-visible {
outline: none;
background-color: var(--color-teal);
color: var(--color-bg);
}
@media (any-hover: hover) {
.close-dialog:hover {
outline: none;
background-color: var(--color-teal);
color: var(--color-bg);
}
}
@media (forced-colors: active) {
.close-dialog:focus-visible {
outline-offset: .08rem;
outline: .08rem solid;
}
@media (any-hover: hover) {
.close-dialog:hover {
outline-offset: .08rem;
outline: .08rem solid;
}
}
}
/* Click animation */
.close-dialog:active {
top: 1.1rem;
left: -.05rem;
box-shadow: .05rem .05rem var(--color-shadow);
}
.modal-img {
max-height: calc(90vh - 2rem);
object-fit: contain;
width: auto;
margin: 0 1rem;
}
:root {
color-scheme: light dark;
@@ -637,7 +721,6 @@ span.ha-placeholder {
opacity: .55;
}
/* Lists */
::marker {
color: var(--color-pink);
@@ -1351,7 +1434,29 @@ class HeadingAnchors extends HTMLElement {
HeadingAnchors.register();
export { HeadingAnchors }</script>
export { HeadingAnchors }
/* don't even bother on mobile */
if (window.innerWidth > 650) {
const dialog = document.querySelector("dialog");
const closeButton = document.querySelector(".close-dialog");
const hero = document.querySelector(".hero");
hero.addEventListener("click", (e) => dialog.showModal());
hero.addEventListener("keydown", (e) => {
if (e.key === "Enter" || e.key === " ") {
e.preventDefault();
dialog.showModal();
}
});
closeButton.addEventListener("click", (e) => dialog.close());
closeButton.addEventListener("keydown", (e) => {
if (e.key === "Enter" || e.key === " ") {
e.preventDefault();
dialog.close();
}
});
}</script>
</head>
<body>
@@ -1411,6 +1516,8 @@ export { HeadingAnchors }</script>
<heading-anchors content="<i class='fa-solid fa-anchor'></i>">
<article>
<h1 id="brookes-cuff-bracelets">brooke&#39;s cuff bracelets</h1>
@@ -1435,7 +1542,11 @@ export { HeadingAnchors }</script>
</div>
<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">
<dialog closedby="any" aria-label="image modal" tabindex="-1">
<button class="close-dialog" autofocus="" aria-label="close the image modal">&times;</button>
<img class="modal-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">
</dialog>
<img tabindex="0" class="hero" 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">
<p>To match <a href="brooke-collar">brooke's collar</a>.</p>
@@ -1481,43 +1592,43 @@ export { HeadingAnchors }</script>
<ol id="postlist">
<li class="post">
<a class="postlink" href="/leather-chest-harness/">
<h2 data-ha-exclude="" id="leather-chest-harness">leather chest harness </h2>
<a class="postlink" href="/stephanie-collar/">
<h2 data-ha-exclude="" id="stephanie-collar">stephanie collar </h2>
<ul class="postlist-tags">
<li>leather</li>
</ul>
<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">
<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="" id="zipper-bifold">zipper bifold </h2>
<a class="postlink" href="/makers-mark-keychain/">
<h2 data-ha-exclude="" id="makers-mark-keychain">maker&#39;s mark keychain </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/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="/soras-collar/">
<h2 data-ha-exclude="" id="soras-collar">sora&#39;s collar </h2>
<a class="postlink" href="/zipper-bifold-green/">
<h2 data-ha-exclude="" id="zipper-bifold-green">zipper bifold (green) </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/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>
@@ -1553,6 +1664,6 @@ export { HeadingAnchors }</script>
</footer>
<!-- This page `/brookes-cuff-bracelets/` was built on 2026-05-06T18:04:11.554Z -->
<!-- This page `/brookes-cuff-bracelets/` was built on 2026-05-14T03:43:27.986Z -->
</body>
</html>
_site/brookes-notebook/index.html
+127 -18
View File
@@ -457,6 +457,90 @@ pre[class*=language-]::selection {
.tag:nth-child(odd) p {
text-align: right;
}
img[tabindex="0"]:focus-visible {
outline: .15rem solid var(--color-teal);
}
dialog {
margin: auto;
flex-flow: column;
background: transparent;
border: none;
position: absolute;
}
dialog[open] {
display: flex;
}
dialog::backdrop {
background-color: rgba(from var(--color-bg) r g b / .8);
backdrop-filter: blur(4px);
}
body:has(dialog[open]) {
overflow: hidden;
}
.close-dialog {
background-color: rgba(from var(--color-teal) r g b / .2);
font-size: 1.5rem;
padding: 0 .5rem .15rem;
border-radius: 1rem;
color: var(--color-teal);
box-shadow: .15rem .15rem var(--color-shadow);
border: .08rem solid var(--color-teal);
align-self: flex-end;
justify-self: flex-start;
margin: 0 .1rem;
/* Click animation handling */
position: relative;
top: 1rem;
left: -.15rem;
transition: top .1s ease-in, left .1s ease-in;
}
.close-dialog:focus-visible {
outline: none;
background-color: var(--color-teal);
color: var(--color-bg);
}
@media (any-hover: hover) {
.close-dialog:hover {
outline: none;
background-color: var(--color-teal);
color: var(--color-bg);
}
}
@media (forced-colors: active) {
.close-dialog:focus-visible {
outline-offset: .08rem;
outline: .08rem solid;
}
@media (any-hover: hover) {
.close-dialog:hover {
outline-offset: .08rem;
outline: .08rem solid;
}
}
}
/* Click animation */
.close-dialog:active {
top: 1.1rem;
left: -.05rem;
box-shadow: .05rem .05rem var(--color-shadow);
}
.modal-img {
max-height: calc(90vh - 2rem);
object-fit: contain;
width: auto;
margin: 0 1rem;
}
:root {
color-scheme: light dark;
@@ -637,7 +721,6 @@ span.ha-placeholder {
opacity: .55;
}
/* Lists */
::marker {
color: var(--color-pink);
@@ -1351,7 +1434,29 @@ class HeadingAnchors extends HTMLElement {
HeadingAnchors.register();
export { HeadingAnchors }</script>
export { HeadingAnchors }
/* don't even bother on mobile */
if (window.innerWidth > 650) {
const dialog = document.querySelector("dialog");
const closeButton = document.querySelector(".close-dialog");
const hero = document.querySelector(".hero");
hero.addEventListener("click", (e) => dialog.showModal());
hero.addEventListener("keydown", (e) => {
if (e.key === "Enter" || e.key === " ") {
e.preventDefault();
dialog.showModal();
}
});
closeButton.addEventListener("click", (e) => dialog.close());
closeButton.addEventListener("keydown", (e) => {
if (e.key === "Enter" || e.key === " ") {
e.preventDefault();
dialog.close();
}
});
}</script>
</head>
<body>
@@ -1411,6 +1516,8 @@ export { HeadingAnchors }</script>
<heading-anchors content="<i class='fa-solid fa-anchor'></i>">
<article>
<h1 id="brookes-notebook">brooke&#39;s notebook</h1>
@@ -1440,7 +1547,11 @@ export { HeadingAnchors }</script>
</div>
<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">
<dialog closedby="any" aria-label="image modal" tabindex="-1">
<button class="close-dialog" autofocus="" aria-label="close the image modal">&times;</button>
<img class="modal-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">
</dialog>
<img tabindex="0" class="hero" 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">
<p>A collage book full of different paper, art, and more.</p>
@@ -1496,47 +1607,45 @@ export { HeadingAnchors }</script>
<ol id="postlist">
<li class="post">
<a class="postlink" href="/tiny-books/">
<h2 data-ha-exclude="" id="tiny-books">tiny books </h2>
<a class="postlink" href="/green-memo-pad/">
<h2 data-ha-exclude="" id="green-memo-pad">green memo pad </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">
<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="/kestrel-zine/">
<h2 data-ha-exclude="" id="kestrel-zine">kestrel zine </h2>
<a class="postlink" href="/stampede-journal/">
<h2 data-ha-exclude="" id="stampede-journal">stampede journal </h2>
<ul class="postlist-tags">
<li>print</li>
<li>zine</li>
<li>highlight</li>
<li>book</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/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="/happy-solstice-2025/">
<h2 data-ha-exclude="" id="happy-solstice-2025">happy solstice 2025 </h2>
<a class="postlink" href="/textures-unite/">
<h2 data-ha-exclude="" id="textures-unite">textures unite </h2>
<ul class="postlist-tags">
<li>knit</li>
<li>highlight</li>
</ul>
<img src="/img/solstice-2025.jpg" alt="front and back of our solstice card from this year, designed in postcard format. long alt incoming... front - 4 picture collage. 1 - i&#39;m standing in the woods, looking to one side, wearing an elaborate knit scarf. 2 - silhouetted thistle-like flowers in front of a pink-purple sky. 3 - my wife brooke crouches down to draw a heart in charcoal on a beach log, with &#39;L + B&#39; written inside. 4 - brooke stands on a driftwood-covered beach looking hella cool in mirrored shades. our dog kes stands in front of her and looks off to one side eagerly. overlaid is the words &#39;happy solstice&#39; in cursive. back - split down the center like the back of a postcard. on the left side, a 5 picture collage. 1 - i stand on a rock at the edge of a calm alpine lake. overlaid is the words &#39;lee, brooke, kestrel, &amp; the flock&#39; in print lettering. 2 - an early spring fern curl. 3 - our six ducks, all facing to the left, not in a row but still very organized. 4 - brooke grins at the camera while hugging kestrel&#39;s head. kestrel looks maybe a bit distraught. 5 - silhouette of a heron in flight across an early morning blue sky. on the address side, i&#39;ve added a dahlia to represent the stamp, and written &#39;you!&#39; in the field that would normally hold the mailing address." loading="lazy" decoding="async" width="1000" height="1346">
<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>
@@ -1572,6 +1681,6 @@ export { HeadingAnchors }</script>
</footer>
<!-- This page `/brookes-notebook/` was built on 2026-05-06T18:04:11.548Z -->
<!-- This page `/brookes-notebook/` was built on 2026-05-14T03:43:27.984Z -->
</body>
</html>
_site/brookes-scarf/index.html
+123 -12
View File
@@ -457,6 +457,90 @@ pre[class*=language-]::selection {
.tag:nth-child(odd) p {
text-align: right;
}
img[tabindex="0"]:focus-visible {
outline: .15rem solid var(--color-teal);
}
dialog {
margin: auto;
flex-flow: column;
background: transparent;
border: none;
position: absolute;
}
dialog[open] {
display: flex;
}
dialog::backdrop {
background-color: rgba(from var(--color-bg) r g b / .8);
backdrop-filter: blur(4px);
}
body:has(dialog[open]) {
overflow: hidden;
}
.close-dialog {
background-color: rgba(from var(--color-teal) r g b / .2);
font-size: 1.5rem;
padding: 0 .5rem .15rem;
border-radius: 1rem;
color: var(--color-teal);
box-shadow: .15rem .15rem var(--color-shadow);
border: .08rem solid var(--color-teal);
align-self: flex-end;
justify-self: flex-start;
margin: 0 .1rem;
/* Click animation handling */
position: relative;
top: 1rem;
left: -.15rem;
transition: top .1s ease-in, left .1s ease-in;
}
.close-dialog:focus-visible {
outline: none;
background-color: var(--color-teal);
color: var(--color-bg);
}
@media (any-hover: hover) {
.close-dialog:hover {
outline: none;
background-color: var(--color-teal);
color: var(--color-bg);
}
}
@media (forced-colors: active) {
.close-dialog:focus-visible {
outline-offset: .08rem;
outline: .08rem solid;
}
@media (any-hover: hover) {
.close-dialog:hover {
outline-offset: .08rem;
outline: .08rem solid;
}
}
}
/* Click animation */
.close-dialog:active {
top: 1.1rem;
left: -.05rem;
box-shadow: .05rem .05rem var(--color-shadow);
}
.modal-img {
max-height: calc(90vh - 2rem);
object-fit: contain;
width: auto;
margin: 0 1rem;
}
:root {
color-scheme: light dark;
@@ -637,7 +721,6 @@ span.ha-placeholder {
opacity: .55;
}
/* Lists */
::marker {
color: var(--color-pink);
@@ -1351,7 +1434,29 @@ class HeadingAnchors extends HTMLElement {
HeadingAnchors.register();
export { HeadingAnchors }</script>
export { HeadingAnchors }
/* don't even bother on mobile */
if (window.innerWidth > 650) {
const dialog = document.querySelector("dialog");
const closeButton = document.querySelector(".close-dialog");
const hero = document.querySelector(".hero");
hero.addEventListener("click", (e) => dialog.showModal());
hero.addEventListener("keydown", (e) => {
if (e.key === "Enter" || e.key === " ") {
e.preventDefault();
dialog.showModal();
}
});
closeButton.addEventListener("click", (e) => dialog.close());
closeButton.addEventListener("keydown", (e) => {
if (e.key === "Enter" || e.key === " ") {
e.preventDefault();
dialog.close();
}
});
}</script>
</head>
<body>
@@ -1411,6 +1516,8 @@ export { HeadingAnchors }</script>
<heading-anchors content="<i class='fa-solid fa-anchor'></i>">
<article>
<h1 id="brookes-scarf">brooke&#39;s scarf</h1>
@@ -1435,7 +1542,11 @@ export { HeadingAnchors }</script>
</div>
<img src="/img/brooke-scarf.jpg" alt="A diaphanous knit lacework scarf draped over the back of a chair. It is split down the long way into two colors - one tinted orange and one tinted mint blue. Both colors, the orange and the blue, are held double with the same variegated gray, making the piece more cohesive. The yarn overs in the lacework create airy repeating holes." loading="lazy" decoding="async" width="1000" height="1333">
<dialog closedby="any" aria-label="image modal" tabindex="-1">
<button class="close-dialog" autofocus="" aria-label="close the image modal">&times;</button>
<img class="modal-img" src="/img/brooke-scarf.jpg" alt="A diaphanous knit lacework scarf draped over the back of a chair. It is split down the long way into two colors - one tinted orange and one tinted mint blue. Both colors, the orange and the blue, are held double with the same variegated gray, making the piece more cohesive. The yarn overs in the lacework create airy repeating holes." loading="lazy" decoding="async" width="1000" height="1333">
</dialog>
<img tabindex="0" class="hero" src="/img/brooke-scarf.jpg" alt="A diaphanous knit lacework scarf draped over the back of a chair. It is split down the long way into two colors - one tinted orange and one tinted mint blue. Both colors, the orange and the blue, are held double with the same variegated gray, making the piece more cohesive. The yarn overs in the lacework create airy repeating holes." loading="lazy" decoding="async" width="1000" height="1333">
<h2 id="pattern">pattern</h2>
@@ -1488,31 +1599,31 @@ export { HeadingAnchors }</script>
<ol id="postlist">
<li class="post">
<a class="postlink" href="/butch-hands-pattern/">
<h2 data-ha-exclude="" id="butch-hands-pattern">butch hands pattern </h2>
<a class="postlink" href="/on-the-shoulders-of-giants/">
<h2 data-ha-exclude="" id="on-the-shoulders-of-giants">on the shoulders of giants </h2>
<ul class="postlist-tags">
<li>zine</li>
<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/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>
<li class="post">
<a class="postlink" href="/pink-socks/">
<h2 data-ha-exclude="" id="pink-socks">pink socks </h2>
<a class="postlink" href="/keffiyah-fishing-net-pattern/">
<h2 data-ha-exclude="" id="keffiyah-fishing-net-pattern">keffiyah fishing net pattern </h2>
<ul class="postlist-tags">
<li>knit</li>
</ul>
<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">
<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">
</a>
</li>
@@ -1562,6 +1673,6 @@ export { HeadingAnchors }</script>
</footer>
<!-- This page `/brookes-scarf/` was built on 2026-05-06T18:04:11.552Z -->
<!-- This page `/brookes-scarf/` was built on 2026-05-14T03:43:28.000Z -->
</body>
</html>
_site/brookes-socks/index.html
+135 -20
View File
@@ -457,6 +457,90 @@ pre[class*=language-]::selection {
.tag:nth-child(odd) p {
text-align: right;
}
img[tabindex="0"]:focus-visible {
outline: .15rem solid var(--color-teal);
}
dialog {
margin: auto;
flex-flow: column;
background: transparent;
border: none;
position: absolute;
}
dialog[open] {
display: flex;
}
dialog::backdrop {
background-color: rgba(from var(--color-bg) r g b / .8);
backdrop-filter: blur(4px);
}
body:has(dialog[open]) {
overflow: hidden;
}
.close-dialog {
background-color: rgba(from var(--color-teal) r g b / .2);
font-size: 1.5rem;
padding: 0 .5rem .15rem;
border-radius: 1rem;
color: var(--color-teal);
box-shadow: .15rem .15rem var(--color-shadow);
border: .08rem solid var(--color-teal);
align-self: flex-end;
justify-self: flex-start;
margin: 0 .1rem;
/* Click animation handling */
position: relative;
top: 1rem;
left: -.15rem;
transition: top .1s ease-in, left .1s ease-in;
}
.close-dialog:focus-visible {
outline: none;
background-color: var(--color-teal);
color: var(--color-bg);
}
@media (any-hover: hover) {
.close-dialog:hover {
outline: none;
background-color: var(--color-teal);
color: var(--color-bg);
}
}
@media (forced-colors: active) {
.close-dialog:focus-visible {
outline-offset: .08rem;
outline: .08rem solid;
}
@media (any-hover: hover) {
.close-dialog:hover {
outline-offset: .08rem;
outline: .08rem solid;
}
}
}
/* Click animation */
.close-dialog:active {
top: 1.1rem;
left: -.05rem;
box-shadow: .05rem .05rem var(--color-shadow);
}
.modal-img {
max-height: calc(90vh - 2rem);
object-fit: contain;
width: auto;
margin: 0 1rem;
}
:root {
color-scheme: light dark;
@@ -637,7 +721,6 @@ span.ha-placeholder {
opacity: .55;
}
/* Lists */
::marker {
color: var(--color-pink);
@@ -1351,7 +1434,29 @@ class HeadingAnchors extends HTMLElement {
HeadingAnchors.register();
export { HeadingAnchors }</script>
export { HeadingAnchors }
/* don't even bother on mobile */
if (window.innerWidth > 650) {
const dialog = document.querySelector("dialog");
const closeButton = document.querySelector(".close-dialog");
const hero = document.querySelector(".hero");
hero.addEventListener("click", (e) => dialog.showModal());
hero.addEventListener("keydown", (e) => {
if (e.key === "Enter" || e.key === " ") {
e.preventDefault();
dialog.showModal();
}
});
closeButton.addEventListener("click", (e) => dialog.close());
closeButton.addEventListener("keydown", (e) => {
if (e.key === "Enter" || e.key === " ") {
e.preventDefault();
dialog.close();
}
});
}</script>
</head>
<body>
@@ -1411,6 +1516,8 @@ export { HeadingAnchors }</script>
<heading-anchors content="<i class='fa-solid fa-anchor'></i>">
<article>
<h1 id="brookes-socks">brooke&#39;s socks</h1>
@@ -1435,7 +1542,11 @@ export { HeadingAnchors }</script>
</div>
<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">
<dialog closedby="any" aria-label="image modal" tabindex="-1">
<button class="close-dialog" autofocus="" aria-label="close the image modal">&times;</button>
<img class="modal-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">
</dialog>
<img tabindex="0" class="hero" 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">
<p>My second pair of socks, knit for my partner. They use <a href="https://www.schoppel-wolle.de/" target="_blank" rel="external">Schoppel-Wolle</a> Das Paar yarn in the colorway Fruhjahrsputz / Spring Cleaning. This yarn is designed to produce identical striping for each sock, and it very nearly did, with only a tiny discrepancy notable as I got to the toes.</p>
@@ -1481,29 +1592,17 @@ export { HeadingAnchors }</script>
<ol id="postlist">
<li class="post">
<a class="postlink" href="/sideways-canvas-shirt/">
<h2 data-ha-exclude="" id="sideways-canvas-shirt">sideways canvas shirt </h2>
<a class="postlink" href="/textures-unite/">
<h2 data-ha-exclude="" id="textures-unite">textures unite </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>
<li class="post">
<a class="postlink" href="/brookes-scarf/">
<h2 data-ha-exclude="" id="brookes-scarf">brooke&#39;s scarf </h2>
<ul class="postlist-tags">
<li>knit</li>
<li>highlight</li>
</ul>
<img src="/img/brooke-scarf.jpg" alt="A diaphanous knit lacework scarf draped over the back of a chair. It is split down the long way into two colors - one tinted orange and one tinted mint blue. Both colors, the orange and the blue, are held double with the same variegated gray, making the piece more cohesive. The yarn overs in the lacework create airy repeating holes." loading="lazy" decoding="async" width="1000" height="1333">
<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>
@@ -1522,6 +1621,22 @@ export { HeadingAnchors }</script>
</a>
</li>
<li class="post">
<a class="postlink" href="/butch-hands-pattern/">
<h2 data-ha-exclude="" id="butch-hands-pattern">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>
</section>
@@ -1553,6 +1668,6 @@ export { HeadingAnchors }</script>
</footer>
<!-- This page `/brookes-socks/` was built on 2026-05-06T18:04:11.547Z -->
<!-- This page `/brookes-socks/` was built on 2026-05-14T03:43:27.983Z -->
</body>
</html>
_site/brookes-suspenders/index.html
+126 -15
View File
@@ -457,6 +457,90 @@ pre[class*=language-]::selection {
.tag:nth-child(odd) p {
text-align: right;
}
img[tabindex="0"]:focus-visible {
outline: .15rem solid var(--color-teal);
}
dialog {
margin: auto;
flex-flow: column;
background: transparent;
border: none;
position: absolute;
}
dialog[open] {
display: flex;
}
dialog::backdrop {
background-color: rgba(from var(--color-bg) r g b / .8);
backdrop-filter: blur(4px);
}
body:has(dialog[open]) {
overflow: hidden;
}
.close-dialog {
background-color: rgba(from var(--color-teal) r g b / .2);
font-size: 1.5rem;
padding: 0 .5rem .15rem;
border-radius: 1rem;
color: var(--color-teal);
box-shadow: .15rem .15rem var(--color-shadow);
border: .08rem solid var(--color-teal);
align-self: flex-end;
justify-self: flex-start;
margin: 0 .1rem;
/* Click animation handling */
position: relative;
top: 1rem;
left: -.15rem;
transition: top .1s ease-in, left .1s ease-in;
}
.close-dialog:focus-visible {
outline: none;
background-color: var(--color-teal);
color: var(--color-bg);
}
@media (any-hover: hover) {
.close-dialog:hover {
outline: none;
background-color: var(--color-teal);
color: var(--color-bg);
}
}
@media (forced-colors: active) {
.close-dialog:focus-visible {
outline-offset: .08rem;
outline: .08rem solid;
}
@media (any-hover: hover) {
.close-dialog:hover {
outline-offset: .08rem;
outline: .08rem solid;
}
}
}
/* Click animation */
.close-dialog:active {
top: 1.1rem;
left: -.05rem;
box-shadow: .05rem .05rem var(--color-shadow);
}
.modal-img {
max-height: calc(90vh - 2rem);
object-fit: contain;
width: auto;
margin: 0 1rem;
}
:root {
color-scheme: light dark;
@@ -637,7 +721,6 @@ span.ha-placeholder {
opacity: .55;
}
/* Lists */
::marker {
color: var(--color-pink);
@@ -1351,7 +1434,29 @@ class HeadingAnchors extends HTMLElement {
HeadingAnchors.register();
export { HeadingAnchors }</script>
export { HeadingAnchors }
/* don't even bother on mobile */
if (window.innerWidth > 650) {
const dialog = document.querySelector("dialog");
const closeButton = document.querySelector(".close-dialog");
const hero = document.querySelector(".hero");
hero.addEventListener("click", (e) => dialog.showModal());
hero.addEventListener("keydown", (e) => {
if (e.key === "Enter" || e.key === " ") {
e.preventDefault();
dialog.showModal();
}
});
closeButton.addEventListener("click", (e) => dialog.close());
closeButton.addEventListener("keydown", (e) => {
if (e.key === "Enter" || e.key === " ") {
e.preventDefault();
dialog.close();
}
});
}</script>
</head>
<body>
@@ -1411,6 +1516,8 @@ export { HeadingAnchors }</script>
<heading-anchors content="<i class='fa-solid fa-anchor'></i>">
<article>
<h1 id="brookes-suspenders">brooke&#39;s suspenders</h1>
@@ -1435,7 +1542,11 @@ export { HeadingAnchors }</script>
</div>
<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">
<dialog closedby="any" aria-label="image modal" tabindex="-1">
<button class="close-dialog" autofocus="" aria-label="close the image modal">&times;</button>
<img class="modal-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">
</dialog>
<img tabindex="0" class="hero" 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">
<p>for our 3 year anniversary :)</p>
@@ -1481,45 +1592,45 @@ export { HeadingAnchors }</script>
<ol id="postlist">
<li class="post">
<a class="postlink" href="/vertical-zipper-card-wallet/">
<h2 data-ha-exclude="" id="vertical-zipper-card-wallet">vertical zipper card wallet </h2>
<a class="postlink" href="/dragon-mask/">
<h2 data-ha-exclude="" id="dragon-mask">dragon mask </h2>
<ul class="postlist-tags">
<li>leather</li>
<li>highlight</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/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="/triangle-pouch/">
<h2 data-ha-exclude="" id="triangle-pouch">triangle pouch </h2>
<a class="postlink" href="/mom-bag/">
<h2 data-ha-exclude="" id="mom-bag">mom bag </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">
<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-long-stitch-journals/">
<h2 data-ha-exclude="" id="leather-long-stitch-journals">leather long-stitch journals </h2>
<a class="postlink" href="/soras-collar/">
<h2 data-ha-exclude="" id="soras-collar">sora&#39;s collar </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/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>
@@ -1555,6 +1666,6 @@ export { HeadingAnchors }</script>
</footer>
<!-- This page `/brookes-suspenders/` was built on 2026-05-06T18:04:11.551Z -->
<!-- This page `/brookes-suspenders/` was built on 2026-05-14T03:43:27.994Z -->
</body>
</html>
_site/brown-creeper/index.html
+137 -26
View File
@@ -457,6 +457,90 @@ pre[class*=language-]::selection {
.tag:nth-child(odd) p {
text-align: right;
}
img[tabindex="0"]:focus-visible {
outline: .15rem solid var(--color-teal);
}
dialog {
margin: auto;
flex-flow: column;
background: transparent;
border: none;
position: absolute;
}
dialog[open] {
display: flex;
}
dialog::backdrop {
background-color: rgba(from var(--color-bg) r g b / .8);
backdrop-filter: blur(4px);
}
body:has(dialog[open]) {
overflow: hidden;
}
.close-dialog {
background-color: rgba(from var(--color-teal) r g b / .2);
font-size: 1.5rem;
padding: 0 .5rem .15rem;
border-radius: 1rem;
color: var(--color-teal);
box-shadow: .15rem .15rem var(--color-shadow);
border: .08rem solid var(--color-teal);
align-self: flex-end;
justify-self: flex-start;
margin: 0 .1rem;
/* Click animation handling */
position: relative;
top: 1rem;
left: -.15rem;
transition: top .1s ease-in, left .1s ease-in;
}
.close-dialog:focus-visible {
outline: none;
background-color: var(--color-teal);
color: var(--color-bg);
}
@media (any-hover: hover) {
.close-dialog:hover {
outline: none;
background-color: var(--color-teal);
color: var(--color-bg);
}
}
@media (forced-colors: active) {
.close-dialog:focus-visible {
outline-offset: .08rem;
outline: .08rem solid;
}
@media (any-hover: hover) {
.close-dialog:hover {
outline-offset: .08rem;
outline: .08rem solid;
}
}
}
/* Click animation */
.close-dialog:active {
top: 1.1rem;
left: -.05rem;
box-shadow: .05rem .05rem var(--color-shadow);
}
.modal-img {
max-height: calc(90vh - 2rem);
object-fit: contain;
width: auto;
margin: 0 1rem;
}
:root {
color-scheme: light dark;
@@ -637,7 +721,6 @@ span.ha-placeholder {
opacity: .55;
}
/* Lists */
::marker {
color: var(--color-pink);
@@ -1351,7 +1434,29 @@ class HeadingAnchors extends HTMLElement {
HeadingAnchors.register();
export { HeadingAnchors }</script>
export { HeadingAnchors }
/* don't even bother on mobile */
if (window.innerWidth > 650) {
const dialog = document.querySelector("dialog");
const closeButton = document.querySelector(".close-dialog");
const hero = document.querySelector(".hero");
hero.addEventListener("click", (e) => dialog.showModal());
hero.addEventListener("keydown", (e) => {
if (e.key === "Enter" || e.key === " ") {
e.preventDefault();
dialog.showModal();
}
});
closeButton.addEventListener("click", (e) => dialog.close());
closeButton.addEventListener("keydown", (e) => {
if (e.key === "Enter" || e.key === " ") {
e.preventDefault();
dialog.close();
}
});
}</script>
</head>
<body>
@@ -1411,6 +1516,8 @@ export { HeadingAnchors }</script>
<heading-anchors content="<i class='fa-solid fa-anchor'></i>">
<article>
<h1 id="brown-creeper">brown creeper</h1>
@@ -1435,7 +1542,11 @@ export { HeadingAnchors }</script>
</div>
<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">
<dialog closedby="any" aria-label="image modal" tabindex="-1">
<button class="close-dialog" autofocus="" aria-label="close the image modal">&times;</button>
<img class="modal-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">
</dialog>
<img tabindex="0" class="hero" 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">
<p>Created for <a href="https://www.pushpullseattle.com/news/stanza-2024-non-binary" target="_blank" rel="external">Stanza 2024</a>, a show highlighting nonbinary artists and poets.</p>
@@ -1482,22 +1593,8 @@ export { HeadingAnchors }</script>
<ol id="postlist">
<li class="post">
<a class="postlink" href="/tiny-portraits/">
<h2 data-ha-exclude="" id="tiny-portraits">tiny portraits </h2>
<ul class="postlist-tags">
<li>print</li>
</ul>
<img src="/img/tiny-portrait-stamps.jpg" alt="A collage showing various small (around an inch) stamps that depict people or animals." loading="lazy" decoding="async" width="1000" height="1000">
</a>
</li>
<li class="post">
<a class="postlink" href="/flatfish/">
<h2 data-ha-exclude="" id="flatfish">flatfish </h2>
<a class="postlink" href="/seedling/">
<h2 data-ha-exclude="" id="seedling">seedling </h2>
<ul class="postlist-tags">
@@ -1506,25 +1603,39 @@ export { HeadingAnchors }</script>
<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">
<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="/booby-congrats-on-the-top-surgery/">
<h2 data-ha-exclude="" id="booby-congrats-on-the-top-surgery">booby (congrats on the top surgery) </h2>
<a class="postlink" href="/crow/">
<h2 data-ha-exclude="" id="crow">crow </h2>
<ul class="postlist-tags">
<li>print</li>
<li>card</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">
<li>gender</li>
</a>
</li>
<li class="post">
<a class="postlink" href="/kestrel-zine/">
<h2 data-ha-exclude="" id="kestrel-zine">kestrel zine </h2>
<ul class="postlist-tags">
<li>print</li>
<li>zine</li>
<li>highlight</li>
</ul>
<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">
<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>
@@ -1560,6 +1671,6 @@ export { HeadingAnchors }</script>
</footer>
<!-- This page `/brown-creeper/` was built on 2026-05-06T18:04:11.559Z -->
<!-- This page `/brown-creeper/` was built on 2026-05-14T03:43:27.991Z -->
</body>
</html>
_site/butch-hands-pattern/index.html
+136 -29
View File
@@ -457,6 +457,90 @@ pre[class*=language-]::selection {
.tag:nth-child(odd) p {
text-align: right;
}
img[tabindex="0"]:focus-visible {
outline: .15rem solid var(--color-teal);
}
dialog {
margin: auto;
flex-flow: column;
background: transparent;
border: none;
position: absolute;
}
dialog[open] {
display: flex;
}
dialog::backdrop {
background-color: rgba(from var(--color-bg) r g b / .8);
backdrop-filter: blur(4px);
}
body:has(dialog[open]) {
overflow: hidden;
}
.close-dialog {
background-color: rgba(from var(--color-teal) r g b / .2);
font-size: 1.5rem;
padding: 0 .5rem .15rem;
border-radius: 1rem;
color: var(--color-teal);
box-shadow: .15rem .15rem var(--color-shadow);
border: .08rem solid var(--color-teal);
align-self: flex-end;
justify-self: flex-start;
margin: 0 .1rem;
/* Click animation handling */
position: relative;
top: 1rem;
left: -.15rem;
transition: top .1s ease-in, left .1s ease-in;
}
.close-dialog:focus-visible {
outline: none;
background-color: var(--color-teal);
color: var(--color-bg);
}
@media (any-hover: hover) {
.close-dialog:hover {
outline: none;
background-color: var(--color-teal);
color: var(--color-bg);
}
}
@media (forced-colors: active) {
.close-dialog:focus-visible {
outline-offset: .08rem;
outline: .08rem solid;
}
@media (any-hover: hover) {
.close-dialog:hover {
outline-offset: .08rem;
outline: .08rem solid;
}
}
}
/* Click animation */
.close-dialog:active {
top: 1.1rem;
left: -.05rem;
box-shadow: .05rem .05rem var(--color-shadow);
}
.modal-img {
max-height: calc(90vh - 2rem);
object-fit: contain;
width: auto;
margin: 0 1rem;
}
:root {
color-scheme: light dark;
@@ -637,7 +721,6 @@ span.ha-placeholder {
opacity: .55;
}
/* Lists */
::marker {
color: var(--color-pink);
@@ -1351,7 +1434,29 @@ class HeadingAnchors extends HTMLElement {
HeadingAnchors.register();
export { HeadingAnchors }</script>
export { HeadingAnchors }
/* don't even bother on mobile */
if (window.innerWidth > 650) {
const dialog = document.querySelector("dialog");
const closeButton = document.querySelector(".close-dialog");
const hero = document.querySelector(".hero");
hero.addEventListener("click", (e) => dialog.showModal());
hero.addEventListener("keydown", (e) => {
if (e.key === "Enter" || e.key === " ") {
e.preventDefault();
dialog.showModal();
}
});
closeButton.addEventListener("click", (e) => dialog.close());
closeButton.addEventListener("keydown", (e) => {
if (e.key === "Enter" || e.key === " ") {
e.preventDefault();
dialog.close();
}
});
}</script>
</head>
<body>
@@ -1411,6 +1516,8 @@ export { HeadingAnchors }</script>
<heading-anchors content="<i class='fa-solid fa-anchor'></i>">
<article>
<h1 id="butch-hands-pattern">butch hands pattern</h1>
@@ -1440,7 +1547,11 @@ export { HeadingAnchors }</script>
</div>
<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">
<dialog closedby="any" aria-label="image modal" tabindex="-1">
<button class="close-dialog" autofocus="" aria-label="close the image modal">&times;</button>
<img class="modal-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">
</dialog>
<img tabindex="0" class="hero" 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">
<p>This pattern is a <strong>Work in Progress</strong> and will be updated with more information as I make a second pair of these.</p>
@@ -1563,49 +1674,45 @@ export { HeadingAnchors }</script>
<ol id="postlist">
<li class="post">
<a class="postlink" href="/kestrel-zine/">
<h2 data-ha-exclude="" id="kestrel-zine">kestrel zine </h2>
<a class="postlink" href="/keffiyah-fishing-net-pattern/">
<h2 data-ha-exclude="" id="keffiyah-fishing-net-pattern">keffiyah fishing net pattern </h2>
<ul class="postlist-tags">
<li>print</li>
<li>knit</li>
<li>zine</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">
</a>
</li>
<li class="post">
<a class="postlink" href="/dragon-mask/">
<h2 data-ha-exclude="" id="dragon-mask">dragon mask </h2>
<ul class="postlist-tags">
<li>leather</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">
<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="/on-the-shoulders-of-giants/">
<h2 data-ha-exclude="" id="on-the-shoulders-of-giants">on the shoulders of giants </h2>
<a class="postlink" href="/recommendations-and-favorites/">
<h2 data-ha-exclude="" id="recommendations-and-favorites">recommendations &amp; favorites </h2>
<ul class="postlist-tags">
<li>zine</li>
<li>knit</li>
<li>highlight</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">
</a>
</li>
<li class="post">
<a class="postlink" href="/brookes-socks/">
<h2 data-ha-exclude="" id="brookes-socks">brooke&#39;s 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/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>
@@ -1641,6 +1748,6 @@ export { HeadingAnchors }</script>
</footer>
<!-- This page `/butch-hands-pattern/` was built on 2026-05-06T18:04:11.566Z -->
<!-- This page `/butch-hands-pattern/` was built on 2026-05-14T03:43:28.005Z -->
</body>
</html>
_site/chanterelle/index.html
+125 -18
View File
@@ -457,6 +457,90 @@ pre[class*=language-]::selection {
.tag:nth-child(odd) p {
text-align: right;
}
img[tabindex="0"]:focus-visible {
outline: .15rem solid var(--color-teal);
}
dialog {
margin: auto;
flex-flow: column;
background: transparent;
border: none;
position: absolute;
}
dialog[open] {
display: flex;
}
dialog::backdrop {
background-color: rgba(from var(--color-bg) r g b / .8);
backdrop-filter: blur(4px);
}
body:has(dialog[open]) {
overflow: hidden;
}
.close-dialog {
background-color: rgba(from var(--color-teal) r g b / .2);
font-size: 1.5rem;
padding: 0 .5rem .15rem;
border-radius: 1rem;
color: var(--color-teal);
box-shadow: .15rem .15rem var(--color-shadow);
border: .08rem solid var(--color-teal);
align-self: flex-end;
justify-self: flex-start;
margin: 0 .1rem;
/* Click animation handling */
position: relative;
top: 1rem;
left: -.15rem;
transition: top .1s ease-in, left .1s ease-in;
}
.close-dialog:focus-visible {
outline: none;
background-color: var(--color-teal);
color: var(--color-bg);
}
@media (any-hover: hover) {
.close-dialog:hover {
outline: none;
background-color: var(--color-teal);
color: var(--color-bg);
}
}
@media (forced-colors: active) {
.close-dialog:focus-visible {
outline-offset: .08rem;
outline: .08rem solid;
}
@media (any-hover: hover) {
.close-dialog:hover {
outline-offset: .08rem;
outline: .08rem solid;
}
}
}
/* Click animation */
.close-dialog:active {
top: 1.1rem;
left: -.05rem;
box-shadow: .05rem .05rem var(--color-shadow);
}
.modal-img {
max-height: calc(90vh - 2rem);
object-fit: contain;
width: auto;
margin: 0 1rem;
}
:root {
color-scheme: light dark;
@@ -637,7 +721,6 @@ span.ha-placeholder {
opacity: .55;
}
/* Lists */
::marker {
color: var(--color-pink);
@@ -1351,7 +1434,29 @@ class HeadingAnchors extends HTMLElement {
HeadingAnchors.register();
export { HeadingAnchors }</script>
export { HeadingAnchors }
/* don't even bother on mobile */
if (window.innerWidth > 650) {
const dialog = document.querySelector("dialog");
const closeButton = document.querySelector(".close-dialog");
const hero = document.querySelector(".hero");
hero.addEventListener("click", (e) => dialog.showModal());
hero.addEventListener("keydown", (e) => {
if (e.key === "Enter" || e.key === " ") {
e.preventDefault();
dialog.showModal();
}
});
closeButton.addEventListener("click", (e) => dialog.close());
closeButton.addEventListener("keydown", (e) => {
if (e.key === "Enter" || e.key === " ") {
e.preventDefault();
dialog.close();
}
});
}</script>
</head>
<body>
@@ -1411,6 +1516,8 @@ export { HeadingAnchors }</script>
<heading-anchors content="<i class='fa-solid fa-anchor'></i>">
<article>
<h1 id="chanterelle">chanterelle</h1>
@@ -1440,7 +1547,11 @@ export { HeadingAnchors }</script>
</div>
<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">
<dialog closedby="any" aria-label="image modal" tabindex="-1">
<button class="close-dialog" autofocus="" aria-label="close the image modal">&times;</button>
<img class="modal-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">
</dialog>
<img tabindex="0" class="hero" 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">
<p>Hand carved stamp based on a photo of chanterelle mushrooms.</p>
@@ -1493,42 +1604,38 @@ export { HeadingAnchors }</script>
<ol id="postlist">
<li class="post">
<a class="postlink" href="/heron/">
<h2 data-ha-exclude="" id="heron">heron </h2>
<a class="postlink" href="/hair/">
<h2 data-ha-exclude="" id="hair">hair </h2>
<ul class="postlist-tags">
<li>print</li>
<li>card</li>
<li>shirt</li>
<li>gender</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/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="/iris/">
<h2 data-ha-exclude="" id="iris">iris </h2>
<a class="postlink" href="/printmaking-paper-notes/">
<h2 data-ha-exclude="" id="printmaking-paper-notes">printmaking paper notes </h2>
<ul class="postlist-tags">
<li>print</li>
<li>card</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/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>
<li class="post">
<a class="postlink" href="/spotted-towhee/">
<h2 data-ha-exclude="" id="spotted-towhee">spotted towhee </h2>
<a class="postlink" href="/killdeer/">
<h2 data-ha-exclude="" id="killdeer">killdeer </h2>
<ul class="postlist-tags">
@@ -1537,7 +1644,7 @@ export { HeadingAnchors }</script>
<li>card</li>
</ul>
<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">
<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>
@@ -1573,6 +1680,6 @@ export { HeadingAnchors }</script>
</footer>
<!-- This page `/chanterelle/` was built on 2026-05-06T18:04:11.566Z -->
<!-- This page `/chanterelle/` was built on 2026-05-14T03:43:28.006Z -->
</body>
</html>
_site/charlie-the-alpaca-handspun/index.html
+121 -10
View File
@@ -457,6 +457,90 @@ pre[class*=language-]::selection {
.tag:nth-child(odd) p {
text-align: right;
}
img[tabindex="0"]:focus-visible {
outline: .15rem solid var(--color-teal);
}
dialog {
margin: auto;
flex-flow: column;
background: transparent;
border: none;
position: absolute;
}
dialog[open] {
display: flex;
}
dialog::backdrop {
background-color: rgba(from var(--color-bg) r g b / .8);
backdrop-filter: blur(4px);
}
body:has(dialog[open]) {
overflow: hidden;
}
.close-dialog {
background-color: rgba(from var(--color-teal) r g b / .2);
font-size: 1.5rem;
padding: 0 .5rem .15rem;
border-radius: 1rem;
color: var(--color-teal);
box-shadow: .15rem .15rem var(--color-shadow);
border: .08rem solid var(--color-teal);
align-self: flex-end;
justify-self: flex-start;
margin: 0 .1rem;
/* Click animation handling */
position: relative;
top: 1rem;
left: -.15rem;
transition: top .1s ease-in, left .1s ease-in;
}
.close-dialog:focus-visible {
outline: none;
background-color: var(--color-teal);
color: var(--color-bg);
}
@media (any-hover: hover) {
.close-dialog:hover {
outline: none;
background-color: var(--color-teal);
color: var(--color-bg);
}
}
@media (forced-colors: active) {
.close-dialog:focus-visible {
outline-offset: .08rem;
outline: .08rem solid;
}
@media (any-hover: hover) {
.close-dialog:hover {
outline-offset: .08rem;
outline: .08rem solid;
}
}
}
/* Click animation */
.close-dialog:active {
top: 1.1rem;
left: -.05rem;
box-shadow: .05rem .05rem var(--color-shadow);
}
.modal-img {
max-height: calc(90vh - 2rem);
object-fit: contain;
width: auto;
margin: 0 1rem;
}
:root {
color-scheme: light dark;
@@ -637,7 +721,6 @@ span.ha-placeholder {
opacity: .55;
}
/* Lists */
::marker {
color: var(--color-pink);
@@ -1351,7 +1434,29 @@ class HeadingAnchors extends HTMLElement {
HeadingAnchors.register();
export { HeadingAnchors }</script>
export { HeadingAnchors }
/* don't even bother on mobile */
if (window.innerWidth > 650) {
const dialog = document.querySelector("dialog");
const closeButton = document.querySelector(".close-dialog");
const hero = document.querySelector(".hero");
hero.addEventListener("click", (e) => dialog.showModal());
hero.addEventListener("keydown", (e) => {
if (e.key === "Enter" || e.key === " ") {
e.preventDefault();
dialog.showModal();
}
});
closeButton.addEventListener("click", (e) => dialog.close());
closeButton.addEventListener("keydown", (e) => {
if (e.key === "Enter" || e.key === " ") {
e.preventDefault();
dialog.close();
}
});
}</script>
</head>
<body>
@@ -1411,6 +1516,8 @@ export { HeadingAnchors }</script>
<heading-anchors content="<i class='fa-solid fa-anchor'></i>">
<article>
<h1 id="charlie-the-alpaca-handspun">charlie the alpaca handspun</h1>
@@ -1435,7 +1542,11 @@ export { HeadingAnchors }</script>
</div>
<img src="/img/charlie-alpaca-handspun.jpg" alt="one large skein (and technically a smaller skein hidden behind it) of sheen-y black alpaca handspun, in about a DK weight" loading="lazy" decoding="async" width="1000" height="666">
<dialog closedby="any" aria-label="image modal" tabindex="-1">
<button class="close-dialog" autofocus="" aria-label="close the image modal">&times;</button>
<img class="modal-img" src="/img/charlie-alpaca-handspun.jpg" alt="one large skein (and technically a smaller skein hidden behind it) of sheen-y black alpaca handspun, in about a DK weight" loading="lazy" decoding="async" width="1000" height="666">
</dialog>
<img tabindex="0" class="hero" src="/img/charlie-alpaca-handspun.jpg" alt="one large skein (and technically a smaller skein hidden behind it) of sheen-y black alpaca handspun, in about a DK weight" loading="lazy" decoding="async" width="1000" height="666">
<p>Fiber from Circle R Ranch. 100% alpaca, from Charlie the alpaca.</p>
@@ -1481,29 +1592,29 @@ export { HeadingAnchors }</script>
<ol id="postlist">
<li class="post">
<a class="postlink" href="/hand-dyed-gold-handspun/">
<h2 data-ha-exclude="" id="hand-dyed-gold-handspun">hand-dyed gold handspun </h2>
<a class="postlink" href="/orion-handspun/">
<h2 data-ha-exclude="" id="orion-handspun">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">
<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>
<li class="post">
<a class="postlink" href="/fire-and-ice-handspun/">
<h2 data-ha-exclude="" id="fire-and-ice-handspun">fire &amp; ice handspun </h2>
<a class="postlink" href="/icelandic-lamb-handspun/">
<h2 data-ha-exclude="" id="icelandic-lamb-handspun">icelandic lamb handspun </h2>
<ul class="postlist-tags">
<li>yarn</li>
</ul>
<img src="/img/fire-ice-handspun.jpg" alt="2 skeins, one large and one small, of a heathered orange yarn with hints of blue in about a DK or worsted weight." loading="lazy" decoding="async" width="1000" height="666">
<img src="/img/icelandic-lamb.jpg" alt="a skein of black handspun yarn" loading="lazy" decoding="async" width="1000" height="666">
</a>
</li>
@@ -1553,6 +1664,6 @@ export { HeadingAnchors }</script>
</footer>
<!-- This page `/charlie-the-alpaca-handspun/` was built on 2026-05-06T18:04:11.561Z -->
<!-- This page `/charlie-the-alpaca-handspun/` was built on 2026-05-14T03:43:28.004Z -->
</body>
</html>
_site/circle-bag/index.html
+121 -10
View File
@@ -457,6 +457,90 @@ pre[class*=language-]::selection {
.tag:nth-child(odd) p {
text-align: right;
}
img[tabindex="0"]:focus-visible {
outline: .15rem solid var(--color-teal);
}
dialog {
margin: auto;
flex-flow: column;
background: transparent;
border: none;
position: absolute;
}
dialog[open] {
display: flex;
}
dialog::backdrop {
background-color: rgba(from var(--color-bg) r g b / .8);
backdrop-filter: blur(4px);
}
body:has(dialog[open]) {
overflow: hidden;
}
.close-dialog {
background-color: rgba(from var(--color-teal) r g b / .2);
font-size: 1.5rem;
padding: 0 .5rem .15rem;
border-radius: 1rem;
color: var(--color-teal);
box-shadow: .15rem .15rem var(--color-shadow);
border: .08rem solid var(--color-teal);
align-self: flex-end;
justify-self: flex-start;
margin: 0 .1rem;
/* Click animation handling */
position: relative;
top: 1rem;
left: -.15rem;
transition: top .1s ease-in, left .1s ease-in;
}
.close-dialog:focus-visible {
outline: none;
background-color: var(--color-teal);
color: var(--color-bg);
}
@media (any-hover: hover) {
.close-dialog:hover {
outline: none;
background-color: var(--color-teal);
color: var(--color-bg);
}
}
@media (forced-colors: active) {
.close-dialog:focus-visible {
outline-offset: .08rem;
outline: .08rem solid;
}
@media (any-hover: hover) {
.close-dialog:hover {
outline-offset: .08rem;
outline: .08rem solid;
}
}
}
/* Click animation */
.close-dialog:active {
top: 1.1rem;
left: -.05rem;
box-shadow: .05rem .05rem var(--color-shadow);
}
.modal-img {
max-height: calc(90vh - 2rem);
object-fit: contain;
width: auto;
margin: 0 1rem;
}
:root {
color-scheme: light dark;
@@ -637,7 +721,6 @@ span.ha-placeholder {
opacity: .55;
}
/* Lists */
::marker {
color: var(--color-pink);
@@ -1351,7 +1434,29 @@ class HeadingAnchors extends HTMLElement {
HeadingAnchors.register();
export { HeadingAnchors }</script>
export { HeadingAnchors }
/* don't even bother on mobile */
if (window.innerWidth > 650) {
const dialog = document.querySelector("dialog");
const closeButton = document.querySelector(".close-dialog");
const hero = document.querySelector(".hero");
hero.addEventListener("click", (e) => dialog.showModal());
hero.addEventListener("keydown", (e) => {
if (e.key === "Enter" || e.key === " ") {
e.preventDefault();
dialog.showModal();
}
});
closeButton.addEventListener("click", (e) => dialog.close());
closeButton.addEventListener("keydown", (e) => {
if (e.key === "Enter" || e.key === " ") {
e.preventDefault();
dialog.close();
}
});
}</script>
</head>
<body>
@@ -1411,6 +1516,8 @@ export { HeadingAnchors }</script>
<heading-anchors content="<i class='fa-solid fa-anchor'></i>">
<article>
<h1 id="circle-bag">circle bag</h1>
@@ -1435,7 +1542,11 @@ export { HeadingAnchors }</script>
</div>
<img src="/img/circle-bag.jpg" alt="A round bag in brown, mustard yellow, and rich deep orange, with a teal shoulder strap." loading="lazy" decoding="async" width="1000" height="750">
<dialog closedby="any" aria-label="image modal" tabindex="-1">
<button class="close-dialog" autofocus="" aria-label="close the image modal">&times;</button>
<img class="modal-img" src="/img/circle-bag.jpg" alt="A round bag in brown, mustard yellow, and rich deep orange, with a teal shoulder strap." loading="lazy" decoding="async" width="1000" height="750">
</dialog>
<img tabindex="0" class="hero" src="/img/circle-bag.jpg" alt="A round bag in brown, mustard yellow, and rich deep orange, with a teal shoulder strap." loading="lazy" decoding="async" width="1000" height="750">
<p>it's roumd</p>
@@ -1481,29 +1592,29 @@ export { HeadingAnchors }</script>
<ol id="postlist">
<li class="post">
<a class="postlink" href="/sunflower/">
<h2 data-ha-exclude="" id="sunflower">sunflower </h2>
<a class="postlink" href="/stephanie-collar/">
<h2 data-ha-exclude="" id="stephanie-collar">stephanie collar </h2>
<ul class="postlist-tags">
<li>leather</li>
</ul>
<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">
<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="/rachels-bracelets/">
<h2 data-ha-exclude="" id="rachels-bracelets">rachel&#39;s bracelets </h2>
<a class="postlink" href="/leaf-patches/">
<h2 data-ha-exclude="" id="leaf-patches">leaf patches </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/leaf-patches-oak.jpg" alt="Several oak-leaf-shaped leather patches with stitching holes punched around the edges." loading="lazy" decoding="async" width="1000" height="750">
</a>
</li>
@@ -1553,6 +1664,6 @@ export { HeadingAnchors }</script>
</footer>
<!-- This page `/circle-bag/` was built on 2026-05-06T18:04:11.576Z -->
<!-- This page `/circle-bag/` was built on 2026-05-14T03:43:28.025Z -->
</body>
</html>
_site/colophon/index.html
+1 -2
View File
@@ -211,7 +211,6 @@ span.ha-placeholder {
opacity: .55;
}
/* Lists */
::marker {
color: var(--color-pink);
@@ -1022,6 +1021,6 @@ export { HeadingAnchors }</script>
</footer>
<!-- This page `/colophon/` was built on 2026-05-06T18:04:11.579Z -->
<!-- This page `/colophon/` was built on 2026-05-14T03:43:28.028Z -->
</body>
</html>
_site/coming-out/index.html
+135 -30
View File
@@ -457,6 +457,90 @@ pre[class*=language-]::selection {
.tag:nth-child(odd) p {
text-align: right;
}
img[tabindex="0"]:focus-visible {
outline: .15rem solid var(--color-teal);
}
dialog {
margin: auto;
flex-flow: column;
background: transparent;
border: none;
position: absolute;
}
dialog[open] {
display: flex;
}
dialog::backdrop {
background-color: rgba(from var(--color-bg) r g b / .8);
backdrop-filter: blur(4px);
}
body:has(dialog[open]) {
overflow: hidden;
}
.close-dialog {
background-color: rgba(from var(--color-teal) r g b / .2);
font-size: 1.5rem;
padding: 0 .5rem .15rem;
border-radius: 1rem;
color: var(--color-teal);
box-shadow: .15rem .15rem var(--color-shadow);
border: .08rem solid var(--color-teal);
align-self: flex-end;
justify-self: flex-start;
margin: 0 .1rem;
/* Click animation handling */
position: relative;
top: 1rem;
left: -.15rem;
transition: top .1s ease-in, left .1s ease-in;
}
.close-dialog:focus-visible {
outline: none;
background-color: var(--color-teal);
color: var(--color-bg);
}
@media (any-hover: hover) {
.close-dialog:hover {
outline: none;
background-color: var(--color-teal);
color: var(--color-bg);
}
}
@media (forced-colors: active) {
.close-dialog:focus-visible {
outline-offset: .08rem;
outline: .08rem solid;
}
@media (any-hover: hover) {
.close-dialog:hover {
outline-offset: .08rem;
outline: .08rem solid;
}
}
}
/* Click animation */
.close-dialog:active {
top: 1.1rem;
left: -.05rem;
box-shadow: .05rem .05rem var(--color-shadow);
}
.modal-img {
max-height: calc(90vh - 2rem);
object-fit: contain;
width: auto;
margin: 0 1rem;
}
:root {
color-scheme: light dark;
@@ -637,7 +721,6 @@ span.ha-placeholder {
opacity: .55;
}
/* Lists */
::marker {
color: var(--color-pink);
@@ -1351,7 +1434,29 @@ class HeadingAnchors extends HTMLElement {
HeadingAnchors.register();
export { HeadingAnchors }</script>
export { HeadingAnchors }
/* don't even bother on mobile */
if (window.innerWidth > 650) {
const dialog = document.querySelector("dialog");
const closeButton = document.querySelector(".close-dialog");
const hero = document.querySelector(".hero");
hero.addEventListener("click", (e) => dialog.showModal());
hero.addEventListener("keydown", (e) => {
if (e.key === "Enter" || e.key === " ") {
e.preventDefault();
dialog.showModal();
}
});
closeButton.addEventListener("click", (e) => dialog.close());
closeButton.addEventListener("keydown", (e) => {
if (e.key === "Enter" || e.key === " ") {
e.preventDefault();
dialog.close();
}
});
}</script>
</head>
<body>
@@ -1411,6 +1516,8 @@ export { HeadingAnchors }</script>
<heading-anchors content="<i class='fa-solid fa-anchor'></i>">
<article>
<h1 id="coming-out">coming out</h1>
@@ -1445,7 +1552,11 @@ export { HeadingAnchors }</script>
</div>
<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">
<dialog closedby="any" aria-label="image modal" tabindex="-1">
<button class="close-dialog" autofocus="" aria-label="close the image modal">&times;</button>
<img class="modal-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">
</dialog>
<img tabindex="0" class="hero" 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">
<h2 id="details">details</h2>
@@ -1497,8 +1608,8 @@ export { HeadingAnchors }</script>
<ol id="postlist">
<li class="post">
<a class="postlink" href="/booby-congrats-on-the-top-surgery/">
<h2 data-ha-exclude="" id="booby-congrats-on-the-top-surgery">booby (congrats on the top surgery) </h2>
<a class="postlink" href="/trans-wrongs-skull/">
<h2 data-ha-exclude="" id="trans-wrongs-skull">trans wrongs skull </h2>
<ul class="postlist-tags">
@@ -1506,50 +1617,44 @@ export { HeadingAnchors }</script>
<li>card</li>
<li>gender</li>
</ul>
<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>
<li class="post">
<a class="postlink" href="/boypussy/">
<h2 data-ha-exclude="" id="boypussy-mature">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/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-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="/geese-trans-wrongs/">
<h2 data-ha-exclude="" id="geese-trans-wrongs">geese/trans wrongs </h2>
<a class="postlink" href="/rope-one/">
<h2 data-ha-exclude="" id="rope-one-mature">rope (one) (mature)</h2>
<ul class="postlist-tags">
<li>print</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/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="/loon/">
<h2 data-ha-exclude="" id="loon">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>
@@ -1585,6 +1690,6 @@ export { HeadingAnchors }</script>
</footer>
<!-- This page `/coming-out/` was built on 2026-05-06T18:04:11.571Z -->
<!-- This page `/coming-out/` was built on 2026-05-14T03:43:28.017Z -->
</body>
</html>
_site/comparing-text-editors/index.html
+124 -15
View File
@@ -457,6 +457,90 @@ pre[class*=language-]::selection {
.tag:nth-child(odd) p {
text-align: right;
}
img[tabindex="0"]:focus-visible {
outline: .15rem solid var(--color-teal);
}
dialog {
margin: auto;
flex-flow: column;
background: transparent;
border: none;
position: absolute;
}
dialog[open] {
display: flex;
}
dialog::backdrop {
background-color: rgba(from var(--color-bg) r g b / .8);
backdrop-filter: blur(4px);
}
body:has(dialog[open]) {
overflow: hidden;
}
.close-dialog {
background-color: rgba(from var(--color-teal) r g b / .2);
font-size: 1.5rem;
padding: 0 .5rem .15rem;
border-radius: 1rem;
color: var(--color-teal);
box-shadow: .15rem .15rem var(--color-shadow);
border: .08rem solid var(--color-teal);
align-self: flex-end;
justify-self: flex-start;
margin: 0 .1rem;
/* Click animation handling */
position: relative;
top: 1rem;
left: -.15rem;
transition: top .1s ease-in, left .1s ease-in;
}
.close-dialog:focus-visible {
outline: none;
background-color: var(--color-teal);
color: var(--color-bg);
}
@media (any-hover: hover) {
.close-dialog:hover {
outline: none;
background-color: var(--color-teal);
color: var(--color-bg);
}
}
@media (forced-colors: active) {
.close-dialog:focus-visible {
outline-offset: .08rem;
outline: .08rem solid;
}
@media (any-hover: hover) {
.close-dialog:hover {
outline-offset: .08rem;
outline: .08rem solid;
}
}
}
/* Click animation */
.close-dialog:active {
top: 1.1rem;
left: -.05rem;
box-shadow: .05rem .05rem var(--color-shadow);
}
.modal-img {
max-height: calc(90vh - 2rem);
object-fit: contain;
width: auto;
margin: 0 1rem;
}
:root {
color-scheme: light dark;
@@ -637,7 +721,6 @@ span.ha-placeholder {
opacity: .55;
}
/* Lists */
::marker {
color: var(--color-pink);
@@ -1351,7 +1434,29 @@ class HeadingAnchors extends HTMLElement {
HeadingAnchors.register();
export { HeadingAnchors }</script>
export { HeadingAnchors }
/* don't even bother on mobile */
if (window.innerWidth > 650) {
const dialog = document.querySelector("dialog");
const closeButton = document.querySelector(".close-dialog");
const hero = document.querySelector(".hero");
hero.addEventListener("click", (e) => dialog.showModal());
hero.addEventListener("keydown", (e) => {
if (e.key === "Enter" || e.key === " ") {
e.preventDefault();
dialog.showModal();
}
});
closeButton.addEventListener("click", (e) => dialog.close());
closeButton.addEventListener("keydown", (e) => {
if (e.key === "Enter" || e.key === " ") {
e.preventDefault();
dialog.close();
}
});
}</script>
</head>
<body>
@@ -1411,6 +1516,8 @@ export { HeadingAnchors }</script>
<heading-anchors content="<i class='fa-solid fa-anchor'></i>">
<article>
<h1 id="comparing-text-editors">comparing text editors</h1>
@@ -1435,7 +1542,11 @@ export { HeadingAnchors }</script>
</div>
<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">
<dialog closedby="any" aria-label="image modal" tabindex="-1">
<button class="close-dialog" autofocus="" aria-label="close the image modal">&times;</button>
<img class="modal-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">
</dialog>
<img tabindex="0" class="hero" 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">
<p>I'm fucking depressed. No, not like mental health depressed (okay, look, that too, but that's not relevant here). Looking to switch text editors, I reviewed 6 different options...and what I found didn't thrill me.</p>
@@ -1703,45 +1814,43 @@ export { HeadingAnchors }</script>
<ol id="postlist">
<li class="post">
<a class="postlink" href="/handedness-toggle/">
<h2 data-ha-exclude="" id="handedness-toggle">handedness toggle </h2>
<a class="postlink" href="/domain-and-site-setup/">
<h2 data-ha-exclude="" id="domain-and-site-setup">domain and site setup </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/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="/screen-reader-optimizations/">
<h2 data-ha-exclude="" id="screen-reader-optimizations">screen reader optimizations </h2>
<a class="postlink" href="/redirections/">
<h2 data-ha-exclude="" id="redirections">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>
<li class="post">
<a class="postlink" href="/azure-locations-and-file-crawling/">
<h2 data-ha-exclude="" id="azure-locations-and-file-crawling">azure locations and file crawling </h2>
<a class="postlink" href="/backend-accessibility/">
<h2 data-ha-exclude="" id="backend-accessibility">backend accessibility </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/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>
@@ -1777,6 +1886,6 @@ export { HeadingAnchors }</script>
</footer>
<!-- This page `/comparing-text-editors/` was built on 2026-05-06T18:04:11.560Z -->
<!-- This page `/comparing-text-editors/` was built on 2026-05-14T03:43:28.002Z -->
</body>
</html>
_site/congrats-on-the-autism-adhd/index.html
+154 -35
View File
@@ -457,6 +457,90 @@ pre[class*=language-]::selection {
.tag:nth-child(odd) p {
text-align: right;
}
img[tabindex="0"]:focus-visible {
outline: .15rem solid var(--color-teal);
}
dialog {
margin: auto;
flex-flow: column;
background: transparent;
border: none;
position: absolute;
}
dialog[open] {
display: flex;
}
dialog::backdrop {
background-color: rgba(from var(--color-bg) r g b / .8);
backdrop-filter: blur(4px);
}
body:has(dialog[open]) {
overflow: hidden;
}
.close-dialog {
background-color: rgba(from var(--color-teal) r g b / .2);
font-size: 1.5rem;
padding: 0 .5rem .15rem;
border-radius: 1rem;
color: var(--color-teal);
box-shadow: .15rem .15rem var(--color-shadow);
border: .08rem solid var(--color-teal);
align-self: flex-end;
justify-self: flex-start;
margin: 0 .1rem;
/* Click animation handling */
position: relative;
top: 1rem;
left: -.15rem;
transition: top .1s ease-in, left .1s ease-in;
}
.close-dialog:focus-visible {
outline: none;
background-color: var(--color-teal);
color: var(--color-bg);
}
@media (any-hover: hover) {
.close-dialog:hover {
outline: none;
background-color: var(--color-teal);
color: var(--color-bg);
}
}
@media (forced-colors: active) {
.close-dialog:focus-visible {
outline-offset: .08rem;
outline: .08rem solid;
}
@media (any-hover: hover) {
.close-dialog:hover {
outline-offset: .08rem;
outline: .08rem solid;
}
}
}
/* Click animation */
.close-dialog:active {
top: 1.1rem;
left: -.05rem;
box-shadow: .05rem .05rem var(--color-shadow);
}
.modal-img {
max-height: calc(90vh - 2rem);
object-fit: contain;
width: auto;
margin: 0 1rem;
}
:root {
color-scheme: light dark;
@@ -637,7 +721,6 @@ span.ha-placeholder {
opacity: .55;
}
/* Lists */
::marker {
color: var(--color-pink);
@@ -1351,7 +1434,29 @@ class HeadingAnchors extends HTMLElement {
HeadingAnchors.register();
export { HeadingAnchors }</script>
export { HeadingAnchors }
/* don't even bother on mobile */
if (window.innerWidth > 650) {
const dialog = document.querySelector("dialog");
const closeButton = document.querySelector(".close-dialog");
const hero = document.querySelector(".hero");
hero.addEventListener("click", (e) => dialog.showModal());
hero.addEventListener("keydown", (e) => {
if (e.key === "Enter" || e.key === " ") {
e.preventDefault();
dialog.showModal();
}
});
closeButton.addEventListener("click", (e) => dialog.close());
closeButton.addEventListener("keydown", (e) => {
if (e.key === "Enter" || e.key === " ") {
e.preventDefault();
dialog.close();
}
});
}</script>
</head>
<body>
@@ -1411,6 +1516,8 @@ export { HeadingAnchors }</script>
<heading-anchors content="<i class='fa-solid fa-anchor'></i>">
<article>
<h1 id="congrats-on-the-autism-adhd">congrats on the autism/adhd</h1>
@@ -1440,7 +1547,11 @@ export { HeadingAnchors }</script>
</div>
<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">
<dialog closedby="any" aria-label="image modal" tabindex="-1">
<button class="close-dialog" autofocus="" aria-label="close the image modal">&times;</button>
<img class="modal-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">
</dialog>
<img tabindex="0" class="hero" 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">
<p>Hand carved modular stamps to congratulate your friend or yourself on your fantastic neurodivergence.</p>
@@ -1494,47 +1605,55 @@ export { HeadingAnchors }</script>
<ol id="postlist">
<li class="post">
<a class="postlink" href="/stellars-jay/">
<h2 data-ha-exclude="" id="stellars-jay">stellar&#39;s jay </h2>
<a class="postlink" href="/greeting-loons/">
<h2 data-ha-exclude="" id="greeting-loons">greeting loons </h2>
<ul class="postlist-tags">
<li>print</li>
<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="/tiny-portraits/">
<h2 data-ha-exclude="" id="tiny-portraits">tiny portraits </h2>
<ul class="postlist-tags">
<li>print</li>
</ul>
<img src="/img/tiny-portrait-stamps.jpg" alt="A collage showing various small (around an inch) stamps that depict people or animals." loading="lazy" decoding="async" width="1000" height="1000">
</a>
</li>
<li class="post">
<a class="postlink" href="/girldick/">
<h2 data-ha-exclude="" id="girldick-mature">girldick (mature)</h2>
<ul class="postlist-tags">
<li>print</li>
<li>sticker</li>
<li>shirt</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">
<li>pin</li>
</a>
</li>
<li class="post">
<a class="postlink" href="/squarsh/">
<h2 data-ha-exclude="" id="squarsh">squarsh </h2>
<ul class="postlist-tags">
<li>print</li>
<li>gender</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="/fix-your-hearts/">
<h2 data-ha-exclude="" id="fix-your-hearts">fix your hearts </h2>
<ul class="postlist-tags">
<li>print</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/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>
@@ -1570,6 +1689,6 @@ export { HeadingAnchors }</script>
</footer>
<!-- This page `/congrats-on-the-autism-adhd/` was built on 2026-05-06T18:04:11.545Z -->
<!-- This page `/congrats-on-the-autism-adhd/` was built on 2026-05-14T03:43:27.981Z -->
</body>
</html>
_site/congrats-on-the-gay/index.html
+135 -30
View File
@@ -457,6 +457,90 @@ pre[class*=language-]::selection {
.tag:nth-child(odd) p {
text-align: right;
}
img[tabindex="0"]:focus-visible {
outline: .15rem solid var(--color-teal);
}
dialog {
margin: auto;
flex-flow: column;
background: transparent;
border: none;
position: absolute;
}
dialog[open] {
display: flex;
}
dialog::backdrop {
background-color: rgba(from var(--color-bg) r g b / .8);
backdrop-filter: blur(4px);
}
body:has(dialog[open]) {
overflow: hidden;
}
.close-dialog {
background-color: rgba(from var(--color-teal) r g b / .2);
font-size: 1.5rem;
padding: 0 .5rem .15rem;
border-radius: 1rem;
color: var(--color-teal);
box-shadow: .15rem .15rem var(--color-shadow);
border: .08rem solid var(--color-teal);
align-self: flex-end;
justify-self: flex-start;
margin: 0 .1rem;
/* Click animation handling */
position: relative;
top: 1rem;
left: -.15rem;
transition: top .1s ease-in, left .1s ease-in;
}
.close-dialog:focus-visible {
outline: none;
background-color: var(--color-teal);
color: var(--color-bg);
}
@media (any-hover: hover) {
.close-dialog:hover {
outline: none;
background-color: var(--color-teal);
color: var(--color-bg);
}
}
@media (forced-colors: active) {
.close-dialog:focus-visible {
outline-offset: .08rem;
outline: .08rem solid;
}
@media (any-hover: hover) {
.close-dialog:hover {
outline-offset: .08rem;
outline: .08rem solid;
}
}
}
/* Click animation */
.close-dialog:active {
top: 1.1rem;
left: -.05rem;
box-shadow: .05rem .05rem var(--color-shadow);
}
.modal-img {
max-height: calc(90vh - 2rem);
object-fit: contain;
width: auto;
margin: 0 1rem;
}
:root {
color-scheme: light dark;
@@ -637,7 +721,6 @@ span.ha-placeholder {
opacity: .55;
}
/* Lists */
::marker {
color: var(--color-pink);
@@ -1351,7 +1434,29 @@ class HeadingAnchors extends HTMLElement {
HeadingAnchors.register();
export { HeadingAnchors }</script>
export { HeadingAnchors }
/* don't even bother on mobile */
if (window.innerWidth > 650) {
const dialog = document.querySelector("dialog");
const closeButton = document.querySelector(".close-dialog");
const hero = document.querySelector(".hero");
hero.addEventListener("click", (e) => dialog.showModal());
hero.addEventListener("keydown", (e) => {
if (e.key === "Enter" || e.key === " ") {
e.preventDefault();
dialog.showModal();
}
});
closeButton.addEventListener("click", (e) => dialog.close());
closeButton.addEventListener("keydown", (e) => {
if (e.key === "Enter" || e.key === " ") {
e.preventDefault();
dialog.close();
}
});
}</script>
</head>
<body>
@@ -1411,6 +1516,8 @@ export { HeadingAnchors }</script>
<heading-anchors content="<i class='fa-solid fa-anchor'></i>">
<article>
<h1 id="congrats-on-the-gay">congrats on the gay</h1>
@@ -1445,7 +1552,11 @@ export { HeadingAnchors }</script>
</div>
<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">
<dialog closedby="any" aria-label="image modal" tabindex="-1">
<button class="close-dialog" autofocus="" aria-label="close the image modal">&times;</button>
<img class="modal-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">
</dialog>
<img tabindex="0" class="hero" 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">
<p>A variation on my <a href="congrats-ND">congrats on the autism/adhd cards</a>.</p>
@@ -1500,42 +1611,22 @@ export { HeadingAnchors }</script>
<ol id="postlist">
<li class="post">
<a class="postlink" href="/stellars-jay/">
<h2 data-ha-exclude="" id="stellars-jay">stellar&#39;s jay </h2>
<a class="postlink" href="/tiny-portraits/">
<h2 data-ha-exclude="" id="tiny-portraits">tiny portraits </h2>
<ul class="postlist-tags">
<li>print</li>
<li>card</li>
<li>shirt</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">
<img src="/img/tiny-portrait-stamps.jpg" alt="A collage showing various small (around an inch) stamps that depict people or animals." loading="lazy" decoding="async" width="1000" height="1000">
</a>
</li>
<li class="post">
<a class="postlink" href="/spotted-towhee/">
<h2 data-ha-exclude="" id="spotted-towhee">spotted towhee </h2>
<ul class="postlist-tags">
<li>print</li>
<li>card</li>
</ul>
<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="/boypussy/">
<h2 data-ha-exclude="" id="boypussy-mature">boypussy (mature)</h2>
<a class="postlink" href="/girldick/">
<h2 data-ha-exclude="" id="girldick-mature">girldick (mature)</h2>
<ul class="postlist-tags">
@@ -1550,7 +1641,21 @@ export { HeadingAnchors }</script>
<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/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>
<li class="post">
<a class="postlink" href="/networks-of-trans-care/">
<h2 data-ha-exclude="" id="networks-of-trans-care">networks of trans care </h2>
<ul class="postlist-tags">
<li>gender</li>
</ul>
<img src="/img/mushrooms-and-moss.jpg" alt="Image unrelated to post. Close up on a cluster of orange-brown mushrooms on a mossy tree trunk." loading="lazy" decoding="async" width="1000" height="750">
</a>
</li>
@@ -1586,6 +1691,6 @@ export { HeadingAnchors }</script>
</footer>
<!-- This page `/congrats-on-the-gay/` was built on 2026-05-06T18:04:11.566Z -->
<!-- This page `/congrats-on-the-gay/` was built on 2026-05-14T03:43:28.005Z -->
</body>
</html>
_site/contact/index.html
+1 -2
View File
@@ -211,7 +211,6 @@ span.ha-placeholder {
opacity: .55;
}
/* Lists */
::marker {
color: var(--color-pink);
@@ -1102,6 +1101,6 @@ export { HeadingAnchors }</script>
</footer>
<!-- This page `/contact/` was built on 2026-05-06T18:04:11.579Z -->
<!-- This page `/contact/` was built on 2026-05-14T03:43:28.028Z -->
</body>
</html>
_site/coral-reef-handspun/index.html
+124 -13
View File
@@ -457,6 +457,90 @@ pre[class*=language-]::selection {
.tag:nth-child(odd) p {
text-align: right;
}
img[tabindex="0"]:focus-visible {
outline: .15rem solid var(--color-teal);
}
dialog {
margin: auto;
flex-flow: column;
background: transparent;
border: none;
position: absolute;
}
dialog[open] {
display: flex;
}
dialog::backdrop {
background-color: rgba(from var(--color-bg) r g b / .8);
backdrop-filter: blur(4px);
}
body:has(dialog[open]) {
overflow: hidden;
}
.close-dialog {
background-color: rgba(from var(--color-teal) r g b / .2);
font-size: 1.5rem;
padding: 0 .5rem .15rem;
border-radius: 1rem;
color: var(--color-teal);
box-shadow: .15rem .15rem var(--color-shadow);
border: .08rem solid var(--color-teal);
align-self: flex-end;
justify-self: flex-start;
margin: 0 .1rem;
/* Click animation handling */
position: relative;
top: 1rem;
left: -.15rem;
transition: top .1s ease-in, left .1s ease-in;
}
.close-dialog:focus-visible {
outline: none;
background-color: var(--color-teal);
color: var(--color-bg);
}
@media (any-hover: hover) {
.close-dialog:hover {
outline: none;
background-color: var(--color-teal);
color: var(--color-bg);
}
}
@media (forced-colors: active) {
.close-dialog:focus-visible {
outline-offset: .08rem;
outline: .08rem solid;
}
@media (any-hover: hover) {
.close-dialog:hover {
outline-offset: .08rem;
outline: .08rem solid;
}
}
}
/* Click animation */
.close-dialog:active {
top: 1.1rem;
left: -.05rem;
box-shadow: .05rem .05rem var(--color-shadow);
}
.modal-img {
max-height: calc(90vh - 2rem);
object-fit: contain;
width: auto;
margin: 0 1rem;
}
:root {
color-scheme: light dark;
@@ -637,7 +721,6 @@ span.ha-placeholder {
opacity: .55;
}
/* Lists */
::marker {
color: var(--color-pink);
@@ -1351,7 +1434,29 @@ class HeadingAnchors extends HTMLElement {
HeadingAnchors.register();
export { HeadingAnchors }</script>
export { HeadingAnchors }
/* don't even bother on mobile */
if (window.innerWidth > 650) {
const dialog = document.querySelector("dialog");
const closeButton = document.querySelector(".close-dialog");
const hero = document.querySelector(".hero");
hero.addEventListener("click", (e) => dialog.showModal());
hero.addEventListener("keydown", (e) => {
if (e.key === "Enter" || e.key === " ") {
e.preventDefault();
dialog.showModal();
}
});
closeButton.addEventListener("click", (e) => dialog.close());
closeButton.addEventListener("keydown", (e) => {
if (e.key === "Enter" || e.key === " ") {
e.preventDefault();
dialog.close();
}
});
}</script>
</head>
<body>
@@ -1411,6 +1516,8 @@ export { HeadingAnchors }</script>
<heading-anchors content="<i class='fa-solid fa-anchor'></i>">
<article>
<h1 id="coral-reef-handspun">coral reef handspun</h1>
@@ -1435,7 +1542,11 @@ export { HeadingAnchors }</script>
</div>
<img src="/img/coral-reef-handspun.jpg" alt="2 skeins, one large and one small, of a heathered grey yarn with hints of blue and orange in about a sport or DK weight." loading="lazy" decoding="async" width="1000" height="666">
<dialog closedby="any" aria-label="image modal" tabindex="-1">
<button class="close-dialog" autofocus="" aria-label="close the image modal">&times;</button>
<img class="modal-img" src="/img/coral-reef-handspun.jpg" alt="2 skeins, one large and one small, of a heathered grey yarn with hints of blue and orange in about a sport or DK weight." loading="lazy" decoding="async" width="1000" height="666">
</dialog>
<img tabindex="0" class="hero" src="/img/coral-reef-handspun.jpg" alt="2 skeins, one large and one small, of a heathered grey yarn with hints of blue and orange in about a sport or DK weight." loading="lazy" decoding="async" width="1000" height="666">
<p>Fiber from <a href="https://www.etsy.com/shop/JakiraFarms" target="_blank" rel="external">Jakira Farms</a> in Coral Reef colorway. 100% merino.</p>
@@ -1481,43 +1592,43 @@ export { HeadingAnchors }</script>
<ol id="postlist">
<li class="post">
<a class="postlink" href="/handcombed-jacobs-handspun/">
<h2 data-ha-exclude="" id="handcombed-jacobs-handspun">handcombed jacobs handspun </h2>
<a class="postlink" href="/fire-and-ice-handspun/">
<h2 data-ha-exclude="" id="fire-and-ice-handspun">fire &amp; ice handspun </h2>
<ul class="postlist-tags">
<li>yarn</li>
</ul>
<img src="/img/handcombed-jacobs.jpg" alt="a skein of dark grey handspun yarn" loading="lazy" decoding="async" width="1000" height="666">
<img src="/img/fire-ice-handspun.jpg" alt="2 skeins, one large and one small, of a heathered orange yarn with hints of blue in about a DK or worsted weight." loading="lazy" decoding="async" width="1000" height="666">
</a>
</li>
<li class="post">
<a class="postlink" href="/hand-dyed-gold-handspun/">
<h2 data-ha-exclude="" id="hand-dyed-gold-handspun">hand-dyed gold handspun </h2>
<a class="postlink" href="/charlie-the-alpaca-handspun/">
<h2 data-ha-exclude="" id="charlie-the-alpaca-handspun">charlie the alpaca 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">
<img src="/img/charlie-alpaca-handspun.jpg" alt="one large skein (and technically a smaller skein hidden behind it) of sheen-y black alpaca handspun, in about a DK weight" loading="lazy" decoding="async" width="1000" height="666">
</a>
</li>
<li class="post">
<a class="postlink" href="/icelandic-lamb-handspun/">
<h2 data-ha-exclude="" id="icelandic-lamb-handspun">icelandic lamb handspun </h2>
<a class="postlink" href="/petrichor-handspun/">
<h2 data-ha-exclude="" id="petrichor-handspun">petrichor 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/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>
@@ -1553,6 +1664,6 @@ export { HeadingAnchors }</script>
</footer>
<!-- This page `/coral-reef-handspun/` was built on 2026-05-06T18:04:11.560Z -->
<!-- This page `/coral-reef-handspun/` was built on 2026-05-14T03:43:28.003Z -->
</body>
</html>
_site/crow/index.html
+135 -14
View File
@@ -457,6 +457,90 @@ pre[class*=language-]::selection {
.tag:nth-child(odd) p {
text-align: right;
}
img[tabindex="0"]:focus-visible {
outline: .15rem solid var(--color-teal);
}
dialog {
margin: auto;
flex-flow: column;
background: transparent;
border: none;
position: absolute;
}
dialog[open] {
display: flex;
}
dialog::backdrop {
background-color: rgba(from var(--color-bg) r g b / .8);
backdrop-filter: blur(4px);
}
body:has(dialog[open]) {
overflow: hidden;
}
.close-dialog {
background-color: rgba(from var(--color-teal) r g b / .2);
font-size: 1.5rem;
padding: 0 .5rem .15rem;
border-radius: 1rem;
color: var(--color-teal);
box-shadow: .15rem .15rem var(--color-shadow);
border: .08rem solid var(--color-teal);
align-self: flex-end;
justify-self: flex-start;
margin: 0 .1rem;
/* Click animation handling */
position: relative;
top: 1rem;
left: -.15rem;
transition: top .1s ease-in, left .1s ease-in;
}
.close-dialog:focus-visible {
outline: none;
background-color: var(--color-teal);
color: var(--color-bg);
}
@media (any-hover: hover) {
.close-dialog:hover {
outline: none;
background-color: var(--color-teal);
color: var(--color-bg);
}
}
@media (forced-colors: active) {
.close-dialog:focus-visible {
outline-offset: .08rem;
outline: .08rem solid;
}
@media (any-hover: hover) {
.close-dialog:hover {
outline-offset: .08rem;
outline: .08rem solid;
}
}
}
/* Click animation */
.close-dialog:active {
top: 1.1rem;
left: -.05rem;
box-shadow: .05rem .05rem var(--color-shadow);
}
.modal-img {
max-height: calc(90vh - 2rem);
object-fit: contain;
width: auto;
margin: 0 1rem;
}
:root {
color-scheme: light dark;
@@ -637,7 +721,6 @@ span.ha-placeholder {
opacity: .55;
}
/* Lists */
::marker {
color: var(--color-pink);
@@ -1351,7 +1434,29 @@ class HeadingAnchors extends HTMLElement {
HeadingAnchors.register();
export { HeadingAnchors }</script>
export { HeadingAnchors }
/* don't even bother on mobile */
if (window.innerWidth > 650) {
const dialog = document.querySelector("dialog");
const closeButton = document.querySelector(".close-dialog");
const hero = document.querySelector(".hero");
hero.addEventListener("click", (e) => dialog.showModal());
hero.addEventListener("keydown", (e) => {
if (e.key === "Enter" || e.key === " ") {
e.preventDefault();
dialog.showModal();
}
});
closeButton.addEventListener("click", (e) => dialog.close());
closeButton.addEventListener("keydown", (e) => {
if (e.key === "Enter" || e.key === " ") {
e.preventDefault();
dialog.close();
}
});
}</script>
</head>
<body>
@@ -1411,6 +1516,8 @@ export { HeadingAnchors }</script>
<heading-anchors content="<i class='fa-solid fa-anchor'></i>">
<article>
<h1 id="crow">crow</h1>
@@ -1435,7 +1542,11 @@ export { HeadingAnchors }</script>
</div>
<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">
<dialog closedby="any" aria-label="image modal" tabindex="-1">
<button class="close-dialog" autofocus="" aria-label="close the image modal">&times;</button>
<img class="modal-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">
</dialog>
<img tabindex="0" class="hero" 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">
@@ -1480,38 +1591,48 @@ export { HeadingAnchors }</script>
<ol id="postlist">
<li class="post">
<a class="postlink" href="/kniphofia/">
<h2 data-ha-exclude="" id="kniphofia">kniphofia </h2>
<a class="postlink" href="/big-pidge/">
<h2 data-ha-exclude="" id="big-pidge">big pidge </h2>
<ul class="postlist-tags">
<li>print</li>
<li>card</li>
<li>shirt</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/big-pidge-print.jpg" alt="A block print of a superb speciman of pigeon, inked mostly in black but with patches of green, blue, and purple to indicate iridescence." loading="lazy" decoding="async" width="1000" height="750">
</a>
</li>
<li class="post">
<a class="postlink" href="/quorbs/">
<h2 data-ha-exclude="" id="quorbs">quorbs </h2>
<a class="postlink" href="/girldick/">
<h2 data-ha-exclude="" id="girldick-mature">girldick (mature)</h2>
<ul class="postlist-tags">
<li>print</li>
<li>highlight</li>
<li>sticker</li>
<li>shirt</li>
<li>pin</li>
<li>gender</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/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>
<li class="post">
<a class="postlink" href="/iris/">
<h2 data-ha-exclude="" id="iris">iris </h2>
<a class="postlink" href="/chanterelle/">
<h2 data-ha-exclude="" id="chanterelle">chanterelle </h2>
<ul class="postlist-tags">
@@ -1520,7 +1641,7 @@ export { HeadingAnchors }</script>
<li>card</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/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>
@@ -1556,6 +1677,6 @@ export { HeadingAnchors }</script>
</footer>
<!-- This page `/crow/` was built on 2026-05-06T18:04:11.565Z -->
<!-- This page `/crow/` was built on 2026-05-14T03:43:28.005Z -->
</body>
</html>
_site/designing-a-bag/index.html
+135 -26
View File
@@ -457,6 +457,90 @@ pre[class*=language-]::selection {
.tag:nth-child(odd) p {
text-align: right;
}
img[tabindex="0"]:focus-visible {
outline: .15rem solid var(--color-teal);
}
dialog {
margin: auto;
flex-flow: column;
background: transparent;
border: none;
position: absolute;
}
dialog[open] {
display: flex;
}
dialog::backdrop {
background-color: rgba(from var(--color-bg) r g b / .8);
backdrop-filter: blur(4px);
}
body:has(dialog[open]) {
overflow: hidden;
}
.close-dialog {
background-color: rgba(from var(--color-teal) r g b / .2);
font-size: 1.5rem;
padding: 0 .5rem .15rem;
border-radius: 1rem;
color: var(--color-teal);
box-shadow: .15rem .15rem var(--color-shadow);
border: .08rem solid var(--color-teal);
align-self: flex-end;
justify-self: flex-start;
margin: 0 .1rem;
/* Click animation handling */
position: relative;
top: 1rem;
left: -.15rem;
transition: top .1s ease-in, left .1s ease-in;
}
.close-dialog:focus-visible {
outline: none;
background-color: var(--color-teal);
color: var(--color-bg);
}
@media (any-hover: hover) {
.close-dialog:hover {
outline: none;
background-color: var(--color-teal);
color: var(--color-bg);
}
}
@media (forced-colors: active) {
.close-dialog:focus-visible {
outline-offset: .08rem;
outline: .08rem solid;
}
@media (any-hover: hover) {
.close-dialog:hover {
outline-offset: .08rem;
outline: .08rem solid;
}
}
}
/* Click animation */
.close-dialog:active {
top: 1.1rem;
left: -.05rem;
box-shadow: .05rem .05rem var(--color-shadow);
}
.modal-img {
max-height: calc(90vh - 2rem);
object-fit: contain;
width: auto;
margin: 0 1rem;
}
:root {
color-scheme: light dark;
@@ -637,7 +721,6 @@ span.ha-placeholder {
opacity: .55;
}
/* Lists */
::marker {
color: var(--color-pink);
@@ -1351,7 +1434,29 @@ class HeadingAnchors extends HTMLElement {
HeadingAnchors.register();
export { HeadingAnchors }</script>
export { HeadingAnchors }
/* don't even bother on mobile */
if (window.innerWidth > 650) {
const dialog = document.querySelector("dialog");
const closeButton = document.querySelector(".close-dialog");
const hero = document.querySelector(".hero");
hero.addEventListener("click", (e) => dialog.showModal());
hero.addEventListener("keydown", (e) => {
if (e.key === "Enter" || e.key === " ") {
e.preventDefault();
dialog.showModal();
}
});
closeButton.addEventListener("click", (e) => dialog.close());
closeButton.addEventListener("keydown", (e) => {
if (e.key === "Enter" || e.key === " ") {
e.preventDefault();
dialog.close();
}
});
}</script>
</head>
<body>
@@ -1411,6 +1516,8 @@ export { HeadingAnchors }</script>
<heading-anchors content="<i class='fa-solid fa-anchor'></i>">
<article>
<h1 id="designing-a-bag">designing a bag</h1>
@@ -1440,7 +1547,11 @@ export { HeadingAnchors }</script>
</div>
<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">
<dialog closedby="any" aria-label="image modal" tabindex="-1">
<button class="close-dialog" autofocus="" aria-label="close the image modal">&times;</button>
<img class="modal-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">
</dialog>
<img tabindex="0" class="hero" 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">
<h2 id="begin-by-testing">begin by testing</h2>
@@ -1497,45 +1608,43 @@ export { HeadingAnchors }</script>
<ol id="postlist">
<li class="post">
<a class="postlink" href="/leather-keychains/">
<h2 data-ha-exclude="" id="leather-keychains">leather keychains </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">
</a>
</li>
<li class="post">
<a class="postlink" href="/redirections/">
<h2 data-ha-exclude="" id="redirections">redirections </h2>
<a class="postlink" href="/accessible-image-modals/">
<h2 data-ha-exclude="" id="accessible-image-modals">accessible image modals </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">
<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="/leather-long-stitch-journals/">
<h2 data-ha-exclude="" id="leather-long-stitch-journals">leather long-stitch journals </h2>
<a class="postlink" href="/eleventy-lessons/">
<h2 data-ha-exclude="" id="eleventy-lessons">eleventy lessons </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">
</a>
</li>
<li class="post">
<a class="postlink" href="/leaf-patches/">
<h2 data-ha-exclude="" id="leaf-patches">leaf patches </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/leaf-patches-oak.jpg" alt="Several oak-leaf-shaped leather patches with stitching holes punched around the edges." loading="lazy" decoding="async" width="1000" height="750">
</a>
</li>
@@ -1571,6 +1680,6 @@ export { HeadingAnchors }</script>
</footer>
<!-- This page `/designing-a-bag/` was built on 2026-05-06T18:04:11.551Z -->
<!-- This page `/designing-a-bag/` was built on 2026-05-14T03:43:27.999Z -->
</body>
</html>
_site/domain-and-site-setup/index.html
+132 -21
View File
@@ -457,6 +457,90 @@ pre[class*=language-]::selection {
.tag:nth-child(odd) p {
text-align: right;
}
img[tabindex="0"]:focus-visible {
outline: .15rem solid var(--color-teal);
}
dialog {
margin: auto;
flex-flow: column;
background: transparent;
border: none;
position: absolute;
}
dialog[open] {
display: flex;
}
dialog::backdrop {
background-color: rgba(from var(--color-bg) r g b / .8);
backdrop-filter: blur(4px);
}
body:has(dialog[open]) {
overflow: hidden;
}
.close-dialog {
background-color: rgba(from var(--color-teal) r g b / .2);
font-size: 1.5rem;
padding: 0 .5rem .15rem;
border-radius: 1rem;
color: var(--color-teal);
box-shadow: .15rem .15rem var(--color-shadow);
border: .08rem solid var(--color-teal);
align-self: flex-end;
justify-self: flex-start;
margin: 0 .1rem;
/* Click animation handling */
position: relative;
top: 1rem;
left: -.15rem;
transition: top .1s ease-in, left .1s ease-in;
}
.close-dialog:focus-visible {
outline: none;
background-color: var(--color-teal);
color: var(--color-bg);
}
@media (any-hover: hover) {
.close-dialog:hover {
outline: none;
background-color: var(--color-teal);
color: var(--color-bg);
}
}
@media (forced-colors: active) {
.close-dialog:focus-visible {
outline-offset: .08rem;
outline: .08rem solid;
}
@media (any-hover: hover) {
.close-dialog:hover {
outline-offset: .08rem;
outline: .08rem solid;
}
}
}
/* Click animation */
.close-dialog:active {
top: 1.1rem;
left: -.05rem;
box-shadow: .05rem .05rem var(--color-shadow);
}
.modal-img {
max-height: calc(90vh - 2rem);
object-fit: contain;
width: auto;
margin: 0 1rem;
}
:root {
color-scheme: light dark;
@@ -637,7 +721,6 @@ span.ha-placeholder {
opacity: .55;
}
/* Lists */
::marker {
color: var(--color-pink);
@@ -1351,7 +1434,29 @@ class HeadingAnchors extends HTMLElement {
HeadingAnchors.register();
export { HeadingAnchors }</script>
export { HeadingAnchors }
/* don't even bother on mobile */
if (window.innerWidth > 650) {
const dialog = document.querySelector("dialog");
const closeButton = document.querySelector(".close-dialog");
const hero = document.querySelector(".hero");
hero.addEventListener("click", (e) => dialog.showModal());
hero.addEventListener("keydown", (e) => {
if (e.key === "Enter" || e.key === " ") {
e.preventDefault();
dialog.showModal();
}
});
closeButton.addEventListener("click", (e) => dialog.close());
closeButton.addEventListener("keydown", (e) => {
if (e.key === "Enter" || e.key === " ") {
e.preventDefault();
dialog.close();
}
});
}</script>
</head>
<body>
@@ -1411,6 +1516,8 @@ export { HeadingAnchors }</script>
<heading-anchors content="<i class='fa-solid fa-anchor'></i>">
<article>
<h1 id="domain-and-site-setup">domain and site setup</h1>
@@ -1435,7 +1542,11 @@ export { HeadingAnchors }</script>
</div>
<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">
<dialog closedby="any" aria-label="image modal" tabindex="-1">
<button class="close-dialog" autofocus="" aria-label="close the image modal">&times;</button>
<img class="modal-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">
</dialog>
<img tabindex="0" class="hero" 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">
<p>This was written as a skill share for the Artisans Cooperative blog.</p>
@@ -1532,15 +1643,29 @@ export { HeadingAnchors }</script>
<ol id="postlist">
<li class="post">
<a class="postlink" href="/accessible-image-modals/">
<h2 data-ha-exclude="" id="accessible-image-modals">accessible image modals </h2>
<a class="postlink" href="/moving-images/">
<h2 data-ha-exclude="" id="moving-images">moving images </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/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>
<li class="post">
<a class="postlink" href="/eleventy-lessons/">
<h2 data-ha-exclude="" id="eleventy-lessons">eleventy lessons </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">
</a>
</li>
@@ -1561,20 +1686,6 @@ export { HeadingAnchors }</script>
</a>
</li>
<li class="post">
<a class="postlink" href="/moving-images/">
<h2 data-ha-exclude="" id="moving-images">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>
</ol>
</section>
@@ -1606,6 +1717,6 @@ export { HeadingAnchors }</script>
</footer>
<!-- This page `/domain-and-site-setup/` was built on 2026-05-06T18:04:11.574Z -->
<!-- This page `/domain-and-site-setup/` was built on 2026-05-14T03:43:28.023Z -->
</body>
</html>
_site/double-bill-pocket-bifold/index.html
+124 -13
View File
@@ -457,6 +457,90 @@ pre[class*=language-]::selection {
.tag:nth-child(odd) p {
text-align: right;
}
img[tabindex="0"]:focus-visible {
outline: .15rem solid var(--color-teal);
}
dialog {
margin: auto;
flex-flow: column;
background: transparent;
border: none;
position: absolute;
}
dialog[open] {
display: flex;
}
dialog::backdrop {
background-color: rgba(from var(--color-bg) r g b / .8);
backdrop-filter: blur(4px);
}
body:has(dialog[open]) {
overflow: hidden;
}
.close-dialog {
background-color: rgba(from var(--color-teal) r g b / .2);
font-size: 1.5rem;
padding: 0 .5rem .15rem;
border-radius: 1rem;
color: var(--color-teal);
box-shadow: .15rem .15rem var(--color-shadow);
border: .08rem solid var(--color-teal);
align-self: flex-end;
justify-self: flex-start;
margin: 0 .1rem;
/* Click animation handling */
position: relative;
top: 1rem;
left: -.15rem;
transition: top .1s ease-in, left .1s ease-in;
}
.close-dialog:focus-visible {
outline: none;
background-color: var(--color-teal);
color: var(--color-bg);
}
@media (any-hover: hover) {
.close-dialog:hover {
outline: none;
background-color: var(--color-teal);
color: var(--color-bg);
}
}
@media (forced-colors: active) {
.close-dialog:focus-visible {
outline-offset: .08rem;
outline: .08rem solid;
}
@media (any-hover: hover) {
.close-dialog:hover {
outline-offset: .08rem;
outline: .08rem solid;
}
}
}
/* Click animation */
.close-dialog:active {
top: 1.1rem;
left: -.05rem;
box-shadow: .05rem .05rem var(--color-shadow);
}
.modal-img {
max-height: calc(90vh - 2rem);
object-fit: contain;
width: auto;
margin: 0 1rem;
}
:root {
color-scheme: light dark;
@@ -637,7 +721,6 @@ span.ha-placeholder {
opacity: .55;
}
/* Lists */
::marker {
color: var(--color-pink);
@@ -1351,7 +1434,29 @@ class HeadingAnchors extends HTMLElement {
HeadingAnchors.register();
export { HeadingAnchors }</script>
export { HeadingAnchors }
/* don't even bother on mobile */
if (window.innerWidth > 650) {
const dialog = document.querySelector("dialog");
const closeButton = document.querySelector(".close-dialog");
const hero = document.querySelector(".hero");
hero.addEventListener("click", (e) => dialog.showModal());
hero.addEventListener("keydown", (e) => {
if (e.key === "Enter" || e.key === " ") {
e.preventDefault();
dialog.showModal();
}
});
closeButton.addEventListener("click", (e) => dialog.close());
closeButton.addEventListener("keydown", (e) => {
if (e.key === "Enter" || e.key === " ") {
e.preventDefault();
dialog.close();
}
});
}</script>
</head>
<body>
@@ -1411,6 +1516,8 @@ export { HeadingAnchors }</script>
<heading-anchors content="<i class='fa-solid fa-anchor'></i>">
<article>
<h1 id="double-bill-pocket-bifold">double bill pocket bifold</h1>
@@ -1435,7 +1542,11 @@ export { HeadingAnchors }</script>
</div>
<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">
<dialog closedby="any" aria-label="image modal" tabindex="-1">
<button class="close-dialog" autofocus="" aria-label="close the image modal">&times;</button>
<img class="modal-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">
</dialog>
<img tabindex="0" class="hero" 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">
<p>continuing to iterate on bifolds. made of a variety of discount leather with various imperfections. fully hand-stitched.</p>
@@ -1481,43 +1592,43 @@ export { HeadingAnchors }</script>
<ol id="postlist">
<li class="post">
<a class="postlink" href="/stephanie-collar/">
<h2 data-ha-exclude="" id="stephanie-collar">stephanie collar </h2>
<a class="postlink" href="/leather-chest-harness/">
<h2 data-ha-exclude="" id="leather-chest-harness">leather chest harness </h2>
<ul class="postlist-tags">
<li>leather</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/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="/brookes-suspenders/">
<h2 data-ha-exclude="" id="brookes-suspenders">brooke&#39;s suspenders </h2>
<a class="postlink" href="/rachels-bracelets/">
<h2 data-ha-exclude="" id="rachels-bracelets">rachel&#39;s bracelets </h2>
<ul class="postlist-tags">
<li>leather</li>
</ul>
<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">
<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">
</a>
</li>
<li class="post">
<a class="postlink" href="/vertical-card-wallet/">
<h2 data-ha-exclude="" id="vertical-card-wallet">vertical card wallet </h2>
<a class="postlink" href="/lobstah/">
<h2 data-ha-exclude="" id="lobstah">lobstah </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">
<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>
@@ -1553,6 +1664,6 @@ export { HeadingAnchors }</script>
</footer>
<!-- This page `/double-bill-pocket-bifold/` was built on 2026-05-06T18:04:11.573Z -->
<!-- This page `/double-bill-pocket-bifold/` was built on 2026-05-14T03:43:28.021Z -->
</body>
</html>
_site/dragon-mask/index.html
+145 -42
View File
@@ -457,6 +457,90 @@ pre[class*=language-]::selection {
.tag:nth-child(odd) p {
text-align: right;
}
img[tabindex="0"]:focus-visible {
outline: .15rem solid var(--color-teal);
}
dialog {
margin: auto;
flex-flow: column;
background: transparent;
border: none;
position: absolute;
}
dialog[open] {
display: flex;
}
dialog::backdrop {
background-color: rgba(from var(--color-bg) r g b / .8);
backdrop-filter: blur(4px);
}
body:has(dialog[open]) {
overflow: hidden;
}
.close-dialog {
background-color: rgba(from var(--color-teal) r g b / .2);
font-size: 1.5rem;
padding: 0 .5rem .15rem;
border-radius: 1rem;
color: var(--color-teal);
box-shadow: .15rem .15rem var(--color-shadow);
border: .08rem solid var(--color-teal);
align-self: flex-end;
justify-self: flex-start;
margin: 0 .1rem;
/* Click animation handling */
position: relative;
top: 1rem;
left: -.15rem;
transition: top .1s ease-in, left .1s ease-in;
}
.close-dialog:focus-visible {
outline: none;
background-color: var(--color-teal);
color: var(--color-bg);
}
@media (any-hover: hover) {
.close-dialog:hover {
outline: none;
background-color: var(--color-teal);
color: var(--color-bg);
}
}
@media (forced-colors: active) {
.close-dialog:focus-visible {
outline-offset: .08rem;
outline: .08rem solid;
}
@media (any-hover: hover) {
.close-dialog:hover {
outline-offset: .08rem;
outline: .08rem solid;
}
}
}
/* Click animation */
.close-dialog:active {
top: 1.1rem;
left: -.05rem;
box-shadow: .05rem .05rem var(--color-shadow);
}
.modal-img {
max-height: calc(90vh - 2rem);
object-fit: contain;
width: auto;
margin: 0 1rem;
}
:root {
color-scheme: light dark;
@@ -637,7 +721,6 @@ span.ha-placeholder {
opacity: .55;
}
/* Lists */
::marker {
color: var(--color-pink);
@@ -1351,7 +1434,29 @@ class HeadingAnchors extends HTMLElement {
HeadingAnchors.register();
export { HeadingAnchors }</script>
export { HeadingAnchors }
/* don't even bother on mobile */
if (window.innerWidth > 650) {
const dialog = document.querySelector("dialog");
const closeButton = document.querySelector(".close-dialog");
const hero = document.querySelector(".hero");
hero.addEventListener("click", (e) => dialog.showModal());
hero.addEventListener("keydown", (e) => {
if (e.key === "Enter" || e.key === " ") {
e.preventDefault();
dialog.showModal();
}
});
closeButton.addEventListener("click", (e) => dialog.close());
closeButton.addEventListener("keydown", (e) => {
if (e.key === "Enter" || e.key === " ") {
e.preventDefault();
dialog.close();
}
});
}</script>
</head>
<body>
@@ -1411,6 +1516,8 @@ export { HeadingAnchors }</script>
<heading-anchors content="<i class='fa-solid fa-anchor'></i>">
<article>
<h1 id="dragon-mask">dragon mask</h1>
@@ -1440,7 +1547,11 @@ export { HeadingAnchors }</script>
</div>
<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">
<dialog closedby="any" aria-label="image modal" tabindex="-1">
<button class="close-dialog" autofocus="" aria-label="close the image modal">&times;</button>
<img class="modal-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">
</dialog>
<img tabindex="0" class="hero" 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">
<p>pattern by <a href="https://www.etsy.com/listing/831499316/pdf-pattern-leather-dragon-mask" target="_blank" rel="external">PaintYee</a></p>
@@ -1486,51 +1597,43 @@ export { HeadingAnchors }</script>
<ol id="postlist">
<li class="post">
<a class="postlink" href="/kestrel-zine/">
<h2 data-ha-exclude="" id="kestrel-zine">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="/azure-locations-and-file-crawling/">
<h2 data-ha-exclude="" id="azure-locations-and-file-crawling">azure locations and file crawling </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">
</a>
</li>
<li class="post">
<a class="postlink" href="/proud-dad-wallet/">
<h2 data-ha-exclude="" id="proud-dad-wallet">proud dad wallet </h2>
<a class="postlink" href="/leather-keychains/">
<h2 data-ha-exclude="" id="leather-keychains">leather keychains </h2>
<ul class="postlist-tags">
<li>leather</li>
<li>gender</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">
</a>
</li>
<li class="post">
<a class="postlink" href="/mom-bag/">
<h2 data-ha-exclude="" id="mom-bag">mom bag </h2>
<ul class="postlist-tags">
<li>leather</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">
<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="/leaf-patches/">
<h2 data-ha-exclude="" id="leaf-patches">leaf patches </h2>
<ul class="postlist-tags">
<li>leather</li>
</ul>
<img src="/img/leaf-patches-oak.jpg" alt="Several oak-leaf-shaped leather patches with stitching holes punched around the edges." loading="lazy" decoding="async" width="1000" height="750">
</a>
</li>
@@ -1566,6 +1669,6 @@ export { HeadingAnchors }</script>
</footer>
<!-- This page `/dragon-mask/` was built on 2026-05-06T18:04:11.551Z -->
<!-- This page `/dragon-mask/` was built on 2026-05-14T03:43:27.999Z -->
</body>
</html>
_site/dyeing-fiber/index.html
+132 -21
View File
@@ -457,6 +457,90 @@ pre[class*=language-]::selection {
.tag:nth-child(odd) p {
text-align: right;
}
img[tabindex="0"]:focus-visible {
outline: .15rem solid var(--color-teal);
}
dialog {
margin: auto;
flex-flow: column;
background: transparent;
border: none;
position: absolute;
}
dialog[open] {
display: flex;
}
dialog::backdrop {
background-color: rgba(from var(--color-bg) r g b / .8);
backdrop-filter: blur(4px);
}
body:has(dialog[open]) {
overflow: hidden;
}
.close-dialog {
background-color: rgba(from var(--color-teal) r g b / .2);
font-size: 1.5rem;
padding: 0 .5rem .15rem;
border-radius: 1rem;
color: var(--color-teal);
box-shadow: .15rem .15rem var(--color-shadow);
border: .08rem solid var(--color-teal);
align-self: flex-end;
justify-self: flex-start;
margin: 0 .1rem;
/* Click animation handling */
position: relative;
top: 1rem;
left: -.15rem;
transition: top .1s ease-in, left .1s ease-in;
}
.close-dialog:focus-visible {
outline: none;
background-color: var(--color-teal);
color: var(--color-bg);
}
@media (any-hover: hover) {
.close-dialog:hover {
outline: none;
background-color: var(--color-teal);
color: var(--color-bg);
}
}
@media (forced-colors: active) {
.close-dialog:focus-visible {
outline-offset: .08rem;
outline: .08rem solid;
}
@media (any-hover: hover) {
.close-dialog:hover {
outline-offset: .08rem;
outline: .08rem solid;
}
}
}
/* Click animation */
.close-dialog:active {
top: 1.1rem;
left: -.05rem;
box-shadow: .05rem .05rem var(--color-shadow);
}
.modal-img {
max-height: calc(90vh - 2rem);
object-fit: contain;
width: auto;
margin: 0 1rem;
}
:root {
color-scheme: light dark;
@@ -637,7 +721,6 @@ span.ha-placeholder {
opacity: .55;
}
/* Lists */
::marker {
color: var(--color-pink);
@@ -1351,7 +1434,29 @@ class HeadingAnchors extends HTMLElement {
HeadingAnchors.register();
export { HeadingAnchors }</script>
export { HeadingAnchors }
/* don't even bother on mobile */
if (window.innerWidth > 650) {
const dialog = document.querySelector("dialog");
const closeButton = document.querySelector(".close-dialog");
const hero = document.querySelector(".hero");
hero.addEventListener("click", (e) => dialog.showModal());
hero.addEventListener("keydown", (e) => {
if (e.key === "Enter" || e.key === " ") {
e.preventDefault();
dialog.showModal();
}
});
closeButton.addEventListener("click", (e) => dialog.close());
closeButton.addEventListener("keydown", (e) => {
if (e.key === "Enter" || e.key === " ") {
e.preventDefault();
dialog.close();
}
});
}</script>
</head>
<body>
@@ -1411,6 +1516,8 @@ export { HeadingAnchors }</script>
<heading-anchors content="<i class='fa-solid fa-anchor'></i>">
<article>
<h1 id="dyeing-fiber">dyeing fiber</h1>
@@ -1435,7 +1542,11 @@ export { HeadingAnchors }</script>
</div>
<img src="/img/dyed-fiber.jpg" alt="4oz of yarn and a pound of wool, chunked out, drying on a drying rack outdoors. the yarn and half the wool is a mix of teals and greens; the other half of the wool is a beautiful orange-gold." loading="lazy" decoding="async" width="1000" height="1000">
<dialog closedby="any" aria-label="image modal" tabindex="-1">
<button class="close-dialog" autofocus="" aria-label="close the image modal">&times;</button>
<img class="modal-img" src="/img/dyed-fiber.jpg" alt="4oz of yarn and a pound of wool, chunked out, drying on a drying rack outdoors. the yarn and half the wool is a mix of teals and greens; the other half of the wool is a beautiful orange-gold." loading="lazy" decoding="async" width="1000" height="1000">
</dialog>
<img tabindex="0" class="hero" src="/img/dyed-fiber.jpg" alt="4oz of yarn and a pound of wool, chunked out, drying on a drying rack outdoors. the yarn and half the wool is a mix of teals and greens; the other half of the wool is a beautiful orange-gold." loading="lazy" decoding="async" width="1000" height="1000">
<p>hand-dyed with acid dyes</p>
@@ -1481,29 +1592,15 @@ export { HeadingAnchors }</script>
<ol id="postlist">
<li class="post">
<a class="postlink" href="/charlie-the-alpaca-handspun/">
<h2 data-ha-exclude="" id="charlie-the-alpaca-handspun">charlie the alpaca handspun </h2>
<a class="postlink" href="/handspun-yarn-in-party-mix-and-orange-gold/">
<h2 data-ha-exclude="" id="handspun-yarn-in-party-mix-and-orange-gold">handspun yarn in party mix and orange-gold </h2>
<ul class="postlist-tags">
<li>yarn</li>
</ul>
<img src="/img/charlie-alpaca-handspun.jpg" alt="one large skein (and technically a smaller skein hidden behind it) of sheen-y black alpaca handspun, in about a DK weight" loading="lazy" decoding="async" width="1000" height="666">
</a>
</li>
<li class="post">
<a class="postlink" href="/orion-handspun/">
<h2 data-ha-exclude="" id="orion-handspun">orion handspun </h2>
<ul class="postlist-tags">
<li>yarn</li>
</ul>
<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">
<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>
@@ -1522,6 +1619,20 @@ export { HeadingAnchors }</script>
</a>
</li>
<li class="post">
<a class="postlink" href="/charlie-the-alpaca-handspun/">
<h2 data-ha-exclude="" id="charlie-the-alpaca-handspun">charlie the alpaca handspun </h2>
<ul class="postlist-tags">
<li>yarn</li>
</ul>
<img src="/img/charlie-alpaca-handspun.jpg" alt="one large skein (and technically a smaller skein hidden behind it) of sheen-y black alpaca handspun, in about a DK weight" loading="lazy" decoding="async" width="1000" height="666">
</a>
</li>
</ol>
</section>
@@ -1553,6 +1664,6 @@ export { HeadingAnchors }</script>
</footer>
<!-- This page `/dyeing-fiber/` was built on 2026-05-06T18:04:11.561Z -->
<!-- This page `/dyeing-fiber/` was built on 2026-05-14T03:43:28.003Z -->
</body>
</html>
_site/ecommerce-options/index.html
+115 -4
View File
@@ -457,6 +457,90 @@ pre[class*=language-]::selection {
.tag:nth-child(odd) p {
text-align: right;
}
img[tabindex="0"]:focus-visible {
outline: .15rem solid var(--color-teal);
}
dialog {
margin: auto;
flex-flow: column;
background: transparent;
border: none;
position: absolute;
}
dialog[open] {
display: flex;
}
dialog::backdrop {
background-color: rgba(from var(--color-bg) r g b / .8);
backdrop-filter: blur(4px);
}
body:has(dialog[open]) {
overflow: hidden;
}
.close-dialog {
background-color: rgba(from var(--color-teal) r g b / .2);
font-size: 1.5rem;
padding: 0 .5rem .15rem;
border-radius: 1rem;
color: var(--color-teal);
box-shadow: .15rem .15rem var(--color-shadow);
border: .08rem solid var(--color-teal);
align-self: flex-end;
justify-self: flex-start;
margin: 0 .1rem;
/* Click animation handling */
position: relative;
top: 1rem;
left: -.15rem;
transition: top .1s ease-in, left .1s ease-in;
}
.close-dialog:focus-visible {
outline: none;
background-color: var(--color-teal);
color: var(--color-bg);
}
@media (any-hover: hover) {
.close-dialog:hover {
outline: none;
background-color: var(--color-teal);
color: var(--color-bg);
}
}
@media (forced-colors: active) {
.close-dialog:focus-visible {
outline-offset: .08rem;
outline: .08rem solid;
}
@media (any-hover: hover) {
.close-dialog:hover {
outline-offset: .08rem;
outline: .08rem solid;
}
}
}
/* Click animation */
.close-dialog:active {
top: 1.1rem;
left: -.05rem;
box-shadow: .05rem .05rem var(--color-shadow);
}
.modal-img {
max-height: calc(90vh - 2rem);
object-fit: contain;
width: auto;
margin: 0 1rem;
}
:root {
color-scheme: light dark;
@@ -637,7 +721,6 @@ span.ha-placeholder {
opacity: .55;
}
/* Lists */
::marker {
color: var(--color-pink);
@@ -1351,7 +1434,29 @@ class HeadingAnchors extends HTMLElement {
HeadingAnchors.register();
export { HeadingAnchors }</script>
export { HeadingAnchors }
/* don't even bother on mobile */
if (window.innerWidth > 650) {
const dialog = document.querySelector("dialog");
const closeButton = document.querySelector(".close-dialog");
const hero = document.querySelector(".hero");
hero.addEventListener("click", (e) => dialog.showModal());
hero.addEventListener("keydown", (e) => {
if (e.key === "Enter" || e.key === " ") {
e.preventDefault();
dialog.showModal();
}
});
closeButton.addEventListener("click", (e) => dialog.close());
closeButton.addEventListener("keydown", (e) => {
if (e.key === "Enter" || e.key === " ") {
e.preventDefault();
dialog.close();
}
});
}</script>
</head>
<body>
@@ -1411,6 +1516,8 @@ export { HeadingAnchors }</script>
<heading-anchors content="<i class='fa-solid fa-anchor'></i>">
<article>
<h1 id="ecommerce-options">ecommerce options</h1>
@@ -1426,7 +1533,11 @@ export { HeadingAnchors }</script>
</div>
<img src="/img/loon.jpg" alt="Image unrelated to post. A loon rearing up with eir wings spread on a calm lake." loading="lazy" decoding="async" width="1000" height="666">
<dialog closedby="any" aria-label="image modal" tabindex="-1">
<button class="close-dialog" autofocus="" aria-label="close the image modal">&times;</button>
<img class="modal-img" src="/img/loon.jpg" alt="Image unrelated to post. A loon rearing up with eir wings spread on a calm lake." loading="lazy" decoding="async" width="1000" height="666">
</dialog>
<img tabindex="0" class="hero" src="/img/loon.jpg" alt="Image unrelated to post. A loon rearing up with eir wings spread on a calm lake." loading="lazy" decoding="async" width="1000" height="666">
<h2 id="artisans-cooperative"><a href="https://artisans.coop/pages/seller-profile/riverside-refuge-studio" target="_blank" rel="external">Artisans Cooperative</a></h2>
@@ -1535,6 +1646,6 @@ export { HeadingAnchors }</script>
</footer>
<!-- This page `/ecommerce-options/` was built on 2026-05-06T18:04:11.572Z -->
<!-- This page `/ecommerce-options/` was built on 2026-05-14T03:43:28.019Z -->
</body>
</html>
_site/eight-pocket-bifold/index.html
+124 -13
View File
@@ -457,6 +457,90 @@ pre[class*=language-]::selection {
.tag:nth-child(odd) p {
text-align: right;
}
img[tabindex="0"]:focus-visible {
outline: .15rem solid var(--color-teal);
}
dialog {
margin: auto;
flex-flow: column;
background: transparent;
border: none;
position: absolute;
}
dialog[open] {
display: flex;
}
dialog::backdrop {
background-color: rgba(from var(--color-bg) r g b / .8);
backdrop-filter: blur(4px);
}
body:has(dialog[open]) {
overflow: hidden;
}
.close-dialog {
background-color: rgba(from var(--color-teal) r g b / .2);
font-size: 1.5rem;
padding: 0 .5rem .15rem;
border-radius: 1rem;
color: var(--color-teal);
box-shadow: .15rem .15rem var(--color-shadow);
border: .08rem solid var(--color-teal);
align-self: flex-end;
justify-self: flex-start;
margin: 0 .1rem;
/* Click animation handling */
position: relative;
top: 1rem;
left: -.15rem;
transition: top .1s ease-in, left .1s ease-in;
}
.close-dialog:focus-visible {
outline: none;
background-color: var(--color-teal);
color: var(--color-bg);
}
@media (any-hover: hover) {
.close-dialog:hover {
outline: none;
background-color: var(--color-teal);
color: var(--color-bg);
}
}
@media (forced-colors: active) {
.close-dialog:focus-visible {
outline-offset: .08rem;
outline: .08rem solid;
}
@media (any-hover: hover) {
.close-dialog:hover {
outline-offset: .08rem;
outline: .08rem solid;
}
}
}
/* Click animation */
.close-dialog:active {
top: 1.1rem;
left: -.05rem;
box-shadow: .05rem .05rem var(--color-shadow);
}
.modal-img {
max-height: calc(90vh - 2rem);
object-fit: contain;
width: auto;
margin: 0 1rem;
}
:root {
color-scheme: light dark;
@@ -637,7 +721,6 @@ span.ha-placeholder {
opacity: .55;
}
/* Lists */
::marker {
color: var(--color-pink);
@@ -1351,7 +1434,29 @@ class HeadingAnchors extends HTMLElement {
HeadingAnchors.register();
export { HeadingAnchors }</script>
export { HeadingAnchors }
/* don't even bother on mobile */
if (window.innerWidth > 650) {
const dialog = document.querySelector("dialog");
const closeButton = document.querySelector(".close-dialog");
const hero = document.querySelector(".hero");
hero.addEventListener("click", (e) => dialog.showModal());
hero.addEventListener("keydown", (e) => {
if (e.key === "Enter" || e.key === " ") {
e.preventDefault();
dialog.showModal();
}
});
closeButton.addEventListener("click", (e) => dialog.close());
closeButton.addEventListener("keydown", (e) => {
if (e.key === "Enter" || e.key === " ") {
e.preventDefault();
dialog.close();
}
});
}</script>
</head>
<body>
@@ -1411,6 +1516,8 @@ export { HeadingAnchors }</script>
<heading-anchors content="<i class='fa-solid fa-anchor'></i>">
<article>
<h1 id="eight-pocket-bifold">eight pocket bifold</h1>
@@ -1435,7 +1542,11 @@ export { HeadingAnchors }</script>
</div>
<img src="/img/eight-pocket-bifold.jpg" alt="A 3-picture collage showing a hand stitched full grain leather bifold wallet in dark plum leather. It has a main bill pocket and a asymmetrical interior with a hidden pocket and 3 card pockets on the right, and a hidden pocket and 2 card pockets on the left. The left front pocket has a small naturally occuring hole." loading="lazy" decoding="async" width="1000" height="1777">
<dialog closedby="any" aria-label="image modal" tabindex="-1">
<button class="close-dialog" autofocus="" aria-label="close the image modal">&times;</button>
<img class="modal-img" src="/img/eight-pocket-bifold.jpg" alt="A 3-picture collage showing a hand stitched full grain leather bifold wallet in dark plum leather. It has a main bill pocket and a asymmetrical interior with a hidden pocket and 3 card pockets on the right, and a hidden pocket and 2 card pockets on the left. The left front pocket has a small naturally occuring hole." loading="lazy" decoding="async" width="1000" height="1777">
</dialog>
<img tabindex="0" class="hero" src="/img/eight-pocket-bifold.jpg" alt="A 3-picture collage showing a hand stitched full grain leather bifold wallet in dark plum leather. It has a main bill pocket and a asymmetrical interior with a hidden pocket and 3 card pockets on the right, and a hidden pocket and 2 card pockets on the left. The left front pocket has a small naturally occuring hole." loading="lazy" decoding="async" width="1000" height="1777">
<p>a slight change to the first wallet design. made of a variety of discount leather with various imperfections. fully hand-stitched.</p>
@@ -1481,43 +1592,43 @@ export { HeadingAnchors }</script>
<ol id="postlist">
<li class="post">
<a class="postlink" href="/brookes-collar/">
<h2 data-ha-exclude="" id="brookes-collar">brooke&#39;s collar </h2>
<a class="postlink" href="/rachels-bracelets/">
<h2 data-ha-exclude="" id="rachels-bracelets">rachel&#39;s bracelets </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/rachel-bracelets.jpg" alt="Two pink leather bracelets with stainless steel hardware and aqua stitching." loading="lazy" decoding="async" width="1000" height="750">
</a>
</li>
<li class="post">
<a class="postlink" href="/brookes-suspenders/">
<h2 data-ha-exclude="" id="brookes-suspenders">brooke&#39;s suspenders </h2>
<a class="postlink" href="/patchwork-wallet/">
<h2 data-ha-exclude="" id="patchwork-wallet">patchwork wallet </h2>
<ul class="postlist-tags">
<li>leather</li>
</ul>
<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">
<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="/snap-pouch/">
<h2 data-ha-exclude="" id="snap-pouch">snap pouch </h2>
<a class="postlink" href="/foldy-wallet/">
<h2 data-ha-exclude="" id="foldy-wallet">foldy wallet </h2>
<ul class="postlist-tags">
<li>leather</li>
</ul>
<img src="/img/snap-pouches.jpg" alt="4 square pouches that close with snaps. 2 have loops that attach keyrings. They are in various colors of leather." loading="lazy" decoding="async" width="900" height="1200">
<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">
</a>
</li>
@@ -1553,6 +1664,6 @@ export { HeadingAnchors }</script>
</footer>
<!-- This page `/eight-pocket-bifold/` was built on 2026-05-06T18:04:11.573Z -->
<!-- This page `/eight-pocket-bifold/` was built on 2026-05-14T03:43:28.021Z -->
</body>
</html>
_site/eleventy-lessons/index.html
+127 -14
View File
@@ -457,6 +457,90 @@ pre[class*=language-]::selection {
.tag:nth-child(odd) p {
text-align: right;
}
img[tabindex="0"]:focus-visible {
outline: .15rem solid var(--color-teal);
}
dialog {
margin: auto;
flex-flow: column;
background: transparent;
border: none;
position: absolute;
}
dialog[open] {
display: flex;
}
dialog::backdrop {
background-color: rgba(from var(--color-bg) r g b / .8);
backdrop-filter: blur(4px);
}
body:has(dialog[open]) {
overflow: hidden;
}
.close-dialog {
background-color: rgba(from var(--color-teal) r g b / .2);
font-size: 1.5rem;
padding: 0 .5rem .15rem;
border-radius: 1rem;
color: var(--color-teal);
box-shadow: .15rem .15rem var(--color-shadow);
border: .08rem solid var(--color-teal);
align-self: flex-end;
justify-self: flex-start;
margin: 0 .1rem;
/* Click animation handling */
position: relative;
top: 1rem;
left: -.15rem;
transition: top .1s ease-in, left .1s ease-in;
}
.close-dialog:focus-visible {
outline: none;
background-color: var(--color-teal);
color: var(--color-bg);
}
@media (any-hover: hover) {
.close-dialog:hover {
outline: none;
background-color: var(--color-teal);
color: var(--color-bg);
}
}
@media (forced-colors: active) {
.close-dialog:focus-visible {
outline-offset: .08rem;
outline: .08rem solid;
}
@media (any-hover: hover) {
.close-dialog:hover {
outline-offset: .08rem;
outline: .08rem solid;
}
}
}
/* Click animation */
.close-dialog:active {
top: 1.1rem;
left: -.05rem;
box-shadow: .05rem .05rem var(--color-shadow);
}
.modal-img {
max-height: calc(90vh - 2rem);
object-fit: contain;
width: auto;
margin: 0 1rem;
}
:root {
color-scheme: light dark;
@@ -637,7 +721,6 @@ span.ha-placeholder {
opacity: .55;
}
/* Lists */
::marker {
color: var(--color-pink);
@@ -1351,7 +1434,29 @@ class HeadingAnchors extends HTMLElement {
HeadingAnchors.register();
export { HeadingAnchors }</script>
export { HeadingAnchors }
/* don't even bother on mobile */
if (window.innerWidth > 650) {
const dialog = document.querySelector("dialog");
const closeButton = document.querySelector(".close-dialog");
const hero = document.querySelector(".hero");
hero.addEventListener("click", (e) => dialog.showModal());
hero.addEventListener("keydown", (e) => {
if (e.key === "Enter" || e.key === " ") {
e.preventDefault();
dialog.showModal();
}
});
closeButton.addEventListener("click", (e) => dialog.close());
closeButton.addEventListener("keydown", (e) => {
if (e.key === "Enter" || e.key === " ") {
e.preventDefault();
dialog.close();
}
});
}</script>
</head>
<body>
@@ -1411,6 +1516,8 @@ export { HeadingAnchors }</script>
<heading-anchors content="<i class='fa-solid fa-anchor'></i>">
<article>
<h1 id="eleventy-lessons">eleventy lessons</h1>
@@ -1435,7 +1542,11 @@ export { HeadingAnchors }</script>
</div>
<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">
<dialog closedby="any" aria-label="image modal" tabindex="-1">
<button class="close-dialog" autofocus="" aria-label="close the image modal">&times;</button>
<img class="modal-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">
</dialog>
<img tabindex="0" class="hero" 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">
<p>recently I wrote <em>several</em> sites using <a href="https://www.11ty.dev/" target="_blank" rel="external">Eleventy</a> (4? 5?). Including, over the past few days, rewriting this one! That's right, if you're reading this, we're now running on 11ty and hosted by <a href="https://heckin.technology/" target="_blank" rel="external">heckin.technology</a>. See ya, GitHub. Won't miss ya.</p>
@@ -1772,45 +1883,47 @@ eleventyExcludeFromCollections: true
<ol id="postlist">
<li class="post">
<a class="postlink" href="/domain-and-site-setup/">
<h2 data-ha-exclude="" id="domain-and-site-setup">domain and site setup </h2>
<a class="postlink" href="/my-favorite-git-flag/">
<h2 data-ha-exclude="" id="my-favorite-git-flag">my favorite git flag </h2>
<ul class="postlist-tags">
<li>software</li>
</ul>
<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">
<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="/comparing-text-editors/">
<h2 data-ha-exclude="" id="comparing-text-editors">comparing text editors </h2>
<a class="postlink" href="/handedness-toggle/">
<h2 data-ha-exclude="" id="handedness-toggle">handedness toggle </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/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="/designing-a-bag/">
<h2 data-ha-exclude="" id="designing-a-bag">designing a bag </h2>
<a class="postlink" href="/gender-in-data-models/">
<h2 data-ha-exclude="" id="gender-in-data-models">gender in data models </h2>
<ul class="postlist-tags">
<li>leather</li>
<li>gender</li>
<li>software</li>
<li>highlight</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">
<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>
@@ -1846,6 +1959,6 @@ eleventyExcludeFromCollections: true
</footer>
<!-- This page `/eleventy-lessons/` was built on 2026-05-06T18:04:11.565Z -->
<!-- This page `/eleventy-lessons/` was built on 2026-05-14T03:43:28.005Z -->
</body>
</html>
_site/euphorbia/index.html
+143 -24
View File
@@ -457,6 +457,90 @@ pre[class*=language-]::selection {
.tag:nth-child(odd) p {
text-align: right;
}
img[tabindex="0"]:focus-visible {
outline: .15rem solid var(--color-teal);
}
dialog {
margin: auto;
flex-flow: column;
background: transparent;
border: none;
position: absolute;
}
dialog[open] {
display: flex;
}
dialog::backdrop {
background-color: rgba(from var(--color-bg) r g b / .8);
backdrop-filter: blur(4px);
}
body:has(dialog[open]) {
overflow: hidden;
}
.close-dialog {
background-color: rgba(from var(--color-teal) r g b / .2);
font-size: 1.5rem;
padding: 0 .5rem .15rem;
border-radius: 1rem;
color: var(--color-teal);
box-shadow: .15rem .15rem var(--color-shadow);
border: .08rem solid var(--color-teal);
align-self: flex-end;
justify-self: flex-start;
margin: 0 .1rem;
/* Click animation handling */
position: relative;
top: 1rem;
left: -.15rem;
transition: top .1s ease-in, left .1s ease-in;
}
.close-dialog:focus-visible {
outline: none;
background-color: var(--color-teal);
color: var(--color-bg);
}
@media (any-hover: hover) {
.close-dialog:hover {
outline: none;
background-color: var(--color-teal);
color: var(--color-bg);
}
}
@media (forced-colors: active) {
.close-dialog:focus-visible {
outline-offset: .08rem;
outline: .08rem solid;
}
@media (any-hover: hover) {
.close-dialog:hover {
outline-offset: .08rem;
outline: .08rem solid;
}
}
}
/* Click animation */
.close-dialog:active {
top: 1.1rem;
left: -.05rem;
box-shadow: .05rem .05rem var(--color-shadow);
}
.modal-img {
max-height: calc(90vh - 2rem);
object-fit: contain;
width: auto;
margin: 0 1rem;
}
:root {
color-scheme: light dark;
@@ -637,7 +721,6 @@ span.ha-placeholder {
opacity: .55;
}
/* Lists */
::marker {
color: var(--color-pink);
@@ -1351,7 +1434,29 @@ class HeadingAnchors extends HTMLElement {
HeadingAnchors.register();
export { HeadingAnchors }</script>
export { HeadingAnchors }
/* don't even bother on mobile */
if (window.innerWidth > 650) {
const dialog = document.querySelector("dialog");
const closeButton = document.querySelector(".close-dialog");
const hero = document.querySelector(".hero");
hero.addEventListener("click", (e) => dialog.showModal());
hero.addEventListener("keydown", (e) => {
if (e.key === "Enter" || e.key === " ") {
e.preventDefault();
dialog.showModal();
}
});
closeButton.addEventListener("click", (e) => dialog.close());
closeButton.addEventListener("keydown", (e) => {
if (e.key === "Enter" || e.key === " ") {
e.preventDefault();
dialog.close();
}
});
}</script>
</head>
<body>
@@ -1411,6 +1516,8 @@ export { HeadingAnchors }</script>
<heading-anchors content="<i class='fa-solid fa-anchor'></i>">
<article>
<h1 id="euphorbia">euphorbia</h1>
@@ -1435,7 +1542,11 @@ export { HeadingAnchors }</script>
</div>
<img src="/img/euphorbia-print.jpg" alt="A print in black ink on brown paper. It depicts a stem of euphorbia, a plant with long, thin leaves and many clustered flowers." loading="lazy" decoding="async" width="1000" height="1333">
<dialog closedby="any" aria-label="image modal" tabindex="-1">
<button class="close-dialog" autofocus="" aria-label="close the image modal">&times;</button>
<img class="modal-img" src="/img/euphorbia-print.jpg" alt="A print in black ink on brown paper. It depicts a stem of euphorbia, a plant with long, thin leaves and many clustered flowers." loading="lazy" decoding="async" width="1000" height="1333">
</dialog>
<img tabindex="0" class="hero" src="/img/euphorbia-print.jpg" alt="A print in black ink on brown paper. It depicts a stem of euphorbia, a plant with long, thin leaves and many clustered flowers." loading="lazy" decoding="async" width="1000" height="1333">
<p>I am euphorbic.</p>
@@ -1481,36 +1592,30 @@ export { HeadingAnchors }</script>
<ol id="postlist">
<li class="post">
<a class="postlink" href="/crow/">
<h2 data-ha-exclude="" id="crow">crow </h2>
<a class="postlink" href="/trans-wrongs-skull/">
<h2 data-ha-exclude="" id="trans-wrongs-skull">trans wrongs 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/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/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="/block-printing-transfer-method/">
<h2 data-ha-exclude="" id="block-printing-transfer-method">block printing transfer method </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">
</a>
</li>
<li class="post">
<a class="postlink" href="/heron/">
<h2 data-ha-exclude="" id="heron">heron </h2>
<a class="postlink" href="/lupine/">
<h2 data-ha-exclude="" id="lupine">lupine </h2>
<ul class="postlist-tags">
@@ -1521,7 +1626,21 @@ export { HeadingAnchors }</script>
<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/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="/crow/">
<h2 data-ha-exclude="" id="crow">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>
@@ -1557,6 +1676,6 @@ export { HeadingAnchors }</script>
</footer>
<!-- This page `/euphorbia/` was built on 2026-05-06T18:04:11.558Z -->
<!-- This page `/euphorbia/` was built on 2026-05-14T03:43:27.990Z -->
</body>
</html>
_site/fat-raccoon/index.html
+145 -36
View File
@@ -457,6 +457,90 @@ pre[class*=language-]::selection {
.tag:nth-child(odd) p {
text-align: right;
}
img[tabindex="0"]:focus-visible {
outline: .15rem solid var(--color-teal);
}
dialog {
margin: auto;
flex-flow: column;
background: transparent;
border: none;
position: absolute;
}
dialog[open] {
display: flex;
}
dialog::backdrop {
background-color: rgba(from var(--color-bg) r g b / .8);
backdrop-filter: blur(4px);
}
body:has(dialog[open]) {
overflow: hidden;
}
.close-dialog {
background-color: rgba(from var(--color-teal) r g b / .2);
font-size: 1.5rem;
padding: 0 .5rem .15rem;
border-radius: 1rem;
color: var(--color-teal);
box-shadow: .15rem .15rem var(--color-shadow);
border: .08rem solid var(--color-teal);
align-self: flex-end;
justify-self: flex-start;
margin: 0 .1rem;
/* Click animation handling */
position: relative;
top: 1rem;
left: -.15rem;
transition: top .1s ease-in, left .1s ease-in;
}
.close-dialog:focus-visible {
outline: none;
background-color: var(--color-teal);
color: var(--color-bg);
}
@media (any-hover: hover) {
.close-dialog:hover {
outline: none;
background-color: var(--color-teal);
color: var(--color-bg);
}
}
@media (forced-colors: active) {
.close-dialog:focus-visible {
outline-offset: .08rem;
outline: .08rem solid;
}
@media (any-hover: hover) {
.close-dialog:hover {
outline-offset: .08rem;
outline: .08rem solid;
}
}
}
/* Click animation */
.close-dialog:active {
top: 1.1rem;
left: -.05rem;
box-shadow: .05rem .05rem var(--color-shadow);
}
.modal-img {
max-height: calc(90vh - 2rem);
object-fit: contain;
width: auto;
margin: 0 1rem;
}
:root {
color-scheme: light dark;
@@ -637,7 +721,6 @@ span.ha-placeholder {
opacity: .55;
}
/* Lists */
::marker {
color: var(--color-pink);
@@ -1351,7 +1434,29 @@ class HeadingAnchors extends HTMLElement {
HeadingAnchors.register();
export { HeadingAnchors }</script>
export { HeadingAnchors }
/* don't even bother on mobile */
if (window.innerWidth > 650) {
const dialog = document.querySelector("dialog");
const closeButton = document.querySelector(".close-dialog");
const hero = document.querySelector(".hero");
hero.addEventListener("click", (e) => dialog.showModal());
hero.addEventListener("keydown", (e) => {
if (e.key === "Enter" || e.key === " ") {
e.preventDefault();
dialog.showModal();
}
});
closeButton.addEventListener("click", (e) => dialog.close());
closeButton.addEventListener("keydown", (e) => {
if (e.key === "Enter" || e.key === " ") {
e.preventDefault();
dialog.close();
}
});
}</script>
</head>
<body>
@@ -1411,6 +1516,8 @@ export { HeadingAnchors }</script>
<heading-anchors content="<i class='fa-solid fa-anchor'></i>">
<article>
<h1 id="fat-raccoon">fat raccoon</h1>
@@ -1445,7 +1552,11 @@ export { HeadingAnchors }</script>
</div>
<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">
<dialog closedby="any" aria-label="image modal" tabindex="-1">
<button class="close-dialog" autofocus="" aria-label="close the image modal">&times;</button>
<img class="modal-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">
</dialog>
<img tabindex="0" class="hero" 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">
<p>A friendly neighborhood visitor.</p>
@@ -1497,38 +1608,6 @@ export { HeadingAnchors }</script>
<h2 data-ha-exclude="" id="related-posts">related posts</h2>
<ol id="postlist">
<li class="post">
<a class="postlink" href="/loon/">
<h2 data-ha-exclude="" id="loon">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="/lupine/">
<h2 data-ha-exclude="" id="lupine">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="/boypussy/">
<h2 data-ha-exclude="" id="boypussy-mature">boypussy (mature)</h2>
@@ -1551,6 +1630,36 @@ export { HeadingAnchors }</script>
</a>
</li>
<li class="post">
<a class="postlink" href="/quorbs/">
<h2 data-ha-exclude="" id="quorbs">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="/squarsh/">
<h2 data-ha-exclude="" id="squarsh">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>
</ol>
</section>
@@ -1582,6 +1691,6 @@ export { HeadingAnchors }</script>
</footer>
<!-- This page `/fat-raccoon/` was built on 2026-05-06T18:04:11.568Z -->
<!-- This page `/fat-raccoon/` was built on 2026-05-14T03:43:28.011Z -->
</body>
</html>
_site/fd-signifier-and-oppositional-sexism/index.html
+140 -27
View File
@@ -457,6 +457,90 @@ pre[class*=language-]::selection {
.tag:nth-child(odd) p {
text-align: right;
}
img[tabindex="0"]:focus-visible {
outline: .15rem solid var(--color-teal);
}
dialog {
margin: auto;
flex-flow: column;
background: transparent;
border: none;
position: absolute;
}
dialog[open] {
display: flex;
}
dialog::backdrop {
background-color: rgba(from var(--color-bg) r g b / .8);
backdrop-filter: blur(4px);
}
body:has(dialog[open]) {
overflow: hidden;
}
.close-dialog {
background-color: rgba(from var(--color-teal) r g b / .2);
font-size: 1.5rem;
padding: 0 .5rem .15rem;
border-radius: 1rem;
color: var(--color-teal);
box-shadow: .15rem .15rem var(--color-shadow);
border: .08rem solid var(--color-teal);
align-self: flex-end;
justify-self: flex-start;
margin: 0 .1rem;
/* Click animation handling */
position: relative;
top: 1rem;
left: -.15rem;
transition: top .1s ease-in, left .1s ease-in;
}
.close-dialog:focus-visible {
outline: none;
background-color: var(--color-teal);
color: var(--color-bg);
}
@media (any-hover: hover) {
.close-dialog:hover {
outline: none;
background-color: var(--color-teal);
color: var(--color-bg);
}
}
@media (forced-colors: active) {
.close-dialog:focus-visible {
outline-offset: .08rem;
outline: .08rem solid;
}
@media (any-hover: hover) {
.close-dialog:hover {
outline-offset: .08rem;
outline: .08rem solid;
}
}
}
/* Click animation */
.close-dialog:active {
top: 1.1rem;
left: -.05rem;
box-shadow: .05rem .05rem var(--color-shadow);
}
.modal-img {
max-height: calc(90vh - 2rem);
object-fit: contain;
width: auto;
margin: 0 1rem;
}
:root {
color-scheme: light dark;
@@ -637,7 +721,6 @@ span.ha-placeholder {
opacity: .55;
}
/* Lists */
::marker {
color: var(--color-pink);
@@ -1351,7 +1434,29 @@ class HeadingAnchors extends HTMLElement {
HeadingAnchors.register();
export { HeadingAnchors }</script>
export { HeadingAnchors }
/* don't even bother on mobile */
if (window.innerWidth > 650) {
const dialog = document.querySelector("dialog");
const closeButton = document.querySelector(".close-dialog");
const hero = document.querySelector(".hero");
hero.addEventListener("click", (e) => dialog.showModal());
hero.addEventListener("keydown", (e) => {
if (e.key === "Enter" || e.key === " ") {
e.preventDefault();
dialog.showModal();
}
});
closeButton.addEventListener("click", (e) => dialog.close());
closeButton.addEventListener("keydown", (e) => {
if (e.key === "Enter" || e.key === " ") {
e.preventDefault();
dialog.close();
}
});
}</script>
</head>
<body>
@@ -1411,6 +1516,8 @@ export { HeadingAnchors }</script>
<heading-anchors content="<i class='fa-solid fa-anchor'></i>">
<article>
<h1 id="fd-signifier-and-oppositional-sexism">fd signifier &amp; oppositional sexism</h1>
@@ -1435,7 +1542,11 @@ export { HeadingAnchors }</script>
</div>
<img src="/img/sheep.jpg" alt="Image unrelated to post. A mama sheep with two babies curled up next to her in a grassy field." loading="lazy" decoding="async" width="1000" height="450">
<dialog closedby="any" aria-label="image modal" tabindex="-1">
<button class="close-dialog" autofocus="" aria-label="close the image modal">&times;</button>
<img class="modal-img" src="/img/sheep.jpg" alt="Image unrelated to post. A mama sheep with two babies curled up next to her in a grassy field." loading="lazy" decoding="async" width="1000" height="450">
</dialog>
<img tabindex="0" class="hero" src="/img/sheep.jpg" alt="Image unrelated to post. A mama sheep with two babies curled up next to her in a grassy field." loading="lazy" decoding="async" width="1000" height="450">
<p>This is in response to an F.D Signifier video, <a href="https://www.youtube.com/watch?v=1QNjwM2a87g" target="_blank" rel="external">How to get RICH off weak men!</a> (go follow him!). It is written as a response video and the script has not been changed to fit this format.</p>
@@ -1515,55 +1626,57 @@ export { HeadingAnchors }</script>
<ol id="postlist">
<li class="post">
<a class="postlink" href="/trans-wrongs-skull/">
<h2 data-ha-exclude="" id="trans-wrongs-skull">trans wrongs skull </h2>
<a class="postlink" href="/girldick/">
<h2 data-ha-exclude="" id="girldick-mature">girldick (mature)</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/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/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>
<li class="post">
<a class="postlink" href="/queer-book-list/">
<h2 data-ha-exclude="" id="queer-book-list">queer book list </h2>
<ul class="postlist-tags">
<li>gender</li>
</ul>
<img src="/img/rainbow-books.jpg" alt="A bookshelf with a variety of books on LGBTQ+ themes, arranged roughly in rainbow order" loading="lazy" decoding="async" width="1000" height="562">
</a>
</li>
<li class="post">
<a class="postlink" href="/pronoun-patches/">
<h2 data-ha-exclude="" id="pronoun-patches">pronoun patches </h2>
<a class="postlink" href="/trans-the-world/">
<h2 data-ha-exclude="" id="trans-the-world">trans the world </h2>
<ul class="postlist-tags">
<li>print</li>
<li>patch</li>
<li>shirt</li>
<li>gender</li>
</ul>
<img src="/img/pronoun-patch.jpg" alt="Rows of the same design, a skull with a speech bubble announcing varied pronoun sets, repeat in multiple colors along a stretch of off-white fabric." loading="lazy" decoding="async" width="1000" height="562">
<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">
</a>
</li>
<li class="post">
<a class="postlink" href="/pride-dice-bags/">
<h2 data-ha-exclude="" id="pride-dice-bags">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>
@@ -1599,6 +1712,6 @@ export { HeadingAnchors }</script>
</footer>
<!-- This page `/fd-signifier-and-oppositional-sexism/` was built on 2026-05-06T18:04:11.557Z -->
<!-- This page `/fd-signifier-and-oppositional-sexism/` was built on 2026-05-14T03:43:27.989Z -->
</body>
</html>
_site/fedilearns/index.html
+115 -4
View File
@@ -457,6 +457,90 @@ pre[class*=language-]::selection {
.tag:nth-child(odd) p {
text-align: right;
}
img[tabindex="0"]:focus-visible {
outline: .15rem solid var(--color-teal);
}
dialog {
margin: auto;
flex-flow: column;
background: transparent;
border: none;
position: absolute;
}
dialog[open] {
display: flex;
}
dialog::backdrop {
background-color: rgba(from var(--color-bg) r g b / .8);
backdrop-filter: blur(4px);
}
body:has(dialog[open]) {
overflow: hidden;
}
.close-dialog {
background-color: rgba(from var(--color-teal) r g b / .2);
font-size: 1.5rem;
padding: 0 .5rem .15rem;
border-radius: 1rem;
color: var(--color-teal);
box-shadow: .15rem .15rem var(--color-shadow);
border: .08rem solid var(--color-teal);
align-self: flex-end;
justify-self: flex-start;
margin: 0 .1rem;
/* Click animation handling */
position: relative;
top: 1rem;
left: -.15rem;
transition: top .1s ease-in, left .1s ease-in;
}
.close-dialog:focus-visible {
outline: none;
background-color: var(--color-teal);
color: var(--color-bg);
}
@media (any-hover: hover) {
.close-dialog:hover {
outline: none;
background-color: var(--color-teal);
color: var(--color-bg);
}
}
@media (forced-colors: active) {
.close-dialog:focus-visible {
outline-offset: .08rem;
outline: .08rem solid;
}
@media (any-hover: hover) {
.close-dialog:hover {
outline-offset: .08rem;
outline: .08rem solid;
}
}
}
/* Click animation */
.close-dialog:active {
top: 1.1rem;
left: -.05rem;
box-shadow: .05rem .05rem var(--color-shadow);
}
.modal-img {
max-height: calc(90vh - 2rem);
object-fit: contain;
width: auto;
margin: 0 1rem;
}
:root {
color-scheme: light dark;
@@ -637,7 +721,6 @@ span.ha-placeholder {
opacity: .55;
}
/* Lists */
::marker {
color: var(--color-pink);
@@ -1351,7 +1434,29 @@ class HeadingAnchors extends HTMLElement {
HeadingAnchors.register();
export { HeadingAnchors }</script>
export { HeadingAnchors }
/* don't even bother on mobile */
if (window.innerWidth > 650) {
const dialog = document.querySelector("dialog");
const closeButton = document.querySelector(".close-dialog");
const hero = document.querySelector(".hero");
hero.addEventListener("click", (e) => dialog.showModal());
hero.addEventListener("keydown", (e) => {
if (e.key === "Enter" || e.key === " ") {
e.preventDefault();
dialog.showModal();
}
});
closeButton.addEventListener("click", (e) => dialog.close());
closeButton.addEventListener("keydown", (e) => {
if (e.key === "Enter" || e.key === " ") {
e.preventDefault();
dialog.close();
}
});
}</script>
</head>
<body>
@@ -1411,6 +1516,8 @@ export { HeadingAnchors }</script>
<heading-anchors content="<i class='fa-solid fa-anchor'></i>">
<article>
<h1 id="fedilearns">fediLearns</h1>
@@ -1426,7 +1533,11 @@ export { HeadingAnchors }</script>
</div>
<img src="/img/fedilearns.jpg" alt="the logo for fedilearns, which is a grey newspaper icon with the fediverse icon (a rainbow pentagon) superimposed." loading="lazy" decoding="async" width="512" height="472">
<dialog closedby="any" aria-label="image modal" tabindex="-1">
<button class="close-dialog" autofocus="" aria-label="close the image modal">&times;</button>
<img class="modal-img" src="/img/fedilearns.jpg" alt="the logo for fedilearns, which is a grey newspaper icon with the fediverse icon (a rainbow pentagon) superimposed." loading="lazy" decoding="async" width="512" height="472">
</dialog>
<img tabindex="0" class="hero" src="/img/fedilearns.jpg" alt="the logo for fedilearns, which is a grey newspaper icon with the fediverse icon (a rainbow pentagon) superimposed." loading="lazy" decoding="async" width="512" height="472">
<p>My new project <a href="https://fedilearns.fyi" target="_blank" rel="external">FediLearns</a> is a learning-focused classifieds page for the fediverse. Check it out!</p>
@@ -1488,6 +1599,6 @@ export { HeadingAnchors }</script>
</footer>
<!-- This page `/fedilearns/` was built on 2026-05-06T18:04:11.565Z -->
<!-- This page `/fedilearns/` was built on 2026-05-14T03:43:28.005Z -->
</body>
</html>
_site/fedizinefest-2025/index.html
+131 -20
View File
@@ -457,6 +457,90 @@ pre[class*=language-]::selection {
.tag:nth-child(odd) p {
text-align: right;
}
img[tabindex="0"]:focus-visible {
outline: .15rem solid var(--color-teal);
}
dialog {
margin: auto;
flex-flow: column;
background: transparent;
border: none;
position: absolute;
}
dialog[open] {
display: flex;
}
dialog::backdrop {
background-color: rgba(from var(--color-bg) r g b / .8);
backdrop-filter: blur(4px);
}
body:has(dialog[open]) {
overflow: hidden;
}
.close-dialog {
background-color: rgba(from var(--color-teal) r g b / .2);
font-size: 1.5rem;
padding: 0 .5rem .15rem;
border-radius: 1rem;
color: var(--color-teal);
box-shadow: .15rem .15rem var(--color-shadow);
border: .08rem solid var(--color-teal);
align-self: flex-end;
justify-self: flex-start;
margin: 0 .1rem;
/* Click animation handling */
position: relative;
top: 1rem;
left: -.15rem;
transition: top .1s ease-in, left .1s ease-in;
}
.close-dialog:focus-visible {
outline: none;
background-color: var(--color-teal);
color: var(--color-bg);
}
@media (any-hover: hover) {
.close-dialog:hover {
outline: none;
background-color: var(--color-teal);
color: var(--color-bg);
}
}
@media (forced-colors: active) {
.close-dialog:focus-visible {
outline-offset: .08rem;
outline: .08rem solid;
}
@media (any-hover: hover) {
.close-dialog:hover {
outline-offset: .08rem;
outline: .08rem solid;
}
}
}
/* Click animation */
.close-dialog:active {
top: 1.1rem;
left: -.05rem;
box-shadow: .05rem .05rem var(--color-shadow);
}
.modal-img {
max-height: calc(90vh - 2rem);
object-fit: contain;
width: auto;
margin: 0 1rem;
}
:root {
color-scheme: light dark;
@@ -637,7 +721,6 @@ span.ha-placeholder {
opacity: .55;
}
/* Lists */
::marker {
color: var(--color-pink);
@@ -1351,7 +1434,29 @@ class HeadingAnchors extends HTMLElement {
HeadingAnchors.register();
export { HeadingAnchors }</script>
export { HeadingAnchors }
/* don't even bother on mobile */
if (window.innerWidth > 650) {
const dialog = document.querySelector("dialog");
const closeButton = document.querySelector(".close-dialog");
const hero = document.querySelector(".hero");
hero.addEventListener("click", (e) => dialog.showModal());
hero.addEventListener("keydown", (e) => {
if (e.key === "Enter" || e.key === " ") {
e.preventDefault();
dialog.showModal();
}
});
closeButton.addEventListener("click", (e) => dialog.close());
closeButton.addEventListener("keydown", (e) => {
if (e.key === "Enter" || e.key === " ") {
e.preventDefault();
dialog.close();
}
});
}</script>
</head>
<body>
@@ -1411,6 +1516,8 @@ export { HeadingAnchors }</script>
<heading-anchors content="<i class='fa-solid fa-anchor'></i>">
<article>
<h1 id="fedizinefest-2025">fediZineFest 2025</h1>
@@ -1435,7 +1542,11 @@ export { HeadingAnchors }</script>
</div>
<img src="/img/fedizinefest-2025.png" alt="A logo in purple, yellow, blue, and green. A piece of paper folded into 8 sections reads FEDI ZINE; it resembles the classic folding pattern of a simple 8-page zine made from printer paper. Next to it, a fully folded zine reads fest 2025." loading="lazy" decoding="async" width="729" height="799">
<dialog closedby="any" aria-label="image modal" tabindex="-1">
<button class="close-dialog" autofocus="" aria-label="close the image modal">&times;</button>
<img class="modal-img" src="/img/fedizinefest-2025.png" alt="A logo in purple, yellow, blue, and green. A piece of paper folded into 8 sections reads FEDI ZINE; it resembles the classic folding pattern of a simple 8-page zine made from printer paper. Next to it, a fully folded zine reads fest 2025." loading="lazy" decoding="async" width="729" height="799">
</dialog>
<img tabindex="0" class="hero" src="/img/fedizinefest-2025.png" alt="A logo in purple, yellow, blue, and green. A piece of paper folded into 8 sections reads FEDI ZINE; it resembles the classic folding pattern of a simple 8-page zine made from printer paper. Next to it, a fully folded zine reads fest 2025." loading="lazy" decoding="async" width="729" height="799">
<p>FediZineFest returns for its second year. Read more about it and sign up on the <a href="https://fedizinefest.fyi" target="_blank" rel="external">fediZineFest 2025 website</a>.</p>
@@ -1480,22 +1591,6 @@ export { HeadingAnchors }</script>
<h2 data-ha-exclude="" id="related-posts">related posts</h2>
<ol id="postlist">
<li class="post">
<a class="postlink" href="/on-the-shoulders-of-giants/">
<h2 data-ha-exclude="" id="on-the-shoulders-of-giants">on the shoulders of giants </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">
</a>
</li>
<li class="post">
<a class="postlink" href="/kestrel-zine/">
<h2 data-ha-exclude="" id="kestrel-zine">kestrel zine </h2>
@@ -1514,6 +1609,22 @@ export { HeadingAnchors }</script>
</a>
</li>
<li class="post">
<a class="postlink" href="/on-the-shoulders-of-giants/">
<h2 data-ha-exclude="" id="on-the-shoulders-of-giants">on the shoulders of giants </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">
</a>
</li>
<li class="post">
<a class="postlink" href="/gender-as-a-proxy-variable/">
<h2 data-ha-exclude="" id="gender-as-a-proxy-variable">gender as a proxy variable </h2>
@@ -1561,6 +1672,6 @@ export { HeadingAnchors }</script>
</footer>
<!-- This page `/fedizinefest-2025/` was built on 2026-05-06T18:04:11.558Z -->
<!-- This page `/fedizinefest-2025/` was built on 2026-05-14T03:43:27.990Z -->
</body>
</html>
_site/fire-and-ice-handspun/index.html
+124 -13
View File
@@ -457,6 +457,90 @@ pre[class*=language-]::selection {
.tag:nth-child(odd) p {
text-align: right;
}
img[tabindex="0"]:focus-visible {
outline: .15rem solid var(--color-teal);
}
dialog {
margin: auto;
flex-flow: column;
background: transparent;
border: none;
position: absolute;
}
dialog[open] {
display: flex;
}
dialog::backdrop {
background-color: rgba(from var(--color-bg) r g b / .8);
backdrop-filter: blur(4px);
}
body:has(dialog[open]) {
overflow: hidden;
}
.close-dialog {
background-color: rgba(from var(--color-teal) r g b / .2);
font-size: 1.5rem;
padding: 0 .5rem .15rem;
border-radius: 1rem;
color: var(--color-teal);
box-shadow: .15rem .15rem var(--color-shadow);
border: .08rem solid var(--color-teal);
align-self: flex-end;
justify-self: flex-start;
margin: 0 .1rem;
/* Click animation handling */
position: relative;
top: 1rem;
left: -.15rem;
transition: top .1s ease-in, left .1s ease-in;
}
.close-dialog:focus-visible {
outline: none;
background-color: var(--color-teal);
color: var(--color-bg);
}
@media (any-hover: hover) {
.close-dialog:hover {
outline: none;
background-color: var(--color-teal);
color: var(--color-bg);
}
}
@media (forced-colors: active) {
.close-dialog:focus-visible {
outline-offset: .08rem;
outline: .08rem solid;
}
@media (any-hover: hover) {
.close-dialog:hover {
outline-offset: .08rem;
outline: .08rem solid;
}
}
}
/* Click animation */
.close-dialog:active {
top: 1.1rem;
left: -.05rem;
box-shadow: .05rem .05rem var(--color-shadow);
}
.modal-img {
max-height: calc(90vh - 2rem);
object-fit: contain;
width: auto;
margin: 0 1rem;
}
:root {
color-scheme: light dark;
@@ -637,7 +721,6 @@ span.ha-placeholder {
opacity: .55;
}
/* Lists */
::marker {
color: var(--color-pink);
@@ -1351,7 +1434,29 @@ class HeadingAnchors extends HTMLElement {
HeadingAnchors.register();
export { HeadingAnchors }</script>
export { HeadingAnchors }
/* don't even bother on mobile */
if (window.innerWidth > 650) {
const dialog = document.querySelector("dialog");
const closeButton = document.querySelector(".close-dialog");
const hero = document.querySelector(".hero");
hero.addEventListener("click", (e) => dialog.showModal());
hero.addEventListener("keydown", (e) => {
if (e.key === "Enter" || e.key === " ") {
e.preventDefault();
dialog.showModal();
}
});
closeButton.addEventListener("click", (e) => dialog.close());
closeButton.addEventListener("keydown", (e) => {
if (e.key === "Enter" || e.key === " ") {
e.preventDefault();
dialog.close();
}
});
}</script>
</head>
<body>
@@ -1411,6 +1516,8 @@ export { HeadingAnchors }</script>
<heading-anchors content="<i class='fa-solid fa-anchor'></i>">
<article>
<h1 id="fire-and-ice-handspun">fire &amp; ice handspun</h1>
@@ -1435,7 +1542,11 @@ export { HeadingAnchors }</script>
</div>
<img src="/img/fire-ice-handspun.jpg" alt="2 skeins, one large and one small, of a heathered orange yarn with hints of blue in about a DK or worsted weight." loading="lazy" decoding="async" width="1000" height="666">
<dialog closedby="any" aria-label="image modal" tabindex="-1">
<button class="close-dialog" autofocus="" aria-label="close the image modal">&times;</button>
<img class="modal-img" src="/img/fire-ice-handspun.jpg" alt="2 skeins, one large and one small, of a heathered orange yarn with hints of blue in about a DK or worsted weight." loading="lazy" decoding="async" width="1000" height="666">
</dialog>
<img tabindex="0" class="hero" src="/img/fire-ice-handspun.jpg" alt="2 skeins, one large and one small, of a heathered orange yarn with hints of blue in about a DK or worsted weight." loading="lazy" decoding="async" width="1000" height="666">
<p>Fiber from <a href="https://www.etsy.com/shop/JakiraFarms" target="_blank" rel="external">Jakira Farms</a> in Fire &amp; Ice colorway. 100% merino.</p>
@@ -1481,43 +1592,43 @@ export { HeadingAnchors }</script>
<ol id="postlist">
<li class="post">
<a class="postlink" href="/spinners-dream-handspun/">
<h2 data-ha-exclude="" id="spinners-dream-handspun">spinner&#39;s dream handspun </h2>
<a class="postlink" href="/orion-handspun/">
<h2 data-ha-exclude="" id="orion-handspun">orion handspun </h2>
<ul class="postlist-tags">
<li>yarn</li>
</ul>
<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">
<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>
<li class="post">
<a class="postlink" href="/spinning-plants/">
<h2 data-ha-exclude="" id="spinning-plants">spinning plants </h2>
<a class="postlink" href="/light-grey-jacobs-handspun/">
<h2 data-ha-exclude="" id="light-grey-jacobs-handspun">light grey jacobs handspun </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">
<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="/hand-dyed-gold-handspun/">
<h2 data-ha-exclude="" id="hand-dyed-gold-handspun">hand-dyed gold handspun </h2>
<a class="postlink" href="/handcombed-jacobs-handspun/">
<h2 data-ha-exclude="" id="handcombed-jacobs-handspun">handcombed jacobs 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">
<img src="/img/handcombed-jacobs.jpg" alt="a skein of dark grey handspun yarn" loading="lazy" decoding="async" width="1000" height="666">
</a>
</li>
@@ -1553,6 +1664,6 @@ export { HeadingAnchors }</script>
</footer>
<!-- This page `/fire-and-ice-handspun/` was built on 2026-05-06T18:04:11.561Z -->
<!-- This page `/fire-and-ice-handspun/` was built on 2026-05-14T03:43:28.003Z -->
</body>
</html>
_site/fishhook-pride-keychains/index.html
+125 -14
View File
@@ -457,6 +457,90 @@ pre[class*=language-]::selection {
.tag:nth-child(odd) p {
text-align: right;
}
img[tabindex="0"]:focus-visible {
outline: .15rem solid var(--color-teal);
}
dialog {
margin: auto;
flex-flow: column;
background: transparent;
border: none;
position: absolute;
}
dialog[open] {
display: flex;
}
dialog::backdrop {
background-color: rgba(from var(--color-bg) r g b / .8);
backdrop-filter: blur(4px);
}
body:has(dialog[open]) {
overflow: hidden;
}
.close-dialog {
background-color: rgba(from var(--color-teal) r g b / .2);
font-size: 1.5rem;
padding: 0 .5rem .15rem;
border-radius: 1rem;
color: var(--color-teal);
box-shadow: .15rem .15rem var(--color-shadow);
border: .08rem solid var(--color-teal);
align-self: flex-end;
justify-self: flex-start;
margin: 0 .1rem;
/* Click animation handling */
position: relative;
top: 1rem;
left: -.15rem;
transition: top .1s ease-in, left .1s ease-in;
}
.close-dialog:focus-visible {
outline: none;
background-color: var(--color-teal);
color: var(--color-bg);
}
@media (any-hover: hover) {
.close-dialog:hover {
outline: none;
background-color: var(--color-teal);
color: var(--color-bg);
}
}
@media (forced-colors: active) {
.close-dialog:focus-visible {
outline-offset: .08rem;
outline: .08rem solid;
}
@media (any-hover: hover) {
.close-dialog:hover {
outline-offset: .08rem;
outline: .08rem solid;
}
}
}
/* Click animation */
.close-dialog:active {
top: 1.1rem;
left: -.05rem;
box-shadow: .05rem .05rem var(--color-shadow);
}
.modal-img {
max-height: calc(90vh - 2rem);
object-fit: contain;
width: auto;
margin: 0 1rem;
}
:root {
color-scheme: light dark;
@@ -637,7 +721,6 @@ span.ha-placeholder {
opacity: .55;
}
/* Lists */
::marker {
color: var(--color-pink);
@@ -1351,7 +1434,29 @@ class HeadingAnchors extends HTMLElement {
HeadingAnchors.register();
export { HeadingAnchors }</script>
export { HeadingAnchors }
/* don't even bother on mobile */
if (window.innerWidth > 650) {
const dialog = document.querySelector("dialog");
const closeButton = document.querySelector(".close-dialog");
const hero = document.querySelector(".hero");
hero.addEventListener("click", (e) => dialog.showModal());
hero.addEventListener("keydown", (e) => {
if (e.key === "Enter" || e.key === " ") {
e.preventDefault();
dialog.showModal();
}
});
closeButton.addEventListener("click", (e) => dialog.close());
closeButton.addEventListener("keydown", (e) => {
if (e.key === "Enter" || e.key === " ") {
e.preventDefault();
dialog.close();
}
});
}</script>
</head>
<body>
@@ -1411,6 +1516,8 @@ export { HeadingAnchors }</script>
<heading-anchors content="<i class='fa-solid fa-anchor'></i>">
<article>
<h1 id="fishhook-pride-keychains">fishhook pride keychains</h1>
@@ -1440,7 +1547,11 @@ export { HeadingAnchors }</script>
</div>
<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">
<dialog closedby="any" aria-label="image modal" tabindex="-1">
<button class="close-dialog" autofocus="" aria-label="close the image modal">&times;</button>
<img class="modal-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">
</dialog>
<img tabindex="0" class="hero" 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">
<p>Available for lots of flags! Except the lesbian sunset flag because it's really hard to color match :(</p>
@@ -1486,43 +1597,43 @@ export { HeadingAnchors }</script>
<ol id="postlist">
<li class="post">
<a class="postlink" href="/patchwork-wallet/">
<h2 data-ha-exclude="" id="patchwork-wallet">patchwork wallet </h2>
<a class="postlink" href="/nine-pocket-bifold/">
<h2 data-ha-exclude="" id="nine-pocket-bifold">nine pocket bifold </h2>
<ul class="postlist-tags">
<li>leather</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/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">
</a>
</li>
<li class="post">
<a class="postlink" href="/soras-collar/">
<h2 data-ha-exclude="" id="soras-collar">sora&#39;s collar </h2>
<a class="postlink" href="/on-pronouns/">
<h2 data-ha-exclude="" id="on-pronouns">on pronouns </h2>
<ul class="postlist-tags">
<li>leather</li>
<li>gender</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/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">
</a>
</li>
<li class="post">
<a class="postlink" href="/wrap-bracelets/">
<h2 data-ha-exclude="" id="wrap-bracelets">wrap bracelets </h2>
<a class="postlink" href="/vertical-zipper-card-wallet/">
<h2 data-ha-exclude="" id="vertical-zipper-card-wallet">vertical zipper card wallet </h2>
<ul class="postlist-tags">
<li>leather</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/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>
@@ -1558,6 +1669,6 @@ export { HeadingAnchors }</script>
</footer>
<!-- This page `/fishhook-pride-keychains/` was built on 2026-05-06T18:04:11.576Z -->
<!-- This page `/fishhook-pride-keychains/` was built on 2026-05-14T03:43:28.025Z -->
</body>
</html>
_site/five-of-them/index.html
+127 -26
View File
@@ -457,6 +457,90 @@ pre[class*=language-]::selection {
.tag:nth-child(odd) p {
text-align: right;
}
img[tabindex="0"]:focus-visible {
outline: .15rem solid var(--color-teal);
}
dialog {
margin: auto;
flex-flow: column;
background: transparent;
border: none;
position: absolute;
}
dialog[open] {
display: flex;
}
dialog::backdrop {
background-color: rgba(from var(--color-bg) r g b / .8);
backdrop-filter: blur(4px);
}
body:has(dialog[open]) {
overflow: hidden;
}
.close-dialog {
background-color: rgba(from var(--color-teal) r g b / .2);
font-size: 1.5rem;
padding: 0 .5rem .15rem;
border-radius: 1rem;
color: var(--color-teal);
box-shadow: .15rem .15rem var(--color-shadow);
border: .08rem solid var(--color-teal);
align-self: flex-end;
justify-self: flex-start;
margin: 0 .1rem;
/* Click animation handling */
position: relative;
top: 1rem;
left: -.15rem;
transition: top .1s ease-in, left .1s ease-in;
}
.close-dialog:focus-visible {
outline: none;
background-color: var(--color-teal);
color: var(--color-bg);
}
@media (any-hover: hover) {
.close-dialog:hover {
outline: none;
background-color: var(--color-teal);
color: var(--color-bg);
}
}
@media (forced-colors: active) {
.close-dialog:focus-visible {
outline-offset: .08rem;
outline: .08rem solid;
}
@media (any-hover: hover) {
.close-dialog:hover {
outline-offset: .08rem;
outline: .08rem solid;
}
}
}
/* Click animation */
.close-dialog:active {
top: 1.1rem;
left: -.05rem;
box-shadow: .05rem .05rem var(--color-shadow);
}
.modal-img {
max-height: calc(90vh - 2rem);
object-fit: contain;
width: auto;
margin: 0 1rem;
}
:root {
color-scheme: light dark;
@@ -637,7 +721,6 @@ span.ha-placeholder {
opacity: .55;
}
/* Lists */
::marker {
color: var(--color-pink);
@@ -1351,7 +1434,29 @@ class HeadingAnchors extends HTMLElement {
HeadingAnchors.register();
export { HeadingAnchors }</script>
export { HeadingAnchors }
/* don't even bother on mobile */
if (window.innerWidth > 650) {
const dialog = document.querySelector("dialog");
const closeButton = document.querySelector(".close-dialog");
const hero = document.querySelector(".hero");
hero.addEventListener("click", (e) => dialog.showModal());
hero.addEventListener("keydown", (e) => {
if (e.key === "Enter" || e.key === " ") {
e.preventDefault();
dialog.showModal();
}
});
closeButton.addEventListener("click", (e) => dialog.close());
closeButton.addEventListener("keydown", (e) => {
if (e.key === "Enter" || e.key === " ") {
e.preventDefault();
dialog.close();
}
});
}</script>
</head>
<body>
@@ -1411,6 +1516,8 @@ export { HeadingAnchors }</script>
<heading-anchors content="<i class='fa-solid fa-anchor'></i>">
<article>
<h1 id="five-of-them">five of them</h1>
@@ -1440,7 +1547,11 @@ export { HeadingAnchors }</script>
</div>
<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">
<dialog closedby="any" aria-label="image modal" tabindex="-1">
<button class="close-dialog" autofocus="" aria-label="close the image modal">&times;</button>
<img class="modal-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">
</dialog>
<img tabindex="0" class="hero" 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">
<p>Photographed in the backyard.</p>
@@ -1493,57 +1604,47 @@ export { HeadingAnchors }</script>
<ol id="postlist">
<li class="post">
<a class="postlink" href="/shrimp/">
<h2 data-ha-exclude="" id="shrimp">shrimp </h2>
<a class="postlink" href="/kniphofia/">
<h2 data-ha-exclude="" id="kniphofia">kniphofia </h2>
<ul class="postlist-tags">
<li>print</li>
<li>card</li>
<li>sticker</li>
<li>pin</li>
</ul>
<img src="/img/shrimp-print.jpg" alt="A print of a small shrimp with slender little leggies in orange ink." loading="lazy" decoding="async" width="1000" height="750">
<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="/lupine/">
<h2 data-ha-exclude="" id="lupine">lupine </h2>
<a class="postlink" href="/tiny-mushrooms/">
<h2 data-ha-exclude="" id="tiny-mushrooms">tiny mushrooms </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">
<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="/coming-out/">
<h2 data-ha-exclude="" id="coming-out">coming out </h2>
<a class="postlink" href="/greeting-loons/">
<h2 data-ha-exclude="" id="greeting-loons">greeting loons </h2>
<ul class="postlist-tags">
<li>print</li>
<li>card</li>
<li>gender</li>
<li>print</li>
<li>highlight</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">
<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>
@@ -1579,6 +1680,6 @@ export { HeadingAnchors }</script>
</footer>
<!-- This page `/five-of-them/` was built on 2026-05-06T18:04:11.570Z -->
<!-- This page `/five-of-them/` was built on 2026-05-14T03:43:28.015Z -->
</body>
</html>
_site/fix-your-hearts/index.html
+136 -29
View File
@@ -457,6 +457,90 @@ pre[class*=language-]::selection {
.tag:nth-child(odd) p {
text-align: right;
}
img[tabindex="0"]:focus-visible {
outline: .15rem solid var(--color-teal);
}
dialog {
margin: auto;
flex-flow: column;
background: transparent;
border: none;
position: absolute;
}
dialog[open] {
display: flex;
}
dialog::backdrop {
background-color: rgba(from var(--color-bg) r g b / .8);
backdrop-filter: blur(4px);
}
body:has(dialog[open]) {
overflow: hidden;
}
.close-dialog {
background-color: rgba(from var(--color-teal) r g b / .2);
font-size: 1.5rem;
padding: 0 .5rem .15rem;
border-radius: 1rem;
color: var(--color-teal);
box-shadow: .15rem .15rem var(--color-shadow);
border: .08rem solid var(--color-teal);
align-self: flex-end;
justify-self: flex-start;
margin: 0 .1rem;
/* Click animation handling */
position: relative;
top: 1rem;
left: -.15rem;
transition: top .1s ease-in, left .1s ease-in;
}
.close-dialog:focus-visible {
outline: none;
background-color: var(--color-teal);
color: var(--color-bg);
}
@media (any-hover: hover) {
.close-dialog:hover {
outline: none;
background-color: var(--color-teal);
color: var(--color-bg);
}
}
@media (forced-colors: active) {
.close-dialog:focus-visible {
outline-offset: .08rem;
outline: .08rem solid;
}
@media (any-hover: hover) {
.close-dialog:hover {
outline-offset: .08rem;
outline: .08rem solid;
}
}
}
/* Click animation */
.close-dialog:active {
top: 1.1rem;
left: -.05rem;
box-shadow: .05rem .05rem var(--color-shadow);
}
.modal-img {
max-height: calc(90vh - 2rem);
object-fit: contain;
width: auto;
margin: 0 1rem;
}
:root {
color-scheme: light dark;
@@ -637,7 +721,6 @@ span.ha-placeholder {
opacity: .55;
}
/* Lists */
::marker {
color: var(--color-pink);
@@ -1351,7 +1434,29 @@ class HeadingAnchors extends HTMLElement {
HeadingAnchors.register();
export { HeadingAnchors }</script>
export { HeadingAnchors }
/* don't even bother on mobile */
if (window.innerWidth > 650) {
const dialog = document.querySelector("dialog");
const closeButton = document.querySelector(".close-dialog");
const hero = document.querySelector(".hero");
hero.addEventListener("click", (e) => dialog.showModal());
hero.addEventListener("keydown", (e) => {
if (e.key === "Enter" || e.key === " ") {
e.preventDefault();
dialog.showModal();
}
});
closeButton.addEventListener("click", (e) => dialog.close());
closeButton.addEventListener("keydown", (e) => {
if (e.key === "Enter" || e.key === " ") {
e.preventDefault();
dialog.close();
}
});
}</script>
</head>
<body>
@@ -1411,6 +1516,8 @@ export { HeadingAnchors }</script>
<heading-anchors content="<i class='fa-solid fa-anchor'></i>">
<article>
<h1 id="fix-your-hearts">fix your hearts</h1>
@@ -1435,7 +1542,11 @@ export { HeadingAnchors }</script>
</div>
<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">
<dialog closedby="any" aria-label="image modal" tabindex="-1">
<button class="close-dialog" autofocus="" aria-label="close the image modal">&times;</button>
<img class="modal-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">
</dialog>
<img tabindex="0" class="hero" 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">
@@ -1480,30 +1591,42 @@ export { HeadingAnchors }</script>
<ol id="postlist">
<li class="post">
<a class="postlink" href="/trans-rights-skull/">
<h2 data-ha-exclude="" id="trans-rights-skull">trans rights skull </h2>
<a class="postlink" href="/squarsh/">
<h2 data-ha-exclude="" id="squarsh">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="/anarchy-autism/">
<h2 data-ha-exclude="" id="anarchy-autism">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/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">
<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">
</a>
</li>
<li class="post">
<a class="postlink" href="/killdeer/">
<h2 data-ha-exclude="" id="killdeer">killdeer </h2>
<a class="postlink" href="/junco/">
<h2 data-ha-exclude="" id="junco">junco </h2>
<ul class="postlist-tags">
@@ -1512,23 +1635,7 @@ export { HeadingAnchors }</script>
<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="/artisans-cooperative-shirts/">
<h2 data-ha-exclude="" id="artisans-cooperative-shirts">artisans cooperative shirts </h2>
<ul class="postlist-tags">
<li>shirt</li>
<li>print</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/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>
@@ -1564,6 +1671,6 @@ export { HeadingAnchors }</script>
</footer>
<!-- This page `/fix-your-hearts/` was built on 2026-05-06T18:04:11.549Z -->
<!-- This page `/fix-your-hearts/` was built on 2026-05-14T03:43:27.992Z -->
</body>
</html>
_site/flatfish/index.html
+136 -23
View File
@@ -457,6 +457,90 @@ pre[class*=language-]::selection {
.tag:nth-child(odd) p {
text-align: right;
}
img[tabindex="0"]:focus-visible {
outline: .15rem solid var(--color-teal);
}
dialog {
margin: auto;
flex-flow: column;
background: transparent;
border: none;
position: absolute;
}
dialog[open] {
display: flex;
}
dialog::backdrop {
background-color: rgba(from var(--color-bg) r g b / .8);
backdrop-filter: blur(4px);
}
body:has(dialog[open]) {
overflow: hidden;
}
.close-dialog {
background-color: rgba(from var(--color-teal) r g b / .2);
font-size: 1.5rem;
padding: 0 .5rem .15rem;
border-radius: 1rem;
color: var(--color-teal);
box-shadow: .15rem .15rem var(--color-shadow);
border: .08rem solid var(--color-teal);
align-self: flex-end;
justify-self: flex-start;
margin: 0 .1rem;
/* Click animation handling */
position: relative;
top: 1rem;
left: -.15rem;
transition: top .1s ease-in, left .1s ease-in;
}
.close-dialog:focus-visible {
outline: none;
background-color: var(--color-teal);
color: var(--color-bg);
}
@media (any-hover: hover) {
.close-dialog:hover {
outline: none;
background-color: var(--color-teal);
color: var(--color-bg);
}
}
@media (forced-colors: active) {
.close-dialog:focus-visible {
outline-offset: .08rem;
outline: .08rem solid;
}
@media (any-hover: hover) {
.close-dialog:hover {
outline-offset: .08rem;
outline: .08rem solid;
}
}
}
/* Click animation */
.close-dialog:active {
top: 1.1rem;
left: -.05rem;
box-shadow: .05rem .05rem var(--color-shadow);
}
.modal-img {
max-height: calc(90vh - 2rem);
object-fit: contain;
width: auto;
margin: 0 1rem;
}
:root {
color-scheme: light dark;
@@ -637,7 +721,6 @@ span.ha-placeholder {
opacity: .55;
}
/* Lists */
::marker {
color: var(--color-pink);
@@ -1351,7 +1434,29 @@ class HeadingAnchors extends HTMLElement {
HeadingAnchors.register();
export { HeadingAnchors }</script>
export { HeadingAnchors }
/* don't even bother on mobile */
if (window.innerWidth > 650) {
const dialog = document.querySelector("dialog");
const closeButton = document.querySelector(".close-dialog");
const hero = document.querySelector(".hero");
hero.addEventListener("click", (e) => dialog.showModal());
hero.addEventListener("keydown", (e) => {
if (e.key === "Enter" || e.key === " ") {
e.preventDefault();
dialog.showModal();
}
});
closeButton.addEventListener("click", (e) => dialog.close());
closeButton.addEventListener("keydown", (e) => {
if (e.key === "Enter" || e.key === " ") {
e.preventDefault();
dialog.close();
}
});
}</script>
</head>
<body>
@@ -1411,6 +1516,8 @@ export { HeadingAnchors }</script>
<heading-anchors content="<i class='fa-solid fa-anchor'></i>">
<article>
<h1 id="flatfish">flatfish</h1>
@@ -1440,7 +1547,11 @@ export { HeadingAnchors }</script>
</div>
<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">
<dialog closedby="any" aria-label="image modal" tabindex="-1">
<button class="close-dialog" autofocus="" aria-label="close the image modal">&times;</button>
<img class="modal-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">
</dialog>
<img tabindex="0" class="hero" src="/img/flatfish-print.jpg" alt="A print of a simple flatfish design inked in sepia." loading="lazy" decoding="async" width="1000" height="1333">
<p>Hand carved stamp of a slightly goofy looking flatfish.</p>
@@ -1493,17 +1604,35 @@ export { HeadingAnchors }</script>
<ol id="postlist">
<li class="post">
<a class="postlink" href="/artisans-cooperative-shirts/">
<h2 data-ha-exclude="" id="artisans-cooperative-shirts">artisans cooperative shirts </h2>
<a class="postlink" href="/foxgloves/">
<h2 data-ha-exclude="" id="foxgloves">foxgloves </h2>
<ul class="postlist-tags">
<li>print</li>
<li>card</li>
<li>shirt</li>
</ul>
<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>
<li class="post">
<a class="postlink" href="/iris/">
<h2 data-ha-exclude="" id="iris">iris </h2>
<ul class="postlist-tags">
<li>print</li>
<li>card</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/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">
</a>
</li>
@@ -1522,22 +1651,6 @@ export { HeadingAnchors }</script>
</a>
</li>
<li class="post">
<a class="postlink" href="/seedling/">
<h2 data-ha-exclude="" id="seedling">seedling </h2>
<ul class="postlist-tags">
<li>print</li>
<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>
</ol>
</section>
@@ -1569,6 +1682,6 @@ export { HeadingAnchors }</script>
</footer>
<!-- This page `/flatfish/` was built on 2026-05-06T18:04:11.566Z -->
<!-- This page `/flatfish/` was built on 2026-05-14T03:43:28.006Z -->
</body>
</html>
_site/flicker/index.html
+135 -26
View File
@@ -457,6 +457,90 @@ pre[class*=language-]::selection {
.tag:nth-child(odd) p {
text-align: right;
}
img[tabindex="0"]:focus-visible {
outline: .15rem solid var(--color-teal);
}
dialog {
margin: auto;
flex-flow: column;
background: transparent;
border: none;
position: absolute;
}
dialog[open] {
display: flex;
}
dialog::backdrop {
background-color: rgba(from var(--color-bg) r g b / .8);
backdrop-filter: blur(4px);
}
body:has(dialog[open]) {
overflow: hidden;
}
.close-dialog {
background-color: rgba(from var(--color-teal) r g b / .2);
font-size: 1.5rem;
padding: 0 .5rem .15rem;
border-radius: 1rem;
color: var(--color-teal);
box-shadow: .15rem .15rem var(--color-shadow);
border: .08rem solid var(--color-teal);
align-self: flex-end;
justify-self: flex-start;
margin: 0 .1rem;
/* Click animation handling */
position: relative;
top: 1rem;
left: -.15rem;
transition: top .1s ease-in, left .1s ease-in;
}
.close-dialog:focus-visible {
outline: none;
background-color: var(--color-teal);
color: var(--color-bg);
}
@media (any-hover: hover) {
.close-dialog:hover {
outline: none;
background-color: var(--color-teal);
color: var(--color-bg);
}
}
@media (forced-colors: active) {
.close-dialog:focus-visible {
outline-offset: .08rem;
outline: .08rem solid;
}
@media (any-hover: hover) {
.close-dialog:hover {
outline-offset: .08rem;
outline: .08rem solid;
}
}
}
/* Click animation */
.close-dialog:active {
top: 1.1rem;
left: -.05rem;
box-shadow: .05rem .05rem var(--color-shadow);
}
.modal-img {
max-height: calc(90vh - 2rem);
object-fit: contain;
width: auto;
margin: 0 1rem;
}
:root {
color-scheme: light dark;
@@ -637,7 +721,6 @@ span.ha-placeholder {
opacity: .55;
}
/* Lists */
::marker {
color: var(--color-pink);
@@ -1351,7 +1434,29 @@ class HeadingAnchors extends HTMLElement {
HeadingAnchors.register();
export { HeadingAnchors }</script>
export { HeadingAnchors }
/* don't even bother on mobile */
if (window.innerWidth > 650) {
const dialog = document.querySelector("dialog");
const closeButton = document.querySelector(".close-dialog");
const hero = document.querySelector(".hero");
hero.addEventListener("click", (e) => dialog.showModal());
hero.addEventListener("keydown", (e) => {
if (e.key === "Enter" || e.key === " ") {
e.preventDefault();
dialog.showModal();
}
});
closeButton.addEventListener("click", (e) => dialog.close());
closeButton.addEventListener("keydown", (e) => {
if (e.key === "Enter" || e.key === " ") {
e.preventDefault();
dialog.close();
}
});
}</script>
</head>
<body>
@@ -1411,6 +1516,8 @@ export { HeadingAnchors }</script>
<heading-anchors content="<i class='fa-solid fa-anchor'></i>">
<article>
<h1 id="flicker">flicker</h1>
@@ -1445,7 +1552,11 @@ export { HeadingAnchors }</script>
</div>
<img src="/img/flicker-print.jpg" alt="A print in black, brown, and red ink of a northern flicker (a type of woodpecker). Viewed from the back, he is looking over his shoulder and upward towards something unseen above him (my bird feeder)." loading="lazy" decoding="async" width="1000" height="750">
<dialog closedby="any" aria-label="image modal" tabindex="-1">
<button class="close-dialog" autofocus="" aria-label="close the image modal">&times;</button>
<img class="modal-img" src="/img/flicker-print.jpg" alt="A print in black, brown, and red ink of a northern flicker (a type of woodpecker). Viewed from the back, he is looking over his shoulder and upward towards something unseen above him (my bird feeder)." loading="lazy" decoding="async" width="1000" height="750">
</dialog>
<img tabindex="0" class="hero" src="/img/flicker-print.jpg" alt="A print in black, brown, and red ink of a northern flicker (a type of woodpecker). Viewed from the back, he is looking over his shoulder and upward towards something unseen above him (my bird feeder)." loading="lazy" decoding="async" width="1000" height="750">
<p>Hand carved set of stamps of a northern flicker, hungrily eyeing our bird feeder.</p>
@@ -1498,55 +1609,53 @@ export { HeadingAnchors }</script>
<ol id="postlist">
<li class="post">
<a class="postlink" href="/boypussy/">
<h2 data-ha-exclude="" id="boypussy-mature">boypussy (mature)</h2>
<a class="postlink" href="/queer/">
<h2 data-ha-exclude="" id="queer">queer </h2>
<ul class="postlist-tags">
<li>print</li>
<li>sticker</li>
<li>card</li>
<li>shirt</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/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>
<li class="post">
<a class="postlink" href="/bottom-growth/">
<h2 data-ha-exclude="" id="bottom-growth-mature">bottom growth (mature)</h2>
<a class="postlink" href="/congrats-on-the-autism-adhd/">
<h2 data-ha-exclude="" id="congrats-on-the-autism-adhd">congrats on the autism/adhd </h2>
<ul class="postlist-tags">
<li>print</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">
</a>
</li>
<li class="post">
<a class="postlink" href="/greeting-quorbs/">
<h2 data-ha-exclude="" id="greeting-quorbs">greeting quorbs </h2>
<ul class="postlist-tags">
<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">
</a>
</li>
<li class="post">
<a class="postlink" href="/kniphofia/">
<h2 data-ha-exclude="" id="kniphofia">kniphofia </h2>
<ul class="postlist-tags">
<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">
<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>
@@ -1582,6 +1691,6 @@ export { HeadingAnchors }</script>
</footer>
<!-- This page `/flicker/` was built on 2026-05-06T18:04:11.567Z -->
<!-- This page `/flicker/` was built on 2026-05-14T03:43:28.008Z -->
</body>
</html>
_site/flocked-notebook/index.html
+121 -10
View File
@@ -457,6 +457,90 @@ pre[class*=language-]::selection {
.tag:nth-child(odd) p {
text-align: right;
}
img[tabindex="0"]:focus-visible {
outline: .15rem solid var(--color-teal);
}
dialog {
margin: auto;
flex-flow: column;
background: transparent;
border: none;
position: absolute;
}
dialog[open] {
display: flex;
}
dialog::backdrop {
background-color: rgba(from var(--color-bg) r g b / .8);
backdrop-filter: blur(4px);
}
body:has(dialog[open]) {
overflow: hidden;
}
.close-dialog {
background-color: rgba(from var(--color-teal) r g b / .2);
font-size: 1.5rem;
padding: 0 .5rem .15rem;
border-radius: 1rem;
color: var(--color-teal);
box-shadow: .15rem .15rem var(--color-shadow);
border: .08rem solid var(--color-teal);
align-self: flex-end;
justify-self: flex-start;
margin: 0 .1rem;
/* Click animation handling */
position: relative;
top: 1rem;
left: -.15rem;
transition: top .1s ease-in, left .1s ease-in;
}
.close-dialog:focus-visible {
outline: none;
background-color: var(--color-teal);
color: var(--color-bg);
}
@media (any-hover: hover) {
.close-dialog:hover {
outline: none;
background-color: var(--color-teal);
color: var(--color-bg);
}
}
@media (forced-colors: active) {
.close-dialog:focus-visible {
outline-offset: .08rem;
outline: .08rem solid;
}
@media (any-hover: hover) {
.close-dialog:hover {
outline-offset: .08rem;
outline: .08rem solid;
}
}
}
/* Click animation */
.close-dialog:active {
top: 1.1rem;
left: -.05rem;
box-shadow: .05rem .05rem var(--color-shadow);
}
.modal-img {
max-height: calc(90vh - 2rem);
object-fit: contain;
width: auto;
margin: 0 1rem;
}
:root {
color-scheme: light dark;
@@ -637,7 +721,6 @@ span.ha-placeholder {
opacity: .55;
}
/* Lists */
::marker {
color: var(--color-pink);
@@ -1351,7 +1434,29 @@ class HeadingAnchors extends HTMLElement {
HeadingAnchors.register();
export { HeadingAnchors }</script>
export { HeadingAnchors }
/* don't even bother on mobile */
if (window.innerWidth > 650) {
const dialog = document.querySelector("dialog");
const closeButton = document.querySelector(".close-dialog");
const hero = document.querySelector(".hero");
hero.addEventListener("click", (e) => dialog.showModal());
hero.addEventListener("keydown", (e) => {
if (e.key === "Enter" || e.key === " ") {
e.preventDefault();
dialog.showModal();
}
});
closeButton.addEventListener("click", (e) => dialog.close());
closeButton.addEventListener("keydown", (e) => {
if (e.key === "Enter" || e.key === " ") {
e.preventDefault();
dialog.close();
}
});
}</script>
</head>
<body>
@@ -1411,6 +1516,8 @@ export { HeadingAnchors }</script>
<heading-anchors content="<i class='fa-solid fa-anchor'></i>">
<article>
<h1 id="flocked-notebook">flocked notebook</h1>
@@ -1435,7 +1542,11 @@ export { HeadingAnchors }</script>
</div>
<img src="/img/flocked-notebook.jpg" alt="A two panel collage showing the cover and endpapers of a thick notebook." loading="lazy" decoding="async" width="1000" height="1331">
<dialog closedby="any" aria-label="image modal" tabindex="-1">
<button class="close-dialog" autofocus="" aria-label="close the image modal">&times;</button>
<img class="modal-img" src="/img/flocked-notebook.jpg" alt="A two panel collage showing the cover and endpapers of a thick notebook." loading="lazy" decoding="async" width="1000" height="1331">
</dialog>
<img tabindex="0" class="hero" src="/img/flocked-notebook.jpg" alt="A two panel collage showing the cover and endpapers of a thick notebook." loading="lazy" decoding="async" width="1000" height="1331">
<p>A landscape-oriented notebook with black paper and a fuzzy cover. yes. it's fuzzy.</p>
@@ -1494,15 +1605,15 @@ export { HeadingAnchors }</script>
<ol id="postlist">
<li class="post">
<a class="postlink" href="/green-memo-pad/">
<h2 data-ha-exclude="" id="green-memo-pad">green memo pad </h2>
<a class="postlink" href="/striped-journal/">
<h2 data-ha-exclude="" id="striped-journal">striped journal </h2>
<ul class="postlist-tags">
<li>book</li>
</ul>
<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">
<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>
@@ -1524,15 +1635,15 @@ export { HeadingAnchors }</script>
</li>
<li class="post">
<a class="postlink" href="/stampede-journal/">
<h2 data-ha-exclude="" id="stampede-journal">stampede journal </h2>
<a class="postlink" href="/acadia-coloring-journal/">
<h2 data-ha-exclude="" id="acadia-coloring-journal">Acadia coloring 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">
<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>
@@ -1568,6 +1679,6 @@ export { HeadingAnchors }</script>
</footer>
<!-- This page `/flocked-notebook/` was built on 2026-05-06T18:04:11.548Z -->
<!-- This page `/flocked-notebook/` was built on 2026-05-14T03:43:27.984Z -->
</body>
</html>
_site/foldy-wallet-with-thumb-slide/index.html
+124 -13
View File
@@ -457,6 +457,90 @@ pre[class*=language-]::selection {
.tag:nth-child(odd) p {
text-align: right;
}
img[tabindex="0"]:focus-visible {
outline: .15rem solid var(--color-teal);
}
dialog {
margin: auto;
flex-flow: column;
background: transparent;
border: none;
position: absolute;
}
dialog[open] {
display: flex;
}
dialog::backdrop {
background-color: rgba(from var(--color-bg) r g b / .8);
backdrop-filter: blur(4px);
}
body:has(dialog[open]) {
overflow: hidden;
}
.close-dialog {
background-color: rgba(from var(--color-teal) r g b / .2);
font-size: 1.5rem;
padding: 0 .5rem .15rem;
border-radius: 1rem;
color: var(--color-teal);
box-shadow: .15rem .15rem var(--color-shadow);
border: .08rem solid var(--color-teal);
align-self: flex-end;
justify-self: flex-start;
margin: 0 .1rem;
/* Click animation handling */
position: relative;
top: 1rem;
left: -.15rem;
transition: top .1s ease-in, left .1s ease-in;
}
.close-dialog:focus-visible {
outline: none;
background-color: var(--color-teal);
color: var(--color-bg);
}
@media (any-hover: hover) {
.close-dialog:hover {
outline: none;
background-color: var(--color-teal);
color: var(--color-bg);
}
}
@media (forced-colors: active) {
.close-dialog:focus-visible {
outline-offset: .08rem;
outline: .08rem solid;
}
@media (any-hover: hover) {
.close-dialog:hover {
outline-offset: .08rem;
outline: .08rem solid;
}
}
}
/* Click animation */
.close-dialog:active {
top: 1.1rem;
left: -.05rem;
box-shadow: .05rem .05rem var(--color-shadow);
}
.modal-img {
max-height: calc(90vh - 2rem);
object-fit: contain;
width: auto;
margin: 0 1rem;
}
:root {
color-scheme: light dark;
@@ -637,7 +721,6 @@ span.ha-placeholder {
opacity: .55;
}
/* Lists */
::marker {
color: var(--color-pink);
@@ -1351,7 +1434,29 @@ class HeadingAnchors extends HTMLElement {
HeadingAnchors.register();
export { HeadingAnchors }</script>
export { HeadingAnchors }
/* don't even bother on mobile */
if (window.innerWidth > 650) {
const dialog = document.querySelector("dialog");
const closeButton = document.querySelector(".close-dialog");
const hero = document.querySelector(".hero");
hero.addEventListener("click", (e) => dialog.showModal());
hero.addEventListener("keydown", (e) => {
if (e.key === "Enter" || e.key === " ") {
e.preventDefault();
dialog.showModal();
}
});
closeButton.addEventListener("click", (e) => dialog.close());
closeButton.addEventListener("keydown", (e) => {
if (e.key === "Enter" || e.key === " ") {
e.preventDefault();
dialog.close();
}
});
}</script>
</head>
<body>
@@ -1411,6 +1516,8 @@ export { HeadingAnchors }</script>
<heading-anchors content="<i class='fa-solid fa-anchor'></i>">
<article>
<h1 id="foldy-wallet-with-thumb-slide">foldy wallet with thumb slide</h1>
@@ -1435,7 +1542,11 @@ export { HeadingAnchors }</script>
</div>
<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">
<dialog closedby="any" aria-label="image modal" tabindex="-1">
<button class="close-dialog" autofocus="" aria-label="close the image modal">&times;</button>
<img class="modal-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">
</dialog>
<img tabindex="0" class="hero" 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">
<p>Designed for standard credit cards, not business cards.</p>
@@ -1481,43 +1592,43 @@ export { HeadingAnchors }</script>
<ol id="postlist">
<li class="post">
<a class="postlink" href="/mom-bag/">
<h2 data-ha-exclude="" id="mom-bag">mom bag </h2>
<a class="postlink" href="/foldy-wallet/">
<h2 data-ha-exclude="" id="foldy-wallet">foldy wallet </h2>
<ul class="postlist-tags">
<li>leather</li>
</ul>
<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">
<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">
</a>
</li>
<li class="post">
<a class="postlink" href="/patchwork-wallet/">
<h2 data-ha-exclude="" id="patchwork-wallet">patchwork wallet </h2>
<a class="postlink" href="/leaf-patches/">
<h2 data-ha-exclude="" id="leaf-patches">leaf patches </h2>
<ul class="postlist-tags">
<li>leather</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/leaf-patches-oak.jpg" alt="Several oak-leaf-shaped leather patches with stitching holes punched around the edges." loading="lazy" decoding="async" width="1000" height="750">
</a>
</li>
<li class="post">
<a class="postlink" href="/nine-pocket-bifold/">
<h2 data-ha-exclude="" id="nine-pocket-bifold">nine pocket bifold </h2>
<a class="postlink" href="/vix-collar/">
<h2 data-ha-exclude="" id="vix-collar">vix 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/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>
@@ -1553,6 +1664,6 @@ export { HeadingAnchors }</script>
</footer>
<!-- This page `/foldy-wallet-with-thumb-slide/` was built on 2026-05-06T18:04:11.554Z -->
<!-- This page `/foldy-wallet-with-thumb-slide/` was built on 2026-05-14T03:43:27.986Z -->
</body>
</html>
_site/foldy-wallet/index.html
+124 -15
View File
@@ -457,6 +457,90 @@ pre[class*=language-]::selection {
.tag:nth-child(odd) p {
text-align: right;
}
img[tabindex="0"]:focus-visible {
outline: .15rem solid var(--color-teal);
}
dialog {
margin: auto;
flex-flow: column;
background: transparent;
border: none;
position: absolute;
}
dialog[open] {
display: flex;
}
dialog::backdrop {
background-color: rgba(from var(--color-bg) r g b / .8);
backdrop-filter: blur(4px);
}
body:has(dialog[open]) {
overflow: hidden;
}
.close-dialog {
background-color: rgba(from var(--color-teal) r g b / .2);
font-size: 1.5rem;
padding: 0 .5rem .15rem;
border-radius: 1rem;
color: var(--color-teal);
box-shadow: .15rem .15rem var(--color-shadow);
border: .08rem solid var(--color-teal);
align-self: flex-end;
justify-self: flex-start;
margin: 0 .1rem;
/* Click animation handling */
position: relative;
top: 1rem;
left: -.15rem;
transition: top .1s ease-in, left .1s ease-in;
}
.close-dialog:focus-visible {
outline: none;
background-color: var(--color-teal);
color: var(--color-bg);
}
@media (any-hover: hover) {
.close-dialog:hover {
outline: none;
background-color: var(--color-teal);
color: var(--color-bg);
}
}
@media (forced-colors: active) {
.close-dialog:focus-visible {
outline-offset: .08rem;
outline: .08rem solid;
}
@media (any-hover: hover) {
.close-dialog:hover {
outline-offset: .08rem;
outline: .08rem solid;
}
}
}
/* Click animation */
.close-dialog:active {
top: 1.1rem;
left: -.05rem;
box-shadow: .05rem .05rem var(--color-shadow);
}
.modal-img {
max-height: calc(90vh - 2rem);
object-fit: contain;
width: auto;
margin: 0 1rem;
}
:root {
color-scheme: light dark;
@@ -637,7 +721,6 @@ span.ha-placeholder {
opacity: .55;
}
/* Lists */
::marker {
color: var(--color-pink);
@@ -1351,7 +1434,29 @@ class HeadingAnchors extends HTMLElement {
HeadingAnchors.register();
export { HeadingAnchors }</script>
export { HeadingAnchors }
/* don't even bother on mobile */
if (window.innerWidth > 650) {
const dialog = document.querySelector("dialog");
const closeButton = document.querySelector(".close-dialog");
const hero = document.querySelector(".hero");
hero.addEventListener("click", (e) => dialog.showModal());
hero.addEventListener("keydown", (e) => {
if (e.key === "Enter" || e.key === " ") {
e.preventDefault();
dialog.showModal();
}
});
closeButton.addEventListener("click", (e) => dialog.close());
closeButton.addEventListener("keydown", (e) => {
if (e.key === "Enter" || e.key === " ") {
e.preventDefault();
dialog.close();
}
});
}</script>
</head>
<body>
@@ -1411,6 +1516,8 @@ export { HeadingAnchors }</script>
<heading-anchors content="<i class='fa-solid fa-anchor'></i>">
<article>
<h1 id="foldy-wallet">foldy wallet</h1>
@@ -1435,7 +1542,11 @@ export { HeadingAnchors }</script>
</div>
<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">
<dialog closedby="any" aria-label="image modal" tabindex="-1">
<button class="close-dialog" autofocus="" aria-label="close the image modal">&times;</button>
<img class="modal-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">
</dialog>
<img tabindex="0" class="hero" 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">
<p>Single piece construction for easy care - just unfold/pull out the tabs!</p>
@@ -1481,45 +1592,43 @@ export { HeadingAnchors }</script>
<ol id="postlist">
<li class="post">
<a class="postlink" href="/shrimp-cat-toy/">
<h2 data-ha-exclude="" id="shrimp-cat-toy">shrimp cat toy </h2>
<a class="postlink" href="/vix-collar/">
<h2 data-ha-exclude="" id="vix-collar">vix collar </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/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="/tooled-leather-patches/">
<h2 data-ha-exclude="" id="tooled-leather-patches">tooled leather patches </h2>
<a class="postlink" href="/brookes-cuff-bracelets/">
<h2 data-ha-exclude="" id="brookes-cuff-bracelets">brooke&#39;s cuff bracelets </h2>
<ul class="postlist-tags">
<li>leather</li>
<li>gender</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">
<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="/brookes-collar/">
<h2 data-ha-exclude="" id="brookes-collar">brooke&#39;s collar </h2>
<a class="postlink" href="/o-ring-bracelet/">
<h2 data-ha-exclude="" id="o-ring-bracelet">o-ring bracelet </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/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">
</a>
</li>
@@ -1555,6 +1664,6 @@ export { HeadingAnchors }</script>
</footer>
<!-- This page `/foldy-wallet/` was built on 2026-05-06T18:04:11.554Z -->
<!-- This page `/foldy-wallet/` was built on 2026-05-14T03:43:27.985Z -->
</body>
</html>
_site/fountain-pen-friendly-stationery/index.html
+115 -4
View File
@@ -457,6 +457,90 @@ pre[class*=language-]::selection {
.tag:nth-child(odd) p {
text-align: right;
}
img[tabindex="0"]:focus-visible {
outline: .15rem solid var(--color-teal);
}
dialog {
margin: auto;
flex-flow: column;
background: transparent;
border: none;
position: absolute;
}
dialog[open] {
display: flex;
}
dialog::backdrop {
background-color: rgba(from var(--color-bg) r g b / .8);
backdrop-filter: blur(4px);
}
body:has(dialog[open]) {
overflow: hidden;
}
.close-dialog {
background-color: rgba(from var(--color-teal) r g b / .2);
font-size: 1.5rem;
padding: 0 .5rem .15rem;
border-radius: 1rem;
color: var(--color-teal);
box-shadow: .15rem .15rem var(--color-shadow);
border: .08rem solid var(--color-teal);
align-self: flex-end;
justify-self: flex-start;
margin: 0 .1rem;
/* Click animation handling */
position: relative;
top: 1rem;
left: -.15rem;
transition: top .1s ease-in, left .1s ease-in;
}
.close-dialog:focus-visible {
outline: none;
background-color: var(--color-teal);
color: var(--color-bg);
}
@media (any-hover: hover) {
.close-dialog:hover {
outline: none;
background-color: var(--color-teal);
color: var(--color-bg);
}
}
@media (forced-colors: active) {
.close-dialog:focus-visible {
outline-offset: .08rem;
outline: .08rem solid;
}
@media (any-hover: hover) {
.close-dialog:hover {
outline-offset: .08rem;
outline: .08rem solid;
}
}
}
/* Click animation */
.close-dialog:active {
top: 1.1rem;
left: -.05rem;
box-shadow: .05rem .05rem var(--color-shadow);
}
.modal-img {
max-height: calc(90vh - 2rem);
object-fit: contain;
width: auto;
margin: 0 1rem;
}
:root {
color-scheme: light dark;
@@ -637,7 +721,6 @@ span.ha-placeholder {
opacity: .55;
}
/* Lists */
::marker {
color: var(--color-pink);
@@ -1351,7 +1434,29 @@ class HeadingAnchors extends HTMLElement {
HeadingAnchors.register();
export { HeadingAnchors }</script>
export { HeadingAnchors }
/* don't even bother on mobile */
if (window.innerWidth > 650) {
const dialog = document.querySelector("dialog");
const closeButton = document.querySelector(".close-dialog");
const hero = document.querySelector(".hero");
hero.addEventListener("click", (e) => dialog.showModal());
hero.addEventListener("keydown", (e) => {
if (e.key === "Enter" || e.key === " ") {
e.preventDefault();
dialog.showModal();
}
});
closeButton.addEventListener("click", (e) => dialog.close());
closeButton.addEventListener("keydown", (e) => {
if (e.key === "Enter" || e.key === " ") {
e.preventDefault();
dialog.close();
}
});
}</script>
</head>
<body>
@@ -1411,6 +1516,8 @@ export { HeadingAnchors }</script>
<heading-anchors content="<i class='fa-solid fa-anchor'></i>">
<article>
<h1 id="fountain-pen-friendly-stationery">fountain pen-friendly stationery</h1>
@@ -1435,7 +1542,11 @@ export { HeadingAnchors }</script>
</div>
<img src="/img/wax-seals.jpg" alt="Two envelopes with wax seals. The top envelope is cream with a copper-and-white swirled seal depicting a yelling possum holding mail. The bottom envelope is marbled blue, black, and gold, with a white-and-blue swirled seal depicting an octopus holding a fountain pen." loading="lazy" decoding="async" width="1000" height="1333">
<dialog closedby="any" aria-label="image modal" tabindex="-1">
<button class="close-dialog" autofocus="" aria-label="close the image modal">&times;</button>
<img class="modal-img" src="/img/wax-seals.jpg" alt="Two envelopes with wax seals. The top envelope is cream with a copper-and-white swirled seal depicting a yelling possum holding mail. The bottom envelope is marbled blue, black, and gold, with a white-and-blue swirled seal depicting an octopus holding a fountain pen." loading="lazy" decoding="async" width="1000" height="1333">
</dialog>
<img tabindex="0" class="hero" src="/img/wax-seals.jpg" alt="Two envelopes with wax seals. The top envelope is cream with a copper-and-white swirled seal depicting a yelling possum holding mail. The bottom envelope is marbled blue, black, and gold, with a white-and-blue swirled seal depicting an octopus holding a fountain pen." loading="lazy" decoding="async" width="1000" height="1333">
<p>Wax seals pictured from <a href="https://hello.boygirlparty.com" target="_blank" rel="external">boygirlparty</a>.</p>
@@ -1554,6 +1665,6 @@ export { HeadingAnchors }</script>
</footer>
<!-- This page `/fountain-pen-friendly-stationery/` was built on 2026-05-06T18:04:11.559Z -->
<!-- This page `/fountain-pen-friendly-stationery/` was built on 2026-05-14T03:43:27.991Z -->
</body>
</html>
_site/foxgloves/index.html
+126 -21
View File
@@ -457,6 +457,90 @@ pre[class*=language-]::selection {
.tag:nth-child(odd) p {
text-align: right;
}
img[tabindex="0"]:focus-visible {
outline: .15rem solid var(--color-teal);
}
dialog {
margin: auto;
flex-flow: column;
background: transparent;
border: none;
position: absolute;
}
dialog[open] {
display: flex;
}
dialog::backdrop {
background-color: rgba(from var(--color-bg) r g b / .8);
backdrop-filter: blur(4px);
}
body:has(dialog[open]) {
overflow: hidden;
}
.close-dialog {
background-color: rgba(from var(--color-teal) r g b / .2);
font-size: 1.5rem;
padding: 0 .5rem .15rem;
border-radius: 1rem;
color: var(--color-teal);
box-shadow: .15rem .15rem var(--color-shadow);
border: .08rem solid var(--color-teal);
align-self: flex-end;
justify-self: flex-start;
margin: 0 .1rem;
/* Click animation handling */
position: relative;
top: 1rem;
left: -.15rem;
transition: top .1s ease-in, left .1s ease-in;
}
.close-dialog:focus-visible {
outline: none;
background-color: var(--color-teal);
color: var(--color-bg);
}
@media (any-hover: hover) {
.close-dialog:hover {
outline: none;
background-color: var(--color-teal);
color: var(--color-bg);
}
}
@media (forced-colors: active) {
.close-dialog:focus-visible {
outline-offset: .08rem;
outline: .08rem solid;
}
@media (any-hover: hover) {
.close-dialog:hover {
outline-offset: .08rem;
outline: .08rem solid;
}
}
}
/* Click animation */
.close-dialog:active {
top: 1.1rem;
left: -.05rem;
box-shadow: .05rem .05rem var(--color-shadow);
}
.modal-img {
max-height: calc(90vh - 2rem);
object-fit: contain;
width: auto;
margin: 0 1rem;
}
:root {
color-scheme: light dark;
@@ -637,7 +721,6 @@ span.ha-placeholder {
opacity: .55;
}
/* Lists */
::marker {
color: var(--color-pink);
@@ -1351,7 +1434,29 @@ class HeadingAnchors extends HTMLElement {
HeadingAnchors.register();
export { HeadingAnchors }</script>
export { HeadingAnchors }
/* don't even bother on mobile */
if (window.innerWidth > 650) {
const dialog = document.querySelector("dialog");
const closeButton = document.querySelector(".close-dialog");
const hero = document.querySelector(".hero");
hero.addEventListener("click", (e) => dialog.showModal());
hero.addEventListener("keydown", (e) => {
if (e.key === "Enter" || e.key === " ") {
e.preventDefault();
dialog.showModal();
}
});
closeButton.addEventListener("click", (e) => dialog.close());
closeButton.addEventListener("keydown", (e) => {
if (e.key === "Enter" || e.key === " ") {
e.preventDefault();
dialog.close();
}
});
}</script>
</head>
<body>
@@ -1411,6 +1516,8 @@ export { HeadingAnchors }</script>
<heading-anchors content="<i class='fa-solid fa-anchor'></i>">
<article>
<h1 id="foxgloves">foxgloves</h1>
@@ -1445,7 +1552,11 @@ export { HeadingAnchors }</script>
</div>
<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">
<dialog closedby="any" aria-label="image modal" tabindex="-1">
<button class="close-dialog" autofocus="" aria-label="close the image modal">&times;</button>
<img class="modal-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">
</dialog>
<img tabindex="0" class="hero" 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">
<h2 id="details">details</h2>
@@ -1497,55 +1608,49 @@ export { HeadingAnchors }</script>
<ol id="postlist">
<li class="post">
<a class="postlink" href="/heron/">
<h2 data-ha-exclude="" id="heron">heron </h2>
<a class="postlink" href="/printmaking-paper-notes/">
<h2 data-ha-exclude="" id="printmaking-paper-notes">printmaking paper notes </h2>
<ul class="postlist-tags">
<li>print</li>
<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/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>
<li class="post">
<a class="postlink" href="/geese-trans-wrongs/">
<h2 data-ha-exclude="" id="geese-trans-wrongs">geese/trans wrongs </h2>
<a class="postlink" href="/rope-one/">
<h2 data-ha-exclude="" id="rope-one-mature">rope (one) (mature)</h2>
<ul class="postlist-tags">
<li>print</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/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="/hummingbird-become-ungovernable/">
<h2 data-ha-exclude="" id="hummingbird-become-ungovernable">hummingbird become ungovernable </h2>
<a class="postlink" href="/kestrel-zine/">
<h2 data-ha-exclude="" id="kestrel-zine">kestrel zine </h2>
<ul class="postlist-tags">
<li>print</li>
<li>card</li>
<li>zine</li>
<li>shirt</li>
<li>highlight</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">
<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>
@@ -1581,6 +1686,6 @@ export { HeadingAnchors }</script>
</footer>
<!-- This page `/foxgloves/` was built on 2026-05-06T18:04:11.571Z -->
<!-- This page `/foxgloves/` was built on 2026-05-14T03:43:28.016Z -->
</body>
</html>
_site/gallery/1/index.html
+1 -2
View File
@@ -434,7 +434,6 @@ span.ha-placeholder {
opacity: .55;
}
/* Lists */
::marker {
color: var(--color-pink);
@@ -1224,6 +1223,6 @@ footer a:focus-visible {
</footer>
<!-- This page `/gallery/1/` was built on 2026-05-06T18:04:14.070Z -->
<!-- This page `/gallery/1/` was built on 2026-05-14T03:43:31.176Z -->
</body>
</html>
_site/gallery/10/index.html
+1 -2
View File
@@ -434,7 +434,6 @@ span.ha-placeholder {
opacity: .55;
}
/* Lists */
::marker {
color: var(--color-pink);
@@ -1228,6 +1227,6 @@ footer a:focus-visible {
</footer>
<!-- This page `/gallery/10/` was built on 2026-05-06T18:04:17.622Z -->
<!-- This page `/gallery/10/` was built on 2026-05-14T03:43:35.766Z -->
</body>
</html>
_site/gallery/11/index.html
+1 -2
View File
@@ -434,7 +434,6 @@ span.ha-placeholder {
opacity: .55;
}
/* Lists */
::marker {
color: var(--color-pink);
@@ -1106,6 +1105,6 @@ footer a:focus-visible {
</footer>
<!-- This page `/gallery/11/` was built on 2026-05-06T18:04:17.907Z -->
<!-- This page `/gallery/11/` was built on 2026-05-14T03:43:36.375Z -->
</body>
</html>
_site/gallery/2/index.html
+1 -2
View File
@@ -434,7 +434,6 @@ span.ha-placeholder {
opacity: .55;
}
/* Lists */
::marker {
color: var(--color-pink);
@@ -1240,6 +1239,6 @@ footer a:focus-visible {
</footer>
<!-- This page `/gallery/2/` was built on 2026-05-06T18:04:14.694Z -->
<!-- This page `/gallery/2/` was built on 2026-05-14T03:43:31.846Z -->
</body>
</html>
_site/gallery/3/index.html
+1 -2
View File
@@ -434,7 +434,6 @@ span.ha-placeholder {
opacity: .55;
}
/* Lists */
::marker {
color: var(--color-pink);
@@ -1220,6 +1219,6 @@ footer a:focus-visible {
</footer>
<!-- This page `/gallery/3/` was built on 2026-05-06T18:04:15.039Z -->
<!-- This page `/gallery/3/` was built on 2026-05-14T03:43:32.326Z -->
</body>
</html>
_site/gallery/4/index.html
+1 -2
View File
@@ -434,7 +434,6 @@ span.ha-placeholder {
opacity: .55;
}
/* Lists */
::marker {
color: var(--color-pink);
@@ -1228,6 +1227,6 @@ footer a:focus-visible {
</footer>
<!-- This page `/gallery/4/` was built on 2026-05-06T18:04:15.471Z -->
<!-- This page `/gallery/4/` was built on 2026-05-14T03:43:32.718Z -->
</body>
</html>
_site/gallery/5/index.html
+1 -2
View File
@@ -434,7 +434,6 @@ span.ha-placeholder {
opacity: .55;
}
/* Lists */
::marker {
color: var(--color-pink);
@@ -1222,6 +1221,6 @@ footer a:focus-visible {
</footer>
<!-- This page `/gallery/5/` was built on 2026-05-06T18:04:15.856Z -->
<!-- This page `/gallery/5/` was built on 2026-05-14T03:43:33.299Z -->
</body>
</html>
_site/gallery/6/index.html
+1 -2
View File
@@ -434,7 +434,6 @@ span.ha-placeholder {
opacity: .55;
}
/* Lists */
::marker {
color: var(--color-pink);
@@ -1228,6 +1227,6 @@ footer a:focus-visible {
</footer>
<!-- This page `/gallery/6/` was built on 2026-05-06T18:04:16.201Z -->
<!-- This page `/gallery/6/` was built on 2026-05-14T03:43:33.823Z -->
</body>
</html>
_site/gallery/7/index.html
+1 -2
View File
@@ -434,7 +434,6 @@ span.ha-placeholder {
opacity: .55;
}
/* Lists */
::marker {
color: var(--color-pink);
@@ -1270,6 +1269,6 @@ footer a:focus-visible {
</footer>
<!-- This page `/gallery/7/` was built on 2026-05-06T18:04:16.557Z -->
<!-- This page `/gallery/7/` was built on 2026-05-14T03:43:34.328Z -->
</body>
</html>
_site/gallery/8/index.html
+1 -2
View File
@@ -434,7 +434,6 @@ span.ha-placeholder {
opacity: .55;
}
/* Lists */
::marker {
color: var(--color-pink);
@@ -1252,6 +1251,6 @@ footer a:focus-visible {
</footer>
<!-- This page `/gallery/8/` was built on 2026-05-06T18:04:16.827Z -->
<!-- This page `/gallery/8/` was built on 2026-05-14T03:43:34.858Z -->
</body>
</html>
_site/gallery/9/index.html
+1 -2
View File
@@ -434,7 +434,6 @@ span.ha-placeholder {
opacity: .55;
}
/* Lists */
::marker {
color: var(--color-pink);
@@ -1254,6 +1253,6 @@ footer a:focus-visible {
</footer>
<!-- This page `/gallery/9/` was built on 2026-05-06T18:04:17.190Z -->
<!-- This page `/gallery/9/` was built on 2026-05-14T03:43:35.178Z -->
</body>
</html>
_site/gallery/index.html
+1 -2
View File
@@ -434,7 +434,6 @@ span.ha-placeholder {
opacity: .55;
}
/* Lists */
::marker {
color: var(--color-pink);
@@ -1212,6 +1211,6 @@ footer a:focus-visible {
</footer>
<!-- This page `/gallery/` was built on 2026-05-06T18:04:11.577Z -->
<!-- This page `/gallery/` was built on 2026-05-14T03:43:28.027Z -->
</body>
</html>
_site/geese-trans-wrongs/index.html
+130 -13
View File
@@ -457,6 +457,90 @@ pre[class*=language-]::selection {
.tag:nth-child(odd) p {
text-align: right;
}
img[tabindex="0"]:focus-visible {
outline: .15rem solid var(--color-teal);
}
dialog {
margin: auto;
flex-flow: column;
background: transparent;
border: none;
position: absolute;
}
dialog[open] {
display: flex;
}
dialog::backdrop {
background-color: rgba(from var(--color-bg) r g b / .8);
backdrop-filter: blur(4px);
}
body:has(dialog[open]) {
overflow: hidden;
}
.close-dialog {
background-color: rgba(from var(--color-teal) r g b / .2);
font-size: 1.5rem;
padding: 0 .5rem .15rem;
border-radius: 1rem;
color: var(--color-teal);
box-shadow: .15rem .15rem var(--color-shadow);
border: .08rem solid var(--color-teal);
align-self: flex-end;
justify-self: flex-start;
margin: 0 .1rem;
/* Click animation handling */
position: relative;
top: 1rem;
left: -.15rem;
transition: top .1s ease-in, left .1s ease-in;
}
.close-dialog:focus-visible {
outline: none;
background-color: var(--color-teal);
color: var(--color-bg);
}
@media (any-hover: hover) {
.close-dialog:hover {
outline: none;
background-color: var(--color-teal);
color: var(--color-bg);
}
}
@media (forced-colors: active) {
.close-dialog:focus-visible {
outline-offset: .08rem;
outline: .08rem solid;
}
@media (any-hover: hover) {
.close-dialog:hover {
outline-offset: .08rem;
outline: .08rem solid;
}
}
}
/* Click animation */
.close-dialog:active {
top: 1.1rem;
left: -.05rem;
box-shadow: .05rem .05rem var(--color-shadow);
}
.modal-img {
max-height: calc(90vh - 2rem);
object-fit: contain;
width: auto;
margin: 0 1rem;
}
:root {
color-scheme: light dark;
@@ -637,7 +721,6 @@ span.ha-placeholder {
opacity: .55;
}
/* Lists */
::marker {
color: var(--color-pink);
@@ -1351,7 +1434,29 @@ class HeadingAnchors extends HTMLElement {
HeadingAnchors.register();
export { HeadingAnchors }</script>
export { HeadingAnchors }
/* don't even bother on mobile */
if (window.innerWidth > 650) {
const dialog = document.querySelector("dialog");
const closeButton = document.querySelector(".close-dialog");
const hero = document.querySelector(".hero");
hero.addEventListener("click", (e) => dialog.showModal());
hero.addEventListener("keydown", (e) => {
if (e.key === "Enter" || e.key === " ") {
e.preventDefault();
dialog.showModal();
}
});
closeButton.addEventListener("click", (e) => dialog.close());
closeButton.addEventListener("keydown", (e) => {
if (e.key === "Enter" || e.key === " ") {
e.preventDefault();
dialog.close();
}
});
}</script>
</head>
<body>
@@ -1411,6 +1516,8 @@ export { HeadingAnchors }</script>
<heading-anchors content="<i class='fa-solid fa-anchor'></i>">
<article>
<h1 id="geese-trans-wrongs">geese/trans wrongs</h1>
@@ -1445,7 +1552,11 @@ export { HeadingAnchors }</script>
</div>
<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">
<dialog closedby="any" aria-label="image modal" tabindex="-1">
<button class="close-dialog" autofocus="" aria-label="close the image modal">&times;</button>
<img class="modal-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">
</dialog>
<img tabindex="0" class="hero" 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">
<p>Combination of <a href="trans-wrongs-skull">trans wrongs skull</a> and the <a href="geese">geese</a>.</p>
@@ -1512,35 +1623,41 @@ export { HeadingAnchors }</script>
</li>
<li class="post">
<a class="postlink" href="/fat-raccoon/">
<h2 data-ha-exclude="" id="fat-raccoon">fat raccoon </h2>
<a class="postlink" href="/girldick/">
<h2 data-ha-exclude="" id="girldick-mature">girldick (mature)</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/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/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>
<li class="post">
<a class="postlink" href="/gender-as-a-proxy-variable/">
<h2 data-ha-exclude="" id="gender-as-a-proxy-variable">gender as a proxy variable </h2>
<a class="postlink" href="/greeting-loons/">
<h2 data-ha-exclude="" id="greeting-loons">greeting loons </h2>
<ul class="postlist-tags">
<li>gender</li>
<li>card</li>
<li>zine</li>
<li>print</li>
<li>highlight</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">
<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>
@@ -1576,6 +1693,6 @@ export { HeadingAnchors }</script>
</footer>
<!-- This page `/geese-trans-wrongs/` was built on 2026-05-06T18:04:11.569Z -->
<!-- This page `/geese-trans-wrongs/` was built on 2026-05-14T03:43:28.012Z -->
</body>
</html>
_site/geese/index.html
+127 -18
View File
@@ -457,6 +457,90 @@ pre[class*=language-]::selection {
.tag:nth-child(odd) p {
text-align: right;
}
img[tabindex="0"]:focus-visible {
outline: .15rem solid var(--color-teal);
}
dialog {
margin: auto;
flex-flow: column;
background: transparent;
border: none;
position: absolute;
}
dialog[open] {
display: flex;
}
dialog::backdrop {
background-color: rgba(from var(--color-bg) r g b / .8);
backdrop-filter: blur(4px);
}
body:has(dialog[open]) {
overflow: hidden;
}
.close-dialog {
background-color: rgba(from var(--color-teal) r g b / .2);
font-size: 1.5rem;
padding: 0 .5rem .15rem;
border-radius: 1rem;
color: var(--color-teal);
box-shadow: .15rem .15rem var(--color-shadow);
border: .08rem solid var(--color-teal);
align-self: flex-end;
justify-self: flex-start;
margin: 0 .1rem;
/* Click animation handling */
position: relative;
top: 1rem;
left: -.15rem;
transition: top .1s ease-in, left .1s ease-in;
}
.close-dialog:focus-visible {
outline: none;
background-color: var(--color-teal);
color: var(--color-bg);
}
@media (any-hover: hover) {
.close-dialog:hover {
outline: none;
background-color: var(--color-teal);
color: var(--color-bg);
}
}
@media (forced-colors: active) {
.close-dialog:focus-visible {
outline-offset: .08rem;
outline: .08rem solid;
}
@media (any-hover: hover) {
.close-dialog:hover {
outline-offset: .08rem;
outline: .08rem solid;
}
}
}
/* Click animation */
.close-dialog:active {
top: 1.1rem;
left: -.05rem;
box-shadow: .05rem .05rem var(--color-shadow);
}
.modal-img {
max-height: calc(90vh - 2rem);
object-fit: contain;
width: auto;
margin: 0 1rem;
}
:root {
color-scheme: light dark;
@@ -637,7 +721,6 @@ span.ha-placeholder {
opacity: .55;
}
/* Lists */
::marker {
color: var(--color-pink);
@@ -1351,7 +1434,29 @@ class HeadingAnchors extends HTMLElement {
HeadingAnchors.register();
export { HeadingAnchors }</script>
export { HeadingAnchors }
/* don't even bother on mobile */
if (window.innerWidth > 650) {
const dialog = document.querySelector("dialog");
const closeButton = document.querySelector(".close-dialog");
const hero = document.querySelector(".hero");
hero.addEventListener("click", (e) => dialog.showModal());
hero.addEventListener("keydown", (e) => {
if (e.key === "Enter" || e.key === " ") {
e.preventDefault();
dialog.showModal();
}
});
closeButton.addEventListener("click", (e) => dialog.close());
closeButton.addEventListener("keydown", (e) => {
if (e.key === "Enter" || e.key === " ") {
e.preventDefault();
dialog.close();
}
});
}</script>
</head>
<body>
@@ -1411,6 +1516,8 @@ export { HeadingAnchors }</script>
<heading-anchors content="<i class='fa-solid fa-anchor'></i>">
<article>
<h1 id="geese">geese</h1>
@@ -1445,7 +1552,11 @@ export { HeadingAnchors }</script>
</div>
<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">
<dialog closedby="any" aria-label="image modal" tabindex="-1">
<button class="close-dialog" autofocus="" aria-label="close the image modal">&times;</button>
<img class="modal-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">
</dialog>
<img tabindex="0" class="hero" 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">
<p>Based on a fantastic picture by <a href="https://mstdn.games/@handmade_ghost" target="_blank" rel="external">handmade ghost</a></p>
@@ -1498,49 +1609,47 @@ export { HeadingAnchors }</script>
<ol id="postlist">
<li class="post">
<a class="postlink" href="/greeting-quorbs/">
<h2 data-ha-exclude="" id="greeting-quorbs">greeting quorbs </h2>
<a class="postlink" href="/kniphofia/">
<h2 data-ha-exclude="" id="kniphofia">kniphofia </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">
<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="/chanterelle/">
<h2 data-ha-exclude="" id="chanterelle">chanterelle </h2>
<a class="postlink" href="/quorbs/">
<h2 data-ha-exclude="" id="quorbs">quorbs </h2>
<ul class="postlist-tags">
<li>print</li>
<li>card</li>
<li>highlight</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">
<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="/five-of-them/">
<h2 data-ha-exclude="" id="five-of-them">five of them </h2>
<a class="postlink" href="/artisans-cooperative-shirts/">
<h2 data-ha-exclude="" id="artisans-cooperative-shirts">artisans cooperative shirts </h2>
<ul class="postlist-tags">
<li>print</li>
<li>shirt</li>
<li>print</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/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">
</a>
</li>
@@ -1576,6 +1685,6 @@ export { HeadingAnchors }</script>
</footer>
<!-- This page `/geese/` was built on 2026-05-06T18:04:11.569Z -->
<!-- This page `/geese/` was built on 2026-05-14T03:43:28.011Z -->
</body>
</html>
_site/gender-as-a-proxy-variable/index.html
+127 -19
View File
@@ -457,6 +457,90 @@ pre[class*=language-]::selection {
.tag:nth-child(odd) p {
text-align: right;
}
img[tabindex="0"]:focus-visible {
outline: .15rem solid var(--color-teal);
}
dialog {
margin: auto;
flex-flow: column;
background: transparent;
border: none;
position: absolute;
}
dialog[open] {
display: flex;
}
dialog::backdrop {
background-color: rgba(from var(--color-bg) r g b / .8);
backdrop-filter: blur(4px);
}
body:has(dialog[open]) {
overflow: hidden;
}
.close-dialog {
background-color: rgba(from var(--color-teal) r g b / .2);
font-size: 1.5rem;
padding: 0 .5rem .15rem;
border-radius: 1rem;
color: var(--color-teal);
box-shadow: .15rem .15rem var(--color-shadow);
border: .08rem solid var(--color-teal);
align-self: flex-end;
justify-self: flex-start;
margin: 0 .1rem;
/* Click animation handling */
position: relative;
top: 1rem;
left: -.15rem;
transition: top .1s ease-in, left .1s ease-in;
}
.close-dialog:focus-visible {
outline: none;
background-color: var(--color-teal);
color: var(--color-bg);
}
@media (any-hover: hover) {
.close-dialog:hover {
outline: none;
background-color: var(--color-teal);
color: var(--color-bg);
}
}
@media (forced-colors: active) {
.close-dialog:focus-visible {
outline-offset: .08rem;
outline: .08rem solid;
}
@media (any-hover: hover) {
.close-dialog:hover {
outline-offset: .08rem;
outline: .08rem solid;
}
}
}
/* Click animation */
.close-dialog:active {
top: 1.1rem;
left: -.05rem;
box-shadow: .05rem .05rem var(--color-shadow);
}
.modal-img {
max-height: calc(90vh - 2rem);
object-fit: contain;
width: auto;
margin: 0 1rem;
}
:root {
color-scheme: light dark;
@@ -637,7 +721,6 @@ span.ha-placeholder {
opacity: .55;
}
/* Lists */
::marker {
color: var(--color-pink);
@@ -1351,7 +1434,29 @@ class HeadingAnchors extends HTMLElement {
HeadingAnchors.register();
export { HeadingAnchors }</script>
export { HeadingAnchors }
/* don't even bother on mobile */
if (window.innerWidth > 650) {
const dialog = document.querySelector("dialog");
const closeButton = document.querySelector(".close-dialog");
const hero = document.querySelector(".hero");
hero.addEventListener("click", (e) => dialog.showModal());
hero.addEventListener("keydown", (e) => {
if (e.key === "Enter" || e.key === " ") {
e.preventDefault();
dialog.showModal();
}
});
closeButton.addEventListener("click", (e) => dialog.close());
closeButton.addEventListener("keydown", (e) => {
if (e.key === "Enter" || e.key === " ") {
e.preventDefault();
dialog.close();
}
});
}</script>
</head>
<body>
@@ -1411,6 +1516,8 @@ export { HeadingAnchors }</script>
<heading-anchors content="<i class='fa-solid fa-anchor'></i>">
<article>
<h1 id="gender-as-a-proxy-variable">gender as a proxy variable</h1>
@@ -1440,10 +1547,13 @@ export { HeadingAnchors }</script>
</div>
<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">
<dialog closedby="any" aria-label="image modal" tabindex="-1">
<button class="close-dialog" autofocus="" aria-label="close the image modal">&times;</button>
<img class="modal-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">
</dialog>
<img tabindex="0" class="hero" 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">
<p><a href="assets/pdf/gender-as-a-proxy-variable.pdf">Look through a scan of the zine.</a> (Be aware that the PDF is not as up to date as the web version below.)</p>
<p><a href="https://riverside-refuge.square.site/product/gender-as-a-proxy-variable-print-zine/113" target="_blank" rel="external">Get print copies.</a></p>
<p>The below material is a web page reproduction of my zine <strong>Gender as a Proxy Variable</strong>.</p>
<hr>
@@ -1670,55 +1780,53 @@ export { HeadingAnchors }</script>
<ol id="postlist">
<li class="post">
<a class="postlink" href="/congrats-on-the-gay/">
<h2 data-ha-exclude="" id="congrats-on-the-gay">congrats on the gay </h2>
<a class="postlink" href="/tooled-leather-patches/">
<h2 data-ha-exclude="" id="tooled-leather-patches">tooled leather patches </h2>
<ul class="postlist-tags">
<li>print</li>
<li>card</li>
<li>leather</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/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="/trans-rights-skull/">
<h2 data-ha-exclude="" id="trans-rights-skull">trans rights skull </h2>
<a class="postlink" href="/girldick/">
<h2 data-ha-exclude="" id="girldick-mature">girldick (mature)</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/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">
<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>
<li class="post">
<a class="postlink" href="/on-the-ubiquity-of-enby/">
<h2 data-ha-exclude="" id="on-the-ubiquity-of-enby">on the ubiquity of &#39;enby&#39; </h2>
<a class="postlink" href="/gender/">
<h2 data-ha-exclude="" id="gender-2">gender? </h2>
<ul class="postlist-tags">
<li>gender</li>
</ul>
<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">
<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">
</a>
</li>
@@ -1754,6 +1862,6 @@ export { HeadingAnchors }</script>
</footer>
<!-- This page `/gender-as-a-proxy-variable/` was built on 2026-05-06T18:04:11.556Z -->
<!-- This page `/gender-as-a-proxy-variable/` was built on 2026-05-14T03:43:27.988Z -->
</body>
</html>
_site/gender-in-data-models/index.html
+126 -11
View File
@@ -457,6 +457,90 @@ pre[class*=language-]::selection {
.tag:nth-child(odd) p {
text-align: right;
}
img[tabindex="0"]:focus-visible {
outline: .15rem solid var(--color-teal);
}
dialog {
margin: auto;
flex-flow: column;
background: transparent;
border: none;
position: absolute;
}
dialog[open] {
display: flex;
}
dialog::backdrop {
background-color: rgba(from var(--color-bg) r g b / .8);
backdrop-filter: blur(4px);
}
body:has(dialog[open]) {
overflow: hidden;
}
.close-dialog {
background-color: rgba(from var(--color-teal) r g b / .2);
font-size: 1.5rem;
padding: 0 .5rem .15rem;
border-radius: 1rem;
color: var(--color-teal);
box-shadow: .15rem .15rem var(--color-shadow);
border: .08rem solid var(--color-teal);
align-self: flex-end;
justify-self: flex-start;
margin: 0 .1rem;
/* Click animation handling */
position: relative;
top: 1rem;
left: -.15rem;
transition: top .1s ease-in, left .1s ease-in;
}
.close-dialog:focus-visible {
outline: none;
background-color: var(--color-teal);
color: var(--color-bg);
}
@media (any-hover: hover) {
.close-dialog:hover {
outline: none;
background-color: var(--color-teal);
color: var(--color-bg);
}
}
@media (forced-colors: active) {
.close-dialog:focus-visible {
outline-offset: .08rem;
outline: .08rem solid;
}
@media (any-hover: hover) {
.close-dialog:hover {
outline-offset: .08rem;
outline: .08rem solid;
}
}
}
/* Click animation */
.close-dialog:active {
top: 1.1rem;
left: -.05rem;
box-shadow: .05rem .05rem var(--color-shadow);
}
.modal-img {
max-height: calc(90vh - 2rem);
object-fit: contain;
width: auto;
margin: 0 1rem;
}
:root {
color-scheme: light dark;
@@ -637,7 +721,6 @@ span.ha-placeholder {
opacity: .55;
}
/* Lists */
::marker {
color: var(--color-pink);
@@ -1351,7 +1434,29 @@ class HeadingAnchors extends HTMLElement {
HeadingAnchors.register();
export { HeadingAnchors }</script>
export { HeadingAnchors }
/* don't even bother on mobile */
if (window.innerWidth > 650) {
const dialog = document.querySelector("dialog");
const closeButton = document.querySelector(".close-dialog");
const hero = document.querySelector(".hero");
hero.addEventListener("click", (e) => dialog.showModal());
hero.addEventListener("keydown", (e) => {
if (e.key === "Enter" || e.key === " ") {
e.preventDefault();
dialog.showModal();
}
});
closeButton.addEventListener("click", (e) => dialog.close());
closeButton.addEventListener("keydown", (e) => {
if (e.key === "Enter" || e.key === " ") {
e.preventDefault();
dialog.close();
}
});
}</script>
</head>
<body>
@@ -1411,6 +1516,8 @@ export { HeadingAnchors }</script>
<heading-anchors content="<i class='fa-solid fa-anchor'></i>">
<article>
<h1 id="gender-in-data-models">gender in data models</h1>
@@ -1445,7 +1552,11 @@ export { HeadingAnchors }</script>
</div>
<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">
<dialog closedby="any" aria-label="image modal" tabindex="-1">
<button class="close-dialog" autofocus="" aria-label="close the image modal">&times;</button>
<img class="modal-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">
</dialog>
<img tabindex="0" class="hero" 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">
<!-- TOC -->
@@ -1720,31 +1831,35 @@ This may also be expanded to a multi-step approach, with questions covering some
<ol id="postlist">
<li class="post">
<a class="postlink" href="/in-the-news/">
<h2 data-ha-exclude="" id="in-the-news">in the news </h2>
<a class="postlink" href="/bottom-growth/">
<h2 data-ha-exclude="" id="bottom-growth-mature">bottom growth (mature)</h2>
<ul class="postlist-tags">
<li>print</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/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="/gender-as-a-proxy-variable/">
<h2 data-ha-exclude="" id="gender-as-a-proxy-variable">gender as a proxy variable </h2>
<a class="postlink" href="/kestrel-zine/">
<h2 data-ha-exclude="" id="kestrel-zine">kestrel zine </h2>
<ul class="postlist-tags">
<li>gender</li>
<li>print</li>
<li>zine</li>
<li>highlight</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">
<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>
@@ -1794,6 +1909,6 @@ This may also be expanded to a multi-step approach, with questions covering some
</footer>
<!-- This page `/gender-in-data-models/` was built on 2026-05-06T18:04:11.570Z -->
<!-- This page `/gender-in-data-models/` was built on 2026-05-14T03:43:28.015Z -->
</body>
</html>
_site/gender/index.html
+138 -29
View File
@@ -457,6 +457,90 @@ pre[class*=language-]::selection {
.tag:nth-child(odd) p {
text-align: right;
}
img[tabindex="0"]:focus-visible {
outline: .15rem solid var(--color-teal);
}
dialog {
margin: auto;
flex-flow: column;
background: transparent;
border: none;
position: absolute;
}
dialog[open] {
display: flex;
}
dialog::backdrop {
background-color: rgba(from var(--color-bg) r g b / .8);
backdrop-filter: blur(4px);
}
body:has(dialog[open]) {
overflow: hidden;
}
.close-dialog {
background-color: rgba(from var(--color-teal) r g b / .2);
font-size: 1.5rem;
padding: 0 .5rem .15rem;
border-radius: 1rem;
color: var(--color-teal);
box-shadow: .15rem .15rem var(--color-shadow);
border: .08rem solid var(--color-teal);
align-self: flex-end;
justify-self: flex-start;
margin: 0 .1rem;
/* Click animation handling */
position: relative;
top: 1rem;
left: -.15rem;
transition: top .1s ease-in, left .1s ease-in;
}
.close-dialog:focus-visible {
outline: none;
background-color: var(--color-teal);
color: var(--color-bg);
}
@media (any-hover: hover) {
.close-dialog:hover {
outline: none;
background-color: var(--color-teal);
color: var(--color-bg);
}
}
@media (forced-colors: active) {
.close-dialog:focus-visible {
outline-offset: .08rem;
outline: .08rem solid;
}
@media (any-hover: hover) {
.close-dialog:hover {
outline-offset: .08rem;
outline: .08rem solid;
}
}
}
/* Click animation */
.close-dialog:active {
top: 1.1rem;
left: -.05rem;
box-shadow: .05rem .05rem var(--color-shadow);
}
.modal-img {
max-height: calc(90vh - 2rem);
object-fit: contain;
width: auto;
margin: 0 1rem;
}
:root {
color-scheme: light dark;
@@ -637,7 +721,6 @@ span.ha-placeholder {
opacity: .55;
}
/* Lists */
::marker {
color: var(--color-pink);
@@ -1351,7 +1434,29 @@ class HeadingAnchors extends HTMLElement {
HeadingAnchors.register();
export { HeadingAnchors }</script>
export { HeadingAnchors }
/* don't even bother on mobile */
if (window.innerWidth > 650) {
const dialog = document.querySelector("dialog");
const closeButton = document.querySelector(".close-dialog");
const hero = document.querySelector(".hero");
hero.addEventListener("click", (e) => dialog.showModal());
hero.addEventListener("keydown", (e) => {
if (e.key === "Enter" || e.key === " ") {
e.preventDefault();
dialog.showModal();
}
});
closeButton.addEventListener("click", (e) => dialog.close());
closeButton.addEventListener("keydown", (e) => {
if (e.key === "Enter" || e.key === " ") {
e.preventDefault();
dialog.close();
}
});
}</script>
</head>
<body>
@@ -1411,6 +1516,8 @@ export { HeadingAnchors }</script>
<heading-anchors content="<i class='fa-solid fa-anchor'></i>">
<article>
<h1 id="gender">gender?</h1>
@@ -1435,7 +1542,11 @@ export { HeadingAnchors }</script>
</div>
<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">
<dialog closedby="any" aria-label="image modal" tabindex="-1">
<button class="close-dialog" autofocus="" aria-label="close the image modal">&times;</button>
<img class="modal-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">
</dialog>
<img tabindex="0" class="hero" 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">
<h1 id="transcription">transcription</h1>
@@ -1504,26 +1615,8 @@ export { HeadingAnchors }</script>
<ol id="postlist">
<li class="post">
<a class="postlink" href="/pronoun-patches/">
<h2 data-ha-exclude="" id="pronoun-patches">pronoun patches </h2>
<ul class="postlist-tags">
<li>print</li>
<li>patch</li>
<li>gender</li>
</ul>
<img src="/img/pronoun-patch.jpg" alt="Rows of the same design, a skull with a speech bubble announcing varied pronoun sets, repeat in multiple colors along a stretch of off-white fabric." loading="lazy" decoding="async" width="1000" height="562">
</a>
</li>
<li class="post">
<a class="postlink" href="/congrats-on-the-gay/">
<h2 data-ha-exclude="" id="congrats-on-the-gay">congrats on the gay </h2>
<a class="postlink" href="/trans-wrongs-skull/">
<h2 data-ha-exclude="" id="trans-wrongs-skull">trans wrongs skull </h2>
<ul class="postlist-tags">
@@ -1531,28 +1624,44 @@ export { HeadingAnchors }</script>
<li>card</li>
<li>sticker</li>
<li>pin</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/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="/trans-the-world/">
<h2 data-ha-exclude="" id="trans-the-world">trans the world </h2>
<a class="postlink" href="/luminescent/">
<h2 data-ha-exclude="" id="luminescent-mature">luminescent (mature)</h2>
<ul class="postlist-tags">
<li>print</li>
<li>shirt</li>
<li>gender</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">
</a>
</li>
<li class="post">
<a class="postlink" href="/in-the-news/">
<h2 data-ha-exclude="" id="in-the-news">in the news </h2>
<ul class="postlist-tags">
<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/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">
</a>
</li>
@@ -1588,6 +1697,6 @@ export { HeadingAnchors }</script>
</footer>
<!-- This page `/gender/` was built on 2026-05-06T18:04:11.547Z -->
<!-- This page `/gender/` was built on 2026-05-14T03:43:27.983Z -->
</body>
</html>

Some files were not shown because too many files have changed in this diff Show More