drone build Wed Sep 9 13:38:19 PDT 2026
This commit is contained in:
+172
-3
@@ -311,6 +311,13 @@
|
||||
--color-grey: light-dark(var(--color-grey-dark), var(--color-grey-light));
|
||||
}
|
||||
|
||||
:root:has(#theme-light:checked) {
|
||||
color-scheme: light;
|
||||
}
|
||||
:root:has(#theme-dark:checked) {
|
||||
color-scheme: dark;
|
||||
}
|
||||
|
||||
/* Base */
|
||||
|
||||
* {
|
||||
@@ -454,7 +461,7 @@ ul, ol, dl, li {
|
||||
}
|
||||
|
||||
li {
|
||||
line-height: 1.2 5;
|
||||
line-height: 1.2;
|
||||
margin-top: .65rem;
|
||||
margin-bottom: .65rem;
|
||||
}
|
||||
@@ -793,6 +800,111 @@ footer a:focus-visible {
|
||||
outline-color: var(--color-pink);
|
||||
}
|
||||
|
||||
/* color picker */
|
||||
#theme {
|
||||
display: flex;
|
||||
justify-content: center;
|
||||
margin: .5rem auto 0;
|
||||
padding: 0 .75rem .5rem;
|
||||
width: fit-content;
|
||||
border: .125rem solid var(--color-teal);
|
||||
border-radius: 2rem;
|
||||
}
|
||||
|
||||
#theme legend {
|
||||
margin: 0 auto;
|
||||
color: var(--color-teal);
|
||||
}
|
||||
|
||||
footer label {
|
||||
cursor: pointer;
|
||||
border: .125rem solid var(--color-pink);
|
||||
padding: 0 .25rem;
|
||||
color: var(--color-pink);
|
||||
background-color: var(--color-bg); /* this stops the box shadows from showing through */
|
||||
box-shadow: .15em .15em var(--color-shadow);
|
||||
/* Click animation handling */
|
||||
position: relative;
|
||||
top: 0;
|
||||
left: 0;
|
||||
transition: top .05s ease-in, left .05s ease-in;
|
||||
}
|
||||
|
||||
footer input:checked + label {
|
||||
color: var(--color-blue);
|
||||
border-color: var(--color-blue);
|
||||
}
|
||||
|
||||
footer label i {
|
||||
color: var(--color-teal);
|
||||
}
|
||||
|
||||
footer input:checked + label i {
|
||||
color: var(--color-pink);
|
||||
}
|
||||
|
||||
@media (any-hover: hover) {
|
||||
footer label:hover,
|
||||
footer input:checked + label:hover,
|
||||
footer label:hover i,
|
||||
footer input:checked + label:hover i {
|
||||
color: var(--color-bg);
|
||||
}
|
||||
|
||||
footer label:hover {
|
||||
background-color: var(--color-pink);
|
||||
}
|
||||
|
||||
footer input:checked + label:hover {
|
||||
background-color: var(--color-teal);
|
||||
}
|
||||
}
|
||||
|
||||
footer input:focus-visible + label,
|
||||
footer input:focus-visible + label i {
|
||||
color: var(--color-bg);
|
||||
background-color: var(--color-pink);
|
||||
border-color: var(--color-pink);
|
||||
}
|
||||
|
||||
footer input:checked:focus-visible + label,
|
||||
footer input:checked:focus-visible + label i {
|
||||
color: var(--color-bg);
|
||||
background-color: var(--color-teal);
|
||||
border-color: var(--color-teal);
|
||||
}
|
||||
|
||||
footer label:active {
|
||||
top: .09em;
|
||||
left: .09em;
|
||||
box-shadow: .05em .05em var(--color-shadow);
|
||||
}
|
||||
|
||||
label.theme-light {
|
||||
border-top-left-radius: 1rem;
|
||||
border-bottom-left-radius: 1rem;
|
||||
border-right: none;
|
||||
padding-left: .35rem;
|
||||
}
|
||||
|
||||
label.theme-auto {
|
||||
}
|
||||
|
||||
label.theme-dark {
|
||||
border-top-right-radius: 1rem;
|
||||
border-bottom-right-radius: 1rem;
|
||||
border-left: none;
|
||||
padding-right: .35rem;
|
||||
}
|
||||
|
||||
footer input {
|
||||
/* To allow screen reader to still access these. */
|
||||
/* From https://lyra.horse/blog/2025/08/you-dont-need-js/ */
|
||||
opacity: 0;
|
||||
position: absolute;
|
||||
pointer-events: none;
|
||||
}
|
||||
|
||||
/* Pagination */
|
||||
.pagination,
|
||||
.pagination li {
|
||||
@@ -1055,7 +1167,43 @@ pre[class*=language-]::selection {
|
||||
}
|
||||
}</style>
|
||||
|
||||
<script type="module"></script>
|
||||
|
||||
|
||||
<script type="module">const THEME = "theme";
|
||||
|
||||
const saveTheme = (themeValue) => {
|
||||
localStorage.setItem(THEME, themeValue);
|
||||
};
|
||||
|
||||
const themeLight = document.getElementById("theme-light");
|
||||
themeLight.addEventListener("input", (e) => {
|
||||
saveTheme(themeLight.value);
|
||||
});
|
||||
|
||||
const themeAuto = document.getElementById("theme-auto");
|
||||
themeAuto.addEventListener("input", (e) => {
|
||||
saveTheme(themeAuto.auto);
|
||||
});
|
||||
|
||||
const themeDark = document.getElementById("theme-dark");
|
||||
themeDark.addEventListener("input", (e) => {
|
||||
saveTheme(themeDark.value);
|
||||
});
|
||||
|
||||
var currentThemeValue = localStorage.getItem(THEME);
|
||||
switch (currentThemeValue) {
|
||||
case "light":
|
||||
themeLight.checked = true;
|
||||
break;
|
||||
case "auto":
|
||||
themeAuto.checked = true;
|
||||
break;
|
||||
case "dark":
|
||||
themeDark.checked = true;
|
||||
break;
|
||||
default:
|
||||
themeAuto.checked = true;
|
||||
}</script>
|
||||
|
||||
</head>
|
||||
<body>
|
||||
@@ -1352,9 +1500,30 @@ pre[class*=language-]::selection {
|
||||
</a>
|
||||
</li>
|
||||
</ul>
|
||||
|
||||
<fieldset id="theme">
|
||||
<legend>color scheme</legend>
|
||||
|
||||
<input type="radio" id="theme-light" name="theme" value="light">
|
||||
<label class="theme-light" for="theme-light">
|
||||
<i class="fa-regular fa-sun" aria-hidden="true"></i>
|
||||
light
|
||||
</label>
|
||||
|
||||
<input type="radio" id="theme-auto" name="theme" value="auto">
|
||||
<label class="theme-auto" for="theme-auto">
|
||||
auto
|
||||
</label>
|
||||
|
||||
<input type="radio" id="theme-dark" name="theme" value="dark">
|
||||
<label class="theme-dark" for="theme-dark">
|
||||
dark
|
||||
<i class="fa-regular fa-moon" aria-hidden="true"></i>
|
||||
</label>
|
||||
</fieldset>
|
||||
</footer>
|
||||
|
||||
|
||||
<!-- This page `/1/` was built on 2026-09-08T23:18:35.787Z -->
|
||||
<!-- This page `/1/` was built on 2026-09-09T20:38:06.534Z -->
|
||||
</body>
|
||||
</html>
|
||||
|
||||
+172
-3
@@ -311,6 +311,13 @@
|
||||
--color-grey: light-dark(var(--color-grey-dark), var(--color-grey-light));
|
||||
}
|
||||
|
||||
:root:has(#theme-light:checked) {
|
||||
color-scheme: light;
|
||||
}
|
||||
:root:has(#theme-dark:checked) {
|
||||
color-scheme: dark;
|
||||
}
|
||||
|
||||
/* Base */
|
||||
|
||||
* {
|
||||
@@ -454,7 +461,7 @@ ul, ol, dl, li {
|
||||
}
|
||||
|
||||
li {
|
||||
line-height: 1.2 5;
|
||||
line-height: 1.2;
|
||||
margin-top: .65rem;
|
||||
margin-bottom: .65rem;
|
||||
}
|
||||
@@ -793,6 +800,111 @@ footer a:focus-visible {
|
||||
outline-color: var(--color-pink);
|
||||
}
|
||||
|
||||
/* color picker */
|
||||
#theme {
|
||||
display: flex;
|
||||
justify-content: center;
|
||||
margin: .5rem auto 0;
|
||||
padding: 0 .75rem .5rem;
|
||||
width: fit-content;
|
||||
border: .125rem solid var(--color-teal);
|
||||
border-radius: 2rem;
|
||||
}
|
||||
|
||||
#theme legend {
|
||||
margin: 0 auto;
|
||||
color: var(--color-teal);
|
||||
}
|
||||
|
||||
footer label {
|
||||
cursor: pointer;
|
||||
border: .125rem solid var(--color-pink);
|
||||
padding: 0 .25rem;
|
||||
color: var(--color-pink);
|
||||
background-color: var(--color-bg); /* this stops the box shadows from showing through */
|
||||
box-shadow: .15em .15em var(--color-shadow);
|
||||
/* Click animation handling */
|
||||
position: relative;
|
||||
top: 0;
|
||||
left: 0;
|
||||
transition: top .05s ease-in, left .05s ease-in;
|
||||
}
|
||||
|
||||
footer input:checked + label {
|
||||
color: var(--color-blue);
|
||||
border-color: var(--color-blue);
|
||||
}
|
||||
|
||||
footer label i {
|
||||
color: var(--color-teal);
|
||||
}
|
||||
|
||||
footer input:checked + label i {
|
||||
color: var(--color-pink);
|
||||
}
|
||||
|
||||
@media (any-hover: hover) {
|
||||
footer label:hover,
|
||||
footer input:checked + label:hover,
|
||||
footer label:hover i,
|
||||
footer input:checked + label:hover i {
|
||||
color: var(--color-bg);
|
||||
}
|
||||
|
||||
footer label:hover {
|
||||
background-color: var(--color-pink);
|
||||
}
|
||||
|
||||
footer input:checked + label:hover {
|
||||
background-color: var(--color-teal);
|
||||
}
|
||||
}
|
||||
|
||||
footer input:focus-visible + label,
|
||||
footer input:focus-visible + label i {
|
||||
color: var(--color-bg);
|
||||
background-color: var(--color-pink);
|
||||
border-color: var(--color-pink);
|
||||
}
|
||||
|
||||
footer input:checked:focus-visible + label,
|
||||
footer input:checked:focus-visible + label i {
|
||||
color: var(--color-bg);
|
||||
background-color: var(--color-teal);
|
||||
border-color: var(--color-teal);
|
||||
}
|
||||
|
||||
footer label:active {
|
||||
top: .09em;
|
||||
left: .09em;
|
||||
box-shadow: .05em .05em var(--color-shadow);
|
||||
}
|
||||
|
||||
label.theme-light {
|
||||
border-top-left-radius: 1rem;
|
||||
border-bottom-left-radius: 1rem;
|
||||
border-right: none;
|
||||
padding-left: .35rem;
|
||||
}
|
||||
|
||||
label.theme-auto {
|
||||
}
|
||||
|
||||
label.theme-dark {
|
||||
border-top-right-radius: 1rem;
|
||||
border-bottom-right-radius: 1rem;
|
||||
border-left: none;
|
||||
padding-right: .35rem;
|
||||
}
|
||||
|
||||
footer input {
|
||||
/* To allow screen reader to still access these. */
|
||||
/* From https://lyra.horse/blog/2025/08/you-dont-need-js/ */
|
||||
opacity: 0;
|
||||
position: absolute;
|
||||
pointer-events: none;
|
||||
}
|
||||
|
||||
/* Pagination */
|
||||
.pagination,
|
||||
.pagination li {
|
||||
@@ -1055,7 +1167,43 @@ pre[class*=language-]::selection {
|
||||
}
|
||||
}</style>
|
||||
|
||||
<script type="module"></script>
|
||||
|
||||
|
||||
<script type="module">const THEME = "theme";
|
||||
|
||||
const saveTheme = (themeValue) => {
|
||||
localStorage.setItem(THEME, themeValue);
|
||||
};
|
||||
|
||||
const themeLight = document.getElementById("theme-light");
|
||||
themeLight.addEventListener("input", (e) => {
|
||||
saveTheme(themeLight.value);
|
||||
});
|
||||
|
||||
const themeAuto = document.getElementById("theme-auto");
|
||||
themeAuto.addEventListener("input", (e) => {
|
||||
saveTheme(themeAuto.auto);
|
||||
});
|
||||
|
||||
const themeDark = document.getElementById("theme-dark");
|
||||
themeDark.addEventListener("input", (e) => {
|
||||
saveTheme(themeDark.value);
|
||||
});
|
||||
|
||||
var currentThemeValue = localStorage.getItem(THEME);
|
||||
switch (currentThemeValue) {
|
||||
case "light":
|
||||
themeLight.checked = true;
|
||||
break;
|
||||
case "auto":
|
||||
themeAuto.checked = true;
|
||||
break;
|
||||
case "dark":
|
||||
themeDark.checked = true;
|
||||
break;
|
||||
default:
|
||||
themeAuto.checked = true;
|
||||
}</script>
|
||||
|
||||
</head>
|
||||
<body>
|
||||
@@ -1396,9 +1544,30 @@ pre[class*=language-]::selection {
|
||||
</a>
|
||||
</li>
|
||||
</ul>
|
||||
|
||||
<fieldset id="theme">
|
||||
<legend>color scheme</legend>
|
||||
|
||||
<input type="radio" id="theme-light" name="theme" value="light">
|
||||
<label class="theme-light" for="theme-light">
|
||||
<i class="fa-regular fa-sun" aria-hidden="true"></i>
|
||||
light
|
||||
</label>
|
||||
|
||||
<input type="radio" id="theme-auto" name="theme" value="auto">
|
||||
<label class="theme-auto" for="theme-auto">
|
||||
auto
|
||||
</label>
|
||||
|
||||
<input type="radio" id="theme-dark" name="theme" value="dark">
|
||||
<label class="theme-dark" for="theme-dark">
|
||||
dark
|
||||
<i class="fa-regular fa-moon" aria-hidden="true"></i>
|
||||
</label>
|
||||
</fieldset>
|
||||
</footer>
|
||||
|
||||
|
||||
<!-- This page `/10/` was built on 2026-09-08T23:18:39.655Z -->
|
||||
<!-- This page `/10/` was built on 2026-09-09T20:38:10.209Z -->
|
||||
</body>
|
||||
</html>
|
||||
|
||||
+172
-3
@@ -311,6 +311,13 @@
|
||||
--color-grey: light-dark(var(--color-grey-dark), var(--color-grey-light));
|
||||
}
|
||||
|
||||
:root:has(#theme-light:checked) {
|
||||
color-scheme: light;
|
||||
}
|
||||
:root:has(#theme-dark:checked) {
|
||||
color-scheme: dark;
|
||||
}
|
||||
|
||||
/* Base */
|
||||
|
||||
* {
|
||||
@@ -454,7 +461,7 @@ ul, ol, dl, li {
|
||||
}
|
||||
|
||||
li {
|
||||
line-height: 1.2 5;
|
||||
line-height: 1.2;
|
||||
margin-top: .65rem;
|
||||
margin-bottom: .65rem;
|
||||
}
|
||||
@@ -793,6 +800,111 @@ footer a:focus-visible {
|
||||
outline-color: var(--color-pink);
|
||||
}
|
||||
|
||||
/* color picker */
|
||||
#theme {
|
||||
display: flex;
|
||||
justify-content: center;
|
||||
margin: .5rem auto 0;
|
||||
padding: 0 .75rem .5rem;
|
||||
width: fit-content;
|
||||
border: .125rem solid var(--color-teal);
|
||||
border-radius: 2rem;
|
||||
}
|
||||
|
||||
#theme legend {
|
||||
margin: 0 auto;
|
||||
color: var(--color-teal);
|
||||
}
|
||||
|
||||
footer label {
|
||||
cursor: pointer;
|
||||
border: .125rem solid var(--color-pink);
|
||||
padding: 0 .25rem;
|
||||
color: var(--color-pink);
|
||||
background-color: var(--color-bg); /* this stops the box shadows from showing through */
|
||||
box-shadow: .15em .15em var(--color-shadow);
|
||||
/* Click animation handling */
|
||||
position: relative;
|
||||
top: 0;
|
||||
left: 0;
|
||||
transition: top .05s ease-in, left .05s ease-in;
|
||||
}
|
||||
|
||||
footer input:checked + label {
|
||||
color: var(--color-blue);
|
||||
border-color: var(--color-blue);
|
||||
}
|
||||
|
||||
footer label i {
|
||||
color: var(--color-teal);
|
||||
}
|
||||
|
||||
footer input:checked + label i {
|
||||
color: var(--color-pink);
|
||||
}
|
||||
|
||||
@media (any-hover: hover) {
|
||||
footer label:hover,
|
||||
footer input:checked + label:hover,
|
||||
footer label:hover i,
|
||||
footer input:checked + label:hover i {
|
||||
color: var(--color-bg);
|
||||
}
|
||||
|
||||
footer label:hover {
|
||||
background-color: var(--color-pink);
|
||||
}
|
||||
|
||||
footer input:checked + label:hover {
|
||||
background-color: var(--color-teal);
|
||||
}
|
||||
}
|
||||
|
||||
footer input:focus-visible + label,
|
||||
footer input:focus-visible + label i {
|
||||
color: var(--color-bg);
|
||||
background-color: var(--color-pink);
|
||||
border-color: var(--color-pink);
|
||||
}
|
||||
|
||||
footer input:checked:focus-visible + label,
|
||||
footer input:checked:focus-visible + label i {
|
||||
color: var(--color-bg);
|
||||
background-color: var(--color-teal);
|
||||
border-color: var(--color-teal);
|
||||
}
|
||||
|
||||
footer label:active {
|
||||
top: .09em;
|
||||
left: .09em;
|
||||
box-shadow: .05em .05em var(--color-shadow);
|
||||
}
|
||||
|
||||
label.theme-light {
|
||||
border-top-left-radius: 1rem;
|
||||
border-bottom-left-radius: 1rem;
|
||||
border-right: none;
|
||||
padding-left: .35rem;
|
||||
}
|
||||
|
||||
label.theme-auto {
|
||||
}
|
||||
|
||||
label.theme-dark {
|
||||
border-top-right-radius: 1rem;
|
||||
border-bottom-right-radius: 1rem;
|
||||
border-left: none;
|
||||
padding-right: .35rem;
|
||||
}
|
||||
|
||||
footer input {
|
||||
/* To allow screen reader to still access these. */
|
||||
/* From https://lyra.horse/blog/2025/08/you-dont-need-js/ */
|
||||
opacity: 0;
|
||||
position: absolute;
|
||||
pointer-events: none;
|
||||
}
|
||||
|
||||
/* Pagination */
|
||||
.pagination,
|
||||
.pagination li {
|
||||
@@ -1055,7 +1167,43 @@ pre[class*=language-]::selection {
|
||||
}
|
||||
}</style>
|
||||
|
||||
<script type="module"></script>
|
||||
|
||||
|
||||
<script type="module">const THEME = "theme";
|
||||
|
||||
const saveTheme = (themeValue) => {
|
||||
localStorage.setItem(THEME, themeValue);
|
||||
};
|
||||
|
||||
const themeLight = document.getElementById("theme-light");
|
||||
themeLight.addEventListener("input", (e) => {
|
||||
saveTheme(themeLight.value);
|
||||
});
|
||||
|
||||
const themeAuto = document.getElementById("theme-auto");
|
||||
themeAuto.addEventListener("input", (e) => {
|
||||
saveTheme(themeAuto.auto);
|
||||
});
|
||||
|
||||
const themeDark = document.getElementById("theme-dark");
|
||||
themeDark.addEventListener("input", (e) => {
|
||||
saveTheme(themeDark.value);
|
||||
});
|
||||
|
||||
var currentThemeValue = localStorage.getItem(THEME);
|
||||
switch (currentThemeValue) {
|
||||
case "light":
|
||||
themeLight.checked = true;
|
||||
break;
|
||||
case "auto":
|
||||
themeAuto.checked = true;
|
||||
break;
|
||||
case "dark":
|
||||
themeDark.checked = true;
|
||||
break;
|
||||
default:
|
||||
themeAuto.checked = true;
|
||||
}</script>
|
||||
|
||||
</head>
|
||||
<body>
|
||||
@@ -1374,9 +1522,30 @@ pre[class*=language-]::selection {
|
||||
</a>
|
||||
</li>
|
||||
</ul>
|
||||
|
||||
<fieldset id="theme">
|
||||
<legend>color scheme</legend>
|
||||
|
||||
<input type="radio" id="theme-light" name="theme" value="light">
|
||||
<label class="theme-light" for="theme-light">
|
||||
<i class="fa-regular fa-sun" aria-hidden="true"></i>
|
||||
light
|
||||
</label>
|
||||
|
||||
<input type="radio" id="theme-auto" name="theme" value="auto">
|
||||
<label class="theme-auto" for="theme-auto">
|
||||
auto
|
||||
</label>
|
||||
|
||||
<input type="radio" id="theme-dark" name="theme" value="dark">
|
||||
<label class="theme-dark" for="theme-dark">
|
||||
dark
|
||||
<i class="fa-regular fa-moon" aria-hidden="true"></i>
|
||||
</label>
|
||||
</fieldset>
|
||||
</footer>
|
||||
|
||||
|
||||
<!-- This page `/11/` was built on 2026-09-08T23:18:40.098Z -->
|
||||
<!-- This page `/11/` was built on 2026-09-09T20:38:10.545Z -->
|
||||
</body>
|
||||
</html>
|
||||
|
||||
+172
-3
@@ -311,6 +311,13 @@
|
||||
--color-grey: light-dark(var(--color-grey-dark), var(--color-grey-light));
|
||||
}
|
||||
|
||||
:root:has(#theme-light:checked) {
|
||||
color-scheme: light;
|
||||
}
|
||||
:root:has(#theme-dark:checked) {
|
||||
color-scheme: dark;
|
||||
}
|
||||
|
||||
/* Base */
|
||||
|
||||
* {
|
||||
@@ -454,7 +461,7 @@ ul, ol, dl, li {
|
||||
}
|
||||
|
||||
li {
|
||||
line-height: 1.2 5;
|
||||
line-height: 1.2;
|
||||
margin-top: .65rem;
|
||||
margin-bottom: .65rem;
|
||||
}
|
||||
@@ -793,6 +800,111 @@ footer a:focus-visible {
|
||||
outline-color: var(--color-pink);
|
||||
}
|
||||
|
||||
/* color picker */
|
||||
#theme {
|
||||
display: flex;
|
||||
justify-content: center;
|
||||
margin: .5rem auto 0;
|
||||
padding: 0 .75rem .5rem;
|
||||
width: fit-content;
|
||||
border: .125rem solid var(--color-teal);
|
||||
border-radius: 2rem;
|
||||
}
|
||||
|
||||
#theme legend {
|
||||
margin: 0 auto;
|
||||
color: var(--color-teal);
|
||||
}
|
||||
|
||||
footer label {
|
||||
cursor: pointer;
|
||||
border: .125rem solid var(--color-pink);
|
||||
padding: 0 .25rem;
|
||||
color: var(--color-pink);
|
||||
background-color: var(--color-bg); /* this stops the box shadows from showing through */
|
||||
box-shadow: .15em .15em var(--color-shadow);
|
||||
/* Click animation handling */
|
||||
position: relative;
|
||||
top: 0;
|
||||
left: 0;
|
||||
transition: top .05s ease-in, left .05s ease-in;
|
||||
}
|
||||
|
||||
footer input:checked + label {
|
||||
color: var(--color-blue);
|
||||
border-color: var(--color-blue);
|
||||
}
|
||||
|
||||
footer label i {
|
||||
color: var(--color-teal);
|
||||
}
|
||||
|
||||
footer input:checked + label i {
|
||||
color: var(--color-pink);
|
||||
}
|
||||
|
||||
@media (any-hover: hover) {
|
||||
footer label:hover,
|
||||
footer input:checked + label:hover,
|
||||
footer label:hover i,
|
||||
footer input:checked + label:hover i {
|
||||
color: var(--color-bg);
|
||||
}
|
||||
|
||||
footer label:hover {
|
||||
background-color: var(--color-pink);
|
||||
}
|
||||
|
||||
footer input:checked + label:hover {
|
||||
background-color: var(--color-teal);
|
||||
}
|
||||
}
|
||||
|
||||
footer input:focus-visible + label,
|
||||
footer input:focus-visible + label i {
|
||||
color: var(--color-bg);
|
||||
background-color: var(--color-pink);
|
||||
border-color: var(--color-pink);
|
||||
}
|
||||
|
||||
footer input:checked:focus-visible + label,
|
||||
footer input:checked:focus-visible + label i {
|
||||
color: var(--color-bg);
|
||||
background-color: var(--color-teal);
|
||||
border-color: var(--color-teal);
|
||||
}
|
||||
|
||||
footer label:active {
|
||||
top: .09em;
|
||||
left: .09em;
|
||||
box-shadow: .05em .05em var(--color-shadow);
|
||||
}
|
||||
|
||||
label.theme-light {
|
||||
border-top-left-radius: 1rem;
|
||||
border-bottom-left-radius: 1rem;
|
||||
border-right: none;
|
||||
padding-left: .35rem;
|
||||
}
|
||||
|
||||
label.theme-auto {
|
||||
}
|
||||
|
||||
label.theme-dark {
|
||||
border-top-right-radius: 1rem;
|
||||
border-bottom-right-radius: 1rem;
|
||||
border-left: none;
|
||||
padding-right: .35rem;
|
||||
}
|
||||
|
||||
footer input {
|
||||
/* To allow screen reader to still access these. */
|
||||
/* From https://lyra.horse/blog/2025/08/you-dont-need-js/ */
|
||||
opacity: 0;
|
||||
position: absolute;
|
||||
pointer-events: none;
|
||||
}
|
||||
|
||||
/* Pagination */
|
||||
.pagination,
|
||||
.pagination li {
|
||||
@@ -1055,7 +1167,43 @@ pre[class*=language-]::selection {
|
||||
}
|
||||
}</style>
|
||||
|
||||
<script type="module"></script>
|
||||
|
||||
|
||||
<script type="module">const THEME = "theme";
|
||||
|
||||
const saveTheme = (themeValue) => {
|
||||
localStorage.setItem(THEME, themeValue);
|
||||
};
|
||||
|
||||
const themeLight = document.getElementById("theme-light");
|
||||
themeLight.addEventListener("input", (e) => {
|
||||
saveTheme(themeLight.value);
|
||||
});
|
||||
|
||||
const themeAuto = document.getElementById("theme-auto");
|
||||
themeAuto.addEventListener("input", (e) => {
|
||||
saveTheme(themeAuto.auto);
|
||||
});
|
||||
|
||||
const themeDark = document.getElementById("theme-dark");
|
||||
themeDark.addEventListener("input", (e) => {
|
||||
saveTheme(themeDark.value);
|
||||
});
|
||||
|
||||
var currentThemeValue = localStorage.getItem(THEME);
|
||||
switch (currentThemeValue) {
|
||||
case "light":
|
||||
themeLight.checked = true;
|
||||
break;
|
||||
case "auto":
|
||||
themeAuto.checked = true;
|
||||
break;
|
||||
case "dark":
|
||||
themeDark.checked = true;
|
||||
break;
|
||||
default:
|
||||
themeAuto.checked = true;
|
||||
}</script>
|
||||
|
||||
</head>
|
||||
<body>
|
||||
@@ -1384,9 +1532,30 @@ pre[class*=language-]::selection {
|
||||
</a>
|
||||
</li>
|
||||
</ul>
|
||||
|
||||
<fieldset id="theme">
|
||||
<legend>color scheme</legend>
|
||||
|
||||
<input type="radio" id="theme-light" name="theme" value="light">
|
||||
<label class="theme-light" for="theme-light">
|
||||
<i class="fa-regular fa-sun" aria-hidden="true"></i>
|
||||
light
|
||||
</label>
|
||||
|
||||
<input type="radio" id="theme-auto" name="theme" value="auto">
|
||||
<label class="theme-auto" for="theme-auto">
|
||||
auto
|
||||
</label>
|
||||
|
||||
<input type="radio" id="theme-dark" name="theme" value="dark">
|
||||
<label class="theme-dark" for="theme-dark">
|
||||
dark
|
||||
<i class="fa-regular fa-moon" aria-hidden="true"></i>
|
||||
</label>
|
||||
</fieldset>
|
||||
</footer>
|
||||
|
||||
|
||||
<!-- This page `/12/` was built on 2026-09-08T23:18:40.329Z -->
|
||||
<!-- This page `/12/` was built on 2026-09-09T20:38:10.792Z -->
|
||||
</body>
|
||||
</html>
|
||||
|
||||
+172
-3
@@ -311,6 +311,13 @@
|
||||
--color-grey: light-dark(var(--color-grey-dark), var(--color-grey-light));
|
||||
}
|
||||
|
||||
:root:has(#theme-light:checked) {
|
||||
color-scheme: light;
|
||||
}
|
||||
:root:has(#theme-dark:checked) {
|
||||
color-scheme: dark;
|
||||
}
|
||||
|
||||
/* Base */
|
||||
|
||||
* {
|
||||
@@ -454,7 +461,7 @@ ul, ol, dl, li {
|
||||
}
|
||||
|
||||
li {
|
||||
line-height: 1.2 5;
|
||||
line-height: 1.2;
|
||||
margin-top: .65rem;
|
||||
margin-bottom: .65rem;
|
||||
}
|
||||
@@ -793,6 +800,111 @@ footer a:focus-visible {
|
||||
outline-color: var(--color-pink);
|
||||
}
|
||||
|
||||
/* color picker */
|
||||
#theme {
|
||||
display: flex;
|
||||
justify-content: center;
|
||||
margin: .5rem auto 0;
|
||||
padding: 0 .75rem .5rem;
|
||||
width: fit-content;
|
||||
border: .125rem solid var(--color-teal);
|
||||
border-radius: 2rem;
|
||||
}
|
||||
|
||||
#theme legend {
|
||||
margin: 0 auto;
|
||||
color: var(--color-teal);
|
||||
}
|
||||
|
||||
footer label {
|
||||
cursor: pointer;
|
||||
border: .125rem solid var(--color-pink);
|
||||
padding: 0 .25rem;
|
||||
color: var(--color-pink);
|
||||
background-color: var(--color-bg); /* this stops the box shadows from showing through */
|
||||
box-shadow: .15em .15em var(--color-shadow);
|
||||
/* Click animation handling */
|
||||
position: relative;
|
||||
top: 0;
|
||||
left: 0;
|
||||
transition: top .05s ease-in, left .05s ease-in;
|
||||
}
|
||||
|
||||
footer input:checked + label {
|
||||
color: var(--color-blue);
|
||||
border-color: var(--color-blue);
|
||||
}
|
||||
|
||||
footer label i {
|
||||
color: var(--color-teal);
|
||||
}
|
||||
|
||||
footer input:checked + label i {
|
||||
color: var(--color-pink);
|
||||
}
|
||||
|
||||
@media (any-hover: hover) {
|
||||
footer label:hover,
|
||||
footer input:checked + label:hover,
|
||||
footer label:hover i,
|
||||
footer input:checked + label:hover i {
|
||||
color: var(--color-bg);
|
||||
}
|
||||
|
||||
footer label:hover {
|
||||
background-color: var(--color-pink);
|
||||
}
|
||||
|
||||
footer input:checked + label:hover {
|
||||
background-color: var(--color-teal);
|
||||
}
|
||||
}
|
||||
|
||||
footer input:focus-visible + label,
|
||||
footer input:focus-visible + label i {
|
||||
color: var(--color-bg);
|
||||
background-color: var(--color-pink);
|
||||
border-color: var(--color-pink);
|
||||
}
|
||||
|
||||
footer input:checked:focus-visible + label,
|
||||
footer input:checked:focus-visible + label i {
|
||||
color: var(--color-bg);
|
||||
background-color: var(--color-teal);
|
||||
border-color: var(--color-teal);
|
||||
}
|
||||
|
||||
footer label:active {
|
||||
top: .09em;
|
||||
left: .09em;
|
||||
box-shadow: .05em .05em var(--color-shadow);
|
||||
}
|
||||
|
||||
label.theme-light {
|
||||
border-top-left-radius: 1rem;
|
||||
border-bottom-left-radius: 1rem;
|
||||
border-right: none;
|
||||
padding-left: .35rem;
|
||||
}
|
||||
|
||||
label.theme-auto {
|
||||
}
|
||||
|
||||
label.theme-dark {
|
||||
border-top-right-radius: 1rem;
|
||||
border-bottom-right-radius: 1rem;
|
||||
border-left: none;
|
||||
padding-right: .35rem;
|
||||
}
|
||||
|
||||
footer input {
|
||||
/* To allow screen reader to still access these. */
|
||||
/* From https://lyra.horse/blog/2025/08/you-dont-need-js/ */
|
||||
opacity: 0;
|
||||
position: absolute;
|
||||
pointer-events: none;
|
||||
}
|
||||
|
||||
/* Pagination */
|
||||
.pagination,
|
||||
.pagination li {
|
||||
@@ -1055,7 +1167,43 @@ pre[class*=language-]::selection {
|
||||
}
|
||||
}</style>
|
||||
|
||||
<script type="module"></script>
|
||||
|
||||
|
||||
<script type="module">const THEME = "theme";
|
||||
|
||||
const saveTheme = (themeValue) => {
|
||||
localStorage.setItem(THEME, themeValue);
|
||||
};
|
||||
|
||||
const themeLight = document.getElementById("theme-light");
|
||||
themeLight.addEventListener("input", (e) => {
|
||||
saveTheme(themeLight.value);
|
||||
});
|
||||
|
||||
const themeAuto = document.getElementById("theme-auto");
|
||||
themeAuto.addEventListener("input", (e) => {
|
||||
saveTheme(themeAuto.auto);
|
||||
});
|
||||
|
||||
const themeDark = document.getElementById("theme-dark");
|
||||
themeDark.addEventListener("input", (e) => {
|
||||
saveTheme(themeDark.value);
|
||||
});
|
||||
|
||||
var currentThemeValue = localStorage.getItem(THEME);
|
||||
switch (currentThemeValue) {
|
||||
case "light":
|
||||
themeLight.checked = true;
|
||||
break;
|
||||
case "auto":
|
||||
themeAuto.checked = true;
|
||||
break;
|
||||
case "dark":
|
||||
themeDark.checked = true;
|
||||
break;
|
||||
default:
|
||||
themeAuto.checked = true;
|
||||
}</script>
|
||||
|
||||
</head>
|
||||
<body>
|
||||
@@ -1376,9 +1524,30 @@ pre[class*=language-]::selection {
|
||||
</a>
|
||||
</li>
|
||||
</ul>
|
||||
|
||||
<fieldset id="theme">
|
||||
<legend>color scheme</legend>
|
||||
|
||||
<input type="radio" id="theme-light" name="theme" value="light">
|
||||
<label class="theme-light" for="theme-light">
|
||||
<i class="fa-regular fa-sun" aria-hidden="true"></i>
|
||||
light
|
||||
</label>
|
||||
|
||||
<input type="radio" id="theme-auto" name="theme" value="auto">
|
||||
<label class="theme-auto" for="theme-auto">
|
||||
auto
|
||||
</label>
|
||||
|
||||
<input type="radio" id="theme-dark" name="theme" value="dark">
|
||||
<label class="theme-dark" for="theme-dark">
|
||||
dark
|
||||
<i class="fa-regular fa-moon" aria-hidden="true"></i>
|
||||
</label>
|
||||
</fieldset>
|
||||
</footer>
|
||||
|
||||
|
||||
<!-- This page `/13/` was built on 2026-09-08T23:18:40.452Z -->
|
||||
<!-- This page `/13/` was built on 2026-09-09T20:38:11.000Z -->
|
||||
</body>
|
||||
</html>
|
||||
|
||||
+172
-3
@@ -311,6 +311,13 @@
|
||||
--color-grey: light-dark(var(--color-grey-dark), var(--color-grey-light));
|
||||
}
|
||||
|
||||
:root:has(#theme-light:checked) {
|
||||
color-scheme: light;
|
||||
}
|
||||
:root:has(#theme-dark:checked) {
|
||||
color-scheme: dark;
|
||||
}
|
||||
|
||||
/* Base */
|
||||
|
||||
* {
|
||||
@@ -454,7 +461,7 @@ ul, ol, dl, li {
|
||||
}
|
||||
|
||||
li {
|
||||
line-height: 1.2 5;
|
||||
line-height: 1.2;
|
||||
margin-top: .65rem;
|
||||
margin-bottom: .65rem;
|
||||
}
|
||||
@@ -793,6 +800,111 @@ footer a:focus-visible {
|
||||
outline-color: var(--color-pink);
|
||||
}
|
||||
|
||||
/* color picker */
|
||||
#theme {
|
||||
display: flex;
|
||||
justify-content: center;
|
||||
margin: .5rem auto 0;
|
||||
padding: 0 .75rem .5rem;
|
||||
width: fit-content;
|
||||
border: .125rem solid var(--color-teal);
|
||||
border-radius: 2rem;
|
||||
}
|
||||
|
||||
#theme legend {
|
||||
margin: 0 auto;
|
||||
color: var(--color-teal);
|
||||
}
|
||||
|
||||
footer label {
|
||||
cursor: pointer;
|
||||
border: .125rem solid var(--color-pink);
|
||||
padding: 0 .25rem;
|
||||
color: var(--color-pink);
|
||||
background-color: var(--color-bg); /* this stops the box shadows from showing through */
|
||||
box-shadow: .15em .15em var(--color-shadow);
|
||||
/* Click animation handling */
|
||||
position: relative;
|
||||
top: 0;
|
||||
left: 0;
|
||||
transition: top .05s ease-in, left .05s ease-in;
|
||||
}
|
||||
|
||||
footer input:checked + label {
|
||||
color: var(--color-blue);
|
||||
border-color: var(--color-blue);
|
||||
}
|
||||
|
||||
footer label i {
|
||||
color: var(--color-teal);
|
||||
}
|
||||
|
||||
footer input:checked + label i {
|
||||
color: var(--color-pink);
|
||||
}
|
||||
|
||||
@media (any-hover: hover) {
|
||||
footer label:hover,
|
||||
footer input:checked + label:hover,
|
||||
footer label:hover i,
|
||||
footer input:checked + label:hover i {
|
||||
color: var(--color-bg);
|
||||
}
|
||||
|
||||
footer label:hover {
|
||||
background-color: var(--color-pink);
|
||||
}
|
||||
|
||||
footer input:checked + label:hover {
|
||||
background-color: var(--color-teal);
|
||||
}
|
||||
}
|
||||
|
||||
footer input:focus-visible + label,
|
||||
footer input:focus-visible + label i {
|
||||
color: var(--color-bg);
|
||||
background-color: var(--color-pink);
|
||||
border-color: var(--color-pink);
|
||||
}
|
||||
|
||||
footer input:checked:focus-visible + label,
|
||||
footer input:checked:focus-visible + label i {
|
||||
color: var(--color-bg);
|
||||
background-color: var(--color-teal);
|
||||
border-color: var(--color-teal);
|
||||
}
|
||||
|
||||
footer label:active {
|
||||
top: .09em;
|
||||
left: .09em;
|
||||
box-shadow: .05em .05em var(--color-shadow);
|
||||
}
|
||||
|
||||
label.theme-light {
|
||||
border-top-left-radius: 1rem;
|
||||
border-bottom-left-radius: 1rem;
|
||||
border-right: none;
|
||||
padding-left: .35rem;
|
||||
}
|
||||
|
||||
label.theme-auto {
|
||||
}
|
||||
|
||||
label.theme-dark {
|
||||
border-top-right-radius: 1rem;
|
||||
border-bottom-right-radius: 1rem;
|
||||
border-left: none;
|
||||
padding-right: .35rem;
|
||||
}
|
||||
|
||||
footer input {
|
||||
/* To allow screen reader to still access these. */
|
||||
/* From https://lyra.horse/blog/2025/08/you-dont-need-js/ */
|
||||
opacity: 0;
|
||||
position: absolute;
|
||||
pointer-events: none;
|
||||
}
|
||||
|
||||
/* Pagination */
|
||||
.pagination,
|
||||
.pagination li {
|
||||
@@ -1055,7 +1167,43 @@ pre[class*=language-]::selection {
|
||||
}
|
||||
}</style>
|
||||
|
||||
<script type="module"></script>
|
||||
|
||||
|
||||
<script type="module">const THEME = "theme";
|
||||
|
||||
const saveTheme = (themeValue) => {
|
||||
localStorage.setItem(THEME, themeValue);
|
||||
};
|
||||
|
||||
const themeLight = document.getElementById("theme-light");
|
||||
themeLight.addEventListener("input", (e) => {
|
||||
saveTheme(themeLight.value);
|
||||
});
|
||||
|
||||
const themeAuto = document.getElementById("theme-auto");
|
||||
themeAuto.addEventListener("input", (e) => {
|
||||
saveTheme(themeAuto.auto);
|
||||
});
|
||||
|
||||
const themeDark = document.getElementById("theme-dark");
|
||||
themeDark.addEventListener("input", (e) => {
|
||||
saveTheme(themeDark.value);
|
||||
});
|
||||
|
||||
var currentThemeValue = localStorage.getItem(THEME);
|
||||
switch (currentThemeValue) {
|
||||
case "light":
|
||||
themeLight.checked = true;
|
||||
break;
|
||||
case "auto":
|
||||
themeAuto.checked = true;
|
||||
break;
|
||||
case "dark":
|
||||
themeDark.checked = true;
|
||||
break;
|
||||
default:
|
||||
themeAuto.checked = true;
|
||||
}</script>
|
||||
|
||||
</head>
|
||||
<body>
|
||||
@@ -1354,9 +1502,30 @@ pre[class*=language-]::selection {
|
||||
</a>
|
||||
</li>
|
||||
</ul>
|
||||
|
||||
<fieldset id="theme">
|
||||
<legend>color scheme</legend>
|
||||
|
||||
<input type="radio" id="theme-light" name="theme" value="light">
|
||||
<label class="theme-light" for="theme-light">
|
||||
<i class="fa-regular fa-sun" aria-hidden="true"></i>
|
||||
light
|
||||
</label>
|
||||
|
||||
<input type="radio" id="theme-auto" name="theme" value="auto">
|
||||
<label class="theme-auto" for="theme-auto">
|
||||
auto
|
||||
</label>
|
||||
|
||||
<input type="radio" id="theme-dark" name="theme" value="dark">
|
||||
<label class="theme-dark" for="theme-dark">
|
||||
dark
|
||||
<i class="fa-regular fa-moon" aria-hidden="true"></i>
|
||||
</label>
|
||||
</fieldset>
|
||||
</footer>
|
||||
|
||||
|
||||
<!-- This page `/14/` was built on 2026-09-08T23:18:40.669Z -->
|
||||
<!-- This page `/14/` was built on 2026-09-09T20:38:11.315Z -->
|
||||
</body>
|
||||
</html>
|
||||
|
||||
+172
-3
@@ -311,6 +311,13 @@
|
||||
--color-grey: light-dark(var(--color-grey-dark), var(--color-grey-light));
|
||||
}
|
||||
|
||||
:root:has(#theme-light:checked) {
|
||||
color-scheme: light;
|
||||
}
|
||||
:root:has(#theme-dark:checked) {
|
||||
color-scheme: dark;
|
||||
}
|
||||
|
||||
/* Base */
|
||||
|
||||
* {
|
||||
@@ -454,7 +461,7 @@ ul, ol, dl, li {
|
||||
}
|
||||
|
||||
li {
|
||||
line-height: 1.2 5;
|
||||
line-height: 1.2;
|
||||
margin-top: .65rem;
|
||||
margin-bottom: .65rem;
|
||||
}
|
||||
@@ -793,6 +800,111 @@ footer a:focus-visible {
|
||||
outline-color: var(--color-pink);
|
||||
}
|
||||
|
||||
/* color picker */
|
||||
#theme {
|
||||
display: flex;
|
||||
justify-content: center;
|
||||
margin: .5rem auto 0;
|
||||
padding: 0 .75rem .5rem;
|
||||
width: fit-content;
|
||||
border: .125rem solid var(--color-teal);
|
||||
border-radius: 2rem;
|
||||
}
|
||||
|
||||
#theme legend {
|
||||
margin: 0 auto;
|
||||
color: var(--color-teal);
|
||||
}
|
||||
|
||||
footer label {
|
||||
cursor: pointer;
|
||||
border: .125rem solid var(--color-pink);
|
||||
padding: 0 .25rem;
|
||||
color: var(--color-pink);
|
||||
background-color: var(--color-bg); /* this stops the box shadows from showing through */
|
||||
box-shadow: .15em .15em var(--color-shadow);
|
||||
/* Click animation handling */
|
||||
position: relative;
|
||||
top: 0;
|
||||
left: 0;
|
||||
transition: top .05s ease-in, left .05s ease-in;
|
||||
}
|
||||
|
||||
footer input:checked + label {
|
||||
color: var(--color-blue);
|
||||
border-color: var(--color-blue);
|
||||
}
|
||||
|
||||
footer label i {
|
||||
color: var(--color-teal);
|
||||
}
|
||||
|
||||
footer input:checked + label i {
|
||||
color: var(--color-pink);
|
||||
}
|
||||
|
||||
@media (any-hover: hover) {
|
||||
footer label:hover,
|
||||
footer input:checked + label:hover,
|
||||
footer label:hover i,
|
||||
footer input:checked + label:hover i {
|
||||
color: var(--color-bg);
|
||||
}
|
||||
|
||||
footer label:hover {
|
||||
background-color: var(--color-pink);
|
||||
}
|
||||
|
||||
footer input:checked + label:hover {
|
||||
background-color: var(--color-teal);
|
||||
}
|
||||
}
|
||||
|
||||
footer input:focus-visible + label,
|
||||
footer input:focus-visible + label i {
|
||||
color: var(--color-bg);
|
||||
background-color: var(--color-pink);
|
||||
border-color: var(--color-pink);
|
||||
}
|
||||
|
||||
footer input:checked:focus-visible + label,
|
||||
footer input:checked:focus-visible + label i {
|
||||
color: var(--color-bg);
|
||||
background-color: var(--color-teal);
|
||||
border-color: var(--color-teal);
|
||||
}
|
||||
|
||||
footer label:active {
|
||||
top: .09em;
|
||||
left: .09em;
|
||||
box-shadow: .05em .05em var(--color-shadow);
|
||||
}
|
||||
|
||||
label.theme-light {
|
||||
border-top-left-radius: 1rem;
|
||||
border-bottom-left-radius: 1rem;
|
||||
border-right: none;
|
||||
padding-left: .35rem;
|
||||
}
|
||||
|
||||
label.theme-auto {
|
||||
}
|
||||
|
||||
label.theme-dark {
|
||||
border-top-right-radius: 1rem;
|
||||
border-bottom-right-radius: 1rem;
|
||||
border-left: none;
|
||||
padding-right: .35rem;
|
||||
}
|
||||
|
||||
footer input {
|
||||
/* To allow screen reader to still access these. */
|
||||
/* From https://lyra.horse/blog/2025/08/you-dont-need-js/ */
|
||||
opacity: 0;
|
||||
position: absolute;
|
||||
pointer-events: none;
|
||||
}
|
||||
|
||||
/* Pagination */
|
||||
.pagination,
|
||||
.pagination li {
|
||||
@@ -1055,7 +1167,43 @@ pre[class*=language-]::selection {
|
||||
}
|
||||
}</style>
|
||||
|
||||
<script type="module"></script>
|
||||
|
||||
|
||||
<script type="module">const THEME = "theme";
|
||||
|
||||
const saveTheme = (themeValue) => {
|
||||
localStorage.setItem(THEME, themeValue);
|
||||
};
|
||||
|
||||
const themeLight = document.getElementById("theme-light");
|
||||
themeLight.addEventListener("input", (e) => {
|
||||
saveTheme(themeLight.value);
|
||||
});
|
||||
|
||||
const themeAuto = document.getElementById("theme-auto");
|
||||
themeAuto.addEventListener("input", (e) => {
|
||||
saveTheme(themeAuto.auto);
|
||||
});
|
||||
|
||||
const themeDark = document.getElementById("theme-dark");
|
||||
themeDark.addEventListener("input", (e) => {
|
||||
saveTheme(themeDark.value);
|
||||
});
|
||||
|
||||
var currentThemeValue = localStorage.getItem(THEME);
|
||||
switch (currentThemeValue) {
|
||||
case "light":
|
||||
themeLight.checked = true;
|
||||
break;
|
||||
case "auto":
|
||||
themeAuto.checked = true;
|
||||
break;
|
||||
case "dark":
|
||||
themeDark.checked = true;
|
||||
break;
|
||||
default:
|
||||
themeAuto.checked = true;
|
||||
}</script>
|
||||
|
||||
</head>
|
||||
<body>
|
||||
@@ -1238,9 +1386,30 @@ pre[class*=language-]::selection {
|
||||
</a>
|
||||
</li>
|
||||
</ul>
|
||||
|
||||
<fieldset id="theme">
|
||||
<legend>color scheme</legend>
|
||||
|
||||
<input type="radio" id="theme-light" name="theme" value="light">
|
||||
<label class="theme-light" for="theme-light">
|
||||
<i class="fa-regular fa-sun" aria-hidden="true"></i>
|
||||
light
|
||||
</label>
|
||||
|
||||
<input type="radio" id="theme-auto" name="theme" value="auto">
|
||||
<label class="theme-auto" for="theme-auto">
|
||||
auto
|
||||
</label>
|
||||
|
||||
<input type="radio" id="theme-dark" name="theme" value="dark">
|
||||
<label class="theme-dark" for="theme-dark">
|
||||
dark
|
||||
<i class="fa-regular fa-moon" aria-hidden="true"></i>
|
||||
</label>
|
||||
</fieldset>
|
||||
</footer>
|
||||
|
||||
|
||||
<!-- This page `/15/` was built on 2026-09-08T23:18:40.868Z -->
|
||||
<!-- This page `/15/` was built on 2026-09-09T20:38:11.523Z -->
|
||||
</body>
|
||||
</html>
|
||||
|
||||
+172
-3
@@ -311,6 +311,13 @@
|
||||
--color-grey: light-dark(var(--color-grey-dark), var(--color-grey-light));
|
||||
}
|
||||
|
||||
:root:has(#theme-light:checked) {
|
||||
color-scheme: light;
|
||||
}
|
||||
:root:has(#theme-dark:checked) {
|
||||
color-scheme: dark;
|
||||
}
|
||||
|
||||
/* Base */
|
||||
|
||||
* {
|
||||
@@ -454,7 +461,7 @@ ul, ol, dl, li {
|
||||
}
|
||||
|
||||
li {
|
||||
line-height: 1.2 5;
|
||||
line-height: 1.2;
|
||||
margin-top: .65rem;
|
||||
margin-bottom: .65rem;
|
||||
}
|
||||
@@ -793,6 +800,111 @@ footer a:focus-visible {
|
||||
outline-color: var(--color-pink);
|
||||
}
|
||||
|
||||
/* color picker */
|
||||
#theme {
|
||||
display: flex;
|
||||
justify-content: center;
|
||||
margin: .5rem auto 0;
|
||||
padding: 0 .75rem .5rem;
|
||||
width: fit-content;
|
||||
border: .125rem solid var(--color-teal);
|
||||
border-radius: 2rem;
|
||||
}
|
||||
|
||||
#theme legend {
|
||||
margin: 0 auto;
|
||||
color: var(--color-teal);
|
||||
}
|
||||
|
||||
footer label {
|
||||
cursor: pointer;
|
||||
border: .125rem solid var(--color-pink);
|
||||
padding: 0 .25rem;
|
||||
color: var(--color-pink);
|
||||
background-color: var(--color-bg); /* this stops the box shadows from showing through */
|
||||
box-shadow: .15em .15em var(--color-shadow);
|
||||
/* Click animation handling */
|
||||
position: relative;
|
||||
top: 0;
|
||||
left: 0;
|
||||
transition: top .05s ease-in, left .05s ease-in;
|
||||
}
|
||||
|
||||
footer input:checked + label {
|
||||
color: var(--color-blue);
|
||||
border-color: var(--color-blue);
|
||||
}
|
||||
|
||||
footer label i {
|
||||
color: var(--color-teal);
|
||||
}
|
||||
|
||||
footer input:checked + label i {
|
||||
color: var(--color-pink);
|
||||
}
|
||||
|
||||
@media (any-hover: hover) {
|
||||
footer label:hover,
|
||||
footer input:checked + label:hover,
|
||||
footer label:hover i,
|
||||
footer input:checked + label:hover i {
|
||||
color: var(--color-bg);
|
||||
}
|
||||
|
||||
footer label:hover {
|
||||
background-color: var(--color-pink);
|
||||
}
|
||||
|
||||
footer input:checked + label:hover {
|
||||
background-color: var(--color-teal);
|
||||
}
|
||||
}
|
||||
|
||||
footer input:focus-visible + label,
|
||||
footer input:focus-visible + label i {
|
||||
color: var(--color-bg);
|
||||
background-color: var(--color-pink);
|
||||
border-color: var(--color-pink);
|
||||
}
|
||||
|
||||
footer input:checked:focus-visible + label,
|
||||
footer input:checked:focus-visible + label i {
|
||||
color: var(--color-bg);
|
||||
background-color: var(--color-teal);
|
||||
border-color: var(--color-teal);
|
||||
}
|
||||
|
||||
footer label:active {
|
||||
top: .09em;
|
||||
left: .09em;
|
||||
box-shadow: .05em .05em var(--color-shadow);
|
||||
}
|
||||
|
||||
label.theme-light {
|
||||
border-top-left-radius: 1rem;
|
||||
border-bottom-left-radius: 1rem;
|
||||
border-right: none;
|
||||
padding-left: .35rem;
|
||||
}
|
||||
|
||||
label.theme-auto {
|
||||
}
|
||||
|
||||
label.theme-dark {
|
||||
border-top-right-radius: 1rem;
|
||||
border-bottom-right-radius: 1rem;
|
||||
border-left: none;
|
||||
padding-right: .35rem;
|
||||
}
|
||||
|
||||
footer input {
|
||||
/* To allow screen reader to still access these. */
|
||||
/* From https://lyra.horse/blog/2025/08/you-dont-need-js/ */
|
||||
opacity: 0;
|
||||
position: absolute;
|
||||
pointer-events: none;
|
||||
}
|
||||
|
||||
/* Pagination */
|
||||
.pagination,
|
||||
.pagination li {
|
||||
@@ -1055,7 +1167,43 @@ pre[class*=language-]::selection {
|
||||
}
|
||||
}</style>
|
||||
|
||||
<script type="module"></script>
|
||||
|
||||
|
||||
<script type="module">const THEME = "theme";
|
||||
|
||||
const saveTheme = (themeValue) => {
|
||||
localStorage.setItem(THEME, themeValue);
|
||||
};
|
||||
|
||||
const themeLight = document.getElementById("theme-light");
|
||||
themeLight.addEventListener("input", (e) => {
|
||||
saveTheme(themeLight.value);
|
||||
});
|
||||
|
||||
const themeAuto = document.getElementById("theme-auto");
|
||||
themeAuto.addEventListener("input", (e) => {
|
||||
saveTheme(themeAuto.auto);
|
||||
});
|
||||
|
||||
const themeDark = document.getElementById("theme-dark");
|
||||
themeDark.addEventListener("input", (e) => {
|
||||
saveTheme(themeDark.value);
|
||||
});
|
||||
|
||||
var currentThemeValue = localStorage.getItem(THEME);
|
||||
switch (currentThemeValue) {
|
||||
case "light":
|
||||
themeLight.checked = true;
|
||||
break;
|
||||
case "auto":
|
||||
themeAuto.checked = true;
|
||||
break;
|
||||
case "dark":
|
||||
themeDark.checked = true;
|
||||
break;
|
||||
default:
|
||||
themeAuto.checked = true;
|
||||
}</script>
|
||||
|
||||
</head>
|
||||
<body>
|
||||
@@ -1354,9 +1502,30 @@ pre[class*=language-]::selection {
|
||||
</a>
|
||||
</li>
|
||||
</ul>
|
||||
|
||||
<fieldset id="theme">
|
||||
<legend>color scheme</legend>
|
||||
|
||||
<input type="radio" id="theme-light" name="theme" value="light">
|
||||
<label class="theme-light" for="theme-light">
|
||||
<i class="fa-regular fa-sun" aria-hidden="true"></i>
|
||||
light
|
||||
</label>
|
||||
|
||||
<input type="radio" id="theme-auto" name="theme" value="auto">
|
||||
<label class="theme-auto" for="theme-auto">
|
||||
auto
|
||||
</label>
|
||||
|
||||
<input type="radio" id="theme-dark" name="theme" value="dark">
|
||||
<label class="theme-dark" for="theme-dark">
|
||||
dark
|
||||
<i class="fa-regular fa-moon" aria-hidden="true"></i>
|
||||
</label>
|
||||
</fieldset>
|
||||
</footer>
|
||||
|
||||
|
||||
<!-- This page `/2/` was built on 2026-09-08T23:18:36.245Z -->
|
||||
<!-- This page `/2/` was built on 2026-09-09T20:38:06.900Z -->
|
||||
</body>
|
||||
</html>
|
||||
|
||||
+172
-3
@@ -311,6 +311,13 @@
|
||||
--color-grey: light-dark(var(--color-grey-dark), var(--color-grey-light));
|
||||
}
|
||||
|
||||
:root:has(#theme-light:checked) {
|
||||
color-scheme: light;
|
||||
}
|
||||
:root:has(#theme-dark:checked) {
|
||||
color-scheme: dark;
|
||||
}
|
||||
|
||||
/* Base */
|
||||
|
||||
* {
|
||||
@@ -454,7 +461,7 @@ ul, ol, dl, li {
|
||||
}
|
||||
|
||||
li {
|
||||
line-height: 1.2 5;
|
||||
line-height: 1.2;
|
||||
margin-top: .65rem;
|
||||
margin-bottom: .65rem;
|
||||
}
|
||||
@@ -793,6 +800,111 @@ footer a:focus-visible {
|
||||
outline-color: var(--color-pink);
|
||||
}
|
||||
|
||||
/* color picker */
|
||||
#theme {
|
||||
display: flex;
|
||||
justify-content: center;
|
||||
margin: .5rem auto 0;
|
||||
padding: 0 .75rem .5rem;
|
||||
width: fit-content;
|
||||
border: .125rem solid var(--color-teal);
|
||||
border-radius: 2rem;
|
||||
}
|
||||
|
||||
#theme legend {
|
||||
margin: 0 auto;
|
||||
color: var(--color-teal);
|
||||
}
|
||||
|
||||
footer label {
|
||||
cursor: pointer;
|
||||
border: .125rem solid var(--color-pink);
|
||||
padding: 0 .25rem;
|
||||
color: var(--color-pink);
|
||||
background-color: var(--color-bg); /* this stops the box shadows from showing through */
|
||||
box-shadow: .15em .15em var(--color-shadow);
|
||||
/* Click animation handling */
|
||||
position: relative;
|
||||
top: 0;
|
||||
left: 0;
|
||||
transition: top .05s ease-in, left .05s ease-in;
|
||||
}
|
||||
|
||||
footer input:checked + label {
|
||||
color: var(--color-blue);
|
||||
border-color: var(--color-blue);
|
||||
}
|
||||
|
||||
footer label i {
|
||||
color: var(--color-teal);
|
||||
}
|
||||
|
||||
footer input:checked + label i {
|
||||
color: var(--color-pink);
|
||||
}
|
||||
|
||||
@media (any-hover: hover) {
|
||||
footer label:hover,
|
||||
footer input:checked + label:hover,
|
||||
footer label:hover i,
|
||||
footer input:checked + label:hover i {
|
||||
color: var(--color-bg);
|
||||
}
|
||||
|
||||
footer label:hover {
|
||||
background-color: var(--color-pink);
|
||||
}
|
||||
|
||||
footer input:checked + label:hover {
|
||||
background-color: var(--color-teal);
|
||||
}
|
||||
}
|
||||
|
||||
footer input:focus-visible + label,
|
||||
footer input:focus-visible + label i {
|
||||
color: var(--color-bg);
|
||||
background-color: var(--color-pink);
|
||||
border-color: var(--color-pink);
|
||||
}
|
||||
|
||||
footer input:checked:focus-visible + label,
|
||||
footer input:checked:focus-visible + label i {
|
||||
color: var(--color-bg);
|
||||
background-color: var(--color-teal);
|
||||
border-color: var(--color-teal);
|
||||
}
|
||||
|
||||
footer label:active {
|
||||
top: .09em;
|
||||
left: .09em;
|
||||
box-shadow: .05em .05em var(--color-shadow);
|
||||
}
|
||||
|
||||
label.theme-light {
|
||||
border-top-left-radius: 1rem;
|
||||
border-bottom-left-radius: 1rem;
|
||||
border-right: none;
|
||||
padding-left: .35rem;
|
||||
}
|
||||
|
||||
label.theme-auto {
|
||||
}
|
||||
|
||||
label.theme-dark {
|
||||
border-top-right-radius: 1rem;
|
||||
border-bottom-right-radius: 1rem;
|
||||
border-left: none;
|
||||
padding-right: .35rem;
|
||||
}
|
||||
|
||||
footer input {
|
||||
/* To allow screen reader to still access these. */
|
||||
/* From https://lyra.horse/blog/2025/08/you-dont-need-js/ */
|
||||
opacity: 0;
|
||||
position: absolute;
|
||||
pointer-events: none;
|
||||
}
|
||||
|
||||
/* Pagination */
|
||||
.pagination,
|
||||
.pagination li {
|
||||
@@ -1055,7 +1167,43 @@ pre[class*=language-]::selection {
|
||||
}
|
||||
}</style>
|
||||
|
||||
<script type="module"></script>
|
||||
|
||||
|
||||
<script type="module">const THEME = "theme";
|
||||
|
||||
const saveTheme = (themeValue) => {
|
||||
localStorage.setItem(THEME, themeValue);
|
||||
};
|
||||
|
||||
const themeLight = document.getElementById("theme-light");
|
||||
themeLight.addEventListener("input", (e) => {
|
||||
saveTheme(themeLight.value);
|
||||
});
|
||||
|
||||
const themeAuto = document.getElementById("theme-auto");
|
||||
themeAuto.addEventListener("input", (e) => {
|
||||
saveTheme(themeAuto.auto);
|
||||
});
|
||||
|
||||
const themeDark = document.getElementById("theme-dark");
|
||||
themeDark.addEventListener("input", (e) => {
|
||||
saveTheme(themeDark.value);
|
||||
});
|
||||
|
||||
var currentThemeValue = localStorage.getItem(THEME);
|
||||
switch (currentThemeValue) {
|
||||
case "light":
|
||||
themeLight.checked = true;
|
||||
break;
|
||||
case "auto":
|
||||
themeAuto.checked = true;
|
||||
break;
|
||||
case "dark":
|
||||
themeDark.checked = true;
|
||||
break;
|
||||
default:
|
||||
themeAuto.checked = true;
|
||||
}</script>
|
||||
|
||||
</head>
|
||||
<body>
|
||||
@@ -1354,9 +1502,30 @@ pre[class*=language-]::selection {
|
||||
</a>
|
||||
</li>
|
||||
</ul>
|
||||
|
||||
<fieldset id="theme">
|
||||
<legend>color scheme</legend>
|
||||
|
||||
<input type="radio" id="theme-light" name="theme" value="light">
|
||||
<label class="theme-light" for="theme-light">
|
||||
<i class="fa-regular fa-sun" aria-hidden="true"></i>
|
||||
light
|
||||
</label>
|
||||
|
||||
<input type="radio" id="theme-auto" name="theme" value="auto">
|
||||
<label class="theme-auto" for="theme-auto">
|
||||
auto
|
||||
</label>
|
||||
|
||||
<input type="radio" id="theme-dark" name="theme" value="dark">
|
||||
<label class="theme-dark" for="theme-dark">
|
||||
dark
|
||||
<i class="fa-regular fa-moon" aria-hidden="true"></i>
|
||||
</label>
|
||||
</fieldset>
|
||||
</footer>
|
||||
|
||||
|
||||
<!-- This page `/3/` was built on 2026-09-08T23:18:36.695Z -->
|
||||
<!-- This page `/3/` was built on 2026-09-09T20:38:07.328Z -->
|
||||
</body>
|
||||
</html>
|
||||
|
||||
+172
-3
@@ -311,6 +311,13 @@
|
||||
--color-grey: light-dark(var(--color-grey-dark), var(--color-grey-light));
|
||||
}
|
||||
|
||||
:root:has(#theme-light:checked) {
|
||||
color-scheme: light;
|
||||
}
|
||||
:root:has(#theme-dark:checked) {
|
||||
color-scheme: dark;
|
||||
}
|
||||
|
||||
/* Base */
|
||||
|
||||
* {
|
||||
@@ -454,7 +461,7 @@ ul, ol, dl, li {
|
||||
}
|
||||
|
||||
li {
|
||||
line-height: 1.2 5;
|
||||
line-height: 1.2;
|
||||
margin-top: .65rem;
|
||||
margin-bottom: .65rem;
|
||||
}
|
||||
@@ -793,6 +800,111 @@ footer a:focus-visible {
|
||||
outline-color: var(--color-pink);
|
||||
}
|
||||
|
||||
/* color picker */
|
||||
#theme {
|
||||
display: flex;
|
||||
justify-content: center;
|
||||
margin: .5rem auto 0;
|
||||
padding: 0 .75rem .5rem;
|
||||
width: fit-content;
|
||||
border: .125rem solid var(--color-teal);
|
||||
border-radius: 2rem;
|
||||
}
|
||||
|
||||
#theme legend {
|
||||
margin: 0 auto;
|
||||
color: var(--color-teal);
|
||||
}
|
||||
|
||||
footer label {
|
||||
cursor: pointer;
|
||||
border: .125rem solid var(--color-pink);
|
||||
padding: 0 .25rem;
|
||||
color: var(--color-pink);
|
||||
background-color: var(--color-bg); /* this stops the box shadows from showing through */
|
||||
box-shadow: .15em .15em var(--color-shadow);
|
||||
/* Click animation handling */
|
||||
position: relative;
|
||||
top: 0;
|
||||
left: 0;
|
||||
transition: top .05s ease-in, left .05s ease-in;
|
||||
}
|
||||
|
||||
footer input:checked + label {
|
||||
color: var(--color-blue);
|
||||
border-color: var(--color-blue);
|
||||
}
|
||||
|
||||
footer label i {
|
||||
color: var(--color-teal);
|
||||
}
|
||||
|
||||
footer input:checked + label i {
|
||||
color: var(--color-pink);
|
||||
}
|
||||
|
||||
@media (any-hover: hover) {
|
||||
footer label:hover,
|
||||
footer input:checked + label:hover,
|
||||
footer label:hover i,
|
||||
footer input:checked + label:hover i {
|
||||
color: var(--color-bg);
|
||||
}
|
||||
|
||||
footer label:hover {
|
||||
background-color: var(--color-pink);
|
||||
}
|
||||
|
||||
footer input:checked + label:hover {
|
||||
background-color: var(--color-teal);
|
||||
}
|
||||
}
|
||||
|
||||
footer input:focus-visible + label,
|
||||
footer input:focus-visible + label i {
|
||||
color: var(--color-bg);
|
||||
background-color: var(--color-pink);
|
||||
border-color: var(--color-pink);
|
||||
}
|
||||
|
||||
footer input:checked:focus-visible + label,
|
||||
footer input:checked:focus-visible + label i {
|
||||
color: var(--color-bg);
|
||||
background-color: var(--color-teal);
|
||||
border-color: var(--color-teal);
|
||||
}
|
||||
|
||||
footer label:active {
|
||||
top: .09em;
|
||||
left: .09em;
|
||||
box-shadow: .05em .05em var(--color-shadow);
|
||||
}
|
||||
|
||||
label.theme-light {
|
||||
border-top-left-radius: 1rem;
|
||||
border-bottom-left-radius: 1rem;
|
||||
border-right: none;
|
||||
padding-left: .35rem;
|
||||
}
|
||||
|
||||
label.theme-auto {
|
||||
}
|
||||
|
||||
label.theme-dark {
|
||||
border-top-right-radius: 1rem;
|
||||
border-bottom-right-radius: 1rem;
|
||||
border-left: none;
|
||||
padding-right: .35rem;
|
||||
}
|
||||
|
||||
footer input {
|
||||
/* To allow screen reader to still access these. */
|
||||
/* From https://lyra.horse/blog/2025/08/you-dont-need-js/ */
|
||||
opacity: 0;
|
||||
position: absolute;
|
||||
pointer-events: none;
|
||||
}
|
||||
|
||||
/* Pagination */
|
||||
.pagination,
|
||||
.pagination li {
|
||||
@@ -1055,7 +1167,43 @@ pre[class*=language-]::selection {
|
||||
}
|
||||
}</style>
|
||||
|
||||
<script type="module"></script>
|
||||
|
||||
|
||||
<script type="module">const THEME = "theme";
|
||||
|
||||
const saveTheme = (themeValue) => {
|
||||
localStorage.setItem(THEME, themeValue);
|
||||
};
|
||||
|
||||
const themeLight = document.getElementById("theme-light");
|
||||
themeLight.addEventListener("input", (e) => {
|
||||
saveTheme(themeLight.value);
|
||||
});
|
||||
|
||||
const themeAuto = document.getElementById("theme-auto");
|
||||
themeAuto.addEventListener("input", (e) => {
|
||||
saveTheme(themeAuto.auto);
|
||||
});
|
||||
|
||||
const themeDark = document.getElementById("theme-dark");
|
||||
themeDark.addEventListener("input", (e) => {
|
||||
saveTheme(themeDark.value);
|
||||
});
|
||||
|
||||
var currentThemeValue = localStorage.getItem(THEME);
|
||||
switch (currentThemeValue) {
|
||||
case "light":
|
||||
themeLight.checked = true;
|
||||
break;
|
||||
case "auto":
|
||||
themeAuto.checked = true;
|
||||
break;
|
||||
case "dark":
|
||||
themeDark.checked = true;
|
||||
break;
|
||||
default:
|
||||
themeAuto.checked = true;
|
||||
}</script>
|
||||
|
||||
</head>
|
||||
<body>
|
||||
@@ -1364,9 +1512,30 @@ pre[class*=language-]::selection {
|
||||
</a>
|
||||
</li>
|
||||
</ul>
|
||||
|
||||
<fieldset id="theme">
|
||||
<legend>color scheme</legend>
|
||||
|
||||
<input type="radio" id="theme-light" name="theme" value="light">
|
||||
<label class="theme-light" for="theme-light">
|
||||
<i class="fa-regular fa-sun" aria-hidden="true"></i>
|
||||
light
|
||||
</label>
|
||||
|
||||
<input type="radio" id="theme-auto" name="theme" value="auto">
|
||||
<label class="theme-auto" for="theme-auto">
|
||||
auto
|
||||
</label>
|
||||
|
||||
<input type="radio" id="theme-dark" name="theme" value="dark">
|
||||
<label class="theme-dark" for="theme-dark">
|
||||
dark
|
||||
<i class="fa-regular fa-moon" aria-hidden="true"></i>
|
||||
</label>
|
||||
</fieldset>
|
||||
</footer>
|
||||
|
||||
|
||||
<!-- This page `/4/` was built on 2026-09-08T23:18:37.162Z -->
|
||||
<!-- This page `/4/` was built on 2026-09-09T20:38:07.790Z -->
|
||||
</body>
|
||||
</html>
|
||||
|
||||
@@ -89,6 +89,13 @@
|
||||
--color-grey: light-dark(var(--color-grey-dark), var(--color-grey-light));
|
||||
}
|
||||
|
||||
:root:has(#theme-light:checked) {
|
||||
color-scheme: light;
|
||||
}
|
||||
:root:has(#theme-dark:checked) {
|
||||
color-scheme: dark;
|
||||
}
|
||||
|
||||
/* Base */
|
||||
|
||||
* {
|
||||
@@ -232,7 +239,7 @@ ul, ol, dl, li {
|
||||
}
|
||||
|
||||
li {
|
||||
line-height: 1.2 5;
|
||||
line-height: 1.2;
|
||||
margin-top: .65rem;
|
||||
margin-bottom: .65rem;
|
||||
}
|
||||
@@ -571,6 +578,111 @@ footer a:focus-visible {
|
||||
outline-color: var(--color-pink);
|
||||
}
|
||||
|
||||
/* color picker */
|
||||
#theme {
|
||||
display: flex;
|
||||
justify-content: center;
|
||||
margin: .5rem auto 0;
|
||||
padding: 0 .75rem .5rem;
|
||||
width: fit-content;
|
||||
border: .125rem solid var(--color-teal);
|
||||
border-radius: 2rem;
|
||||
}
|
||||
|
||||
#theme legend {
|
||||
margin: 0 auto;
|
||||
color: var(--color-teal);
|
||||
}
|
||||
|
||||
footer label {
|
||||
cursor: pointer;
|
||||
border: .125rem solid var(--color-pink);
|
||||
padding: 0 .25rem;
|
||||
color: var(--color-pink);
|
||||
background-color: var(--color-bg); /* this stops the box shadows from showing through */
|
||||
box-shadow: .15em .15em var(--color-shadow);
|
||||
/* Click animation handling */
|
||||
position: relative;
|
||||
top: 0;
|
||||
left: 0;
|
||||
transition: top .05s ease-in, left .05s ease-in;
|
||||
}
|
||||
|
||||
footer input:checked + label {
|
||||
color: var(--color-blue);
|
||||
border-color: var(--color-blue);
|
||||
}
|
||||
|
||||
footer label i {
|
||||
color: var(--color-teal);
|
||||
}
|
||||
|
||||
footer input:checked + label i {
|
||||
color: var(--color-pink);
|
||||
}
|
||||
|
||||
@media (any-hover: hover) {
|
||||
footer label:hover,
|
||||
footer input:checked + label:hover,
|
||||
footer label:hover i,
|
||||
footer input:checked + label:hover i {
|
||||
color: var(--color-bg);
|
||||
}
|
||||
|
||||
footer label:hover {
|
||||
background-color: var(--color-pink);
|
||||
}
|
||||
|
||||
footer input:checked + label:hover {
|
||||
background-color: var(--color-teal);
|
||||
}
|
||||
}
|
||||
|
||||
footer input:focus-visible + label,
|
||||
footer input:focus-visible + label i {
|
||||
color: var(--color-bg);
|
||||
background-color: var(--color-pink);
|
||||
border-color: var(--color-pink);
|
||||
}
|
||||
|
||||
footer input:checked:focus-visible + label,
|
||||
footer input:checked:focus-visible + label i {
|
||||
color: var(--color-bg);
|
||||
background-color: var(--color-teal);
|
||||
border-color: var(--color-teal);
|
||||
}
|
||||
|
||||
footer label:active {
|
||||
top: .09em;
|
||||
left: .09em;
|
||||
box-shadow: .05em .05em var(--color-shadow);
|
||||
}
|
||||
|
||||
label.theme-light {
|
||||
border-top-left-radius: 1rem;
|
||||
border-bottom-left-radius: 1rem;
|
||||
border-right: none;
|
||||
padding-left: .35rem;
|
||||
}
|
||||
|
||||
label.theme-auto {
|
||||
}
|
||||
|
||||
label.theme-dark {
|
||||
border-top-right-radius: 1rem;
|
||||
border-bottom-right-radius: 1rem;
|
||||
border-left: none;
|
||||
padding-right: .35rem;
|
||||
}
|
||||
|
||||
footer input {
|
||||
/* To allow screen reader to still access these. */
|
||||
/* From https://lyra.horse/blog/2025/08/you-dont-need-js/ */
|
||||
opacity: 0;
|
||||
position: absolute;
|
||||
pointer-events: none;
|
||||
}
|
||||
|
||||
/* Pagination */
|
||||
.pagination,
|
||||
.pagination li {
|
||||
@@ -833,6 +945,8 @@ pre[class*=language-]::selection {
|
||||
}
|
||||
}</style>
|
||||
|
||||
|
||||
|
||||
<script type="module">// Thank you to https://github.com/daviddarnes/heading-anchors
|
||||
// Thank you to https://amberwilson.co.uk/blog/are-your-anchor-links-accessible/
|
||||
|
||||
@@ -1063,7 +1177,42 @@ class HeadingAnchors extends HTMLElement {
|
||||
|
||||
HeadingAnchors.register();
|
||||
|
||||
export { HeadingAnchors }</script>
|
||||
export { HeadingAnchors }
|
||||
const THEME = "theme";
|
||||
|
||||
const saveTheme = (themeValue) => {
|
||||
localStorage.setItem(THEME, themeValue);
|
||||
};
|
||||
|
||||
const themeLight = document.getElementById("theme-light");
|
||||
themeLight.addEventListener("input", (e) => {
|
||||
saveTheme(themeLight.value);
|
||||
});
|
||||
|
||||
const themeAuto = document.getElementById("theme-auto");
|
||||
themeAuto.addEventListener("input", (e) => {
|
||||
saveTheme(themeAuto.auto);
|
||||
});
|
||||
|
||||
const themeDark = document.getElementById("theme-dark");
|
||||
themeDark.addEventListener("input", (e) => {
|
||||
saveTheme(themeDark.value);
|
||||
});
|
||||
|
||||
var currentThemeValue = localStorage.getItem(THEME);
|
||||
switch (currentThemeValue) {
|
||||
case "light":
|
||||
themeLight.checked = true;
|
||||
break;
|
||||
case "auto":
|
||||
themeAuto.checked = true;
|
||||
break;
|
||||
case "dark":
|
||||
themeDark.checked = true;
|
||||
break;
|
||||
default:
|
||||
themeAuto.checked = true;
|
||||
}</script>
|
||||
|
||||
</head>
|
||||
<body>
|
||||
@@ -1148,9 +1297,30 @@ export { HeadingAnchors }</script>
|
||||
</a>
|
||||
</li>
|
||||
</ul>
|
||||
|
||||
<fieldset id="theme">
|
||||
<legend>color scheme</legend>
|
||||
|
||||
<input type="radio" id="theme-light" name="theme" value="light">
|
||||
<label class="theme-light" for="theme-light">
|
||||
<i class="fa-regular fa-sun" aria-hidden="true"></i>
|
||||
light
|
||||
</label>
|
||||
|
||||
<input type="radio" id="theme-auto" name="theme" value="auto">
|
||||
<label class="theme-auto" for="theme-auto">
|
||||
auto
|
||||
</label>
|
||||
|
||||
<input type="radio" id="theme-dark" name="theme" value="dark">
|
||||
<label class="theme-dark" for="theme-dark">
|
||||
dark
|
||||
<i class="fa-regular fa-moon" aria-hidden="true"></i>
|
||||
</label>
|
||||
</fieldset>
|
||||
</footer>
|
||||
|
||||
|
||||
<!-- This page `/404.html` was built on 2026-09-08T23:18:32.766Z -->
|
||||
<!-- This page `/404.html` was built on 2026-09-09T20:38:02.942Z -->
|
||||
</body>
|
||||
</html>
|
||||
|
||||
+172
-3
@@ -311,6 +311,13 @@
|
||||
--color-grey: light-dark(var(--color-grey-dark), var(--color-grey-light));
|
||||
}
|
||||
|
||||
:root:has(#theme-light:checked) {
|
||||
color-scheme: light;
|
||||
}
|
||||
:root:has(#theme-dark:checked) {
|
||||
color-scheme: dark;
|
||||
}
|
||||
|
||||
/* Base */
|
||||
|
||||
* {
|
||||
@@ -454,7 +461,7 @@ ul, ol, dl, li {
|
||||
}
|
||||
|
||||
li {
|
||||
line-height: 1.2 5;
|
||||
line-height: 1.2;
|
||||
margin-top: .65rem;
|
||||
margin-bottom: .65rem;
|
||||
}
|
||||
@@ -793,6 +800,111 @@ footer a:focus-visible {
|
||||
outline-color: var(--color-pink);
|
||||
}
|
||||
|
||||
/* color picker */
|
||||
#theme {
|
||||
display: flex;
|
||||
justify-content: center;
|
||||
margin: .5rem auto 0;
|
||||
padding: 0 .75rem .5rem;
|
||||
width: fit-content;
|
||||
border: .125rem solid var(--color-teal);
|
||||
border-radius: 2rem;
|
||||
}
|
||||
|
||||
#theme legend {
|
||||
margin: 0 auto;
|
||||
color: var(--color-teal);
|
||||
}
|
||||
|
||||
footer label {
|
||||
cursor: pointer;
|
||||
border: .125rem solid var(--color-pink);
|
||||
padding: 0 .25rem;
|
||||
color: var(--color-pink);
|
||||
background-color: var(--color-bg); /* this stops the box shadows from showing through */
|
||||
box-shadow: .15em .15em var(--color-shadow);
|
||||
/* Click animation handling */
|
||||
position: relative;
|
||||
top: 0;
|
||||
left: 0;
|
||||
transition: top .05s ease-in, left .05s ease-in;
|
||||
}
|
||||
|
||||
footer input:checked + label {
|
||||
color: var(--color-blue);
|
||||
border-color: var(--color-blue);
|
||||
}
|
||||
|
||||
footer label i {
|
||||
color: var(--color-teal);
|
||||
}
|
||||
|
||||
footer input:checked + label i {
|
||||
color: var(--color-pink);
|
||||
}
|
||||
|
||||
@media (any-hover: hover) {
|
||||
footer label:hover,
|
||||
footer input:checked + label:hover,
|
||||
footer label:hover i,
|
||||
footer input:checked + label:hover i {
|
||||
color: var(--color-bg);
|
||||
}
|
||||
|
||||
footer label:hover {
|
||||
background-color: var(--color-pink);
|
||||
}
|
||||
|
||||
footer input:checked + label:hover {
|
||||
background-color: var(--color-teal);
|
||||
}
|
||||
}
|
||||
|
||||
footer input:focus-visible + label,
|
||||
footer input:focus-visible + label i {
|
||||
color: var(--color-bg);
|
||||
background-color: var(--color-pink);
|
||||
border-color: var(--color-pink);
|
||||
}
|
||||
|
||||
footer input:checked:focus-visible + label,
|
||||
footer input:checked:focus-visible + label i {
|
||||
color: var(--color-bg);
|
||||
background-color: var(--color-teal);
|
||||
border-color: var(--color-teal);
|
||||
}
|
||||
|
||||
footer label:active {
|
||||
top: .09em;
|
||||
left: .09em;
|
||||
box-shadow: .05em .05em var(--color-shadow);
|
||||
}
|
||||
|
||||
label.theme-light {
|
||||
border-top-left-radius: 1rem;
|
||||
border-bottom-left-radius: 1rem;
|
||||
border-right: none;
|
||||
padding-left: .35rem;
|
||||
}
|
||||
|
||||
label.theme-auto {
|
||||
}
|
||||
|
||||
label.theme-dark {
|
||||
border-top-right-radius: 1rem;
|
||||
border-bottom-right-radius: 1rem;
|
||||
border-left: none;
|
||||
padding-right: .35rem;
|
||||
}
|
||||
|
||||
footer input {
|
||||
/* To allow screen reader to still access these. */
|
||||
/* From https://lyra.horse/blog/2025/08/you-dont-need-js/ */
|
||||
opacity: 0;
|
||||
position: absolute;
|
||||
pointer-events: none;
|
||||
}
|
||||
|
||||
/* Pagination */
|
||||
.pagination,
|
||||
.pagination li {
|
||||
@@ -1055,7 +1167,43 @@ pre[class*=language-]::selection {
|
||||
}
|
||||
}</style>
|
||||
|
||||
<script type="module"></script>
|
||||
|
||||
|
||||
<script type="module">const THEME = "theme";
|
||||
|
||||
const saveTheme = (themeValue) => {
|
||||
localStorage.setItem(THEME, themeValue);
|
||||
};
|
||||
|
||||
const themeLight = document.getElementById("theme-light");
|
||||
themeLight.addEventListener("input", (e) => {
|
||||
saveTheme(themeLight.value);
|
||||
});
|
||||
|
||||
const themeAuto = document.getElementById("theme-auto");
|
||||
themeAuto.addEventListener("input", (e) => {
|
||||
saveTheme(themeAuto.auto);
|
||||
});
|
||||
|
||||
const themeDark = document.getElementById("theme-dark");
|
||||
themeDark.addEventListener("input", (e) => {
|
||||
saveTheme(themeDark.value);
|
||||
});
|
||||
|
||||
var currentThemeValue = localStorage.getItem(THEME);
|
||||
switch (currentThemeValue) {
|
||||
case "light":
|
||||
themeLight.checked = true;
|
||||
break;
|
||||
case "auto":
|
||||
themeAuto.checked = true;
|
||||
break;
|
||||
case "dark":
|
||||
themeDark.checked = true;
|
||||
break;
|
||||
default:
|
||||
themeAuto.checked = true;
|
||||
}</script>
|
||||
|
||||
</head>
|
||||
<body>
|
||||
@@ -1354,9 +1502,30 @@ pre[class*=language-]::selection {
|
||||
</a>
|
||||
</li>
|
||||
</ul>
|
||||
|
||||
<fieldset id="theme">
|
||||
<legend>color scheme</legend>
|
||||
|
||||
<input type="radio" id="theme-light" name="theme" value="light">
|
||||
<label class="theme-light" for="theme-light">
|
||||
<i class="fa-regular fa-sun" aria-hidden="true"></i>
|
||||
light
|
||||
</label>
|
||||
|
||||
<input type="radio" id="theme-auto" name="theme" value="auto">
|
||||
<label class="theme-auto" for="theme-auto">
|
||||
auto
|
||||
</label>
|
||||
|
||||
<input type="radio" id="theme-dark" name="theme" value="dark">
|
||||
<label class="theme-dark" for="theme-dark">
|
||||
dark
|
||||
<i class="fa-regular fa-moon" aria-hidden="true"></i>
|
||||
</label>
|
||||
</fieldset>
|
||||
</footer>
|
||||
|
||||
|
||||
<!-- This page `/5/` was built on 2026-09-08T23:18:37.679Z -->
|
||||
<!-- This page `/5/` was built on 2026-09-09T20:38:08.316Z -->
|
||||
</body>
|
||||
</html>
|
||||
|
||||
+172
-3
@@ -311,6 +311,13 @@
|
||||
--color-grey: light-dark(var(--color-grey-dark), var(--color-grey-light));
|
||||
}
|
||||
|
||||
:root:has(#theme-light:checked) {
|
||||
color-scheme: light;
|
||||
}
|
||||
:root:has(#theme-dark:checked) {
|
||||
color-scheme: dark;
|
||||
}
|
||||
|
||||
/* Base */
|
||||
|
||||
* {
|
||||
@@ -454,7 +461,7 @@ ul, ol, dl, li {
|
||||
}
|
||||
|
||||
li {
|
||||
line-height: 1.2 5;
|
||||
line-height: 1.2;
|
||||
margin-top: .65rem;
|
||||
margin-bottom: .65rem;
|
||||
}
|
||||
@@ -793,6 +800,111 @@ footer a:focus-visible {
|
||||
outline-color: var(--color-pink);
|
||||
}
|
||||
|
||||
/* color picker */
|
||||
#theme {
|
||||
display: flex;
|
||||
justify-content: center;
|
||||
margin: .5rem auto 0;
|
||||
padding: 0 .75rem .5rem;
|
||||
width: fit-content;
|
||||
border: .125rem solid var(--color-teal);
|
||||
border-radius: 2rem;
|
||||
}
|
||||
|
||||
#theme legend {
|
||||
margin: 0 auto;
|
||||
color: var(--color-teal);
|
||||
}
|
||||
|
||||
footer label {
|
||||
cursor: pointer;
|
||||
border: .125rem solid var(--color-pink);
|
||||
padding: 0 .25rem;
|
||||
color: var(--color-pink);
|
||||
background-color: var(--color-bg); /* this stops the box shadows from showing through */
|
||||
box-shadow: .15em .15em var(--color-shadow);
|
||||
/* Click animation handling */
|
||||
position: relative;
|
||||
top: 0;
|
||||
left: 0;
|
||||
transition: top .05s ease-in, left .05s ease-in;
|
||||
}
|
||||
|
||||
footer input:checked + label {
|
||||
color: var(--color-blue);
|
||||
border-color: var(--color-blue);
|
||||
}
|
||||
|
||||
footer label i {
|
||||
color: var(--color-teal);
|
||||
}
|
||||
|
||||
footer input:checked + label i {
|
||||
color: var(--color-pink);
|
||||
}
|
||||
|
||||
@media (any-hover: hover) {
|
||||
footer label:hover,
|
||||
footer input:checked + label:hover,
|
||||
footer label:hover i,
|
||||
footer input:checked + label:hover i {
|
||||
color: var(--color-bg);
|
||||
}
|
||||
|
||||
footer label:hover {
|
||||
background-color: var(--color-pink);
|
||||
}
|
||||
|
||||
footer input:checked + label:hover {
|
||||
background-color: var(--color-teal);
|
||||
}
|
||||
}
|
||||
|
||||
footer input:focus-visible + label,
|
||||
footer input:focus-visible + label i {
|
||||
color: var(--color-bg);
|
||||
background-color: var(--color-pink);
|
||||
border-color: var(--color-pink);
|
||||
}
|
||||
|
||||
footer input:checked:focus-visible + label,
|
||||
footer input:checked:focus-visible + label i {
|
||||
color: var(--color-bg);
|
||||
background-color: var(--color-teal);
|
||||
border-color: var(--color-teal);
|
||||
}
|
||||
|
||||
footer label:active {
|
||||
top: .09em;
|
||||
left: .09em;
|
||||
box-shadow: .05em .05em var(--color-shadow);
|
||||
}
|
||||
|
||||
label.theme-light {
|
||||
border-top-left-radius: 1rem;
|
||||
border-bottom-left-radius: 1rem;
|
||||
border-right: none;
|
||||
padding-left: .35rem;
|
||||
}
|
||||
|
||||
label.theme-auto {
|
||||
}
|
||||
|
||||
label.theme-dark {
|
||||
border-top-right-radius: 1rem;
|
||||
border-bottom-right-radius: 1rem;
|
||||
border-left: none;
|
||||
padding-right: .35rem;
|
||||
}
|
||||
|
||||
footer input {
|
||||
/* To allow screen reader to still access these. */
|
||||
/* From https://lyra.horse/blog/2025/08/you-dont-need-js/ */
|
||||
opacity: 0;
|
||||
position: absolute;
|
||||
pointer-events: none;
|
||||
}
|
||||
|
||||
/* Pagination */
|
||||
.pagination,
|
||||
.pagination li {
|
||||
@@ -1055,7 +1167,43 @@ pre[class*=language-]::selection {
|
||||
}
|
||||
}</style>
|
||||
|
||||
<script type="module"></script>
|
||||
|
||||
|
||||
<script type="module">const THEME = "theme";
|
||||
|
||||
const saveTheme = (themeValue) => {
|
||||
localStorage.setItem(THEME, themeValue);
|
||||
};
|
||||
|
||||
const themeLight = document.getElementById("theme-light");
|
||||
themeLight.addEventListener("input", (e) => {
|
||||
saveTheme(themeLight.value);
|
||||
});
|
||||
|
||||
const themeAuto = document.getElementById("theme-auto");
|
||||
themeAuto.addEventListener("input", (e) => {
|
||||
saveTheme(themeAuto.auto);
|
||||
});
|
||||
|
||||
const themeDark = document.getElementById("theme-dark");
|
||||
themeDark.addEventListener("input", (e) => {
|
||||
saveTheme(themeDark.value);
|
||||
});
|
||||
|
||||
var currentThemeValue = localStorage.getItem(THEME);
|
||||
switch (currentThemeValue) {
|
||||
case "light":
|
||||
themeLight.checked = true;
|
||||
break;
|
||||
case "auto":
|
||||
themeAuto.checked = true;
|
||||
break;
|
||||
case "dark":
|
||||
themeDark.checked = true;
|
||||
break;
|
||||
default:
|
||||
themeAuto.checked = true;
|
||||
}</script>
|
||||
|
||||
</head>
|
||||
<body>
|
||||
@@ -1352,9 +1500,30 @@ pre[class*=language-]::selection {
|
||||
</a>
|
||||
</li>
|
||||
</ul>
|
||||
|
||||
<fieldset id="theme">
|
||||
<legend>color scheme</legend>
|
||||
|
||||
<input type="radio" id="theme-light" name="theme" value="light">
|
||||
<label class="theme-light" for="theme-light">
|
||||
<i class="fa-regular fa-sun" aria-hidden="true"></i>
|
||||
light
|
||||
</label>
|
||||
|
||||
<input type="radio" id="theme-auto" name="theme" value="auto">
|
||||
<label class="theme-auto" for="theme-auto">
|
||||
auto
|
||||
</label>
|
||||
|
||||
<input type="radio" id="theme-dark" name="theme" value="dark">
|
||||
<label class="theme-dark" for="theme-dark">
|
||||
dark
|
||||
<i class="fa-regular fa-moon" aria-hidden="true"></i>
|
||||
</label>
|
||||
</fieldset>
|
||||
</footer>
|
||||
|
||||
|
||||
<!-- This page `/6/` was built on 2026-09-08T23:18:37.934Z -->
|
||||
<!-- This page `/6/` was built on 2026-09-09T20:38:08.610Z -->
|
||||
</body>
|
||||
</html>
|
||||
|
||||
+172
-3
@@ -311,6 +311,13 @@
|
||||
--color-grey: light-dark(var(--color-grey-dark), var(--color-grey-light));
|
||||
}
|
||||
|
||||
:root:has(#theme-light:checked) {
|
||||
color-scheme: light;
|
||||
}
|
||||
:root:has(#theme-dark:checked) {
|
||||
color-scheme: dark;
|
||||
}
|
||||
|
||||
/* Base */
|
||||
|
||||
* {
|
||||
@@ -454,7 +461,7 @@ ul, ol, dl, li {
|
||||
}
|
||||
|
||||
li {
|
||||
line-height: 1.2 5;
|
||||
line-height: 1.2;
|
||||
margin-top: .65rem;
|
||||
margin-bottom: .65rem;
|
||||
}
|
||||
@@ -793,6 +800,111 @@ footer a:focus-visible {
|
||||
outline-color: var(--color-pink);
|
||||
}
|
||||
|
||||
/* color picker */
|
||||
#theme {
|
||||
display: flex;
|
||||
justify-content: center;
|
||||
margin: .5rem auto 0;
|
||||
padding: 0 .75rem .5rem;
|
||||
width: fit-content;
|
||||
border: .125rem solid var(--color-teal);
|
||||
border-radius: 2rem;
|
||||
}
|
||||
|
||||
#theme legend {
|
||||
margin: 0 auto;
|
||||
color: var(--color-teal);
|
||||
}
|
||||
|
||||
footer label {
|
||||
cursor: pointer;
|
||||
border: .125rem solid var(--color-pink);
|
||||
padding: 0 .25rem;
|
||||
color: var(--color-pink);
|
||||
background-color: var(--color-bg); /* this stops the box shadows from showing through */
|
||||
box-shadow: .15em .15em var(--color-shadow);
|
||||
/* Click animation handling */
|
||||
position: relative;
|
||||
top: 0;
|
||||
left: 0;
|
||||
transition: top .05s ease-in, left .05s ease-in;
|
||||
}
|
||||
|
||||
footer input:checked + label {
|
||||
color: var(--color-blue);
|
||||
border-color: var(--color-blue);
|
||||
}
|
||||
|
||||
footer label i {
|
||||
color: var(--color-teal);
|
||||
}
|
||||
|
||||
footer input:checked + label i {
|
||||
color: var(--color-pink);
|
||||
}
|
||||
|
||||
@media (any-hover: hover) {
|
||||
footer label:hover,
|
||||
footer input:checked + label:hover,
|
||||
footer label:hover i,
|
||||
footer input:checked + label:hover i {
|
||||
color: var(--color-bg);
|
||||
}
|
||||
|
||||
footer label:hover {
|
||||
background-color: var(--color-pink);
|
||||
}
|
||||
|
||||
footer input:checked + label:hover {
|
||||
background-color: var(--color-teal);
|
||||
}
|
||||
}
|
||||
|
||||
footer input:focus-visible + label,
|
||||
footer input:focus-visible + label i {
|
||||
color: var(--color-bg);
|
||||
background-color: var(--color-pink);
|
||||
border-color: var(--color-pink);
|
||||
}
|
||||
|
||||
footer input:checked:focus-visible + label,
|
||||
footer input:checked:focus-visible + label i {
|
||||
color: var(--color-bg);
|
||||
background-color: var(--color-teal);
|
||||
border-color: var(--color-teal);
|
||||
}
|
||||
|
||||
footer label:active {
|
||||
top: .09em;
|
||||
left: .09em;
|
||||
box-shadow: .05em .05em var(--color-shadow);
|
||||
}
|
||||
|
||||
label.theme-light {
|
||||
border-top-left-radius: 1rem;
|
||||
border-bottom-left-radius: 1rem;
|
||||
border-right: none;
|
||||
padding-left: .35rem;
|
||||
}
|
||||
|
||||
label.theme-auto {
|
||||
}
|
||||
|
||||
label.theme-dark {
|
||||
border-top-right-radius: 1rem;
|
||||
border-bottom-right-radius: 1rem;
|
||||
border-left: none;
|
||||
padding-right: .35rem;
|
||||
}
|
||||
|
||||
footer input {
|
||||
/* To allow screen reader to still access these. */
|
||||
/* From https://lyra.horse/blog/2025/08/you-dont-need-js/ */
|
||||
opacity: 0;
|
||||
position: absolute;
|
||||
pointer-events: none;
|
||||
}
|
||||
|
||||
/* Pagination */
|
||||
.pagination,
|
||||
.pagination li {
|
||||
@@ -1055,7 +1167,43 @@ pre[class*=language-]::selection {
|
||||
}
|
||||
}</style>
|
||||
|
||||
<script type="module"></script>
|
||||
|
||||
|
||||
<script type="module">const THEME = "theme";
|
||||
|
||||
const saveTheme = (themeValue) => {
|
||||
localStorage.setItem(THEME, themeValue);
|
||||
};
|
||||
|
||||
const themeLight = document.getElementById("theme-light");
|
||||
themeLight.addEventListener("input", (e) => {
|
||||
saveTheme(themeLight.value);
|
||||
});
|
||||
|
||||
const themeAuto = document.getElementById("theme-auto");
|
||||
themeAuto.addEventListener("input", (e) => {
|
||||
saveTheme(themeAuto.auto);
|
||||
});
|
||||
|
||||
const themeDark = document.getElementById("theme-dark");
|
||||
themeDark.addEventListener("input", (e) => {
|
||||
saveTheme(themeDark.value);
|
||||
});
|
||||
|
||||
var currentThemeValue = localStorage.getItem(THEME);
|
||||
switch (currentThemeValue) {
|
||||
case "light":
|
||||
themeLight.checked = true;
|
||||
break;
|
||||
case "auto":
|
||||
themeAuto.checked = true;
|
||||
break;
|
||||
case "dark":
|
||||
themeDark.checked = true;
|
||||
break;
|
||||
default:
|
||||
themeAuto.checked = true;
|
||||
}</script>
|
||||
|
||||
</head>
|
||||
<body>
|
||||
@@ -1362,9 +1510,30 @@ pre[class*=language-]::selection {
|
||||
</a>
|
||||
</li>
|
||||
</ul>
|
||||
|
||||
<fieldset id="theme">
|
||||
<legend>color scheme</legend>
|
||||
|
||||
<input type="radio" id="theme-light" name="theme" value="light">
|
||||
<label class="theme-light" for="theme-light">
|
||||
<i class="fa-regular fa-sun" aria-hidden="true"></i>
|
||||
light
|
||||
</label>
|
||||
|
||||
<input type="radio" id="theme-auto" name="theme" value="auto">
|
||||
<label class="theme-auto" for="theme-auto">
|
||||
auto
|
||||
</label>
|
||||
|
||||
<input type="radio" id="theme-dark" name="theme" value="dark">
|
||||
<label class="theme-dark" for="theme-dark">
|
||||
dark
|
||||
<i class="fa-regular fa-moon" aria-hidden="true"></i>
|
||||
</label>
|
||||
</fieldset>
|
||||
</footer>
|
||||
|
||||
|
||||
<!-- This page `/7/` was built on 2026-09-08T23:18:38.288Z -->
|
||||
<!-- This page `/7/` was built on 2026-09-09T20:38:09.047Z -->
|
||||
</body>
|
||||
</html>
|
||||
|
||||
+172
-3
@@ -311,6 +311,13 @@
|
||||
--color-grey: light-dark(var(--color-grey-dark), var(--color-grey-light));
|
||||
}
|
||||
|
||||
:root:has(#theme-light:checked) {
|
||||
color-scheme: light;
|
||||
}
|
||||
:root:has(#theme-dark:checked) {
|
||||
color-scheme: dark;
|
||||
}
|
||||
|
||||
/* Base */
|
||||
|
||||
* {
|
||||
@@ -454,7 +461,7 @@ ul, ol, dl, li {
|
||||
}
|
||||
|
||||
li {
|
||||
line-height: 1.2 5;
|
||||
line-height: 1.2;
|
||||
margin-top: .65rem;
|
||||
margin-bottom: .65rem;
|
||||
}
|
||||
@@ -793,6 +800,111 @@ footer a:focus-visible {
|
||||
outline-color: var(--color-pink);
|
||||
}
|
||||
|
||||
/* color picker */
|
||||
#theme {
|
||||
display: flex;
|
||||
justify-content: center;
|
||||
margin: .5rem auto 0;
|
||||
padding: 0 .75rem .5rem;
|
||||
width: fit-content;
|
||||
border: .125rem solid var(--color-teal);
|
||||
border-radius: 2rem;
|
||||
}
|
||||
|
||||
#theme legend {
|
||||
margin: 0 auto;
|
||||
color: var(--color-teal);
|
||||
}
|
||||
|
||||
footer label {
|
||||
cursor: pointer;
|
||||
border: .125rem solid var(--color-pink);
|
||||
padding: 0 .25rem;
|
||||
color: var(--color-pink);
|
||||
background-color: var(--color-bg); /* this stops the box shadows from showing through */
|
||||
box-shadow: .15em .15em var(--color-shadow);
|
||||
/* Click animation handling */
|
||||
position: relative;
|
||||
top: 0;
|
||||
left: 0;
|
||||
transition: top .05s ease-in, left .05s ease-in;
|
||||
}
|
||||
|
||||
footer input:checked + label {
|
||||
color: var(--color-blue);
|
||||
border-color: var(--color-blue);
|
||||
}
|
||||
|
||||
footer label i {
|
||||
color: var(--color-teal);
|
||||
}
|
||||
|
||||
footer input:checked + label i {
|
||||
color: var(--color-pink);
|
||||
}
|
||||
|
||||
@media (any-hover: hover) {
|
||||
footer label:hover,
|
||||
footer input:checked + label:hover,
|
||||
footer label:hover i,
|
||||
footer input:checked + label:hover i {
|
||||
color: var(--color-bg);
|
||||
}
|
||||
|
||||
footer label:hover {
|
||||
background-color: var(--color-pink);
|
||||
}
|
||||
|
||||
footer input:checked + label:hover {
|
||||
background-color: var(--color-teal);
|
||||
}
|
||||
}
|
||||
|
||||
footer input:focus-visible + label,
|
||||
footer input:focus-visible + label i {
|
||||
color: var(--color-bg);
|
||||
background-color: var(--color-pink);
|
||||
border-color: var(--color-pink);
|
||||
}
|
||||
|
||||
footer input:checked:focus-visible + label,
|
||||
footer input:checked:focus-visible + label i {
|
||||
color: var(--color-bg);
|
||||
background-color: var(--color-teal);
|
||||
border-color: var(--color-teal);
|
||||
}
|
||||
|
||||
footer label:active {
|
||||
top: .09em;
|
||||
left: .09em;
|
||||
box-shadow: .05em .05em var(--color-shadow);
|
||||
}
|
||||
|
||||
label.theme-light {
|
||||
border-top-left-radius: 1rem;
|
||||
border-bottom-left-radius: 1rem;
|
||||
border-right: none;
|
||||
padding-left: .35rem;
|
||||
}
|
||||
|
||||
label.theme-auto {
|
||||
}
|
||||
|
||||
label.theme-dark {
|
||||
border-top-right-radius: 1rem;
|
||||
border-bottom-right-radius: 1rem;
|
||||
border-left: none;
|
||||
padding-right: .35rem;
|
||||
}
|
||||
|
||||
footer input {
|
||||
/* To allow screen reader to still access these. */
|
||||
/* From https://lyra.horse/blog/2025/08/you-dont-need-js/ */
|
||||
opacity: 0;
|
||||
position: absolute;
|
||||
pointer-events: none;
|
||||
}
|
||||
|
||||
/* Pagination */
|
||||
.pagination,
|
||||
.pagination li {
|
||||
@@ -1055,7 +1167,43 @@ pre[class*=language-]::selection {
|
||||
}
|
||||
}</style>
|
||||
|
||||
<script type="module"></script>
|
||||
|
||||
|
||||
<script type="module">const THEME = "theme";
|
||||
|
||||
const saveTheme = (themeValue) => {
|
||||
localStorage.setItem(THEME, themeValue);
|
||||
};
|
||||
|
||||
const themeLight = document.getElementById("theme-light");
|
||||
themeLight.addEventListener("input", (e) => {
|
||||
saveTheme(themeLight.value);
|
||||
});
|
||||
|
||||
const themeAuto = document.getElementById("theme-auto");
|
||||
themeAuto.addEventListener("input", (e) => {
|
||||
saveTheme(themeAuto.auto);
|
||||
});
|
||||
|
||||
const themeDark = document.getElementById("theme-dark");
|
||||
themeDark.addEventListener("input", (e) => {
|
||||
saveTheme(themeDark.value);
|
||||
});
|
||||
|
||||
var currentThemeValue = localStorage.getItem(THEME);
|
||||
switch (currentThemeValue) {
|
||||
case "light":
|
||||
themeLight.checked = true;
|
||||
break;
|
||||
case "auto":
|
||||
themeAuto.checked = true;
|
||||
break;
|
||||
case "dark":
|
||||
themeDark.checked = true;
|
||||
break;
|
||||
default:
|
||||
themeAuto.checked = true;
|
||||
}</script>
|
||||
|
||||
</head>
|
||||
<body>
|
||||
@@ -1354,9 +1502,30 @@ pre[class*=language-]::selection {
|
||||
</a>
|
||||
</li>
|
||||
</ul>
|
||||
|
||||
<fieldset id="theme">
|
||||
<legend>color scheme</legend>
|
||||
|
||||
<input type="radio" id="theme-light" name="theme" value="light">
|
||||
<label class="theme-light" for="theme-light">
|
||||
<i class="fa-regular fa-sun" aria-hidden="true"></i>
|
||||
light
|
||||
</label>
|
||||
|
||||
<input type="radio" id="theme-auto" name="theme" value="auto">
|
||||
<label class="theme-auto" for="theme-auto">
|
||||
auto
|
||||
</label>
|
||||
|
||||
<input type="radio" id="theme-dark" name="theme" value="dark">
|
||||
<label class="theme-dark" for="theme-dark">
|
||||
dark
|
||||
<i class="fa-regular fa-moon" aria-hidden="true"></i>
|
||||
</label>
|
||||
</fieldset>
|
||||
</footer>
|
||||
|
||||
|
||||
<!-- This page `/8/` was built on 2026-09-08T23:18:38.732Z -->
|
||||
<!-- This page `/8/` was built on 2026-09-09T20:38:09.412Z -->
|
||||
</body>
|
||||
</html>
|
||||
|
||||
+172
-3
@@ -311,6 +311,13 @@
|
||||
--color-grey: light-dark(var(--color-grey-dark), var(--color-grey-light));
|
||||
}
|
||||
|
||||
:root:has(#theme-light:checked) {
|
||||
color-scheme: light;
|
||||
}
|
||||
:root:has(#theme-dark:checked) {
|
||||
color-scheme: dark;
|
||||
}
|
||||
|
||||
/* Base */
|
||||
|
||||
* {
|
||||
@@ -454,7 +461,7 @@ ul, ol, dl, li {
|
||||
}
|
||||
|
||||
li {
|
||||
line-height: 1.2 5;
|
||||
line-height: 1.2;
|
||||
margin-top: .65rem;
|
||||
margin-bottom: .65rem;
|
||||
}
|
||||
@@ -793,6 +800,111 @@ footer a:focus-visible {
|
||||
outline-color: var(--color-pink);
|
||||
}
|
||||
|
||||
/* color picker */
|
||||
#theme {
|
||||
display: flex;
|
||||
justify-content: center;
|
||||
margin: .5rem auto 0;
|
||||
padding: 0 .75rem .5rem;
|
||||
width: fit-content;
|
||||
border: .125rem solid var(--color-teal);
|
||||
border-radius: 2rem;
|
||||
}
|
||||
|
||||
#theme legend {
|
||||
margin: 0 auto;
|
||||
color: var(--color-teal);
|
||||
}
|
||||
|
||||
footer label {
|
||||
cursor: pointer;
|
||||
border: .125rem solid var(--color-pink);
|
||||
padding: 0 .25rem;
|
||||
color: var(--color-pink);
|
||||
background-color: var(--color-bg); /* this stops the box shadows from showing through */
|
||||
box-shadow: .15em .15em var(--color-shadow);
|
||||
/* Click animation handling */
|
||||
position: relative;
|
||||
top: 0;
|
||||
left: 0;
|
||||
transition: top .05s ease-in, left .05s ease-in;
|
||||
}
|
||||
|
||||
footer input:checked + label {
|
||||
color: var(--color-blue);
|
||||
border-color: var(--color-blue);
|
||||
}
|
||||
|
||||
footer label i {
|
||||
color: var(--color-teal);
|
||||
}
|
||||
|
||||
footer input:checked + label i {
|
||||
color: var(--color-pink);
|
||||
}
|
||||
|
||||
@media (any-hover: hover) {
|
||||
footer label:hover,
|
||||
footer input:checked + label:hover,
|
||||
footer label:hover i,
|
||||
footer input:checked + label:hover i {
|
||||
color: var(--color-bg);
|
||||
}
|
||||
|
||||
footer label:hover {
|
||||
background-color: var(--color-pink);
|
||||
}
|
||||
|
||||
footer input:checked + label:hover {
|
||||
background-color: var(--color-teal);
|
||||
}
|
||||
}
|
||||
|
||||
footer input:focus-visible + label,
|
||||
footer input:focus-visible + label i {
|
||||
color: var(--color-bg);
|
||||
background-color: var(--color-pink);
|
||||
border-color: var(--color-pink);
|
||||
}
|
||||
|
||||
footer input:checked:focus-visible + label,
|
||||
footer input:checked:focus-visible + label i {
|
||||
color: var(--color-bg);
|
||||
background-color: var(--color-teal);
|
||||
border-color: var(--color-teal);
|
||||
}
|
||||
|
||||
footer label:active {
|
||||
top: .09em;
|
||||
left: .09em;
|
||||
box-shadow: .05em .05em var(--color-shadow);
|
||||
}
|
||||
|
||||
label.theme-light {
|
||||
border-top-left-radius: 1rem;
|
||||
border-bottom-left-radius: 1rem;
|
||||
border-right: none;
|
||||
padding-left: .35rem;
|
||||
}
|
||||
|
||||
label.theme-auto {
|
||||
}
|
||||
|
||||
label.theme-dark {
|
||||
border-top-right-radius: 1rem;
|
||||
border-bottom-right-radius: 1rem;
|
||||
border-left: none;
|
||||
padding-right: .35rem;
|
||||
}
|
||||
|
||||
footer input {
|
||||
/* To allow screen reader to still access these. */
|
||||
/* From https://lyra.horse/blog/2025/08/you-dont-need-js/ */
|
||||
opacity: 0;
|
||||
position: absolute;
|
||||
pointer-events: none;
|
||||
}
|
||||
|
||||
/* Pagination */
|
||||
.pagination,
|
||||
.pagination li {
|
||||
@@ -1055,7 +1167,43 @@ pre[class*=language-]::selection {
|
||||
}
|
||||
}</style>
|
||||
|
||||
<script type="module"></script>
|
||||
|
||||
|
||||
<script type="module">const THEME = "theme";
|
||||
|
||||
const saveTheme = (themeValue) => {
|
||||
localStorage.setItem(THEME, themeValue);
|
||||
};
|
||||
|
||||
const themeLight = document.getElementById("theme-light");
|
||||
themeLight.addEventListener("input", (e) => {
|
||||
saveTheme(themeLight.value);
|
||||
});
|
||||
|
||||
const themeAuto = document.getElementById("theme-auto");
|
||||
themeAuto.addEventListener("input", (e) => {
|
||||
saveTheme(themeAuto.auto);
|
||||
});
|
||||
|
||||
const themeDark = document.getElementById("theme-dark");
|
||||
themeDark.addEventListener("input", (e) => {
|
||||
saveTheme(themeDark.value);
|
||||
});
|
||||
|
||||
var currentThemeValue = localStorage.getItem(THEME);
|
||||
switch (currentThemeValue) {
|
||||
case "light":
|
||||
themeLight.checked = true;
|
||||
break;
|
||||
case "auto":
|
||||
themeAuto.checked = true;
|
||||
break;
|
||||
case "dark":
|
||||
themeDark.checked = true;
|
||||
break;
|
||||
default:
|
||||
themeAuto.checked = true;
|
||||
}</script>
|
||||
|
||||
</head>
|
||||
<body>
|
||||
@@ -1358,9 +1506,30 @@ pre[class*=language-]::selection {
|
||||
</a>
|
||||
</li>
|
||||
</ul>
|
||||
|
||||
<fieldset id="theme">
|
||||
<legend>color scheme</legend>
|
||||
|
||||
<input type="radio" id="theme-light" name="theme" value="light">
|
||||
<label class="theme-light" for="theme-light">
|
||||
<i class="fa-regular fa-sun" aria-hidden="true"></i>
|
||||
light
|
||||
</label>
|
||||
|
||||
<input type="radio" id="theme-auto" name="theme" value="auto">
|
||||
<label class="theme-auto" for="theme-auto">
|
||||
auto
|
||||
</label>
|
||||
|
||||
<input type="radio" id="theme-dark" name="theme" value="dark">
|
||||
<label class="theme-dark" for="theme-dark">
|
||||
dark
|
||||
<i class="fa-regular fa-moon" aria-hidden="true"></i>
|
||||
</label>
|
||||
</fieldset>
|
||||
</footer>
|
||||
|
||||
|
||||
<!-- This page `/9/` was built on 2026-09-08T23:18:39.147Z -->
|
||||
<!-- This page `/9/` was built on 2026-09-09T20:38:09.753Z -->
|
||||
</body>
|
||||
</html>
|
||||
|
||||
+181
-11
@@ -478,6 +478,13 @@ body:has(dialog[open]) {
|
||||
--color-grey: light-dark(var(--color-grey-dark), var(--color-grey-light));
|
||||
}
|
||||
|
||||
:root:has(#theme-light:checked) {
|
||||
color-scheme: light;
|
||||
}
|
||||
:root:has(#theme-dark:checked) {
|
||||
color-scheme: dark;
|
||||
}
|
||||
|
||||
/* Base */
|
||||
|
||||
* {
|
||||
@@ -621,7 +628,7 @@ ul, ol, dl, li {
|
||||
}
|
||||
|
||||
li {
|
||||
line-height: 1.2 5;
|
||||
line-height: 1.2;
|
||||
margin-top: .65rem;
|
||||
margin-bottom: .65rem;
|
||||
}
|
||||
@@ -960,6 +967,111 @@ footer a:focus-visible {
|
||||
outline-color: var(--color-pink);
|
||||
}
|
||||
|
||||
/* color picker */
|
||||
#theme {
|
||||
display: flex;
|
||||
justify-content: center;
|
||||
margin: .5rem auto 0;
|
||||
padding: 0 .75rem .5rem;
|
||||
width: fit-content;
|
||||
border: .125rem solid var(--color-teal);
|
||||
border-radius: 2rem;
|
||||
}
|
||||
|
||||
#theme legend {
|
||||
margin: 0 auto;
|
||||
color: var(--color-teal);
|
||||
}
|
||||
|
||||
footer label {
|
||||
cursor: pointer;
|
||||
border: .125rem solid var(--color-pink);
|
||||
padding: 0 .25rem;
|
||||
color: var(--color-pink);
|
||||
background-color: var(--color-bg); /* this stops the box shadows from showing through */
|
||||
box-shadow: .15em .15em var(--color-shadow);
|
||||
/* Click animation handling */
|
||||
position: relative;
|
||||
top: 0;
|
||||
left: 0;
|
||||
transition: top .05s ease-in, left .05s ease-in;
|
||||
}
|
||||
|
||||
footer input:checked + label {
|
||||
color: var(--color-blue);
|
||||
border-color: var(--color-blue);
|
||||
}
|
||||
|
||||
footer label i {
|
||||
color: var(--color-teal);
|
||||
}
|
||||
|
||||
footer input:checked + label i {
|
||||
color: var(--color-pink);
|
||||
}
|
||||
|
||||
@media (any-hover: hover) {
|
||||
footer label:hover,
|
||||
footer input:checked + label:hover,
|
||||
footer label:hover i,
|
||||
footer input:checked + label:hover i {
|
||||
color: var(--color-bg);
|
||||
}
|
||||
|
||||
footer label:hover {
|
||||
background-color: var(--color-pink);
|
||||
}
|
||||
|
||||
footer input:checked + label:hover {
|
||||
background-color: var(--color-teal);
|
||||
}
|
||||
}
|
||||
|
||||
footer input:focus-visible + label,
|
||||
footer input:focus-visible + label i {
|
||||
color: var(--color-bg);
|
||||
background-color: var(--color-pink);
|
||||
border-color: var(--color-pink);
|
||||
}
|
||||
|
||||
footer input:checked:focus-visible + label,
|
||||
footer input:checked:focus-visible + label i {
|
||||
color: var(--color-bg);
|
||||
background-color: var(--color-teal);
|
||||
border-color: var(--color-teal);
|
||||
}
|
||||
|
||||
footer label:active {
|
||||
top: .09em;
|
||||
left: .09em;
|
||||
box-shadow: .05em .05em var(--color-shadow);
|
||||
}
|
||||
|
||||
label.theme-light {
|
||||
border-top-left-radius: 1rem;
|
||||
border-bottom-left-radius: 1rem;
|
||||
border-right: none;
|
||||
padding-left: .35rem;
|
||||
}
|
||||
|
||||
label.theme-auto {
|
||||
}
|
||||
|
||||
label.theme-dark {
|
||||
border-top-right-radius: 1rem;
|
||||
border-bottom-right-radius: 1rem;
|
||||
border-left: none;
|
||||
padding-right: .35rem;
|
||||
}
|
||||
|
||||
footer input {
|
||||
/* To allow screen reader to still access these. */
|
||||
/* From https://lyra.horse/blog/2025/08/you-dont-need-js/ */
|
||||
opacity: 0;
|
||||
position: absolute;
|
||||
pointer-events: none;
|
||||
}
|
||||
|
||||
/* Pagination */
|
||||
.pagination,
|
||||
.pagination li {
|
||||
@@ -1222,6 +1334,8 @@ pre[class*=language-]::selection {
|
||||
}
|
||||
}</style>
|
||||
|
||||
|
||||
|
||||
<script type="module">// Thank you to https://github.com/daviddarnes/heading-anchors
|
||||
// Thank you to https://amberwilson.co.uk/blog/are-your-anchor-links-accessible/
|
||||
|
||||
@@ -1476,6 +1590,41 @@ if (window.innerWidth > 650) {
|
||||
dialog.close();
|
||||
}
|
||||
});
|
||||
}
|
||||
const THEME = "theme";
|
||||
|
||||
const saveTheme = (themeValue) => {
|
||||
localStorage.setItem(THEME, themeValue);
|
||||
};
|
||||
|
||||
const themeLight = document.getElementById("theme-light");
|
||||
themeLight.addEventListener("input", (e) => {
|
||||
saveTheme(themeLight.value);
|
||||
});
|
||||
|
||||
const themeAuto = document.getElementById("theme-auto");
|
||||
themeAuto.addEventListener("input", (e) => {
|
||||
saveTheme(themeAuto.auto);
|
||||
});
|
||||
|
||||
const themeDark = document.getElementById("theme-dark");
|
||||
themeDark.addEventListener("input", (e) => {
|
||||
saveTheme(themeDark.value);
|
||||
});
|
||||
|
||||
var currentThemeValue = localStorage.getItem(THEME);
|
||||
switch (currentThemeValue) {
|
||||
case "light":
|
||||
themeLight.checked = true;
|
||||
break;
|
||||
case "auto":
|
||||
themeAuto.checked = true;
|
||||
break;
|
||||
case "dark":
|
||||
themeDark.checked = true;
|
||||
break;
|
||||
default:
|
||||
themeAuto.checked = true;
|
||||
}</script>
|
||||
|
||||
</head>
|
||||
@@ -1610,43 +1759,43 @@ if (window.innerWidth > 650) {
|
||||
<ol id="postlist">
|
||||
|
||||
<li class="post">
|
||||
<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>
|
||||
<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/foldy-thumb-slide.jpg" alt="A card wallet with one main pocket and one quick access slot with a thumb slide. The cover of the main pocket curves around the thumb slide." loading="lazy" decoding="async" width="1000" height="1000">
|
||||
<img src="/img/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="/mouse-coin-purse/">
|
||||
<h2 data-ha-exclude="" id="mouse-coin-purse">mouse coin purse </h2>
|
||||
<a class="postlink" href="/leatherworking-favorites/">
|
||||
<h2 data-ha-exclude="" id="leatherworking-favorites">leatherworking favorites </h2>
|
||||
|
||||
<ul class="postlist-tags">
|
||||
|
||||
<li>leather</li>
|
||||
|
||||
</ul>
|
||||
<img src="/img/mouse-purse.jpg" alt="2 image collage. Both images show different sides of a small black leather mouse-shaped coin purse. There is a rainbow zipper that travels along the 'spine' of the mouse, and the zipper pull becomes the tail." loading="lazy" decoding="async" width="1000" height="1777">
|
||||
<img src="/img/leather-harness-wip.jpg" alt="two pieces of a chest harness sitting on a messy workbench. both pieces are about 8 inches long total and consist of two large o-rings joined by a dark teal leather strap. the o rings and rivets are matte black." loading="lazy" decoding="async" width="1000" height="750">
|
||||
|
||||
</a>
|
||||
</li>
|
||||
|
||||
<li class="post">
|
||||
<a class="postlink" href="/x-acto-knife-sheath/">
|
||||
<h2 data-ha-exclude="" id="x-acto-knife-sheath">x-acto knife sheath </h2>
|
||||
<a class="postlink" href="/brookes-collar/">
|
||||
<h2 data-ha-exclude="" id="brookes-collar">brooke's collar </h2>
|
||||
|
||||
<ul class="postlist-tags">
|
||||
|
||||
<li>leather</li>
|
||||
|
||||
</ul>
|
||||
<img src="/img/knife-sheaths.jpg" alt="Several blades with leather sheaths, and a few extra sheaths. There's a #2 blade with an orange sheath with yellow stitching, a #11 blade with a blue sheath with light grey stitching, and a skiving knife with a plum sheath and pink stitching." loading="lazy" decoding="async" width="1000" height="750">
|
||||
<img src="/img/lined-shearling-collar.jpg" alt="A green leather collar lined with brown/grey shearling and fitted with two sizes of silver-toned spikes." loading="lazy" decoding="async" width="1000" height="750">
|
||||
|
||||
</a>
|
||||
</li>
|
||||
@@ -1679,9 +1828,30 @@ if (window.innerWidth > 650) {
|
||||
</a>
|
||||
</li>
|
||||
</ul>
|
||||
|
||||
<fieldset id="theme">
|
||||
<legend>color scheme</legend>
|
||||
|
||||
<input type="radio" id="theme-light" name="theme" value="light">
|
||||
<label class="theme-light" for="theme-light">
|
||||
<i class="fa-regular fa-sun" aria-hidden="true"></i>
|
||||
light
|
||||
</label>
|
||||
|
||||
<input type="radio" id="theme-auto" name="theme" value="auto">
|
||||
<label class="theme-auto" for="theme-auto">
|
||||
auto
|
||||
</label>
|
||||
|
||||
<input type="radio" id="theme-dark" name="theme" value="dark">
|
||||
<label class="theme-dark" for="theme-dark">
|
||||
dark
|
||||
<i class="fa-regular fa-moon" aria-hidden="true"></i>
|
||||
</label>
|
||||
</fieldset>
|
||||
</footer>
|
||||
|
||||
|
||||
<!-- This page `/aarons-mask/` was built on 2026-09-08T23:18:32.760Z -->
|
||||
<!-- This page `/aarons-mask/` was built on 2026-09-09T20:38:02.894Z -->
|
||||
</body>
|
||||
</html>
|
||||
|
||||
+173
-3
@@ -89,6 +89,13 @@
|
||||
--color-grey: light-dark(var(--color-grey-dark), var(--color-grey-light));
|
||||
}
|
||||
|
||||
:root:has(#theme-light:checked) {
|
||||
color-scheme: light;
|
||||
}
|
||||
:root:has(#theme-dark:checked) {
|
||||
color-scheme: dark;
|
||||
}
|
||||
|
||||
/* Base */
|
||||
|
||||
* {
|
||||
@@ -232,7 +239,7 @@ ul, ol, dl, li {
|
||||
}
|
||||
|
||||
li {
|
||||
line-height: 1.2 5;
|
||||
line-height: 1.2;
|
||||
margin-top: .65rem;
|
||||
margin-bottom: .65rem;
|
||||
}
|
||||
@@ -571,6 +578,111 @@ footer a:focus-visible {
|
||||
outline-color: var(--color-pink);
|
||||
}
|
||||
|
||||
/* color picker */
|
||||
#theme {
|
||||
display: flex;
|
||||
justify-content: center;
|
||||
margin: .5rem auto 0;
|
||||
padding: 0 .75rem .5rem;
|
||||
width: fit-content;
|
||||
border: .125rem solid var(--color-teal);
|
||||
border-radius: 2rem;
|
||||
}
|
||||
|
||||
#theme legend {
|
||||
margin: 0 auto;
|
||||
color: var(--color-teal);
|
||||
}
|
||||
|
||||
footer label {
|
||||
cursor: pointer;
|
||||
border: .125rem solid var(--color-pink);
|
||||
padding: 0 .25rem;
|
||||
color: var(--color-pink);
|
||||
background-color: var(--color-bg); /* this stops the box shadows from showing through */
|
||||
box-shadow: .15em .15em var(--color-shadow);
|
||||
/* Click animation handling */
|
||||
position: relative;
|
||||
top: 0;
|
||||
left: 0;
|
||||
transition: top .05s ease-in, left .05s ease-in;
|
||||
}
|
||||
|
||||
footer input:checked + label {
|
||||
color: var(--color-blue);
|
||||
border-color: var(--color-blue);
|
||||
}
|
||||
|
||||
footer label i {
|
||||
color: var(--color-teal);
|
||||
}
|
||||
|
||||
footer input:checked + label i {
|
||||
color: var(--color-pink);
|
||||
}
|
||||
|
||||
@media (any-hover: hover) {
|
||||
footer label:hover,
|
||||
footer input:checked + label:hover,
|
||||
footer label:hover i,
|
||||
footer input:checked + label:hover i {
|
||||
color: var(--color-bg);
|
||||
}
|
||||
|
||||
footer label:hover {
|
||||
background-color: var(--color-pink);
|
||||
}
|
||||
|
||||
footer input:checked + label:hover {
|
||||
background-color: var(--color-teal);
|
||||
}
|
||||
}
|
||||
|
||||
footer input:focus-visible + label,
|
||||
footer input:focus-visible + label i {
|
||||
color: var(--color-bg);
|
||||
background-color: var(--color-pink);
|
||||
border-color: var(--color-pink);
|
||||
}
|
||||
|
||||
footer input:checked:focus-visible + label,
|
||||
footer input:checked:focus-visible + label i {
|
||||
color: var(--color-bg);
|
||||
background-color: var(--color-teal);
|
||||
border-color: var(--color-teal);
|
||||
}
|
||||
|
||||
footer label:active {
|
||||
top: .09em;
|
||||
left: .09em;
|
||||
box-shadow: .05em .05em var(--color-shadow);
|
||||
}
|
||||
|
||||
label.theme-light {
|
||||
border-top-left-radius: 1rem;
|
||||
border-bottom-left-radius: 1rem;
|
||||
border-right: none;
|
||||
padding-left: .35rem;
|
||||
}
|
||||
|
||||
label.theme-auto {
|
||||
}
|
||||
|
||||
label.theme-dark {
|
||||
border-top-right-radius: 1rem;
|
||||
border-bottom-right-radius: 1rem;
|
||||
border-left: none;
|
||||
padding-right: .35rem;
|
||||
}
|
||||
|
||||
footer input {
|
||||
/* To allow screen reader to still access these. */
|
||||
/* From https://lyra.horse/blog/2025/08/you-dont-need-js/ */
|
||||
opacity: 0;
|
||||
position: absolute;
|
||||
pointer-events: none;
|
||||
}
|
||||
|
||||
/* Pagination */
|
||||
.pagination,
|
||||
.pagination li {
|
||||
@@ -833,6 +945,8 @@ pre[class*=language-]::selection {
|
||||
}
|
||||
}</style>
|
||||
|
||||
|
||||
|
||||
<script type="module">// Thank you to https://github.com/daviddarnes/heading-anchors
|
||||
// Thank you to https://amberwilson.co.uk/blog/are-your-anchor-links-accessible/
|
||||
|
||||
@@ -1063,7 +1177,42 @@ class HeadingAnchors extends HTMLElement {
|
||||
|
||||
HeadingAnchors.register();
|
||||
|
||||
export { HeadingAnchors }</script>
|
||||
export { HeadingAnchors }
|
||||
const THEME = "theme";
|
||||
|
||||
const saveTheme = (themeValue) => {
|
||||
localStorage.setItem(THEME, themeValue);
|
||||
};
|
||||
|
||||
const themeLight = document.getElementById("theme-light");
|
||||
themeLight.addEventListener("input", (e) => {
|
||||
saveTheme(themeLight.value);
|
||||
});
|
||||
|
||||
const themeAuto = document.getElementById("theme-auto");
|
||||
themeAuto.addEventListener("input", (e) => {
|
||||
saveTheme(themeAuto.auto);
|
||||
});
|
||||
|
||||
const themeDark = document.getElementById("theme-dark");
|
||||
themeDark.addEventListener("input", (e) => {
|
||||
saveTheme(themeDark.value);
|
||||
});
|
||||
|
||||
var currentThemeValue = localStorage.getItem(THEME);
|
||||
switch (currentThemeValue) {
|
||||
case "light":
|
||||
themeLight.checked = true;
|
||||
break;
|
||||
case "auto":
|
||||
themeAuto.checked = true;
|
||||
break;
|
||||
case "dark":
|
||||
themeDark.checked = true;
|
||||
break;
|
||||
default:
|
||||
themeAuto.checked = true;
|
||||
}</script>
|
||||
|
||||
</head>
|
||||
<body>
|
||||
@@ -1265,9 +1414,30 @@ export { HeadingAnchors }</script>
|
||||
</a>
|
||||
</li>
|
||||
</ul>
|
||||
|
||||
<fieldset id="theme">
|
||||
<legend>color scheme</legend>
|
||||
|
||||
<input type="radio" id="theme-light" name="theme" value="light">
|
||||
<label class="theme-light" for="theme-light">
|
||||
<i class="fa-regular fa-sun" aria-hidden="true"></i>
|
||||
light
|
||||
</label>
|
||||
|
||||
<input type="radio" id="theme-auto" name="theme" value="auto">
|
||||
<label class="theme-auto" for="theme-auto">
|
||||
auto
|
||||
</label>
|
||||
|
||||
<input type="radio" id="theme-dark" name="theme" value="dark">
|
||||
<label class="theme-dark" for="theme-dark">
|
||||
dark
|
||||
<i class="fa-regular fa-moon" aria-hidden="true"></i>
|
||||
</label>
|
||||
</fieldset>
|
||||
</footer>
|
||||
|
||||
|
||||
<!-- This page `/about/` was built on 2026-09-08T23:18:32.766Z -->
|
||||
<!-- This page `/about/` was built on 2026-09-09T20:38:02.942Z -->
|
||||
</body>
|
||||
</html>
|
||||
|
||||
@@ -478,6 +478,13 @@ body:has(dialog[open]) {
|
||||
--color-grey: light-dark(var(--color-grey-dark), var(--color-grey-light));
|
||||
}
|
||||
|
||||
:root:has(#theme-light:checked) {
|
||||
color-scheme: light;
|
||||
}
|
||||
:root:has(#theme-dark:checked) {
|
||||
color-scheme: dark;
|
||||
}
|
||||
|
||||
/* Base */
|
||||
|
||||
* {
|
||||
@@ -621,7 +628,7 @@ ul, ol, dl, li {
|
||||
}
|
||||
|
||||
li {
|
||||
line-height: 1.2 5;
|
||||
line-height: 1.2;
|
||||
margin-top: .65rem;
|
||||
margin-bottom: .65rem;
|
||||
}
|
||||
@@ -960,6 +967,111 @@ footer a:focus-visible {
|
||||
outline-color: var(--color-pink);
|
||||
}
|
||||
|
||||
/* color picker */
|
||||
#theme {
|
||||
display: flex;
|
||||
justify-content: center;
|
||||
margin: .5rem auto 0;
|
||||
padding: 0 .75rem .5rem;
|
||||
width: fit-content;
|
||||
border: .125rem solid var(--color-teal);
|
||||
border-radius: 2rem;
|
||||
}
|
||||
|
||||
#theme legend {
|
||||
margin: 0 auto;
|
||||
color: var(--color-teal);
|
||||
}
|
||||
|
||||
footer label {
|
||||
cursor: pointer;
|
||||
border: .125rem solid var(--color-pink);
|
||||
padding: 0 .25rem;
|
||||
color: var(--color-pink);
|
||||
background-color: var(--color-bg); /* this stops the box shadows from showing through */
|
||||
box-shadow: .15em .15em var(--color-shadow);
|
||||
/* Click animation handling */
|
||||
position: relative;
|
||||
top: 0;
|
||||
left: 0;
|
||||
transition: top .05s ease-in, left .05s ease-in;
|
||||
}
|
||||
|
||||
footer input:checked + label {
|
||||
color: var(--color-blue);
|
||||
border-color: var(--color-blue);
|
||||
}
|
||||
|
||||
footer label i {
|
||||
color: var(--color-teal);
|
||||
}
|
||||
|
||||
footer input:checked + label i {
|
||||
color: var(--color-pink);
|
||||
}
|
||||
|
||||
@media (any-hover: hover) {
|
||||
footer label:hover,
|
||||
footer input:checked + label:hover,
|
||||
footer label:hover i,
|
||||
footer input:checked + label:hover i {
|
||||
color: var(--color-bg);
|
||||
}
|
||||
|
||||
footer label:hover {
|
||||
background-color: var(--color-pink);
|
||||
}
|
||||
|
||||
footer input:checked + label:hover {
|
||||
background-color: var(--color-teal);
|
||||
}
|
||||
}
|
||||
|
||||
footer input:focus-visible + label,
|
||||
footer input:focus-visible + label i {
|
||||
color: var(--color-bg);
|
||||
background-color: var(--color-pink);
|
||||
border-color: var(--color-pink);
|
||||
}
|
||||
|
||||
footer input:checked:focus-visible + label,
|
||||
footer input:checked:focus-visible + label i {
|
||||
color: var(--color-bg);
|
||||
background-color: var(--color-teal);
|
||||
border-color: var(--color-teal);
|
||||
}
|
||||
|
||||
footer label:active {
|
||||
top: .09em;
|
||||
left: .09em;
|
||||
box-shadow: .05em .05em var(--color-shadow);
|
||||
}
|
||||
|
||||
label.theme-light {
|
||||
border-top-left-radius: 1rem;
|
||||
border-bottom-left-radius: 1rem;
|
||||
border-right: none;
|
||||
padding-left: .35rem;
|
||||
}
|
||||
|
||||
label.theme-auto {
|
||||
}
|
||||
|
||||
label.theme-dark {
|
||||
border-top-right-radius: 1rem;
|
||||
border-bottom-right-radius: 1rem;
|
||||
border-left: none;
|
||||
padding-right: .35rem;
|
||||
}
|
||||
|
||||
footer input {
|
||||
/* To allow screen reader to still access these. */
|
||||
/* From https://lyra.horse/blog/2025/08/you-dont-need-js/ */
|
||||
opacity: 0;
|
||||
position: absolute;
|
||||
pointer-events: none;
|
||||
}
|
||||
|
||||
/* Pagination */
|
||||
.pagination,
|
||||
.pagination li {
|
||||
@@ -1222,6 +1334,8 @@ pre[class*=language-]::selection {
|
||||
}
|
||||
}</style>
|
||||
|
||||
|
||||
|
||||
<script type="module">// Thank you to https://github.com/daviddarnes/heading-anchors
|
||||
// Thank you to https://amberwilson.co.uk/blog/are-your-anchor-links-accessible/
|
||||
|
||||
@@ -1476,6 +1590,41 @@ if (window.innerWidth > 650) {
|
||||
dialog.close();
|
||||
}
|
||||
});
|
||||
}
|
||||
const THEME = "theme";
|
||||
|
||||
const saveTheme = (themeValue) => {
|
||||
localStorage.setItem(THEME, themeValue);
|
||||
};
|
||||
|
||||
const themeLight = document.getElementById("theme-light");
|
||||
themeLight.addEventListener("input", (e) => {
|
||||
saveTheme(themeLight.value);
|
||||
});
|
||||
|
||||
const themeAuto = document.getElementById("theme-auto");
|
||||
themeAuto.addEventListener("input", (e) => {
|
||||
saveTheme(themeAuto.auto);
|
||||
});
|
||||
|
||||
const themeDark = document.getElementById("theme-dark");
|
||||
themeDark.addEventListener("input", (e) => {
|
||||
saveTheme(themeDark.value);
|
||||
});
|
||||
|
||||
var currentThemeValue = localStorage.getItem(THEME);
|
||||
switch (currentThemeValue) {
|
||||
case "light":
|
||||
themeLight.checked = true;
|
||||
break;
|
||||
case "auto":
|
||||
themeAuto.checked = true;
|
||||
break;
|
||||
case "dark":
|
||||
themeDark.checked = true;
|
||||
break;
|
||||
default:
|
||||
themeAuto.checked = true;
|
||||
}</script>
|
||||
|
||||
</head>
|
||||
@@ -1626,45 +1775,45 @@ if (window.innerWidth > 650) {
|
||||
<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="/flocked-notebook/">
|
||||
<h2 data-ha-exclude="" id="flocked-notebook">flocked notebook </h2>
|
||||
|
||||
<ul class="postlist-tags">
|
||||
|
||||
<li>book</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/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="/orange-journal/">
|
||||
<h2 data-ha-exclude="" id="orange-journal">orange 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/orange-journal.jpg" alt="A three panel collage showcasing a small book with foldout pages and a bright orange cover." loading="lazy" decoding="async" width="1000" height="1776">
|
||||
|
||||
</a>
|
||||
</li>
|
||||
|
||||
<li class="post">
|
||||
<a class="postlink" href="/black-and-red-journal/">
|
||||
<h2 data-ha-exclude="" id="black-and-red-journal">black and red journal </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>book</li>
|
||||
|
||||
<li>leather</li>
|
||||
|
||||
<li>book</li>
|
||||
|
||||
</ul>
|
||||
<img src="/img/black-red-journal.jpg" alt="3 image collage showing a leather-bound journal. The cover is black, with long red vertical stitches along the spine and a red leather strap for a closure. On the back in one lower corner is stamped LEE CAT ART" loading="lazy" decoding="async" width="1000" height="1000">
|
||||
<img src="/img/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>
|
||||
@@ -1697,9 +1846,30 @@ if (window.innerWidth > 650) {
|
||||
</a>
|
||||
</li>
|
||||
</ul>
|
||||
|
||||
<fieldset id="theme">
|
||||
<legend>color scheme</legend>
|
||||
|
||||
<input type="radio" id="theme-light" name="theme" value="light">
|
||||
<label class="theme-light" for="theme-light">
|
||||
<i class="fa-regular fa-sun" aria-hidden="true"></i>
|
||||
light
|
||||
</label>
|
||||
|
||||
<input type="radio" id="theme-auto" name="theme" value="auto">
|
||||
<label class="theme-auto" for="theme-auto">
|
||||
auto
|
||||
</label>
|
||||
|
||||
<input type="radio" id="theme-dark" name="theme" value="dark">
|
||||
<label class="theme-dark" for="theme-dark">
|
||||
dark
|
||||
<i class="fa-regular fa-moon" aria-hidden="true"></i>
|
||||
</label>
|
||||
</fieldset>
|
||||
</footer>
|
||||
|
||||
|
||||
<!-- This page `/acadia-coloring-journal/` was built on 2026-09-08T23:18:32.730Z -->
|
||||
<!-- This page `/acadia-coloring-journal/` was built on 2026-09-09T20:38:02.891Z -->
|
||||
</body>
|
||||
</html>
|
||||
|
||||
+177
-5
@@ -478,6 +478,13 @@ body:has(dialog[open]) {
|
||||
--color-grey: light-dark(var(--color-grey-dark), var(--color-grey-light));
|
||||
}
|
||||
|
||||
:root:has(#theme-light:checked) {
|
||||
color-scheme: light;
|
||||
}
|
||||
:root:has(#theme-dark:checked) {
|
||||
color-scheme: dark;
|
||||
}
|
||||
|
||||
/* Base */
|
||||
|
||||
* {
|
||||
@@ -621,7 +628,7 @@ ul, ol, dl, li {
|
||||
}
|
||||
|
||||
li {
|
||||
line-height: 1.2 5;
|
||||
line-height: 1.2;
|
||||
margin-top: .65rem;
|
||||
margin-bottom: .65rem;
|
||||
}
|
||||
@@ -960,6 +967,111 @@ footer a:focus-visible {
|
||||
outline-color: var(--color-pink);
|
||||
}
|
||||
|
||||
/* color picker */
|
||||
#theme {
|
||||
display: flex;
|
||||
justify-content: center;
|
||||
margin: .5rem auto 0;
|
||||
padding: 0 .75rem .5rem;
|
||||
width: fit-content;
|
||||
border: .125rem solid var(--color-teal);
|
||||
border-radius: 2rem;
|
||||
}
|
||||
|
||||
#theme legend {
|
||||
margin: 0 auto;
|
||||
color: var(--color-teal);
|
||||
}
|
||||
|
||||
footer label {
|
||||
cursor: pointer;
|
||||
border: .125rem solid var(--color-pink);
|
||||
padding: 0 .25rem;
|
||||
color: var(--color-pink);
|
||||
background-color: var(--color-bg); /* this stops the box shadows from showing through */
|
||||
box-shadow: .15em .15em var(--color-shadow);
|
||||
/* Click animation handling */
|
||||
position: relative;
|
||||
top: 0;
|
||||
left: 0;
|
||||
transition: top .05s ease-in, left .05s ease-in;
|
||||
}
|
||||
|
||||
footer input:checked + label {
|
||||
color: var(--color-blue);
|
||||
border-color: var(--color-blue);
|
||||
}
|
||||
|
||||
footer label i {
|
||||
color: var(--color-teal);
|
||||
}
|
||||
|
||||
footer input:checked + label i {
|
||||
color: var(--color-pink);
|
||||
}
|
||||
|
||||
@media (any-hover: hover) {
|
||||
footer label:hover,
|
||||
footer input:checked + label:hover,
|
||||
footer label:hover i,
|
||||
footer input:checked + label:hover i {
|
||||
color: var(--color-bg);
|
||||
}
|
||||
|
||||
footer label:hover {
|
||||
background-color: var(--color-pink);
|
||||
}
|
||||
|
||||
footer input:checked + label:hover {
|
||||
background-color: var(--color-teal);
|
||||
}
|
||||
}
|
||||
|
||||
footer input:focus-visible + label,
|
||||
footer input:focus-visible + label i {
|
||||
color: var(--color-bg);
|
||||
background-color: var(--color-pink);
|
||||
border-color: var(--color-pink);
|
||||
}
|
||||
|
||||
footer input:checked:focus-visible + label,
|
||||
footer input:checked:focus-visible + label i {
|
||||
color: var(--color-bg);
|
||||
background-color: var(--color-teal);
|
||||
border-color: var(--color-teal);
|
||||
}
|
||||
|
||||
footer label:active {
|
||||
top: .09em;
|
||||
left: .09em;
|
||||
box-shadow: .05em .05em var(--color-shadow);
|
||||
}
|
||||
|
||||
label.theme-light {
|
||||
border-top-left-radius: 1rem;
|
||||
border-bottom-left-radius: 1rem;
|
||||
border-right: none;
|
||||
padding-left: .35rem;
|
||||
}
|
||||
|
||||
label.theme-auto {
|
||||
}
|
||||
|
||||
label.theme-dark {
|
||||
border-top-right-radius: 1rem;
|
||||
border-bottom-right-radius: 1rem;
|
||||
border-left: none;
|
||||
padding-right: .35rem;
|
||||
}
|
||||
|
||||
footer input {
|
||||
/* To allow screen reader to still access these. */
|
||||
/* From https://lyra.horse/blog/2025/08/you-dont-need-js/ */
|
||||
opacity: 0;
|
||||
position: absolute;
|
||||
pointer-events: none;
|
||||
}
|
||||
|
||||
/* Pagination */
|
||||
.pagination,
|
||||
.pagination li {
|
||||
@@ -1222,6 +1334,8 @@ pre[class*=language-]::selection {
|
||||
}
|
||||
}</style>
|
||||
|
||||
|
||||
|
||||
<script type="module">// Thank you to https://github.com/daviddarnes/heading-anchors
|
||||
// Thank you to https://amberwilson.co.uk/blog/are-your-anchor-links-accessible/
|
||||
|
||||
@@ -1476,6 +1590,41 @@ if (window.innerWidth > 650) {
|
||||
dialog.close();
|
||||
}
|
||||
});
|
||||
}
|
||||
const THEME = "theme";
|
||||
|
||||
const saveTheme = (themeValue) => {
|
||||
localStorage.setItem(THEME, themeValue);
|
||||
};
|
||||
|
||||
const themeLight = document.getElementById("theme-light");
|
||||
themeLight.addEventListener("input", (e) => {
|
||||
saveTheme(themeLight.value);
|
||||
});
|
||||
|
||||
const themeAuto = document.getElementById("theme-auto");
|
||||
themeAuto.addEventListener("input", (e) => {
|
||||
saveTheme(themeAuto.auto);
|
||||
});
|
||||
|
||||
const themeDark = document.getElementById("theme-dark");
|
||||
themeDark.addEventListener("input", (e) => {
|
||||
saveTheme(themeDark.value);
|
||||
});
|
||||
|
||||
var currentThemeValue = localStorage.getItem(THEME);
|
||||
switch (currentThemeValue) {
|
||||
case "light":
|
||||
themeLight.checked = true;
|
||||
break;
|
||||
case "auto":
|
||||
themeAuto.checked = true;
|
||||
break;
|
||||
case "dark":
|
||||
themeDark.checked = true;
|
||||
break;
|
||||
default:
|
||||
themeAuto.checked = true;
|
||||
}</script>
|
||||
|
||||
</head>
|
||||
@@ -1642,15 +1791,17 @@ if (window.innerWidth > 650) {
|
||||
</li>
|
||||
|
||||
<li class="post">
|
||||
<a class="postlink" href="/knit-shrimp/">
|
||||
<h2 data-ha-exclude="" id="knit-shrimp">knit shrimp </h2>
|
||||
<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/knit-shrimp.jpg" alt="Four knitted shrimp in various shades of pink. They are all somewhere around hand-sized, and have little yarn antennae and leggies." loading="lazy" decoding="async" width="1000" height="750">
|
||||
<img src="/img/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>
|
||||
@@ -1683,9 +1834,30 @@ if (window.innerWidth > 650) {
|
||||
</a>
|
||||
</li>
|
||||
</ul>
|
||||
|
||||
<fieldset id="theme">
|
||||
<legend>color scheme</legend>
|
||||
|
||||
<input type="radio" id="theme-light" name="theme" value="light">
|
||||
<label class="theme-light" for="theme-light">
|
||||
<i class="fa-regular fa-sun" aria-hidden="true"></i>
|
||||
light
|
||||
</label>
|
||||
|
||||
<input type="radio" id="theme-auto" name="theme" value="auto">
|
||||
<label class="theme-auto" for="theme-auto">
|
||||
auto
|
||||
</label>
|
||||
|
||||
<input type="radio" id="theme-dark" name="theme" value="dark">
|
||||
<label class="theme-dark" for="theme-dark">
|
||||
dark
|
||||
<i class="fa-regular fa-moon" aria-hidden="true"></i>
|
||||
</label>
|
||||
</fieldset>
|
||||
</footer>
|
||||
|
||||
|
||||
<!-- This page `/acadia-mitts/` was built on 2026-09-08T23:18:32.748Z -->
|
||||
<!-- This page `/acadia-mitts/` was built on 2026-09-09T20:38:02.933Z -->
|
||||
</body>
|
||||
</html>
|
||||
|
||||
@@ -478,6 +478,13 @@ body:has(dialog[open]) {
|
||||
--color-grey: light-dark(var(--color-grey-dark), var(--color-grey-light));
|
||||
}
|
||||
|
||||
:root:has(#theme-light:checked) {
|
||||
color-scheme: light;
|
||||
}
|
||||
:root:has(#theme-dark:checked) {
|
||||
color-scheme: dark;
|
||||
}
|
||||
|
||||
/* Base */
|
||||
|
||||
* {
|
||||
@@ -621,7 +628,7 @@ ul, ol, dl, li {
|
||||
}
|
||||
|
||||
li {
|
||||
line-height: 1.2 5;
|
||||
line-height: 1.2;
|
||||
margin-top: .65rem;
|
||||
margin-bottom: .65rem;
|
||||
}
|
||||
@@ -960,6 +967,111 @@ footer a:focus-visible {
|
||||
outline-color: var(--color-pink);
|
||||
}
|
||||
|
||||
/* color picker */
|
||||
#theme {
|
||||
display: flex;
|
||||
justify-content: center;
|
||||
margin: .5rem auto 0;
|
||||
padding: 0 .75rem .5rem;
|
||||
width: fit-content;
|
||||
border: .125rem solid var(--color-teal);
|
||||
border-radius: 2rem;
|
||||
}
|
||||
|
||||
#theme legend {
|
||||
margin: 0 auto;
|
||||
color: var(--color-teal);
|
||||
}
|
||||
|
||||
footer label {
|
||||
cursor: pointer;
|
||||
border: .125rem solid var(--color-pink);
|
||||
padding: 0 .25rem;
|
||||
color: var(--color-pink);
|
||||
background-color: var(--color-bg); /* this stops the box shadows from showing through */
|
||||
box-shadow: .15em .15em var(--color-shadow);
|
||||
/* Click animation handling */
|
||||
position: relative;
|
||||
top: 0;
|
||||
left: 0;
|
||||
transition: top .05s ease-in, left .05s ease-in;
|
||||
}
|
||||
|
||||
footer input:checked + label {
|
||||
color: var(--color-blue);
|
||||
border-color: var(--color-blue);
|
||||
}
|
||||
|
||||
footer label i {
|
||||
color: var(--color-teal);
|
||||
}
|
||||
|
||||
footer input:checked + label i {
|
||||
color: var(--color-pink);
|
||||
}
|
||||
|
||||
@media (any-hover: hover) {
|
||||
footer label:hover,
|
||||
footer input:checked + label:hover,
|
||||
footer label:hover i,
|
||||
footer input:checked + label:hover i {
|
||||
color: var(--color-bg);
|
||||
}
|
||||
|
||||
footer label:hover {
|
||||
background-color: var(--color-pink);
|
||||
}
|
||||
|
||||
footer input:checked + label:hover {
|
||||
background-color: var(--color-teal);
|
||||
}
|
||||
}
|
||||
|
||||
footer input:focus-visible + label,
|
||||
footer input:focus-visible + label i {
|
||||
color: var(--color-bg);
|
||||
background-color: var(--color-pink);
|
||||
border-color: var(--color-pink);
|
||||
}
|
||||
|
||||
footer input:checked:focus-visible + label,
|
||||
footer input:checked:focus-visible + label i {
|
||||
color: var(--color-bg);
|
||||
background-color: var(--color-teal);
|
||||
border-color: var(--color-teal);
|
||||
}
|
||||
|
||||
footer label:active {
|
||||
top: .09em;
|
||||
left: .09em;
|
||||
box-shadow: .05em .05em var(--color-shadow);
|
||||
}
|
||||
|
||||
label.theme-light {
|
||||
border-top-left-radius: 1rem;
|
||||
border-bottom-left-radius: 1rem;
|
||||
border-right: none;
|
||||
padding-left: .35rem;
|
||||
}
|
||||
|
||||
label.theme-auto {
|
||||
}
|
||||
|
||||
label.theme-dark {
|
||||
border-top-right-radius: 1rem;
|
||||
border-bottom-right-radius: 1rem;
|
||||
border-left: none;
|
||||
padding-right: .35rem;
|
||||
}
|
||||
|
||||
footer input {
|
||||
/* To allow screen reader to still access these. */
|
||||
/* From https://lyra.horse/blog/2025/08/you-dont-need-js/ */
|
||||
opacity: 0;
|
||||
position: absolute;
|
||||
pointer-events: none;
|
||||
}
|
||||
|
||||
/* Pagination */
|
||||
.pagination,
|
||||
.pagination li {
|
||||
@@ -1222,6 +1334,8 @@ pre[class*=language-]::selection {
|
||||
}
|
||||
}</style>
|
||||
|
||||
|
||||
|
||||
<script type="module">// Thank you to https://github.com/daviddarnes/heading-anchors
|
||||
// Thank you to https://amberwilson.co.uk/blog/are-your-anchor-links-accessible/
|
||||
|
||||
@@ -1476,6 +1590,41 @@ if (window.innerWidth > 650) {
|
||||
dialog.close();
|
||||
}
|
||||
});
|
||||
}
|
||||
const THEME = "theme";
|
||||
|
||||
const saveTheme = (themeValue) => {
|
||||
localStorage.setItem(THEME, themeValue);
|
||||
};
|
||||
|
||||
const themeLight = document.getElementById("theme-light");
|
||||
themeLight.addEventListener("input", (e) => {
|
||||
saveTheme(themeLight.value);
|
||||
});
|
||||
|
||||
const themeAuto = document.getElementById("theme-auto");
|
||||
themeAuto.addEventListener("input", (e) => {
|
||||
saveTheme(themeAuto.auto);
|
||||
});
|
||||
|
||||
const themeDark = document.getElementById("theme-dark");
|
||||
themeDark.addEventListener("input", (e) => {
|
||||
saveTheme(themeDark.value);
|
||||
});
|
||||
|
||||
var currentThemeValue = localStorage.getItem(THEME);
|
||||
switch (currentThemeValue) {
|
||||
case "light":
|
||||
themeLight.checked = true;
|
||||
break;
|
||||
case "auto":
|
||||
themeAuto.checked = true;
|
||||
break;
|
||||
case "dark":
|
||||
themeDark.checked = true;
|
||||
break;
|
||||
default:
|
||||
themeAuto.checked = true;
|
||||
}</script>
|
||||
|
||||
</head>
|
||||
@@ -1668,6 +1817,36 @@ if (window.innerWidth > 650) {
|
||||
<h2 data-ha-exclude="" id="related-posts">related posts</h2>
|
||||
<ol id="postlist">
|
||||
|
||||
<li class="post">
|
||||
<a class="postlink" href="/core-css/">
|
||||
<h2 data-ha-exclude="" id="core-css">core CSS </h2>
|
||||
|
||||
<ul class="postlist-tags">
|
||||
|
||||
<li>software</li>
|
||||
|
||||
<li>highlight</li>
|
||||
|
||||
</ul>
|
||||
<img src="/img/core-css.png" alt="A website mockup in dark mode with light pink accents. Everything is filler text such as the title 'This is my cool website', headers reading things like 'This is an h1', nav items 'Nav item 1', etc. There is a paragraph block - the opening of the Bee Movie - and part of an image visible - a screencap of the music video for Never Gonna Give You Up by Rick Astley." loading="lazy" decoding="async" width="1000" height="447">
|
||||
|
||||
</a>
|
||||
</li>
|
||||
|
||||
<li class="post">
|
||||
<a class="postlink" href="/an-intro-to-git/">
|
||||
<h2 data-ha-exclude="" id="an-intro-to-git">an intro to git </h2>
|
||||
|
||||
<ul class="postlist-tags">
|
||||
|
||||
<li>software</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">
|
||||
|
||||
</a>
|
||||
</li>
|
||||
|
||||
<li class="post">
|
||||
<a class="postlink" href="/framer-accessibility/">
|
||||
<h2 data-ha-exclude="" id="framer-accessibility">framer accessibility </h2>
|
||||
@@ -1682,36 +1861,6 @@ if (window.innerWidth > 650) {
|
||||
</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="/visual-site-builders-and-accessibility/">
|
||||
<h2 data-ha-exclude="" id="visual-site-builders-and-accessibility">visual site builders and accessibility </h2>
|
||||
|
||||
<ul class="postlist-tags">
|
||||
|
||||
<li>software</li>
|
||||
|
||||
</ul>
|
||||
<img src="/img/roses.jpg" alt="Image unrelated to post. Two peach-colored roses, the farther away one a bit out of focus." loading="lazy" decoding="async" width="1000" height="666">
|
||||
|
||||
</a>
|
||||
</li>
|
||||
|
||||
</ol>
|
||||
|
||||
</section>
|
||||
@@ -1740,9 +1889,30 @@ if (window.innerWidth > 650) {
|
||||
</a>
|
||||
</li>
|
||||
</ul>
|
||||
|
||||
<fieldset id="theme">
|
||||
<legend>color scheme</legend>
|
||||
|
||||
<input type="radio" id="theme-light" name="theme" value="light">
|
||||
<label class="theme-light" for="theme-light">
|
||||
<i class="fa-regular fa-sun" aria-hidden="true"></i>
|
||||
light
|
||||
</label>
|
||||
|
||||
<input type="radio" id="theme-auto" name="theme" value="auto">
|
||||
<label class="theme-auto" for="theme-auto">
|
||||
auto
|
||||
</label>
|
||||
|
||||
<input type="radio" id="theme-dark" name="theme" value="dark">
|
||||
<label class="theme-dark" for="theme-dark">
|
||||
dark
|
||||
<i class="fa-regular fa-moon" aria-hidden="true"></i>
|
||||
</label>
|
||||
</fieldset>
|
||||
</footer>
|
||||
|
||||
|
||||
<!-- This page `/accessible-image-modals/` was built on 2026-09-08T23:18:32.757Z -->
|
||||
<!-- This page `/accessible-image-modals/` was built on 2026-09-09T20:38:02.939Z -->
|
||||
</body>
|
||||
</html>
|
||||
|
||||
+183
-13
@@ -478,6 +478,13 @@ body:has(dialog[open]) {
|
||||
--color-grey: light-dark(var(--color-grey-dark), var(--color-grey-light));
|
||||
}
|
||||
|
||||
:root:has(#theme-light:checked) {
|
||||
color-scheme: light;
|
||||
}
|
||||
:root:has(#theme-dark:checked) {
|
||||
color-scheme: dark;
|
||||
}
|
||||
|
||||
/* Base */
|
||||
|
||||
* {
|
||||
@@ -621,7 +628,7 @@ ul, ol, dl, li {
|
||||
}
|
||||
|
||||
li {
|
||||
line-height: 1.2 5;
|
||||
line-height: 1.2;
|
||||
margin-top: .65rem;
|
||||
margin-bottom: .65rem;
|
||||
}
|
||||
@@ -960,6 +967,111 @@ footer a:focus-visible {
|
||||
outline-color: var(--color-pink);
|
||||
}
|
||||
|
||||
/* color picker */
|
||||
#theme {
|
||||
display: flex;
|
||||
justify-content: center;
|
||||
margin: .5rem auto 0;
|
||||
padding: 0 .75rem .5rem;
|
||||
width: fit-content;
|
||||
border: .125rem solid var(--color-teal);
|
||||
border-radius: 2rem;
|
||||
}
|
||||
|
||||
#theme legend {
|
||||
margin: 0 auto;
|
||||
color: var(--color-teal);
|
||||
}
|
||||
|
||||
footer label {
|
||||
cursor: pointer;
|
||||
border: .125rem solid var(--color-pink);
|
||||
padding: 0 .25rem;
|
||||
color: var(--color-pink);
|
||||
background-color: var(--color-bg); /* this stops the box shadows from showing through */
|
||||
box-shadow: .15em .15em var(--color-shadow);
|
||||
/* Click animation handling */
|
||||
position: relative;
|
||||
top: 0;
|
||||
left: 0;
|
||||
transition: top .05s ease-in, left .05s ease-in;
|
||||
}
|
||||
|
||||
footer input:checked + label {
|
||||
color: var(--color-blue);
|
||||
border-color: var(--color-blue);
|
||||
}
|
||||
|
||||
footer label i {
|
||||
color: var(--color-teal);
|
||||
}
|
||||
|
||||
footer input:checked + label i {
|
||||
color: var(--color-pink);
|
||||
}
|
||||
|
||||
@media (any-hover: hover) {
|
||||
footer label:hover,
|
||||
footer input:checked + label:hover,
|
||||
footer label:hover i,
|
||||
footer input:checked + label:hover i {
|
||||
color: var(--color-bg);
|
||||
}
|
||||
|
||||
footer label:hover {
|
||||
background-color: var(--color-pink);
|
||||
}
|
||||
|
||||
footer input:checked + label:hover {
|
||||
background-color: var(--color-teal);
|
||||
}
|
||||
}
|
||||
|
||||
footer input:focus-visible + label,
|
||||
footer input:focus-visible + label i {
|
||||
color: var(--color-bg);
|
||||
background-color: var(--color-pink);
|
||||
border-color: var(--color-pink);
|
||||
}
|
||||
|
||||
footer input:checked:focus-visible + label,
|
||||
footer input:checked:focus-visible + label i {
|
||||
color: var(--color-bg);
|
||||
background-color: var(--color-teal);
|
||||
border-color: var(--color-teal);
|
||||
}
|
||||
|
||||
footer label:active {
|
||||
top: .09em;
|
||||
left: .09em;
|
||||
box-shadow: .05em .05em var(--color-shadow);
|
||||
}
|
||||
|
||||
label.theme-light {
|
||||
border-top-left-radius: 1rem;
|
||||
border-bottom-left-radius: 1rem;
|
||||
border-right: none;
|
||||
padding-left: .35rem;
|
||||
}
|
||||
|
||||
label.theme-auto {
|
||||
}
|
||||
|
||||
label.theme-dark {
|
||||
border-top-right-radius: 1rem;
|
||||
border-bottom-right-radius: 1rem;
|
||||
border-left: none;
|
||||
padding-right: .35rem;
|
||||
}
|
||||
|
||||
footer input {
|
||||
/* To allow screen reader to still access these. */
|
||||
/* From https://lyra.horse/blog/2025/08/you-dont-need-js/ */
|
||||
opacity: 0;
|
||||
position: absolute;
|
||||
pointer-events: none;
|
||||
}
|
||||
|
||||
/* Pagination */
|
||||
.pagination,
|
||||
.pagination li {
|
||||
@@ -1222,6 +1334,8 @@ pre[class*=language-]::selection {
|
||||
}
|
||||
}</style>
|
||||
|
||||
|
||||
|
||||
<script type="module">// Thank you to https://github.com/daviddarnes/heading-anchors
|
||||
// Thank you to https://amberwilson.co.uk/blog/are-your-anchor-links-accessible/
|
||||
|
||||
@@ -1476,6 +1590,41 @@ if (window.innerWidth > 650) {
|
||||
dialog.close();
|
||||
}
|
||||
});
|
||||
}
|
||||
const THEME = "theme";
|
||||
|
||||
const saveTheme = (themeValue) => {
|
||||
localStorage.setItem(THEME, themeValue);
|
||||
};
|
||||
|
||||
const themeLight = document.getElementById("theme-light");
|
||||
themeLight.addEventListener("input", (e) => {
|
||||
saveTheme(themeLight.value);
|
||||
});
|
||||
|
||||
const themeAuto = document.getElementById("theme-auto");
|
||||
themeAuto.addEventListener("input", (e) => {
|
||||
saveTheme(themeAuto.auto);
|
||||
});
|
||||
|
||||
const themeDark = document.getElementById("theme-dark");
|
||||
themeDark.addEventListener("input", (e) => {
|
||||
saveTheme(themeDark.value);
|
||||
});
|
||||
|
||||
var currentThemeValue = localStorage.getItem(THEME);
|
||||
switch (currentThemeValue) {
|
||||
case "light":
|
||||
themeLight.checked = true;
|
||||
break;
|
||||
case "auto":
|
||||
themeAuto.checked = true;
|
||||
break;
|
||||
case "dark":
|
||||
themeDark.checked = true;
|
||||
break;
|
||||
default:
|
||||
themeAuto.checked = true;
|
||||
}</script>
|
||||
|
||||
</head>
|
||||
@@ -2025,47 +2174,47 @@ codeberg https://codeberg.org/inherentlee/git-intro.git (push)</code></pre>
|
||||
<ol id="postlist">
|
||||
|
||||
<li class="post">
|
||||
<a class="postlink" href="/backend-accessibility/">
|
||||
<h2 data-ha-exclude="" id="backend-accessibility">backend accessibility </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/camelCase-print.jpg" alt="A carved stamp next to its print. The print reads '#camelCase' in a slightly formal-looking italic font." loading="lazy" decoding="async" width="1000" height="750">
|
||||
<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="/intro-to-wireframing/">
|
||||
<h2 data-ha-exclude="" id="intro-to-wireframing">intro to wireframing </h2>
|
||||
<a class="postlink" href="/designing-a-bag/">
|
||||
<h2 data-ha-exclude="" id="designing-a-bag">designing a bag </h2>
|
||||
|
||||
<ul class="postlist-tags">
|
||||
|
||||
<li>leather</li>
|
||||
|
||||
<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/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't slide out." loading="lazy" decoding="async" width="1000" height="1777">
|
||||
|
||||
</a>
|
||||
</li>
|
||||
|
||||
<li class="post">
|
||||
<a class="postlink" href="/gender-in-data-models/">
|
||||
<h2 data-ha-exclude="" id="gender-in-data-models">gender in data models </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>gender</li>
|
||||
|
||||
<li>software</li>
|
||||
|
||||
<li>highlight</li>
|
||||
|
||||
</ul>
|
||||
<img src="/img/peony.jpg" alt="Image unrelated to post. A light pink peony in full bloom, close up." loading="lazy" decoding="async" width="1000" height="666">
|
||||
<img src="/img/azure-locations.jpg" alt="A Linux terminal. There is a fun rainbow flag in ascii art at the top, and then the user has called a command asking Azure for a list of locations applicable to a specific resource type. The output is lengthy." loading="lazy" decoding="async" width="1000" height="827">
|
||||
|
||||
</a>
|
||||
</li>
|
||||
@@ -2098,9 +2247,30 @@ codeberg https://codeberg.org/inherentlee/git-intro.git (push)</code></pre>
|
||||
</a>
|
||||
</li>
|
||||
</ul>
|
||||
|
||||
<fieldset id="theme">
|
||||
<legend>color scheme</legend>
|
||||
|
||||
<input type="radio" id="theme-light" name="theme" value="light">
|
||||
<label class="theme-light" for="theme-light">
|
||||
<i class="fa-regular fa-sun" aria-hidden="true"></i>
|
||||
light
|
||||
</label>
|
||||
|
||||
<input type="radio" id="theme-auto" name="theme" value="auto">
|
||||
<label class="theme-auto" for="theme-auto">
|
||||
auto
|
||||
</label>
|
||||
|
||||
<input type="radio" id="theme-dark" name="theme" value="dark">
|
||||
<label class="theme-dark" for="theme-dark">
|
||||
dark
|
||||
<i class="fa-regular fa-moon" aria-hidden="true"></i>
|
||||
</label>
|
||||
</fieldset>
|
||||
</footer>
|
||||
|
||||
|
||||
<!-- This page `/an-intro-to-git/` was built on 2026-09-08T23:18:32.755Z -->
|
||||
<!-- This page `/an-intro-to-git/` was built on 2026-09-09T20:38:02.937Z -->
|
||||
</body>
|
||||
</html>
|
||||
|
||||
+193
-35
@@ -478,6 +478,13 @@ body:has(dialog[open]) {
|
||||
--color-grey: light-dark(var(--color-grey-dark), var(--color-grey-light));
|
||||
}
|
||||
|
||||
:root:has(#theme-light:checked) {
|
||||
color-scheme: light;
|
||||
}
|
||||
:root:has(#theme-dark:checked) {
|
||||
color-scheme: dark;
|
||||
}
|
||||
|
||||
/* Base */
|
||||
|
||||
* {
|
||||
@@ -621,7 +628,7 @@ ul, ol, dl, li {
|
||||
}
|
||||
|
||||
li {
|
||||
line-height: 1.2 5;
|
||||
line-height: 1.2;
|
||||
margin-top: .65rem;
|
||||
margin-bottom: .65rem;
|
||||
}
|
||||
@@ -960,6 +967,111 @@ footer a:focus-visible {
|
||||
outline-color: var(--color-pink);
|
||||
}
|
||||
|
||||
/* color picker */
|
||||
#theme {
|
||||
display: flex;
|
||||
justify-content: center;
|
||||
margin: .5rem auto 0;
|
||||
padding: 0 .75rem .5rem;
|
||||
width: fit-content;
|
||||
border: .125rem solid var(--color-teal);
|
||||
border-radius: 2rem;
|
||||
}
|
||||
|
||||
#theme legend {
|
||||
margin: 0 auto;
|
||||
color: var(--color-teal);
|
||||
}
|
||||
|
||||
footer label {
|
||||
cursor: pointer;
|
||||
border: .125rem solid var(--color-pink);
|
||||
padding: 0 .25rem;
|
||||
color: var(--color-pink);
|
||||
background-color: var(--color-bg); /* this stops the box shadows from showing through */
|
||||
box-shadow: .15em .15em var(--color-shadow);
|
||||
/* Click animation handling */
|
||||
position: relative;
|
||||
top: 0;
|
||||
left: 0;
|
||||
transition: top .05s ease-in, left .05s ease-in;
|
||||
}
|
||||
|
||||
footer input:checked + label {
|
||||
color: var(--color-blue);
|
||||
border-color: var(--color-blue);
|
||||
}
|
||||
|
||||
footer label i {
|
||||
color: var(--color-teal);
|
||||
}
|
||||
|
||||
footer input:checked + label i {
|
||||
color: var(--color-pink);
|
||||
}
|
||||
|
||||
@media (any-hover: hover) {
|
||||
footer label:hover,
|
||||
footer input:checked + label:hover,
|
||||
footer label:hover i,
|
||||
footer input:checked + label:hover i {
|
||||
color: var(--color-bg);
|
||||
}
|
||||
|
||||
footer label:hover {
|
||||
background-color: var(--color-pink);
|
||||
}
|
||||
|
||||
footer input:checked + label:hover {
|
||||
background-color: var(--color-teal);
|
||||
}
|
||||
}
|
||||
|
||||
footer input:focus-visible + label,
|
||||
footer input:focus-visible + label i {
|
||||
color: var(--color-bg);
|
||||
background-color: var(--color-pink);
|
||||
border-color: var(--color-pink);
|
||||
}
|
||||
|
||||
footer input:checked:focus-visible + label,
|
||||
footer input:checked:focus-visible + label i {
|
||||
color: var(--color-bg);
|
||||
background-color: var(--color-teal);
|
||||
border-color: var(--color-teal);
|
||||
}
|
||||
|
||||
footer label:active {
|
||||
top: .09em;
|
||||
left: .09em;
|
||||
box-shadow: .05em .05em var(--color-shadow);
|
||||
}
|
||||
|
||||
label.theme-light {
|
||||
border-top-left-radius: 1rem;
|
||||
border-bottom-left-radius: 1rem;
|
||||
border-right: none;
|
||||
padding-left: .35rem;
|
||||
}
|
||||
|
||||
label.theme-auto {
|
||||
}
|
||||
|
||||
label.theme-dark {
|
||||
border-top-right-radius: 1rem;
|
||||
border-bottom-right-radius: 1rem;
|
||||
border-left: none;
|
||||
padding-right: .35rem;
|
||||
}
|
||||
|
||||
footer input {
|
||||
/* To allow screen reader to still access these. */
|
||||
/* From https://lyra.horse/blog/2025/08/you-dont-need-js/ */
|
||||
opacity: 0;
|
||||
position: absolute;
|
||||
pointer-events: none;
|
||||
}
|
||||
|
||||
/* Pagination */
|
||||
.pagination,
|
||||
.pagination li {
|
||||
@@ -1222,6 +1334,8 @@ pre[class*=language-]::selection {
|
||||
}
|
||||
}</style>
|
||||
|
||||
|
||||
|
||||
<script type="module">// Thank you to https://github.com/daviddarnes/heading-anchors
|
||||
// Thank you to https://amberwilson.co.uk/blog/are-your-anchor-links-accessible/
|
||||
|
||||
@@ -1476,6 +1590,41 @@ if (window.innerWidth > 650) {
|
||||
dialog.close();
|
||||
}
|
||||
});
|
||||
}
|
||||
const THEME = "theme";
|
||||
|
||||
const saveTheme = (themeValue) => {
|
||||
localStorage.setItem(THEME, themeValue);
|
||||
};
|
||||
|
||||
const themeLight = document.getElementById("theme-light");
|
||||
themeLight.addEventListener("input", (e) => {
|
||||
saveTheme(themeLight.value);
|
||||
});
|
||||
|
||||
const themeAuto = document.getElementById("theme-auto");
|
||||
themeAuto.addEventListener("input", (e) => {
|
||||
saveTheme(themeAuto.auto);
|
||||
});
|
||||
|
||||
const themeDark = document.getElementById("theme-dark");
|
||||
themeDark.addEventListener("input", (e) => {
|
||||
saveTheme(themeDark.value);
|
||||
});
|
||||
|
||||
var currentThemeValue = localStorage.getItem(THEME);
|
||||
switch (currentThemeValue) {
|
||||
case "light":
|
||||
themeLight.checked = true;
|
||||
break;
|
||||
case "auto":
|
||||
themeAuto.checked = true;
|
||||
break;
|
||||
case "dark":
|
||||
themeDark.checked = true;
|
||||
break;
|
||||
default:
|
||||
themeAuto.checked = true;
|
||||
}</script>
|
||||
|
||||
</head>
|
||||
@@ -1632,8 +1781,8 @@ if (window.innerWidth > 650) {
|
||||
<ol id="postlist">
|
||||
|
||||
<li class="post">
|
||||
<a class="postlink" href="/shrimp/">
|
||||
<h2 data-ha-exclude="" id="shrimp">shrimp </h2>
|
||||
<a class="postlink" href="/nonbinary-flag/">
|
||||
<h2 data-ha-exclude="" id="nonbinary-flag">nonbinary flag </h2>
|
||||
|
||||
<ul class="postlist-tags">
|
||||
|
||||
@@ -1641,52 +1790,40 @@ if (window.innerWidth > 650) {
|
||||
|
||||
<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="/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/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="/greeting-loons/">
|
||||
<h2 data-ha-exclude="" id="greeting-loons">greeting loons </h2>
|
||||
<a class="postlink" href="/five-of-them/">
|
||||
<h2 data-ha-exclude="" id="five-of-them">five of them </h2>
|
||||
|
||||
<ul class="postlist-tags">
|
||||
|
||||
<li>card</li>
|
||||
<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="/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>
|
||||
|
||||
<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/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>
|
||||
@@ -1719,9 +1856,30 @@ if (window.innerWidth > 650) {
|
||||
</a>
|
||||
</li>
|
||||
</ul>
|
||||
|
||||
<fieldset id="theme">
|
||||
<legend>color scheme</legend>
|
||||
|
||||
<input type="radio" id="theme-light" name="theme" value="light">
|
||||
<label class="theme-light" for="theme-light">
|
||||
<i class="fa-regular fa-sun" aria-hidden="true"></i>
|
||||
light
|
||||
</label>
|
||||
|
||||
<input type="radio" id="theme-auto" name="theme" value="auto">
|
||||
<label class="theme-auto" for="theme-auto">
|
||||
auto
|
||||
</label>
|
||||
|
||||
<input type="radio" id="theme-dark" name="theme" value="dark">
|
||||
<label class="theme-dark" for="theme-dark">
|
||||
dark
|
||||
<i class="fa-regular fa-moon" aria-hidden="true"></i>
|
||||
</label>
|
||||
</fieldset>
|
||||
</footer>
|
||||
|
||||
|
||||
<!-- This page `/anarchy-autism/` was built on 2026-09-08T23:18:32.741Z -->
|
||||
<!-- This page `/anarchy-autism/` was built on 2026-09-09T20:38:02.908Z -->
|
||||
</body>
|
||||
</html>
|
||||
|
||||
@@ -478,6 +478,13 @@ body:has(dialog[open]) {
|
||||
--color-grey: light-dark(var(--color-grey-dark), var(--color-grey-light));
|
||||
}
|
||||
|
||||
:root:has(#theme-light:checked) {
|
||||
color-scheme: light;
|
||||
}
|
||||
:root:has(#theme-dark:checked) {
|
||||
color-scheme: dark;
|
||||
}
|
||||
|
||||
/* Base */
|
||||
|
||||
* {
|
||||
@@ -621,7 +628,7 @@ ul, ol, dl, li {
|
||||
}
|
||||
|
||||
li {
|
||||
line-height: 1.2 5;
|
||||
line-height: 1.2;
|
||||
margin-top: .65rem;
|
||||
margin-bottom: .65rem;
|
||||
}
|
||||
@@ -960,6 +967,111 @@ footer a:focus-visible {
|
||||
outline-color: var(--color-pink);
|
||||
}
|
||||
|
||||
/* color picker */
|
||||
#theme {
|
||||
display: flex;
|
||||
justify-content: center;
|
||||
margin: .5rem auto 0;
|
||||
padding: 0 .75rem .5rem;
|
||||
width: fit-content;
|
||||
border: .125rem solid var(--color-teal);
|
||||
border-radius: 2rem;
|
||||
}
|
||||
|
||||
#theme legend {
|
||||
margin: 0 auto;
|
||||
color: var(--color-teal);
|
||||
}
|
||||
|
||||
footer label {
|
||||
cursor: pointer;
|
||||
border: .125rem solid var(--color-pink);
|
||||
padding: 0 .25rem;
|
||||
color: var(--color-pink);
|
||||
background-color: var(--color-bg); /* this stops the box shadows from showing through */
|
||||
box-shadow: .15em .15em var(--color-shadow);
|
||||
/* Click animation handling */
|
||||
position: relative;
|
||||
top: 0;
|
||||
left: 0;
|
||||
transition: top .05s ease-in, left .05s ease-in;
|
||||
}
|
||||
|
||||
footer input:checked + label {
|
||||
color: var(--color-blue);
|
||||
border-color: var(--color-blue);
|
||||
}
|
||||
|
||||
footer label i {
|
||||
color: var(--color-teal);
|
||||
}
|
||||
|
||||
footer input:checked + label i {
|
||||
color: var(--color-pink);
|
||||
}
|
||||
|
||||
@media (any-hover: hover) {
|
||||
footer label:hover,
|
||||
footer input:checked + label:hover,
|
||||
footer label:hover i,
|
||||
footer input:checked + label:hover i {
|
||||
color: var(--color-bg);
|
||||
}
|
||||
|
||||
footer label:hover {
|
||||
background-color: var(--color-pink);
|
||||
}
|
||||
|
||||
footer input:checked + label:hover {
|
||||
background-color: var(--color-teal);
|
||||
}
|
||||
}
|
||||
|
||||
footer input:focus-visible + label,
|
||||
footer input:focus-visible + label i {
|
||||
color: var(--color-bg);
|
||||
background-color: var(--color-pink);
|
||||
border-color: var(--color-pink);
|
||||
}
|
||||
|
||||
footer input:checked:focus-visible + label,
|
||||
footer input:checked:focus-visible + label i {
|
||||
color: var(--color-bg);
|
||||
background-color: var(--color-teal);
|
||||
border-color: var(--color-teal);
|
||||
}
|
||||
|
||||
footer label:active {
|
||||
top: .09em;
|
||||
left: .09em;
|
||||
box-shadow: .05em .05em var(--color-shadow);
|
||||
}
|
||||
|
||||
label.theme-light {
|
||||
border-top-left-radius: 1rem;
|
||||
border-bottom-left-radius: 1rem;
|
||||
border-right: none;
|
||||
padding-left: .35rem;
|
||||
}
|
||||
|
||||
label.theme-auto {
|
||||
}
|
||||
|
||||
label.theme-dark {
|
||||
border-top-right-radius: 1rem;
|
||||
border-bottom-right-radius: 1rem;
|
||||
border-left: none;
|
||||
padding-right: .35rem;
|
||||
}
|
||||
|
||||
footer input {
|
||||
/* To allow screen reader to still access these. */
|
||||
/* From https://lyra.horse/blog/2025/08/you-dont-need-js/ */
|
||||
opacity: 0;
|
||||
position: absolute;
|
||||
pointer-events: none;
|
||||
}
|
||||
|
||||
/* Pagination */
|
||||
.pagination,
|
||||
.pagination li {
|
||||
@@ -1222,6 +1334,8 @@ pre[class*=language-]::selection {
|
||||
}
|
||||
}</style>
|
||||
|
||||
|
||||
|
||||
<script type="module">// Thank you to https://github.com/daviddarnes/heading-anchors
|
||||
// Thank you to https://amberwilson.co.uk/blog/are-your-anchor-links-accessible/
|
||||
|
||||
@@ -1476,6 +1590,41 @@ if (window.innerWidth > 650) {
|
||||
dialog.close();
|
||||
}
|
||||
});
|
||||
}
|
||||
const THEME = "theme";
|
||||
|
||||
const saveTheme = (themeValue) => {
|
||||
localStorage.setItem(THEME, themeValue);
|
||||
};
|
||||
|
||||
const themeLight = document.getElementById("theme-light");
|
||||
themeLight.addEventListener("input", (e) => {
|
||||
saveTheme(themeLight.value);
|
||||
});
|
||||
|
||||
const themeAuto = document.getElementById("theme-auto");
|
||||
themeAuto.addEventListener("input", (e) => {
|
||||
saveTheme(themeAuto.auto);
|
||||
});
|
||||
|
||||
const themeDark = document.getElementById("theme-dark");
|
||||
themeDark.addEventListener("input", (e) => {
|
||||
saveTheme(themeDark.value);
|
||||
});
|
||||
|
||||
var currentThemeValue = localStorage.getItem(THEME);
|
||||
switch (currentThemeValue) {
|
||||
case "light":
|
||||
themeLight.checked = true;
|
||||
break;
|
||||
case "auto":
|
||||
themeAuto.checked = true;
|
||||
break;
|
||||
case "dark":
|
||||
themeDark.checked = true;
|
||||
break;
|
||||
default:
|
||||
themeAuto.checked = true;
|
||||
}</script>
|
||||
|
||||
</head>
|
||||
@@ -1643,9 +1792,30 @@ if (window.innerWidth > 650) {
|
||||
</a>
|
||||
</li>
|
||||
</ul>
|
||||
|
||||
<fieldset id="theme">
|
||||
<legend>color scheme</legend>
|
||||
|
||||
<input type="radio" id="theme-light" name="theme" value="light">
|
||||
<label class="theme-light" for="theme-light">
|
||||
<i class="fa-regular fa-sun" aria-hidden="true"></i>
|
||||
light
|
||||
</label>
|
||||
|
||||
<input type="radio" id="theme-auto" name="theme" value="auto">
|
||||
<label class="theme-auto" for="theme-auto">
|
||||
auto
|
||||
</label>
|
||||
|
||||
<input type="radio" id="theme-dark" name="theme" value="dark">
|
||||
<label class="theme-dark" for="theme-dark">
|
||||
dark
|
||||
<i class="fa-regular fa-moon" aria-hidden="true"></i>
|
||||
</label>
|
||||
</fieldset>
|
||||
</footer>
|
||||
|
||||
|
||||
<!-- This page `/art-shows-and-events/` was built on 2026-09-08T23:18:32.748Z -->
|
||||
<!-- This page `/art-shows-and-events/` was built on 2026-09-09T20:38:02.932Z -->
|
||||
</body>
|
||||
</html>
|
||||
|
||||
@@ -478,6 +478,13 @@ body:has(dialog[open]) {
|
||||
--color-grey: light-dark(var(--color-grey-dark), var(--color-grey-light));
|
||||
}
|
||||
|
||||
:root:has(#theme-light:checked) {
|
||||
color-scheme: light;
|
||||
}
|
||||
:root:has(#theme-dark:checked) {
|
||||
color-scheme: dark;
|
||||
}
|
||||
|
||||
/* Base */
|
||||
|
||||
* {
|
||||
@@ -621,7 +628,7 @@ ul, ol, dl, li {
|
||||
}
|
||||
|
||||
li {
|
||||
line-height: 1.2 5;
|
||||
line-height: 1.2;
|
||||
margin-top: .65rem;
|
||||
margin-bottom: .65rem;
|
||||
}
|
||||
@@ -960,6 +967,111 @@ footer a:focus-visible {
|
||||
outline-color: var(--color-pink);
|
||||
}
|
||||
|
||||
/* color picker */
|
||||
#theme {
|
||||
display: flex;
|
||||
justify-content: center;
|
||||
margin: .5rem auto 0;
|
||||
padding: 0 .75rem .5rem;
|
||||
width: fit-content;
|
||||
border: .125rem solid var(--color-teal);
|
||||
border-radius: 2rem;
|
||||
}
|
||||
|
||||
#theme legend {
|
||||
margin: 0 auto;
|
||||
color: var(--color-teal);
|
||||
}
|
||||
|
||||
footer label {
|
||||
cursor: pointer;
|
||||
border: .125rem solid var(--color-pink);
|
||||
padding: 0 .25rem;
|
||||
color: var(--color-pink);
|
||||
background-color: var(--color-bg); /* this stops the box shadows from showing through */
|
||||
box-shadow: .15em .15em var(--color-shadow);
|
||||
/* Click animation handling */
|
||||
position: relative;
|
||||
top: 0;
|
||||
left: 0;
|
||||
transition: top .05s ease-in, left .05s ease-in;
|
||||
}
|
||||
|
||||
footer input:checked + label {
|
||||
color: var(--color-blue);
|
||||
border-color: var(--color-blue);
|
||||
}
|
||||
|
||||
footer label i {
|
||||
color: var(--color-teal);
|
||||
}
|
||||
|
||||
footer input:checked + label i {
|
||||
color: var(--color-pink);
|
||||
}
|
||||
|
||||
@media (any-hover: hover) {
|
||||
footer label:hover,
|
||||
footer input:checked + label:hover,
|
||||
footer label:hover i,
|
||||
footer input:checked + label:hover i {
|
||||
color: var(--color-bg);
|
||||
}
|
||||
|
||||
footer label:hover {
|
||||
background-color: var(--color-pink);
|
||||
}
|
||||
|
||||
footer input:checked + label:hover {
|
||||
background-color: var(--color-teal);
|
||||
}
|
||||
}
|
||||
|
||||
footer input:focus-visible + label,
|
||||
footer input:focus-visible + label i {
|
||||
color: var(--color-bg);
|
||||
background-color: var(--color-pink);
|
||||
border-color: var(--color-pink);
|
||||
}
|
||||
|
||||
footer input:checked:focus-visible + label,
|
||||
footer input:checked:focus-visible + label i {
|
||||
color: var(--color-bg);
|
||||
background-color: var(--color-teal);
|
||||
border-color: var(--color-teal);
|
||||
}
|
||||
|
||||
footer label:active {
|
||||
top: .09em;
|
||||
left: .09em;
|
||||
box-shadow: .05em .05em var(--color-shadow);
|
||||
}
|
||||
|
||||
label.theme-light {
|
||||
border-top-left-radius: 1rem;
|
||||
border-bottom-left-radius: 1rem;
|
||||
border-right: none;
|
||||
padding-left: .35rem;
|
||||
}
|
||||
|
||||
label.theme-auto {
|
||||
}
|
||||
|
||||
label.theme-dark {
|
||||
border-top-right-radius: 1rem;
|
||||
border-bottom-right-radius: 1rem;
|
||||
border-left: none;
|
||||
padding-right: .35rem;
|
||||
}
|
||||
|
||||
footer input {
|
||||
/* To allow screen reader to still access these. */
|
||||
/* From https://lyra.horse/blog/2025/08/you-dont-need-js/ */
|
||||
opacity: 0;
|
||||
position: absolute;
|
||||
pointer-events: none;
|
||||
}
|
||||
|
||||
/* Pagination */
|
||||
.pagination,
|
||||
.pagination li {
|
||||
@@ -1222,6 +1334,8 @@ pre[class*=language-]::selection {
|
||||
}
|
||||
}</style>
|
||||
|
||||
|
||||
|
||||
<script type="module">// Thank you to https://github.com/daviddarnes/heading-anchors
|
||||
// Thank you to https://amberwilson.co.uk/blog/are-your-anchor-links-accessible/
|
||||
|
||||
@@ -1476,6 +1590,41 @@ if (window.innerWidth > 650) {
|
||||
dialog.close();
|
||||
}
|
||||
});
|
||||
}
|
||||
const THEME = "theme";
|
||||
|
||||
const saveTheme = (themeValue) => {
|
||||
localStorage.setItem(THEME, themeValue);
|
||||
};
|
||||
|
||||
const themeLight = document.getElementById("theme-light");
|
||||
themeLight.addEventListener("input", (e) => {
|
||||
saveTheme(themeLight.value);
|
||||
});
|
||||
|
||||
const themeAuto = document.getElementById("theme-auto");
|
||||
themeAuto.addEventListener("input", (e) => {
|
||||
saveTheme(themeAuto.auto);
|
||||
});
|
||||
|
||||
const themeDark = document.getElementById("theme-dark");
|
||||
themeDark.addEventListener("input", (e) => {
|
||||
saveTheme(themeDark.value);
|
||||
});
|
||||
|
||||
var currentThemeValue = localStorage.getItem(THEME);
|
||||
switch (currentThemeValue) {
|
||||
case "light":
|
||||
themeLight.checked = true;
|
||||
break;
|
||||
case "auto":
|
||||
themeAuto.checked = true;
|
||||
break;
|
||||
case "dark":
|
||||
themeDark.checked = true;
|
||||
break;
|
||||
default:
|
||||
themeAuto.checked = true;
|
||||
}</script>
|
||||
|
||||
</head>
|
||||
@@ -1617,22 +1766,8 @@ if (window.innerWidth > 650) {
|
||||
<ol id="postlist">
|
||||
|
||||
<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>
|
||||
|
||||
<li class="post">
|
||||
<a class="postlink" href="/happy-bihrtday/">
|
||||
<h2 data-ha-exclude="" id="happy-bihrtday">happy biHRTday </h2>
|
||||
<a class="postlink" href="/fat-raccoon/">
|
||||
<h2 data-ha-exclude="" id="fat-raccoon">fat raccoon </h2>
|
||||
|
||||
<ul class="postlist-tags">
|
||||
|
||||
@@ -1640,24 +1775,40 @@ if (window.innerWidth > 650) {
|
||||
|
||||
<li>card</li>
|
||||
|
||||
<li>gender</li>
|
||||
<li>shirt</li>
|
||||
|
||||
</ul>
|
||||
<img src="/img/happy-bihrtday-card-print.jpg" alt="A card and print in the same design - a bouncy, cheery font reading 'happy biHRTday'" loading="lazy" decoding="async" width="1000" height="750">
|
||||
<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">
|
||||
|
||||
</a>
|
||||
</li>
|
||||
|
||||
<li class="post">
|
||||
<a class="postlink" href="/fix-your-hearts/">
|
||||
<h2 data-ha-exclude="" id="fix-your-hearts">fix your hearts </h2>
|
||||
<a class="postlink" href="/tiny-mushrooms/">
|
||||
<h2 data-ha-exclude="" id="tiny-mushrooms">tiny mushrooms </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 'fix your hearts or die', with the text shaped into a somewhat long and narrow heart." 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's hat mycena in indigo." loading="lazy" decoding="async" width="1000" height="750">
|
||||
|
||||
</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>
|
||||
@@ -1690,9 +1841,30 @@ if (window.innerWidth > 650) {
|
||||
</a>
|
||||
</li>
|
||||
</ul>
|
||||
|
||||
<fieldset id="theme">
|
||||
<legend>color scheme</legend>
|
||||
|
||||
<input type="radio" id="theme-light" name="theme" value="light">
|
||||
<label class="theme-light" for="theme-light">
|
||||
<i class="fa-regular fa-sun" aria-hidden="true"></i>
|
||||
light
|
||||
</label>
|
||||
|
||||
<input type="radio" id="theme-auto" name="theme" value="auto">
|
||||
<label class="theme-auto" for="theme-auto">
|
||||
auto
|
||||
</label>
|
||||
|
||||
<input type="radio" id="theme-dark" name="theme" value="dark">
|
||||
<label class="theme-dark" for="theme-dark">
|
||||
dark
|
||||
<i class="fa-regular fa-moon" aria-hidden="true"></i>
|
||||
</label>
|
||||
</fieldset>
|
||||
</footer>
|
||||
|
||||
|
||||
<!-- This page `/artisans-cooperative-cards/` was built on 2026-09-08T23:18:32.739Z -->
|
||||
<!-- This page `/artisans-cooperative-cards/` was built on 2026-09-09T20:38:02.906Z -->
|
||||
</body>
|
||||
</html>
|
||||
|
||||
@@ -478,6 +478,13 @@ body:has(dialog[open]) {
|
||||
--color-grey: light-dark(var(--color-grey-dark), var(--color-grey-light));
|
||||
}
|
||||
|
||||
:root:has(#theme-light:checked) {
|
||||
color-scheme: light;
|
||||
}
|
||||
:root:has(#theme-dark:checked) {
|
||||
color-scheme: dark;
|
||||
}
|
||||
|
||||
/* Base */
|
||||
|
||||
* {
|
||||
@@ -621,7 +628,7 @@ ul, ol, dl, li {
|
||||
}
|
||||
|
||||
li {
|
||||
line-height: 1.2 5;
|
||||
line-height: 1.2;
|
||||
margin-top: .65rem;
|
||||
margin-bottom: .65rem;
|
||||
}
|
||||
@@ -960,6 +967,111 @@ footer a:focus-visible {
|
||||
outline-color: var(--color-pink);
|
||||
}
|
||||
|
||||
/* color picker */
|
||||
#theme {
|
||||
display: flex;
|
||||
justify-content: center;
|
||||
margin: .5rem auto 0;
|
||||
padding: 0 .75rem .5rem;
|
||||
width: fit-content;
|
||||
border: .125rem solid var(--color-teal);
|
||||
border-radius: 2rem;
|
||||
}
|
||||
|
||||
#theme legend {
|
||||
margin: 0 auto;
|
||||
color: var(--color-teal);
|
||||
}
|
||||
|
||||
footer label {
|
||||
cursor: pointer;
|
||||
border: .125rem solid var(--color-pink);
|
||||
padding: 0 .25rem;
|
||||
color: var(--color-pink);
|
||||
background-color: var(--color-bg); /* this stops the box shadows from showing through */
|
||||
box-shadow: .15em .15em var(--color-shadow);
|
||||
/* Click animation handling */
|
||||
position: relative;
|
||||
top: 0;
|
||||
left: 0;
|
||||
transition: top .05s ease-in, left .05s ease-in;
|
||||
}
|
||||
|
||||
footer input:checked + label {
|
||||
color: var(--color-blue);
|
||||
border-color: var(--color-blue);
|
||||
}
|
||||
|
||||
footer label i {
|
||||
color: var(--color-teal);
|
||||
}
|
||||
|
||||
footer input:checked + label i {
|
||||
color: var(--color-pink);
|
||||
}
|
||||
|
||||
@media (any-hover: hover) {
|
||||
footer label:hover,
|
||||
footer input:checked + label:hover,
|
||||
footer label:hover i,
|
||||
footer input:checked + label:hover i {
|
||||
color: var(--color-bg);
|
||||
}
|
||||
|
||||
footer label:hover {
|
||||
background-color: var(--color-pink);
|
||||
}
|
||||
|
||||
footer input:checked + label:hover {
|
||||
background-color: var(--color-teal);
|
||||
}
|
||||
}
|
||||
|
||||
footer input:focus-visible + label,
|
||||
footer input:focus-visible + label i {
|
||||
color: var(--color-bg);
|
||||
background-color: var(--color-pink);
|
||||
border-color: var(--color-pink);
|
||||
}
|
||||
|
||||
footer input:checked:focus-visible + label,
|
||||
footer input:checked:focus-visible + label i {
|
||||
color: var(--color-bg);
|
||||
background-color: var(--color-teal);
|
||||
border-color: var(--color-teal);
|
||||
}
|
||||
|
||||
footer label:active {
|
||||
top: .09em;
|
||||
left: .09em;
|
||||
box-shadow: .05em .05em var(--color-shadow);
|
||||
}
|
||||
|
||||
label.theme-light {
|
||||
border-top-left-radius: 1rem;
|
||||
border-bottom-left-radius: 1rem;
|
||||
border-right: none;
|
||||
padding-left: .35rem;
|
||||
}
|
||||
|
||||
label.theme-auto {
|
||||
}
|
||||
|
||||
label.theme-dark {
|
||||
border-top-right-radius: 1rem;
|
||||
border-bottom-right-radius: 1rem;
|
||||
border-left: none;
|
||||
padding-right: .35rem;
|
||||
}
|
||||
|
||||
footer input {
|
||||
/* To allow screen reader to still access these. */
|
||||
/* From https://lyra.horse/blog/2025/08/you-dont-need-js/ */
|
||||
opacity: 0;
|
||||
position: absolute;
|
||||
pointer-events: none;
|
||||
}
|
||||
|
||||
/* Pagination */
|
||||
.pagination,
|
||||
.pagination li {
|
||||
@@ -1222,6 +1334,8 @@ pre[class*=language-]::selection {
|
||||
}
|
||||
}</style>
|
||||
|
||||
|
||||
|
||||
<script type="module">// Thank you to https://github.com/daviddarnes/heading-anchors
|
||||
// Thank you to https://amberwilson.co.uk/blog/are-your-anchor-links-accessible/
|
||||
|
||||
@@ -1476,6 +1590,41 @@ if (window.innerWidth > 650) {
|
||||
dialog.close();
|
||||
}
|
||||
});
|
||||
}
|
||||
const THEME = "theme";
|
||||
|
||||
const saveTheme = (themeValue) => {
|
||||
localStorage.setItem(THEME, themeValue);
|
||||
};
|
||||
|
||||
const themeLight = document.getElementById("theme-light");
|
||||
themeLight.addEventListener("input", (e) => {
|
||||
saveTheme(themeLight.value);
|
||||
});
|
||||
|
||||
const themeAuto = document.getElementById("theme-auto");
|
||||
themeAuto.addEventListener("input", (e) => {
|
||||
saveTheme(themeAuto.auto);
|
||||
});
|
||||
|
||||
const themeDark = document.getElementById("theme-dark");
|
||||
themeDark.addEventListener("input", (e) => {
|
||||
saveTheme(themeDark.value);
|
||||
});
|
||||
|
||||
var currentThemeValue = localStorage.getItem(THEME);
|
||||
switch (currentThemeValue) {
|
||||
case "light":
|
||||
themeLight.checked = true;
|
||||
break;
|
||||
case "auto":
|
||||
themeAuto.checked = true;
|
||||
break;
|
||||
case "dark":
|
||||
themeDark.checked = true;
|
||||
break;
|
||||
default:
|
||||
themeAuto.checked = true;
|
||||
}</script>
|
||||
|
||||
</head>
|
||||
@@ -1617,6 +1766,24 @@ if (window.innerWidth > 650) {
|
||||
<h2 data-ha-exclude="" id="related-posts">related posts</h2>
|
||||
<ol id="postlist">
|
||||
|
||||
<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>
|
||||
|
||||
<ul class="postlist-tags">
|
||||
|
||||
<li>print</li>
|
||||
|
||||
<li>shirt</li>
|
||||
|
||||
<li>gender</li>
|
||||
|
||||
</ul>
|
||||
<img src="/img/slightly-weird-man-club-print.jpg" alt="A print that reads 'slightly weird man club' in a nonbinary flag colored gradient" loading="lazy" decoding="async" width="1000" height="750">
|
||||
|
||||
</a>
|
||||
</li>
|
||||
|
||||
<li class="post">
|
||||
<a class="postlink" href="/spotted-towhee/">
|
||||
<h2 data-ha-exclude="" id="spotted-towhee">spotted towhee </h2>
|
||||
@@ -1634,37 +1801,17 @@ if (window.innerWidth > 650) {
|
||||
</li>
|
||||
|
||||
<li class="post">
|
||||
<a class="postlink" href="/become-unbutterable/">
|
||||
<h2 data-ha-exclude="" id="become-unbutterable">become unbutterable </h2>
|
||||
<a class="postlink" href="/killdeer/">
|
||||
<h2 data-ha-exclude="" id="killdeer">killdeer </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, 'become unbutterable.'" loading="lazy" decoding="async" width="1000" height="562">
|
||||
|
||||
</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>
|
||||
<li>card</li>
|
||||
|
||||
</ul>
|
||||
<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">
|
||||
<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>
|
||||
@@ -1697,9 +1844,30 @@ if (window.innerWidth > 650) {
|
||||
</a>
|
||||
</li>
|
||||
</ul>
|
||||
|
||||
<fieldset id="theme">
|
||||
<legend>color scheme</legend>
|
||||
|
||||
<input type="radio" id="theme-light" name="theme" value="light">
|
||||
<label class="theme-light" for="theme-light">
|
||||
<i class="fa-regular fa-sun" aria-hidden="true"></i>
|
||||
light
|
||||
</label>
|
||||
|
||||
<input type="radio" id="theme-auto" name="theme" value="auto">
|
||||
<label class="theme-auto" for="theme-auto">
|
||||
auto
|
||||
</label>
|
||||
|
||||
<input type="radio" id="theme-dark" name="theme" value="dark">
|
||||
<label class="theme-dark" for="theme-dark">
|
||||
dark
|
||||
<i class="fa-regular fa-moon" aria-hidden="true"></i>
|
||||
</label>
|
||||
</fieldset>
|
||||
</footer>
|
||||
|
||||
|
||||
<!-- This page `/artisans-cooperative-shirts/` was built on 2026-09-08T23:18:32.740Z -->
|
||||
<!-- This page `/artisans-cooperative-shirts/` was built on 2026-09-09T20:38:02.908Z -->
|
||||
</body>
|
||||
</html>
|
||||
|
||||
+172
-2
@@ -478,6 +478,13 @@ body:has(dialog[open]) {
|
||||
--color-grey: light-dark(var(--color-grey-dark), var(--color-grey-light));
|
||||
}
|
||||
|
||||
:root:has(#theme-light:checked) {
|
||||
color-scheme: light;
|
||||
}
|
||||
:root:has(#theme-dark:checked) {
|
||||
color-scheme: dark;
|
||||
}
|
||||
|
||||
/* Base */
|
||||
|
||||
* {
|
||||
@@ -621,7 +628,7 @@ ul, ol, dl, li {
|
||||
}
|
||||
|
||||
li {
|
||||
line-height: 1.2 5;
|
||||
line-height: 1.2;
|
||||
margin-top: .65rem;
|
||||
margin-bottom: .65rem;
|
||||
}
|
||||
@@ -960,6 +967,111 @@ footer a:focus-visible {
|
||||
outline-color: var(--color-pink);
|
||||
}
|
||||
|
||||
/* color picker */
|
||||
#theme {
|
||||
display: flex;
|
||||
justify-content: center;
|
||||
margin: .5rem auto 0;
|
||||
padding: 0 .75rem .5rem;
|
||||
width: fit-content;
|
||||
border: .125rem solid var(--color-teal);
|
||||
border-radius: 2rem;
|
||||
}
|
||||
|
||||
#theme legend {
|
||||
margin: 0 auto;
|
||||
color: var(--color-teal);
|
||||
}
|
||||
|
||||
footer label {
|
||||
cursor: pointer;
|
||||
border: .125rem solid var(--color-pink);
|
||||
padding: 0 .25rem;
|
||||
color: var(--color-pink);
|
||||
background-color: var(--color-bg); /* this stops the box shadows from showing through */
|
||||
box-shadow: .15em .15em var(--color-shadow);
|
||||
/* Click animation handling */
|
||||
position: relative;
|
||||
top: 0;
|
||||
left: 0;
|
||||
transition: top .05s ease-in, left .05s ease-in;
|
||||
}
|
||||
|
||||
footer input:checked + label {
|
||||
color: var(--color-blue);
|
||||
border-color: var(--color-blue);
|
||||
}
|
||||
|
||||
footer label i {
|
||||
color: var(--color-teal);
|
||||
}
|
||||
|
||||
footer input:checked + label i {
|
||||
color: var(--color-pink);
|
||||
}
|
||||
|
||||
@media (any-hover: hover) {
|
||||
footer label:hover,
|
||||
footer input:checked + label:hover,
|
||||
footer label:hover i,
|
||||
footer input:checked + label:hover i {
|
||||
color: var(--color-bg);
|
||||
}
|
||||
|
||||
footer label:hover {
|
||||
background-color: var(--color-pink);
|
||||
}
|
||||
|
||||
footer input:checked + label:hover {
|
||||
background-color: var(--color-teal);
|
||||
}
|
||||
}
|
||||
|
||||
footer input:focus-visible + label,
|
||||
footer input:focus-visible + label i {
|
||||
color: var(--color-bg);
|
||||
background-color: var(--color-pink);
|
||||
border-color: var(--color-pink);
|
||||
}
|
||||
|
||||
footer input:checked:focus-visible + label,
|
||||
footer input:checked:focus-visible + label i {
|
||||
color: var(--color-bg);
|
||||
background-color: var(--color-teal);
|
||||
border-color: var(--color-teal);
|
||||
}
|
||||
|
||||
footer label:active {
|
||||
top: .09em;
|
||||
left: .09em;
|
||||
box-shadow: .05em .05em var(--color-shadow);
|
||||
}
|
||||
|
||||
label.theme-light {
|
||||
border-top-left-radius: 1rem;
|
||||
border-bottom-left-radius: 1rem;
|
||||
border-right: none;
|
||||
padding-left: .35rem;
|
||||
}
|
||||
|
||||
label.theme-auto {
|
||||
}
|
||||
|
||||
label.theme-dark {
|
||||
border-top-right-radius: 1rem;
|
||||
border-bottom-right-radius: 1rem;
|
||||
border-left: none;
|
||||
padding-right: .35rem;
|
||||
}
|
||||
|
||||
footer input {
|
||||
/* To allow screen reader to still access these. */
|
||||
/* From https://lyra.horse/blog/2025/08/you-dont-need-js/ */
|
||||
opacity: 0;
|
||||
position: absolute;
|
||||
pointer-events: none;
|
||||
}
|
||||
|
||||
/* Pagination */
|
||||
.pagination,
|
||||
.pagination li {
|
||||
@@ -1222,6 +1334,8 @@ pre[class*=language-]::selection {
|
||||
}
|
||||
}</style>
|
||||
|
||||
|
||||
|
||||
<script type="module">// Thank you to https://github.com/daviddarnes/heading-anchors
|
||||
// Thank you to https://amberwilson.co.uk/blog/are-your-anchor-links-accessible/
|
||||
|
||||
@@ -1476,6 +1590,41 @@ if (window.innerWidth > 650) {
|
||||
dialog.close();
|
||||
}
|
||||
});
|
||||
}
|
||||
const THEME = "theme";
|
||||
|
||||
const saveTheme = (themeValue) => {
|
||||
localStorage.setItem(THEME, themeValue);
|
||||
};
|
||||
|
||||
const themeLight = document.getElementById("theme-light");
|
||||
themeLight.addEventListener("input", (e) => {
|
||||
saveTheme(themeLight.value);
|
||||
});
|
||||
|
||||
const themeAuto = document.getElementById("theme-auto");
|
||||
themeAuto.addEventListener("input", (e) => {
|
||||
saveTheme(themeAuto.auto);
|
||||
});
|
||||
|
||||
const themeDark = document.getElementById("theme-dark");
|
||||
themeDark.addEventListener("input", (e) => {
|
||||
saveTheme(themeDark.value);
|
||||
});
|
||||
|
||||
var currentThemeValue = localStorage.getItem(THEME);
|
||||
switch (currentThemeValue) {
|
||||
case "light":
|
||||
themeLight.checked = true;
|
||||
break;
|
||||
case "auto":
|
||||
themeAuto.checked = true;
|
||||
break;
|
||||
case "dark":
|
||||
themeDark.checked = true;
|
||||
break;
|
||||
default:
|
||||
themeAuto.checked = true;
|
||||
}</script>
|
||||
|
||||
</head>
|
||||
@@ -1620,9 +1769,30 @@ if (window.innerWidth > 650) {
|
||||
</a>
|
||||
</li>
|
||||
</ul>
|
||||
|
||||
<fieldset id="theme">
|
||||
<legend>color scheme</legend>
|
||||
|
||||
<input type="radio" id="theme-light" name="theme" value="light">
|
||||
<label class="theme-light" for="theme-light">
|
||||
<i class="fa-regular fa-sun" aria-hidden="true"></i>
|
||||
light
|
||||
</label>
|
||||
|
||||
<input type="radio" id="theme-auto" name="theme" value="auto">
|
||||
<label class="theme-auto" for="theme-auto">
|
||||
auto
|
||||
</label>
|
||||
|
||||
<input type="radio" id="theme-dark" name="theme" value="dark">
|
||||
<label class="theme-dark" for="theme-dark">
|
||||
dark
|
||||
<i class="fa-regular fa-moon" aria-hidden="true"></i>
|
||||
</label>
|
||||
</fieldset>
|
||||
</footer>
|
||||
|
||||
|
||||
<!-- This page `/artists-conk/` was built on 2026-09-08T23:18:32.743Z -->
|
||||
<!-- This page `/artists-conk/` was built on 2026-09-09T20:38:02.913Z -->
|
||||
</body>
|
||||
</html>
|
||||
|
||||
@@ -478,6 +478,13 @@ body:has(dialog[open]) {
|
||||
--color-grey: light-dark(var(--color-grey-dark), var(--color-grey-light));
|
||||
}
|
||||
|
||||
:root:has(#theme-light:checked) {
|
||||
color-scheme: light;
|
||||
}
|
||||
:root:has(#theme-dark:checked) {
|
||||
color-scheme: dark;
|
||||
}
|
||||
|
||||
/* Base */
|
||||
|
||||
* {
|
||||
@@ -621,7 +628,7 @@ ul, ol, dl, li {
|
||||
}
|
||||
|
||||
li {
|
||||
line-height: 1.2 5;
|
||||
line-height: 1.2;
|
||||
margin-top: .65rem;
|
||||
margin-bottom: .65rem;
|
||||
}
|
||||
@@ -960,6 +967,111 @@ footer a:focus-visible {
|
||||
outline-color: var(--color-pink);
|
||||
}
|
||||
|
||||
/* color picker */
|
||||
#theme {
|
||||
display: flex;
|
||||
justify-content: center;
|
||||
margin: .5rem auto 0;
|
||||
padding: 0 .75rem .5rem;
|
||||
width: fit-content;
|
||||
border: .125rem solid var(--color-teal);
|
||||
border-radius: 2rem;
|
||||
}
|
||||
|
||||
#theme legend {
|
||||
margin: 0 auto;
|
||||
color: var(--color-teal);
|
||||
}
|
||||
|
||||
footer label {
|
||||
cursor: pointer;
|
||||
border: .125rem solid var(--color-pink);
|
||||
padding: 0 .25rem;
|
||||
color: var(--color-pink);
|
||||
background-color: var(--color-bg); /* this stops the box shadows from showing through */
|
||||
box-shadow: .15em .15em var(--color-shadow);
|
||||
/* Click animation handling */
|
||||
position: relative;
|
||||
top: 0;
|
||||
left: 0;
|
||||
transition: top .05s ease-in, left .05s ease-in;
|
||||
}
|
||||
|
||||
footer input:checked + label {
|
||||
color: var(--color-blue);
|
||||
border-color: var(--color-blue);
|
||||
}
|
||||
|
||||
footer label i {
|
||||
color: var(--color-teal);
|
||||
}
|
||||
|
||||
footer input:checked + label i {
|
||||
color: var(--color-pink);
|
||||
}
|
||||
|
||||
@media (any-hover: hover) {
|
||||
footer label:hover,
|
||||
footer input:checked + label:hover,
|
||||
footer label:hover i,
|
||||
footer input:checked + label:hover i {
|
||||
color: var(--color-bg);
|
||||
}
|
||||
|
||||
footer label:hover {
|
||||
background-color: var(--color-pink);
|
||||
}
|
||||
|
||||
footer input:checked + label:hover {
|
||||
background-color: var(--color-teal);
|
||||
}
|
||||
}
|
||||
|
||||
footer input:focus-visible + label,
|
||||
footer input:focus-visible + label i {
|
||||
color: var(--color-bg);
|
||||
background-color: var(--color-pink);
|
||||
border-color: var(--color-pink);
|
||||
}
|
||||
|
||||
footer input:checked:focus-visible + label,
|
||||
footer input:checked:focus-visible + label i {
|
||||
color: var(--color-bg);
|
||||
background-color: var(--color-teal);
|
||||
border-color: var(--color-teal);
|
||||
}
|
||||
|
||||
footer label:active {
|
||||
top: .09em;
|
||||
left: .09em;
|
||||
box-shadow: .05em .05em var(--color-shadow);
|
||||
}
|
||||
|
||||
label.theme-light {
|
||||
border-top-left-radius: 1rem;
|
||||
border-bottom-left-radius: 1rem;
|
||||
border-right: none;
|
||||
padding-left: .35rem;
|
||||
}
|
||||
|
||||
label.theme-auto {
|
||||
}
|
||||
|
||||
label.theme-dark {
|
||||
border-top-right-radius: 1rem;
|
||||
border-bottom-right-radius: 1rem;
|
||||
border-left: none;
|
||||
padding-right: .35rem;
|
||||
}
|
||||
|
||||
footer input {
|
||||
/* To allow screen reader to still access these. */
|
||||
/* From https://lyra.horse/blog/2025/08/you-dont-need-js/ */
|
||||
opacity: 0;
|
||||
position: absolute;
|
||||
pointer-events: none;
|
||||
}
|
||||
|
||||
/* Pagination */
|
||||
.pagination,
|
||||
.pagination li {
|
||||
@@ -1222,6 +1334,8 @@ pre[class*=language-]::selection {
|
||||
}
|
||||
}</style>
|
||||
|
||||
|
||||
|
||||
<script type="module">// Thank you to https://github.com/daviddarnes/heading-anchors
|
||||
// Thank you to https://amberwilson.co.uk/blog/are-your-anchor-links-accessible/
|
||||
|
||||
@@ -1476,6 +1590,41 @@ if (window.innerWidth > 650) {
|
||||
dialog.close();
|
||||
}
|
||||
});
|
||||
}
|
||||
const THEME = "theme";
|
||||
|
||||
const saveTheme = (themeValue) => {
|
||||
localStorage.setItem(THEME, themeValue);
|
||||
};
|
||||
|
||||
const themeLight = document.getElementById("theme-light");
|
||||
themeLight.addEventListener("input", (e) => {
|
||||
saveTheme(themeLight.value);
|
||||
});
|
||||
|
||||
const themeAuto = document.getElementById("theme-auto");
|
||||
themeAuto.addEventListener("input", (e) => {
|
||||
saveTheme(themeAuto.auto);
|
||||
});
|
||||
|
||||
const themeDark = document.getElementById("theme-dark");
|
||||
themeDark.addEventListener("input", (e) => {
|
||||
saveTheme(themeDark.value);
|
||||
});
|
||||
|
||||
var currentThemeValue = localStorage.getItem(THEME);
|
||||
switch (currentThemeValue) {
|
||||
case "light":
|
||||
themeLight.checked = true;
|
||||
break;
|
||||
case "auto":
|
||||
themeAuto.checked = true;
|
||||
break;
|
||||
case "dark":
|
||||
themeDark.checked = true;
|
||||
break;
|
||||
default:
|
||||
themeAuto.checked = true;
|
||||
}</script>
|
||||
|
||||
</head>
|
||||
@@ -1841,49 +1990,45 @@ if (window.innerWidth > 650) {
|
||||
<ol id="postlist">
|
||||
|
||||
<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="/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/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="/framer-accessibility/">
|
||||
<h2 data-ha-exclude="" id="framer-accessibility">framer accessibility </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'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/framer.png" alt="A screenshot of the Framer projects page showing part of the tile for a very rudimentary project titled Accessibility Test. It has a huge title that just reads Title, a basic form, and some pictures of my dog as notable features." loading="lazy" decoding="async" width="841" height="532">
|
||||
|
||||
</a>
|
||||
</li>
|
||||
|
||||
<li class="post">
|
||||
<a class="postlink" href="/brookes-notebook/">
|
||||
<h2 data-ha-exclude="" id="brookes-notebook">brooke's notebook </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>book</li>
|
||||
|
||||
<li>highlight</li>
|
||||
<li>software</li>
|
||||
|
||||
</ul>
|
||||
<img src="/img/brooke-notebook.jpg" alt="A six panel collage showing the covers, endpapers, and some of the pages of a notebook." loading="lazy" decoding="async" width="1000" height="1500">
|
||||
|
||||
</a>
|
||||
</li>
|
||||
|
||||
<li class="post">
|
||||
<a class="postlink" href="/greeting-loons/">
|
||||
<h2 data-ha-exclude="" id="greeting-loons">greeting loons </h2>
|
||||
|
||||
<ul class="postlist-tags">
|
||||
|
||||
<li>card</li>
|
||||
|
||||
<li>print</li>
|
||||
|
||||
<li>highlight</li>
|
||||
|
||||
</ul>
|
||||
<img src="/img/greeting-loons.jpg" alt="A pile of hand-printed A2 size greeting cards. A loon rearing up with outstretched wings spans the front and back of the cards." loading="lazy" decoding="async" width="1000" height="750">
|
||||
<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>
|
||||
@@ -1916,9 +2061,30 @@ if (window.innerWidth > 650) {
|
||||
</a>
|
||||
</li>
|
||||
</ul>
|
||||
|
||||
<fieldset id="theme">
|
||||
<legend>color scheme</legend>
|
||||
|
||||
<input type="radio" id="theme-light" name="theme" value="light">
|
||||
<label class="theme-light" for="theme-light">
|
||||
<i class="fa-regular fa-sun" aria-hidden="true"></i>
|
||||
light
|
||||
</label>
|
||||
|
||||
<input type="radio" id="theme-auto" name="theme" value="auto">
|
||||
<label class="theme-auto" for="theme-auto">
|
||||
auto
|
||||
</label>
|
||||
|
||||
<input type="radio" id="theme-dark" name="theme" value="dark">
|
||||
<label class="theme-dark" for="theme-dark">
|
||||
dark
|
||||
<i class="fa-regular fa-moon" aria-hidden="true"></i>
|
||||
</label>
|
||||
</fieldset>
|
||||
</footer>
|
||||
|
||||
|
||||
<!-- This page `/azure-locations-and-file-crawling/` was built on 2026-09-08T23:18:32.747Z -->
|
||||
<!-- This page `/azure-locations-and-file-crawling/` was built on 2026-09-09T20:38:02.932Z -->
|
||||
</body>
|
||||
</html>
|
||||
|
||||
@@ -478,6 +478,13 @@ body:has(dialog[open]) {
|
||||
--color-grey: light-dark(var(--color-grey-dark), var(--color-grey-light));
|
||||
}
|
||||
|
||||
:root:has(#theme-light:checked) {
|
||||
color-scheme: light;
|
||||
}
|
||||
:root:has(#theme-dark:checked) {
|
||||
color-scheme: dark;
|
||||
}
|
||||
|
||||
/* Base */
|
||||
|
||||
* {
|
||||
@@ -621,7 +628,7 @@ ul, ol, dl, li {
|
||||
}
|
||||
|
||||
li {
|
||||
line-height: 1.2 5;
|
||||
line-height: 1.2;
|
||||
margin-top: .65rem;
|
||||
margin-bottom: .65rem;
|
||||
}
|
||||
@@ -960,6 +967,111 @@ footer a:focus-visible {
|
||||
outline-color: var(--color-pink);
|
||||
}
|
||||
|
||||
/* color picker */
|
||||
#theme {
|
||||
display: flex;
|
||||
justify-content: center;
|
||||
margin: .5rem auto 0;
|
||||
padding: 0 .75rem .5rem;
|
||||
width: fit-content;
|
||||
border: .125rem solid var(--color-teal);
|
||||
border-radius: 2rem;
|
||||
}
|
||||
|
||||
#theme legend {
|
||||
margin: 0 auto;
|
||||
color: var(--color-teal);
|
||||
}
|
||||
|
||||
footer label {
|
||||
cursor: pointer;
|
||||
border: .125rem solid var(--color-pink);
|
||||
padding: 0 .25rem;
|
||||
color: var(--color-pink);
|
||||
background-color: var(--color-bg); /* this stops the box shadows from showing through */
|
||||
box-shadow: .15em .15em var(--color-shadow);
|
||||
/* Click animation handling */
|
||||
position: relative;
|
||||
top: 0;
|
||||
left: 0;
|
||||
transition: top .05s ease-in, left .05s ease-in;
|
||||
}
|
||||
|
||||
footer input:checked + label {
|
||||
color: var(--color-blue);
|
||||
border-color: var(--color-blue);
|
||||
}
|
||||
|
||||
footer label i {
|
||||
color: var(--color-teal);
|
||||
}
|
||||
|
||||
footer input:checked + label i {
|
||||
color: var(--color-pink);
|
||||
}
|
||||
|
||||
@media (any-hover: hover) {
|
||||
footer label:hover,
|
||||
footer input:checked + label:hover,
|
||||
footer label:hover i,
|
||||
footer input:checked + label:hover i {
|
||||
color: var(--color-bg);
|
||||
}
|
||||
|
||||
footer label:hover {
|
||||
background-color: var(--color-pink);
|
||||
}
|
||||
|
||||
footer input:checked + label:hover {
|
||||
background-color: var(--color-teal);
|
||||
}
|
||||
}
|
||||
|
||||
footer input:focus-visible + label,
|
||||
footer input:focus-visible + label i {
|
||||
color: var(--color-bg);
|
||||
background-color: var(--color-pink);
|
||||
border-color: var(--color-pink);
|
||||
}
|
||||
|
||||
footer input:checked:focus-visible + label,
|
||||
footer input:checked:focus-visible + label i {
|
||||
color: var(--color-bg);
|
||||
background-color: var(--color-teal);
|
||||
border-color: var(--color-teal);
|
||||
}
|
||||
|
||||
footer label:active {
|
||||
top: .09em;
|
||||
left: .09em;
|
||||
box-shadow: .05em .05em var(--color-shadow);
|
||||
}
|
||||
|
||||
label.theme-light {
|
||||
border-top-left-radius: 1rem;
|
||||
border-bottom-left-radius: 1rem;
|
||||
border-right: none;
|
||||
padding-left: .35rem;
|
||||
}
|
||||
|
||||
label.theme-auto {
|
||||
}
|
||||
|
||||
label.theme-dark {
|
||||
border-top-right-radius: 1rem;
|
||||
border-bottom-right-radius: 1rem;
|
||||
border-left: none;
|
||||
padding-right: .35rem;
|
||||
}
|
||||
|
||||
footer input {
|
||||
/* To allow screen reader to still access these. */
|
||||
/* From https://lyra.horse/blog/2025/08/you-dont-need-js/ */
|
||||
opacity: 0;
|
||||
position: absolute;
|
||||
pointer-events: none;
|
||||
}
|
||||
|
||||
/* Pagination */
|
||||
.pagination,
|
||||
.pagination li {
|
||||
@@ -1222,6 +1334,8 @@ pre[class*=language-]::selection {
|
||||
}
|
||||
}</style>
|
||||
|
||||
|
||||
|
||||
<script type="module">// Thank you to https://github.com/daviddarnes/heading-anchors
|
||||
// Thank you to https://amberwilson.co.uk/blog/are-your-anchor-links-accessible/
|
||||
|
||||
@@ -1476,6 +1590,41 @@ if (window.innerWidth > 650) {
|
||||
dialog.close();
|
||||
}
|
||||
});
|
||||
}
|
||||
const THEME = "theme";
|
||||
|
||||
const saveTheme = (themeValue) => {
|
||||
localStorage.setItem(THEME, themeValue);
|
||||
};
|
||||
|
||||
const themeLight = document.getElementById("theme-light");
|
||||
themeLight.addEventListener("input", (e) => {
|
||||
saveTheme(themeLight.value);
|
||||
});
|
||||
|
||||
const themeAuto = document.getElementById("theme-auto");
|
||||
themeAuto.addEventListener("input", (e) => {
|
||||
saveTheme(themeAuto.auto);
|
||||
});
|
||||
|
||||
const themeDark = document.getElementById("theme-dark");
|
||||
themeDark.addEventListener("input", (e) => {
|
||||
saveTheme(themeDark.value);
|
||||
});
|
||||
|
||||
var currentThemeValue = localStorage.getItem(THEME);
|
||||
switch (currentThemeValue) {
|
||||
case "light":
|
||||
themeLight.checked = true;
|
||||
break;
|
||||
case "auto":
|
||||
themeAuto.checked = true;
|
||||
break;
|
||||
case "dark":
|
||||
themeDark.checked = true;
|
||||
break;
|
||||
default:
|
||||
themeAuto.checked = true;
|
||||
}</script>
|
||||
|
||||
</head>
|
||||
@@ -1671,45 +1820,43 @@ if (window.innerWidth > 650) {
|
||||
<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="/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="/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="/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="/handedness-toggle/">
|
||||
<h2 data-ha-exclude="" id="handedness-toggle">handedness toggle </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/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>
|
||||
@@ -1742,9 +1889,30 @@ if (window.innerWidth > 650) {
|
||||
</a>
|
||||
</li>
|
||||
</ul>
|
||||
|
||||
<fieldset id="theme">
|
||||
<legend>color scheme</legend>
|
||||
|
||||
<input type="radio" id="theme-light" name="theme" value="light">
|
||||
<label class="theme-light" for="theme-light">
|
||||
<i class="fa-regular fa-sun" aria-hidden="true"></i>
|
||||
light
|
||||
</label>
|
||||
|
||||
<input type="radio" id="theme-auto" name="theme" value="auto">
|
||||
<label class="theme-auto" for="theme-auto">
|
||||
auto
|
||||
</label>
|
||||
|
||||
<input type="radio" id="theme-dark" name="theme" value="dark">
|
||||
<label class="theme-dark" for="theme-dark">
|
||||
dark
|
||||
<i class="fa-regular fa-moon" aria-hidden="true"></i>
|
||||
</label>
|
||||
</fieldset>
|
||||
</footer>
|
||||
|
||||
|
||||
<!-- This page `/backend-accessibility/` was built on 2026-09-08T23:18:32.735Z -->
|
||||
<!-- This page `/backend-accessibility/` was built on 2026-09-09T20:38:02.902Z -->
|
||||
</body>
|
||||
</html>
|
||||
|
||||
+181
-15
@@ -478,6 +478,13 @@ body:has(dialog[open]) {
|
||||
--color-grey: light-dark(var(--color-grey-dark), var(--color-grey-light));
|
||||
}
|
||||
|
||||
:root:has(#theme-light:checked) {
|
||||
color-scheme: light;
|
||||
}
|
||||
:root:has(#theme-dark:checked) {
|
||||
color-scheme: dark;
|
||||
}
|
||||
|
||||
/* Base */
|
||||
|
||||
* {
|
||||
@@ -621,7 +628,7 @@ ul, ol, dl, li {
|
||||
}
|
||||
|
||||
li {
|
||||
line-height: 1.2 5;
|
||||
line-height: 1.2;
|
||||
margin-top: .65rem;
|
||||
margin-bottom: .65rem;
|
||||
}
|
||||
@@ -960,6 +967,111 @@ footer a:focus-visible {
|
||||
outline-color: var(--color-pink);
|
||||
}
|
||||
|
||||
/* color picker */
|
||||
#theme {
|
||||
display: flex;
|
||||
justify-content: center;
|
||||
margin: .5rem auto 0;
|
||||
padding: 0 .75rem .5rem;
|
||||
width: fit-content;
|
||||
border: .125rem solid var(--color-teal);
|
||||
border-radius: 2rem;
|
||||
}
|
||||
|
||||
#theme legend {
|
||||
margin: 0 auto;
|
||||
color: var(--color-teal);
|
||||
}
|
||||
|
||||
footer label {
|
||||
cursor: pointer;
|
||||
border: .125rem solid var(--color-pink);
|
||||
padding: 0 .25rem;
|
||||
color: var(--color-pink);
|
||||
background-color: var(--color-bg); /* this stops the box shadows from showing through */
|
||||
box-shadow: .15em .15em var(--color-shadow);
|
||||
/* Click animation handling */
|
||||
position: relative;
|
||||
top: 0;
|
||||
left: 0;
|
||||
transition: top .05s ease-in, left .05s ease-in;
|
||||
}
|
||||
|
||||
footer input:checked + label {
|
||||
color: var(--color-blue);
|
||||
border-color: var(--color-blue);
|
||||
}
|
||||
|
||||
footer label i {
|
||||
color: var(--color-teal);
|
||||
}
|
||||
|
||||
footer input:checked + label i {
|
||||
color: var(--color-pink);
|
||||
}
|
||||
|
||||
@media (any-hover: hover) {
|
||||
footer label:hover,
|
||||
footer input:checked + label:hover,
|
||||
footer label:hover i,
|
||||
footer input:checked + label:hover i {
|
||||
color: var(--color-bg);
|
||||
}
|
||||
|
||||
footer label:hover {
|
||||
background-color: var(--color-pink);
|
||||
}
|
||||
|
||||
footer input:checked + label:hover {
|
||||
background-color: var(--color-teal);
|
||||
}
|
||||
}
|
||||
|
||||
footer input:focus-visible + label,
|
||||
footer input:focus-visible + label i {
|
||||
color: var(--color-bg);
|
||||
background-color: var(--color-pink);
|
||||
border-color: var(--color-pink);
|
||||
}
|
||||
|
||||
footer input:checked:focus-visible + label,
|
||||
footer input:checked:focus-visible + label i {
|
||||
color: var(--color-bg);
|
||||
background-color: var(--color-teal);
|
||||
border-color: var(--color-teal);
|
||||
}
|
||||
|
||||
footer label:active {
|
||||
top: .09em;
|
||||
left: .09em;
|
||||
box-shadow: .05em .05em var(--color-shadow);
|
||||
}
|
||||
|
||||
label.theme-light {
|
||||
border-top-left-radius: 1rem;
|
||||
border-bottom-left-radius: 1rem;
|
||||
border-right: none;
|
||||
padding-left: .35rem;
|
||||
}
|
||||
|
||||
label.theme-auto {
|
||||
}
|
||||
|
||||
label.theme-dark {
|
||||
border-top-right-radius: 1rem;
|
||||
border-bottom-right-radius: 1rem;
|
||||
border-left: none;
|
||||
padding-right: .35rem;
|
||||
}
|
||||
|
||||
footer input {
|
||||
/* To allow screen reader to still access these. */
|
||||
/* From https://lyra.horse/blog/2025/08/you-dont-need-js/ */
|
||||
opacity: 0;
|
||||
position: absolute;
|
||||
pointer-events: none;
|
||||
}
|
||||
|
||||
/* Pagination */
|
||||
.pagination,
|
||||
.pagination li {
|
||||
@@ -1222,6 +1334,8 @@ pre[class*=language-]::selection {
|
||||
}
|
||||
}</style>
|
||||
|
||||
|
||||
|
||||
<script type="module">// Thank you to https://github.com/daviddarnes/heading-anchors
|
||||
// Thank you to https://amberwilson.co.uk/blog/are-your-anchor-links-accessible/
|
||||
|
||||
@@ -1476,6 +1590,41 @@ if (window.innerWidth > 650) {
|
||||
dialog.close();
|
||||
}
|
||||
});
|
||||
}
|
||||
const THEME = "theme";
|
||||
|
||||
const saveTheme = (themeValue) => {
|
||||
localStorage.setItem(THEME, themeValue);
|
||||
};
|
||||
|
||||
const themeLight = document.getElementById("theme-light");
|
||||
themeLight.addEventListener("input", (e) => {
|
||||
saveTheme(themeLight.value);
|
||||
});
|
||||
|
||||
const themeAuto = document.getElementById("theme-auto");
|
||||
themeAuto.addEventListener("input", (e) => {
|
||||
saveTheme(themeAuto.auto);
|
||||
});
|
||||
|
||||
const themeDark = document.getElementById("theme-dark");
|
||||
themeDark.addEventListener("input", (e) => {
|
||||
saveTheme(themeDark.value);
|
||||
});
|
||||
|
||||
var currentThemeValue = localStorage.getItem(THEME);
|
||||
switch (currentThemeValue) {
|
||||
case "light":
|
||||
themeLight.checked = true;
|
||||
break;
|
||||
case "auto":
|
||||
themeAuto.checked = true;
|
||||
break;
|
||||
case "dark":
|
||||
themeDark.checked = true;
|
||||
break;
|
||||
default:
|
||||
themeAuto.checked = true;
|
||||
}</script>
|
||||
|
||||
</head>
|
||||
@@ -1610,47 +1759,43 @@ if (window.innerWidth > 650) {
|
||||
<ol id="postlist">
|
||||
|
||||
<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="/swoop-wallet/">
|
||||
<h2 data-ha-exclude="" id="swoop-wallet">swoop wallet </h2>
|
||||
|
||||
<ul class="postlist-tags">
|
||||
|
||||
<li>leather</li>
|
||||
|
||||
</ul>
|
||||
<img src="/img/oring-bracelet.jpg" alt="A green leather bracelet, stitched along the edges with dark blue thread, holds an ouroborous o-ring in place with two black snaps." loading="lazy" decoding="async" width="900" height="1200">
|
||||
<img src="/img/swoop-wallet.jpg" alt="A collage showing 3 pictures of a red and brown leather card wallet. The red pocket separator folds around to the back to become a fetching curlicue." loading="lazy" decoding="async" width="900" height="1200">
|
||||
|
||||
</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="/nine-pocket-bifold/">
|
||||
<h2 data-ha-exclude="" id="nine-pocket-bifold">nine pocket bifold </h2>
|
||||
|
||||
<ul class="postlist-tags">
|
||||
|
||||
<li>leather</li>
|
||||
|
||||
<li>gender</li>
|
||||
|
||||
<li>patch</li>
|
||||
|
||||
</ul>
|
||||
<img src="/img/pronoun-patch-scroll.jpg" alt="two tooled leather patches. they have scrolls tooled on them that read various pronoun sets." loading="lazy" decoding="async" width="1000" height="750">
|
||||
<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="/vertical-zipper-card-wallet/">
|
||||
<h2 data-ha-exclude="" id="vertical-zipper-card-wallet">vertical zipper card wallet </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/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/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>
|
||||
@@ -1683,9 +1828,30 @@ if (window.innerWidth > 650) {
|
||||
</a>
|
||||
</li>
|
||||
</ul>
|
||||
|
||||
<fieldset id="theme">
|
||||
<legend>color scheme</legend>
|
||||
|
||||
<input type="radio" id="theme-light" name="theme" value="light">
|
||||
<label class="theme-light" for="theme-light">
|
||||
<i class="fa-regular fa-sun" aria-hidden="true"></i>
|
||||
light
|
||||
</label>
|
||||
|
||||
<input type="radio" id="theme-auto" name="theme" value="auto">
|
||||
<label class="theme-auto" for="theme-auto">
|
||||
auto
|
||||
</label>
|
||||
|
||||
<input type="radio" id="theme-dark" name="theme" value="dark">
|
||||
<label class="theme-dark" for="theme-dark">
|
||||
dark
|
||||
<i class="fa-regular fa-moon" aria-hidden="true"></i>
|
||||
</label>
|
||||
</fieldset>
|
||||
</footer>
|
||||
|
||||
|
||||
<!-- This page `/bag-strap/` was built on 2026-09-08T23:18:32.744Z -->
|
||||
<!-- This page `/bag-strap/` was built on 2026-09-09T20:38:02.913Z -->
|
||||
</body>
|
||||
</html>
|
||||
|
||||
+200
-30
@@ -478,6 +478,13 @@ body:has(dialog[open]) {
|
||||
--color-grey: light-dark(var(--color-grey-dark), var(--color-grey-light));
|
||||
}
|
||||
|
||||
:root:has(#theme-light:checked) {
|
||||
color-scheme: light;
|
||||
}
|
||||
:root:has(#theme-dark:checked) {
|
||||
color-scheme: dark;
|
||||
}
|
||||
|
||||
/* Base */
|
||||
|
||||
* {
|
||||
@@ -621,7 +628,7 @@ ul, ol, dl, li {
|
||||
}
|
||||
|
||||
li {
|
||||
line-height: 1.2 5;
|
||||
line-height: 1.2;
|
||||
margin-top: .65rem;
|
||||
margin-bottom: .65rem;
|
||||
}
|
||||
@@ -960,6 +967,111 @@ footer a:focus-visible {
|
||||
outline-color: var(--color-pink);
|
||||
}
|
||||
|
||||
/* color picker */
|
||||
#theme {
|
||||
display: flex;
|
||||
justify-content: center;
|
||||
margin: .5rem auto 0;
|
||||
padding: 0 .75rem .5rem;
|
||||
width: fit-content;
|
||||
border: .125rem solid var(--color-teal);
|
||||
border-radius: 2rem;
|
||||
}
|
||||
|
||||
#theme legend {
|
||||
margin: 0 auto;
|
||||
color: var(--color-teal);
|
||||
}
|
||||
|
||||
footer label {
|
||||
cursor: pointer;
|
||||
border: .125rem solid var(--color-pink);
|
||||
padding: 0 .25rem;
|
||||
color: var(--color-pink);
|
||||
background-color: var(--color-bg); /* this stops the box shadows from showing through */
|
||||
box-shadow: .15em .15em var(--color-shadow);
|
||||
/* Click animation handling */
|
||||
position: relative;
|
||||
top: 0;
|
||||
left: 0;
|
||||
transition: top .05s ease-in, left .05s ease-in;
|
||||
}
|
||||
|
||||
footer input:checked + label {
|
||||
color: var(--color-blue);
|
||||
border-color: var(--color-blue);
|
||||
}
|
||||
|
||||
footer label i {
|
||||
color: var(--color-teal);
|
||||
}
|
||||
|
||||
footer input:checked + label i {
|
||||
color: var(--color-pink);
|
||||
}
|
||||
|
||||
@media (any-hover: hover) {
|
||||
footer label:hover,
|
||||
footer input:checked + label:hover,
|
||||
footer label:hover i,
|
||||
footer input:checked + label:hover i {
|
||||
color: var(--color-bg);
|
||||
}
|
||||
|
||||
footer label:hover {
|
||||
background-color: var(--color-pink);
|
||||
}
|
||||
|
||||
footer input:checked + label:hover {
|
||||
background-color: var(--color-teal);
|
||||
}
|
||||
}
|
||||
|
||||
footer input:focus-visible + label,
|
||||
footer input:focus-visible + label i {
|
||||
color: var(--color-bg);
|
||||
background-color: var(--color-pink);
|
||||
border-color: var(--color-pink);
|
||||
}
|
||||
|
||||
footer input:checked:focus-visible + label,
|
||||
footer input:checked:focus-visible + label i {
|
||||
color: var(--color-bg);
|
||||
background-color: var(--color-teal);
|
||||
border-color: var(--color-teal);
|
||||
}
|
||||
|
||||
footer label:active {
|
||||
top: .09em;
|
||||
left: .09em;
|
||||
box-shadow: .05em .05em var(--color-shadow);
|
||||
}
|
||||
|
||||
label.theme-light {
|
||||
border-top-left-radius: 1rem;
|
||||
border-bottom-left-radius: 1rem;
|
||||
border-right: none;
|
||||
padding-left: .35rem;
|
||||
}
|
||||
|
||||
label.theme-auto {
|
||||
}
|
||||
|
||||
label.theme-dark {
|
||||
border-top-right-radius: 1rem;
|
||||
border-bottom-right-radius: 1rem;
|
||||
border-left: none;
|
||||
padding-right: .35rem;
|
||||
}
|
||||
|
||||
footer input {
|
||||
/* To allow screen reader to still access these. */
|
||||
/* From https://lyra.horse/blog/2025/08/you-dont-need-js/ */
|
||||
opacity: 0;
|
||||
position: absolute;
|
||||
pointer-events: none;
|
||||
}
|
||||
|
||||
/* Pagination */
|
||||
.pagination,
|
||||
.pagination li {
|
||||
@@ -1222,6 +1334,8 @@ pre[class*=language-]::selection {
|
||||
}
|
||||
}</style>
|
||||
|
||||
|
||||
|
||||
<script type="module">// Thank you to https://github.com/daviddarnes/heading-anchors
|
||||
// Thank you to https://amberwilson.co.uk/blog/are-your-anchor-links-accessible/
|
||||
|
||||
@@ -1476,6 +1590,41 @@ if (window.innerWidth > 650) {
|
||||
dialog.close();
|
||||
}
|
||||
});
|
||||
}
|
||||
const THEME = "theme";
|
||||
|
||||
const saveTheme = (themeValue) => {
|
||||
localStorage.setItem(THEME, themeValue);
|
||||
};
|
||||
|
||||
const themeLight = document.getElementById("theme-light");
|
||||
themeLight.addEventListener("input", (e) => {
|
||||
saveTheme(themeLight.value);
|
||||
});
|
||||
|
||||
const themeAuto = document.getElementById("theme-auto");
|
||||
themeAuto.addEventListener("input", (e) => {
|
||||
saveTheme(themeAuto.auto);
|
||||
});
|
||||
|
||||
const themeDark = document.getElementById("theme-dark");
|
||||
themeDark.addEventListener("input", (e) => {
|
||||
saveTheme(themeDark.value);
|
||||
});
|
||||
|
||||
var currentThemeValue = localStorage.getItem(THEME);
|
||||
switch (currentThemeValue) {
|
||||
case "light":
|
||||
themeLight.checked = true;
|
||||
break;
|
||||
case "auto":
|
||||
themeAuto.checked = true;
|
||||
break;
|
||||
case "dark":
|
||||
themeDark.checked = true;
|
||||
break;
|
||||
default:
|
||||
themeAuto.checked = true;
|
||||
}</script>
|
||||
|
||||
</head>
|
||||
@@ -1619,34 +1768,6 @@ if (window.innerWidth > 650) {
|
||||
<h2 data-ha-exclude="" id="related-posts">related posts</h2>
|
||||
<ol id="postlist">
|
||||
|
||||
<li class="post">
|
||||
<a class="postlink" href="/tiny-books/">
|
||||
<h2 data-ha-exclude="" id="tiny-books">tiny books </h2>
|
||||
|
||||
<ul class="postlist-tags">
|
||||
|
||||
<li>book</li>
|
||||
|
||||
</ul>
|
||||
<img src="/img/tiny-book.jpg" alt="A three panel collage showing a book held in the palm of a hand." loading="lazy" decoding="async" width="1000" height="1000">
|
||||
|
||||
</a>
|
||||
</li>
|
||||
|
||||
<li class="post">
|
||||
<a class="postlink" href="/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="/black-and-red-journal/">
|
||||
<h2 data-ha-exclude="" id="black-and-red-journal">black and red journal </h2>
|
||||
@@ -1663,6 +1784,34 @@ if (window.innerWidth > 650) {
|
||||
</a>
|
||||
</li>
|
||||
|
||||
<li class="post">
|
||||
<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/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="/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/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>
|
||||
|
||||
</ol>
|
||||
|
||||
</section>
|
||||
@@ -1691,9 +1840,30 @@ if (window.innerWidth > 650) {
|
||||
</a>
|
||||
</li>
|
||||
</ul>
|
||||
|
||||
<fieldset id="theme">
|
||||
<legend>color scheme</legend>
|
||||
|
||||
<input type="radio" id="theme-light" name="theme" value="light">
|
||||
<label class="theme-light" for="theme-light">
|
||||
<i class="fa-regular fa-sun" aria-hidden="true"></i>
|
||||
light
|
||||
</label>
|
||||
|
||||
<input type="radio" id="theme-auto" name="theme" value="auto">
|
||||
<label class="theme-auto" for="theme-auto">
|
||||
auto
|
||||
</label>
|
||||
|
||||
<input type="radio" id="theme-dark" name="theme" value="dark">
|
||||
<label class="theme-dark" for="theme-dark">
|
||||
dark
|
||||
<i class="fa-regular fa-moon" aria-hidden="true"></i>
|
||||
</label>
|
||||
</fieldset>
|
||||
</footer>
|
||||
|
||||
|
||||
<!-- This page `/baseball-journal/` was built on 2026-09-08T23:18:32.737Z -->
|
||||
<!-- This page `/baseball-journal/` was built on 2026-09-09T20:38:02.904Z -->
|
||||
</body>
|
||||
</html>
|
||||
|
||||
+190
-24
@@ -478,6 +478,13 @@ body:has(dialog[open]) {
|
||||
--color-grey: light-dark(var(--color-grey-dark), var(--color-grey-light));
|
||||
}
|
||||
|
||||
:root:has(#theme-light:checked) {
|
||||
color-scheme: light;
|
||||
}
|
||||
:root:has(#theme-dark:checked) {
|
||||
color-scheme: dark;
|
||||
}
|
||||
|
||||
/* Base */
|
||||
|
||||
* {
|
||||
@@ -621,7 +628,7 @@ ul, ol, dl, li {
|
||||
}
|
||||
|
||||
li {
|
||||
line-height: 1.2 5;
|
||||
line-height: 1.2;
|
||||
margin-top: .65rem;
|
||||
margin-bottom: .65rem;
|
||||
}
|
||||
@@ -960,6 +967,111 @@ footer a:focus-visible {
|
||||
outline-color: var(--color-pink);
|
||||
}
|
||||
|
||||
/* color picker */
|
||||
#theme {
|
||||
display: flex;
|
||||
justify-content: center;
|
||||
margin: .5rem auto 0;
|
||||
padding: 0 .75rem .5rem;
|
||||
width: fit-content;
|
||||
border: .125rem solid var(--color-teal);
|
||||
border-radius: 2rem;
|
||||
}
|
||||
|
||||
#theme legend {
|
||||
margin: 0 auto;
|
||||
color: var(--color-teal);
|
||||
}
|
||||
|
||||
footer label {
|
||||
cursor: pointer;
|
||||
border: .125rem solid var(--color-pink);
|
||||
padding: 0 .25rem;
|
||||
color: var(--color-pink);
|
||||
background-color: var(--color-bg); /* this stops the box shadows from showing through */
|
||||
box-shadow: .15em .15em var(--color-shadow);
|
||||
/* Click animation handling */
|
||||
position: relative;
|
||||
top: 0;
|
||||
left: 0;
|
||||
transition: top .05s ease-in, left .05s ease-in;
|
||||
}
|
||||
|
||||
footer input:checked + label {
|
||||
color: var(--color-blue);
|
||||
border-color: var(--color-blue);
|
||||
}
|
||||
|
||||
footer label i {
|
||||
color: var(--color-teal);
|
||||
}
|
||||
|
||||
footer input:checked + label i {
|
||||
color: var(--color-pink);
|
||||
}
|
||||
|
||||
@media (any-hover: hover) {
|
||||
footer label:hover,
|
||||
footer input:checked + label:hover,
|
||||
footer label:hover i,
|
||||
footer input:checked + label:hover i {
|
||||
color: var(--color-bg);
|
||||
}
|
||||
|
||||
footer label:hover {
|
||||
background-color: var(--color-pink);
|
||||
}
|
||||
|
||||
footer input:checked + label:hover {
|
||||
background-color: var(--color-teal);
|
||||
}
|
||||
}
|
||||
|
||||
footer input:focus-visible + label,
|
||||
footer input:focus-visible + label i {
|
||||
color: var(--color-bg);
|
||||
background-color: var(--color-pink);
|
||||
border-color: var(--color-pink);
|
||||
}
|
||||
|
||||
footer input:checked:focus-visible + label,
|
||||
footer input:checked:focus-visible + label i {
|
||||
color: var(--color-bg);
|
||||
background-color: var(--color-teal);
|
||||
border-color: var(--color-teal);
|
||||
}
|
||||
|
||||
footer label:active {
|
||||
top: .09em;
|
||||
left: .09em;
|
||||
box-shadow: .05em .05em var(--color-shadow);
|
||||
}
|
||||
|
||||
label.theme-light {
|
||||
border-top-left-radius: 1rem;
|
||||
border-bottom-left-radius: 1rem;
|
||||
border-right: none;
|
||||
padding-left: .35rem;
|
||||
}
|
||||
|
||||
label.theme-auto {
|
||||
}
|
||||
|
||||
label.theme-dark {
|
||||
border-top-right-radius: 1rem;
|
||||
border-bottom-right-radius: 1rem;
|
||||
border-left: none;
|
||||
padding-right: .35rem;
|
||||
}
|
||||
|
||||
footer input {
|
||||
/* To allow screen reader to still access these. */
|
||||
/* From https://lyra.horse/blog/2025/08/you-dont-need-js/ */
|
||||
opacity: 0;
|
||||
position: absolute;
|
||||
pointer-events: none;
|
||||
}
|
||||
|
||||
/* Pagination */
|
||||
.pagination,
|
||||
.pagination li {
|
||||
@@ -1222,6 +1334,8 @@ pre[class*=language-]::selection {
|
||||
}
|
||||
}</style>
|
||||
|
||||
|
||||
|
||||
<script type="module">// Thank you to https://github.com/daviddarnes/heading-anchors
|
||||
// Thank you to https://amberwilson.co.uk/blog/are-your-anchor-links-accessible/
|
||||
|
||||
@@ -1476,6 +1590,41 @@ if (window.innerWidth > 650) {
|
||||
dialog.close();
|
||||
}
|
||||
});
|
||||
}
|
||||
const THEME = "theme";
|
||||
|
||||
const saveTheme = (themeValue) => {
|
||||
localStorage.setItem(THEME, themeValue);
|
||||
};
|
||||
|
||||
const themeLight = document.getElementById("theme-light");
|
||||
themeLight.addEventListener("input", (e) => {
|
||||
saveTheme(themeLight.value);
|
||||
});
|
||||
|
||||
const themeAuto = document.getElementById("theme-auto");
|
||||
themeAuto.addEventListener("input", (e) => {
|
||||
saveTheme(themeAuto.auto);
|
||||
});
|
||||
|
||||
const themeDark = document.getElementById("theme-dark");
|
||||
themeDark.addEventListener("input", (e) => {
|
||||
saveTheme(themeDark.value);
|
||||
});
|
||||
|
||||
var currentThemeValue = localStorage.getItem(THEME);
|
||||
switch (currentThemeValue) {
|
||||
case "light":
|
||||
themeLight.checked = true;
|
||||
break;
|
||||
case "auto":
|
||||
themeAuto.checked = true;
|
||||
break;
|
||||
case "dark":
|
||||
themeDark.checked = true;
|
||||
break;
|
||||
default:
|
||||
themeAuto.checked = true;
|
||||
}</script>
|
||||
|
||||
</head>
|
||||
@@ -1617,42 +1766,38 @@ if (window.innerWidth > 650) {
|
||||
<ol id="postlist">
|
||||
|
||||
<li class="post">
|
||||
<a class="postlink" href="/fat-raccoon/">
|
||||
<h2 data-ha-exclude="" id="fat-raccoon">fat raccoon </h2>
|
||||
<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="/greeting-quorbs/">
|
||||
<h2 data-ha-exclude="" id="greeting-quorbs">greeting quorbs </h2>
|
||||
|
||||
<ul class="postlist-tags">
|
||||
|
||||
<li>card</li>
|
||||
|
||||
<li>shirt</li>
|
||||
|
||||
</ul>
|
||||
<img src="/img/fat-raccoon-print.jpg" alt="A block print in black ink of a rotund raccoon raising a welcoming paw towards the viewer." loading="lazy" decoding="async" width="1000" height="1333">
|
||||
|
||||
</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">
|
||||
<img src="/img/greeting-quorbs.jpg" alt="A pile of hand-printed A2 size greeting cards. Only the front is visible, showing a particularly round quail." loading="lazy" decoding="async" width="1000" height="1000">
|
||||
|
||||
</a>
|
||||
</li>
|
||||
|
||||
<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="/iris/">
|
||||
<h2 data-ha-exclude="" id="iris">iris </h2>
|
||||
|
||||
<ul class="postlist-tags">
|
||||
|
||||
@@ -1661,7 +1806,7 @@ if (window.innerWidth > 650) {
|
||||
<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/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>
|
||||
@@ -1694,9 +1839,30 @@ if (window.innerWidth > 650) {
|
||||
</a>
|
||||
</li>
|
||||
</ul>
|
||||
|
||||
<fieldset id="theme">
|
||||
<legend>color scheme</legend>
|
||||
|
||||
<input type="radio" id="theme-light" name="theme" value="light">
|
||||
<label class="theme-light" for="theme-light">
|
||||
<i class="fa-regular fa-sun" aria-hidden="true"></i>
|
||||
light
|
||||
</label>
|
||||
|
||||
<input type="radio" id="theme-auto" name="theme" value="auto">
|
||||
<label class="theme-auto" for="theme-auto">
|
||||
auto
|
||||
</label>
|
||||
|
||||
<input type="radio" id="theme-dark" name="theme" value="dark">
|
||||
<label class="theme-dark" for="theme-dark">
|
||||
dark
|
||||
<i class="fa-regular fa-moon" aria-hidden="true"></i>
|
||||
</label>
|
||||
</fieldset>
|
||||
</footer>
|
||||
|
||||
|
||||
<!-- This page `/become-unbutterable/` was built on 2026-09-08T23:18:32.729Z -->
|
||||
<!-- This page `/become-unbutterable/` was built on 2026-09-09T20:38:02.890Z -->
|
||||
</body>
|
||||
</html>
|
||||
|
||||
+183
-11
@@ -478,6 +478,13 @@ body:has(dialog[open]) {
|
||||
--color-grey: light-dark(var(--color-grey-dark), var(--color-grey-light));
|
||||
}
|
||||
|
||||
:root:has(#theme-light:checked) {
|
||||
color-scheme: light;
|
||||
}
|
||||
:root:has(#theme-dark:checked) {
|
||||
color-scheme: dark;
|
||||
}
|
||||
|
||||
/* Base */
|
||||
|
||||
* {
|
||||
@@ -621,7 +628,7 @@ ul, ol, dl, li {
|
||||
}
|
||||
|
||||
li {
|
||||
line-height: 1.2 5;
|
||||
line-height: 1.2;
|
||||
margin-top: .65rem;
|
||||
margin-bottom: .65rem;
|
||||
}
|
||||
@@ -960,6 +967,111 @@ footer a:focus-visible {
|
||||
outline-color: var(--color-pink);
|
||||
}
|
||||
|
||||
/* color picker */
|
||||
#theme {
|
||||
display: flex;
|
||||
justify-content: center;
|
||||
margin: .5rem auto 0;
|
||||
padding: 0 .75rem .5rem;
|
||||
width: fit-content;
|
||||
border: .125rem solid var(--color-teal);
|
||||
border-radius: 2rem;
|
||||
}
|
||||
|
||||
#theme legend {
|
||||
margin: 0 auto;
|
||||
color: var(--color-teal);
|
||||
}
|
||||
|
||||
footer label {
|
||||
cursor: pointer;
|
||||
border: .125rem solid var(--color-pink);
|
||||
padding: 0 .25rem;
|
||||
color: var(--color-pink);
|
||||
background-color: var(--color-bg); /* this stops the box shadows from showing through */
|
||||
box-shadow: .15em .15em var(--color-shadow);
|
||||
/* Click animation handling */
|
||||
position: relative;
|
||||
top: 0;
|
||||
left: 0;
|
||||
transition: top .05s ease-in, left .05s ease-in;
|
||||
}
|
||||
|
||||
footer input:checked + label {
|
||||
color: var(--color-blue);
|
||||
border-color: var(--color-blue);
|
||||
}
|
||||
|
||||
footer label i {
|
||||
color: var(--color-teal);
|
||||
}
|
||||
|
||||
footer input:checked + label i {
|
||||
color: var(--color-pink);
|
||||
}
|
||||
|
||||
@media (any-hover: hover) {
|
||||
footer label:hover,
|
||||
footer input:checked + label:hover,
|
||||
footer label:hover i,
|
||||
footer input:checked + label:hover i {
|
||||
color: var(--color-bg);
|
||||
}
|
||||
|
||||
footer label:hover {
|
||||
background-color: var(--color-pink);
|
||||
}
|
||||
|
||||
footer input:checked + label:hover {
|
||||
background-color: var(--color-teal);
|
||||
}
|
||||
}
|
||||
|
||||
footer input:focus-visible + label,
|
||||
footer input:focus-visible + label i {
|
||||
color: var(--color-bg);
|
||||
background-color: var(--color-pink);
|
||||
border-color: var(--color-pink);
|
||||
}
|
||||
|
||||
footer input:checked:focus-visible + label,
|
||||
footer input:checked:focus-visible + label i {
|
||||
color: var(--color-bg);
|
||||
background-color: var(--color-teal);
|
||||
border-color: var(--color-teal);
|
||||
}
|
||||
|
||||
footer label:active {
|
||||
top: .09em;
|
||||
left: .09em;
|
||||
box-shadow: .05em .05em var(--color-shadow);
|
||||
}
|
||||
|
||||
label.theme-light {
|
||||
border-top-left-radius: 1rem;
|
||||
border-bottom-left-radius: 1rem;
|
||||
border-right: none;
|
||||
padding-left: .35rem;
|
||||
}
|
||||
|
||||
label.theme-auto {
|
||||
}
|
||||
|
||||
label.theme-dark {
|
||||
border-top-right-radius: 1rem;
|
||||
border-bottom-right-radius: 1rem;
|
||||
border-left: none;
|
||||
padding-right: .35rem;
|
||||
}
|
||||
|
||||
footer input {
|
||||
/* To allow screen reader to still access these. */
|
||||
/* From https://lyra.horse/blog/2025/08/you-dont-need-js/ */
|
||||
opacity: 0;
|
||||
position: absolute;
|
||||
pointer-events: none;
|
||||
}
|
||||
|
||||
/* Pagination */
|
||||
.pagination,
|
||||
.pagination li {
|
||||
@@ -1222,6 +1334,8 @@ pre[class*=language-]::selection {
|
||||
}
|
||||
}</style>
|
||||
|
||||
|
||||
|
||||
<script type="module">// Thank you to https://github.com/daviddarnes/heading-anchors
|
||||
// Thank you to https://amberwilson.co.uk/blog/are-your-anchor-links-accessible/
|
||||
|
||||
@@ -1476,6 +1590,41 @@ if (window.innerWidth > 650) {
|
||||
dialog.close();
|
||||
}
|
||||
});
|
||||
}
|
||||
const THEME = "theme";
|
||||
|
||||
const saveTheme = (themeValue) => {
|
||||
localStorage.setItem(THEME, themeValue);
|
||||
};
|
||||
|
||||
const themeLight = document.getElementById("theme-light");
|
||||
themeLight.addEventListener("input", (e) => {
|
||||
saveTheme(themeLight.value);
|
||||
});
|
||||
|
||||
const themeAuto = document.getElementById("theme-auto");
|
||||
themeAuto.addEventListener("input", (e) => {
|
||||
saveTheme(themeAuto.auto);
|
||||
});
|
||||
|
||||
const themeDark = document.getElementById("theme-dark");
|
||||
themeDark.addEventListener("input", (e) => {
|
||||
saveTheme(themeDark.value);
|
||||
});
|
||||
|
||||
var currentThemeValue = localStorage.getItem(THEME);
|
||||
switch (currentThemeValue) {
|
||||
case "light":
|
||||
themeLight.checked = true;
|
||||
break;
|
||||
case "auto":
|
||||
themeAuto.checked = true;
|
||||
break;
|
||||
case "dark":
|
||||
themeDark.checked = true;
|
||||
break;
|
||||
default:
|
||||
themeAuto.checked = true;
|
||||
}</script>
|
||||
|
||||
</head>
|
||||
@@ -1610,43 +1759,45 @@ if (window.innerWidth > 650) {
|
||||
<ol id="postlist">
|
||||
|
||||
<li class="post">
|
||||
<a class="postlink" href="/dyeing-fiber/">
|
||||
<h2 data-ha-exclude="" id="dyeing-fiber">dyeing fiber </h2>
|
||||
<a class="postlink" href="/spinners-dream-handspun/">
|
||||
<h2 data-ha-exclude="" id="spinners-dream-handspun">spinner's dream handspun </h2>
|
||||
|
||||
<ul class="postlist-tags">
|
||||
|
||||
<li>yarn</li>
|
||||
|
||||
</ul>
|
||||
<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">
|
||||
<img src="/img/spinners-dream-handspun.jpg" alt="a skein of a lightly variegated grey yarn in about a sport or DK weight." loading="lazy" decoding="async" width="1000" height="666">
|
||||
|
||||
</a>
|
||||
</li>
|
||||
|
||||
<li class="post">
|
||||
<a class="postlink" href="/petrichor-handspun/">
|
||||
<h2 data-ha-exclude="" id="petrichor-handspun">petrichor 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/petrichor-handspun.jpg" alt="3 skeins of handspun yarn, 2 large and 1 small. the large ones are a rich earth-tone blend of reds, pinks, browns, and hints of green and gold. the smaller skein is similar but with a decidedly greener hue" loading="lazy" decoding="async" width="1000" height="750">
|
||||
<img src="/img/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 & ice handspun </h2>
|
||||
<a class="postlink" href="/rambouillet-handspun/">
|
||||
<h2 data-ha-exclude="" id="rambouillet-handspun">rambouillet handspun </h2>
|
||||
|
||||
<ul class="postlist-tags">
|
||||
|
||||
<li>yarn</li>
|
||||
|
||||
<li>highlight</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/rambouillet-handspun.jpg" alt="1 large and 2 small skeins of handspun yarn in a sport or DK weight that has been dyed in light and dark teal, green, and rusty green-gold." loading="lazy" decoding="async" width="1000" height="666">
|
||||
|
||||
</a>
|
||||
</li>
|
||||
@@ -1679,9 +1830,30 @@ if (window.innerWidth > 650) {
|
||||
</a>
|
||||
</li>
|
||||
</ul>
|
||||
|
||||
<fieldset id="theme">
|
||||
<legend>color scheme</legend>
|
||||
|
||||
<input type="radio" id="theme-light" name="theme" value="light">
|
||||
<label class="theme-light" for="theme-light">
|
||||
<i class="fa-regular fa-sun" aria-hidden="true"></i>
|
||||
light
|
||||
</label>
|
||||
|
||||
<input type="radio" id="theme-auto" name="theme" value="auto">
|
||||
<label class="theme-auto" for="theme-auto">
|
||||
auto
|
||||
</label>
|
||||
|
||||
<input type="radio" id="theme-dark" name="theme" value="dark">
|
||||
<label class="theme-dark" for="theme-dark">
|
||||
dark
|
||||
<i class="fa-regular fa-moon" aria-hidden="true"></i>
|
||||
</label>
|
||||
</fieldset>
|
||||
</footer>
|
||||
|
||||
|
||||
<!-- This page `/bfl-silk-handspun/` was built on 2026-09-08T23:18:32.756Z -->
|
||||
<!-- This page `/bfl-silk-handspun/` was built on 2026-09-09T20:38:02.937Z -->
|
||||
</body>
|
||||
</html>
|
||||
|
||||
+196
-22
@@ -478,6 +478,13 @@ body:has(dialog[open]) {
|
||||
--color-grey: light-dark(var(--color-grey-dark), var(--color-grey-light));
|
||||
}
|
||||
|
||||
:root:has(#theme-light:checked) {
|
||||
color-scheme: light;
|
||||
}
|
||||
:root:has(#theme-dark:checked) {
|
||||
color-scheme: dark;
|
||||
}
|
||||
|
||||
/* Base */
|
||||
|
||||
* {
|
||||
@@ -621,7 +628,7 @@ ul, ol, dl, li {
|
||||
}
|
||||
|
||||
li {
|
||||
line-height: 1.2 5;
|
||||
line-height: 1.2;
|
||||
margin-top: .65rem;
|
||||
margin-bottom: .65rem;
|
||||
}
|
||||
@@ -960,6 +967,111 @@ footer a:focus-visible {
|
||||
outline-color: var(--color-pink);
|
||||
}
|
||||
|
||||
/* color picker */
|
||||
#theme {
|
||||
display: flex;
|
||||
justify-content: center;
|
||||
margin: .5rem auto 0;
|
||||
padding: 0 .75rem .5rem;
|
||||
width: fit-content;
|
||||
border: .125rem solid var(--color-teal);
|
||||
border-radius: 2rem;
|
||||
}
|
||||
|
||||
#theme legend {
|
||||
margin: 0 auto;
|
||||
color: var(--color-teal);
|
||||
}
|
||||
|
||||
footer label {
|
||||
cursor: pointer;
|
||||
border: .125rem solid var(--color-pink);
|
||||
padding: 0 .25rem;
|
||||
color: var(--color-pink);
|
||||
background-color: var(--color-bg); /* this stops the box shadows from showing through */
|
||||
box-shadow: .15em .15em var(--color-shadow);
|
||||
/* Click animation handling */
|
||||
position: relative;
|
||||
top: 0;
|
||||
left: 0;
|
||||
transition: top .05s ease-in, left .05s ease-in;
|
||||
}
|
||||
|
||||
footer input:checked + label {
|
||||
color: var(--color-blue);
|
||||
border-color: var(--color-blue);
|
||||
}
|
||||
|
||||
footer label i {
|
||||
color: var(--color-teal);
|
||||
}
|
||||
|
||||
footer input:checked + label i {
|
||||
color: var(--color-pink);
|
||||
}
|
||||
|
||||
@media (any-hover: hover) {
|
||||
footer label:hover,
|
||||
footer input:checked + label:hover,
|
||||
footer label:hover i,
|
||||
footer input:checked + label:hover i {
|
||||
color: var(--color-bg);
|
||||
}
|
||||
|
||||
footer label:hover {
|
||||
background-color: var(--color-pink);
|
||||
}
|
||||
|
||||
footer input:checked + label:hover {
|
||||
background-color: var(--color-teal);
|
||||
}
|
||||
}
|
||||
|
||||
footer input:focus-visible + label,
|
||||
footer input:focus-visible + label i {
|
||||
color: var(--color-bg);
|
||||
background-color: var(--color-pink);
|
||||
border-color: var(--color-pink);
|
||||
}
|
||||
|
||||
footer input:checked:focus-visible + label,
|
||||
footer input:checked:focus-visible + label i {
|
||||
color: var(--color-bg);
|
||||
background-color: var(--color-teal);
|
||||
border-color: var(--color-teal);
|
||||
}
|
||||
|
||||
footer label:active {
|
||||
top: .09em;
|
||||
left: .09em;
|
||||
box-shadow: .05em .05em var(--color-shadow);
|
||||
}
|
||||
|
||||
label.theme-light {
|
||||
border-top-left-radius: 1rem;
|
||||
border-bottom-left-radius: 1rem;
|
||||
border-right: none;
|
||||
padding-left: .35rem;
|
||||
}
|
||||
|
||||
label.theme-auto {
|
||||
}
|
||||
|
||||
label.theme-dark {
|
||||
border-top-right-radius: 1rem;
|
||||
border-bottom-right-radius: 1rem;
|
||||
border-left: none;
|
||||
padding-right: .35rem;
|
||||
}
|
||||
|
||||
footer input {
|
||||
/* To allow screen reader to still access these. */
|
||||
/* From https://lyra.horse/blog/2025/08/you-dont-need-js/ */
|
||||
opacity: 0;
|
||||
position: absolute;
|
||||
pointer-events: none;
|
||||
}
|
||||
|
||||
/* Pagination */
|
||||
.pagination,
|
||||
.pagination li {
|
||||
@@ -1222,6 +1334,8 @@ pre[class*=language-]::selection {
|
||||
}
|
||||
}</style>
|
||||
|
||||
|
||||
|
||||
<script type="module">// Thank you to https://github.com/daviddarnes/heading-anchors
|
||||
// Thank you to https://amberwilson.co.uk/blog/are-your-anchor-links-accessible/
|
||||
|
||||
@@ -1476,6 +1590,41 @@ if (window.innerWidth > 650) {
|
||||
dialog.close();
|
||||
}
|
||||
});
|
||||
}
|
||||
const THEME = "theme";
|
||||
|
||||
const saveTheme = (themeValue) => {
|
||||
localStorage.setItem(THEME, themeValue);
|
||||
};
|
||||
|
||||
const themeLight = document.getElementById("theme-light");
|
||||
themeLight.addEventListener("input", (e) => {
|
||||
saveTheme(themeLight.value);
|
||||
});
|
||||
|
||||
const themeAuto = document.getElementById("theme-auto");
|
||||
themeAuto.addEventListener("input", (e) => {
|
||||
saveTheme(themeAuto.auto);
|
||||
});
|
||||
|
||||
const themeDark = document.getElementById("theme-dark");
|
||||
themeDark.addEventListener("input", (e) => {
|
||||
saveTheme(themeDark.value);
|
||||
});
|
||||
|
||||
var currentThemeValue = localStorage.getItem(THEME);
|
||||
switch (currentThemeValue) {
|
||||
case "light":
|
||||
themeLight.checked = true;
|
||||
break;
|
||||
case "auto":
|
||||
themeAuto.checked = true;
|
||||
break;
|
||||
case "dark":
|
||||
themeDark.checked = true;
|
||||
break;
|
||||
default:
|
||||
themeAuto.checked = true;
|
||||
}</script>
|
||||
|
||||
</head>
|
||||
@@ -1627,24 +1776,40 @@ if (window.innerWidth > 650) {
|
||||
<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="/greeting-loons/">
|
||||
<h2 data-ha-exclude="" id="greeting-loons">greeting loons </h2>
|
||||
|
||||
<ul class="postlist-tags">
|
||||
|
||||
<li>shirt</li>
|
||||
<li>card</li>
|
||||
|
||||
<li>print</li>
|
||||
|
||||
<li>highlight</li>
|
||||
|
||||
</ul>
|
||||
<img src="/img/artisans-coop-shirt.jpg" alt="A black tank top laid on a desk. In white ink it reads 'Artisans Cooperative' with a print of some chickens and a quail." loading="lazy" decoding="async" width="1000" height="1333">
|
||||
<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="/spotted-towhee/">
|
||||
<h2 data-ha-exclude="" id="spotted-towhee">spotted towhee </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>
|
||||
|
||||
</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="/flicker/">
|
||||
<h2 data-ha-exclude="" id="flicker">flicker </h2>
|
||||
|
||||
<ul class="postlist-tags">
|
||||
|
||||
@@ -1652,22 +1817,10 @@ if (window.innerWidth > 650) {
|
||||
|
||||
<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="/become-unbutterable/">
|
||||
<h2 data-ha-exclude="" id="become-unbutterable">become unbutterable </h2>
|
||||
|
||||
<ul class="postlist-tags">
|
||||
|
||||
<li>print</li>
|
||||
<li>shirt</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, 'become unbutterable.'" loading="lazy" decoding="async" width="1000" height="562">
|
||||
<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">
|
||||
|
||||
</a>
|
||||
</li>
|
||||
@@ -1700,9 +1853,30 @@ if (window.innerWidth > 650) {
|
||||
</a>
|
||||
</li>
|
||||
</ul>
|
||||
|
||||
<fieldset id="theme">
|
||||
<legend>color scheme</legend>
|
||||
|
||||
<input type="radio" id="theme-light" name="theme" value="light">
|
||||
<label class="theme-light" for="theme-light">
|
||||
<i class="fa-regular fa-sun" aria-hidden="true"></i>
|
||||
light
|
||||
</label>
|
||||
|
||||
<input type="radio" id="theme-auto" name="theme" value="auto">
|
||||
<label class="theme-auto" for="theme-auto">
|
||||
auto
|
||||
</label>
|
||||
|
||||
<input type="radio" id="theme-dark" name="theme" value="dark">
|
||||
<label class="theme-dark" for="theme-dark">
|
||||
dark
|
||||
<i class="fa-regular fa-moon" aria-hidden="true"></i>
|
||||
</label>
|
||||
</fieldset>
|
||||
</footer>
|
||||
|
||||
|
||||
<!-- This page `/big-pidge/` was built on 2026-09-08T23:18:32.736Z -->
|
||||
<!-- This page `/big-pidge/` was built on 2026-09-09T20:38:02.902Z -->
|
||||
</body>
|
||||
</html>
|
||||
|
||||
@@ -478,6 +478,13 @@ body:has(dialog[open]) {
|
||||
--color-grey: light-dark(var(--color-grey-dark), var(--color-grey-light));
|
||||
}
|
||||
|
||||
:root:has(#theme-light:checked) {
|
||||
color-scheme: light;
|
||||
}
|
||||
:root:has(#theme-dark:checked) {
|
||||
color-scheme: dark;
|
||||
}
|
||||
|
||||
/* Base */
|
||||
|
||||
* {
|
||||
@@ -621,7 +628,7 @@ ul, ol, dl, li {
|
||||
}
|
||||
|
||||
li {
|
||||
line-height: 1.2 5;
|
||||
line-height: 1.2;
|
||||
margin-top: .65rem;
|
||||
margin-bottom: .65rem;
|
||||
}
|
||||
@@ -960,6 +967,111 @@ footer a:focus-visible {
|
||||
outline-color: var(--color-pink);
|
||||
}
|
||||
|
||||
/* color picker */
|
||||
#theme {
|
||||
display: flex;
|
||||
justify-content: center;
|
||||
margin: .5rem auto 0;
|
||||
padding: 0 .75rem .5rem;
|
||||
width: fit-content;
|
||||
border: .125rem solid var(--color-teal);
|
||||
border-radius: 2rem;
|
||||
}
|
||||
|
||||
#theme legend {
|
||||
margin: 0 auto;
|
||||
color: var(--color-teal);
|
||||
}
|
||||
|
||||
footer label {
|
||||
cursor: pointer;
|
||||
border: .125rem solid var(--color-pink);
|
||||
padding: 0 .25rem;
|
||||
color: var(--color-pink);
|
||||
background-color: var(--color-bg); /* this stops the box shadows from showing through */
|
||||
box-shadow: .15em .15em var(--color-shadow);
|
||||
/* Click animation handling */
|
||||
position: relative;
|
||||
top: 0;
|
||||
left: 0;
|
||||
transition: top .05s ease-in, left .05s ease-in;
|
||||
}
|
||||
|
||||
footer input:checked + label {
|
||||
color: var(--color-blue);
|
||||
border-color: var(--color-blue);
|
||||
}
|
||||
|
||||
footer label i {
|
||||
color: var(--color-teal);
|
||||
}
|
||||
|
||||
footer input:checked + label i {
|
||||
color: var(--color-pink);
|
||||
}
|
||||
|
||||
@media (any-hover: hover) {
|
||||
footer label:hover,
|
||||
footer input:checked + label:hover,
|
||||
footer label:hover i,
|
||||
footer input:checked + label:hover i {
|
||||
color: var(--color-bg);
|
||||
}
|
||||
|
||||
footer label:hover {
|
||||
background-color: var(--color-pink);
|
||||
}
|
||||
|
||||
footer input:checked + label:hover {
|
||||
background-color: var(--color-teal);
|
||||
}
|
||||
}
|
||||
|
||||
footer input:focus-visible + label,
|
||||
footer input:focus-visible + label i {
|
||||
color: var(--color-bg);
|
||||
background-color: var(--color-pink);
|
||||
border-color: var(--color-pink);
|
||||
}
|
||||
|
||||
footer input:checked:focus-visible + label,
|
||||
footer input:checked:focus-visible + label i {
|
||||
color: var(--color-bg);
|
||||
background-color: var(--color-teal);
|
||||
border-color: var(--color-teal);
|
||||
}
|
||||
|
||||
footer label:active {
|
||||
top: .09em;
|
||||
left: .09em;
|
||||
box-shadow: .05em .05em var(--color-shadow);
|
||||
}
|
||||
|
||||
label.theme-light {
|
||||
border-top-left-radius: 1rem;
|
||||
border-bottom-left-radius: 1rem;
|
||||
border-right: none;
|
||||
padding-left: .35rem;
|
||||
}
|
||||
|
||||
label.theme-auto {
|
||||
}
|
||||
|
||||
label.theme-dark {
|
||||
border-top-right-radius: 1rem;
|
||||
border-bottom-right-radius: 1rem;
|
||||
border-left: none;
|
||||
padding-right: .35rem;
|
||||
}
|
||||
|
||||
footer input {
|
||||
/* To allow screen reader to still access these. */
|
||||
/* From https://lyra.horse/blog/2025/08/you-dont-need-js/ */
|
||||
opacity: 0;
|
||||
position: absolute;
|
||||
pointer-events: none;
|
||||
}
|
||||
|
||||
/* Pagination */
|
||||
.pagination,
|
||||
.pagination li {
|
||||
@@ -1222,6 +1334,8 @@ pre[class*=language-]::selection {
|
||||
}
|
||||
}</style>
|
||||
|
||||
|
||||
|
||||
<script type="module">// Thank you to https://github.com/daviddarnes/heading-anchors
|
||||
// Thank you to https://amberwilson.co.uk/blog/are-your-anchor-links-accessible/
|
||||
|
||||
@@ -1476,6 +1590,41 @@ if (window.innerWidth > 650) {
|
||||
dialog.close();
|
||||
}
|
||||
});
|
||||
}
|
||||
const THEME = "theme";
|
||||
|
||||
const saveTheme = (themeValue) => {
|
||||
localStorage.setItem(THEME, themeValue);
|
||||
};
|
||||
|
||||
const themeLight = document.getElementById("theme-light");
|
||||
themeLight.addEventListener("input", (e) => {
|
||||
saveTheme(themeLight.value);
|
||||
});
|
||||
|
||||
const themeAuto = document.getElementById("theme-auto");
|
||||
themeAuto.addEventListener("input", (e) => {
|
||||
saveTheme(themeAuto.auto);
|
||||
});
|
||||
|
||||
const themeDark = document.getElementById("theme-dark");
|
||||
themeDark.addEventListener("input", (e) => {
|
||||
saveTheme(themeDark.value);
|
||||
});
|
||||
|
||||
var currentThemeValue = localStorage.getItem(THEME);
|
||||
switch (currentThemeValue) {
|
||||
case "light":
|
||||
themeLight.checked = true;
|
||||
break;
|
||||
case "auto":
|
||||
themeAuto.checked = true;
|
||||
break;
|
||||
case "dark":
|
||||
themeDark.checked = true;
|
||||
break;
|
||||
default:
|
||||
themeAuto.checked = true;
|
||||
}</script>
|
||||
|
||||
</head>
|
||||
@@ -1614,45 +1763,43 @@ if (window.innerWidth > 650) {
|
||||
<ol id="postlist">
|
||||
|
||||
<li class="post">
|
||||
<a class="postlink" href="/proud-dad-wallet/">
|
||||
<h2 data-ha-exclude="" id="proud-dad-wallet">proud dad wallet </h2>
|
||||
|
||||
<ul class="postlist-tags">
|
||||
|
||||
<li>leather</li>
|
||||
|
||||
<li>gender</li>
|
||||
|
||||
</ul>
|
||||
<img src="/img/proud-dad-wallet.jpg" alt="A brown leather wallet with a subtle trans flag stitching across the top." loading="lazy" decoding="async" width="1000" height="750">
|
||||
|
||||
</a>
|
||||
</li>
|
||||
|
||||
<li class="post">
|
||||
<a class="postlink" href="/orange-green-journal/">
|
||||
<h2 data-ha-exclude="" id="orange-green-journal">orange green journal </h2>
|
||||
<a class="postlink" href="/leather-strap-journal/">
|
||||
<h2 data-ha-exclude="" id="leather-strap-journal">leather strap journal </h2>
|
||||
|
||||
<ul class="postlist-tags">
|
||||
|
||||
<li>book</li>
|
||||
|
||||
</ul>
|
||||
<img src="/img/orange-green-journal.jpg" alt="A 4-part collage of a slim handbound book." loading="lazy" decoding="async" width="1000" height="1777">
|
||||
<img src="/img/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">
|
||||
|
||||
</a>
|
||||
</li>
|
||||
|
||||
<li class="post">
|
||||
<a class="postlink" href="/mousie/">
|
||||
<h2 data-ha-exclude="" id="mousie">mousie </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/mousie.jpg" alt="A cat in a sunbeam snuggles a little leather mouse-shaped cat toy." loading="lazy" decoding="async" width="1000" height="1499">
|
||||
<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>
|
||||
|
||||
<li class="post">
|
||||
<a class="postlink" href="/sunflower/">
|
||||
<h2 data-ha-exclude="" id="sunflower">sunflower </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">
|
||||
|
||||
</a>
|
||||
</li>
|
||||
@@ -1685,9 +1832,30 @@ if (window.innerWidth > 650) {
|
||||
</a>
|
||||
</li>
|
||||
</ul>
|
||||
|
||||
<fieldset id="theme">
|
||||
<legend>color scheme</legend>
|
||||
|
||||
<input type="radio" id="theme-light" name="theme" value="light">
|
||||
<label class="theme-light" for="theme-light">
|
||||
<i class="fa-regular fa-sun" aria-hidden="true"></i>
|
||||
light
|
||||
</label>
|
||||
|
||||
<input type="radio" id="theme-auto" name="theme" value="auto">
|
||||
<label class="theme-auto" for="theme-auto">
|
||||
auto
|
||||
</label>
|
||||
|
||||
<input type="radio" id="theme-dark" name="theme" value="dark">
|
||||
<label class="theme-dark" for="theme-dark">
|
||||
dark
|
||||
<i class="fa-regular fa-moon" aria-hidden="true"></i>
|
||||
</label>
|
||||
</fieldset>
|
||||
</footer>
|
||||
|
||||
|
||||
<!-- This page `/black-and-red-journal/` was built on 2026-09-08T23:18:32.758Z -->
|
||||
<!-- This page `/black-and-red-journal/` was built on 2026-09-09T20:38:02.939Z -->
|
||||
</body>
|
||||
</html>
|
||||
|
||||
@@ -478,6 +478,13 @@ body:has(dialog[open]) {
|
||||
--color-grey: light-dark(var(--color-grey-dark), var(--color-grey-light));
|
||||
}
|
||||
|
||||
:root:has(#theme-light:checked) {
|
||||
color-scheme: light;
|
||||
}
|
||||
:root:has(#theme-dark:checked) {
|
||||
color-scheme: dark;
|
||||
}
|
||||
|
||||
/* Base */
|
||||
|
||||
* {
|
||||
@@ -621,7 +628,7 @@ ul, ol, dl, li {
|
||||
}
|
||||
|
||||
li {
|
||||
line-height: 1.2 5;
|
||||
line-height: 1.2;
|
||||
margin-top: .65rem;
|
||||
margin-bottom: .65rem;
|
||||
}
|
||||
@@ -960,6 +967,111 @@ footer a:focus-visible {
|
||||
outline-color: var(--color-pink);
|
||||
}
|
||||
|
||||
/* color picker */
|
||||
#theme {
|
||||
display: flex;
|
||||
justify-content: center;
|
||||
margin: .5rem auto 0;
|
||||
padding: 0 .75rem .5rem;
|
||||
width: fit-content;
|
||||
border: .125rem solid var(--color-teal);
|
||||
border-radius: 2rem;
|
||||
}
|
||||
|
||||
#theme legend {
|
||||
margin: 0 auto;
|
||||
color: var(--color-teal);
|
||||
}
|
||||
|
||||
footer label {
|
||||
cursor: pointer;
|
||||
border: .125rem solid var(--color-pink);
|
||||
padding: 0 .25rem;
|
||||
color: var(--color-pink);
|
||||
background-color: var(--color-bg); /* this stops the box shadows from showing through */
|
||||
box-shadow: .15em .15em var(--color-shadow);
|
||||
/* Click animation handling */
|
||||
position: relative;
|
||||
top: 0;
|
||||
left: 0;
|
||||
transition: top .05s ease-in, left .05s ease-in;
|
||||
}
|
||||
|
||||
footer input:checked + label {
|
||||
color: var(--color-blue);
|
||||
border-color: var(--color-blue);
|
||||
}
|
||||
|
||||
footer label i {
|
||||
color: var(--color-teal);
|
||||
}
|
||||
|
||||
footer input:checked + label i {
|
||||
color: var(--color-pink);
|
||||
}
|
||||
|
||||
@media (any-hover: hover) {
|
||||
footer label:hover,
|
||||
footer input:checked + label:hover,
|
||||
footer label:hover i,
|
||||
footer input:checked + label:hover i {
|
||||
color: var(--color-bg);
|
||||
}
|
||||
|
||||
footer label:hover {
|
||||
background-color: var(--color-pink);
|
||||
}
|
||||
|
||||
footer input:checked + label:hover {
|
||||
background-color: var(--color-teal);
|
||||
}
|
||||
}
|
||||
|
||||
footer input:focus-visible + label,
|
||||
footer input:focus-visible + label i {
|
||||
color: var(--color-bg);
|
||||
background-color: var(--color-pink);
|
||||
border-color: var(--color-pink);
|
||||
}
|
||||
|
||||
footer input:checked:focus-visible + label,
|
||||
footer input:checked:focus-visible + label i {
|
||||
color: var(--color-bg);
|
||||
background-color: var(--color-teal);
|
||||
border-color: var(--color-teal);
|
||||
}
|
||||
|
||||
footer label:active {
|
||||
top: .09em;
|
||||
left: .09em;
|
||||
box-shadow: .05em .05em var(--color-shadow);
|
||||
}
|
||||
|
||||
label.theme-light {
|
||||
border-top-left-radius: 1rem;
|
||||
border-bottom-left-radius: 1rem;
|
||||
border-right: none;
|
||||
padding-left: .35rem;
|
||||
}
|
||||
|
||||
label.theme-auto {
|
||||
}
|
||||
|
||||
label.theme-dark {
|
||||
border-top-right-radius: 1rem;
|
||||
border-bottom-right-radius: 1rem;
|
||||
border-left: none;
|
||||
padding-right: .35rem;
|
||||
}
|
||||
|
||||
footer input {
|
||||
/* To allow screen reader to still access these. */
|
||||
/* From https://lyra.horse/blog/2025/08/you-dont-need-js/ */
|
||||
opacity: 0;
|
||||
position: absolute;
|
||||
pointer-events: none;
|
||||
}
|
||||
|
||||
/* Pagination */
|
||||
.pagination,
|
||||
.pagination li {
|
||||
@@ -1222,6 +1334,8 @@ pre[class*=language-]::selection {
|
||||
}
|
||||
}</style>
|
||||
|
||||
|
||||
|
||||
<script type="module">// Thank you to https://github.com/daviddarnes/heading-anchors
|
||||
// Thank you to https://amberwilson.co.uk/blog/are-your-anchor-links-accessible/
|
||||
|
||||
@@ -1476,6 +1590,41 @@ if (window.innerWidth > 650) {
|
||||
dialog.close();
|
||||
}
|
||||
});
|
||||
}
|
||||
const THEME = "theme";
|
||||
|
||||
const saveTheme = (themeValue) => {
|
||||
localStorage.setItem(THEME, themeValue);
|
||||
};
|
||||
|
||||
const themeLight = document.getElementById("theme-light");
|
||||
themeLight.addEventListener("input", (e) => {
|
||||
saveTheme(themeLight.value);
|
||||
});
|
||||
|
||||
const themeAuto = document.getElementById("theme-auto");
|
||||
themeAuto.addEventListener("input", (e) => {
|
||||
saveTheme(themeAuto.auto);
|
||||
});
|
||||
|
||||
const themeDark = document.getElementById("theme-dark");
|
||||
themeDark.addEventListener("input", (e) => {
|
||||
saveTheme(themeDark.value);
|
||||
});
|
||||
|
||||
var currentThemeValue = localStorage.getItem(THEME);
|
||||
switch (currentThemeValue) {
|
||||
case "light":
|
||||
themeLight.checked = true;
|
||||
break;
|
||||
case "auto":
|
||||
themeAuto.checked = true;
|
||||
break;
|
||||
case "dark":
|
||||
themeDark.checked = true;
|
||||
break;
|
||||
default:
|
||||
themeAuto.checked = true;
|
||||
}</script>
|
||||
|
||||
</head>
|
||||
@@ -1650,8 +1799,8 @@ if (window.innerWidth > 650) {
|
||||
<ol id="postlist">
|
||||
|
||||
<li class="post">
|
||||
<a class="postlink" href="/junco/">
|
||||
<h2 data-ha-exclude="" id="junco">junco </h2>
|
||||
<a class="postlink" href="/seedling/">
|
||||
<h2 data-ha-exclude="" id="seedling">seedling </h2>
|
||||
|
||||
<ul class="postlist-tags">
|
||||
|
||||
@@ -1660,32 +1809,30 @@ if (window.innerWidth > 650) {
|
||||
<li>card</li>
|
||||
|
||||
</ul>
|
||||
<img src="/img/junco-print.jpg" alt="A print of a junco mid-takeoff from a branch. Eir head is inked in black, body in gray, and the branch in sepia." loading="lazy" decoding="async" width="1000" height="1333">
|
||||
<img src="/img/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="/coming-out/">
|
||||
<h2 data-ha-exclude="" id="coming-out">coming out </h2>
|
||||
<a class="postlink" href="/luminescent/">
|
||||
<h2 data-ha-exclude="" id="luminescent-mature">luminescent (mature)</h2>
|
||||
|
||||
<ul class="postlist-tags">
|
||||
|
||||
<li>print</li>
|
||||
|
||||
<li>card</li>
|
||||
|
||||
<li>gender</li>
|
||||
|
||||
</ul>
|
||||
<img src="/img/coming-out-card-print.jpg" alt="A card and print in the same design - a chick and a broken eggshell, and a simple font reading 'congrats on coming out of your shell'" loading="lazy" decoding="async" width="1000" height="750">
|
||||
<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="/trans-rights-skull/">
|
||||
<h2 data-ha-exclude="" id="trans-rights-skull">trans rights skull </h2>
|
||||
<a class="postlink" href="/fat-raccoon/">
|
||||
<h2 data-ha-exclude="" id="fat-raccoon">fat raccoon </h2>
|
||||
|
||||
<ul class="postlist-tags">
|
||||
|
||||
@@ -1693,14 +1840,10 @@ if (window.innerWidth > 650) {
|
||||
|
||||
<li>card</li>
|
||||
|
||||
<li>sticker</li>
|
||||
|
||||
<li>pin</li>
|
||||
|
||||
<li>gender</li>
|
||||
<li>shirt</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 'trans rights!'" loading="lazy" decoding="async" width="1000" height="750">
|
||||
<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">
|
||||
|
||||
</a>
|
||||
</li>
|
||||
@@ -1733,9 +1876,30 @@ if (window.innerWidth > 650) {
|
||||
</a>
|
||||
</li>
|
||||
</ul>
|
||||
|
||||
<fieldset id="theme">
|
||||
<legend>color scheme</legend>
|
||||
|
||||
<input type="radio" id="theme-light" name="theme" value="light">
|
||||
<label class="theme-light" for="theme-light">
|
||||
<i class="fa-regular fa-sun" aria-hidden="true"></i>
|
||||
light
|
||||
</label>
|
||||
|
||||
<input type="radio" id="theme-auto" name="theme" value="auto">
|
||||
<label class="theme-auto" for="theme-auto">
|
||||
auto
|
||||
</label>
|
||||
|
||||
<input type="radio" id="theme-dark" name="theme" value="dark">
|
||||
<label class="theme-dark" for="theme-dark">
|
||||
dark
|
||||
<i class="fa-regular fa-moon" aria-hidden="true"></i>
|
||||
</label>
|
||||
</fieldset>
|
||||
</footer>
|
||||
|
||||
|
||||
<!-- This page `/block-printing-transfer-method/` was built on 2026-09-08T23:18:32.735Z -->
|
||||
<!-- This page `/block-printing-transfer-method/` was built on 2026-09-09T20:38:02.901Z -->
|
||||
</body>
|
||||
</html>
|
||||
|
||||
@@ -478,6 +478,13 @@ body:has(dialog[open]) {
|
||||
--color-grey: light-dark(var(--color-grey-dark), var(--color-grey-light));
|
||||
}
|
||||
|
||||
:root:has(#theme-light:checked) {
|
||||
color-scheme: light;
|
||||
}
|
||||
:root:has(#theme-dark:checked) {
|
||||
color-scheme: dark;
|
||||
}
|
||||
|
||||
/* Base */
|
||||
|
||||
* {
|
||||
@@ -621,7 +628,7 @@ ul, ol, dl, li {
|
||||
}
|
||||
|
||||
li {
|
||||
line-height: 1.2 5;
|
||||
line-height: 1.2;
|
||||
margin-top: .65rem;
|
||||
margin-bottom: .65rem;
|
||||
}
|
||||
@@ -960,6 +967,111 @@ footer a:focus-visible {
|
||||
outline-color: var(--color-pink);
|
||||
}
|
||||
|
||||
/* color picker */
|
||||
#theme {
|
||||
display: flex;
|
||||
justify-content: center;
|
||||
margin: .5rem auto 0;
|
||||
padding: 0 .75rem .5rem;
|
||||
width: fit-content;
|
||||
border: .125rem solid var(--color-teal);
|
||||
border-radius: 2rem;
|
||||
}
|
||||
|
||||
#theme legend {
|
||||
margin: 0 auto;
|
||||
color: var(--color-teal);
|
||||
}
|
||||
|
||||
footer label {
|
||||
cursor: pointer;
|
||||
border: .125rem solid var(--color-pink);
|
||||
padding: 0 .25rem;
|
||||
color: var(--color-pink);
|
||||
background-color: var(--color-bg); /* this stops the box shadows from showing through */
|
||||
box-shadow: .15em .15em var(--color-shadow);
|
||||
/* Click animation handling */
|
||||
position: relative;
|
||||
top: 0;
|
||||
left: 0;
|
||||
transition: top .05s ease-in, left .05s ease-in;
|
||||
}
|
||||
|
||||
footer input:checked + label {
|
||||
color: var(--color-blue);
|
||||
border-color: var(--color-blue);
|
||||
}
|
||||
|
||||
footer label i {
|
||||
color: var(--color-teal);
|
||||
}
|
||||
|
||||
footer input:checked + label i {
|
||||
color: var(--color-pink);
|
||||
}
|
||||
|
||||
@media (any-hover: hover) {
|
||||
footer label:hover,
|
||||
footer input:checked + label:hover,
|
||||
footer label:hover i,
|
||||
footer input:checked + label:hover i {
|
||||
color: var(--color-bg);
|
||||
}
|
||||
|
||||
footer label:hover {
|
||||
background-color: var(--color-pink);
|
||||
}
|
||||
|
||||
footer input:checked + label:hover {
|
||||
background-color: var(--color-teal);
|
||||
}
|
||||
}
|
||||
|
||||
footer input:focus-visible + label,
|
||||
footer input:focus-visible + label i {
|
||||
color: var(--color-bg);
|
||||
background-color: var(--color-pink);
|
||||
border-color: var(--color-pink);
|
||||
}
|
||||
|
||||
footer input:checked:focus-visible + label,
|
||||
footer input:checked:focus-visible + label i {
|
||||
color: var(--color-bg);
|
||||
background-color: var(--color-teal);
|
||||
border-color: var(--color-teal);
|
||||
}
|
||||
|
||||
footer label:active {
|
||||
top: .09em;
|
||||
left: .09em;
|
||||
box-shadow: .05em .05em var(--color-shadow);
|
||||
}
|
||||
|
||||
label.theme-light {
|
||||
border-top-left-radius: 1rem;
|
||||
border-bottom-left-radius: 1rem;
|
||||
border-right: none;
|
||||
padding-left: .35rem;
|
||||
}
|
||||
|
||||
label.theme-auto {
|
||||
}
|
||||
|
||||
label.theme-dark {
|
||||
border-top-right-radius: 1rem;
|
||||
border-bottom-right-radius: 1rem;
|
||||
border-left: none;
|
||||
padding-right: .35rem;
|
||||
}
|
||||
|
||||
footer input {
|
||||
/* To allow screen reader to still access these. */
|
||||
/* From https://lyra.horse/blog/2025/08/you-dont-need-js/ */
|
||||
opacity: 0;
|
||||
position: absolute;
|
||||
pointer-events: none;
|
||||
}
|
||||
|
||||
/* Pagination */
|
||||
.pagination,
|
||||
.pagination li {
|
||||
@@ -1222,6 +1334,8 @@ pre[class*=language-]::selection {
|
||||
}
|
||||
}</style>
|
||||
|
||||
|
||||
|
||||
<script type="module">// Thank you to https://github.com/daviddarnes/heading-anchors
|
||||
// Thank you to https://amberwilson.co.uk/blog/are-your-anchor-links-accessible/
|
||||
|
||||
@@ -1476,6 +1590,41 @@ if (window.innerWidth > 650) {
|
||||
dialog.close();
|
||||
}
|
||||
});
|
||||
}
|
||||
const THEME = "theme";
|
||||
|
||||
const saveTheme = (themeValue) => {
|
||||
localStorage.setItem(THEME, themeValue);
|
||||
};
|
||||
|
||||
const themeLight = document.getElementById("theme-light");
|
||||
themeLight.addEventListener("input", (e) => {
|
||||
saveTheme(themeLight.value);
|
||||
});
|
||||
|
||||
const themeAuto = document.getElementById("theme-auto");
|
||||
themeAuto.addEventListener("input", (e) => {
|
||||
saveTheme(themeAuto.auto);
|
||||
});
|
||||
|
||||
const themeDark = document.getElementById("theme-dark");
|
||||
themeDark.addEventListener("input", (e) => {
|
||||
saveTheme(themeDark.value);
|
||||
});
|
||||
|
||||
var currentThemeValue = localStorage.getItem(THEME);
|
||||
switch (currentThemeValue) {
|
||||
case "light":
|
||||
themeLight.checked = true;
|
||||
break;
|
||||
case "auto":
|
||||
themeAuto.checked = true;
|
||||
break;
|
||||
case "dark":
|
||||
themeDark.checked = true;
|
||||
break;
|
||||
default:
|
||||
themeAuto.checked = true;
|
||||
}</script>
|
||||
|
||||
</head>
|
||||
@@ -1626,43 +1775,43 @@ if (window.innerWidth > 650) {
|
||||
<ol id="postlist">
|
||||
|
||||
<li class="post">
|
||||
<a class="postlink" href="/orange-journal/">
|
||||
<h2 data-ha-exclude="" id="orange-journal">orange journal </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/orange-journal.jpg" alt="A three panel collage showcasing a small book with foldout pages and a bright orange cover." loading="lazy" decoding="async" width="1000" height="1776">
|
||||
<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="/striped-journal/">
|
||||
<h2 data-ha-exclude="" id="striped-journal">striped journal </h2>
|
||||
<a class="postlink" href="/tiny-books/">
|
||||
<h2 data-ha-exclude="" id="tiny-books">tiny books </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/tiny-book.jpg" alt="A three panel collage showing a book held in the palm of a hand." loading="lazy" decoding="async" width="1000" height="1000">
|
||||
|
||||
</a>
|
||||
</li>
|
||||
|
||||
<li class="post">
|
||||
<a class="postlink" href="/stampede-journal/">
|
||||
<h2 data-ha-exclude="" id="stampede-journal">stampede journal </h2>
|
||||
<a class="postlink" href="/leather-strap-journal/">
|
||||
<h2 data-ha-exclude="" id="leather-strap-journal">leather strap 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 'stampede!' written across it." loading="lazy" decoding="async" width="1000" height="1777">
|
||||
<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">
|
||||
|
||||
</a>
|
||||
</li>
|
||||
@@ -1695,9 +1844,30 @@ if (window.innerWidth > 650) {
|
||||
</a>
|
||||
</li>
|
||||
</ul>
|
||||
|
||||
<fieldset id="theme">
|
||||
<legend>color scheme</legend>
|
||||
|
||||
<input type="radio" id="theme-light" name="theme" value="light">
|
||||
<label class="theme-light" for="theme-light">
|
||||
<i class="fa-regular fa-sun" aria-hidden="true"></i>
|
||||
light
|
||||
</label>
|
||||
|
||||
<input type="radio" id="theme-auto" name="theme" value="auto">
|
||||
<label class="theme-auto" for="theme-auto">
|
||||
auto
|
||||
</label>
|
||||
|
||||
<input type="radio" id="theme-dark" name="theme" value="dark">
|
||||
<label class="theme-dark" for="theme-dark">
|
||||
dark
|
||||
<i class="fa-regular fa-moon" aria-hidden="true"></i>
|
||||
</label>
|
||||
</fieldset>
|
||||
</footer>
|
||||
|
||||
|
||||
<!-- This page `/blue-and-brown-leather-journal/` was built on 2026-09-08T23:18:32.730Z -->
|
||||
<!-- This page `/blue-and-brown-leather-journal/` was built on 2026-09-09T20:38:02.891Z -->
|
||||
</body>
|
||||
</html>
|
||||
|
||||
@@ -478,6 +478,13 @@ body:has(dialog[open]) {
|
||||
--color-grey: light-dark(var(--color-grey-dark), var(--color-grey-light));
|
||||
}
|
||||
|
||||
:root:has(#theme-light:checked) {
|
||||
color-scheme: light;
|
||||
}
|
||||
:root:has(#theme-dark:checked) {
|
||||
color-scheme: dark;
|
||||
}
|
||||
|
||||
/* Base */
|
||||
|
||||
* {
|
||||
@@ -621,7 +628,7 @@ ul, ol, dl, li {
|
||||
}
|
||||
|
||||
li {
|
||||
line-height: 1.2 5;
|
||||
line-height: 1.2;
|
||||
margin-top: .65rem;
|
||||
margin-bottom: .65rem;
|
||||
}
|
||||
@@ -960,6 +967,111 @@ footer a:focus-visible {
|
||||
outline-color: var(--color-pink);
|
||||
}
|
||||
|
||||
/* color picker */
|
||||
#theme {
|
||||
display: flex;
|
||||
justify-content: center;
|
||||
margin: .5rem auto 0;
|
||||
padding: 0 .75rem .5rem;
|
||||
width: fit-content;
|
||||
border: .125rem solid var(--color-teal);
|
||||
border-radius: 2rem;
|
||||
}
|
||||
|
||||
#theme legend {
|
||||
margin: 0 auto;
|
||||
color: var(--color-teal);
|
||||
}
|
||||
|
||||
footer label {
|
||||
cursor: pointer;
|
||||
border: .125rem solid var(--color-pink);
|
||||
padding: 0 .25rem;
|
||||
color: var(--color-pink);
|
||||
background-color: var(--color-bg); /* this stops the box shadows from showing through */
|
||||
box-shadow: .15em .15em var(--color-shadow);
|
||||
/* Click animation handling */
|
||||
position: relative;
|
||||
top: 0;
|
||||
left: 0;
|
||||
transition: top .05s ease-in, left .05s ease-in;
|
||||
}
|
||||
|
||||
footer input:checked + label {
|
||||
color: var(--color-blue);
|
||||
border-color: var(--color-blue);
|
||||
}
|
||||
|
||||
footer label i {
|
||||
color: var(--color-teal);
|
||||
}
|
||||
|
||||
footer input:checked + label i {
|
||||
color: var(--color-pink);
|
||||
}
|
||||
|
||||
@media (any-hover: hover) {
|
||||
footer label:hover,
|
||||
footer input:checked + label:hover,
|
||||
footer label:hover i,
|
||||
footer input:checked + label:hover i {
|
||||
color: var(--color-bg);
|
||||
}
|
||||
|
||||
footer label:hover {
|
||||
background-color: var(--color-pink);
|
||||
}
|
||||
|
||||
footer input:checked + label:hover {
|
||||
background-color: var(--color-teal);
|
||||
}
|
||||
}
|
||||
|
||||
footer input:focus-visible + label,
|
||||
footer input:focus-visible + label i {
|
||||
color: var(--color-bg);
|
||||
background-color: var(--color-pink);
|
||||
border-color: var(--color-pink);
|
||||
}
|
||||
|
||||
footer input:checked:focus-visible + label,
|
||||
footer input:checked:focus-visible + label i {
|
||||
color: var(--color-bg);
|
||||
background-color: var(--color-teal);
|
||||
border-color: var(--color-teal);
|
||||
}
|
||||
|
||||
footer label:active {
|
||||
top: .09em;
|
||||
left: .09em;
|
||||
box-shadow: .05em .05em var(--color-shadow);
|
||||
}
|
||||
|
||||
label.theme-light {
|
||||
border-top-left-radius: 1rem;
|
||||
border-bottom-left-radius: 1rem;
|
||||
border-right: none;
|
||||
padding-left: .35rem;
|
||||
}
|
||||
|
||||
label.theme-auto {
|
||||
}
|
||||
|
||||
label.theme-dark {
|
||||
border-top-right-radius: 1rem;
|
||||
border-bottom-right-radius: 1rem;
|
||||
border-left: none;
|
||||
padding-right: .35rem;
|
||||
}
|
||||
|
||||
footer input {
|
||||
/* To allow screen reader to still access these. */
|
||||
/* From https://lyra.horse/blog/2025/08/you-dont-need-js/ */
|
||||
opacity: 0;
|
||||
position: absolute;
|
||||
pointer-events: none;
|
||||
}
|
||||
|
||||
/* Pagination */
|
||||
.pagination,
|
||||
.pagination li {
|
||||
@@ -1222,6 +1334,8 @@ pre[class*=language-]::selection {
|
||||
}
|
||||
}</style>
|
||||
|
||||
|
||||
|
||||
<script type="module">// Thank you to https://github.com/daviddarnes/heading-anchors
|
||||
// Thank you to https://amberwilson.co.uk/blog/are-your-anchor-links-accessible/
|
||||
|
||||
@@ -1476,6 +1590,41 @@ if (window.innerWidth > 650) {
|
||||
dialog.close();
|
||||
}
|
||||
});
|
||||
}
|
||||
const THEME = "theme";
|
||||
|
||||
const saveTheme = (themeValue) => {
|
||||
localStorage.setItem(THEME, themeValue);
|
||||
};
|
||||
|
||||
const themeLight = document.getElementById("theme-light");
|
||||
themeLight.addEventListener("input", (e) => {
|
||||
saveTheme(themeLight.value);
|
||||
});
|
||||
|
||||
const themeAuto = document.getElementById("theme-auto");
|
||||
themeAuto.addEventListener("input", (e) => {
|
||||
saveTheme(themeAuto.auto);
|
||||
});
|
||||
|
||||
const themeDark = document.getElementById("theme-dark");
|
||||
themeDark.addEventListener("input", (e) => {
|
||||
saveTheme(themeDark.value);
|
||||
});
|
||||
|
||||
var currentThemeValue = localStorage.getItem(THEME);
|
||||
switch (currentThemeValue) {
|
||||
case "light":
|
||||
themeLight.checked = true;
|
||||
break;
|
||||
case "auto":
|
||||
themeAuto.checked = true;
|
||||
break;
|
||||
case "dark":
|
||||
themeDark.checked = true;
|
||||
break;
|
||||
default:
|
||||
themeAuto.checked = true;
|
||||
}</script>
|
||||
|
||||
</head>
|
||||
@@ -1620,53 +1769,47 @@ if (window.innerWidth > 650) {
|
||||
<ol id="postlist">
|
||||
|
||||
<li class="post">
|
||||
<a class="postlink" href="/pronoun-patches/">
|
||||
<h2 data-ha-exclude="" id="pronoun-patches">pronoun patches </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>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">
|
||||
<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, 'become unbutterable.'" 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>
|
||||
<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/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/spotted-towhee-print.jpg" alt="A block print of a spotted towhee mid-leap." loading="lazy" decoding="async" width="1000" height="750">
|
||||
|
||||
</a>
|
||||
</li>
|
||||
|
||||
<li class="post">
|
||||
<a class="postlink" href="/anarchy-autism/">
|
||||
<h2 data-ha-exclude="" id="anarchy-autism">anarchy autism </h2>
|
||||
<a class="postlink" href="/iris/">
|
||||
<h2 data-ha-exclude="" id="iris">iris </h2>
|
||||
|
||||
<ul class="postlist-tags">
|
||||
|
||||
<li>print</li>
|
||||
|
||||
<li>sticker</li>
|
||||
|
||||
<li>shirt</li>
|
||||
|
||||
<li>pin</li>
|
||||
<li>card</li>
|
||||
|
||||
</ul>
|
||||
<img src="/img/anarchy-autism-rainbow-print.jpg" alt="A print in rainbow ink that says autism with the anarchy A." loading="lazy" decoding="async" width="1000" height="750">
|
||||
<img src="/img/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>
|
||||
@@ -1699,9 +1842,30 @@ if (window.innerWidth > 650) {
|
||||
</a>
|
||||
</li>
|
||||
</ul>
|
||||
|
||||
<fieldset id="theme">
|
||||
<legend>color scheme</legend>
|
||||
|
||||
<input type="radio" id="theme-light" name="theme" value="light">
|
||||
<label class="theme-light" for="theme-light">
|
||||
<i class="fa-regular fa-sun" aria-hidden="true"></i>
|
||||
light
|
||||
</label>
|
||||
|
||||
<input type="radio" id="theme-auto" name="theme" value="auto">
|
||||
<label class="theme-auto" for="theme-auto">
|
||||
auto
|
||||
</label>
|
||||
|
||||
<input type="radio" id="theme-dark" name="theme" value="dark">
|
||||
<label class="theme-dark" for="theme-dark">
|
||||
dark
|
||||
<i class="fa-regular fa-moon" aria-hidden="true"></i>
|
||||
</label>
|
||||
</fieldset>
|
||||
</footer>
|
||||
|
||||
|
||||
<!-- This page `/booby-congrats-on-the-top-surgery/` was built on 2026-09-08T23:18:32.763Z -->
|
||||
<!-- This page `/booby-congrats-on-the-top-surgery/` was built on 2026-09-09T20:38:02.898Z -->
|
||||
</body>
|
||||
</html>
|
||||
|
||||
+202
-38
@@ -478,6 +478,13 @@ body:has(dialog[open]) {
|
||||
--color-grey: light-dark(var(--color-grey-dark), var(--color-grey-light));
|
||||
}
|
||||
|
||||
:root:has(#theme-light:checked) {
|
||||
color-scheme: light;
|
||||
}
|
||||
:root:has(#theme-dark:checked) {
|
||||
color-scheme: dark;
|
||||
}
|
||||
|
||||
/* Base */
|
||||
|
||||
* {
|
||||
@@ -621,7 +628,7 @@ ul, ol, dl, li {
|
||||
}
|
||||
|
||||
li {
|
||||
line-height: 1.2 5;
|
||||
line-height: 1.2;
|
||||
margin-top: .65rem;
|
||||
margin-bottom: .65rem;
|
||||
}
|
||||
@@ -960,6 +967,111 @@ footer a:focus-visible {
|
||||
outline-color: var(--color-pink);
|
||||
}
|
||||
|
||||
/* color picker */
|
||||
#theme {
|
||||
display: flex;
|
||||
justify-content: center;
|
||||
margin: .5rem auto 0;
|
||||
padding: 0 .75rem .5rem;
|
||||
width: fit-content;
|
||||
border: .125rem solid var(--color-teal);
|
||||
border-radius: 2rem;
|
||||
}
|
||||
|
||||
#theme legend {
|
||||
margin: 0 auto;
|
||||
color: var(--color-teal);
|
||||
}
|
||||
|
||||
footer label {
|
||||
cursor: pointer;
|
||||
border: .125rem solid var(--color-pink);
|
||||
padding: 0 .25rem;
|
||||
color: var(--color-pink);
|
||||
background-color: var(--color-bg); /* this stops the box shadows from showing through */
|
||||
box-shadow: .15em .15em var(--color-shadow);
|
||||
/* Click animation handling */
|
||||
position: relative;
|
||||
top: 0;
|
||||
left: 0;
|
||||
transition: top .05s ease-in, left .05s ease-in;
|
||||
}
|
||||
|
||||
footer input:checked + label {
|
||||
color: var(--color-blue);
|
||||
border-color: var(--color-blue);
|
||||
}
|
||||
|
||||
footer label i {
|
||||
color: var(--color-teal);
|
||||
}
|
||||
|
||||
footer input:checked + label i {
|
||||
color: var(--color-pink);
|
||||
}
|
||||
|
||||
@media (any-hover: hover) {
|
||||
footer label:hover,
|
||||
footer input:checked + label:hover,
|
||||
footer label:hover i,
|
||||
footer input:checked + label:hover i {
|
||||
color: var(--color-bg);
|
||||
}
|
||||
|
||||
footer label:hover {
|
||||
background-color: var(--color-pink);
|
||||
}
|
||||
|
||||
footer input:checked + label:hover {
|
||||
background-color: var(--color-teal);
|
||||
}
|
||||
}
|
||||
|
||||
footer input:focus-visible + label,
|
||||
footer input:focus-visible + label i {
|
||||
color: var(--color-bg);
|
||||
background-color: var(--color-pink);
|
||||
border-color: var(--color-pink);
|
||||
}
|
||||
|
||||
footer input:checked:focus-visible + label,
|
||||
footer input:checked:focus-visible + label i {
|
||||
color: var(--color-bg);
|
||||
background-color: var(--color-teal);
|
||||
border-color: var(--color-teal);
|
||||
}
|
||||
|
||||
footer label:active {
|
||||
top: .09em;
|
||||
left: .09em;
|
||||
box-shadow: .05em .05em var(--color-shadow);
|
||||
}
|
||||
|
||||
label.theme-light {
|
||||
border-top-left-radius: 1rem;
|
||||
border-bottom-left-radius: 1rem;
|
||||
border-right: none;
|
||||
padding-left: .35rem;
|
||||
}
|
||||
|
||||
label.theme-auto {
|
||||
}
|
||||
|
||||
label.theme-dark {
|
||||
border-top-right-radius: 1rem;
|
||||
border-bottom-right-radius: 1rem;
|
||||
border-left: none;
|
||||
padding-right: .35rem;
|
||||
}
|
||||
|
||||
footer input {
|
||||
/* To allow screen reader to still access these. */
|
||||
/* From https://lyra.horse/blog/2025/08/you-dont-need-js/ */
|
||||
opacity: 0;
|
||||
position: absolute;
|
||||
pointer-events: none;
|
||||
}
|
||||
|
||||
/* Pagination */
|
||||
.pagination,
|
||||
.pagination li {
|
||||
@@ -1222,6 +1334,8 @@ pre[class*=language-]::selection {
|
||||
}
|
||||
}</style>
|
||||
|
||||
|
||||
|
||||
<script type="module">// Thank you to https://github.com/daviddarnes/heading-anchors
|
||||
// Thank you to https://amberwilson.co.uk/blog/are-your-anchor-links-accessible/
|
||||
|
||||
@@ -1476,6 +1590,41 @@ if (window.innerWidth > 650) {
|
||||
dialog.close();
|
||||
}
|
||||
});
|
||||
}
|
||||
const THEME = "theme";
|
||||
|
||||
const saveTheme = (themeValue) => {
|
||||
localStorage.setItem(THEME, themeValue);
|
||||
};
|
||||
|
||||
const themeLight = document.getElementById("theme-light");
|
||||
themeLight.addEventListener("input", (e) => {
|
||||
saveTheme(themeLight.value);
|
||||
});
|
||||
|
||||
const themeAuto = document.getElementById("theme-auto");
|
||||
themeAuto.addEventListener("input", (e) => {
|
||||
saveTheme(themeAuto.auto);
|
||||
});
|
||||
|
||||
const themeDark = document.getElementById("theme-dark");
|
||||
themeDark.addEventListener("input", (e) => {
|
||||
saveTheme(themeDark.value);
|
||||
});
|
||||
|
||||
var currentThemeValue = localStorage.getItem(THEME);
|
||||
switch (currentThemeValue) {
|
||||
case "light":
|
||||
themeLight.checked = true;
|
||||
break;
|
||||
case "auto":
|
||||
themeAuto.checked = true;
|
||||
break;
|
||||
case "dark":
|
||||
themeDark.checked = true;
|
||||
break;
|
||||
default:
|
||||
themeAuto.checked = true;
|
||||
}</script>
|
||||
|
||||
</head>
|
||||
@@ -1615,53 +1764,47 @@ if (window.innerWidth > 650) {
|
||||
<ol id="postlist">
|
||||
|
||||
<li class="post">
|
||||
<a class="postlink" href="/queer/">
|
||||
<h2 data-ha-exclude="" id="queer">queer </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="/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">
|
||||
|
||||
<li>sticker</li>
|
||||
</a>
|
||||
</li>
|
||||
|
||||
<li>pin</li>
|
||||
<li class="post">
|
||||
<a class="postlink" href="/gender/">
|
||||
<h2 data-ha-exclude="" id="gender">gender? </h2>
|
||||
|
||||
<ul class="postlist-tags">
|
||||
|
||||
<li>gender</li>
|
||||
|
||||
</ul>
|
||||
<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="/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="/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">
|
||||
<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>
|
||||
@@ -1694,9 +1837,30 @@ if (window.innerWidth > 650) {
|
||||
</a>
|
||||
</li>
|
||||
</ul>
|
||||
|
||||
<fieldset id="theme">
|
||||
<legend>color scheme</legend>
|
||||
|
||||
<input type="radio" id="theme-light" name="theme" value="light">
|
||||
<label class="theme-light" for="theme-light">
|
||||
<i class="fa-regular fa-sun" aria-hidden="true"></i>
|
||||
light
|
||||
</label>
|
||||
|
||||
<input type="radio" id="theme-auto" name="theme" value="auto">
|
||||
<label class="theme-auto" for="theme-auto">
|
||||
auto
|
||||
</label>
|
||||
|
||||
<input type="radio" id="theme-dark" name="theme" value="dark">
|
||||
<label class="theme-dark" for="theme-dark">
|
||||
dark
|
||||
<i class="fa-regular fa-moon" aria-hidden="true"></i>
|
||||
</label>
|
||||
</fieldset>
|
||||
</footer>
|
||||
|
||||
|
||||
<!-- This page `/bottom-growth/` was built on 2026-09-08T23:18:32.761Z -->
|
||||
<!-- This page `/bottom-growth/` was built on 2026-09-09T20:38:02.895Z -->
|
||||
</body>
|
||||
</html>
|
||||
|
||||
+181
-11
@@ -478,6 +478,13 @@ body:has(dialog[open]) {
|
||||
--color-grey: light-dark(var(--color-grey-dark), var(--color-grey-light));
|
||||
}
|
||||
|
||||
:root:has(#theme-light:checked) {
|
||||
color-scheme: light;
|
||||
}
|
||||
:root:has(#theme-dark:checked) {
|
||||
color-scheme: dark;
|
||||
}
|
||||
|
||||
/* Base */
|
||||
|
||||
* {
|
||||
@@ -621,7 +628,7 @@ ul, ol, dl, li {
|
||||
}
|
||||
|
||||
li {
|
||||
line-height: 1.2 5;
|
||||
line-height: 1.2;
|
||||
margin-top: .65rem;
|
||||
margin-bottom: .65rem;
|
||||
}
|
||||
@@ -960,6 +967,111 @@ footer a:focus-visible {
|
||||
outline-color: var(--color-pink);
|
||||
}
|
||||
|
||||
/* color picker */
|
||||
#theme {
|
||||
display: flex;
|
||||
justify-content: center;
|
||||
margin: .5rem auto 0;
|
||||
padding: 0 .75rem .5rem;
|
||||
width: fit-content;
|
||||
border: .125rem solid var(--color-teal);
|
||||
border-radius: 2rem;
|
||||
}
|
||||
|
||||
#theme legend {
|
||||
margin: 0 auto;
|
||||
color: var(--color-teal);
|
||||
}
|
||||
|
||||
footer label {
|
||||
cursor: pointer;
|
||||
border: .125rem solid var(--color-pink);
|
||||
padding: 0 .25rem;
|
||||
color: var(--color-pink);
|
||||
background-color: var(--color-bg); /* this stops the box shadows from showing through */
|
||||
box-shadow: .15em .15em var(--color-shadow);
|
||||
/* Click animation handling */
|
||||
position: relative;
|
||||
top: 0;
|
||||
left: 0;
|
||||
transition: top .05s ease-in, left .05s ease-in;
|
||||
}
|
||||
|
||||
footer input:checked + label {
|
||||
color: var(--color-blue);
|
||||
border-color: var(--color-blue);
|
||||
}
|
||||
|
||||
footer label i {
|
||||
color: var(--color-teal);
|
||||
}
|
||||
|
||||
footer input:checked + label i {
|
||||
color: var(--color-pink);
|
||||
}
|
||||
|
||||
@media (any-hover: hover) {
|
||||
footer label:hover,
|
||||
footer input:checked + label:hover,
|
||||
footer label:hover i,
|
||||
footer input:checked + label:hover i {
|
||||
color: var(--color-bg);
|
||||
}
|
||||
|
||||
footer label:hover {
|
||||
background-color: var(--color-pink);
|
||||
}
|
||||
|
||||
footer input:checked + label:hover {
|
||||
background-color: var(--color-teal);
|
||||
}
|
||||
}
|
||||
|
||||
footer input:focus-visible + label,
|
||||
footer input:focus-visible + label i {
|
||||
color: var(--color-bg);
|
||||
background-color: var(--color-pink);
|
||||
border-color: var(--color-pink);
|
||||
}
|
||||
|
||||
footer input:checked:focus-visible + label,
|
||||
footer input:checked:focus-visible + label i {
|
||||
color: var(--color-bg);
|
||||
background-color: var(--color-teal);
|
||||
border-color: var(--color-teal);
|
||||
}
|
||||
|
||||
footer label:active {
|
||||
top: .09em;
|
||||
left: .09em;
|
||||
box-shadow: .05em .05em var(--color-shadow);
|
||||
}
|
||||
|
||||
label.theme-light {
|
||||
border-top-left-radius: 1rem;
|
||||
border-bottom-left-radius: 1rem;
|
||||
border-right: none;
|
||||
padding-left: .35rem;
|
||||
}
|
||||
|
||||
label.theme-auto {
|
||||
}
|
||||
|
||||
label.theme-dark {
|
||||
border-top-right-radius: 1rem;
|
||||
border-bottom-right-radius: 1rem;
|
||||
border-left: none;
|
||||
padding-right: .35rem;
|
||||
}
|
||||
|
||||
footer input {
|
||||
/* To allow screen reader to still access these. */
|
||||
/* From https://lyra.horse/blog/2025/08/you-dont-need-js/ */
|
||||
opacity: 0;
|
||||
position: absolute;
|
||||
pointer-events: none;
|
||||
}
|
||||
|
||||
/* Pagination */
|
||||
.pagination,
|
||||
.pagination li {
|
||||
@@ -1222,6 +1334,8 @@ pre[class*=language-]::selection {
|
||||
}
|
||||
}</style>
|
||||
|
||||
|
||||
|
||||
<script type="module">// Thank you to https://github.com/daviddarnes/heading-anchors
|
||||
// Thank you to https://amberwilson.co.uk/blog/are-your-anchor-links-accessible/
|
||||
|
||||
@@ -1476,6 +1590,41 @@ if (window.innerWidth > 650) {
|
||||
dialog.close();
|
||||
}
|
||||
});
|
||||
}
|
||||
const THEME = "theme";
|
||||
|
||||
const saveTheme = (themeValue) => {
|
||||
localStorage.setItem(THEME, themeValue);
|
||||
};
|
||||
|
||||
const themeLight = document.getElementById("theme-light");
|
||||
themeLight.addEventListener("input", (e) => {
|
||||
saveTheme(themeLight.value);
|
||||
});
|
||||
|
||||
const themeAuto = document.getElementById("theme-auto");
|
||||
themeAuto.addEventListener("input", (e) => {
|
||||
saveTheme(themeAuto.auto);
|
||||
});
|
||||
|
||||
const themeDark = document.getElementById("theme-dark");
|
||||
themeDark.addEventListener("input", (e) => {
|
||||
saveTheme(themeDark.value);
|
||||
});
|
||||
|
||||
var currentThemeValue = localStorage.getItem(THEME);
|
||||
switch (currentThemeValue) {
|
||||
case "light":
|
||||
themeLight.checked = true;
|
||||
break;
|
||||
case "auto":
|
||||
themeAuto.checked = true;
|
||||
break;
|
||||
case "dark":
|
||||
themeDark.checked = true;
|
||||
break;
|
||||
default:
|
||||
themeAuto.checked = true;
|
||||
}</script>
|
||||
|
||||
</head>
|
||||
@@ -1610,43 +1759,43 @@ if (window.innerWidth > 650) {
|
||||
<ol id="postlist">
|
||||
|
||||
<li class="post">
|
||||
<a class="postlink" href="/wrap-bracelets/">
|
||||
<h2 data-ha-exclude="" id="wrap-bracelets">wrap bracelets </h2>
|
||||
<a class="postlink" href="/shrimp-cat-toy/">
|
||||
<h2 data-ha-exclude="" id="shrimp-cat-toy">shrimp cat toy </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/two-shrimp.jpg" alt="Two leather shrimp-shaped cat toys. They have long dangly antennae and are stitched in red and orange." loading="lazy" decoding="async" width="1000" height="666">
|
||||
|
||||
</a>
|
||||
</li>
|
||||
|
||||
<li class="post">
|
||||
<a class="postlink" href="/leather-keychains/">
|
||||
<h2 data-ha-exclude="" id="leather-keychains">leather keychains </h2>
|
||||
<a class="postlink" href="/leatherworking-favorites/">
|
||||
<h2 data-ha-exclude="" id="leatherworking-favorites">leatherworking favorites </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 'MOM' or 'EGG'." loading="lazy" decoding="async" width="1000" height="1333">
|
||||
<img src="/img/leather-harness-wip.jpg" alt="two pieces of a chest harness sitting on a messy workbench. both pieces are about 8 inches long total and consist of two large o-rings joined by a dark teal leather strap. the o rings and rivets are matte black." loading="lazy" decoding="async" width="1000" height="750">
|
||||
|
||||
</a>
|
||||
</li>
|
||||
|
||||
<li class="post">
|
||||
<a class="postlink" href="/long-zipper-bifold/">
|
||||
<h2 data-ha-exclude="" id="long-zipper-bifold">long zipper bifold </h2>
|
||||
<a class="postlink" href="/vertical-bifold/">
|
||||
<h2 data-ha-exclude="" id="vertical-bifold">vertical bifold </h2>
|
||||
|
||||
<ul class="postlist-tags">
|
||||
|
||||
<li>leather</li>
|
||||
|
||||
</ul>
|
||||
<img src="/img/long-zipper-bifold.jpg" alt="A collage showing an orange leather wallet with a long zipper running the length of the outside." loading="lazy" decoding="async" width="1000" height="1000">
|
||||
<img src="/img/vertical-bifold.jpg" alt="A collage showing a hand-stitched leather vertical bifold wallet with 6 card pockets, 2 hidden pockets, and 1 bill pocket." loading="lazy" decoding="async" width="1000" height="1777">
|
||||
|
||||
</a>
|
||||
</li>
|
||||
@@ -1679,9 +1828,30 @@ if (window.innerWidth > 650) {
|
||||
</a>
|
||||
</li>
|
||||
</ul>
|
||||
|
||||
<fieldset id="theme">
|
||||
<legend>color scheme</legend>
|
||||
|
||||
<input type="radio" id="theme-light" name="theme" value="light">
|
||||
<label class="theme-light" for="theme-light">
|
||||
<i class="fa-regular fa-sun" aria-hidden="true"></i>
|
||||
light
|
||||
</label>
|
||||
|
||||
<input type="radio" id="theme-auto" name="theme" value="auto">
|
||||
<label class="theme-auto" for="theme-auto">
|
||||
auto
|
||||
</label>
|
||||
|
||||
<input type="radio" id="theme-dark" name="theme" value="dark">
|
||||
<label class="theme-dark" for="theme-dark">
|
||||
dark
|
||||
<i class="fa-regular fa-moon" aria-hidden="true"></i>
|
||||
</label>
|
||||
</fieldset>
|
||||
</footer>
|
||||
|
||||
|
||||
<!-- This page `/bowtie/` was built on 2026-09-08T23:18:32.762Z -->
|
||||
<!-- This page `/bowtie/` was built on 2026-09-09T20:38:02.896Z -->
|
||||
</body>
|
||||
</html>
|
||||
|
||||
+195
-25
@@ -478,6 +478,13 @@ body:has(dialog[open]) {
|
||||
--color-grey: light-dark(var(--color-grey-dark), var(--color-grey-light));
|
||||
}
|
||||
|
||||
:root:has(#theme-light:checked) {
|
||||
color-scheme: light;
|
||||
}
|
||||
:root:has(#theme-dark:checked) {
|
||||
color-scheme: dark;
|
||||
}
|
||||
|
||||
/* Base */
|
||||
|
||||
* {
|
||||
@@ -621,7 +628,7 @@ ul, ol, dl, li {
|
||||
}
|
||||
|
||||
li {
|
||||
line-height: 1.2 5;
|
||||
line-height: 1.2;
|
||||
margin-top: .65rem;
|
||||
margin-bottom: .65rem;
|
||||
}
|
||||
@@ -960,6 +967,111 @@ footer a:focus-visible {
|
||||
outline-color: var(--color-pink);
|
||||
}
|
||||
|
||||
/* color picker */
|
||||
#theme {
|
||||
display: flex;
|
||||
justify-content: center;
|
||||
margin: .5rem auto 0;
|
||||
padding: 0 .75rem .5rem;
|
||||
width: fit-content;
|
||||
border: .125rem solid var(--color-teal);
|
||||
border-radius: 2rem;
|
||||
}
|
||||
|
||||
#theme legend {
|
||||
margin: 0 auto;
|
||||
color: var(--color-teal);
|
||||
}
|
||||
|
||||
footer label {
|
||||
cursor: pointer;
|
||||
border: .125rem solid var(--color-pink);
|
||||
padding: 0 .25rem;
|
||||
color: var(--color-pink);
|
||||
background-color: var(--color-bg); /* this stops the box shadows from showing through */
|
||||
box-shadow: .15em .15em var(--color-shadow);
|
||||
/* Click animation handling */
|
||||
position: relative;
|
||||
top: 0;
|
||||
left: 0;
|
||||
transition: top .05s ease-in, left .05s ease-in;
|
||||
}
|
||||
|
||||
footer input:checked + label {
|
||||
color: var(--color-blue);
|
||||
border-color: var(--color-blue);
|
||||
}
|
||||
|
||||
footer label i {
|
||||
color: var(--color-teal);
|
||||
}
|
||||
|
||||
footer input:checked + label i {
|
||||
color: var(--color-pink);
|
||||
}
|
||||
|
||||
@media (any-hover: hover) {
|
||||
footer label:hover,
|
||||
footer input:checked + label:hover,
|
||||
footer label:hover i,
|
||||
footer input:checked + label:hover i {
|
||||
color: var(--color-bg);
|
||||
}
|
||||
|
||||
footer label:hover {
|
||||
background-color: var(--color-pink);
|
||||
}
|
||||
|
||||
footer input:checked + label:hover {
|
||||
background-color: var(--color-teal);
|
||||
}
|
||||
}
|
||||
|
||||
footer input:focus-visible + label,
|
||||
footer input:focus-visible + label i {
|
||||
color: var(--color-bg);
|
||||
background-color: var(--color-pink);
|
||||
border-color: var(--color-pink);
|
||||
}
|
||||
|
||||
footer input:checked:focus-visible + label,
|
||||
footer input:checked:focus-visible + label i {
|
||||
color: var(--color-bg);
|
||||
background-color: var(--color-teal);
|
||||
border-color: var(--color-teal);
|
||||
}
|
||||
|
||||
footer label:active {
|
||||
top: .09em;
|
||||
left: .09em;
|
||||
box-shadow: .05em .05em var(--color-shadow);
|
||||
}
|
||||
|
||||
label.theme-light {
|
||||
border-top-left-radius: 1rem;
|
||||
border-bottom-left-radius: 1rem;
|
||||
border-right: none;
|
||||
padding-left: .35rem;
|
||||
}
|
||||
|
||||
label.theme-auto {
|
||||
}
|
||||
|
||||
label.theme-dark {
|
||||
border-top-right-radius: 1rem;
|
||||
border-bottom-right-radius: 1rem;
|
||||
border-left: none;
|
||||
padding-right: .35rem;
|
||||
}
|
||||
|
||||
footer input {
|
||||
/* To allow screen reader to still access these. */
|
||||
/* From https://lyra.horse/blog/2025/08/you-dont-need-js/ */
|
||||
opacity: 0;
|
||||
position: absolute;
|
||||
pointer-events: none;
|
||||
}
|
||||
|
||||
/* Pagination */
|
||||
.pagination,
|
||||
.pagination li {
|
||||
@@ -1222,6 +1334,8 @@ pre[class*=language-]::selection {
|
||||
}
|
||||
}</style>
|
||||
|
||||
|
||||
|
||||
<script type="module">// Thank you to https://github.com/daviddarnes/heading-anchors
|
||||
// Thank you to https://amberwilson.co.uk/blog/are-your-anchor-links-accessible/
|
||||
|
||||
@@ -1476,6 +1590,41 @@ if (window.innerWidth > 650) {
|
||||
dialog.close();
|
||||
}
|
||||
});
|
||||
}
|
||||
const THEME = "theme";
|
||||
|
||||
const saveTheme = (themeValue) => {
|
||||
localStorage.setItem(THEME, themeValue);
|
||||
};
|
||||
|
||||
const themeLight = document.getElementById("theme-light");
|
||||
themeLight.addEventListener("input", (e) => {
|
||||
saveTheme(themeLight.value);
|
||||
});
|
||||
|
||||
const themeAuto = document.getElementById("theme-auto");
|
||||
themeAuto.addEventListener("input", (e) => {
|
||||
saveTheme(themeAuto.auto);
|
||||
});
|
||||
|
||||
const themeDark = document.getElementById("theme-dark");
|
||||
themeDark.addEventListener("input", (e) => {
|
||||
saveTheme(themeDark.value);
|
||||
});
|
||||
|
||||
var currentThemeValue = localStorage.getItem(THEME);
|
||||
switch (currentThemeValue) {
|
||||
case "light":
|
||||
themeLight.checked = true;
|
||||
break;
|
||||
case "auto":
|
||||
themeAuto.checked = true;
|
||||
break;
|
||||
case "dark":
|
||||
themeDark.checked = true;
|
||||
break;
|
||||
default:
|
||||
themeAuto.checked = true;
|
||||
}</script>
|
||||
|
||||
</head>
|
||||
@@ -1637,8 +1786,22 @@ if (window.innerWidth > 650) {
|
||||
<ol id="postlist">
|
||||
|
||||
<li class="post">
|
||||
<a class="postlink" href="/killdeer/">
|
||||
<h2 data-ha-exclude="" id="killdeer">killdeer </h2>
|
||||
<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>
|
||||
|
||||
<li class="post">
|
||||
<a class="postlink" href="/junco/">
|
||||
<h2 data-ha-exclude="" id="junco">junco </h2>
|
||||
|
||||
<ul class="postlist-tags">
|
||||
|
||||
@@ -1647,39 +1810,25 @@ if (window.innerWidth > 650) {
|
||||
<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">
|
||||
<img src="/img/junco-print.jpg" alt="A print of a junco mid-takeoff from a branch. Eir head is inked in black, body in gray, and the branch in sepia." loading="lazy" decoding="async" width="1000" height="1333">
|
||||
|
||||
</a>
|
||||
</li>
|
||||
|
||||
<li class="post">
|
||||
<a class="postlink" href="/greeting-loons/">
|
||||
<h2 data-ha-exclude="" id="greeting-loons">greeting loons </h2>
|
||||
<a class="postlink" href="/pronoun-patches/">
|
||||
<h2 data-ha-exclude="" id="pronoun-patches">pronoun patches </h2>
|
||||
|
||||
<ul class="postlist-tags">
|
||||
|
||||
<li>card</li>
|
||||
|
||||
<li>print</li>
|
||||
|
||||
<li>highlight</li>
|
||||
<li>patch</li>
|
||||
|
||||
<li>gender</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="/shirts/">
|
||||
<h2 data-ha-exclude="" id="shirts">shirts! </h2>
|
||||
|
||||
<ul class="postlist-tags">
|
||||
|
||||
<li>shirt</li>
|
||||
|
||||
</ul>
|
||||
<img src="/img/shirts.jpg" alt="A row of shirts hanging in front of a window, with a variety of hand-printed designs." loading="lazy" decoding="async" width="1000" height="750">
|
||||
<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>
|
||||
@@ -1712,9 +1861,30 @@ if (window.innerWidth > 650) {
|
||||
</a>
|
||||
</li>
|
||||
</ul>
|
||||
|
||||
<fieldset id="theme">
|
||||
<legend>color scheme</legend>
|
||||
|
||||
<input type="radio" id="theme-light" name="theme" value="light">
|
||||
<label class="theme-light" for="theme-light">
|
||||
<i class="fa-regular fa-sun" aria-hidden="true"></i>
|
||||
light
|
||||
</label>
|
||||
|
||||
<input type="radio" id="theme-auto" name="theme" value="auto">
|
||||
<label class="theme-auto" for="theme-auto">
|
||||
auto
|
||||
</label>
|
||||
|
||||
<input type="radio" id="theme-dark" name="theme" value="dark">
|
||||
<label class="theme-dark" for="theme-dark">
|
||||
dark
|
||||
<i class="fa-regular fa-moon" aria-hidden="true"></i>
|
||||
</label>
|
||||
</fieldset>
|
||||
</footer>
|
||||
|
||||
|
||||
<!-- This page `/boypussy/` was built on 2026-09-08T23:18:32.740Z -->
|
||||
<!-- This page `/boypussy/` was built on 2026-09-09T20:38:02.907Z -->
|
||||
</body>
|
||||
</html>
|
||||
|
||||
+181
-13
@@ -478,6 +478,13 @@ body:has(dialog[open]) {
|
||||
--color-grey: light-dark(var(--color-grey-dark), var(--color-grey-light));
|
||||
}
|
||||
|
||||
:root:has(#theme-light:checked) {
|
||||
color-scheme: light;
|
||||
}
|
||||
:root:has(#theme-dark:checked) {
|
||||
color-scheme: dark;
|
||||
}
|
||||
|
||||
/* Base */
|
||||
|
||||
* {
|
||||
@@ -621,7 +628,7 @@ ul, ol, dl, li {
|
||||
}
|
||||
|
||||
li {
|
||||
line-height: 1.2 5;
|
||||
line-height: 1.2;
|
||||
margin-top: .65rem;
|
||||
margin-bottom: .65rem;
|
||||
}
|
||||
@@ -960,6 +967,111 @@ footer a:focus-visible {
|
||||
outline-color: var(--color-pink);
|
||||
}
|
||||
|
||||
/* color picker */
|
||||
#theme {
|
||||
display: flex;
|
||||
justify-content: center;
|
||||
margin: .5rem auto 0;
|
||||
padding: 0 .75rem .5rem;
|
||||
width: fit-content;
|
||||
border: .125rem solid var(--color-teal);
|
||||
border-radius: 2rem;
|
||||
}
|
||||
|
||||
#theme legend {
|
||||
margin: 0 auto;
|
||||
color: var(--color-teal);
|
||||
}
|
||||
|
||||
footer label {
|
||||
cursor: pointer;
|
||||
border: .125rem solid var(--color-pink);
|
||||
padding: 0 .25rem;
|
||||
color: var(--color-pink);
|
||||
background-color: var(--color-bg); /* this stops the box shadows from showing through */
|
||||
box-shadow: .15em .15em var(--color-shadow);
|
||||
/* Click animation handling */
|
||||
position: relative;
|
||||
top: 0;
|
||||
left: 0;
|
||||
transition: top .05s ease-in, left .05s ease-in;
|
||||
}
|
||||
|
||||
footer input:checked + label {
|
||||
color: var(--color-blue);
|
||||
border-color: var(--color-blue);
|
||||
}
|
||||
|
||||
footer label i {
|
||||
color: var(--color-teal);
|
||||
}
|
||||
|
||||
footer input:checked + label i {
|
||||
color: var(--color-pink);
|
||||
}
|
||||
|
||||
@media (any-hover: hover) {
|
||||
footer label:hover,
|
||||
footer input:checked + label:hover,
|
||||
footer label:hover i,
|
||||
footer input:checked + label:hover i {
|
||||
color: var(--color-bg);
|
||||
}
|
||||
|
||||
footer label:hover {
|
||||
background-color: var(--color-pink);
|
||||
}
|
||||
|
||||
footer input:checked + label:hover {
|
||||
background-color: var(--color-teal);
|
||||
}
|
||||
}
|
||||
|
||||
footer input:focus-visible + label,
|
||||
footer input:focus-visible + label i {
|
||||
color: var(--color-bg);
|
||||
background-color: var(--color-pink);
|
||||
border-color: var(--color-pink);
|
||||
}
|
||||
|
||||
footer input:checked:focus-visible + label,
|
||||
footer input:checked:focus-visible + label i {
|
||||
color: var(--color-bg);
|
||||
background-color: var(--color-teal);
|
||||
border-color: var(--color-teal);
|
||||
}
|
||||
|
||||
footer label:active {
|
||||
top: .09em;
|
||||
left: .09em;
|
||||
box-shadow: .05em .05em var(--color-shadow);
|
||||
}
|
||||
|
||||
label.theme-light {
|
||||
border-top-left-radius: 1rem;
|
||||
border-bottom-left-radius: 1rem;
|
||||
border-right: none;
|
||||
padding-left: .35rem;
|
||||
}
|
||||
|
||||
label.theme-auto {
|
||||
}
|
||||
|
||||
label.theme-dark {
|
||||
border-top-right-radius: 1rem;
|
||||
border-bottom-right-radius: 1rem;
|
||||
border-left: none;
|
||||
padding-right: .35rem;
|
||||
}
|
||||
|
||||
footer input {
|
||||
/* To allow screen reader to still access these. */
|
||||
/* From https://lyra.horse/blog/2025/08/you-dont-need-js/ */
|
||||
opacity: 0;
|
||||
position: absolute;
|
||||
pointer-events: none;
|
||||
}
|
||||
|
||||
/* Pagination */
|
||||
.pagination,
|
||||
.pagination li {
|
||||
@@ -1222,6 +1334,8 @@ pre[class*=language-]::selection {
|
||||
}
|
||||
}</style>
|
||||
|
||||
|
||||
|
||||
<script type="module">// Thank you to https://github.com/daviddarnes/heading-anchors
|
||||
// Thank you to https://amberwilson.co.uk/blog/are-your-anchor-links-accessible/
|
||||
|
||||
@@ -1476,6 +1590,41 @@ if (window.innerWidth > 650) {
|
||||
dialog.close();
|
||||
}
|
||||
});
|
||||
}
|
||||
const THEME = "theme";
|
||||
|
||||
const saveTheme = (themeValue) => {
|
||||
localStorage.setItem(THEME, themeValue);
|
||||
};
|
||||
|
||||
const themeLight = document.getElementById("theme-light");
|
||||
themeLight.addEventListener("input", (e) => {
|
||||
saveTheme(themeLight.value);
|
||||
});
|
||||
|
||||
const themeAuto = document.getElementById("theme-auto");
|
||||
themeAuto.addEventListener("input", (e) => {
|
||||
saveTheme(themeAuto.auto);
|
||||
});
|
||||
|
||||
const themeDark = document.getElementById("theme-dark");
|
||||
themeDark.addEventListener("input", (e) => {
|
||||
saveTheme(themeDark.value);
|
||||
});
|
||||
|
||||
var currentThemeValue = localStorage.getItem(THEME);
|
||||
switch (currentThemeValue) {
|
||||
case "light":
|
||||
themeLight.checked = true;
|
||||
break;
|
||||
case "auto":
|
||||
themeAuto.checked = true;
|
||||
break;
|
||||
case "dark":
|
||||
themeDark.checked = true;
|
||||
break;
|
||||
default:
|
||||
themeAuto.checked = true;
|
||||
}</script>
|
||||
|
||||
</head>
|
||||
@@ -1610,45 +1759,43 @@ if (window.innerWidth > 650) {
|
||||
<ol id="postlist">
|
||||
|
||||
<li class="post">
|
||||
<a class="postlink" href="/snap-pouch/">
|
||||
<h2 data-ha-exclude="" id="snap-pouch">snap pouch </h2>
|
||||
<a class="postlink" href="/mousie/">
|
||||
<h2 data-ha-exclude="" id="mousie">mousie </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/mousie.jpg" alt="A cat in a sunbeam snuggles a little leather mouse-shaped cat toy." loading="lazy" decoding="async" width="1000" height="1499">
|
||||
|
||||
</a>
|
||||
</li>
|
||||
|
||||
<li class="post">
|
||||
<a class="postlink" href="/fishhook-pride-keychains/">
|
||||
<h2 data-ha-exclude="" id="fishhook-pride-keychains">fishhook pride keychains </h2>
|
||||
<a class="postlink" href="/moss-harness/">
|
||||
<h2 data-ha-exclude="" id="moss-harness">moss harness </h2>
|
||||
|
||||
<ul class="postlist-tags">
|
||||
|
||||
<li>leather</li>
|
||||
|
||||
<li>gender</li>
|
||||
|
||||
</ul>
|
||||
<img src="/img/fishhook-keychain-nonbinary.jpg" alt="a keychain with an iridescent fishhook style attachment linked via leather to an iridescent keyring. the leather is stitched with nonbinary flag colors." loading="lazy" decoding="async" width="1000" height="750">
|
||||
<img src="/img/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>
|
||||
|
||||
<li class="post">
|
||||
<a class="postlink" href="/zipper-bifold-green/">
|
||||
<h2 data-ha-exclude="" id="zipper-bifold-green">zipper bifold (green) </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/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">
|
||||
<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>
|
||||
@@ -1681,9 +1828,30 @@ if (window.innerWidth > 650) {
|
||||
</a>
|
||||
</li>
|
||||
</ul>
|
||||
|
||||
<fieldset id="theme">
|
||||
<legend>color scheme</legend>
|
||||
|
||||
<input type="radio" id="theme-light" name="theme" value="light">
|
||||
<label class="theme-light" for="theme-light">
|
||||
<i class="fa-regular fa-sun" aria-hidden="true"></i>
|
||||
light
|
||||
</label>
|
||||
|
||||
<input type="radio" id="theme-auto" name="theme" value="auto">
|
||||
<label class="theme-auto" for="theme-auto">
|
||||
auto
|
||||
</label>
|
||||
|
||||
<input type="radio" id="theme-dark" name="theme" value="dark">
|
||||
<label class="theme-dark" for="theme-dark">
|
||||
dark
|
||||
<i class="fa-regular fa-moon" aria-hidden="true"></i>
|
||||
</label>
|
||||
</fieldset>
|
||||
</footer>
|
||||
|
||||
|
||||
<!-- This page `/brookes-collar/` was built on 2026-09-08T23:18:32.744Z -->
|
||||
<!-- This page `/brookes-collar/` was built on 2026-09-09T20:38:02.914Z -->
|
||||
</body>
|
||||
</html>
|
||||
|
||||
@@ -478,6 +478,13 @@ body:has(dialog[open]) {
|
||||
--color-grey: light-dark(var(--color-grey-dark), var(--color-grey-light));
|
||||
}
|
||||
|
||||
:root:has(#theme-light:checked) {
|
||||
color-scheme: light;
|
||||
}
|
||||
:root:has(#theme-dark:checked) {
|
||||
color-scheme: dark;
|
||||
}
|
||||
|
||||
/* Base */
|
||||
|
||||
* {
|
||||
@@ -621,7 +628,7 @@ ul, ol, dl, li {
|
||||
}
|
||||
|
||||
li {
|
||||
line-height: 1.2 5;
|
||||
line-height: 1.2;
|
||||
margin-top: .65rem;
|
||||
margin-bottom: .65rem;
|
||||
}
|
||||
@@ -960,6 +967,111 @@ footer a:focus-visible {
|
||||
outline-color: var(--color-pink);
|
||||
}
|
||||
|
||||
/* color picker */
|
||||
#theme {
|
||||
display: flex;
|
||||
justify-content: center;
|
||||
margin: .5rem auto 0;
|
||||
padding: 0 .75rem .5rem;
|
||||
width: fit-content;
|
||||
border: .125rem solid var(--color-teal);
|
||||
border-radius: 2rem;
|
||||
}
|
||||
|
||||
#theme legend {
|
||||
margin: 0 auto;
|
||||
color: var(--color-teal);
|
||||
}
|
||||
|
||||
footer label {
|
||||
cursor: pointer;
|
||||
border: .125rem solid var(--color-pink);
|
||||
padding: 0 .25rem;
|
||||
color: var(--color-pink);
|
||||
background-color: var(--color-bg); /* this stops the box shadows from showing through */
|
||||
box-shadow: .15em .15em var(--color-shadow);
|
||||
/* Click animation handling */
|
||||
position: relative;
|
||||
top: 0;
|
||||
left: 0;
|
||||
transition: top .05s ease-in, left .05s ease-in;
|
||||
}
|
||||
|
||||
footer input:checked + label {
|
||||
color: var(--color-blue);
|
||||
border-color: var(--color-blue);
|
||||
}
|
||||
|
||||
footer label i {
|
||||
color: var(--color-teal);
|
||||
}
|
||||
|
||||
footer input:checked + label i {
|
||||
color: var(--color-pink);
|
||||
}
|
||||
|
||||
@media (any-hover: hover) {
|
||||
footer label:hover,
|
||||
footer input:checked + label:hover,
|
||||
footer label:hover i,
|
||||
footer input:checked + label:hover i {
|
||||
color: var(--color-bg);
|
||||
}
|
||||
|
||||
footer label:hover {
|
||||
background-color: var(--color-pink);
|
||||
}
|
||||
|
||||
footer input:checked + label:hover {
|
||||
background-color: var(--color-teal);
|
||||
}
|
||||
}
|
||||
|
||||
footer input:focus-visible + label,
|
||||
footer input:focus-visible + label i {
|
||||
color: var(--color-bg);
|
||||
background-color: var(--color-pink);
|
||||
border-color: var(--color-pink);
|
||||
}
|
||||
|
||||
footer input:checked:focus-visible + label,
|
||||
footer input:checked:focus-visible + label i {
|
||||
color: var(--color-bg);
|
||||
background-color: var(--color-teal);
|
||||
border-color: var(--color-teal);
|
||||
}
|
||||
|
||||
footer label:active {
|
||||
top: .09em;
|
||||
left: .09em;
|
||||
box-shadow: .05em .05em var(--color-shadow);
|
||||
}
|
||||
|
||||
label.theme-light {
|
||||
border-top-left-radius: 1rem;
|
||||
border-bottom-left-radius: 1rem;
|
||||
border-right: none;
|
||||
padding-left: .35rem;
|
||||
}
|
||||
|
||||
label.theme-auto {
|
||||
}
|
||||
|
||||
label.theme-dark {
|
||||
border-top-right-radius: 1rem;
|
||||
border-bottom-right-radius: 1rem;
|
||||
border-left: none;
|
||||
padding-right: .35rem;
|
||||
}
|
||||
|
||||
footer input {
|
||||
/* To allow screen reader to still access these. */
|
||||
/* From https://lyra.horse/blog/2025/08/you-dont-need-js/ */
|
||||
opacity: 0;
|
||||
position: absolute;
|
||||
pointer-events: none;
|
||||
}
|
||||
|
||||
/* Pagination */
|
||||
.pagination,
|
||||
.pagination li {
|
||||
@@ -1222,6 +1334,8 @@ pre[class*=language-]::selection {
|
||||
}
|
||||
}</style>
|
||||
|
||||
|
||||
|
||||
<script type="module">// Thank you to https://github.com/daviddarnes/heading-anchors
|
||||
// Thank you to https://amberwilson.co.uk/blog/are-your-anchor-links-accessible/
|
||||
|
||||
@@ -1476,6 +1590,41 @@ if (window.innerWidth > 650) {
|
||||
dialog.close();
|
||||
}
|
||||
});
|
||||
}
|
||||
const THEME = "theme";
|
||||
|
||||
const saveTheme = (themeValue) => {
|
||||
localStorage.setItem(THEME, themeValue);
|
||||
};
|
||||
|
||||
const themeLight = document.getElementById("theme-light");
|
||||
themeLight.addEventListener("input", (e) => {
|
||||
saveTheme(themeLight.value);
|
||||
});
|
||||
|
||||
const themeAuto = document.getElementById("theme-auto");
|
||||
themeAuto.addEventListener("input", (e) => {
|
||||
saveTheme(themeAuto.auto);
|
||||
});
|
||||
|
||||
const themeDark = document.getElementById("theme-dark");
|
||||
themeDark.addEventListener("input", (e) => {
|
||||
saveTheme(themeDark.value);
|
||||
});
|
||||
|
||||
var currentThemeValue = localStorage.getItem(THEME);
|
||||
switch (currentThemeValue) {
|
||||
case "light":
|
||||
themeLight.checked = true;
|
||||
break;
|
||||
case "auto":
|
||||
themeAuto.checked = true;
|
||||
break;
|
||||
case "dark":
|
||||
themeDark.checked = true;
|
||||
break;
|
||||
default:
|
||||
themeAuto.checked = true;
|
||||
}</script>
|
||||
|
||||
</head>
|
||||
@@ -1610,43 +1759,43 @@ if (window.innerWidth > 650) {
|
||||
<ol id="postlist">
|
||||
|
||||
<li class="post">
|
||||
<a class="postlink" href="/foldy-wallet/">
|
||||
<h2 data-ha-exclude="" id="foldy-wallet">foldy wallet </h2>
|
||||
<a class="postlink" href="/brookes-suspenders/">
|
||||
<h2 data-ha-exclude="" id="brookes-suspenders">brooke's suspenders </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/brooke-suspenders.jpg" alt="a two image collage showing the front and back of a person, neck to waist. she's wearing leather suspenders with a button attachment, buckles for adjustment, and a stitched diamond where the straps cross in the back." loading="lazy" decoding="async" width="1000" height="750">
|
||||
|
||||
</a>
|
||||
</li>
|
||||
|
||||
<li class="post">
|
||||
<a class="postlink" href="/moss-harness/">
|
||||
<h2 data-ha-exclude="" id="moss-harness">moss harness </h2>
|
||||
<a class="postlink" href="/makers-mark-keychain/">
|
||||
<h2 data-ha-exclude="" id="makers-mark-keychain">maker's mark keychain </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/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="/leather-keychains/">
|
||||
<h2 data-ha-exclude="" id="leather-keychains">leather keychains </h2>
|
||||
<a class="postlink" href="/zipper-bifold/">
|
||||
<h2 data-ha-exclude="" id="zipper-bifold">zipper bifold </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 'MOM' or 'EGG'." loading="lazy" decoding="async" width="1000" height="1333">
|
||||
<img src="/img/zipper-bifold.jpg" alt="A collage showing a hand-stitched leather bifold with a zippered coin pocket on one exterior side." loading="lazy" decoding="async" width="1000" height="1777">
|
||||
|
||||
</a>
|
||||
</li>
|
||||
@@ -1679,9 +1828,30 @@ if (window.innerWidth > 650) {
|
||||
</a>
|
||||
</li>
|
||||
</ul>
|
||||
|
||||
<fieldset id="theme">
|
||||
<legend>color scheme</legend>
|
||||
|
||||
<input type="radio" id="theme-light" name="theme" value="light">
|
||||
<label class="theme-light" for="theme-light">
|
||||
<i class="fa-regular fa-sun" aria-hidden="true"></i>
|
||||
light
|
||||
</label>
|
||||
|
||||
<input type="radio" id="theme-auto" name="theme" value="auto">
|
||||
<label class="theme-auto" for="theme-auto">
|
||||
auto
|
||||
</label>
|
||||
|
||||
<input type="radio" id="theme-dark" name="theme" value="dark">
|
||||
<label class="theme-dark" for="theme-dark">
|
||||
dark
|
||||
<i class="fa-regular fa-moon" aria-hidden="true"></i>
|
||||
</label>
|
||||
</fieldset>
|
||||
</footer>
|
||||
|
||||
|
||||
<!-- This page `/brookes-cuff-bracelets/` was built on 2026-09-08T23:18:32.760Z -->
|
||||
<!-- This page `/brookes-cuff-bracelets/` was built on 2026-09-09T20:38:02.894Z -->
|
||||
</body>
|
||||
</html>
|
||||
|
||||
+205
-37
@@ -478,6 +478,13 @@ body:has(dialog[open]) {
|
||||
--color-grey: light-dark(var(--color-grey-dark), var(--color-grey-light));
|
||||
}
|
||||
|
||||
:root:has(#theme-light:checked) {
|
||||
color-scheme: light;
|
||||
}
|
||||
:root:has(#theme-dark:checked) {
|
||||
color-scheme: dark;
|
||||
}
|
||||
|
||||
/* Base */
|
||||
|
||||
* {
|
||||
@@ -621,7 +628,7 @@ ul, ol, dl, li {
|
||||
}
|
||||
|
||||
li {
|
||||
line-height: 1.2 5;
|
||||
line-height: 1.2;
|
||||
margin-top: .65rem;
|
||||
margin-bottom: .65rem;
|
||||
}
|
||||
@@ -960,6 +967,111 @@ footer a:focus-visible {
|
||||
outline-color: var(--color-pink);
|
||||
}
|
||||
|
||||
/* color picker */
|
||||
#theme {
|
||||
display: flex;
|
||||
justify-content: center;
|
||||
margin: .5rem auto 0;
|
||||
padding: 0 .75rem .5rem;
|
||||
width: fit-content;
|
||||
border: .125rem solid var(--color-teal);
|
||||
border-radius: 2rem;
|
||||
}
|
||||
|
||||
#theme legend {
|
||||
margin: 0 auto;
|
||||
color: var(--color-teal);
|
||||
}
|
||||
|
||||
footer label {
|
||||
cursor: pointer;
|
||||
border: .125rem solid var(--color-pink);
|
||||
padding: 0 .25rem;
|
||||
color: var(--color-pink);
|
||||
background-color: var(--color-bg); /* this stops the box shadows from showing through */
|
||||
box-shadow: .15em .15em var(--color-shadow);
|
||||
/* Click animation handling */
|
||||
position: relative;
|
||||
top: 0;
|
||||
left: 0;
|
||||
transition: top .05s ease-in, left .05s ease-in;
|
||||
}
|
||||
|
||||
footer input:checked + label {
|
||||
color: var(--color-blue);
|
||||
border-color: var(--color-blue);
|
||||
}
|
||||
|
||||
footer label i {
|
||||
color: var(--color-teal);
|
||||
}
|
||||
|
||||
footer input:checked + label i {
|
||||
color: var(--color-pink);
|
||||
}
|
||||
|
||||
@media (any-hover: hover) {
|
||||
footer label:hover,
|
||||
footer input:checked + label:hover,
|
||||
footer label:hover i,
|
||||
footer input:checked + label:hover i {
|
||||
color: var(--color-bg);
|
||||
}
|
||||
|
||||
footer label:hover {
|
||||
background-color: var(--color-pink);
|
||||
}
|
||||
|
||||
footer input:checked + label:hover {
|
||||
background-color: var(--color-teal);
|
||||
}
|
||||
}
|
||||
|
||||
footer input:focus-visible + label,
|
||||
footer input:focus-visible + label i {
|
||||
color: var(--color-bg);
|
||||
background-color: var(--color-pink);
|
||||
border-color: var(--color-pink);
|
||||
}
|
||||
|
||||
footer input:checked:focus-visible + label,
|
||||
footer input:checked:focus-visible + label i {
|
||||
color: var(--color-bg);
|
||||
background-color: var(--color-teal);
|
||||
border-color: var(--color-teal);
|
||||
}
|
||||
|
||||
footer label:active {
|
||||
top: .09em;
|
||||
left: .09em;
|
||||
box-shadow: .05em .05em var(--color-shadow);
|
||||
}
|
||||
|
||||
label.theme-light {
|
||||
border-top-left-radius: 1rem;
|
||||
border-bottom-left-radius: 1rem;
|
||||
border-right: none;
|
||||
padding-left: .35rem;
|
||||
}
|
||||
|
||||
label.theme-auto {
|
||||
}
|
||||
|
||||
label.theme-dark {
|
||||
border-top-right-radius: 1rem;
|
||||
border-bottom-right-radius: 1rem;
|
||||
border-left: none;
|
||||
padding-right: .35rem;
|
||||
}
|
||||
|
||||
footer input {
|
||||
/* To allow screen reader to still access these. */
|
||||
/* From https://lyra.horse/blog/2025/08/you-dont-need-js/ */
|
||||
opacity: 0;
|
||||
position: absolute;
|
||||
pointer-events: none;
|
||||
}
|
||||
|
||||
/* Pagination */
|
||||
.pagination,
|
||||
.pagination li {
|
||||
@@ -1222,6 +1334,8 @@ pre[class*=language-]::selection {
|
||||
}
|
||||
}</style>
|
||||
|
||||
|
||||
|
||||
<script type="module">// Thank you to https://github.com/daviddarnes/heading-anchors
|
||||
// Thank you to https://amberwilson.co.uk/blog/are-your-anchor-links-accessible/
|
||||
|
||||
@@ -1476,6 +1590,41 @@ if (window.innerWidth > 650) {
|
||||
dialog.close();
|
||||
}
|
||||
});
|
||||
}
|
||||
const THEME = "theme";
|
||||
|
||||
const saveTheme = (themeValue) => {
|
||||
localStorage.setItem(THEME, themeValue);
|
||||
};
|
||||
|
||||
const themeLight = document.getElementById("theme-light");
|
||||
themeLight.addEventListener("input", (e) => {
|
||||
saveTheme(themeLight.value);
|
||||
});
|
||||
|
||||
const themeAuto = document.getElementById("theme-auto");
|
||||
themeAuto.addEventListener("input", (e) => {
|
||||
saveTheme(themeAuto.auto);
|
||||
});
|
||||
|
||||
const themeDark = document.getElementById("theme-dark");
|
||||
themeDark.addEventListener("input", (e) => {
|
||||
saveTheme(themeDark.value);
|
||||
});
|
||||
|
||||
var currentThemeValue = localStorage.getItem(THEME);
|
||||
switch (currentThemeValue) {
|
||||
case "light":
|
||||
themeLight.checked = true;
|
||||
break;
|
||||
case "auto":
|
||||
themeAuto.checked = true;
|
||||
break;
|
||||
case "dark":
|
||||
themeDark.checked = true;
|
||||
break;
|
||||
default:
|
||||
themeAuto.checked = true;
|
||||
}</script>
|
||||
|
||||
</head>
|
||||
@@ -1625,47 +1774,45 @@ if (window.innerWidth > 650) {
|
||||
<ol id="postlist">
|
||||
|
||||
<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="/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/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="/blue-and-brown-leather-journal/">
|
||||
<h2 data-ha-exclude="" id="blue-and-brown-leather-journal">blue and brown leather journal </h2>
|
||||
<a class="postlink" href="/orange-green-journal/">
|
||||
<h2 data-ha-exclude="" id="orange-green-journal">orange green journal </h2>
|
||||
|
||||
<ul class="postlist-tags">
|
||||
|
||||
<li>book</li>
|
||||
|
||||
</ul>
|
||||
<img src="/img/blue-brown-leather-journal.jpg" alt="A three panel collage showcasing a blue and brown leather-covered journal." loading="lazy" decoding="async" width="1000" height="1776">
|
||||
<img src="/img/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="/lined-notebook/">
|
||||
<h2 data-ha-exclude="" id="lined-notebook">lined notebook </h2>
|
||||
|
||||
<ul class="postlist-tags">
|
||||
|
||||
<li>book</li>
|
||||
|
||||
</ul>
|
||||
<img src="/img/lined-notebook.jpg" alt="A three panel collage showing a the endpapers, cover, and pages of a small hardbound notebook." loading="lazy" decoding="async" width="1000" height="1776">
|
||||
|
||||
</a>
|
||||
</li>
|
||||
|
||||
<li class="post">
|
||||
<a class="postlink" href="/black-and-red-journal/">
|
||||
<h2 data-ha-exclude="" id="black-and-red-journal">black and red journal </h2>
|
||||
|
||||
<ul class="postlist-tags">
|
||||
|
||||
<li>book</li>
|
||||
|
||||
<li>leather</li>
|
||||
|
||||
</ul>
|
||||
<img src="/img/black-red-journal.jpg" alt="3 image collage showing a leather-bound journal. The cover is black, with long red vertical stitches along the spine and a red leather strap for a closure. On the back in one lower corner is stamped LEE CAT ART" loading="lazy" decoding="async" width="1000" height="1000">
|
||||
|
||||
</a>
|
||||
</li>
|
||||
@@ -1698,9 +1845,30 @@ if (window.innerWidth > 650) {
|
||||
</a>
|
||||
</li>
|
||||
</ul>
|
||||
|
||||
<fieldset id="theme">
|
||||
<legend>color scheme</legend>
|
||||
|
||||
<input type="radio" id="theme-light" name="theme" value="light">
|
||||
<label class="theme-light" for="theme-light">
|
||||
<i class="fa-regular fa-sun" aria-hidden="true"></i>
|
||||
light
|
||||
</label>
|
||||
|
||||
<input type="radio" id="theme-auto" name="theme" value="auto">
|
||||
<label class="theme-auto" for="theme-auto">
|
||||
auto
|
||||
</label>
|
||||
|
||||
<input type="radio" id="theme-dark" name="theme" value="dark">
|
||||
<label class="theme-dark" for="theme-dark">
|
||||
dark
|
||||
<i class="fa-regular fa-moon" aria-hidden="true"></i>
|
||||
</label>
|
||||
</fieldset>
|
||||
</footer>
|
||||
|
||||
|
||||
<!-- This page `/brookes-notebook/` was built on 2026-09-08T23:18:32.732Z -->
|
||||
<!-- This page `/brookes-notebook/` was built on 2026-09-09T20:38:02.893Z -->
|
||||
</body>
|
||||
</html>
|
||||
|
||||
+181
-11
@@ -478,6 +478,13 @@ body:has(dialog[open]) {
|
||||
--color-grey: light-dark(var(--color-grey-dark), var(--color-grey-light));
|
||||
}
|
||||
|
||||
:root:has(#theme-light:checked) {
|
||||
color-scheme: light;
|
||||
}
|
||||
:root:has(#theme-dark:checked) {
|
||||
color-scheme: dark;
|
||||
}
|
||||
|
||||
/* Base */
|
||||
|
||||
* {
|
||||
@@ -621,7 +628,7 @@ ul, ol, dl, li {
|
||||
}
|
||||
|
||||
li {
|
||||
line-height: 1.2 5;
|
||||
line-height: 1.2;
|
||||
margin-top: .65rem;
|
||||
margin-bottom: .65rem;
|
||||
}
|
||||
@@ -960,6 +967,111 @@ footer a:focus-visible {
|
||||
outline-color: var(--color-pink);
|
||||
}
|
||||
|
||||
/* color picker */
|
||||
#theme {
|
||||
display: flex;
|
||||
justify-content: center;
|
||||
margin: .5rem auto 0;
|
||||
padding: 0 .75rem .5rem;
|
||||
width: fit-content;
|
||||
border: .125rem solid var(--color-teal);
|
||||
border-radius: 2rem;
|
||||
}
|
||||
|
||||
#theme legend {
|
||||
margin: 0 auto;
|
||||
color: var(--color-teal);
|
||||
}
|
||||
|
||||
footer label {
|
||||
cursor: pointer;
|
||||
border: .125rem solid var(--color-pink);
|
||||
padding: 0 .25rem;
|
||||
color: var(--color-pink);
|
||||
background-color: var(--color-bg); /* this stops the box shadows from showing through */
|
||||
box-shadow: .15em .15em var(--color-shadow);
|
||||
/* Click animation handling */
|
||||
position: relative;
|
||||
top: 0;
|
||||
left: 0;
|
||||
transition: top .05s ease-in, left .05s ease-in;
|
||||
}
|
||||
|
||||
footer input:checked + label {
|
||||
color: var(--color-blue);
|
||||
border-color: var(--color-blue);
|
||||
}
|
||||
|
||||
footer label i {
|
||||
color: var(--color-teal);
|
||||
}
|
||||
|
||||
footer input:checked + label i {
|
||||
color: var(--color-pink);
|
||||
}
|
||||
|
||||
@media (any-hover: hover) {
|
||||
footer label:hover,
|
||||
footer input:checked + label:hover,
|
||||
footer label:hover i,
|
||||
footer input:checked + label:hover i {
|
||||
color: var(--color-bg);
|
||||
}
|
||||
|
||||
footer label:hover {
|
||||
background-color: var(--color-pink);
|
||||
}
|
||||
|
||||
footer input:checked + label:hover {
|
||||
background-color: var(--color-teal);
|
||||
}
|
||||
}
|
||||
|
||||
footer input:focus-visible + label,
|
||||
footer input:focus-visible + label i {
|
||||
color: var(--color-bg);
|
||||
background-color: var(--color-pink);
|
||||
border-color: var(--color-pink);
|
||||
}
|
||||
|
||||
footer input:checked:focus-visible + label,
|
||||
footer input:checked:focus-visible + label i {
|
||||
color: var(--color-bg);
|
||||
background-color: var(--color-teal);
|
||||
border-color: var(--color-teal);
|
||||
}
|
||||
|
||||
footer label:active {
|
||||
top: .09em;
|
||||
left: .09em;
|
||||
box-shadow: .05em .05em var(--color-shadow);
|
||||
}
|
||||
|
||||
label.theme-light {
|
||||
border-top-left-radius: 1rem;
|
||||
border-bottom-left-radius: 1rem;
|
||||
border-right: none;
|
||||
padding-left: .35rem;
|
||||
}
|
||||
|
||||
label.theme-auto {
|
||||
}
|
||||
|
||||
label.theme-dark {
|
||||
border-top-right-radius: 1rem;
|
||||
border-bottom-right-radius: 1rem;
|
||||
border-left: none;
|
||||
padding-right: .35rem;
|
||||
}
|
||||
|
||||
footer input {
|
||||
/* To allow screen reader to still access these. */
|
||||
/* From https://lyra.horse/blog/2025/08/you-dont-need-js/ */
|
||||
opacity: 0;
|
||||
position: absolute;
|
||||
pointer-events: none;
|
||||
}
|
||||
|
||||
/* Pagination */
|
||||
.pagination,
|
||||
.pagination li {
|
||||
@@ -1222,6 +1334,8 @@ pre[class*=language-]::selection {
|
||||
}
|
||||
}</style>
|
||||
|
||||
|
||||
|
||||
<script type="module">// Thank you to https://github.com/daviddarnes/heading-anchors
|
||||
// Thank you to https://amberwilson.co.uk/blog/are-your-anchor-links-accessible/
|
||||
|
||||
@@ -1476,6 +1590,41 @@ if (window.innerWidth > 650) {
|
||||
dialog.close();
|
||||
}
|
||||
});
|
||||
}
|
||||
const THEME = "theme";
|
||||
|
||||
const saveTheme = (themeValue) => {
|
||||
localStorage.setItem(THEME, themeValue);
|
||||
};
|
||||
|
||||
const themeLight = document.getElementById("theme-light");
|
||||
themeLight.addEventListener("input", (e) => {
|
||||
saveTheme(themeLight.value);
|
||||
});
|
||||
|
||||
const themeAuto = document.getElementById("theme-auto");
|
||||
themeAuto.addEventListener("input", (e) => {
|
||||
saveTheme(themeAuto.auto);
|
||||
});
|
||||
|
||||
const themeDark = document.getElementById("theme-dark");
|
||||
themeDark.addEventListener("input", (e) => {
|
||||
saveTheme(themeDark.value);
|
||||
});
|
||||
|
||||
var currentThemeValue = localStorage.getItem(THEME);
|
||||
switch (currentThemeValue) {
|
||||
case "light":
|
||||
themeLight.checked = true;
|
||||
break;
|
||||
case "auto":
|
||||
themeAuto.checked = true;
|
||||
break;
|
||||
case "dark":
|
||||
themeDark.checked = true;
|
||||
break;
|
||||
default:
|
||||
themeAuto.checked = true;
|
||||
}</script>
|
||||
|
||||
</head>
|
||||
@@ -1617,8 +1766,8 @@ if (window.innerWidth > 650) {
|
||||
<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="/textures-unite/">
|
||||
<h2 data-ha-exclude="" id="textures-unite">textures unite </h2>
|
||||
|
||||
<ul class="postlist-tags">
|
||||
|
||||
@@ -1627,35 +1776,35 @@ if (window.innerWidth > 650) {
|
||||
<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/textures-unite.jpg" alt="a largely unseen person holds up an expansive knitted shawl, built in 6 sections of different textures and colors. in the background, trees and dappled sunlight." loading="lazy" decoding="async" width="1000" height="1334">
|
||||
|
||||
</a>
|
||||
</li>
|
||||
|
||||
<li class="post">
|
||||
<a class="postlink" href="/pink-socks/">
|
||||
<h2 data-ha-exclude="" id="pink-socks">pink socks </h2>
|
||||
<a class="postlink" href="/acadia-mitts/">
|
||||
<h2 data-ha-exclude="" id="acadia-mitts">acadia mitts </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/acadia-mitts.jpg" alt="a hand wearing a knitted fingerless mitten. it's knit in a slubby, almost tweedy yarn, with the body being blue grey stockinette and the cuffs and tips a vibrant green rib." loading="lazy" decoding="async" width="1000" height="1000">
|
||||
|
||||
</a>
|
||||
</li>
|
||||
|
||||
<li class="post">
|
||||
<a class="postlink" href="/brookes-socks/">
|
||||
<h2 data-ha-exclude="" id="brookes-socks">brooke's socks </h2>
|
||||
<a class="postlink" href="/knit-shrimp/">
|
||||
<h2 data-ha-exclude="" id="knit-shrimp">knit shrimp </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/knit-shrimp.jpg" alt="Four knitted shrimp in various shades of pink. They are all somewhere around hand-sized, and have little yarn antennae and leggies." loading="lazy" decoding="async" width="1000" height="750">
|
||||
|
||||
</a>
|
||||
</li>
|
||||
@@ -1688,9 +1837,30 @@ if (window.innerWidth > 650) {
|
||||
</a>
|
||||
</li>
|
||||
</ul>
|
||||
|
||||
<fieldset id="theme">
|
||||
<legend>color scheme</legend>
|
||||
|
||||
<input type="radio" id="theme-light" name="theme" value="light">
|
||||
<label class="theme-light" for="theme-light">
|
||||
<i class="fa-regular fa-sun" aria-hidden="true"></i>
|
||||
light
|
||||
</label>
|
||||
|
||||
<input type="radio" id="theme-auto" name="theme" value="auto">
|
||||
<label class="theme-auto" for="theme-auto">
|
||||
auto
|
||||
</label>
|
||||
|
||||
<input type="radio" id="theme-dark" name="theme" value="dark">
|
||||
<label class="theme-dark" for="theme-dark">
|
||||
dark
|
||||
<i class="fa-regular fa-moon" aria-hidden="true"></i>
|
||||
</label>
|
||||
</fieldset>
|
||||
</footer>
|
||||
|
||||
|
||||
<!-- This page `/brookes-scarf/` was built on 2026-09-08T23:18:32.749Z -->
|
||||
<!-- This page `/brookes-scarf/` was built on 2026-09-09T20:38:02.935Z -->
|
||||
</body>
|
||||
</html>
|
||||
|
||||
+194
-22
@@ -478,6 +478,13 @@ body:has(dialog[open]) {
|
||||
--color-grey: light-dark(var(--color-grey-dark), var(--color-grey-light));
|
||||
}
|
||||
|
||||
:root:has(#theme-light:checked) {
|
||||
color-scheme: light;
|
||||
}
|
||||
:root:has(#theme-dark:checked) {
|
||||
color-scheme: dark;
|
||||
}
|
||||
|
||||
/* Base */
|
||||
|
||||
* {
|
||||
@@ -621,7 +628,7 @@ ul, ol, dl, li {
|
||||
}
|
||||
|
||||
li {
|
||||
line-height: 1.2 5;
|
||||
line-height: 1.2;
|
||||
margin-top: .65rem;
|
||||
margin-bottom: .65rem;
|
||||
}
|
||||
@@ -960,6 +967,111 @@ footer a:focus-visible {
|
||||
outline-color: var(--color-pink);
|
||||
}
|
||||
|
||||
/* color picker */
|
||||
#theme {
|
||||
display: flex;
|
||||
justify-content: center;
|
||||
margin: .5rem auto 0;
|
||||
padding: 0 .75rem .5rem;
|
||||
width: fit-content;
|
||||
border: .125rem solid var(--color-teal);
|
||||
border-radius: 2rem;
|
||||
}
|
||||
|
||||
#theme legend {
|
||||
margin: 0 auto;
|
||||
color: var(--color-teal);
|
||||
}
|
||||
|
||||
footer label {
|
||||
cursor: pointer;
|
||||
border: .125rem solid var(--color-pink);
|
||||
padding: 0 .25rem;
|
||||
color: var(--color-pink);
|
||||
background-color: var(--color-bg); /* this stops the box shadows from showing through */
|
||||
box-shadow: .15em .15em var(--color-shadow);
|
||||
/* Click animation handling */
|
||||
position: relative;
|
||||
top: 0;
|
||||
left: 0;
|
||||
transition: top .05s ease-in, left .05s ease-in;
|
||||
}
|
||||
|
||||
footer input:checked + label {
|
||||
color: var(--color-blue);
|
||||
border-color: var(--color-blue);
|
||||
}
|
||||
|
||||
footer label i {
|
||||
color: var(--color-teal);
|
||||
}
|
||||
|
||||
footer input:checked + label i {
|
||||
color: var(--color-pink);
|
||||
}
|
||||
|
||||
@media (any-hover: hover) {
|
||||
footer label:hover,
|
||||
footer input:checked + label:hover,
|
||||
footer label:hover i,
|
||||
footer input:checked + label:hover i {
|
||||
color: var(--color-bg);
|
||||
}
|
||||
|
||||
footer label:hover {
|
||||
background-color: var(--color-pink);
|
||||
}
|
||||
|
||||
footer input:checked + label:hover {
|
||||
background-color: var(--color-teal);
|
||||
}
|
||||
}
|
||||
|
||||
footer input:focus-visible + label,
|
||||
footer input:focus-visible + label i {
|
||||
color: var(--color-bg);
|
||||
background-color: var(--color-pink);
|
||||
border-color: var(--color-pink);
|
||||
}
|
||||
|
||||
footer input:checked:focus-visible + label,
|
||||
footer input:checked:focus-visible + label i {
|
||||
color: var(--color-bg);
|
||||
background-color: var(--color-teal);
|
||||
border-color: var(--color-teal);
|
||||
}
|
||||
|
||||
footer label:active {
|
||||
top: .09em;
|
||||
left: .09em;
|
||||
box-shadow: .05em .05em var(--color-shadow);
|
||||
}
|
||||
|
||||
label.theme-light {
|
||||
border-top-left-radius: 1rem;
|
||||
border-bottom-left-radius: 1rem;
|
||||
border-right: none;
|
||||
padding-left: .35rem;
|
||||
}
|
||||
|
||||
label.theme-auto {
|
||||
}
|
||||
|
||||
label.theme-dark {
|
||||
border-top-right-radius: 1rem;
|
||||
border-bottom-right-radius: 1rem;
|
||||
border-left: none;
|
||||
padding-right: .35rem;
|
||||
}
|
||||
|
||||
footer input {
|
||||
/* To allow screen reader to still access these. */
|
||||
/* From https://lyra.horse/blog/2025/08/you-dont-need-js/ */
|
||||
opacity: 0;
|
||||
position: absolute;
|
||||
pointer-events: none;
|
||||
}
|
||||
|
||||
/* Pagination */
|
||||
.pagination,
|
||||
.pagination li {
|
||||
@@ -1222,6 +1334,8 @@ pre[class*=language-]::selection {
|
||||
}
|
||||
}</style>
|
||||
|
||||
|
||||
|
||||
<script type="module">// Thank you to https://github.com/daviddarnes/heading-anchors
|
||||
// Thank you to https://amberwilson.co.uk/blog/are-your-anchor-links-accessible/
|
||||
|
||||
@@ -1476,6 +1590,41 @@ if (window.innerWidth > 650) {
|
||||
dialog.close();
|
||||
}
|
||||
});
|
||||
}
|
||||
const THEME = "theme";
|
||||
|
||||
const saveTheme = (themeValue) => {
|
||||
localStorage.setItem(THEME, themeValue);
|
||||
};
|
||||
|
||||
const themeLight = document.getElementById("theme-light");
|
||||
themeLight.addEventListener("input", (e) => {
|
||||
saveTheme(themeLight.value);
|
||||
});
|
||||
|
||||
const themeAuto = document.getElementById("theme-auto");
|
||||
themeAuto.addEventListener("input", (e) => {
|
||||
saveTheme(themeAuto.auto);
|
||||
});
|
||||
|
||||
const themeDark = document.getElementById("theme-dark");
|
||||
themeDark.addEventListener("input", (e) => {
|
||||
saveTheme(themeDark.value);
|
||||
});
|
||||
|
||||
var currentThemeValue = localStorage.getItem(THEME);
|
||||
switch (currentThemeValue) {
|
||||
case "light":
|
||||
themeLight.checked = true;
|
||||
break;
|
||||
case "auto":
|
||||
themeAuto.checked = true;
|
||||
break;
|
||||
case "dark":
|
||||
themeDark.checked = true;
|
||||
break;
|
||||
default:
|
||||
themeAuto.checked = true;
|
||||
}</script>
|
||||
|
||||
</head>
|
||||
@@ -1610,36 +1759,22 @@ if (window.innerWidth > 650) {
|
||||
<ol id="postlist">
|
||||
|
||||
<li class="post">
|
||||
<a class="postlink" href="/knit-shrimp/">
|
||||
<h2 data-ha-exclude="" id="knit-shrimp">knit shrimp </h2>
|
||||
<a class="postlink" href="/brookes-scarf/">
|
||||
<h2 data-ha-exclude="" id="brookes-scarf">brooke's scarf </h2>
|
||||
|
||||
<ul class="postlist-tags">
|
||||
|
||||
<li>knit</li>
|
||||
|
||||
</ul>
|
||||
<img src="/img/knit-shrimp.jpg" alt="Four knitted shrimp in various shades of pink. They are all somewhere around hand-sized, and have little yarn antennae and leggies." loading="lazy" decoding="async" width="1000" height="750">
|
||||
<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">
|
||||
|
||||
</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'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="/textures-unite/">
|
||||
<h2 data-ha-exclude="" id="textures-unite">textures unite </h2>
|
||||
<a class="postlink" href="/butch-hands-pattern/">
|
||||
<h2 data-ha-exclude="" id="butch-hands-pattern">butch hands pattern </h2>
|
||||
|
||||
<ul class="postlist-tags">
|
||||
|
||||
@@ -1648,7 +1783,23 @@ if (window.innerWidth > 650) {
|
||||
<li>highlight</li>
|
||||
|
||||
</ul>
|
||||
<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">
|
||||
<img src="/img/butch-hands.jpg" alt="Hands wearing a pair of pink and grey gloves with convertable mitten tops." loading="lazy" decoding="async" width="1000" height="750">
|
||||
|
||||
</a>
|
||||
</li>
|
||||
|
||||
<li class="post">
|
||||
<a class="postlink" href="/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>
|
||||
@@ -1681,9 +1832,30 @@ if (window.innerWidth > 650) {
|
||||
</a>
|
||||
</li>
|
||||
</ul>
|
||||
|
||||
<fieldset id="theme">
|
||||
<legend>color scheme</legend>
|
||||
|
||||
<input type="radio" id="theme-light" name="theme" value="light">
|
||||
<label class="theme-light" for="theme-light">
|
||||
<i class="fa-regular fa-sun" aria-hidden="true"></i>
|
||||
light
|
||||
</label>
|
||||
|
||||
<input type="radio" id="theme-auto" name="theme" value="auto">
|
||||
<label class="theme-auto" for="theme-auto">
|
||||
auto
|
||||
</label>
|
||||
|
||||
<input type="radio" id="theme-dark" name="theme" value="dark">
|
||||
<label class="theme-dark" for="theme-dark">
|
||||
dark
|
||||
<i class="fa-regular fa-moon" aria-hidden="true"></i>
|
||||
</label>
|
||||
</fieldset>
|
||||
</footer>
|
||||
|
||||
|
||||
<!-- This page `/brookes-socks/` was built on 2026-09-08T23:18:32.732Z -->
|
||||
<!-- This page `/brookes-socks/` was built on 2026-09-09T20:38:02.892Z -->
|
||||
</body>
|
||||
</html>
|
||||
|
||||
+183
-13
@@ -478,6 +478,13 @@ body:has(dialog[open]) {
|
||||
--color-grey: light-dark(var(--color-grey-dark), var(--color-grey-light));
|
||||
}
|
||||
|
||||
:root:has(#theme-light:checked) {
|
||||
color-scheme: light;
|
||||
}
|
||||
:root:has(#theme-dark:checked) {
|
||||
color-scheme: dark;
|
||||
}
|
||||
|
||||
/* Base */
|
||||
|
||||
* {
|
||||
@@ -621,7 +628,7 @@ ul, ol, dl, li {
|
||||
}
|
||||
|
||||
li {
|
||||
line-height: 1.2 5;
|
||||
line-height: 1.2;
|
||||
margin-top: .65rem;
|
||||
margin-bottom: .65rem;
|
||||
}
|
||||
@@ -960,6 +967,111 @@ footer a:focus-visible {
|
||||
outline-color: var(--color-pink);
|
||||
}
|
||||
|
||||
/* color picker */
|
||||
#theme {
|
||||
display: flex;
|
||||
justify-content: center;
|
||||
margin: .5rem auto 0;
|
||||
padding: 0 .75rem .5rem;
|
||||
width: fit-content;
|
||||
border: .125rem solid var(--color-teal);
|
||||
border-radius: 2rem;
|
||||
}
|
||||
|
||||
#theme legend {
|
||||
margin: 0 auto;
|
||||
color: var(--color-teal);
|
||||
}
|
||||
|
||||
footer label {
|
||||
cursor: pointer;
|
||||
border: .125rem solid var(--color-pink);
|
||||
padding: 0 .25rem;
|
||||
color: var(--color-pink);
|
||||
background-color: var(--color-bg); /* this stops the box shadows from showing through */
|
||||
box-shadow: .15em .15em var(--color-shadow);
|
||||
/* Click animation handling */
|
||||
position: relative;
|
||||
top: 0;
|
||||
left: 0;
|
||||
transition: top .05s ease-in, left .05s ease-in;
|
||||
}
|
||||
|
||||
footer input:checked + label {
|
||||
color: var(--color-blue);
|
||||
border-color: var(--color-blue);
|
||||
}
|
||||
|
||||
footer label i {
|
||||
color: var(--color-teal);
|
||||
}
|
||||
|
||||
footer input:checked + label i {
|
||||
color: var(--color-pink);
|
||||
}
|
||||
|
||||
@media (any-hover: hover) {
|
||||
footer label:hover,
|
||||
footer input:checked + label:hover,
|
||||
footer label:hover i,
|
||||
footer input:checked + label:hover i {
|
||||
color: var(--color-bg);
|
||||
}
|
||||
|
||||
footer label:hover {
|
||||
background-color: var(--color-pink);
|
||||
}
|
||||
|
||||
footer input:checked + label:hover {
|
||||
background-color: var(--color-teal);
|
||||
}
|
||||
}
|
||||
|
||||
footer input:focus-visible + label,
|
||||
footer input:focus-visible + label i {
|
||||
color: var(--color-bg);
|
||||
background-color: var(--color-pink);
|
||||
border-color: var(--color-pink);
|
||||
}
|
||||
|
||||
footer input:checked:focus-visible + label,
|
||||
footer input:checked:focus-visible + label i {
|
||||
color: var(--color-bg);
|
||||
background-color: var(--color-teal);
|
||||
border-color: var(--color-teal);
|
||||
}
|
||||
|
||||
footer label:active {
|
||||
top: .09em;
|
||||
left: .09em;
|
||||
box-shadow: .05em .05em var(--color-shadow);
|
||||
}
|
||||
|
||||
label.theme-light {
|
||||
border-top-left-radius: 1rem;
|
||||
border-bottom-left-radius: 1rem;
|
||||
border-right: none;
|
||||
padding-left: .35rem;
|
||||
}
|
||||
|
||||
label.theme-auto {
|
||||
}
|
||||
|
||||
label.theme-dark {
|
||||
border-top-right-radius: 1rem;
|
||||
border-bottom-right-radius: 1rem;
|
||||
border-left: none;
|
||||
padding-right: .35rem;
|
||||
}
|
||||
|
||||
footer input {
|
||||
/* To allow screen reader to still access these. */
|
||||
/* From https://lyra.horse/blog/2025/08/you-dont-need-js/ */
|
||||
opacity: 0;
|
||||
position: absolute;
|
||||
pointer-events: none;
|
||||
}
|
||||
|
||||
/* Pagination */
|
||||
.pagination,
|
||||
.pagination li {
|
||||
@@ -1222,6 +1334,8 @@ pre[class*=language-]::selection {
|
||||
}
|
||||
}</style>
|
||||
|
||||
|
||||
|
||||
<script type="module">// Thank you to https://github.com/daviddarnes/heading-anchors
|
||||
// Thank you to https://amberwilson.co.uk/blog/are-your-anchor-links-accessible/
|
||||
|
||||
@@ -1476,6 +1590,41 @@ if (window.innerWidth > 650) {
|
||||
dialog.close();
|
||||
}
|
||||
});
|
||||
}
|
||||
const THEME = "theme";
|
||||
|
||||
const saveTheme = (themeValue) => {
|
||||
localStorage.setItem(THEME, themeValue);
|
||||
};
|
||||
|
||||
const themeLight = document.getElementById("theme-light");
|
||||
themeLight.addEventListener("input", (e) => {
|
||||
saveTheme(themeLight.value);
|
||||
});
|
||||
|
||||
const themeAuto = document.getElementById("theme-auto");
|
||||
themeAuto.addEventListener("input", (e) => {
|
||||
saveTheme(themeAuto.auto);
|
||||
});
|
||||
|
||||
const themeDark = document.getElementById("theme-dark");
|
||||
themeDark.addEventListener("input", (e) => {
|
||||
saveTheme(themeDark.value);
|
||||
});
|
||||
|
||||
var currentThemeValue = localStorage.getItem(THEME);
|
||||
switch (currentThemeValue) {
|
||||
case "light":
|
||||
themeLight.checked = true;
|
||||
break;
|
||||
case "auto":
|
||||
themeAuto.checked = true;
|
||||
break;
|
||||
case "dark":
|
||||
themeDark.checked = true;
|
||||
break;
|
||||
default:
|
||||
themeAuto.checked = true;
|
||||
}</script>
|
||||
|
||||
</head>
|
||||
@@ -1610,45 +1759,45 @@ if (window.innerWidth > 650) {
|
||||
<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="/zipper-bifold/">
|
||||
<h2 data-ha-exclude="" id="zipper-bifold">zipper bifold </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/zipper-bifold.jpg" alt="A collage showing a hand-stitched leather bifold with a zippered coin pocket on one exterior side." loading="lazy" decoding="async" width="1000" height="1777">
|
||||
|
||||
</a>
|
||||
</li>
|
||||
|
||||
<li class="post">
|
||||
<a class="postlink" href="/dragon-mask/">
|
||||
<h2 data-ha-exclude="" id="dragon-mask">dragon mask </h2>
|
||||
<a class="postlink" href="/shrimp-cat-toy/">
|
||||
<h2 data-ha-exclude="" id="shrimp-cat-toy">shrimp cat toy </h2>
|
||||
|
||||
<ul class="postlist-tags">
|
||||
|
||||
<li>leather</li>
|
||||
|
||||
<li>highlight</li>
|
||||
|
||||
</ul>
|
||||
<img src="/img/dragon-mask.jpg" alt="lee (a white person with glasses and a side shave) holds up a leather dragon mask in black and dark green. ze sticks hir tongue out at it." loading="lazy" decoding="async" width="1000" height="746">
|
||||
<img src="/img/two-shrimp.jpg" alt="Two leather shrimp-shaped cat toys. They have long dangly antennae and are stitched in red and orange." loading="lazy" decoding="async" width="1000" height="666">
|
||||
|
||||
</a>
|
||||
</li>
|
||||
|
||||
<li class="post">
|
||||
<a class="postlink" href="/leather-keychains/">
|
||||
<h2 data-ha-exclude="" id="leather-keychains">leather keychains </h2>
|
||||
<a class="postlink" href="/proud-dad-wallet/">
|
||||
<h2 data-ha-exclude="" id="proud-dad-wallet">proud dad wallet </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 'MOM' or 'EGG'." loading="lazy" decoding="async" width="1000" height="1333">
|
||||
<img src="/img/proud-dad-wallet.jpg" alt="A brown leather wallet with a subtle trans flag stitching across the top." loading="lazy" decoding="async" width="1000" height="750">
|
||||
|
||||
</a>
|
||||
</li>
|
||||
@@ -1681,9 +1830,30 @@ if (window.innerWidth > 650) {
|
||||
</a>
|
||||
</li>
|
||||
</ul>
|
||||
|
||||
<fieldset id="theme">
|
||||
<legend>color scheme</legend>
|
||||
|
||||
<input type="radio" id="theme-light" name="theme" value="light">
|
||||
<label class="theme-light" for="theme-light">
|
||||
<i class="fa-regular fa-sun" aria-hidden="true"></i>
|
||||
light
|
||||
</label>
|
||||
|
||||
<input type="radio" id="theme-auto" name="theme" value="auto">
|
||||
<label class="theme-auto" for="theme-auto">
|
||||
auto
|
||||
</label>
|
||||
|
||||
<input type="radio" id="theme-dark" name="theme" value="dark">
|
||||
<label class="theme-dark" for="theme-dark">
|
||||
dark
|
||||
<i class="fa-regular fa-moon" aria-hidden="true"></i>
|
||||
</label>
|
||||
</fieldset>
|
||||
</footer>
|
||||
|
||||
|
||||
<!-- This page `/brookes-suspenders/` was built on 2026-09-08T23:18:32.749Z -->
|
||||
<!-- This page `/brookes-suspenders/` was built on 2026-09-09T20:38:02.934Z -->
|
||||
</body>
|
||||
</html>
|
||||
|
||||
+205
-41
@@ -478,6 +478,13 @@ body:has(dialog[open]) {
|
||||
--color-grey: light-dark(var(--color-grey-dark), var(--color-grey-light));
|
||||
}
|
||||
|
||||
:root:has(#theme-light:checked) {
|
||||
color-scheme: light;
|
||||
}
|
||||
:root:has(#theme-dark:checked) {
|
||||
color-scheme: dark;
|
||||
}
|
||||
|
||||
/* Base */
|
||||
|
||||
* {
|
||||
@@ -621,7 +628,7 @@ ul, ol, dl, li {
|
||||
}
|
||||
|
||||
li {
|
||||
line-height: 1.2 5;
|
||||
line-height: 1.2;
|
||||
margin-top: .65rem;
|
||||
margin-bottom: .65rem;
|
||||
}
|
||||
@@ -960,6 +967,111 @@ footer a:focus-visible {
|
||||
outline-color: var(--color-pink);
|
||||
}
|
||||
|
||||
/* color picker */
|
||||
#theme {
|
||||
display: flex;
|
||||
justify-content: center;
|
||||
margin: .5rem auto 0;
|
||||
padding: 0 .75rem .5rem;
|
||||
width: fit-content;
|
||||
border: .125rem solid var(--color-teal);
|
||||
border-radius: 2rem;
|
||||
}
|
||||
|
||||
#theme legend {
|
||||
margin: 0 auto;
|
||||
color: var(--color-teal);
|
||||
}
|
||||
|
||||
footer label {
|
||||
cursor: pointer;
|
||||
border: .125rem solid var(--color-pink);
|
||||
padding: 0 .25rem;
|
||||
color: var(--color-pink);
|
||||
background-color: var(--color-bg); /* this stops the box shadows from showing through */
|
||||
box-shadow: .15em .15em var(--color-shadow);
|
||||
/* Click animation handling */
|
||||
position: relative;
|
||||
top: 0;
|
||||
left: 0;
|
||||
transition: top .05s ease-in, left .05s ease-in;
|
||||
}
|
||||
|
||||
footer input:checked + label {
|
||||
color: var(--color-blue);
|
||||
border-color: var(--color-blue);
|
||||
}
|
||||
|
||||
footer label i {
|
||||
color: var(--color-teal);
|
||||
}
|
||||
|
||||
footer input:checked + label i {
|
||||
color: var(--color-pink);
|
||||
}
|
||||
|
||||
@media (any-hover: hover) {
|
||||
footer label:hover,
|
||||
footer input:checked + label:hover,
|
||||
footer label:hover i,
|
||||
footer input:checked + label:hover i {
|
||||
color: var(--color-bg);
|
||||
}
|
||||
|
||||
footer label:hover {
|
||||
background-color: var(--color-pink);
|
||||
}
|
||||
|
||||
footer input:checked + label:hover {
|
||||
background-color: var(--color-teal);
|
||||
}
|
||||
}
|
||||
|
||||
footer input:focus-visible + label,
|
||||
footer input:focus-visible + label i {
|
||||
color: var(--color-bg);
|
||||
background-color: var(--color-pink);
|
||||
border-color: var(--color-pink);
|
||||
}
|
||||
|
||||
footer input:checked:focus-visible + label,
|
||||
footer input:checked:focus-visible + label i {
|
||||
color: var(--color-bg);
|
||||
background-color: var(--color-teal);
|
||||
border-color: var(--color-teal);
|
||||
}
|
||||
|
||||
footer label:active {
|
||||
top: .09em;
|
||||
left: .09em;
|
||||
box-shadow: .05em .05em var(--color-shadow);
|
||||
}
|
||||
|
||||
label.theme-light {
|
||||
border-top-left-radius: 1rem;
|
||||
border-bottom-left-radius: 1rem;
|
||||
border-right: none;
|
||||
padding-left: .35rem;
|
||||
}
|
||||
|
||||
label.theme-auto {
|
||||
}
|
||||
|
||||
label.theme-dark {
|
||||
border-top-right-radius: 1rem;
|
||||
border-bottom-right-radius: 1rem;
|
||||
border-left: none;
|
||||
padding-right: .35rem;
|
||||
}
|
||||
|
||||
footer input {
|
||||
/* To allow screen reader to still access these. */
|
||||
/* From https://lyra.horse/blog/2025/08/you-dont-need-js/ */
|
||||
opacity: 0;
|
||||
position: absolute;
|
||||
pointer-events: none;
|
||||
}
|
||||
|
||||
/* Pagination */
|
||||
.pagination,
|
||||
.pagination li {
|
||||
@@ -1222,6 +1334,8 @@ pre[class*=language-]::selection {
|
||||
}
|
||||
}</style>
|
||||
|
||||
|
||||
|
||||
<script type="module">// Thank you to https://github.com/daviddarnes/heading-anchors
|
||||
// Thank you to https://amberwilson.co.uk/blog/are-your-anchor-links-accessible/
|
||||
|
||||
@@ -1476,6 +1590,41 @@ if (window.innerWidth > 650) {
|
||||
dialog.close();
|
||||
}
|
||||
});
|
||||
}
|
||||
const THEME = "theme";
|
||||
|
||||
const saveTheme = (themeValue) => {
|
||||
localStorage.setItem(THEME, themeValue);
|
||||
};
|
||||
|
||||
const themeLight = document.getElementById("theme-light");
|
||||
themeLight.addEventListener("input", (e) => {
|
||||
saveTheme(themeLight.value);
|
||||
});
|
||||
|
||||
const themeAuto = document.getElementById("theme-auto");
|
||||
themeAuto.addEventListener("input", (e) => {
|
||||
saveTheme(themeAuto.auto);
|
||||
});
|
||||
|
||||
const themeDark = document.getElementById("theme-dark");
|
||||
themeDark.addEventListener("input", (e) => {
|
||||
saveTheme(themeDark.value);
|
||||
});
|
||||
|
||||
var currentThemeValue = localStorage.getItem(THEME);
|
||||
switch (currentThemeValue) {
|
||||
case "light":
|
||||
themeLight.checked = true;
|
||||
break;
|
||||
case "auto":
|
||||
themeAuto.checked = true;
|
||||
break;
|
||||
case "dark":
|
||||
themeDark.checked = true;
|
||||
break;
|
||||
default:
|
||||
themeAuto.checked = true;
|
||||
}</script>
|
||||
|
||||
</head>
|
||||
@@ -1611,8 +1760,22 @@ if (window.innerWidth > 650) {
|
||||
<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="/kniphofia/">
|
||||
<h2 data-ha-exclude="" id="kniphofia">kniphofia </h2>
|
||||
|
||||
<ul class="postlist-tags">
|
||||
|
||||
<li>print</li>
|
||||
|
||||
</ul>
|
||||
<img src="/img/kniphofia-print.jpg" alt="A print of a brightly colored flower in 4 layers of color" loading="lazy" decoding="async" width="1000" height="1333">
|
||||
|
||||
</a>
|
||||
</li>
|
||||
|
||||
<li class="post">
|
||||
<a class="postlink" href="/heron/">
|
||||
<h2 data-ha-exclude="" id="heron">heron </h2>
|
||||
|
||||
<ul class="postlist-tags">
|
||||
|
||||
@@ -1620,48 +1783,28 @@ if (window.innerWidth > 650) {
|
||||
|
||||
<li>card</li>
|
||||
|
||||
<li>sticker</li>
|
||||
<li>shirt</li>
|
||||
|
||||
<li>pin</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">
|
||||
|
||||
</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>
|
||||
|
||||
<ul class="postlist-tags">
|
||||
|
||||
<li>print</li>
|
||||
|
||||
<li>card</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 'trans wrongs!'" loading="lazy" decoding="async" width="1000" height="750">
|
||||
|
||||
</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 'Artisans Cooperative' with a print of some chickens and a quail." loading="lazy" decoding="async" width="1000" height="1333">
|
||||
|
||||
</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/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/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>
|
||||
@@ -1694,9 +1837,30 @@ if (window.innerWidth > 650) {
|
||||
</a>
|
||||
</li>
|
||||
</ul>
|
||||
|
||||
<fieldset id="theme">
|
||||
<legend>color scheme</legend>
|
||||
|
||||
<input type="radio" id="theme-light" name="theme" value="light">
|
||||
<label class="theme-light" for="theme-light">
|
||||
<i class="fa-regular fa-sun" aria-hidden="true"></i>
|
||||
light
|
||||
</label>
|
||||
|
||||
<input type="radio" id="theme-auto" name="theme" value="auto">
|
||||
<label class="theme-auto" for="theme-auto">
|
||||
auto
|
||||
</label>
|
||||
|
||||
<input type="radio" id="theme-dark" name="theme" value="dark">
|
||||
<label class="theme-dark" for="theme-dark">
|
||||
dark
|
||||
<i class="fa-regular fa-moon" aria-hidden="true"></i>
|
||||
</label>
|
||||
</fieldset>
|
||||
</footer>
|
||||
|
||||
|
||||
<!-- This page `/brown-creeper/` was built on 2026-09-08T23:18:32.764Z -->
|
||||
<!-- This page `/brown-creeper/` was built on 2026-09-09T20:38:02.899Z -->
|
||||
</body>
|
||||
</html>
|
||||
|
||||
+186
-18
@@ -478,6 +478,13 @@ body:has(dialog[open]) {
|
||||
--color-grey: light-dark(var(--color-grey-dark), var(--color-grey-light));
|
||||
}
|
||||
|
||||
:root:has(#theme-light:checked) {
|
||||
color-scheme: light;
|
||||
}
|
||||
:root:has(#theme-dark:checked) {
|
||||
color-scheme: dark;
|
||||
}
|
||||
|
||||
/* Base */
|
||||
|
||||
* {
|
||||
@@ -621,7 +628,7 @@ ul, ol, dl, li {
|
||||
}
|
||||
|
||||
li {
|
||||
line-height: 1.2 5;
|
||||
line-height: 1.2;
|
||||
margin-top: .65rem;
|
||||
margin-bottom: .65rem;
|
||||
}
|
||||
@@ -960,6 +967,111 @@ footer a:focus-visible {
|
||||
outline-color: var(--color-pink);
|
||||
}
|
||||
|
||||
/* color picker */
|
||||
#theme {
|
||||
display: flex;
|
||||
justify-content: center;
|
||||
margin: .5rem auto 0;
|
||||
padding: 0 .75rem .5rem;
|
||||
width: fit-content;
|
||||
border: .125rem solid var(--color-teal);
|
||||
border-radius: 2rem;
|
||||
}
|
||||
|
||||
#theme legend {
|
||||
margin: 0 auto;
|
||||
color: var(--color-teal);
|
||||
}
|
||||
|
||||
footer label {
|
||||
cursor: pointer;
|
||||
border: .125rem solid var(--color-pink);
|
||||
padding: 0 .25rem;
|
||||
color: var(--color-pink);
|
||||
background-color: var(--color-bg); /* this stops the box shadows from showing through */
|
||||
box-shadow: .15em .15em var(--color-shadow);
|
||||
/* Click animation handling */
|
||||
position: relative;
|
||||
top: 0;
|
||||
left: 0;
|
||||
transition: top .05s ease-in, left .05s ease-in;
|
||||
}
|
||||
|
||||
footer input:checked + label {
|
||||
color: var(--color-blue);
|
||||
border-color: var(--color-blue);
|
||||
}
|
||||
|
||||
footer label i {
|
||||
color: var(--color-teal);
|
||||
}
|
||||
|
||||
footer input:checked + label i {
|
||||
color: var(--color-pink);
|
||||
}
|
||||
|
||||
@media (any-hover: hover) {
|
||||
footer label:hover,
|
||||
footer input:checked + label:hover,
|
||||
footer label:hover i,
|
||||
footer input:checked + label:hover i {
|
||||
color: var(--color-bg);
|
||||
}
|
||||
|
||||
footer label:hover {
|
||||
background-color: var(--color-pink);
|
||||
}
|
||||
|
||||
footer input:checked + label:hover {
|
||||
background-color: var(--color-teal);
|
||||
}
|
||||
}
|
||||
|
||||
footer input:focus-visible + label,
|
||||
footer input:focus-visible + label i {
|
||||
color: var(--color-bg);
|
||||
background-color: var(--color-pink);
|
||||
border-color: var(--color-pink);
|
||||
}
|
||||
|
||||
footer input:checked:focus-visible + label,
|
||||
footer input:checked:focus-visible + label i {
|
||||
color: var(--color-bg);
|
||||
background-color: var(--color-teal);
|
||||
border-color: var(--color-teal);
|
||||
}
|
||||
|
||||
footer label:active {
|
||||
top: .09em;
|
||||
left: .09em;
|
||||
box-shadow: .05em .05em var(--color-shadow);
|
||||
}
|
||||
|
||||
label.theme-light {
|
||||
border-top-left-radius: 1rem;
|
||||
border-bottom-left-radius: 1rem;
|
||||
border-right: none;
|
||||
padding-left: .35rem;
|
||||
}
|
||||
|
||||
label.theme-auto {
|
||||
}
|
||||
|
||||
label.theme-dark {
|
||||
border-top-right-radius: 1rem;
|
||||
border-bottom-right-radius: 1rem;
|
||||
border-left: none;
|
||||
padding-right: .35rem;
|
||||
}
|
||||
|
||||
footer input {
|
||||
/* To allow screen reader to still access these. */
|
||||
/* From https://lyra.horse/blog/2025/08/you-dont-need-js/ */
|
||||
opacity: 0;
|
||||
position: absolute;
|
||||
pointer-events: none;
|
||||
}
|
||||
|
||||
/* Pagination */
|
||||
.pagination,
|
||||
.pagination li {
|
||||
@@ -1222,6 +1334,8 @@ pre[class*=language-]::selection {
|
||||
}
|
||||
}</style>
|
||||
|
||||
|
||||
|
||||
<script type="module">// Thank you to https://github.com/daviddarnes/heading-anchors
|
||||
// Thank you to https://amberwilson.co.uk/blog/are-your-anchor-links-accessible/
|
||||
|
||||
@@ -1476,6 +1590,41 @@ if (window.innerWidth > 650) {
|
||||
dialog.close();
|
||||
}
|
||||
});
|
||||
}
|
||||
const THEME = "theme";
|
||||
|
||||
const saveTheme = (themeValue) => {
|
||||
localStorage.setItem(THEME, themeValue);
|
||||
};
|
||||
|
||||
const themeLight = document.getElementById("theme-light");
|
||||
themeLight.addEventListener("input", (e) => {
|
||||
saveTheme(themeLight.value);
|
||||
});
|
||||
|
||||
const themeAuto = document.getElementById("theme-auto");
|
||||
themeAuto.addEventListener("input", (e) => {
|
||||
saveTheme(themeAuto.auto);
|
||||
});
|
||||
|
||||
const themeDark = document.getElementById("theme-dark");
|
||||
themeDark.addEventListener("input", (e) => {
|
||||
saveTheme(themeDark.value);
|
||||
});
|
||||
|
||||
var currentThemeValue = localStorage.getItem(THEME);
|
||||
switch (currentThemeValue) {
|
||||
case "light":
|
||||
themeLight.checked = true;
|
||||
break;
|
||||
case "auto":
|
||||
themeAuto.checked = true;
|
||||
break;
|
||||
case "dark":
|
||||
themeDark.checked = true;
|
||||
break;
|
||||
default:
|
||||
themeAuto.checked = true;
|
||||
}</script>
|
||||
|
||||
</head>
|
||||
@@ -1691,6 +1840,20 @@ if (window.innerWidth > 650) {
|
||||
<h2 data-ha-exclude="" id="related-posts">related posts</h2>
|
||||
<ol id="postlist">
|
||||
|
||||
<li class="post">
|
||||
<a class="postlink" href="/recommendations-and-favorites/">
|
||||
<h2 data-ha-exclude="" id="recommendations-and-favorites">recommendations & favorites </h2>
|
||||
|
||||
<ul class="postlist-tags">
|
||||
|
||||
<li>highlight</li>
|
||||
|
||||
</ul>
|
||||
<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="/keffiyah-fishing-net-pattern/">
|
||||
<h2 data-ha-exclude="" id="keffiyah-fishing-net-pattern">keffiyah fishing net pattern </h2>
|
||||
@@ -1721,22 +1884,6 @@ if (window.innerWidth > 650) {
|
||||
</a>
|
||||
</li>
|
||||
|
||||
<li class="post">
|
||||
<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/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>
|
||||
|
||||
</ol>
|
||||
|
||||
</section>
|
||||
@@ -1765,9 +1912,30 @@ if (window.innerWidth > 650) {
|
||||
</a>
|
||||
</li>
|
||||
</ul>
|
||||
|
||||
<fieldset id="theme">
|
||||
<legend>color scheme</legend>
|
||||
|
||||
<input type="radio" id="theme-light" name="theme" value="light">
|
||||
<label class="theme-light" for="theme-light">
|
||||
<i class="fa-regular fa-sun" aria-hidden="true"></i>
|
||||
light
|
||||
</label>
|
||||
|
||||
<input type="radio" id="theme-auto" name="theme" value="auto">
|
||||
<label class="theme-auto" for="theme-auto">
|
||||
auto
|
||||
</label>
|
||||
|
||||
<input type="radio" id="theme-dark" name="theme" value="dark">
|
||||
<label class="theme-dark" for="theme-dark">
|
||||
dark
|
||||
<i class="fa-regular fa-moon" aria-hidden="true"></i>
|
||||
</label>
|
||||
</fieldset>
|
||||
</footer>
|
||||
|
||||
|
||||
<!-- This page `/butch-hands-pattern/` was built on 2026-09-08T23:18:32.733Z -->
|
||||
<!-- This page `/butch-hands-pattern/` was built on 2026-09-09T20:38:02.900Z -->
|
||||
</body>
|
||||
</html>
|
||||
|
||||
+199
-23
@@ -478,6 +478,13 @@ body:has(dialog[open]) {
|
||||
--color-grey: light-dark(var(--color-grey-dark), var(--color-grey-light));
|
||||
}
|
||||
|
||||
:root:has(#theme-light:checked) {
|
||||
color-scheme: light;
|
||||
}
|
||||
:root:has(#theme-dark:checked) {
|
||||
color-scheme: dark;
|
||||
}
|
||||
|
||||
/* Base */
|
||||
|
||||
* {
|
||||
@@ -621,7 +628,7 @@ ul, ol, dl, li {
|
||||
}
|
||||
|
||||
li {
|
||||
line-height: 1.2 5;
|
||||
line-height: 1.2;
|
||||
margin-top: .65rem;
|
||||
margin-bottom: .65rem;
|
||||
}
|
||||
@@ -960,6 +967,111 @@ footer a:focus-visible {
|
||||
outline-color: var(--color-pink);
|
||||
}
|
||||
|
||||
/* color picker */
|
||||
#theme {
|
||||
display: flex;
|
||||
justify-content: center;
|
||||
margin: .5rem auto 0;
|
||||
padding: 0 .75rem .5rem;
|
||||
width: fit-content;
|
||||
border: .125rem solid var(--color-teal);
|
||||
border-radius: 2rem;
|
||||
}
|
||||
|
||||
#theme legend {
|
||||
margin: 0 auto;
|
||||
color: var(--color-teal);
|
||||
}
|
||||
|
||||
footer label {
|
||||
cursor: pointer;
|
||||
border: .125rem solid var(--color-pink);
|
||||
padding: 0 .25rem;
|
||||
color: var(--color-pink);
|
||||
background-color: var(--color-bg); /* this stops the box shadows from showing through */
|
||||
box-shadow: .15em .15em var(--color-shadow);
|
||||
/* Click animation handling */
|
||||
position: relative;
|
||||
top: 0;
|
||||
left: 0;
|
||||
transition: top .05s ease-in, left .05s ease-in;
|
||||
}
|
||||
|
||||
footer input:checked + label {
|
||||
color: var(--color-blue);
|
||||
border-color: var(--color-blue);
|
||||
}
|
||||
|
||||
footer label i {
|
||||
color: var(--color-teal);
|
||||
}
|
||||
|
||||
footer input:checked + label i {
|
||||
color: var(--color-pink);
|
||||
}
|
||||
|
||||
@media (any-hover: hover) {
|
||||
footer label:hover,
|
||||
footer input:checked + label:hover,
|
||||
footer label:hover i,
|
||||
footer input:checked + label:hover i {
|
||||
color: var(--color-bg);
|
||||
}
|
||||
|
||||
footer label:hover {
|
||||
background-color: var(--color-pink);
|
||||
}
|
||||
|
||||
footer input:checked + label:hover {
|
||||
background-color: var(--color-teal);
|
||||
}
|
||||
}
|
||||
|
||||
footer input:focus-visible + label,
|
||||
footer input:focus-visible + label i {
|
||||
color: var(--color-bg);
|
||||
background-color: var(--color-pink);
|
||||
border-color: var(--color-pink);
|
||||
}
|
||||
|
||||
footer input:checked:focus-visible + label,
|
||||
footer input:checked:focus-visible + label i {
|
||||
color: var(--color-bg);
|
||||
background-color: var(--color-teal);
|
||||
border-color: var(--color-teal);
|
||||
}
|
||||
|
||||
footer label:active {
|
||||
top: .09em;
|
||||
left: .09em;
|
||||
box-shadow: .05em .05em var(--color-shadow);
|
||||
}
|
||||
|
||||
label.theme-light {
|
||||
border-top-left-radius: 1rem;
|
||||
border-bottom-left-radius: 1rem;
|
||||
border-right: none;
|
||||
padding-left: .35rem;
|
||||
}
|
||||
|
||||
label.theme-auto {
|
||||
}
|
||||
|
||||
label.theme-dark {
|
||||
border-top-right-radius: 1rem;
|
||||
border-bottom-right-radius: 1rem;
|
||||
border-left: none;
|
||||
padding-right: .35rem;
|
||||
}
|
||||
|
||||
footer input {
|
||||
/* To allow screen reader to still access these. */
|
||||
/* From https://lyra.horse/blog/2025/08/you-dont-need-js/ */
|
||||
opacity: 0;
|
||||
position: absolute;
|
||||
pointer-events: none;
|
||||
}
|
||||
|
||||
/* Pagination */
|
||||
.pagination,
|
||||
.pagination li {
|
||||
@@ -1222,6 +1334,8 @@ pre[class*=language-]::selection {
|
||||
}
|
||||
}</style>
|
||||
|
||||
|
||||
|
||||
<script type="module">// Thank you to https://github.com/daviddarnes/heading-anchors
|
||||
// Thank you to https://amberwilson.co.uk/blog/are-your-anchor-links-accessible/
|
||||
|
||||
@@ -1476,6 +1590,41 @@ if (window.innerWidth > 650) {
|
||||
dialog.close();
|
||||
}
|
||||
});
|
||||
}
|
||||
const THEME = "theme";
|
||||
|
||||
const saveTheme = (themeValue) => {
|
||||
localStorage.setItem(THEME, themeValue);
|
||||
};
|
||||
|
||||
const themeLight = document.getElementById("theme-light");
|
||||
themeLight.addEventListener("input", (e) => {
|
||||
saveTheme(themeLight.value);
|
||||
});
|
||||
|
||||
const themeAuto = document.getElementById("theme-auto");
|
||||
themeAuto.addEventListener("input", (e) => {
|
||||
saveTheme(themeAuto.auto);
|
||||
});
|
||||
|
||||
const themeDark = document.getElementById("theme-dark");
|
||||
themeDark.addEventListener("input", (e) => {
|
||||
saveTheme(themeDark.value);
|
||||
});
|
||||
|
||||
var currentThemeValue = localStorage.getItem(THEME);
|
||||
switch (currentThemeValue) {
|
||||
case "light":
|
||||
themeLight.checked = true;
|
||||
break;
|
||||
case "auto":
|
||||
themeAuto.checked = true;
|
||||
break;
|
||||
case "dark":
|
||||
themeDark.checked = true;
|
||||
break;
|
||||
default:
|
||||
themeAuto.checked = true;
|
||||
}</script>
|
||||
|
||||
</head>
|
||||
@@ -1622,42 +1771,48 @@ if (window.innerWidth > 650) {
|
||||
<ol id="postlist">
|
||||
|
||||
<li class="post">
|
||||
<a class="postlink" href="/spotted-towhee/">
|
||||
<h2 data-ha-exclude="" id="spotted-towhee">spotted towhee </h2>
|
||||
<a class="postlink" href="/boypussy/">
|
||||
<h2 data-ha-exclude="" id="boypussy-mature">boypussy (mature)</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="/trans-the-world/">
|
||||
<h2 data-ha-exclude="" id="trans-the-world">trans the world </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-the-world-print.jpg" alt="A print that reads 'trans the world' surrounding an image of a globe and a trans symbol. It's in a ping-to-blue gradient." loading="lazy" decoding="async" width="1000" height="750">
|
||||
<img src="/img/boypussy-shirt.jpg" alt="A butch holding a chainsaw and wearing a tank top that reads boypussy in pink Barbie font." class="blur" loading="lazy" decoding="async" width="1000" height="1250">
|
||||
|
||||
</a>
|
||||
</li>
|
||||
|
||||
<li class="post">
|
||||
<a class="postlink" href="/stellars-jay/">
|
||||
<h2 data-ha-exclude="" id="stellars-jay">stellar's jay </h2>
|
||||
<a class="postlink" href="/nonbinary-flag/">
|
||||
<h2 data-ha-exclude="" id="nonbinary-flag">nonbinary flag </h2>
|
||||
|
||||
<ul class="postlist-tags">
|
||||
|
||||
<li>print</li>
|
||||
|
||||
<li>card</li>
|
||||
|
||||
<li>gender</li>
|
||||
|
||||
</ul>
|
||||
<img src="/img/nonbinary-flag-print.jpg" alt="A print of a nonbinary flag waving, with yellow, white (uninked), purple, and black stripes." loading="lazy" decoding="async" width="1000" height="750">
|
||||
|
||||
</a>
|
||||
</li>
|
||||
|
||||
<li class="post">
|
||||
<a class="postlink" href="/hummingbird-become-ungovernable/">
|
||||
<h2 data-ha-exclude="" id="hummingbird-become-ungovernable">hummingbird become ungovernable </h2>
|
||||
|
||||
<ul class="postlist-tags">
|
||||
|
||||
@@ -1668,7 +1823,7 @@ if (window.innerWidth > 650) {
|
||||
<li>shirt</li>
|
||||
|
||||
</ul>
|
||||
<img src="/img/stellars-jay-print.jpg" alt="A print of a stellar'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/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 'become ungovernable'" loading="lazy" decoding="async" width="1000" height="750">
|
||||
|
||||
</a>
|
||||
</li>
|
||||
@@ -1701,9 +1856,30 @@ if (window.innerWidth > 650) {
|
||||
</a>
|
||||
</li>
|
||||
</ul>
|
||||
|
||||
<fieldset id="theme">
|
||||
<legend>color scheme</legend>
|
||||
|
||||
<input type="radio" id="theme-light" name="theme" value="light">
|
||||
<label class="theme-light" for="theme-light">
|
||||
<i class="fa-regular fa-sun" aria-hidden="true"></i>
|
||||
light
|
||||
</label>
|
||||
|
||||
<input type="radio" id="theme-auto" name="theme" value="auto">
|
||||
<label class="theme-auto" for="theme-auto">
|
||||
auto
|
||||
</label>
|
||||
|
||||
<input type="radio" id="theme-dark" name="theme" value="dark">
|
||||
<label class="theme-dark" for="theme-dark">
|
||||
dark
|
||||
<i class="fa-regular fa-moon" aria-hidden="true"></i>
|
||||
</label>
|
||||
</fieldset>
|
||||
</footer>
|
||||
|
||||
|
||||
<!-- This page `/chanterelle/` was built on 2026-09-08T23:18:32.733Z -->
|
||||
<!-- This page `/chanterelle/` was built on 2026-09-09T20:38:02.900Z -->
|
||||
</body>
|
||||
</html>
|
||||
|
||||
@@ -478,6 +478,13 @@ body:has(dialog[open]) {
|
||||
--color-grey: light-dark(var(--color-grey-dark), var(--color-grey-light));
|
||||
}
|
||||
|
||||
:root:has(#theme-light:checked) {
|
||||
color-scheme: light;
|
||||
}
|
||||
:root:has(#theme-dark:checked) {
|
||||
color-scheme: dark;
|
||||
}
|
||||
|
||||
/* Base */
|
||||
|
||||
* {
|
||||
@@ -621,7 +628,7 @@ ul, ol, dl, li {
|
||||
}
|
||||
|
||||
li {
|
||||
line-height: 1.2 5;
|
||||
line-height: 1.2;
|
||||
margin-top: .65rem;
|
||||
margin-bottom: .65rem;
|
||||
}
|
||||
@@ -960,6 +967,111 @@ footer a:focus-visible {
|
||||
outline-color: var(--color-pink);
|
||||
}
|
||||
|
||||
/* color picker */
|
||||
#theme {
|
||||
display: flex;
|
||||
justify-content: center;
|
||||
margin: .5rem auto 0;
|
||||
padding: 0 .75rem .5rem;
|
||||
width: fit-content;
|
||||
border: .125rem solid var(--color-teal);
|
||||
border-radius: 2rem;
|
||||
}
|
||||
|
||||
#theme legend {
|
||||
margin: 0 auto;
|
||||
color: var(--color-teal);
|
||||
}
|
||||
|
||||
footer label {
|
||||
cursor: pointer;
|
||||
border: .125rem solid var(--color-pink);
|
||||
padding: 0 .25rem;
|
||||
color: var(--color-pink);
|
||||
background-color: var(--color-bg); /* this stops the box shadows from showing through */
|
||||
box-shadow: .15em .15em var(--color-shadow);
|
||||
/* Click animation handling */
|
||||
position: relative;
|
||||
top: 0;
|
||||
left: 0;
|
||||
transition: top .05s ease-in, left .05s ease-in;
|
||||
}
|
||||
|
||||
footer input:checked + label {
|
||||
color: var(--color-blue);
|
||||
border-color: var(--color-blue);
|
||||
}
|
||||
|
||||
footer label i {
|
||||
color: var(--color-teal);
|
||||
}
|
||||
|
||||
footer input:checked + label i {
|
||||
color: var(--color-pink);
|
||||
}
|
||||
|
||||
@media (any-hover: hover) {
|
||||
footer label:hover,
|
||||
footer input:checked + label:hover,
|
||||
footer label:hover i,
|
||||
footer input:checked + label:hover i {
|
||||
color: var(--color-bg);
|
||||
}
|
||||
|
||||
footer label:hover {
|
||||
background-color: var(--color-pink);
|
||||
}
|
||||
|
||||
footer input:checked + label:hover {
|
||||
background-color: var(--color-teal);
|
||||
}
|
||||
}
|
||||
|
||||
footer input:focus-visible + label,
|
||||
footer input:focus-visible + label i {
|
||||
color: var(--color-bg);
|
||||
background-color: var(--color-pink);
|
||||
border-color: var(--color-pink);
|
||||
}
|
||||
|
||||
footer input:checked:focus-visible + label,
|
||||
footer input:checked:focus-visible + label i {
|
||||
color: var(--color-bg);
|
||||
background-color: var(--color-teal);
|
||||
border-color: var(--color-teal);
|
||||
}
|
||||
|
||||
footer label:active {
|
||||
top: .09em;
|
||||
left: .09em;
|
||||
box-shadow: .05em .05em var(--color-shadow);
|
||||
}
|
||||
|
||||
label.theme-light {
|
||||
border-top-left-radius: 1rem;
|
||||
border-bottom-left-radius: 1rem;
|
||||
border-right: none;
|
||||
padding-left: .35rem;
|
||||
}
|
||||
|
||||
label.theme-auto {
|
||||
}
|
||||
|
||||
label.theme-dark {
|
||||
border-top-right-radius: 1rem;
|
||||
border-bottom-right-radius: 1rem;
|
||||
border-left: none;
|
||||
padding-right: .35rem;
|
||||
}
|
||||
|
||||
footer input {
|
||||
/* To allow screen reader to still access these. */
|
||||
/* From https://lyra.horse/blog/2025/08/you-dont-need-js/ */
|
||||
opacity: 0;
|
||||
position: absolute;
|
||||
pointer-events: none;
|
||||
}
|
||||
|
||||
/* Pagination */
|
||||
.pagination,
|
||||
.pagination li {
|
||||
@@ -1222,6 +1334,8 @@ pre[class*=language-]::selection {
|
||||
}
|
||||
}</style>
|
||||
|
||||
|
||||
|
||||
<script type="module">// Thank you to https://github.com/daviddarnes/heading-anchors
|
||||
// Thank you to https://amberwilson.co.uk/blog/are-your-anchor-links-accessible/
|
||||
|
||||
@@ -1476,6 +1590,41 @@ if (window.innerWidth > 650) {
|
||||
dialog.close();
|
||||
}
|
||||
});
|
||||
}
|
||||
const THEME = "theme";
|
||||
|
||||
const saveTheme = (themeValue) => {
|
||||
localStorage.setItem(THEME, themeValue);
|
||||
};
|
||||
|
||||
const themeLight = document.getElementById("theme-light");
|
||||
themeLight.addEventListener("input", (e) => {
|
||||
saveTheme(themeLight.value);
|
||||
});
|
||||
|
||||
const themeAuto = document.getElementById("theme-auto");
|
||||
themeAuto.addEventListener("input", (e) => {
|
||||
saveTheme(themeAuto.auto);
|
||||
});
|
||||
|
||||
const themeDark = document.getElementById("theme-dark");
|
||||
themeDark.addEventListener("input", (e) => {
|
||||
saveTheme(themeDark.value);
|
||||
});
|
||||
|
||||
var currentThemeValue = localStorage.getItem(THEME);
|
||||
switch (currentThemeValue) {
|
||||
case "light":
|
||||
themeLight.checked = true;
|
||||
break;
|
||||
case "auto":
|
||||
themeAuto.checked = true;
|
||||
break;
|
||||
case "dark":
|
||||
themeDark.checked = true;
|
||||
break;
|
||||
default:
|
||||
themeAuto.checked = true;
|
||||
}</script>
|
||||
|
||||
</head>
|
||||
@@ -1609,6 +1758,20 @@ if (window.innerWidth > 650) {
|
||||
<h2 data-ha-exclude="" id="related-posts">related posts</h2>
|
||||
<ol id="postlist">
|
||||
|
||||
<li class="post">
|
||||
<a class="postlink" href="/coral-reef-handspun/">
|
||||
<h2 data-ha-exclude="" id="coral-reef-handspun">coral reef handspun </h2>
|
||||
|
||||
<ul class="postlist-tags">
|
||||
|
||||
<li>yarn</li>
|
||||
|
||||
</ul>
|
||||
<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">
|
||||
|
||||
</a>
|
||||
</li>
|
||||
|
||||
<li class="post">
|
||||
<a class="postlink" href="/spinners-dream-handspun/">
|
||||
<h2 data-ha-exclude="" id="spinners-dream-handspun">spinner's dream handspun </h2>
|
||||
@@ -1623,20 +1786,6 @@ if (window.innerWidth > 650) {
|
||||
</a>
|
||||
</li>
|
||||
|
||||
<li class="post">
|
||||
<a class="postlink" href="/bfl-silk-handspun/">
|
||||
<h2 data-ha-exclude="" id="bfl-silk-handspun">BFL/silk handspun </h2>
|
||||
|
||||
<ul class="postlist-tags">
|
||||
|
||||
<li>yarn</li>
|
||||
|
||||
</ul>
|
||||
<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">
|
||||
|
||||
</a>
|
||||
</li>
|
||||
|
||||
<li class="post">
|
||||
<a class="postlink" href="/fire-and-ice-handspun/">
|
||||
<h2 data-ha-exclude="" id="fire-and-ice-handspun">fire & ice handspun </h2>
|
||||
@@ -1679,9 +1828,30 @@ if (window.innerWidth > 650) {
|
||||
</a>
|
||||
</li>
|
||||
</ul>
|
||||
|
||||
<fieldset id="theme">
|
||||
<legend>color scheme</legend>
|
||||
|
||||
<input type="radio" id="theme-light" name="theme" value="light">
|
||||
<label class="theme-light" for="theme-light">
|
||||
<i class="fa-regular fa-sun" aria-hidden="true"></i>
|
||||
light
|
||||
</label>
|
||||
|
||||
<input type="radio" id="theme-auto" name="theme" value="auto">
|
||||
<label class="theme-auto" for="theme-auto">
|
||||
auto
|
||||
</label>
|
||||
|
||||
<input type="radio" id="theme-dark" name="theme" value="dark">
|
||||
<label class="theme-dark" for="theme-dark">
|
||||
dark
|
||||
<i class="fa-regular fa-moon" aria-hidden="true"></i>
|
||||
</label>
|
||||
</fieldset>
|
||||
</footer>
|
||||
|
||||
|
||||
<!-- This page `/charlie-the-alpaca-handspun/` was built on 2026-09-08T23:18:32.757Z -->
|
||||
<!-- This page `/charlie-the-alpaca-handspun/` was built on 2026-09-09T20:38:02.938Z -->
|
||||
</body>
|
||||
</html>
|
||||
|
||||
+185
-11
@@ -478,6 +478,13 @@ body:has(dialog[open]) {
|
||||
--color-grey: light-dark(var(--color-grey-dark), var(--color-grey-light));
|
||||
}
|
||||
|
||||
:root:has(#theme-light:checked) {
|
||||
color-scheme: light;
|
||||
}
|
||||
:root:has(#theme-dark:checked) {
|
||||
color-scheme: dark;
|
||||
}
|
||||
|
||||
/* Base */
|
||||
|
||||
* {
|
||||
@@ -621,7 +628,7 @@ ul, ol, dl, li {
|
||||
}
|
||||
|
||||
li {
|
||||
line-height: 1.2 5;
|
||||
line-height: 1.2;
|
||||
margin-top: .65rem;
|
||||
margin-bottom: .65rem;
|
||||
}
|
||||
@@ -960,6 +967,111 @@ footer a:focus-visible {
|
||||
outline-color: var(--color-pink);
|
||||
}
|
||||
|
||||
/* color picker */
|
||||
#theme {
|
||||
display: flex;
|
||||
justify-content: center;
|
||||
margin: .5rem auto 0;
|
||||
padding: 0 .75rem .5rem;
|
||||
width: fit-content;
|
||||
border: .125rem solid var(--color-teal);
|
||||
border-radius: 2rem;
|
||||
}
|
||||
|
||||
#theme legend {
|
||||
margin: 0 auto;
|
||||
color: var(--color-teal);
|
||||
}
|
||||
|
||||
footer label {
|
||||
cursor: pointer;
|
||||
border: .125rem solid var(--color-pink);
|
||||
padding: 0 .25rem;
|
||||
color: var(--color-pink);
|
||||
background-color: var(--color-bg); /* this stops the box shadows from showing through */
|
||||
box-shadow: .15em .15em var(--color-shadow);
|
||||
/* Click animation handling */
|
||||
position: relative;
|
||||
top: 0;
|
||||
left: 0;
|
||||
transition: top .05s ease-in, left .05s ease-in;
|
||||
}
|
||||
|
||||
footer input:checked + label {
|
||||
color: var(--color-blue);
|
||||
border-color: var(--color-blue);
|
||||
}
|
||||
|
||||
footer label i {
|
||||
color: var(--color-teal);
|
||||
}
|
||||
|
||||
footer input:checked + label i {
|
||||
color: var(--color-pink);
|
||||
}
|
||||
|
||||
@media (any-hover: hover) {
|
||||
footer label:hover,
|
||||
footer input:checked + label:hover,
|
||||
footer label:hover i,
|
||||
footer input:checked + label:hover i {
|
||||
color: var(--color-bg);
|
||||
}
|
||||
|
||||
footer label:hover {
|
||||
background-color: var(--color-pink);
|
||||
}
|
||||
|
||||
footer input:checked + label:hover {
|
||||
background-color: var(--color-teal);
|
||||
}
|
||||
}
|
||||
|
||||
footer input:focus-visible + label,
|
||||
footer input:focus-visible + label i {
|
||||
color: var(--color-bg);
|
||||
background-color: var(--color-pink);
|
||||
border-color: var(--color-pink);
|
||||
}
|
||||
|
||||
footer input:checked:focus-visible + label,
|
||||
footer input:checked:focus-visible + label i {
|
||||
color: var(--color-bg);
|
||||
background-color: var(--color-teal);
|
||||
border-color: var(--color-teal);
|
||||
}
|
||||
|
||||
footer label:active {
|
||||
top: .09em;
|
||||
left: .09em;
|
||||
box-shadow: .05em .05em var(--color-shadow);
|
||||
}
|
||||
|
||||
label.theme-light {
|
||||
border-top-left-radius: 1rem;
|
||||
border-bottom-left-radius: 1rem;
|
||||
border-right: none;
|
||||
padding-left: .35rem;
|
||||
}
|
||||
|
||||
label.theme-auto {
|
||||
}
|
||||
|
||||
label.theme-dark {
|
||||
border-top-right-radius: 1rem;
|
||||
border-bottom-right-radius: 1rem;
|
||||
border-left: none;
|
||||
padding-right: .35rem;
|
||||
}
|
||||
|
||||
footer input {
|
||||
/* To allow screen reader to still access these. */
|
||||
/* From https://lyra.horse/blog/2025/08/you-dont-need-js/ */
|
||||
opacity: 0;
|
||||
position: absolute;
|
||||
pointer-events: none;
|
||||
}
|
||||
|
||||
/* Pagination */
|
||||
.pagination,
|
||||
.pagination li {
|
||||
@@ -1222,6 +1334,8 @@ pre[class*=language-]::selection {
|
||||
}
|
||||
}</style>
|
||||
|
||||
|
||||
|
||||
<script type="module">// Thank you to https://github.com/daviddarnes/heading-anchors
|
||||
// Thank you to https://amberwilson.co.uk/blog/are-your-anchor-links-accessible/
|
||||
|
||||
@@ -1476,6 +1590,41 @@ if (window.innerWidth > 650) {
|
||||
dialog.close();
|
||||
}
|
||||
});
|
||||
}
|
||||
const THEME = "theme";
|
||||
|
||||
const saveTheme = (themeValue) => {
|
||||
localStorage.setItem(THEME, themeValue);
|
||||
};
|
||||
|
||||
const themeLight = document.getElementById("theme-light");
|
||||
themeLight.addEventListener("input", (e) => {
|
||||
saveTheme(themeLight.value);
|
||||
});
|
||||
|
||||
const themeAuto = document.getElementById("theme-auto");
|
||||
themeAuto.addEventListener("input", (e) => {
|
||||
saveTheme(themeAuto.auto);
|
||||
});
|
||||
|
||||
const themeDark = document.getElementById("theme-dark");
|
||||
themeDark.addEventListener("input", (e) => {
|
||||
saveTheme(themeDark.value);
|
||||
});
|
||||
|
||||
var currentThemeValue = localStorage.getItem(THEME);
|
||||
switch (currentThemeValue) {
|
||||
case "light":
|
||||
themeLight.checked = true;
|
||||
break;
|
||||
case "auto":
|
||||
themeAuto.checked = true;
|
||||
break;
|
||||
case "dark":
|
||||
themeDark.checked = true;
|
||||
break;
|
||||
default:
|
||||
themeAuto.checked = true;
|
||||
}</script>
|
||||
|
||||
</head>
|
||||
@@ -1610,43 +1759,47 @@ if (window.innerWidth > 650) {
|
||||
<ol id="postlist">
|
||||
|
||||
<li class="post">
|
||||
<a class="postlink" href="/brookes-collar/">
|
||||
<h2 data-ha-exclude="" id="brookes-collar">brooke's collar </h2>
|
||||
<a class="postlink" href="/black-and-red-journal/">
|
||||
<h2 data-ha-exclude="" id="black-and-red-journal">black and red journal </h2>
|
||||
|
||||
<ul class="postlist-tags">
|
||||
|
||||
<li>book</li>
|
||||
|
||||
<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/black-red-journal.jpg" alt="3 image collage showing a leather-bound journal. The cover is black, with long red vertical stitches along the spine and a red leather strap for a closure. On the back in one lower corner is stamped LEE CAT ART" loading="lazy" decoding="async" width="1000" height="1000">
|
||||
|
||||
</a>
|
||||
</li>
|
||||
|
||||
<li class="post">
|
||||
<a class="postlink" href="/bowtie/">
|
||||
<h2 data-ha-exclude="" id="bowtie">bowtie </h2>
|
||||
<a class="postlink" href="/brookes-suspenders/">
|
||||
<h2 data-ha-exclude="" id="brookes-suspenders">brooke's suspenders </h2>
|
||||
|
||||
<ul class="postlist-tags">
|
||||
|
||||
<li>leather</li>
|
||||
|
||||
</ul>
|
||||
<img src="/img/bowtie.jpg" alt="A black leather bow tie with black stitching." loading="lazy" decoding="async" width="1000" height="750">
|
||||
<img src="/img/brooke-suspenders.jpg" alt="a two image collage showing the front and back of a person, neck to waist. she's wearing leather suspenders with a button attachment, buckles for adjustment, and a stitched diamond where the straps cross in the back." loading="lazy" decoding="async" width="1000" height="750">
|
||||
|
||||
</a>
|
||||
</li>
|
||||
|
||||
<li class="post">
|
||||
<a class="postlink" href="/gradient-purse-strap/">
|
||||
<h2 data-ha-exclude="" id="gradient-purse-strap">gradient purse strap </h2>
|
||||
<a class="postlink" href="/patchwork-wallet/">
|
||||
<h2 data-ha-exclude="" id="patchwork-wallet">patchwork wallet </h2>
|
||||
|
||||
<ul class="postlist-tags">
|
||||
|
||||
<li>leather</li>
|
||||
|
||||
<li>highlight</li>
|
||||
|
||||
</ul>
|
||||
<img src="/img/gradient-purse-strap.jpg" alt="a coiled up purse strap in gradient cool colors - we can see green, teal, indigo, and a slightly pinkish purple. It has brass hardware and is stiched along its length with cream stitches." 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>
|
||||
@@ -1679,9 +1832,30 @@ if (window.innerWidth > 650) {
|
||||
</a>
|
||||
</li>
|
||||
</ul>
|
||||
|
||||
<fieldset id="theme">
|
||||
<legend>color scheme</legend>
|
||||
|
||||
<input type="radio" id="theme-light" name="theme" value="light">
|
||||
<label class="theme-light" for="theme-light">
|
||||
<i class="fa-regular fa-sun" aria-hidden="true"></i>
|
||||
light
|
||||
</label>
|
||||
|
||||
<input type="radio" id="theme-auto" name="theme" value="auto">
|
||||
<label class="theme-auto" for="theme-auto">
|
||||
auto
|
||||
</label>
|
||||
|
||||
<input type="radio" id="theme-dark" name="theme" value="dark">
|
||||
<label class="theme-dark" for="theme-dark">
|
||||
dark
|
||||
<i class="fa-regular fa-moon" aria-hidden="true"></i>
|
||||
</label>
|
||||
</fieldset>
|
||||
</footer>
|
||||
|
||||
|
||||
<!-- This page `/circle-bag/` was built on 2026-09-08T23:18:32.745Z -->
|
||||
<!-- This page `/circle-bag/` was built on 2026-09-09T20:38:02.928Z -->
|
||||
</body>
|
||||
</html>
|
||||
|
||||
+173
-3
@@ -89,6 +89,13 @@
|
||||
--color-grey: light-dark(var(--color-grey-dark), var(--color-grey-light));
|
||||
}
|
||||
|
||||
:root:has(#theme-light:checked) {
|
||||
color-scheme: light;
|
||||
}
|
||||
:root:has(#theme-dark:checked) {
|
||||
color-scheme: dark;
|
||||
}
|
||||
|
||||
/* Base */
|
||||
|
||||
* {
|
||||
@@ -232,7 +239,7 @@ ul, ol, dl, li {
|
||||
}
|
||||
|
||||
li {
|
||||
line-height: 1.2 5;
|
||||
line-height: 1.2;
|
||||
margin-top: .65rem;
|
||||
margin-bottom: .65rem;
|
||||
}
|
||||
@@ -571,6 +578,111 @@ footer a:focus-visible {
|
||||
outline-color: var(--color-pink);
|
||||
}
|
||||
|
||||
/* color picker */
|
||||
#theme {
|
||||
display: flex;
|
||||
justify-content: center;
|
||||
margin: .5rem auto 0;
|
||||
padding: 0 .75rem .5rem;
|
||||
width: fit-content;
|
||||
border: .125rem solid var(--color-teal);
|
||||
border-radius: 2rem;
|
||||
}
|
||||
|
||||
#theme legend {
|
||||
margin: 0 auto;
|
||||
color: var(--color-teal);
|
||||
}
|
||||
|
||||
footer label {
|
||||
cursor: pointer;
|
||||
border: .125rem solid var(--color-pink);
|
||||
padding: 0 .25rem;
|
||||
color: var(--color-pink);
|
||||
background-color: var(--color-bg); /* this stops the box shadows from showing through */
|
||||
box-shadow: .15em .15em var(--color-shadow);
|
||||
/* Click animation handling */
|
||||
position: relative;
|
||||
top: 0;
|
||||
left: 0;
|
||||
transition: top .05s ease-in, left .05s ease-in;
|
||||
}
|
||||
|
||||
footer input:checked + label {
|
||||
color: var(--color-blue);
|
||||
border-color: var(--color-blue);
|
||||
}
|
||||
|
||||
footer label i {
|
||||
color: var(--color-teal);
|
||||
}
|
||||
|
||||
footer input:checked + label i {
|
||||
color: var(--color-pink);
|
||||
}
|
||||
|
||||
@media (any-hover: hover) {
|
||||
footer label:hover,
|
||||
footer input:checked + label:hover,
|
||||
footer label:hover i,
|
||||
footer input:checked + label:hover i {
|
||||
color: var(--color-bg);
|
||||
}
|
||||
|
||||
footer label:hover {
|
||||
background-color: var(--color-pink);
|
||||
}
|
||||
|
||||
footer input:checked + label:hover {
|
||||
background-color: var(--color-teal);
|
||||
}
|
||||
}
|
||||
|
||||
footer input:focus-visible + label,
|
||||
footer input:focus-visible + label i {
|
||||
color: var(--color-bg);
|
||||
background-color: var(--color-pink);
|
||||
border-color: var(--color-pink);
|
||||
}
|
||||
|
||||
footer input:checked:focus-visible + label,
|
||||
footer input:checked:focus-visible + label i {
|
||||
color: var(--color-bg);
|
||||
background-color: var(--color-teal);
|
||||
border-color: var(--color-teal);
|
||||
}
|
||||
|
||||
footer label:active {
|
||||
top: .09em;
|
||||
left: .09em;
|
||||
box-shadow: .05em .05em var(--color-shadow);
|
||||
}
|
||||
|
||||
label.theme-light {
|
||||
border-top-left-radius: 1rem;
|
||||
border-bottom-left-radius: 1rem;
|
||||
border-right: none;
|
||||
padding-left: .35rem;
|
||||
}
|
||||
|
||||
label.theme-auto {
|
||||
}
|
||||
|
||||
label.theme-dark {
|
||||
border-top-right-radius: 1rem;
|
||||
border-bottom-right-radius: 1rem;
|
||||
border-left: none;
|
||||
padding-right: .35rem;
|
||||
}
|
||||
|
||||
footer input {
|
||||
/* To allow screen reader to still access these. */
|
||||
/* From https://lyra.horse/blog/2025/08/you-dont-need-js/ */
|
||||
opacity: 0;
|
||||
position: absolute;
|
||||
pointer-events: none;
|
||||
}
|
||||
|
||||
/* Pagination */
|
||||
.pagination,
|
||||
.pagination li {
|
||||
@@ -833,6 +945,8 @@ pre[class*=language-]::selection {
|
||||
}
|
||||
}</style>
|
||||
|
||||
|
||||
|
||||
<script type="module">// Thank you to https://github.com/daviddarnes/heading-anchors
|
||||
// Thank you to https://amberwilson.co.uk/blog/are-your-anchor-links-accessible/
|
||||
|
||||
@@ -1063,7 +1177,42 @@ class HeadingAnchors extends HTMLElement {
|
||||
|
||||
HeadingAnchors.register();
|
||||
|
||||
export { HeadingAnchors }</script>
|
||||
export { HeadingAnchors }
|
||||
const THEME = "theme";
|
||||
|
||||
const saveTheme = (themeValue) => {
|
||||
localStorage.setItem(THEME, themeValue);
|
||||
};
|
||||
|
||||
const themeLight = document.getElementById("theme-light");
|
||||
themeLight.addEventListener("input", (e) => {
|
||||
saveTheme(themeLight.value);
|
||||
});
|
||||
|
||||
const themeAuto = document.getElementById("theme-auto");
|
||||
themeAuto.addEventListener("input", (e) => {
|
||||
saveTheme(themeAuto.auto);
|
||||
});
|
||||
|
||||
const themeDark = document.getElementById("theme-dark");
|
||||
themeDark.addEventListener("input", (e) => {
|
||||
saveTheme(themeDark.value);
|
||||
});
|
||||
|
||||
var currentThemeValue = localStorage.getItem(THEME);
|
||||
switch (currentThemeValue) {
|
||||
case "light":
|
||||
themeLight.checked = true;
|
||||
break;
|
||||
case "auto":
|
||||
themeAuto.checked = true;
|
||||
break;
|
||||
case "dark":
|
||||
themeDark.checked = true;
|
||||
break;
|
||||
default:
|
||||
themeAuto.checked = true;
|
||||
}</script>
|
||||
|
||||
</head>
|
||||
<body>
|
||||
@@ -1156,9 +1305,30 @@ export { HeadingAnchors }</script>
|
||||
</a>
|
||||
</li>
|
||||
</ul>
|
||||
|
||||
<fieldset id="theme">
|
||||
<legend>color scheme</legend>
|
||||
|
||||
<input type="radio" id="theme-light" name="theme" value="light">
|
||||
<label class="theme-light" for="theme-light">
|
||||
<i class="fa-regular fa-sun" aria-hidden="true"></i>
|
||||
light
|
||||
</label>
|
||||
|
||||
<input type="radio" id="theme-auto" name="theme" value="auto">
|
||||
<label class="theme-auto" for="theme-auto">
|
||||
auto
|
||||
</label>
|
||||
|
||||
<input type="radio" id="theme-dark" name="theme" value="dark">
|
||||
<label class="theme-dark" for="theme-dark">
|
||||
dark
|
||||
<i class="fa-regular fa-moon" aria-hidden="true"></i>
|
||||
</label>
|
||||
</fieldset>
|
||||
</footer>
|
||||
|
||||
|
||||
<!-- This page `/colophon/` was built on 2026-09-08T23:18:32.766Z -->
|
||||
<!-- This page `/colophon/` was built on 2026-09-09T20:38:02.943Z -->
|
||||
</body>
|
||||
</html>
|
||||
|
||||
+185
-15
@@ -478,6 +478,13 @@ body:has(dialog[open]) {
|
||||
--color-grey: light-dark(var(--color-grey-dark), var(--color-grey-light));
|
||||
}
|
||||
|
||||
:root:has(#theme-light:checked) {
|
||||
color-scheme: light;
|
||||
}
|
||||
:root:has(#theme-dark:checked) {
|
||||
color-scheme: dark;
|
||||
}
|
||||
|
||||
/* Base */
|
||||
|
||||
* {
|
||||
@@ -621,7 +628,7 @@ ul, ol, dl, li {
|
||||
}
|
||||
|
||||
li {
|
||||
line-height: 1.2 5;
|
||||
line-height: 1.2;
|
||||
margin-top: .65rem;
|
||||
margin-bottom: .65rem;
|
||||
}
|
||||
@@ -960,6 +967,111 @@ footer a:focus-visible {
|
||||
outline-color: var(--color-pink);
|
||||
}
|
||||
|
||||
/* color picker */
|
||||
#theme {
|
||||
display: flex;
|
||||
justify-content: center;
|
||||
margin: .5rem auto 0;
|
||||
padding: 0 .75rem .5rem;
|
||||
width: fit-content;
|
||||
border: .125rem solid var(--color-teal);
|
||||
border-radius: 2rem;
|
||||
}
|
||||
|
||||
#theme legend {
|
||||
margin: 0 auto;
|
||||
color: var(--color-teal);
|
||||
}
|
||||
|
||||
footer label {
|
||||
cursor: pointer;
|
||||
border: .125rem solid var(--color-pink);
|
||||
padding: 0 .25rem;
|
||||
color: var(--color-pink);
|
||||
background-color: var(--color-bg); /* this stops the box shadows from showing through */
|
||||
box-shadow: .15em .15em var(--color-shadow);
|
||||
/* Click animation handling */
|
||||
position: relative;
|
||||
top: 0;
|
||||
left: 0;
|
||||
transition: top .05s ease-in, left .05s ease-in;
|
||||
}
|
||||
|
||||
footer input:checked + label {
|
||||
color: var(--color-blue);
|
||||
border-color: var(--color-blue);
|
||||
}
|
||||
|
||||
footer label i {
|
||||
color: var(--color-teal);
|
||||
}
|
||||
|
||||
footer input:checked + label i {
|
||||
color: var(--color-pink);
|
||||
}
|
||||
|
||||
@media (any-hover: hover) {
|
||||
footer label:hover,
|
||||
footer input:checked + label:hover,
|
||||
footer label:hover i,
|
||||
footer input:checked + label:hover i {
|
||||
color: var(--color-bg);
|
||||
}
|
||||
|
||||
footer label:hover {
|
||||
background-color: var(--color-pink);
|
||||
}
|
||||
|
||||
footer input:checked + label:hover {
|
||||
background-color: var(--color-teal);
|
||||
}
|
||||
}
|
||||
|
||||
footer input:focus-visible + label,
|
||||
footer input:focus-visible + label i {
|
||||
color: var(--color-bg);
|
||||
background-color: var(--color-pink);
|
||||
border-color: var(--color-pink);
|
||||
}
|
||||
|
||||
footer input:checked:focus-visible + label,
|
||||
footer input:checked:focus-visible + label i {
|
||||
color: var(--color-bg);
|
||||
background-color: var(--color-teal);
|
||||
border-color: var(--color-teal);
|
||||
}
|
||||
|
||||
footer label:active {
|
||||
top: .09em;
|
||||
left: .09em;
|
||||
box-shadow: .05em .05em var(--color-shadow);
|
||||
}
|
||||
|
||||
label.theme-light {
|
||||
border-top-left-radius: 1rem;
|
||||
border-bottom-left-radius: 1rem;
|
||||
border-right: none;
|
||||
padding-left: .35rem;
|
||||
}
|
||||
|
||||
label.theme-auto {
|
||||
}
|
||||
|
||||
label.theme-dark {
|
||||
border-top-right-radius: 1rem;
|
||||
border-bottom-right-radius: 1rem;
|
||||
border-left: none;
|
||||
padding-right: .35rem;
|
||||
}
|
||||
|
||||
footer input {
|
||||
/* To allow screen reader to still access these. */
|
||||
/* From https://lyra.horse/blog/2025/08/you-dont-need-js/ */
|
||||
opacity: 0;
|
||||
position: absolute;
|
||||
pointer-events: none;
|
||||
}
|
||||
|
||||
/* Pagination */
|
||||
.pagination,
|
||||
.pagination li {
|
||||
@@ -1222,6 +1334,8 @@ pre[class*=language-]::selection {
|
||||
}
|
||||
}</style>
|
||||
|
||||
|
||||
|
||||
<script type="module">// Thank you to https://github.com/daviddarnes/heading-anchors
|
||||
// Thank you to https://amberwilson.co.uk/blog/are-your-anchor-links-accessible/
|
||||
|
||||
@@ -1476,6 +1590,41 @@ if (window.innerWidth > 650) {
|
||||
dialog.close();
|
||||
}
|
||||
});
|
||||
}
|
||||
const THEME = "theme";
|
||||
|
||||
const saveTheme = (themeValue) => {
|
||||
localStorage.setItem(THEME, themeValue);
|
||||
};
|
||||
|
||||
const themeLight = document.getElementById("theme-light");
|
||||
themeLight.addEventListener("input", (e) => {
|
||||
saveTheme(themeLight.value);
|
||||
});
|
||||
|
||||
const themeAuto = document.getElementById("theme-auto");
|
||||
themeAuto.addEventListener("input", (e) => {
|
||||
saveTheme(themeAuto.auto);
|
||||
});
|
||||
|
||||
const themeDark = document.getElementById("theme-dark");
|
||||
themeDark.addEventListener("input", (e) => {
|
||||
saveTheme(themeDark.value);
|
||||
});
|
||||
|
||||
var currentThemeValue = localStorage.getItem(THEME);
|
||||
switch (currentThemeValue) {
|
||||
case "light":
|
||||
themeLight.checked = true;
|
||||
break;
|
||||
case "auto":
|
||||
themeAuto.checked = true;
|
||||
break;
|
||||
case "dark":
|
||||
themeDark.checked = true;
|
||||
break;
|
||||
default:
|
||||
themeAuto.checked = true;
|
||||
}</script>
|
||||
|
||||
</head>
|
||||
@@ -1626,49 +1775,49 @@ if (window.innerWidth > 650) {
|
||||
<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="/bottom-growth/">
|
||||
<h2 data-ha-exclude="" id="bottom-growth-mature">bottom growth (mature)</h2>
|
||||
|
||||
<ul class="postlist-tags">
|
||||
|
||||
<li>print</li>
|
||||
|
||||
<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">
|
||||
<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="/spotted-towhee/">
|
||||
<h2 data-ha-exclude="" id="spotted-towhee">spotted towhee </h2>
|
||||
<a class="postlink" href="/luminescent/">
|
||||
<h2 data-ha-exclude="" id="luminescent-mature">luminescent (mature)</h2>
|
||||
|
||||
<ul class="postlist-tags">
|
||||
|
||||
<li>print</li>
|
||||
|
||||
<li>card</li>
|
||||
<li>gender</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/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="/networks-of-trans-care/">
|
||||
<h2 data-ha-exclude="" id="networks-of-trans-care">networks of trans care </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>gender</li>
|
||||
<li>shirt</li>
|
||||
|
||||
<li>print</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">
|
||||
<img src="/img/artisans-coop-shirt.jpg" alt="A black tank top laid on a desk. In white ink it reads 'Artisans Cooperative' with a print of some chickens and a quail." loading="lazy" decoding="async" width="1000" height="1333">
|
||||
|
||||
</a>
|
||||
</li>
|
||||
@@ -1701,9 +1850,30 @@ if (window.innerWidth > 650) {
|
||||
</a>
|
||||
</li>
|
||||
</ul>
|
||||
|
||||
<fieldset id="theme">
|
||||
<legend>color scheme</legend>
|
||||
|
||||
<input type="radio" id="theme-light" name="theme" value="light">
|
||||
<label class="theme-light" for="theme-light">
|
||||
<i class="fa-regular fa-sun" aria-hidden="true"></i>
|
||||
light
|
||||
</label>
|
||||
|
||||
<input type="radio" id="theme-auto" name="theme" value="auto">
|
||||
<label class="theme-auto" for="theme-auto">
|
||||
auto
|
||||
</label>
|
||||
|
||||
<input type="radio" id="theme-dark" name="theme" value="dark">
|
||||
<label class="theme-dark" for="theme-dark">
|
||||
dark
|
||||
<i class="fa-regular fa-moon" aria-hidden="true"></i>
|
||||
</label>
|
||||
</fieldset>
|
||||
</footer>
|
||||
|
||||
|
||||
<!-- This page `/coming-out/` was built on 2026-09-08T23:18:32.739Z -->
|
||||
<!-- This page `/coming-out/` was built on 2026-09-09T20:38:02.907Z -->
|
||||
</body>
|
||||
</html>
|
||||
|
||||
@@ -478,6 +478,13 @@ body:has(dialog[open]) {
|
||||
--color-grey: light-dark(var(--color-grey-dark), var(--color-grey-light));
|
||||
}
|
||||
|
||||
:root:has(#theme-light:checked) {
|
||||
color-scheme: light;
|
||||
}
|
||||
:root:has(#theme-dark:checked) {
|
||||
color-scheme: dark;
|
||||
}
|
||||
|
||||
/* Base */
|
||||
|
||||
* {
|
||||
@@ -621,7 +628,7 @@ ul, ol, dl, li {
|
||||
}
|
||||
|
||||
li {
|
||||
line-height: 1.2 5;
|
||||
line-height: 1.2;
|
||||
margin-top: .65rem;
|
||||
margin-bottom: .65rem;
|
||||
}
|
||||
@@ -960,6 +967,111 @@ footer a:focus-visible {
|
||||
outline-color: var(--color-pink);
|
||||
}
|
||||
|
||||
/* color picker */
|
||||
#theme {
|
||||
display: flex;
|
||||
justify-content: center;
|
||||
margin: .5rem auto 0;
|
||||
padding: 0 .75rem .5rem;
|
||||
width: fit-content;
|
||||
border: .125rem solid var(--color-teal);
|
||||
border-radius: 2rem;
|
||||
}
|
||||
|
||||
#theme legend {
|
||||
margin: 0 auto;
|
||||
color: var(--color-teal);
|
||||
}
|
||||
|
||||
footer label {
|
||||
cursor: pointer;
|
||||
border: .125rem solid var(--color-pink);
|
||||
padding: 0 .25rem;
|
||||
color: var(--color-pink);
|
||||
background-color: var(--color-bg); /* this stops the box shadows from showing through */
|
||||
box-shadow: .15em .15em var(--color-shadow);
|
||||
/* Click animation handling */
|
||||
position: relative;
|
||||
top: 0;
|
||||
left: 0;
|
||||
transition: top .05s ease-in, left .05s ease-in;
|
||||
}
|
||||
|
||||
footer input:checked + label {
|
||||
color: var(--color-blue);
|
||||
border-color: var(--color-blue);
|
||||
}
|
||||
|
||||
footer label i {
|
||||
color: var(--color-teal);
|
||||
}
|
||||
|
||||
footer input:checked + label i {
|
||||
color: var(--color-pink);
|
||||
}
|
||||
|
||||
@media (any-hover: hover) {
|
||||
footer label:hover,
|
||||
footer input:checked + label:hover,
|
||||
footer label:hover i,
|
||||
footer input:checked + label:hover i {
|
||||
color: var(--color-bg);
|
||||
}
|
||||
|
||||
footer label:hover {
|
||||
background-color: var(--color-pink);
|
||||
}
|
||||
|
||||
footer input:checked + label:hover {
|
||||
background-color: var(--color-teal);
|
||||
}
|
||||
}
|
||||
|
||||
footer input:focus-visible + label,
|
||||
footer input:focus-visible + label i {
|
||||
color: var(--color-bg);
|
||||
background-color: var(--color-pink);
|
||||
border-color: var(--color-pink);
|
||||
}
|
||||
|
||||
footer input:checked:focus-visible + label,
|
||||
footer input:checked:focus-visible + label i {
|
||||
color: var(--color-bg);
|
||||
background-color: var(--color-teal);
|
||||
border-color: var(--color-teal);
|
||||
}
|
||||
|
||||
footer label:active {
|
||||
top: .09em;
|
||||
left: .09em;
|
||||
box-shadow: .05em .05em var(--color-shadow);
|
||||
}
|
||||
|
||||
label.theme-light {
|
||||
border-top-left-radius: 1rem;
|
||||
border-bottom-left-radius: 1rem;
|
||||
border-right: none;
|
||||
padding-left: .35rem;
|
||||
}
|
||||
|
||||
label.theme-auto {
|
||||
}
|
||||
|
||||
label.theme-dark {
|
||||
border-top-right-radius: 1rem;
|
||||
border-bottom-right-radius: 1rem;
|
||||
border-left: none;
|
||||
padding-right: .35rem;
|
||||
}
|
||||
|
||||
footer input {
|
||||
/* To allow screen reader to still access these. */
|
||||
/* From https://lyra.horse/blog/2025/08/you-dont-need-js/ */
|
||||
opacity: 0;
|
||||
position: absolute;
|
||||
pointer-events: none;
|
||||
}
|
||||
|
||||
/* Pagination */
|
||||
.pagination,
|
||||
.pagination li {
|
||||
@@ -1222,6 +1334,8 @@ pre[class*=language-]::selection {
|
||||
}
|
||||
}</style>
|
||||
|
||||
|
||||
|
||||
<script type="module">// Thank you to https://github.com/daviddarnes/heading-anchors
|
||||
// Thank you to https://amberwilson.co.uk/blog/are-your-anchor-links-accessible/
|
||||
|
||||
@@ -1476,6 +1590,41 @@ if (window.innerWidth > 650) {
|
||||
dialog.close();
|
||||
}
|
||||
});
|
||||
}
|
||||
const THEME = "theme";
|
||||
|
||||
const saveTheme = (themeValue) => {
|
||||
localStorage.setItem(THEME, themeValue);
|
||||
};
|
||||
|
||||
const themeLight = document.getElementById("theme-light");
|
||||
themeLight.addEventListener("input", (e) => {
|
||||
saveTheme(themeLight.value);
|
||||
});
|
||||
|
||||
const themeAuto = document.getElementById("theme-auto");
|
||||
themeAuto.addEventListener("input", (e) => {
|
||||
saveTheme(themeAuto.auto);
|
||||
});
|
||||
|
||||
const themeDark = document.getElementById("theme-dark");
|
||||
themeDark.addEventListener("input", (e) => {
|
||||
saveTheme(themeDark.value);
|
||||
});
|
||||
|
||||
var currentThemeValue = localStorage.getItem(THEME);
|
||||
switch (currentThemeValue) {
|
||||
case "light":
|
||||
themeLight.checked = true;
|
||||
break;
|
||||
case "auto":
|
||||
themeAuto.checked = true;
|
||||
break;
|
||||
case "dark":
|
||||
themeDark.checked = true;
|
||||
break;
|
||||
default:
|
||||
themeAuto.checked = true;
|
||||
}</script>
|
||||
|
||||
</head>
|
||||
@@ -1846,29 +1995,29 @@ if (window.innerWidth > 650) {
|
||||
</li>
|
||||
|
||||
<li class="post">
|
||||
<a class="postlink" href="/backend-accessibility/">
|
||||
<h2 data-ha-exclude="" id="backend-accessibility">backend accessibility </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/camelCase-print.jpg" alt="A carved stamp next to its print. The print reads '#camelCase' in a slightly formal-looking italic font." loading="lazy" decoding="async" width="1000" height="750">
|
||||
<img src="/img/snacking-seagull.jpg" alt="Image unrelated to post. A seagull floating in the water with a starfish hanging out of eir mouth." loading="lazy" decoding="async" width="1000" height="666">
|
||||
|
||||
</a>
|
||||
</li>
|
||||
|
||||
<li class="post">
|
||||
<a class="postlink" href="/my-favorite-git-flag/">
|
||||
<h2 data-ha-exclude="" id="my-favorite-git-flag">my favorite git flag </h2>
|
||||
<a class="postlink" href="/visual-site-builders-and-accessibility/">
|
||||
<h2 data-ha-exclude="" id="visual-site-builders-and-accessibility">visual site builders and accessibility </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/roses.jpg" alt="Image unrelated to post. Two peach-colored roses, the farther away one a bit out of focus." loading="lazy" decoding="async" width="1000" height="666">
|
||||
|
||||
</a>
|
||||
</li>
|
||||
@@ -1901,9 +2050,30 @@ if (window.innerWidth > 650) {
|
||||
</a>
|
||||
</li>
|
||||
</ul>
|
||||
|
||||
<fieldset id="theme">
|
||||
<legend>color scheme</legend>
|
||||
|
||||
<input type="radio" id="theme-light" name="theme" value="light">
|
||||
<label class="theme-light" for="theme-light">
|
||||
<i class="fa-regular fa-sun" aria-hidden="true"></i>
|
||||
light
|
||||
</label>
|
||||
|
||||
<input type="radio" id="theme-auto" name="theme" value="auto">
|
||||
<label class="theme-auto" for="theme-auto">
|
||||
auto
|
||||
</label>
|
||||
|
||||
<input type="radio" id="theme-dark" name="theme" value="dark">
|
||||
<label class="theme-dark" for="theme-dark">
|
||||
dark
|
||||
<i class="fa-regular fa-moon" aria-hidden="true"></i>
|
||||
</label>
|
||||
</fieldset>
|
||||
</footer>
|
||||
|
||||
|
||||
<!-- This page `/comparing-text-editors/` was built on 2026-09-08T23:18:32.755Z -->
|
||||
<!-- This page `/comparing-text-editors/` was built on 2026-09-09T20:38:02.937Z -->
|
||||
</body>
|
||||
</html>
|
||||
|
||||
@@ -478,6 +478,13 @@ body:has(dialog[open]) {
|
||||
--color-grey: light-dark(var(--color-grey-dark), var(--color-grey-light));
|
||||
}
|
||||
|
||||
:root:has(#theme-light:checked) {
|
||||
color-scheme: light;
|
||||
}
|
||||
:root:has(#theme-dark:checked) {
|
||||
color-scheme: dark;
|
||||
}
|
||||
|
||||
/* Base */
|
||||
|
||||
* {
|
||||
@@ -621,7 +628,7 @@ ul, ol, dl, li {
|
||||
}
|
||||
|
||||
li {
|
||||
line-height: 1.2 5;
|
||||
line-height: 1.2;
|
||||
margin-top: .65rem;
|
||||
margin-bottom: .65rem;
|
||||
}
|
||||
@@ -960,6 +967,111 @@ footer a:focus-visible {
|
||||
outline-color: var(--color-pink);
|
||||
}
|
||||
|
||||
/* color picker */
|
||||
#theme {
|
||||
display: flex;
|
||||
justify-content: center;
|
||||
margin: .5rem auto 0;
|
||||
padding: 0 .75rem .5rem;
|
||||
width: fit-content;
|
||||
border: .125rem solid var(--color-teal);
|
||||
border-radius: 2rem;
|
||||
}
|
||||
|
||||
#theme legend {
|
||||
margin: 0 auto;
|
||||
color: var(--color-teal);
|
||||
}
|
||||
|
||||
footer label {
|
||||
cursor: pointer;
|
||||
border: .125rem solid var(--color-pink);
|
||||
padding: 0 .25rem;
|
||||
color: var(--color-pink);
|
||||
background-color: var(--color-bg); /* this stops the box shadows from showing through */
|
||||
box-shadow: .15em .15em var(--color-shadow);
|
||||
/* Click animation handling */
|
||||
position: relative;
|
||||
top: 0;
|
||||
left: 0;
|
||||
transition: top .05s ease-in, left .05s ease-in;
|
||||
}
|
||||
|
||||
footer input:checked + label {
|
||||
color: var(--color-blue);
|
||||
border-color: var(--color-blue);
|
||||
}
|
||||
|
||||
footer label i {
|
||||
color: var(--color-teal);
|
||||
}
|
||||
|
||||
footer input:checked + label i {
|
||||
color: var(--color-pink);
|
||||
}
|
||||
|
||||
@media (any-hover: hover) {
|
||||
footer label:hover,
|
||||
footer input:checked + label:hover,
|
||||
footer label:hover i,
|
||||
footer input:checked + label:hover i {
|
||||
color: var(--color-bg);
|
||||
}
|
||||
|
||||
footer label:hover {
|
||||
background-color: var(--color-pink);
|
||||
}
|
||||
|
||||
footer input:checked + label:hover {
|
||||
background-color: var(--color-teal);
|
||||
}
|
||||
}
|
||||
|
||||
footer input:focus-visible + label,
|
||||
footer input:focus-visible + label i {
|
||||
color: var(--color-bg);
|
||||
background-color: var(--color-pink);
|
||||
border-color: var(--color-pink);
|
||||
}
|
||||
|
||||
footer input:checked:focus-visible + label,
|
||||
footer input:checked:focus-visible + label i {
|
||||
color: var(--color-bg);
|
||||
background-color: var(--color-teal);
|
||||
border-color: var(--color-teal);
|
||||
}
|
||||
|
||||
footer label:active {
|
||||
top: .09em;
|
||||
left: .09em;
|
||||
box-shadow: .05em .05em var(--color-shadow);
|
||||
}
|
||||
|
||||
label.theme-light {
|
||||
border-top-left-radius: 1rem;
|
||||
border-bottom-left-radius: 1rem;
|
||||
border-right: none;
|
||||
padding-left: .35rem;
|
||||
}
|
||||
|
||||
label.theme-auto {
|
||||
}
|
||||
|
||||
label.theme-dark {
|
||||
border-top-right-radius: 1rem;
|
||||
border-bottom-right-radius: 1rem;
|
||||
border-left: none;
|
||||
padding-right: .35rem;
|
||||
}
|
||||
|
||||
footer input {
|
||||
/* To allow screen reader to still access these. */
|
||||
/* From https://lyra.horse/blog/2025/08/you-dont-need-js/ */
|
||||
opacity: 0;
|
||||
position: absolute;
|
||||
pointer-events: none;
|
||||
}
|
||||
|
||||
/* Pagination */
|
||||
.pagination,
|
||||
.pagination li {
|
||||
@@ -1222,6 +1334,8 @@ pre[class*=language-]::selection {
|
||||
}
|
||||
}</style>
|
||||
|
||||
|
||||
|
||||
<script type="module">// Thank you to https://github.com/daviddarnes/heading-anchors
|
||||
// Thank you to https://amberwilson.co.uk/blog/are-your-anchor-links-accessible/
|
||||
|
||||
@@ -1476,6 +1590,41 @@ if (window.innerWidth > 650) {
|
||||
dialog.close();
|
||||
}
|
||||
});
|
||||
}
|
||||
const THEME = "theme";
|
||||
|
||||
const saveTheme = (themeValue) => {
|
||||
localStorage.setItem(THEME, themeValue);
|
||||
};
|
||||
|
||||
const themeLight = document.getElementById("theme-light");
|
||||
themeLight.addEventListener("input", (e) => {
|
||||
saveTheme(themeLight.value);
|
||||
});
|
||||
|
||||
const themeAuto = document.getElementById("theme-auto");
|
||||
themeAuto.addEventListener("input", (e) => {
|
||||
saveTheme(themeAuto.auto);
|
||||
});
|
||||
|
||||
const themeDark = document.getElementById("theme-dark");
|
||||
themeDark.addEventListener("input", (e) => {
|
||||
saveTheme(themeDark.value);
|
||||
});
|
||||
|
||||
var currentThemeValue = localStorage.getItem(THEME);
|
||||
switch (currentThemeValue) {
|
||||
case "light":
|
||||
themeLight.checked = true;
|
||||
break;
|
||||
case "auto":
|
||||
themeAuto.checked = true;
|
||||
break;
|
||||
case "dark":
|
||||
themeDark.checked = true;
|
||||
break;
|
||||
default:
|
||||
themeAuto.checked = true;
|
||||
}</script>
|
||||
|
||||
</head>
|
||||
@@ -1623,44 +1772,40 @@ if (window.innerWidth > 650) {
|
||||
<ol id="postlist">
|
||||
|
||||
<li class="post">
|
||||
<a class="postlink" href="/anarchy-autism/">
|
||||
<h2 data-ha-exclude="" id="anarchy-autism">anarchy autism </h2>
|
||||
<a class="postlink" href="/seedling/">
|
||||
<h2 data-ha-exclude="" id="seedling">seedling </h2>
|
||||
|
||||
<ul class="postlist-tags">
|
||||
|
||||
<li>print</li>
|
||||
|
||||
<li>sticker</li>
|
||||
|
||||
<li>shirt</li>
|
||||
|
||||
<li>pin</li>
|
||||
<li>card</li>
|
||||
|
||||
</ul>
|
||||
<img src="/img/anarchy-autism-rainbow-print.jpg" alt="A print in rainbow ink that says autism with the anarchy A." loading="lazy" decoding="async" width="1000" height="750">
|
||||
<img src="/img/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="/hair/">
|
||||
<h2 data-ha-exclude="" id="hair">hair </h2>
|
||||
<a class="postlink" href="/artisans-cooperative-cards/">
|
||||
<h2 data-ha-exclude="" id="artisans-cooperative-cards">artisans cooperative cards </h2>
|
||||
|
||||
<ul class="postlist-tags">
|
||||
|
||||
<li>print</li>
|
||||
|
||||
<li>gender</li>
|
||||
<li>card</li>
|
||||
|
||||
</ul>
|
||||
<img src="/img/hair-print.jpg" alt="A print in black ink of belly hair." loading="lazy" decoding="async" width="1000" height="710">
|
||||
<img src="/img/artisans-coop-cards.jpg" alt="2 white greeting cards with the Artisans Cooperative logo, a chicken. One card has a single print of the chicken in black ink, and the other has two overlapping prints in blue and red ink" loading="lazy" decoding="async" width="1000" height="1000">
|
||||
|
||||
</a>
|
||||
</li>
|
||||
|
||||
<li class="post">
|
||||
<a class="postlink" href="/flicker/">
|
||||
<h2 data-ha-exclude="" id="flicker">flicker </h2>
|
||||
<a class="postlink" href="/fat-raccoon/">
|
||||
<h2 data-ha-exclude="" id="fat-raccoon">fat raccoon </h2>
|
||||
|
||||
<ul class="postlist-tags">
|
||||
|
||||
@@ -1671,7 +1816,7 @@ if (window.innerWidth > 650) {
|
||||
<li>shirt</li>
|
||||
|
||||
</ul>
|
||||
<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">
|
||||
<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">
|
||||
|
||||
</a>
|
||||
</li>
|
||||
@@ -1704,9 +1849,30 @@ if (window.innerWidth > 650) {
|
||||
</a>
|
||||
</li>
|
||||
</ul>
|
||||
|
||||
<fieldset id="theme">
|
||||
<legend>color scheme</legend>
|
||||
|
||||
<input type="radio" id="theme-light" name="theme" value="light">
|
||||
<label class="theme-light" for="theme-light">
|
||||
<i class="fa-regular fa-sun" aria-hidden="true"></i>
|
||||
light
|
||||
</label>
|
||||
|
||||
<input type="radio" id="theme-auto" name="theme" value="auto">
|
||||
<label class="theme-auto" for="theme-auto">
|
||||
auto
|
||||
</label>
|
||||
|
||||
<input type="radio" id="theme-dark" name="theme" value="dark">
|
||||
<label class="theme-dark" for="theme-dark">
|
||||
dark
|
||||
<i class="fa-regular fa-moon" aria-hidden="true"></i>
|
||||
</label>
|
||||
</fieldset>
|
||||
</footer>
|
||||
|
||||
|
||||
<!-- This page `/congrats-on-the-autism-adhd/` was built on 2026-09-08T23:18:32.730Z -->
|
||||
<!-- This page `/congrats-on-the-autism-adhd/` was built on 2026-09-09T20:38:02.891Z -->
|
||||
</body>
|
||||
</html>
|
||||
|
||||
+191
-13
@@ -478,6 +478,13 @@ body:has(dialog[open]) {
|
||||
--color-grey: light-dark(var(--color-grey-dark), var(--color-grey-light));
|
||||
}
|
||||
|
||||
:root:has(#theme-light:checked) {
|
||||
color-scheme: light;
|
||||
}
|
||||
:root:has(#theme-dark:checked) {
|
||||
color-scheme: dark;
|
||||
}
|
||||
|
||||
/* Base */
|
||||
|
||||
* {
|
||||
@@ -621,7 +628,7 @@ ul, ol, dl, li {
|
||||
}
|
||||
|
||||
li {
|
||||
line-height: 1.2 5;
|
||||
line-height: 1.2;
|
||||
margin-top: .65rem;
|
||||
margin-bottom: .65rem;
|
||||
}
|
||||
@@ -960,6 +967,111 @@ footer a:focus-visible {
|
||||
outline-color: var(--color-pink);
|
||||
}
|
||||
|
||||
/* color picker */
|
||||
#theme {
|
||||
display: flex;
|
||||
justify-content: center;
|
||||
margin: .5rem auto 0;
|
||||
padding: 0 .75rem .5rem;
|
||||
width: fit-content;
|
||||
border: .125rem solid var(--color-teal);
|
||||
border-radius: 2rem;
|
||||
}
|
||||
|
||||
#theme legend {
|
||||
margin: 0 auto;
|
||||
color: var(--color-teal);
|
||||
}
|
||||
|
||||
footer label {
|
||||
cursor: pointer;
|
||||
border: .125rem solid var(--color-pink);
|
||||
padding: 0 .25rem;
|
||||
color: var(--color-pink);
|
||||
background-color: var(--color-bg); /* this stops the box shadows from showing through */
|
||||
box-shadow: .15em .15em var(--color-shadow);
|
||||
/* Click animation handling */
|
||||
position: relative;
|
||||
top: 0;
|
||||
left: 0;
|
||||
transition: top .05s ease-in, left .05s ease-in;
|
||||
}
|
||||
|
||||
footer input:checked + label {
|
||||
color: var(--color-blue);
|
||||
border-color: var(--color-blue);
|
||||
}
|
||||
|
||||
footer label i {
|
||||
color: var(--color-teal);
|
||||
}
|
||||
|
||||
footer input:checked + label i {
|
||||
color: var(--color-pink);
|
||||
}
|
||||
|
||||
@media (any-hover: hover) {
|
||||
footer label:hover,
|
||||
footer input:checked + label:hover,
|
||||
footer label:hover i,
|
||||
footer input:checked + label:hover i {
|
||||
color: var(--color-bg);
|
||||
}
|
||||
|
||||
footer label:hover {
|
||||
background-color: var(--color-pink);
|
||||
}
|
||||
|
||||
footer input:checked + label:hover {
|
||||
background-color: var(--color-teal);
|
||||
}
|
||||
}
|
||||
|
||||
footer input:focus-visible + label,
|
||||
footer input:focus-visible + label i {
|
||||
color: var(--color-bg);
|
||||
background-color: var(--color-pink);
|
||||
border-color: var(--color-pink);
|
||||
}
|
||||
|
||||
footer input:checked:focus-visible + label,
|
||||
footer input:checked:focus-visible + label i {
|
||||
color: var(--color-bg);
|
||||
background-color: var(--color-teal);
|
||||
border-color: var(--color-teal);
|
||||
}
|
||||
|
||||
footer label:active {
|
||||
top: .09em;
|
||||
left: .09em;
|
||||
box-shadow: .05em .05em var(--color-shadow);
|
||||
}
|
||||
|
||||
label.theme-light {
|
||||
border-top-left-radius: 1rem;
|
||||
border-bottom-left-radius: 1rem;
|
||||
border-right: none;
|
||||
padding-left: .35rem;
|
||||
}
|
||||
|
||||
label.theme-auto {
|
||||
}
|
||||
|
||||
label.theme-dark {
|
||||
border-top-right-radius: 1rem;
|
||||
border-bottom-right-radius: 1rem;
|
||||
border-left: none;
|
||||
padding-right: .35rem;
|
||||
}
|
||||
|
||||
footer input {
|
||||
/* To allow screen reader to still access these. */
|
||||
/* From https://lyra.horse/blog/2025/08/you-dont-need-js/ */
|
||||
opacity: 0;
|
||||
position: absolute;
|
||||
pointer-events: none;
|
||||
}
|
||||
|
||||
/* Pagination */
|
||||
.pagination,
|
||||
.pagination li {
|
||||
@@ -1222,6 +1334,8 @@ pre[class*=language-]::selection {
|
||||
}
|
||||
}</style>
|
||||
|
||||
|
||||
|
||||
<script type="module">// Thank you to https://github.com/daviddarnes/heading-anchors
|
||||
// Thank you to https://amberwilson.co.uk/blog/are-your-anchor-links-accessible/
|
||||
|
||||
@@ -1476,6 +1590,41 @@ if (window.innerWidth > 650) {
|
||||
dialog.close();
|
||||
}
|
||||
});
|
||||
}
|
||||
const THEME = "theme";
|
||||
|
||||
const saveTheme = (themeValue) => {
|
||||
localStorage.setItem(THEME, themeValue);
|
||||
};
|
||||
|
||||
const themeLight = document.getElementById("theme-light");
|
||||
themeLight.addEventListener("input", (e) => {
|
||||
saveTheme(themeLight.value);
|
||||
});
|
||||
|
||||
const themeAuto = document.getElementById("theme-auto");
|
||||
themeAuto.addEventListener("input", (e) => {
|
||||
saveTheme(themeAuto.auto);
|
||||
});
|
||||
|
||||
const themeDark = document.getElementById("theme-dark");
|
||||
themeDark.addEventListener("input", (e) => {
|
||||
saveTheme(themeDark.value);
|
||||
});
|
||||
|
||||
var currentThemeValue = localStorage.getItem(THEME);
|
||||
switch (currentThemeValue) {
|
||||
case "light":
|
||||
themeLight.checked = true;
|
||||
break;
|
||||
case "auto":
|
||||
themeAuto.checked = true;
|
||||
break;
|
||||
case "dark":
|
||||
themeDark.checked = true;
|
||||
break;
|
||||
default:
|
||||
themeAuto.checked = true;
|
||||
}</script>
|
||||
|
||||
</head>
|
||||
@@ -1629,8 +1778,8 @@ if (window.innerWidth > 650) {
|
||||
<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="/nonbinary-flag/">
|
||||
<h2 data-ha-exclude="" id="nonbinary-flag">nonbinary flag </h2>
|
||||
|
||||
<ul class="postlist-tags">
|
||||
|
||||
@@ -1641,37 +1790,45 @@ if (window.innerWidth > 650) {
|
||||
<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/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="/become-unbutterable/">
|
||||
<h2 data-ha-exclude="" id="become-unbutterable">become unbutterable </h2>
|
||||
<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/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, 'become unbutterable.'" loading="lazy" decoding="async" width="1000" height="562">
|
||||
<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="/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="/geese/">
|
||||
<h2 data-ha-exclude="" id="geese">geese </h2>
|
||||
|
||||
<ul class="postlist-tags">
|
||||
|
||||
<li>gender</li>
|
||||
<li>print</li>
|
||||
|
||||
<li>zine</li>
|
||||
<li>card</li>
|
||||
|
||||
<li>shirt</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/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>
|
||||
@@ -1704,9 +1861,30 @@ if (window.innerWidth > 650) {
|
||||
</a>
|
||||
</li>
|
||||
</ul>
|
||||
|
||||
<fieldset id="theme">
|
||||
<legend>color scheme</legend>
|
||||
|
||||
<input type="radio" id="theme-light" name="theme" value="light">
|
||||
<label class="theme-light" for="theme-light">
|
||||
<i class="fa-regular fa-sun" aria-hidden="true"></i>
|
||||
light
|
||||
</label>
|
||||
|
||||
<input type="radio" id="theme-auto" name="theme" value="auto">
|
||||
<label class="theme-auto" for="theme-auto">
|
||||
auto
|
||||
</label>
|
||||
|
||||
<input type="radio" id="theme-dark" name="theme" value="dark">
|
||||
<label class="theme-dark" for="theme-dark">
|
||||
dark
|
||||
<i class="fa-regular fa-moon" aria-hidden="true"></i>
|
||||
</label>
|
||||
</fieldset>
|
||||
</footer>
|
||||
|
||||
|
||||
<!-- This page `/congrats-on-the-gay/` was built on 2026-09-08T23:18:32.733Z -->
|
||||
<!-- This page `/congrats-on-the-gay/` was built on 2026-09-09T20:38:02.899Z -->
|
||||
</body>
|
||||
</html>
|
||||
|
||||
+173
-3
@@ -89,6 +89,13 @@
|
||||
--color-grey: light-dark(var(--color-grey-dark), var(--color-grey-light));
|
||||
}
|
||||
|
||||
:root:has(#theme-light:checked) {
|
||||
color-scheme: light;
|
||||
}
|
||||
:root:has(#theme-dark:checked) {
|
||||
color-scheme: dark;
|
||||
}
|
||||
|
||||
/* Base */
|
||||
|
||||
* {
|
||||
@@ -232,7 +239,7 @@ ul, ol, dl, li {
|
||||
}
|
||||
|
||||
li {
|
||||
line-height: 1.2 5;
|
||||
line-height: 1.2;
|
||||
margin-top: .65rem;
|
||||
margin-bottom: .65rem;
|
||||
}
|
||||
@@ -571,6 +578,111 @@ footer a:focus-visible {
|
||||
outline-color: var(--color-pink);
|
||||
}
|
||||
|
||||
/* color picker */
|
||||
#theme {
|
||||
display: flex;
|
||||
justify-content: center;
|
||||
margin: .5rem auto 0;
|
||||
padding: 0 .75rem .5rem;
|
||||
width: fit-content;
|
||||
border: .125rem solid var(--color-teal);
|
||||
border-radius: 2rem;
|
||||
}
|
||||
|
||||
#theme legend {
|
||||
margin: 0 auto;
|
||||
color: var(--color-teal);
|
||||
}
|
||||
|
||||
footer label {
|
||||
cursor: pointer;
|
||||
border: .125rem solid var(--color-pink);
|
||||
padding: 0 .25rem;
|
||||
color: var(--color-pink);
|
||||
background-color: var(--color-bg); /* this stops the box shadows from showing through */
|
||||
box-shadow: .15em .15em var(--color-shadow);
|
||||
/* Click animation handling */
|
||||
position: relative;
|
||||
top: 0;
|
||||
left: 0;
|
||||
transition: top .05s ease-in, left .05s ease-in;
|
||||
}
|
||||
|
||||
footer input:checked + label {
|
||||
color: var(--color-blue);
|
||||
border-color: var(--color-blue);
|
||||
}
|
||||
|
||||
footer label i {
|
||||
color: var(--color-teal);
|
||||
}
|
||||
|
||||
footer input:checked + label i {
|
||||
color: var(--color-pink);
|
||||
}
|
||||
|
||||
@media (any-hover: hover) {
|
||||
footer label:hover,
|
||||
footer input:checked + label:hover,
|
||||
footer label:hover i,
|
||||
footer input:checked + label:hover i {
|
||||
color: var(--color-bg);
|
||||
}
|
||||
|
||||
footer label:hover {
|
||||
background-color: var(--color-pink);
|
||||
}
|
||||
|
||||
footer input:checked + label:hover {
|
||||
background-color: var(--color-teal);
|
||||
}
|
||||
}
|
||||
|
||||
footer input:focus-visible + label,
|
||||
footer input:focus-visible + label i {
|
||||
color: var(--color-bg);
|
||||
background-color: var(--color-pink);
|
||||
border-color: var(--color-pink);
|
||||
}
|
||||
|
||||
footer input:checked:focus-visible + label,
|
||||
footer input:checked:focus-visible + label i {
|
||||
color: var(--color-bg);
|
||||
background-color: var(--color-teal);
|
||||
border-color: var(--color-teal);
|
||||
}
|
||||
|
||||
footer label:active {
|
||||
top: .09em;
|
||||
left: .09em;
|
||||
box-shadow: .05em .05em var(--color-shadow);
|
||||
}
|
||||
|
||||
label.theme-light {
|
||||
border-top-left-radius: 1rem;
|
||||
border-bottom-left-radius: 1rem;
|
||||
border-right: none;
|
||||
padding-left: .35rem;
|
||||
}
|
||||
|
||||
label.theme-auto {
|
||||
}
|
||||
|
||||
label.theme-dark {
|
||||
border-top-right-radius: 1rem;
|
||||
border-bottom-right-radius: 1rem;
|
||||
border-left: none;
|
||||
padding-right: .35rem;
|
||||
}
|
||||
|
||||
footer input {
|
||||
/* To allow screen reader to still access these. */
|
||||
/* From https://lyra.horse/blog/2025/08/you-dont-need-js/ */
|
||||
opacity: 0;
|
||||
position: absolute;
|
||||
pointer-events: none;
|
||||
}
|
||||
|
||||
/* Pagination */
|
||||
.pagination,
|
||||
.pagination li {
|
||||
@@ -833,6 +945,8 @@ pre[class*=language-]::selection {
|
||||
}
|
||||
}</style>
|
||||
|
||||
|
||||
|
||||
<script type="module">// Thank you to https://github.com/daviddarnes/heading-anchors
|
||||
// Thank you to https://amberwilson.co.uk/blog/are-your-anchor-links-accessible/
|
||||
|
||||
@@ -1063,7 +1177,42 @@ class HeadingAnchors extends HTMLElement {
|
||||
|
||||
HeadingAnchors.register();
|
||||
|
||||
export { HeadingAnchors }</script>
|
||||
export { HeadingAnchors }
|
||||
const THEME = "theme";
|
||||
|
||||
const saveTheme = (themeValue) => {
|
||||
localStorage.setItem(THEME, themeValue);
|
||||
};
|
||||
|
||||
const themeLight = document.getElementById("theme-light");
|
||||
themeLight.addEventListener("input", (e) => {
|
||||
saveTheme(themeLight.value);
|
||||
});
|
||||
|
||||
const themeAuto = document.getElementById("theme-auto");
|
||||
themeAuto.addEventListener("input", (e) => {
|
||||
saveTheme(themeAuto.auto);
|
||||
});
|
||||
|
||||
const themeDark = document.getElementById("theme-dark");
|
||||
themeDark.addEventListener("input", (e) => {
|
||||
saveTheme(themeDark.value);
|
||||
});
|
||||
|
||||
var currentThemeValue = localStorage.getItem(THEME);
|
||||
switch (currentThemeValue) {
|
||||
case "light":
|
||||
themeLight.checked = true;
|
||||
break;
|
||||
case "auto":
|
||||
themeAuto.checked = true;
|
||||
break;
|
||||
case "dark":
|
||||
themeDark.checked = true;
|
||||
break;
|
||||
default:
|
||||
themeAuto.checked = true;
|
||||
}</script>
|
||||
|
||||
</head>
|
||||
<body>
|
||||
@@ -1236,9 +1385,30 @@ export { HeadingAnchors }</script>
|
||||
</a>
|
||||
</li>
|
||||
</ul>
|
||||
|
||||
<fieldset id="theme">
|
||||
<legend>color scheme</legend>
|
||||
|
||||
<input type="radio" id="theme-light" name="theme" value="light">
|
||||
<label class="theme-light" for="theme-light">
|
||||
<i class="fa-regular fa-sun" aria-hidden="true"></i>
|
||||
light
|
||||
</label>
|
||||
|
||||
<input type="radio" id="theme-auto" name="theme" value="auto">
|
||||
<label class="theme-auto" for="theme-auto">
|
||||
auto
|
||||
</label>
|
||||
|
||||
<input type="radio" id="theme-dark" name="theme" value="dark">
|
||||
<label class="theme-dark" for="theme-dark">
|
||||
dark
|
||||
<i class="fa-regular fa-moon" aria-hidden="true"></i>
|
||||
</label>
|
||||
</fieldset>
|
||||
</footer>
|
||||
|
||||
|
||||
<!-- This page `/contact/` was built on 2026-09-08T23:18:32.766Z -->
|
||||
<!-- This page `/contact/` was built on 2026-09-09T20:38:02.943Z -->
|
||||
</body>
|
||||
</html>
|
||||
|
||||
+183
-11
@@ -478,6 +478,13 @@ body:has(dialog[open]) {
|
||||
--color-grey: light-dark(var(--color-grey-dark), var(--color-grey-light));
|
||||
}
|
||||
|
||||
:root:has(#theme-light:checked) {
|
||||
color-scheme: light;
|
||||
}
|
||||
:root:has(#theme-dark:checked) {
|
||||
color-scheme: dark;
|
||||
}
|
||||
|
||||
/* Base */
|
||||
|
||||
* {
|
||||
@@ -621,7 +628,7 @@ ul, ol, dl, li {
|
||||
}
|
||||
|
||||
li {
|
||||
line-height: 1.2 5;
|
||||
line-height: 1.2;
|
||||
margin-top: .65rem;
|
||||
margin-bottom: .65rem;
|
||||
}
|
||||
@@ -960,6 +967,111 @@ footer a:focus-visible {
|
||||
outline-color: var(--color-pink);
|
||||
}
|
||||
|
||||
/* color picker */
|
||||
#theme {
|
||||
display: flex;
|
||||
justify-content: center;
|
||||
margin: .5rem auto 0;
|
||||
padding: 0 .75rem .5rem;
|
||||
width: fit-content;
|
||||
border: .125rem solid var(--color-teal);
|
||||
border-radius: 2rem;
|
||||
}
|
||||
|
||||
#theme legend {
|
||||
margin: 0 auto;
|
||||
color: var(--color-teal);
|
||||
}
|
||||
|
||||
footer label {
|
||||
cursor: pointer;
|
||||
border: .125rem solid var(--color-pink);
|
||||
padding: 0 .25rem;
|
||||
color: var(--color-pink);
|
||||
background-color: var(--color-bg); /* this stops the box shadows from showing through */
|
||||
box-shadow: .15em .15em var(--color-shadow);
|
||||
/* Click animation handling */
|
||||
position: relative;
|
||||
top: 0;
|
||||
left: 0;
|
||||
transition: top .05s ease-in, left .05s ease-in;
|
||||
}
|
||||
|
||||
footer input:checked + label {
|
||||
color: var(--color-blue);
|
||||
border-color: var(--color-blue);
|
||||
}
|
||||
|
||||
footer label i {
|
||||
color: var(--color-teal);
|
||||
}
|
||||
|
||||
footer input:checked + label i {
|
||||
color: var(--color-pink);
|
||||
}
|
||||
|
||||
@media (any-hover: hover) {
|
||||
footer label:hover,
|
||||
footer input:checked + label:hover,
|
||||
footer label:hover i,
|
||||
footer input:checked + label:hover i {
|
||||
color: var(--color-bg);
|
||||
}
|
||||
|
||||
footer label:hover {
|
||||
background-color: var(--color-pink);
|
||||
}
|
||||
|
||||
footer input:checked + label:hover {
|
||||
background-color: var(--color-teal);
|
||||
}
|
||||
}
|
||||
|
||||
footer input:focus-visible + label,
|
||||
footer input:focus-visible + label i {
|
||||
color: var(--color-bg);
|
||||
background-color: var(--color-pink);
|
||||
border-color: var(--color-pink);
|
||||
}
|
||||
|
||||
footer input:checked:focus-visible + label,
|
||||
footer input:checked:focus-visible + label i {
|
||||
color: var(--color-bg);
|
||||
background-color: var(--color-teal);
|
||||
border-color: var(--color-teal);
|
||||
}
|
||||
|
||||
footer label:active {
|
||||
top: .09em;
|
||||
left: .09em;
|
||||
box-shadow: .05em .05em var(--color-shadow);
|
||||
}
|
||||
|
||||
label.theme-light {
|
||||
border-top-left-radius: 1rem;
|
||||
border-bottom-left-radius: 1rem;
|
||||
border-right: none;
|
||||
padding-left: .35rem;
|
||||
}
|
||||
|
||||
label.theme-auto {
|
||||
}
|
||||
|
||||
label.theme-dark {
|
||||
border-top-right-radius: 1rem;
|
||||
border-bottom-right-radius: 1rem;
|
||||
border-left: none;
|
||||
padding-right: .35rem;
|
||||
}
|
||||
|
||||
footer input {
|
||||
/* To allow screen reader to still access these. */
|
||||
/* From https://lyra.horse/blog/2025/08/you-dont-need-js/ */
|
||||
opacity: 0;
|
||||
position: absolute;
|
||||
pointer-events: none;
|
||||
}
|
||||
|
||||
/* Pagination */
|
||||
.pagination,
|
||||
.pagination li {
|
||||
@@ -1222,6 +1334,8 @@ pre[class*=language-]::selection {
|
||||
}
|
||||
}</style>
|
||||
|
||||
|
||||
|
||||
<script type="module">// Thank you to https://github.com/daviddarnes/heading-anchors
|
||||
// Thank you to https://amberwilson.co.uk/blog/are-your-anchor-links-accessible/
|
||||
|
||||
@@ -1476,6 +1590,41 @@ if (window.innerWidth > 650) {
|
||||
dialog.close();
|
||||
}
|
||||
});
|
||||
}
|
||||
const THEME = "theme";
|
||||
|
||||
const saveTheme = (themeValue) => {
|
||||
localStorage.setItem(THEME, themeValue);
|
||||
};
|
||||
|
||||
const themeLight = document.getElementById("theme-light");
|
||||
themeLight.addEventListener("input", (e) => {
|
||||
saveTheme(themeLight.value);
|
||||
});
|
||||
|
||||
const themeAuto = document.getElementById("theme-auto");
|
||||
themeAuto.addEventListener("input", (e) => {
|
||||
saveTheme(themeAuto.auto);
|
||||
});
|
||||
|
||||
const themeDark = document.getElementById("theme-dark");
|
||||
themeDark.addEventListener("input", (e) => {
|
||||
saveTheme(themeDark.value);
|
||||
});
|
||||
|
||||
var currentThemeValue = localStorage.getItem(THEME);
|
||||
switch (currentThemeValue) {
|
||||
case "light":
|
||||
themeLight.checked = true;
|
||||
break;
|
||||
case "auto":
|
||||
themeAuto.checked = true;
|
||||
break;
|
||||
case "dark":
|
||||
themeDark.checked = true;
|
||||
break;
|
||||
default:
|
||||
themeAuto.checked = true;
|
||||
}</script>
|
||||
|
||||
</head>
|
||||
@@ -1610,43 +1759,45 @@ if (window.innerWidth > 650) {
|
||||
<ol id="postlist">
|
||||
|
||||
<li class="post">
|
||||
<a class="postlink" href="/spinning-plants/">
|
||||
<h2 data-ha-exclude="" id="spinning-plants">spinning plants </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/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/petrichor-handspun.jpg" alt="3 skeins of handspun yarn, 2 large and 1 small. the large ones are a rich earth-tone blend of reds, pinks, browns, and hints of green and gold. the smaller skein is similar but with a decidedly greener hue" loading="lazy" decoding="async" width="1000" height="750">
|
||||
|
||||
</a>
|
||||
</li>
|
||||
|
||||
<li class="post">
|
||||
<a class="postlink" href="/light-grey-jacobs-handspun/">
|
||||
<h2 data-ha-exclude="" id="light-grey-jacobs-handspun">light grey jacobs handspun </h2>
|
||||
<a class="postlink" href="/rambouillet-handspun/">
|
||||
<h2 data-ha-exclude="" id="rambouillet-handspun">rambouillet handspun </h2>
|
||||
|
||||
<ul class="postlist-tags">
|
||||
|
||||
<li>yarn</li>
|
||||
|
||||
<li>highlight</li>
|
||||
|
||||
</ul>
|
||||
<img src="/img/light-grey-jacobs.jpg" alt="a skein of light grey handspun yarn" loading="lazy" decoding="async" width="1000" height="666">
|
||||
<img src="/img/rambouillet-handspun.jpg" alt="1 large and 2 small skeins of handspun yarn in a sport or DK weight that has been dyed in light and dark teal, green, and rusty green-gold." loading="lazy" decoding="async" width="1000" height="666">
|
||||
|
||||
</a>
|
||||
</li>
|
||||
|
||||
<li class="post">
|
||||
<a class="postlink" href="/handcombed-jacobs-handspun/">
|
||||
<h2 data-ha-exclude="" id="handcombed-jacobs-handspun">handcombed jacobs 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/handcombed-jacobs.jpg" alt="a skein of dark grey handspun yarn" 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>
|
||||
@@ -1679,9 +1830,30 @@ if (window.innerWidth > 650) {
|
||||
</a>
|
||||
</li>
|
||||
</ul>
|
||||
|
||||
<fieldset id="theme">
|
||||
<legend>color scheme</legend>
|
||||
|
||||
<input type="radio" id="theme-light" name="theme" value="light">
|
||||
<label class="theme-light" for="theme-light">
|
||||
<i class="fa-regular fa-sun" aria-hidden="true"></i>
|
||||
light
|
||||
</label>
|
||||
|
||||
<input type="radio" id="theme-auto" name="theme" value="auto">
|
||||
<label class="theme-auto" for="theme-auto">
|
||||
auto
|
||||
</label>
|
||||
|
||||
<input type="radio" id="theme-dark" name="theme" value="dark">
|
||||
<label class="theme-dark" for="theme-dark">
|
||||
dark
|
||||
<i class="fa-regular fa-moon" aria-hidden="true"></i>
|
||||
</label>
|
||||
</fieldset>
|
||||
</footer>
|
||||
|
||||
|
||||
<!-- This page `/coral-reef-handspun/` was built on 2026-09-08T23:18:32.756Z -->
|
||||
<!-- This page `/coral-reef-handspun/` was built on 2026-09-09T20:38:02.937Z -->
|
||||
</body>
|
||||
</html>
|
||||
|
||||
+182
-14
@@ -478,6 +478,13 @@ body:has(dialog[open]) {
|
||||
--color-grey: light-dark(var(--color-grey-dark), var(--color-grey-light));
|
||||
}
|
||||
|
||||
:root:has(#theme-light:checked) {
|
||||
color-scheme: light;
|
||||
}
|
||||
:root:has(#theme-dark:checked) {
|
||||
color-scheme: dark;
|
||||
}
|
||||
|
||||
/* Base */
|
||||
|
||||
* {
|
||||
@@ -621,7 +628,7 @@ ul, ol, dl, li {
|
||||
}
|
||||
|
||||
li {
|
||||
line-height: 1.2 5;
|
||||
line-height: 1.2;
|
||||
margin-top: .65rem;
|
||||
margin-bottom: .65rem;
|
||||
}
|
||||
@@ -960,6 +967,111 @@ footer a:focus-visible {
|
||||
outline-color: var(--color-pink);
|
||||
}
|
||||
|
||||
/* color picker */
|
||||
#theme {
|
||||
display: flex;
|
||||
justify-content: center;
|
||||
margin: .5rem auto 0;
|
||||
padding: 0 .75rem .5rem;
|
||||
width: fit-content;
|
||||
border: .125rem solid var(--color-teal);
|
||||
border-radius: 2rem;
|
||||
}
|
||||
|
||||
#theme legend {
|
||||
margin: 0 auto;
|
||||
color: var(--color-teal);
|
||||
}
|
||||
|
||||
footer label {
|
||||
cursor: pointer;
|
||||
border: .125rem solid var(--color-pink);
|
||||
padding: 0 .25rem;
|
||||
color: var(--color-pink);
|
||||
background-color: var(--color-bg); /* this stops the box shadows from showing through */
|
||||
box-shadow: .15em .15em var(--color-shadow);
|
||||
/* Click animation handling */
|
||||
position: relative;
|
||||
top: 0;
|
||||
left: 0;
|
||||
transition: top .05s ease-in, left .05s ease-in;
|
||||
}
|
||||
|
||||
footer input:checked + label {
|
||||
color: var(--color-blue);
|
||||
border-color: var(--color-blue);
|
||||
}
|
||||
|
||||
footer label i {
|
||||
color: var(--color-teal);
|
||||
}
|
||||
|
||||
footer input:checked + label i {
|
||||
color: var(--color-pink);
|
||||
}
|
||||
|
||||
@media (any-hover: hover) {
|
||||
footer label:hover,
|
||||
footer input:checked + label:hover,
|
||||
footer label:hover i,
|
||||
footer input:checked + label:hover i {
|
||||
color: var(--color-bg);
|
||||
}
|
||||
|
||||
footer label:hover {
|
||||
background-color: var(--color-pink);
|
||||
}
|
||||
|
||||
footer input:checked + label:hover {
|
||||
background-color: var(--color-teal);
|
||||
}
|
||||
}
|
||||
|
||||
footer input:focus-visible + label,
|
||||
footer input:focus-visible + label i {
|
||||
color: var(--color-bg);
|
||||
background-color: var(--color-pink);
|
||||
border-color: var(--color-pink);
|
||||
}
|
||||
|
||||
footer input:checked:focus-visible + label,
|
||||
footer input:checked:focus-visible + label i {
|
||||
color: var(--color-bg);
|
||||
background-color: var(--color-teal);
|
||||
border-color: var(--color-teal);
|
||||
}
|
||||
|
||||
footer label:active {
|
||||
top: .09em;
|
||||
left: .09em;
|
||||
box-shadow: .05em .05em var(--color-shadow);
|
||||
}
|
||||
|
||||
label.theme-light {
|
||||
border-top-left-radius: 1rem;
|
||||
border-bottom-left-radius: 1rem;
|
||||
border-right: none;
|
||||
padding-left: .35rem;
|
||||
}
|
||||
|
||||
label.theme-auto {
|
||||
}
|
||||
|
||||
label.theme-dark {
|
||||
border-top-right-radius: 1rem;
|
||||
border-bottom-right-radius: 1rem;
|
||||
border-left: none;
|
||||
padding-right: .35rem;
|
||||
}
|
||||
|
||||
footer input {
|
||||
/* To allow screen reader to still access these. */
|
||||
/* From https://lyra.horse/blog/2025/08/you-dont-need-js/ */
|
||||
opacity: 0;
|
||||
position: absolute;
|
||||
pointer-events: none;
|
||||
}
|
||||
|
||||
/* Pagination */
|
||||
.pagination,
|
||||
.pagination li {
|
||||
@@ -1222,6 +1334,8 @@ pre[class*=language-]::selection {
|
||||
}
|
||||
}</style>
|
||||
|
||||
|
||||
|
||||
<script type="module">// Thank you to https://github.com/daviddarnes/heading-anchors
|
||||
// Thank you to https://amberwilson.co.uk/blog/are-your-anchor-links-accessible/
|
||||
|
||||
@@ -1476,6 +1590,41 @@ if (window.innerWidth > 650) {
|
||||
dialog.close();
|
||||
}
|
||||
});
|
||||
}
|
||||
const THEME = "theme";
|
||||
|
||||
const saveTheme = (themeValue) => {
|
||||
localStorage.setItem(THEME, themeValue);
|
||||
};
|
||||
|
||||
const themeLight = document.getElementById("theme-light");
|
||||
themeLight.addEventListener("input", (e) => {
|
||||
saveTheme(themeLight.value);
|
||||
});
|
||||
|
||||
const themeAuto = document.getElementById("theme-auto");
|
||||
themeAuto.addEventListener("input", (e) => {
|
||||
saveTheme(themeAuto.auto);
|
||||
});
|
||||
|
||||
const themeDark = document.getElementById("theme-dark");
|
||||
themeDark.addEventListener("input", (e) => {
|
||||
saveTheme(themeDark.value);
|
||||
});
|
||||
|
||||
var currentThemeValue = localStorage.getItem(THEME);
|
||||
switch (currentThemeValue) {
|
||||
case "light":
|
||||
themeLight.checked = true;
|
||||
break;
|
||||
case "auto":
|
||||
themeAuto.checked = true;
|
||||
break;
|
||||
case "dark":
|
||||
themeDark.checked = true;
|
||||
break;
|
||||
default:
|
||||
themeAuto.checked = true;
|
||||
}</script>
|
||||
|
||||
</head>
|
||||
@@ -1927,45 +2076,43 @@ footer a[aria-current="page"]::after</span> <span class="token punctuation">{</s
|
||||
<ol id="postlist">
|
||||
|
||||
<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="/visual-site-builders-and-accessibility/">
|
||||
<h2 data-ha-exclude="" id="visual-site-builders-and-accessibility">visual site builders and accessibility </h2>
|
||||
|
||||
<ul class="postlist-tags">
|
||||
|
||||
<li>leather</li>
|
||||
|
||||
<li>software</li>
|
||||
|
||||
</ul>
|
||||
<img src="/img/shoelace-bag.jpg" alt="a 3-image collage showcasing a leather crossbody bag. the leather body is brown and fairly simple. up the narrow sides, rope is laced through grommets in a style resembling a shoe lacing. the rope forms the handle and loops seamlessly through the other side of the bag, joining in one point in a figure-8 follow-through knot. At the bottom corners, there are small diagonal lines of stitching to give the bag a small lip around the base and ensure small objects don't slide out." loading="lazy" decoding="async" width="1000" height="1777">
|
||||
<img src="/img/roses.jpg" alt="Image unrelated to post. Two peach-colored roses, the farther away one a bit out of focus." loading="lazy" decoding="async" width="1000" height="666">
|
||||
|
||||
</a>
|
||||
</li>
|
||||
|
||||
<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="/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/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/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="/framer-accessibility/">
|
||||
<h2 data-ha-exclude="" id="framer-accessibility">framer accessibility </h2>
|
||||
<a class="postlink" href="/happy-solstice-2025/">
|
||||
<h2 data-ha-exclude="" id="happy-solstice-2025">happy solstice 2025 </h2>
|
||||
|
||||
<ul class="postlist-tags">
|
||||
|
||||
<li>software</li>
|
||||
<li>highlight</li>
|
||||
|
||||
</ul>
|
||||
<img src="/img/framer.png" alt="A screenshot of the Framer projects page showing part of the tile for a very rudimentary project titled Accessibility Test. It has a huge title that just reads Title, a basic form, and some pictures of my dog as notable features." loading="lazy" decoding="async" width="841" height="532">
|
||||
<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'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 'L + B' 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 'happy solstice' 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 'lee, brooke, kestrel, & the flock' 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'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've added a dahlia to represent the stamp, and written 'you!' in the field that would normally hold the mailing address." loading="lazy" decoding="async" width="1000" height="1346">
|
||||
|
||||
</a>
|
||||
</li>
|
||||
@@ -1998,9 +2145,30 @@ footer a[aria-current="page"]::after</span> <span class="token punctuation">{</s
|
||||
</a>
|
||||
</li>
|
||||
</ul>
|
||||
|
||||
<fieldset id="theme">
|
||||
<legend>color scheme</legend>
|
||||
|
||||
<input type="radio" id="theme-light" name="theme" value="light">
|
||||
<label class="theme-light" for="theme-light">
|
||||
<i class="fa-regular fa-sun" aria-hidden="true"></i>
|
||||
light
|
||||
</label>
|
||||
|
||||
<input type="radio" id="theme-auto" name="theme" value="auto">
|
||||
<label class="theme-auto" for="theme-auto">
|
||||
auto
|
||||
</label>
|
||||
|
||||
<input type="radio" id="theme-dark" name="theme" value="dark">
|
||||
<label class="theme-dark" for="theme-dark">
|
||||
dark
|
||||
<i class="fa-regular fa-moon" aria-hidden="true"></i>
|
||||
</label>
|
||||
</fieldset>
|
||||
</footer>
|
||||
|
||||
|
||||
<!-- This page `/core-css/` was built on 2026-09-08T23:18:32.758Z -->
|
||||
<!-- This page `/core-css/` was built on 2026-09-09T20:38:02.939Z -->
|
||||
</body>
|
||||
</html>
|
||||
|
||||
+181
-13
@@ -478,6 +478,13 @@ body:has(dialog[open]) {
|
||||
--color-grey: light-dark(var(--color-grey-dark), var(--color-grey-light));
|
||||
}
|
||||
|
||||
:root:has(#theme-light:checked) {
|
||||
color-scheme: light;
|
||||
}
|
||||
:root:has(#theme-dark:checked) {
|
||||
color-scheme: dark;
|
||||
}
|
||||
|
||||
/* Base */
|
||||
|
||||
* {
|
||||
@@ -621,7 +628,7 @@ ul, ol, dl, li {
|
||||
}
|
||||
|
||||
li {
|
||||
line-height: 1.2 5;
|
||||
line-height: 1.2;
|
||||
margin-top: .65rem;
|
||||
margin-bottom: .65rem;
|
||||
}
|
||||
@@ -960,6 +967,111 @@ footer a:focus-visible {
|
||||
outline-color: var(--color-pink);
|
||||
}
|
||||
|
||||
/* color picker */
|
||||
#theme {
|
||||
display: flex;
|
||||
justify-content: center;
|
||||
margin: .5rem auto 0;
|
||||
padding: 0 .75rem .5rem;
|
||||
width: fit-content;
|
||||
border: .125rem solid var(--color-teal);
|
||||
border-radius: 2rem;
|
||||
}
|
||||
|
||||
#theme legend {
|
||||
margin: 0 auto;
|
||||
color: var(--color-teal);
|
||||
}
|
||||
|
||||
footer label {
|
||||
cursor: pointer;
|
||||
border: .125rem solid var(--color-pink);
|
||||
padding: 0 .25rem;
|
||||
color: var(--color-pink);
|
||||
background-color: var(--color-bg); /* this stops the box shadows from showing through */
|
||||
box-shadow: .15em .15em var(--color-shadow);
|
||||
/* Click animation handling */
|
||||
position: relative;
|
||||
top: 0;
|
||||
left: 0;
|
||||
transition: top .05s ease-in, left .05s ease-in;
|
||||
}
|
||||
|
||||
footer input:checked + label {
|
||||
color: var(--color-blue);
|
||||
border-color: var(--color-blue);
|
||||
}
|
||||
|
||||
footer label i {
|
||||
color: var(--color-teal);
|
||||
}
|
||||
|
||||
footer input:checked + label i {
|
||||
color: var(--color-pink);
|
||||
}
|
||||
|
||||
@media (any-hover: hover) {
|
||||
footer label:hover,
|
||||
footer input:checked + label:hover,
|
||||
footer label:hover i,
|
||||
footer input:checked + label:hover i {
|
||||
color: var(--color-bg);
|
||||
}
|
||||
|
||||
footer label:hover {
|
||||
background-color: var(--color-pink);
|
||||
}
|
||||
|
||||
footer input:checked + label:hover {
|
||||
background-color: var(--color-teal);
|
||||
}
|
||||
}
|
||||
|
||||
footer input:focus-visible + label,
|
||||
footer input:focus-visible + label i {
|
||||
color: var(--color-bg);
|
||||
background-color: var(--color-pink);
|
||||
border-color: var(--color-pink);
|
||||
}
|
||||
|
||||
footer input:checked:focus-visible + label,
|
||||
footer input:checked:focus-visible + label i {
|
||||
color: var(--color-bg);
|
||||
background-color: var(--color-teal);
|
||||
border-color: var(--color-teal);
|
||||
}
|
||||
|
||||
footer label:active {
|
||||
top: .09em;
|
||||
left: .09em;
|
||||
box-shadow: .05em .05em var(--color-shadow);
|
||||
}
|
||||
|
||||
label.theme-light {
|
||||
border-top-left-radius: 1rem;
|
||||
border-bottom-left-radius: 1rem;
|
||||
border-right: none;
|
||||
padding-left: .35rem;
|
||||
}
|
||||
|
||||
label.theme-auto {
|
||||
}
|
||||
|
||||
label.theme-dark {
|
||||
border-top-right-radius: 1rem;
|
||||
border-bottom-right-radius: 1rem;
|
||||
border-left: none;
|
||||
padding-right: .35rem;
|
||||
}
|
||||
|
||||
footer input {
|
||||
/* To allow screen reader to still access these. */
|
||||
/* From https://lyra.horse/blog/2025/08/you-dont-need-js/ */
|
||||
opacity: 0;
|
||||
position: absolute;
|
||||
pointer-events: none;
|
||||
}
|
||||
|
||||
/* Pagination */
|
||||
.pagination,
|
||||
.pagination li {
|
||||
@@ -1222,6 +1334,8 @@ pre[class*=language-]::selection {
|
||||
}
|
||||
}</style>
|
||||
|
||||
|
||||
|
||||
<script type="module">// Thank you to https://github.com/daviddarnes/heading-anchors
|
||||
// Thank you to https://amberwilson.co.uk/blog/are-your-anchor-links-accessible/
|
||||
|
||||
@@ -1476,6 +1590,41 @@ if (window.innerWidth > 650) {
|
||||
dialog.close();
|
||||
}
|
||||
});
|
||||
}
|
||||
const THEME = "theme";
|
||||
|
||||
const saveTheme = (themeValue) => {
|
||||
localStorage.setItem(THEME, themeValue);
|
||||
};
|
||||
|
||||
const themeLight = document.getElementById("theme-light");
|
||||
themeLight.addEventListener("input", (e) => {
|
||||
saveTheme(themeLight.value);
|
||||
});
|
||||
|
||||
const themeAuto = document.getElementById("theme-auto");
|
||||
themeAuto.addEventListener("input", (e) => {
|
||||
saveTheme(themeAuto.auto);
|
||||
});
|
||||
|
||||
const themeDark = document.getElementById("theme-dark");
|
||||
themeDark.addEventListener("input", (e) => {
|
||||
saveTheme(themeDark.value);
|
||||
});
|
||||
|
||||
var currentThemeValue = localStorage.getItem(THEME);
|
||||
switch (currentThemeValue) {
|
||||
case "light":
|
||||
themeLight.checked = true;
|
||||
break;
|
||||
case "auto":
|
||||
themeAuto.checked = true;
|
||||
break;
|
||||
case "dark":
|
||||
themeDark.checked = true;
|
||||
break;
|
||||
default:
|
||||
themeAuto.checked = true;
|
||||
}</script>
|
||||
|
||||
</head>
|
||||
@@ -1609,22 +1758,22 @@ if (window.innerWidth > 650) {
|
||||
<ol id="postlist">
|
||||
|
||||
<li class="post">
|
||||
<a class="postlink" href="/fix-your-hearts/">
|
||||
<h2 data-ha-exclude="" id="fix-your-hearts">fix your hearts </h2>
|
||||
<a class="postlink" href="/tiny-mushrooms/">
|
||||
<h2 data-ha-exclude="" id="tiny-mushrooms">tiny mushrooms </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 'fix your hearts or die', with the text shaped into a somewhat long and narrow heart." 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's hat mycena in indigo." 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="/anarchy-autism/">
|
||||
<h2 data-ha-exclude="" id="anarchy-autism">anarchy autism </h2>
|
||||
|
||||
<ul class="postlist-tags">
|
||||
|
||||
@@ -1636,24 +1785,22 @@ if (window.innerWidth > 650) {
|
||||
|
||||
<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/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="/brown-creeper/">
|
||||
<h2 data-ha-exclude="" id="brown-creeper">brown creeper </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>
|
||||
|
||||
</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/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>
|
||||
@@ -1686,9 +1833,30 @@ if (window.innerWidth > 650) {
|
||||
</a>
|
||||
</li>
|
||||
</ul>
|
||||
|
||||
<fieldset id="theme">
|
||||
<legend>color scheme</legend>
|
||||
|
||||
<input type="radio" id="theme-light" name="theme" value="light">
|
||||
<label class="theme-light" for="theme-light">
|
||||
<i class="fa-regular fa-sun" aria-hidden="true"></i>
|
||||
light
|
||||
</label>
|
||||
|
||||
<input type="radio" id="theme-auto" name="theme" value="auto">
|
||||
<label class="theme-auto" for="theme-auto">
|
||||
auto
|
||||
</label>
|
||||
|
||||
<input type="radio" id="theme-dark" name="theme" value="dark">
|
||||
<label class="theme-dark" for="theme-dark">
|
||||
dark
|
||||
<i class="fa-regular fa-moon" aria-hidden="true"></i>
|
||||
</label>
|
||||
</fieldset>
|
||||
</footer>
|
||||
|
||||
|
||||
<!-- This page `/crow/` was built on 2026-09-08T23:18:32.757Z -->
|
||||
<!-- This page `/crow/` was built on 2026-09-09T20:38:02.939Z -->
|
||||
</body>
|
||||
</html>
|
||||
|
||||
+184
-14
@@ -478,6 +478,13 @@ body:has(dialog[open]) {
|
||||
--color-grey: light-dark(var(--color-grey-dark), var(--color-grey-light));
|
||||
}
|
||||
|
||||
:root:has(#theme-light:checked) {
|
||||
color-scheme: light;
|
||||
}
|
||||
:root:has(#theme-dark:checked) {
|
||||
color-scheme: dark;
|
||||
}
|
||||
|
||||
/* Base */
|
||||
|
||||
* {
|
||||
@@ -621,7 +628,7 @@ ul, ol, dl, li {
|
||||
}
|
||||
|
||||
li {
|
||||
line-height: 1.2 5;
|
||||
line-height: 1.2;
|
||||
margin-top: .65rem;
|
||||
margin-bottom: .65rem;
|
||||
}
|
||||
@@ -960,6 +967,111 @@ footer a:focus-visible {
|
||||
outline-color: var(--color-pink);
|
||||
}
|
||||
|
||||
/* color picker */
|
||||
#theme {
|
||||
display: flex;
|
||||
justify-content: center;
|
||||
margin: .5rem auto 0;
|
||||
padding: 0 .75rem .5rem;
|
||||
width: fit-content;
|
||||
border: .125rem solid var(--color-teal);
|
||||
border-radius: 2rem;
|
||||
}
|
||||
|
||||
#theme legend {
|
||||
margin: 0 auto;
|
||||
color: var(--color-teal);
|
||||
}
|
||||
|
||||
footer label {
|
||||
cursor: pointer;
|
||||
border: .125rem solid var(--color-pink);
|
||||
padding: 0 .25rem;
|
||||
color: var(--color-pink);
|
||||
background-color: var(--color-bg); /* this stops the box shadows from showing through */
|
||||
box-shadow: .15em .15em var(--color-shadow);
|
||||
/* Click animation handling */
|
||||
position: relative;
|
||||
top: 0;
|
||||
left: 0;
|
||||
transition: top .05s ease-in, left .05s ease-in;
|
||||
}
|
||||
|
||||
footer input:checked + label {
|
||||
color: var(--color-blue);
|
||||
border-color: var(--color-blue);
|
||||
}
|
||||
|
||||
footer label i {
|
||||
color: var(--color-teal);
|
||||
}
|
||||
|
||||
footer input:checked + label i {
|
||||
color: var(--color-pink);
|
||||
}
|
||||
|
||||
@media (any-hover: hover) {
|
||||
footer label:hover,
|
||||
footer input:checked + label:hover,
|
||||
footer label:hover i,
|
||||
footer input:checked + label:hover i {
|
||||
color: var(--color-bg);
|
||||
}
|
||||
|
||||
footer label:hover {
|
||||
background-color: var(--color-pink);
|
||||
}
|
||||
|
||||
footer input:checked + label:hover {
|
||||
background-color: var(--color-teal);
|
||||
}
|
||||
}
|
||||
|
||||
footer input:focus-visible + label,
|
||||
footer input:focus-visible + label i {
|
||||
color: var(--color-bg);
|
||||
background-color: var(--color-pink);
|
||||
border-color: var(--color-pink);
|
||||
}
|
||||
|
||||
footer input:checked:focus-visible + label,
|
||||
footer input:checked:focus-visible + label i {
|
||||
color: var(--color-bg);
|
||||
background-color: var(--color-teal);
|
||||
border-color: var(--color-teal);
|
||||
}
|
||||
|
||||
footer label:active {
|
||||
top: .09em;
|
||||
left: .09em;
|
||||
box-shadow: .05em .05em var(--color-shadow);
|
||||
}
|
||||
|
||||
label.theme-light {
|
||||
border-top-left-radius: 1rem;
|
||||
border-bottom-left-radius: 1rem;
|
||||
border-right: none;
|
||||
padding-left: .35rem;
|
||||
}
|
||||
|
||||
label.theme-auto {
|
||||
}
|
||||
|
||||
label.theme-dark {
|
||||
border-top-right-radius: 1rem;
|
||||
border-bottom-right-radius: 1rem;
|
||||
border-left: none;
|
||||
padding-right: .35rem;
|
||||
}
|
||||
|
||||
footer input {
|
||||
/* To allow screen reader to still access these. */
|
||||
/* From https://lyra.horse/blog/2025/08/you-dont-need-js/ */
|
||||
opacity: 0;
|
||||
position: absolute;
|
||||
pointer-events: none;
|
||||
}
|
||||
|
||||
/* Pagination */
|
||||
.pagination,
|
||||
.pagination li {
|
||||
@@ -1222,6 +1334,8 @@ pre[class*=language-]::selection {
|
||||
}
|
||||
}</style>
|
||||
|
||||
|
||||
|
||||
<script type="module">// Thank you to https://github.com/daviddarnes/heading-anchors
|
||||
// Thank you to https://amberwilson.co.uk/blog/are-your-anchor-links-accessible/
|
||||
|
||||
@@ -1476,6 +1590,41 @@ if (window.innerWidth > 650) {
|
||||
dialog.close();
|
||||
}
|
||||
});
|
||||
}
|
||||
const THEME = "theme";
|
||||
|
||||
const saveTheme = (themeValue) => {
|
||||
localStorage.setItem(THEME, themeValue);
|
||||
};
|
||||
|
||||
const themeLight = document.getElementById("theme-light");
|
||||
themeLight.addEventListener("input", (e) => {
|
||||
saveTheme(themeLight.value);
|
||||
});
|
||||
|
||||
const themeAuto = document.getElementById("theme-auto");
|
||||
themeAuto.addEventListener("input", (e) => {
|
||||
saveTheme(themeAuto.auto);
|
||||
});
|
||||
|
||||
const themeDark = document.getElementById("theme-dark");
|
||||
themeDark.addEventListener("input", (e) => {
|
||||
saveTheme(themeDark.value);
|
||||
});
|
||||
|
||||
var currentThemeValue = localStorage.getItem(THEME);
|
||||
switch (currentThemeValue) {
|
||||
case "light":
|
||||
themeLight.checked = true;
|
||||
break;
|
||||
case "auto":
|
||||
themeAuto.checked = true;
|
||||
break;
|
||||
case "dark":
|
||||
themeDark.checked = true;
|
||||
break;
|
||||
default:
|
||||
themeAuto.checked = true;
|
||||
}</script>
|
||||
|
||||
</head>
|
||||
@@ -1626,45 +1775,45 @@ if (window.innerWidth > 650) {
|
||||
<ol id="postlist">
|
||||
|
||||
<li class="post">
|
||||
<a class="postlink" href="/vix-collar/">
|
||||
<h2 data-ha-exclude="" id="vix-collar">vix collar </h2>
|
||||
<a class="postlink" href="/redirections/">
|
||||
<h2 data-ha-exclude="" id="redirections">redirections </h2>
|
||||
|
||||
<ul class="postlist-tags">
|
||||
|
||||
<li>leather</li>
|
||||
<li>software</li>
|
||||
|
||||
</ul>
|
||||
<img src="/img/vix-collar.jpg" alt="A collar rests on a leather-wrapped lighter. It is lined with shearling and built of two other layers of leather - a wider mustard yellow layer and a thinner teal layer over that. the teal layer holds a heart shaped o-ring in place." loading="lazy" decoding="async" width="1000" height="750">
|
||||
<img src="/img/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="/leather-long-stitch-journals/">
|
||||
<h2 data-ha-exclude="" id="leather-long-stitch-journals">leather long-stitch journals </h2>
|
||||
<a class="postlink" href="/double-bill-pocket-bifold/">
|
||||
<h2 data-ha-exclude="" id="double-bill-pocket-bifold">double bill pocket bifold </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/double-bill-pocket-bifold.jpg" alt="A 3-picture collage showing a hand-stitched leather wallet in plum and light natural leather, with a double bill pocket." loading="lazy" decoding="async" width="1000" height="1777">
|
||||
|
||||
</a>
|
||||
</li>
|
||||
|
||||
<li class="post">
|
||||
<a class="postlink" href="/foldy-wallet-with-thumb-slide/">
|
||||
<h2 data-ha-exclude="" id="foldy-wallet-with-thumb-slide">foldy wallet with thumb slide </h2>
|
||||
<a class="postlink" href="/fishhook-pride-keychains/">
|
||||
<h2 data-ha-exclude="" id="fishhook-pride-keychains">fishhook pride keychains </h2>
|
||||
|
||||
<ul class="postlist-tags">
|
||||
|
||||
<li>leather</li>
|
||||
|
||||
<li>gender</li>
|
||||
|
||||
</ul>
|
||||
<img src="/img/foldy-thumb-slide.jpg" alt="A card wallet with one main pocket and one quick access slot with a thumb slide. The cover of the main pocket curves around the thumb slide." loading="lazy" decoding="async" width="1000" height="1000">
|
||||
<img src="/img/fishhook-keychain-nonbinary.jpg" alt="a keychain with an iridescent fishhook style attachment linked via leather to an iridescent keyring. the leather is stitched with nonbinary flag colors." loading="lazy" decoding="async" width="1000" height="750">
|
||||
|
||||
</a>
|
||||
</li>
|
||||
@@ -1697,9 +1846,30 @@ if (window.innerWidth > 650) {
|
||||
</a>
|
||||
</li>
|
||||
</ul>
|
||||
|
||||
<fieldset id="theme">
|
||||
<legend>color scheme</legend>
|
||||
|
||||
<input type="radio" id="theme-light" name="theme" value="light">
|
||||
<label class="theme-light" for="theme-light">
|
||||
<i class="fa-regular fa-sun" aria-hidden="true"></i>
|
||||
light
|
||||
</label>
|
||||
|
||||
<input type="radio" id="theme-auto" name="theme" value="auto">
|
||||
<label class="theme-auto" for="theme-auto">
|
||||
auto
|
||||
</label>
|
||||
|
||||
<input type="radio" id="theme-dark" name="theme" value="dark">
|
||||
<label class="theme-dark" for="theme-dark">
|
||||
dark
|
||||
<i class="fa-regular fa-moon" aria-hidden="true"></i>
|
||||
</label>
|
||||
</fieldset>
|
||||
</footer>
|
||||
|
||||
|
||||
<!-- This page `/designing-a-bag/` was built on 2026-09-08T23:18:32.749Z -->
|
||||
<!-- This page `/designing-a-bag/` was built on 2026-09-09T20:38:02.934Z -->
|
||||
</body>
|
||||
</html>
|
||||
|
||||
@@ -478,6 +478,13 @@ body:has(dialog[open]) {
|
||||
--color-grey: light-dark(var(--color-grey-dark), var(--color-grey-light));
|
||||
}
|
||||
|
||||
:root:has(#theme-light:checked) {
|
||||
color-scheme: light;
|
||||
}
|
||||
:root:has(#theme-dark:checked) {
|
||||
color-scheme: dark;
|
||||
}
|
||||
|
||||
/* Base */
|
||||
|
||||
* {
|
||||
@@ -621,7 +628,7 @@ ul, ol, dl, li {
|
||||
}
|
||||
|
||||
li {
|
||||
line-height: 1.2 5;
|
||||
line-height: 1.2;
|
||||
margin-top: .65rem;
|
||||
margin-bottom: .65rem;
|
||||
}
|
||||
@@ -960,6 +967,111 @@ footer a:focus-visible {
|
||||
outline-color: var(--color-pink);
|
||||
}
|
||||
|
||||
/* color picker */
|
||||
#theme {
|
||||
display: flex;
|
||||
justify-content: center;
|
||||
margin: .5rem auto 0;
|
||||
padding: 0 .75rem .5rem;
|
||||
width: fit-content;
|
||||
border: .125rem solid var(--color-teal);
|
||||
border-radius: 2rem;
|
||||
}
|
||||
|
||||
#theme legend {
|
||||
margin: 0 auto;
|
||||
color: var(--color-teal);
|
||||
}
|
||||
|
||||
footer label {
|
||||
cursor: pointer;
|
||||
border: .125rem solid var(--color-pink);
|
||||
padding: 0 .25rem;
|
||||
color: var(--color-pink);
|
||||
background-color: var(--color-bg); /* this stops the box shadows from showing through */
|
||||
box-shadow: .15em .15em var(--color-shadow);
|
||||
/* Click animation handling */
|
||||
position: relative;
|
||||
top: 0;
|
||||
left: 0;
|
||||
transition: top .05s ease-in, left .05s ease-in;
|
||||
}
|
||||
|
||||
footer input:checked + label {
|
||||
color: var(--color-blue);
|
||||
border-color: var(--color-blue);
|
||||
}
|
||||
|
||||
footer label i {
|
||||
color: var(--color-teal);
|
||||
}
|
||||
|
||||
footer input:checked + label i {
|
||||
color: var(--color-pink);
|
||||
}
|
||||
|
||||
@media (any-hover: hover) {
|
||||
footer label:hover,
|
||||
footer input:checked + label:hover,
|
||||
footer label:hover i,
|
||||
footer input:checked + label:hover i {
|
||||
color: var(--color-bg);
|
||||
}
|
||||
|
||||
footer label:hover {
|
||||
background-color: var(--color-pink);
|
||||
}
|
||||
|
||||
footer input:checked + label:hover {
|
||||
background-color: var(--color-teal);
|
||||
}
|
||||
}
|
||||
|
||||
footer input:focus-visible + label,
|
||||
footer input:focus-visible + label i {
|
||||
color: var(--color-bg);
|
||||
background-color: var(--color-pink);
|
||||
border-color: var(--color-pink);
|
||||
}
|
||||
|
||||
footer input:checked:focus-visible + label,
|
||||
footer input:checked:focus-visible + label i {
|
||||
color: var(--color-bg);
|
||||
background-color: var(--color-teal);
|
||||
border-color: var(--color-teal);
|
||||
}
|
||||
|
||||
footer label:active {
|
||||
top: .09em;
|
||||
left: .09em;
|
||||
box-shadow: .05em .05em var(--color-shadow);
|
||||
}
|
||||
|
||||
label.theme-light {
|
||||
border-top-left-radius: 1rem;
|
||||
border-bottom-left-radius: 1rem;
|
||||
border-right: none;
|
||||
padding-left: .35rem;
|
||||
}
|
||||
|
||||
label.theme-auto {
|
||||
}
|
||||
|
||||
label.theme-dark {
|
||||
border-top-right-radius: 1rem;
|
||||
border-bottom-right-radius: 1rem;
|
||||
border-left: none;
|
||||
padding-right: .35rem;
|
||||
}
|
||||
|
||||
footer input {
|
||||
/* To allow screen reader to still access these. */
|
||||
/* From https://lyra.horse/blog/2025/08/you-dont-need-js/ */
|
||||
opacity: 0;
|
||||
position: absolute;
|
||||
pointer-events: none;
|
||||
}
|
||||
|
||||
/* Pagination */
|
||||
.pagination,
|
||||
.pagination li {
|
||||
@@ -1222,6 +1334,8 @@ pre[class*=language-]::selection {
|
||||
}
|
||||
}</style>
|
||||
|
||||
|
||||
|
||||
<script type="module">// Thank you to https://github.com/daviddarnes/heading-anchors
|
||||
// Thank you to https://amberwilson.co.uk/blog/are-your-anchor-links-accessible/
|
||||
|
||||
@@ -1476,6 +1590,41 @@ if (window.innerWidth > 650) {
|
||||
dialog.close();
|
||||
}
|
||||
});
|
||||
}
|
||||
const THEME = "theme";
|
||||
|
||||
const saveTheme = (themeValue) => {
|
||||
localStorage.setItem(THEME, themeValue);
|
||||
};
|
||||
|
||||
const themeLight = document.getElementById("theme-light");
|
||||
themeLight.addEventListener("input", (e) => {
|
||||
saveTheme(themeLight.value);
|
||||
});
|
||||
|
||||
const themeAuto = document.getElementById("theme-auto");
|
||||
themeAuto.addEventListener("input", (e) => {
|
||||
saveTheme(themeAuto.auto);
|
||||
});
|
||||
|
||||
const themeDark = document.getElementById("theme-dark");
|
||||
themeDark.addEventListener("input", (e) => {
|
||||
saveTheme(themeDark.value);
|
||||
});
|
||||
|
||||
var currentThemeValue = localStorage.getItem(THEME);
|
||||
switch (currentThemeValue) {
|
||||
case "light":
|
||||
themeLight.checked = true;
|
||||
break;
|
||||
case "auto":
|
||||
themeAuto.checked = true;
|
||||
break;
|
||||
case "dark":
|
||||
themeDark.checked = true;
|
||||
break;
|
||||
default:
|
||||
themeAuto.checked = true;
|
||||
}</script>
|
||||
|
||||
</head>
|
||||
@@ -1661,43 +1810,47 @@ if (window.innerWidth > 650) {
|
||||
<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="/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/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/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="/backend-accessibility/">
|
||||
<h2 data-ha-exclude="" id="backend-accessibility">backend accessibility </h2>
|
||||
<a class="postlink" href="/designing-a-bag/">
|
||||
<h2 data-ha-exclude="" id="designing-a-bag">designing a bag </h2>
|
||||
|
||||
<ul class="postlist-tags">
|
||||
|
||||
<li>leather</li>
|
||||
|
||||
<li>software</li>
|
||||
|
||||
</ul>
|
||||
<img src="/img/camelCase-print.jpg" alt="A carved stamp next to its print. The print reads '#camelCase' in a slightly formal-looking italic font." loading="lazy" decoding="async" width="1000" height="750">
|
||||
<img src="/img/shoelace-bag.jpg" alt="a 3-image collage showcasing a leather crossbody bag. the leather body is brown and fairly simple. up the narrow sides, rope is laced through grommets in a style resembling a shoe lacing. the rope forms the handle and loops seamlessly through the other side of the bag, joining in one point in a figure-8 follow-through knot. At the bottom corners, there are small diagonal lines of stitching to give the bag a small lip around the base and ensure small objects don't slide out." loading="lazy" decoding="async" width="1000" height="1777">
|
||||
|
||||
</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="/framer-accessibility/">
|
||||
<h2 data-ha-exclude="" id="framer-accessibility">framer accessibility </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'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/framer.png" alt="A screenshot of the Framer projects page showing part of the tile for a very rudimentary project titled Accessibility Test. It has a huge title that just reads Title, a basic form, and some pictures of my dog as notable features." loading="lazy" decoding="async" width="841" height="532">
|
||||
|
||||
</a>
|
||||
</li>
|
||||
@@ -1730,9 +1883,30 @@ if (window.innerWidth > 650) {
|
||||
</a>
|
||||
</li>
|
||||
</ul>
|
||||
|
||||
<fieldset id="theme">
|
||||
<legend>color scheme</legend>
|
||||
|
||||
<input type="radio" id="theme-light" name="theme" value="light">
|
||||
<label class="theme-light" for="theme-light">
|
||||
<i class="fa-regular fa-sun" aria-hidden="true"></i>
|
||||
light
|
||||
</label>
|
||||
|
||||
<input type="radio" id="theme-auto" name="theme" value="auto">
|
||||
<label class="theme-auto" for="theme-auto">
|
||||
auto
|
||||
</label>
|
||||
|
||||
<input type="radio" id="theme-dark" name="theme" value="dark">
|
||||
<label class="theme-dark" for="theme-dark">
|
||||
dark
|
||||
<i class="fa-regular fa-moon" aria-hidden="true"></i>
|
||||
</label>
|
||||
</fieldset>
|
||||
</footer>
|
||||
|
||||
|
||||
<!-- This page `/domain-and-site-setup/` was built on 2026-09-08T23:18:32.743Z -->
|
||||
<!-- This page `/domain-and-site-setup/` was built on 2026-09-09T20:38:02.913Z -->
|
||||
</body>
|
||||
</html>
|
||||
|
||||
@@ -478,6 +478,13 @@ body:has(dialog[open]) {
|
||||
--color-grey: light-dark(var(--color-grey-dark), var(--color-grey-light));
|
||||
}
|
||||
|
||||
:root:has(#theme-light:checked) {
|
||||
color-scheme: light;
|
||||
}
|
||||
:root:has(#theme-dark:checked) {
|
||||
color-scheme: dark;
|
||||
}
|
||||
|
||||
/* Base */
|
||||
|
||||
* {
|
||||
@@ -621,7 +628,7 @@ ul, ol, dl, li {
|
||||
}
|
||||
|
||||
li {
|
||||
line-height: 1.2 5;
|
||||
line-height: 1.2;
|
||||
margin-top: .65rem;
|
||||
margin-bottom: .65rem;
|
||||
}
|
||||
@@ -960,6 +967,111 @@ footer a:focus-visible {
|
||||
outline-color: var(--color-pink);
|
||||
}
|
||||
|
||||
/* color picker */
|
||||
#theme {
|
||||
display: flex;
|
||||
justify-content: center;
|
||||
margin: .5rem auto 0;
|
||||
padding: 0 .75rem .5rem;
|
||||
width: fit-content;
|
||||
border: .125rem solid var(--color-teal);
|
||||
border-radius: 2rem;
|
||||
}
|
||||
|
||||
#theme legend {
|
||||
margin: 0 auto;
|
||||
color: var(--color-teal);
|
||||
}
|
||||
|
||||
footer label {
|
||||
cursor: pointer;
|
||||
border: .125rem solid var(--color-pink);
|
||||
padding: 0 .25rem;
|
||||
color: var(--color-pink);
|
||||
background-color: var(--color-bg); /* this stops the box shadows from showing through */
|
||||
box-shadow: .15em .15em var(--color-shadow);
|
||||
/* Click animation handling */
|
||||
position: relative;
|
||||
top: 0;
|
||||
left: 0;
|
||||
transition: top .05s ease-in, left .05s ease-in;
|
||||
}
|
||||
|
||||
footer input:checked + label {
|
||||
color: var(--color-blue);
|
||||
border-color: var(--color-blue);
|
||||
}
|
||||
|
||||
footer label i {
|
||||
color: var(--color-teal);
|
||||
}
|
||||
|
||||
footer input:checked + label i {
|
||||
color: var(--color-pink);
|
||||
}
|
||||
|
||||
@media (any-hover: hover) {
|
||||
footer label:hover,
|
||||
footer input:checked + label:hover,
|
||||
footer label:hover i,
|
||||
footer input:checked + label:hover i {
|
||||
color: var(--color-bg);
|
||||
}
|
||||
|
||||
footer label:hover {
|
||||
background-color: var(--color-pink);
|
||||
}
|
||||
|
||||
footer input:checked + label:hover {
|
||||
background-color: var(--color-teal);
|
||||
}
|
||||
}
|
||||
|
||||
footer input:focus-visible + label,
|
||||
footer input:focus-visible + label i {
|
||||
color: var(--color-bg);
|
||||
background-color: var(--color-pink);
|
||||
border-color: var(--color-pink);
|
||||
}
|
||||
|
||||
footer input:checked:focus-visible + label,
|
||||
footer input:checked:focus-visible + label i {
|
||||
color: var(--color-bg);
|
||||
background-color: var(--color-teal);
|
||||
border-color: var(--color-teal);
|
||||
}
|
||||
|
||||
footer label:active {
|
||||
top: .09em;
|
||||
left: .09em;
|
||||
box-shadow: .05em .05em var(--color-shadow);
|
||||
}
|
||||
|
||||
label.theme-light {
|
||||
border-top-left-radius: 1rem;
|
||||
border-bottom-left-radius: 1rem;
|
||||
border-right: none;
|
||||
padding-left: .35rem;
|
||||
}
|
||||
|
||||
label.theme-auto {
|
||||
}
|
||||
|
||||
label.theme-dark {
|
||||
border-top-right-radius: 1rem;
|
||||
border-bottom-right-radius: 1rem;
|
||||
border-left: none;
|
||||
padding-right: .35rem;
|
||||
}
|
||||
|
||||
footer input {
|
||||
/* To allow screen reader to still access these. */
|
||||
/* From https://lyra.horse/blog/2025/08/you-dont-need-js/ */
|
||||
opacity: 0;
|
||||
position: absolute;
|
||||
pointer-events: none;
|
||||
}
|
||||
|
||||
/* Pagination */
|
||||
.pagination,
|
||||
.pagination li {
|
||||
@@ -1222,6 +1334,8 @@ pre[class*=language-]::selection {
|
||||
}
|
||||
}</style>
|
||||
|
||||
|
||||
|
||||
<script type="module">// Thank you to https://github.com/daviddarnes/heading-anchors
|
||||
// Thank you to https://amberwilson.co.uk/blog/are-your-anchor-links-accessible/
|
||||
|
||||
@@ -1476,6 +1590,41 @@ if (window.innerWidth > 650) {
|
||||
dialog.close();
|
||||
}
|
||||
});
|
||||
}
|
||||
const THEME = "theme";
|
||||
|
||||
const saveTheme = (themeValue) => {
|
||||
localStorage.setItem(THEME, themeValue);
|
||||
};
|
||||
|
||||
const themeLight = document.getElementById("theme-light");
|
||||
themeLight.addEventListener("input", (e) => {
|
||||
saveTheme(themeLight.value);
|
||||
});
|
||||
|
||||
const themeAuto = document.getElementById("theme-auto");
|
||||
themeAuto.addEventListener("input", (e) => {
|
||||
saveTheme(themeAuto.auto);
|
||||
});
|
||||
|
||||
const themeDark = document.getElementById("theme-dark");
|
||||
themeDark.addEventListener("input", (e) => {
|
||||
saveTheme(themeDark.value);
|
||||
});
|
||||
|
||||
var currentThemeValue = localStorage.getItem(THEME);
|
||||
switch (currentThemeValue) {
|
||||
case "light":
|
||||
themeLight.checked = true;
|
||||
break;
|
||||
case "auto":
|
||||
themeAuto.checked = true;
|
||||
break;
|
||||
case "dark":
|
||||
themeDark.checked = true;
|
||||
break;
|
||||
default:
|
||||
themeAuto.checked = true;
|
||||
}</script>
|
||||
|
||||
</head>
|
||||
@@ -1610,15 +1759,15 @@ if (window.innerWidth > 650) {
|
||||
<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="/leaf-patches/">
|
||||
<h2 data-ha-exclude="" id="leaf-patches">leaf patches </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/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>
|
||||
@@ -1638,15 +1787,15 @@ if (window.innerWidth > 650) {
|
||||
</li>
|
||||
|
||||
<li class="post">
|
||||
<a class="postlink" href="/bag-strap/">
|
||||
<h2 data-ha-exclude="" id="bag-strap">bag strap </h2>
|
||||
<a class="postlink" href="/vertical-card-wallet/">
|
||||
<h2 data-ha-exclude="" id="vertical-card-wallet">vertical card wallet </h2>
|
||||
|
||||
<ul class="postlist-tags">
|
||||
|
||||
<li>leather</li>
|
||||
|
||||
</ul>
|
||||
<img src="/img/bag-strap.jpg" alt="A nylon webbing shoulder strap in bright teal with clips on each end." loading="lazy" decoding="async" width="1000" height="750">
|
||||
<img src="/img/vertical-card-wallet.jpg" alt="A collage showing a hand-stitched leather card wallet with 3 card pockets and 1 interior pocket." loading="lazy" decoding="async" width="1000" height="750">
|
||||
|
||||
</a>
|
||||
</li>
|
||||
@@ -1679,9 +1828,30 @@ if (window.innerWidth > 650) {
|
||||
</a>
|
||||
</li>
|
||||
</ul>
|
||||
|
||||
<fieldset id="theme">
|
||||
<legend>color scheme</legend>
|
||||
|
||||
<input type="radio" id="theme-light" name="theme" value="light">
|
||||
<label class="theme-light" for="theme-light">
|
||||
<i class="fa-regular fa-sun" aria-hidden="true"></i>
|
||||
light
|
||||
</label>
|
||||
|
||||
<input type="radio" id="theme-auto" name="theme" value="auto">
|
||||
<label class="theme-auto" for="theme-auto">
|
||||
auto
|
||||
</label>
|
||||
|
||||
<input type="radio" id="theme-dark" name="theme" value="dark">
|
||||
<label class="theme-dark" for="theme-dark">
|
||||
dark
|
||||
<i class="fa-regular fa-moon" aria-hidden="true"></i>
|
||||
</label>
|
||||
</fieldset>
|
||||
</footer>
|
||||
|
||||
|
||||
<!-- This page `/double-bill-pocket-bifold/` was built on 2026-09-08T23:18:32.742Z -->
|
||||
<!-- This page `/double-bill-pocket-bifold/` was built on 2026-09-09T20:38:02.911Z -->
|
||||
</body>
|
||||
</html>
|
||||
|
||||
+185
-15
@@ -478,6 +478,13 @@ body:has(dialog[open]) {
|
||||
--color-grey: light-dark(var(--color-grey-dark), var(--color-grey-light));
|
||||
}
|
||||
|
||||
:root:has(#theme-light:checked) {
|
||||
color-scheme: light;
|
||||
}
|
||||
:root:has(#theme-dark:checked) {
|
||||
color-scheme: dark;
|
||||
}
|
||||
|
||||
/* Base */
|
||||
|
||||
* {
|
||||
@@ -621,7 +628,7 @@ ul, ol, dl, li {
|
||||
}
|
||||
|
||||
li {
|
||||
line-height: 1.2 5;
|
||||
line-height: 1.2;
|
||||
margin-top: .65rem;
|
||||
margin-bottom: .65rem;
|
||||
}
|
||||
@@ -960,6 +967,111 @@ footer a:focus-visible {
|
||||
outline-color: var(--color-pink);
|
||||
}
|
||||
|
||||
/* color picker */
|
||||
#theme {
|
||||
display: flex;
|
||||
justify-content: center;
|
||||
margin: .5rem auto 0;
|
||||
padding: 0 .75rem .5rem;
|
||||
width: fit-content;
|
||||
border: .125rem solid var(--color-teal);
|
||||
border-radius: 2rem;
|
||||
}
|
||||
|
||||
#theme legend {
|
||||
margin: 0 auto;
|
||||
color: var(--color-teal);
|
||||
}
|
||||
|
||||
footer label {
|
||||
cursor: pointer;
|
||||
border: .125rem solid var(--color-pink);
|
||||
padding: 0 .25rem;
|
||||
color: var(--color-pink);
|
||||
background-color: var(--color-bg); /* this stops the box shadows from showing through */
|
||||
box-shadow: .15em .15em var(--color-shadow);
|
||||
/* Click animation handling */
|
||||
position: relative;
|
||||
top: 0;
|
||||
left: 0;
|
||||
transition: top .05s ease-in, left .05s ease-in;
|
||||
}
|
||||
|
||||
footer input:checked + label {
|
||||
color: var(--color-blue);
|
||||
border-color: var(--color-blue);
|
||||
}
|
||||
|
||||
footer label i {
|
||||
color: var(--color-teal);
|
||||
}
|
||||
|
||||
footer input:checked + label i {
|
||||
color: var(--color-pink);
|
||||
}
|
||||
|
||||
@media (any-hover: hover) {
|
||||
footer label:hover,
|
||||
footer input:checked + label:hover,
|
||||
footer label:hover i,
|
||||
footer input:checked + label:hover i {
|
||||
color: var(--color-bg);
|
||||
}
|
||||
|
||||
footer label:hover {
|
||||
background-color: var(--color-pink);
|
||||
}
|
||||
|
||||
footer input:checked + label:hover {
|
||||
background-color: var(--color-teal);
|
||||
}
|
||||
}
|
||||
|
||||
footer input:focus-visible + label,
|
||||
footer input:focus-visible + label i {
|
||||
color: var(--color-bg);
|
||||
background-color: var(--color-pink);
|
||||
border-color: var(--color-pink);
|
||||
}
|
||||
|
||||
footer input:checked:focus-visible + label,
|
||||
footer input:checked:focus-visible + label i {
|
||||
color: var(--color-bg);
|
||||
background-color: var(--color-teal);
|
||||
border-color: var(--color-teal);
|
||||
}
|
||||
|
||||
footer label:active {
|
||||
top: .09em;
|
||||
left: .09em;
|
||||
box-shadow: .05em .05em var(--color-shadow);
|
||||
}
|
||||
|
||||
label.theme-light {
|
||||
border-top-left-radius: 1rem;
|
||||
border-bottom-left-radius: 1rem;
|
||||
border-right: none;
|
||||
padding-left: .35rem;
|
||||
}
|
||||
|
||||
label.theme-auto {
|
||||
}
|
||||
|
||||
label.theme-dark {
|
||||
border-top-right-radius: 1rem;
|
||||
border-bottom-right-radius: 1rem;
|
||||
border-left: none;
|
||||
padding-right: .35rem;
|
||||
}
|
||||
|
||||
footer input {
|
||||
/* To allow screen reader to still access these. */
|
||||
/* From https://lyra.horse/blog/2025/08/you-dont-need-js/ */
|
||||
opacity: 0;
|
||||
position: absolute;
|
||||
pointer-events: none;
|
||||
}
|
||||
|
||||
/* Pagination */
|
||||
.pagination,
|
||||
.pagination li {
|
||||
@@ -1222,6 +1334,8 @@ pre[class*=language-]::selection {
|
||||
}
|
||||
}</style>
|
||||
|
||||
|
||||
|
||||
<script type="module">// Thank you to https://github.com/daviddarnes/heading-anchors
|
||||
// Thank you to https://amberwilson.co.uk/blog/are-your-anchor-links-accessible/
|
||||
|
||||
@@ -1476,6 +1590,41 @@ if (window.innerWidth > 650) {
|
||||
dialog.close();
|
||||
}
|
||||
});
|
||||
}
|
||||
const THEME = "theme";
|
||||
|
||||
const saveTheme = (themeValue) => {
|
||||
localStorage.setItem(THEME, themeValue);
|
||||
};
|
||||
|
||||
const themeLight = document.getElementById("theme-light");
|
||||
themeLight.addEventListener("input", (e) => {
|
||||
saveTheme(themeLight.value);
|
||||
});
|
||||
|
||||
const themeAuto = document.getElementById("theme-auto");
|
||||
themeAuto.addEventListener("input", (e) => {
|
||||
saveTheme(themeAuto.auto);
|
||||
});
|
||||
|
||||
const themeDark = document.getElementById("theme-dark");
|
||||
themeDark.addEventListener("input", (e) => {
|
||||
saveTheme(themeDark.value);
|
||||
});
|
||||
|
||||
var currentThemeValue = localStorage.getItem(THEME);
|
||||
switch (currentThemeValue) {
|
||||
case "light":
|
||||
themeLight.checked = true;
|
||||
break;
|
||||
case "auto":
|
||||
themeAuto.checked = true;
|
||||
break;
|
||||
case "dark":
|
||||
themeDark.checked = true;
|
||||
break;
|
||||
default:
|
||||
themeAuto.checked = true;
|
||||
}</script>
|
||||
|
||||
</head>
|
||||
@@ -1615,47 +1764,47 @@ if (window.innerWidth > 650) {
|
||||
<ol id="postlist">
|
||||
|
||||
<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="/lobstah/">
|
||||
<h2 data-ha-exclude="" id="lobstah">lobstah </h2>
|
||||
|
||||
<ul class="postlist-tags">
|
||||
|
||||
<li>leather</li>
|
||||
|
||||
<li>software</li>
|
||||
|
||||
</ul>
|
||||
<img src="/img/shoelace-bag.jpg" alt="a 3-image collage showcasing a leather crossbody bag. the leather body is brown and fairly simple. up the narrow sides, rope is laced through grommets in a style resembling a shoe lacing. the rope forms the handle and loops seamlessly through the other side of the bag, joining in one point in a figure-8 follow-through knot. At the bottom corners, there are small diagonal lines of stitching to give the bag a small lip around the base and ensure small objects don't slide out." loading="lazy" decoding="async" width="1000" height="1777">
|
||||
<img src="/img/lobstah.jpg" alt="Two red leather lobster ornaments, about 4-5 in long each." loading="lazy" decoding="async" width="1000" height="750">
|
||||
|
||||
</a>
|
||||
</li>
|
||||
|
||||
<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="/mom-bag/">
|
||||
<h2 data-ha-exclude="" id="mom-bag">mom bag </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/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="/bowtie/">
|
||||
<h2 data-ha-exclude="" id="bowtie">bowtie </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>leather</li>
|
||||
|
||||
<li>gender</li>
|
||||
|
||||
<li>patch</li>
|
||||
|
||||
</ul>
|
||||
<img src="/img/bowtie.jpg" alt="A black leather bow tie with black stitching." loading="lazy" decoding="async" width="1000" height="750">
|
||||
<img src="/img/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>
|
||||
@@ -1688,9 +1837,30 @@ if (window.innerWidth > 650) {
|
||||
</a>
|
||||
</li>
|
||||
</ul>
|
||||
|
||||
<fieldset id="theme">
|
||||
<legend>color scheme</legend>
|
||||
|
||||
<input type="radio" id="theme-light" name="theme" value="light">
|
||||
<label class="theme-light" for="theme-light">
|
||||
<i class="fa-regular fa-sun" aria-hidden="true"></i>
|
||||
light
|
||||
</label>
|
||||
|
||||
<input type="radio" id="theme-auto" name="theme" value="auto">
|
||||
<label class="theme-auto" for="theme-auto">
|
||||
auto
|
||||
</label>
|
||||
|
||||
<input type="radio" id="theme-dark" name="theme" value="dark">
|
||||
<label class="theme-dark" for="theme-dark">
|
||||
dark
|
||||
<i class="fa-regular fa-moon" aria-hidden="true"></i>
|
||||
</label>
|
||||
</fieldset>
|
||||
</footer>
|
||||
|
||||
|
||||
<!-- This page `/dragon-mask/` was built on 2026-09-08T23:18:32.749Z -->
|
||||
<!-- This page `/dragon-mask/` was built on 2026-09-09T20:38:02.934Z -->
|
||||
</body>
|
||||
</html>
|
||||
|
||||
+191
-19
@@ -478,6 +478,13 @@ body:has(dialog[open]) {
|
||||
--color-grey: light-dark(var(--color-grey-dark), var(--color-grey-light));
|
||||
}
|
||||
|
||||
:root:has(#theme-light:checked) {
|
||||
color-scheme: light;
|
||||
}
|
||||
:root:has(#theme-dark:checked) {
|
||||
color-scheme: dark;
|
||||
}
|
||||
|
||||
/* Base */
|
||||
|
||||
* {
|
||||
@@ -621,7 +628,7 @@ ul, ol, dl, li {
|
||||
}
|
||||
|
||||
li {
|
||||
line-height: 1.2 5;
|
||||
line-height: 1.2;
|
||||
margin-top: .65rem;
|
||||
margin-bottom: .65rem;
|
||||
}
|
||||
@@ -960,6 +967,111 @@ footer a:focus-visible {
|
||||
outline-color: var(--color-pink);
|
||||
}
|
||||
|
||||
/* color picker */
|
||||
#theme {
|
||||
display: flex;
|
||||
justify-content: center;
|
||||
margin: .5rem auto 0;
|
||||
padding: 0 .75rem .5rem;
|
||||
width: fit-content;
|
||||
border: .125rem solid var(--color-teal);
|
||||
border-radius: 2rem;
|
||||
}
|
||||
|
||||
#theme legend {
|
||||
margin: 0 auto;
|
||||
color: var(--color-teal);
|
||||
}
|
||||
|
||||
footer label {
|
||||
cursor: pointer;
|
||||
border: .125rem solid var(--color-pink);
|
||||
padding: 0 .25rem;
|
||||
color: var(--color-pink);
|
||||
background-color: var(--color-bg); /* this stops the box shadows from showing through */
|
||||
box-shadow: .15em .15em var(--color-shadow);
|
||||
/* Click animation handling */
|
||||
position: relative;
|
||||
top: 0;
|
||||
left: 0;
|
||||
transition: top .05s ease-in, left .05s ease-in;
|
||||
}
|
||||
|
||||
footer input:checked + label {
|
||||
color: var(--color-blue);
|
||||
border-color: var(--color-blue);
|
||||
}
|
||||
|
||||
footer label i {
|
||||
color: var(--color-teal);
|
||||
}
|
||||
|
||||
footer input:checked + label i {
|
||||
color: var(--color-pink);
|
||||
}
|
||||
|
||||
@media (any-hover: hover) {
|
||||
footer label:hover,
|
||||
footer input:checked + label:hover,
|
||||
footer label:hover i,
|
||||
footer input:checked + label:hover i {
|
||||
color: var(--color-bg);
|
||||
}
|
||||
|
||||
footer label:hover {
|
||||
background-color: var(--color-pink);
|
||||
}
|
||||
|
||||
footer input:checked + label:hover {
|
||||
background-color: var(--color-teal);
|
||||
}
|
||||
}
|
||||
|
||||
footer input:focus-visible + label,
|
||||
footer input:focus-visible + label i {
|
||||
color: var(--color-bg);
|
||||
background-color: var(--color-pink);
|
||||
border-color: var(--color-pink);
|
||||
}
|
||||
|
||||
footer input:checked:focus-visible + label,
|
||||
footer input:checked:focus-visible + label i {
|
||||
color: var(--color-bg);
|
||||
background-color: var(--color-teal);
|
||||
border-color: var(--color-teal);
|
||||
}
|
||||
|
||||
footer label:active {
|
||||
top: .09em;
|
||||
left: .09em;
|
||||
box-shadow: .05em .05em var(--color-shadow);
|
||||
}
|
||||
|
||||
label.theme-light {
|
||||
border-top-left-radius: 1rem;
|
||||
border-bottom-left-radius: 1rem;
|
||||
border-right: none;
|
||||
padding-left: .35rem;
|
||||
}
|
||||
|
||||
label.theme-auto {
|
||||
}
|
||||
|
||||
label.theme-dark {
|
||||
border-top-right-radius: 1rem;
|
||||
border-bottom-right-radius: 1rem;
|
||||
border-left: none;
|
||||
padding-right: .35rem;
|
||||
}
|
||||
|
||||
footer input {
|
||||
/* To allow screen reader to still access these. */
|
||||
/* From https://lyra.horse/blog/2025/08/you-dont-need-js/ */
|
||||
opacity: 0;
|
||||
position: absolute;
|
||||
pointer-events: none;
|
||||
}
|
||||
|
||||
/* Pagination */
|
||||
.pagination,
|
||||
.pagination li {
|
||||
@@ -1222,6 +1334,8 @@ pre[class*=language-]::selection {
|
||||
}
|
||||
}</style>
|
||||
|
||||
|
||||
|
||||
<script type="module">// Thank you to https://github.com/daviddarnes/heading-anchors
|
||||
// Thank you to https://amberwilson.co.uk/blog/are-your-anchor-links-accessible/
|
||||
|
||||
@@ -1476,6 +1590,41 @@ if (window.innerWidth > 650) {
|
||||
dialog.close();
|
||||
}
|
||||
});
|
||||
}
|
||||
const THEME = "theme";
|
||||
|
||||
const saveTheme = (themeValue) => {
|
||||
localStorage.setItem(THEME, themeValue);
|
||||
};
|
||||
|
||||
const themeLight = document.getElementById("theme-light");
|
||||
themeLight.addEventListener("input", (e) => {
|
||||
saveTheme(themeLight.value);
|
||||
});
|
||||
|
||||
const themeAuto = document.getElementById("theme-auto");
|
||||
themeAuto.addEventListener("input", (e) => {
|
||||
saveTheme(themeAuto.auto);
|
||||
});
|
||||
|
||||
const themeDark = document.getElementById("theme-dark");
|
||||
themeDark.addEventListener("input", (e) => {
|
||||
saveTheme(themeDark.value);
|
||||
});
|
||||
|
||||
var currentThemeValue = localStorage.getItem(THEME);
|
||||
switch (currentThemeValue) {
|
||||
case "light":
|
||||
themeLight.checked = true;
|
||||
break;
|
||||
case "auto":
|
||||
themeAuto.checked = true;
|
||||
break;
|
||||
case "dark":
|
||||
themeDark.checked = true;
|
||||
break;
|
||||
default:
|
||||
themeAuto.checked = true;
|
||||
}</script>
|
||||
|
||||
</head>
|
||||
@@ -1610,15 +1759,31 @@ if (window.innerWidth > 650) {
|
||||
<ol id="postlist">
|
||||
|
||||
<li class="post">
|
||||
<a class="postlink" href="/orion-handspun/">
|
||||
<h2 data-ha-exclude="" id="orion-handspun">orion handspun </h2>
|
||||
<a class="postlink" href="/rambouillet-handspun/">
|
||||
<h2 data-ha-exclude="" id="rambouillet-handspun">rambouillet handspun </h2>
|
||||
|
||||
<ul class="postlist-tags">
|
||||
|
||||
<li>yarn</li>
|
||||
|
||||
<li>highlight</li>
|
||||
|
||||
</ul>
|
||||
<img src="/img/rambouillet-handspun.jpg" alt="1 large and 2 small skeins of handspun yarn in a sport or DK weight that has been dyed in light and dark teal, green, and rusty green-gold." loading="lazy" decoding="async" width="1000" height="666">
|
||||
|
||||
</a>
|
||||
</li>
|
||||
|
||||
<li class="post">
|
||||
<a class="postlink" href="/petrichor-handspun/">
|
||||
<h2 data-ha-exclude="" id="petrichor-handspun">petrichor 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/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>
|
||||
@@ -1637,20 +1802,6 @@ if (window.innerWidth > 650) {
|
||||
</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>
|
||||
|
||||
</ol>
|
||||
|
||||
</section>
|
||||
@@ -1679,9 +1830,30 @@ if (window.innerWidth > 650) {
|
||||
</a>
|
||||
</li>
|
||||
</ul>
|
||||
|
||||
<fieldset id="theme">
|
||||
<legend>color scheme</legend>
|
||||
|
||||
<input type="radio" id="theme-light" name="theme" value="light">
|
||||
<label class="theme-light" for="theme-light">
|
||||
<i class="fa-regular fa-sun" aria-hidden="true"></i>
|
||||
light
|
||||
</label>
|
||||
|
||||
<input type="radio" id="theme-auto" name="theme" value="auto">
|
||||
<label class="theme-auto" for="theme-auto">
|
||||
auto
|
||||
</label>
|
||||
|
||||
<input type="radio" id="theme-dark" name="theme" value="dark">
|
||||
<label class="theme-dark" for="theme-dark">
|
||||
dark
|
||||
<i class="fa-regular fa-moon" aria-hidden="true"></i>
|
||||
</label>
|
||||
</fieldset>
|
||||
</footer>
|
||||
|
||||
|
||||
<!-- This page `/dyeing-fiber/` was built on 2026-09-08T23:18:32.756Z -->
|
||||
<!-- This page `/dyeing-fiber/` was built on 2026-09-09T20:38:02.937Z -->
|
||||
</body>
|
||||
</html>
|
||||
|
||||
@@ -478,6 +478,13 @@ body:has(dialog[open]) {
|
||||
--color-grey: light-dark(var(--color-grey-dark), var(--color-grey-light));
|
||||
}
|
||||
|
||||
:root:has(#theme-light:checked) {
|
||||
color-scheme: light;
|
||||
}
|
||||
:root:has(#theme-dark:checked) {
|
||||
color-scheme: dark;
|
||||
}
|
||||
|
||||
/* Base */
|
||||
|
||||
* {
|
||||
@@ -621,7 +628,7 @@ ul, ol, dl, li {
|
||||
}
|
||||
|
||||
li {
|
||||
line-height: 1.2 5;
|
||||
line-height: 1.2;
|
||||
margin-top: .65rem;
|
||||
margin-bottom: .65rem;
|
||||
}
|
||||
@@ -960,6 +967,111 @@ footer a:focus-visible {
|
||||
outline-color: var(--color-pink);
|
||||
}
|
||||
|
||||
/* color picker */
|
||||
#theme {
|
||||
display: flex;
|
||||
justify-content: center;
|
||||
margin: .5rem auto 0;
|
||||
padding: 0 .75rem .5rem;
|
||||
width: fit-content;
|
||||
border: .125rem solid var(--color-teal);
|
||||
border-radius: 2rem;
|
||||
}
|
||||
|
||||
#theme legend {
|
||||
margin: 0 auto;
|
||||
color: var(--color-teal);
|
||||
}
|
||||
|
||||
footer label {
|
||||
cursor: pointer;
|
||||
border: .125rem solid var(--color-pink);
|
||||
padding: 0 .25rem;
|
||||
color: var(--color-pink);
|
||||
background-color: var(--color-bg); /* this stops the box shadows from showing through */
|
||||
box-shadow: .15em .15em var(--color-shadow);
|
||||
/* Click animation handling */
|
||||
position: relative;
|
||||
top: 0;
|
||||
left: 0;
|
||||
transition: top .05s ease-in, left .05s ease-in;
|
||||
}
|
||||
|
||||
footer input:checked + label {
|
||||
color: var(--color-blue);
|
||||
border-color: var(--color-blue);
|
||||
}
|
||||
|
||||
footer label i {
|
||||
color: var(--color-teal);
|
||||
}
|
||||
|
||||
footer input:checked + label i {
|
||||
color: var(--color-pink);
|
||||
}
|
||||
|
||||
@media (any-hover: hover) {
|
||||
footer label:hover,
|
||||
footer input:checked + label:hover,
|
||||
footer label:hover i,
|
||||
footer input:checked + label:hover i {
|
||||
color: var(--color-bg);
|
||||
}
|
||||
|
||||
footer label:hover {
|
||||
background-color: var(--color-pink);
|
||||
}
|
||||
|
||||
footer input:checked + label:hover {
|
||||
background-color: var(--color-teal);
|
||||
}
|
||||
}
|
||||
|
||||
footer input:focus-visible + label,
|
||||
footer input:focus-visible + label i {
|
||||
color: var(--color-bg);
|
||||
background-color: var(--color-pink);
|
||||
border-color: var(--color-pink);
|
||||
}
|
||||
|
||||
footer input:checked:focus-visible + label,
|
||||
footer input:checked:focus-visible + label i {
|
||||
color: var(--color-bg);
|
||||
background-color: var(--color-teal);
|
||||
border-color: var(--color-teal);
|
||||
}
|
||||
|
||||
footer label:active {
|
||||
top: .09em;
|
||||
left: .09em;
|
||||
box-shadow: .05em .05em var(--color-shadow);
|
||||
}
|
||||
|
||||
label.theme-light {
|
||||
border-top-left-radius: 1rem;
|
||||
border-bottom-left-radius: 1rem;
|
||||
border-right: none;
|
||||
padding-left: .35rem;
|
||||
}
|
||||
|
||||
label.theme-auto {
|
||||
}
|
||||
|
||||
label.theme-dark {
|
||||
border-top-right-radius: 1rem;
|
||||
border-bottom-right-radius: 1rem;
|
||||
border-left: none;
|
||||
padding-right: .35rem;
|
||||
}
|
||||
|
||||
footer input {
|
||||
/* To allow screen reader to still access these. */
|
||||
/* From https://lyra.horse/blog/2025/08/you-dont-need-js/ */
|
||||
opacity: 0;
|
||||
position: absolute;
|
||||
pointer-events: none;
|
||||
}
|
||||
|
||||
/* Pagination */
|
||||
.pagination,
|
||||
.pagination li {
|
||||
@@ -1222,6 +1334,8 @@ pre[class*=language-]::selection {
|
||||
}
|
||||
}</style>
|
||||
|
||||
|
||||
|
||||
<script type="module">// Thank you to https://github.com/daviddarnes/heading-anchors
|
||||
// Thank you to https://amberwilson.co.uk/blog/are-your-anchor-links-accessible/
|
||||
|
||||
@@ -1476,6 +1590,41 @@ if (window.innerWidth > 650) {
|
||||
dialog.close();
|
||||
}
|
||||
});
|
||||
}
|
||||
const THEME = "theme";
|
||||
|
||||
const saveTheme = (themeValue) => {
|
||||
localStorage.setItem(THEME, themeValue);
|
||||
};
|
||||
|
||||
const themeLight = document.getElementById("theme-light");
|
||||
themeLight.addEventListener("input", (e) => {
|
||||
saveTheme(themeLight.value);
|
||||
});
|
||||
|
||||
const themeAuto = document.getElementById("theme-auto");
|
||||
themeAuto.addEventListener("input", (e) => {
|
||||
saveTheme(themeAuto.auto);
|
||||
});
|
||||
|
||||
const themeDark = document.getElementById("theme-dark");
|
||||
themeDark.addEventListener("input", (e) => {
|
||||
saveTheme(themeDark.value);
|
||||
});
|
||||
|
||||
var currentThemeValue = localStorage.getItem(THEME);
|
||||
switch (currentThemeValue) {
|
||||
case "light":
|
||||
themeLight.checked = true;
|
||||
break;
|
||||
case "auto":
|
||||
themeAuto.checked = true;
|
||||
break;
|
||||
case "dark":
|
||||
themeDark.checked = true;
|
||||
break;
|
||||
default:
|
||||
themeAuto.checked = true;
|
||||
}</script>
|
||||
|
||||
</head>
|
||||
@@ -1661,9 +1810,30 @@ if (window.innerWidth > 650) {
|
||||
</a>
|
||||
</li>
|
||||
</ul>
|
||||
|
||||
<fieldset id="theme">
|
||||
<legend>color scheme</legend>
|
||||
|
||||
<input type="radio" id="theme-light" name="theme" value="light">
|
||||
<label class="theme-light" for="theme-light">
|
||||
<i class="fa-regular fa-sun" aria-hidden="true"></i>
|
||||
light
|
||||
</label>
|
||||
|
||||
<input type="radio" id="theme-auto" name="theme" value="auto">
|
||||
<label class="theme-auto" for="theme-auto">
|
||||
auto
|
||||
</label>
|
||||
|
||||
<input type="radio" id="theme-dark" name="theme" value="dark">
|
||||
<label class="theme-dark" for="theme-dark">
|
||||
dark
|
||||
<i class="fa-regular fa-moon" aria-hidden="true"></i>
|
||||
</label>
|
||||
</fieldset>
|
||||
</footer>
|
||||
|
||||
|
||||
<!-- This page `/ecommerce-options/` was built on 2026-09-08T23:18:32.741Z -->
|
||||
<!-- This page `/ecommerce-options/` was built on 2026-09-09T20:38:02.908Z -->
|
||||
</body>
|
||||
</html>
|
||||
|
||||
+183
-13
@@ -478,6 +478,13 @@ body:has(dialog[open]) {
|
||||
--color-grey: light-dark(var(--color-grey-dark), var(--color-grey-light));
|
||||
}
|
||||
|
||||
:root:has(#theme-light:checked) {
|
||||
color-scheme: light;
|
||||
}
|
||||
:root:has(#theme-dark:checked) {
|
||||
color-scheme: dark;
|
||||
}
|
||||
|
||||
/* Base */
|
||||
|
||||
* {
|
||||
@@ -621,7 +628,7 @@ ul, ol, dl, li {
|
||||
}
|
||||
|
||||
li {
|
||||
line-height: 1.2 5;
|
||||
line-height: 1.2;
|
||||
margin-top: .65rem;
|
||||
margin-bottom: .65rem;
|
||||
}
|
||||
@@ -960,6 +967,111 @@ footer a:focus-visible {
|
||||
outline-color: var(--color-pink);
|
||||
}
|
||||
|
||||
/* color picker */
|
||||
#theme {
|
||||
display: flex;
|
||||
justify-content: center;
|
||||
margin: .5rem auto 0;
|
||||
padding: 0 .75rem .5rem;
|
||||
width: fit-content;
|
||||
border: .125rem solid var(--color-teal);
|
||||
border-radius: 2rem;
|
||||
}
|
||||
|
||||
#theme legend {
|
||||
margin: 0 auto;
|
||||
color: var(--color-teal);
|
||||
}
|
||||
|
||||
footer label {
|
||||
cursor: pointer;
|
||||
border: .125rem solid var(--color-pink);
|
||||
padding: 0 .25rem;
|
||||
color: var(--color-pink);
|
||||
background-color: var(--color-bg); /* this stops the box shadows from showing through */
|
||||
box-shadow: .15em .15em var(--color-shadow);
|
||||
/* Click animation handling */
|
||||
position: relative;
|
||||
top: 0;
|
||||
left: 0;
|
||||
transition: top .05s ease-in, left .05s ease-in;
|
||||
}
|
||||
|
||||
footer input:checked + label {
|
||||
color: var(--color-blue);
|
||||
border-color: var(--color-blue);
|
||||
}
|
||||
|
||||
footer label i {
|
||||
color: var(--color-teal);
|
||||
}
|
||||
|
||||
footer input:checked + label i {
|
||||
color: var(--color-pink);
|
||||
}
|
||||
|
||||
@media (any-hover: hover) {
|
||||
footer label:hover,
|
||||
footer input:checked + label:hover,
|
||||
footer label:hover i,
|
||||
footer input:checked + label:hover i {
|
||||
color: var(--color-bg);
|
||||
}
|
||||
|
||||
footer label:hover {
|
||||
background-color: var(--color-pink);
|
||||
}
|
||||
|
||||
footer input:checked + label:hover {
|
||||
background-color: var(--color-teal);
|
||||
}
|
||||
}
|
||||
|
||||
footer input:focus-visible + label,
|
||||
footer input:focus-visible + label i {
|
||||
color: var(--color-bg);
|
||||
background-color: var(--color-pink);
|
||||
border-color: var(--color-pink);
|
||||
}
|
||||
|
||||
footer input:checked:focus-visible + label,
|
||||
footer input:checked:focus-visible + label i {
|
||||
color: var(--color-bg);
|
||||
background-color: var(--color-teal);
|
||||
border-color: var(--color-teal);
|
||||
}
|
||||
|
||||
footer label:active {
|
||||
top: .09em;
|
||||
left: .09em;
|
||||
box-shadow: .05em .05em var(--color-shadow);
|
||||
}
|
||||
|
||||
label.theme-light {
|
||||
border-top-left-radius: 1rem;
|
||||
border-bottom-left-radius: 1rem;
|
||||
border-right: none;
|
||||
padding-left: .35rem;
|
||||
}
|
||||
|
||||
label.theme-auto {
|
||||
}
|
||||
|
||||
label.theme-dark {
|
||||
border-top-right-radius: 1rem;
|
||||
border-bottom-right-radius: 1rem;
|
||||
border-left: none;
|
||||
padding-right: .35rem;
|
||||
}
|
||||
|
||||
footer input {
|
||||
/* To allow screen reader to still access these. */
|
||||
/* From https://lyra.horse/blog/2025/08/you-dont-need-js/ */
|
||||
opacity: 0;
|
||||
position: absolute;
|
||||
pointer-events: none;
|
||||
}
|
||||
|
||||
/* Pagination */
|
||||
.pagination,
|
||||
.pagination li {
|
||||
@@ -1222,6 +1334,8 @@ pre[class*=language-]::selection {
|
||||
}
|
||||
}</style>
|
||||
|
||||
|
||||
|
||||
<script type="module">// Thank you to https://github.com/daviddarnes/heading-anchors
|
||||
// Thank you to https://amberwilson.co.uk/blog/are-your-anchor-links-accessible/
|
||||
|
||||
@@ -1476,6 +1590,41 @@ if (window.innerWidth > 650) {
|
||||
dialog.close();
|
||||
}
|
||||
});
|
||||
}
|
||||
const THEME = "theme";
|
||||
|
||||
const saveTheme = (themeValue) => {
|
||||
localStorage.setItem(THEME, themeValue);
|
||||
};
|
||||
|
||||
const themeLight = document.getElementById("theme-light");
|
||||
themeLight.addEventListener("input", (e) => {
|
||||
saveTheme(themeLight.value);
|
||||
});
|
||||
|
||||
const themeAuto = document.getElementById("theme-auto");
|
||||
themeAuto.addEventListener("input", (e) => {
|
||||
saveTheme(themeAuto.auto);
|
||||
});
|
||||
|
||||
const themeDark = document.getElementById("theme-dark");
|
||||
themeDark.addEventListener("input", (e) => {
|
||||
saveTheme(themeDark.value);
|
||||
});
|
||||
|
||||
var currentThemeValue = localStorage.getItem(THEME);
|
||||
switch (currentThemeValue) {
|
||||
case "light":
|
||||
themeLight.checked = true;
|
||||
break;
|
||||
case "auto":
|
||||
themeAuto.checked = true;
|
||||
break;
|
||||
case "dark":
|
||||
themeDark.checked = true;
|
||||
break;
|
||||
default:
|
||||
themeAuto.checked = true;
|
||||
}</script>
|
||||
|
||||
</head>
|
||||
@@ -1610,45 +1759,45 @@ if (window.innerWidth > 650) {
|
||||
<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="/snap-pouch/">
|
||||
<h2 data-ha-exclude="" id="snap-pouch">snap pouch </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/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">
|
||||
|
||||
</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="/brookes-suspenders/">
|
||||
<h2 data-ha-exclude="" id="brookes-suspenders">brooke's suspenders </h2>
|
||||
|
||||
<ul class="postlist-tags">
|
||||
|
||||
<li>leather</li>
|
||||
|
||||
<li>software</li>
|
||||
|
||||
</ul>
|
||||
<img src="/img/shoelace-bag.jpg" alt="a 3-image collage showcasing a leather crossbody bag. the leather body is brown and fairly simple. up the narrow sides, rope is laced through grommets in a style resembling a shoe lacing. the rope forms the handle and loops seamlessly through the other side of the bag, joining in one point in a figure-8 follow-through knot. At the bottom corners, there are small diagonal lines of stitching to give the bag a small lip around the base and ensure small objects don't slide out." loading="lazy" decoding="async" width="1000" height="1777">
|
||||
<img src="/img/brooke-suspenders.jpg" alt="a two image collage showing the front and back of a person, neck to waist. she's wearing leather suspenders with a button attachment, buckles for adjustment, and a stitched diamond where the straps cross in the back." loading="lazy" decoding="async" width="1000" height="750">
|
||||
|
||||
</a>
|
||||
</li>
|
||||
|
||||
<li class="post">
|
||||
<a class="postlink" href="/leather-lighter-case/">
|
||||
<h2 data-ha-exclude="" id="leather-lighter-case">leather lighter case </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/leather-lighter-case.jpg" alt="A bic lighter wrapped in leather and hand-stitched up one side." loading="lazy" decoding="async" width="1000" height="750">
|
||||
<img src="/img/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>
|
||||
@@ -1681,9 +1830,30 @@ if (window.innerWidth > 650) {
|
||||
</a>
|
||||
</li>
|
||||
</ul>
|
||||
|
||||
<fieldset id="theme">
|
||||
<legend>color scheme</legend>
|
||||
|
||||
<input type="radio" id="theme-light" name="theme" value="light">
|
||||
<label class="theme-light" for="theme-light">
|
||||
<i class="fa-regular fa-sun" aria-hidden="true"></i>
|
||||
light
|
||||
</label>
|
||||
|
||||
<input type="radio" id="theme-auto" name="theme" value="auto">
|
||||
<label class="theme-auto" for="theme-auto">
|
||||
auto
|
||||
</label>
|
||||
|
||||
<input type="radio" id="theme-dark" name="theme" value="dark">
|
||||
<label class="theme-dark" for="theme-dark">
|
||||
dark
|
||||
<i class="fa-regular fa-moon" aria-hidden="true"></i>
|
||||
</label>
|
||||
</fieldset>
|
||||
</footer>
|
||||
|
||||
|
||||
<!-- This page `/eight-pocket-bifold/` was built on 2026-09-08T23:18:32.742Z -->
|
||||
<!-- This page `/eight-pocket-bifold/` was built on 2026-09-09T20:38:02.911Z -->
|
||||
</body>
|
||||
</html>
|
||||
|
||||
+183
-11
@@ -478,6 +478,13 @@ body:has(dialog[open]) {
|
||||
--color-grey: light-dark(var(--color-grey-dark), var(--color-grey-light));
|
||||
}
|
||||
|
||||
:root:has(#theme-light:checked) {
|
||||
color-scheme: light;
|
||||
}
|
||||
:root:has(#theme-dark:checked) {
|
||||
color-scheme: dark;
|
||||
}
|
||||
|
||||
/* Base */
|
||||
|
||||
* {
|
||||
@@ -621,7 +628,7 @@ ul, ol, dl, li {
|
||||
}
|
||||
|
||||
li {
|
||||
line-height: 1.2 5;
|
||||
line-height: 1.2;
|
||||
margin-top: .65rem;
|
||||
margin-bottom: .65rem;
|
||||
}
|
||||
@@ -960,6 +967,111 @@ footer a:focus-visible {
|
||||
outline-color: var(--color-pink);
|
||||
}
|
||||
|
||||
/* color picker */
|
||||
#theme {
|
||||
display: flex;
|
||||
justify-content: center;
|
||||
margin: .5rem auto 0;
|
||||
padding: 0 .75rem .5rem;
|
||||
width: fit-content;
|
||||
border: .125rem solid var(--color-teal);
|
||||
border-radius: 2rem;
|
||||
}
|
||||
|
||||
#theme legend {
|
||||
margin: 0 auto;
|
||||
color: var(--color-teal);
|
||||
}
|
||||
|
||||
footer label {
|
||||
cursor: pointer;
|
||||
border: .125rem solid var(--color-pink);
|
||||
padding: 0 .25rem;
|
||||
color: var(--color-pink);
|
||||
background-color: var(--color-bg); /* this stops the box shadows from showing through */
|
||||
box-shadow: .15em .15em var(--color-shadow);
|
||||
/* Click animation handling */
|
||||
position: relative;
|
||||
top: 0;
|
||||
left: 0;
|
||||
transition: top .05s ease-in, left .05s ease-in;
|
||||
}
|
||||
|
||||
footer input:checked + label {
|
||||
color: var(--color-blue);
|
||||
border-color: var(--color-blue);
|
||||
}
|
||||
|
||||
footer label i {
|
||||
color: var(--color-teal);
|
||||
}
|
||||
|
||||
footer input:checked + label i {
|
||||
color: var(--color-pink);
|
||||
}
|
||||
|
||||
@media (any-hover: hover) {
|
||||
footer label:hover,
|
||||
footer input:checked + label:hover,
|
||||
footer label:hover i,
|
||||
footer input:checked + label:hover i {
|
||||
color: var(--color-bg);
|
||||
}
|
||||
|
||||
footer label:hover {
|
||||
background-color: var(--color-pink);
|
||||
}
|
||||
|
||||
footer input:checked + label:hover {
|
||||
background-color: var(--color-teal);
|
||||
}
|
||||
}
|
||||
|
||||
footer input:focus-visible + label,
|
||||
footer input:focus-visible + label i {
|
||||
color: var(--color-bg);
|
||||
background-color: var(--color-pink);
|
||||
border-color: var(--color-pink);
|
||||
}
|
||||
|
||||
footer input:checked:focus-visible + label,
|
||||
footer input:checked:focus-visible + label i {
|
||||
color: var(--color-bg);
|
||||
background-color: var(--color-teal);
|
||||
border-color: var(--color-teal);
|
||||
}
|
||||
|
||||
footer label:active {
|
||||
top: .09em;
|
||||
left: .09em;
|
||||
box-shadow: .05em .05em var(--color-shadow);
|
||||
}
|
||||
|
||||
label.theme-light {
|
||||
border-top-left-radius: 1rem;
|
||||
border-bottom-left-radius: 1rem;
|
||||
border-right: none;
|
||||
padding-left: .35rem;
|
||||
}
|
||||
|
||||
label.theme-auto {
|
||||
}
|
||||
|
||||
label.theme-dark {
|
||||
border-top-right-radius: 1rem;
|
||||
border-bottom-right-radius: 1rem;
|
||||
border-left: none;
|
||||
padding-right: .35rem;
|
||||
}
|
||||
|
||||
footer input {
|
||||
/* To allow screen reader to still access these. */
|
||||
/* From https://lyra.horse/blog/2025/08/you-dont-need-js/ */
|
||||
opacity: 0;
|
||||
position: absolute;
|
||||
pointer-events: none;
|
||||
}
|
||||
|
||||
/* Pagination */
|
||||
.pagination,
|
||||
.pagination li {
|
||||
@@ -1222,6 +1334,8 @@ pre[class*=language-]::selection {
|
||||
}
|
||||
}</style>
|
||||
|
||||
|
||||
|
||||
<script type="module">// Thank you to https://github.com/daviddarnes/heading-anchors
|
||||
// Thank you to https://amberwilson.co.uk/blog/are-your-anchor-links-accessible/
|
||||
|
||||
@@ -1476,6 +1590,41 @@ if (window.innerWidth > 650) {
|
||||
dialog.close();
|
||||
}
|
||||
});
|
||||
}
|
||||
const THEME = "theme";
|
||||
|
||||
const saveTheme = (themeValue) => {
|
||||
localStorage.setItem(THEME, themeValue);
|
||||
};
|
||||
|
||||
const themeLight = document.getElementById("theme-light");
|
||||
themeLight.addEventListener("input", (e) => {
|
||||
saveTheme(themeLight.value);
|
||||
});
|
||||
|
||||
const themeAuto = document.getElementById("theme-auto");
|
||||
themeAuto.addEventListener("input", (e) => {
|
||||
saveTheme(themeAuto.auto);
|
||||
});
|
||||
|
||||
const themeDark = document.getElementById("theme-dark");
|
||||
themeDark.addEventListener("input", (e) => {
|
||||
saveTheme(themeDark.value);
|
||||
});
|
||||
|
||||
var currentThemeValue = localStorage.getItem(THEME);
|
||||
switch (currentThemeValue) {
|
||||
case "light":
|
||||
themeLight.checked = true;
|
||||
break;
|
||||
case "auto":
|
||||
themeAuto.checked = true;
|
||||
break;
|
||||
case "dark":
|
||||
themeDark.checked = true;
|
||||
break;
|
||||
default:
|
||||
themeAuto.checked = true;
|
||||
}</script>
|
||||
|
||||
</head>
|
||||
@@ -1901,43 +2050,45 @@ eleventyExcludeFromCollections: true
|
||||
<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="/visual-site-builders-and-accessibility/">
|
||||
<h2 data-ha-exclude="" id="visual-site-builders-and-accessibility">visual site builders and accessibility </h2>
|
||||
|
||||
<ul class="postlist-tags">
|
||||
|
||||
<li>software</li>
|
||||
|
||||
</ul>
|
||||
<img src="/img/handedness-toggle-0.png" alt="A screenshot of the rescue trans rescue navbar centered on a button that shows a hand pointing left." loading="lazy" decoding="async" width="1000" height="257">
|
||||
<img src="/img/roses.jpg" alt="Image unrelated to post. Two peach-colored roses, the farther away one a bit out of focus." loading="lazy" decoding="async" width="1000" height="666">
|
||||
|
||||
</a>
|
||||
</li>
|
||||
|
||||
<li class="post">
|
||||
<a class="postlink" href="/framer-accessibility/">
|
||||
<h2 data-ha-exclude="" id="framer-accessibility">framer accessibility </h2>
|
||||
<a class="postlink" href="/designing-a-bag/">
|
||||
<h2 data-ha-exclude="" id="designing-a-bag">designing a bag </h2>
|
||||
|
||||
<ul class="postlist-tags">
|
||||
|
||||
<li>leather</li>
|
||||
|
||||
<li>software</li>
|
||||
|
||||
</ul>
|
||||
<img src="/img/framer.png" alt="A screenshot of the Framer projects page showing part of the tile for a very rudimentary project titled Accessibility Test. It has a huge title that just reads Title, a basic form, and some pictures of my dog as notable features." loading="lazy" decoding="async" width="841" height="532">
|
||||
<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't slide out." loading="lazy" decoding="async" width="1000" height="1777">
|
||||
|
||||
</a>
|
||||
</li>
|
||||
|
||||
<li class="post">
|
||||
<a class="postlink" href="/moving-images/">
|
||||
<h2 data-ha-exclude="" id="moving-images">moving images </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/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/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>
|
||||
@@ -1970,9 +2121,30 @@ eleventyExcludeFromCollections: true
|
||||
</a>
|
||||
</li>
|
||||
</ul>
|
||||
|
||||
<fieldset id="theme">
|
||||
<legend>color scheme</legend>
|
||||
|
||||
<input type="radio" id="theme-light" name="theme" value="light">
|
||||
<label class="theme-light" for="theme-light">
|
||||
<i class="fa-regular fa-sun" aria-hidden="true"></i>
|
||||
light
|
||||
</label>
|
||||
|
||||
<input type="radio" id="theme-auto" name="theme" value="auto">
|
||||
<label class="theme-auto" for="theme-auto">
|
||||
auto
|
||||
</label>
|
||||
|
||||
<input type="radio" id="theme-dark" name="theme" value="dark">
|
||||
<label class="theme-dark" for="theme-dark">
|
||||
dark
|
||||
<i class="fa-regular fa-moon" aria-hidden="true"></i>
|
||||
</label>
|
||||
</fieldset>
|
||||
</footer>
|
||||
|
||||
|
||||
<!-- This page `/eleventy-lessons/` was built on 2026-09-08T23:18:32.757Z -->
|
||||
<!-- This page `/eleventy-lessons/` was built on 2026-09-09T20:38:02.939Z -->
|
||||
</body>
|
||||
</html>
|
||||
|
||||
+212
-46
@@ -478,6 +478,13 @@ body:has(dialog[open]) {
|
||||
--color-grey: light-dark(var(--color-grey-dark), var(--color-grey-light));
|
||||
}
|
||||
|
||||
:root:has(#theme-light:checked) {
|
||||
color-scheme: light;
|
||||
}
|
||||
:root:has(#theme-dark:checked) {
|
||||
color-scheme: dark;
|
||||
}
|
||||
|
||||
/* Base */
|
||||
|
||||
* {
|
||||
@@ -621,7 +628,7 @@ ul, ol, dl, li {
|
||||
}
|
||||
|
||||
li {
|
||||
line-height: 1.2 5;
|
||||
line-height: 1.2;
|
||||
margin-top: .65rem;
|
||||
margin-bottom: .65rem;
|
||||
}
|
||||
@@ -960,6 +967,111 @@ footer a:focus-visible {
|
||||
outline-color: var(--color-pink);
|
||||
}
|
||||
|
||||
/* color picker */
|
||||
#theme {
|
||||
display: flex;
|
||||
justify-content: center;
|
||||
margin: .5rem auto 0;
|
||||
padding: 0 .75rem .5rem;
|
||||
width: fit-content;
|
||||
border: .125rem solid var(--color-teal);
|
||||
border-radius: 2rem;
|
||||
}
|
||||
|
||||
#theme legend {
|
||||
margin: 0 auto;
|
||||
color: var(--color-teal);
|
||||
}
|
||||
|
||||
footer label {
|
||||
cursor: pointer;
|
||||
border: .125rem solid var(--color-pink);
|
||||
padding: 0 .25rem;
|
||||
color: var(--color-pink);
|
||||
background-color: var(--color-bg); /* this stops the box shadows from showing through */
|
||||
box-shadow: .15em .15em var(--color-shadow);
|
||||
/* Click animation handling */
|
||||
position: relative;
|
||||
top: 0;
|
||||
left: 0;
|
||||
transition: top .05s ease-in, left .05s ease-in;
|
||||
}
|
||||
|
||||
footer input:checked + label {
|
||||
color: var(--color-blue);
|
||||
border-color: var(--color-blue);
|
||||
}
|
||||
|
||||
footer label i {
|
||||
color: var(--color-teal);
|
||||
}
|
||||
|
||||
footer input:checked + label i {
|
||||
color: var(--color-pink);
|
||||
}
|
||||
|
||||
@media (any-hover: hover) {
|
||||
footer label:hover,
|
||||
footer input:checked + label:hover,
|
||||
footer label:hover i,
|
||||
footer input:checked + label:hover i {
|
||||
color: var(--color-bg);
|
||||
}
|
||||
|
||||
footer label:hover {
|
||||
background-color: var(--color-pink);
|
||||
}
|
||||
|
||||
footer input:checked + label:hover {
|
||||
background-color: var(--color-teal);
|
||||
}
|
||||
}
|
||||
|
||||
footer input:focus-visible + label,
|
||||
footer input:focus-visible + label i {
|
||||
color: var(--color-bg);
|
||||
background-color: var(--color-pink);
|
||||
border-color: var(--color-pink);
|
||||
}
|
||||
|
||||
footer input:checked:focus-visible + label,
|
||||
footer input:checked:focus-visible + label i {
|
||||
color: var(--color-bg);
|
||||
background-color: var(--color-teal);
|
||||
border-color: var(--color-teal);
|
||||
}
|
||||
|
||||
footer label:active {
|
||||
top: .09em;
|
||||
left: .09em;
|
||||
box-shadow: .05em .05em var(--color-shadow);
|
||||
}
|
||||
|
||||
label.theme-light {
|
||||
border-top-left-radius: 1rem;
|
||||
border-bottom-left-radius: 1rem;
|
||||
border-right: none;
|
||||
padding-left: .35rem;
|
||||
}
|
||||
|
||||
label.theme-auto {
|
||||
}
|
||||
|
||||
label.theme-dark {
|
||||
border-top-right-radius: 1rem;
|
||||
border-bottom-right-radius: 1rem;
|
||||
border-left: none;
|
||||
padding-right: .35rem;
|
||||
}
|
||||
|
||||
footer input {
|
||||
/* To allow screen reader to still access these. */
|
||||
/* From https://lyra.horse/blog/2025/08/you-dont-need-js/ */
|
||||
opacity: 0;
|
||||
position: absolute;
|
||||
pointer-events: none;
|
||||
}
|
||||
|
||||
/* Pagination */
|
||||
.pagination,
|
||||
.pagination li {
|
||||
@@ -1222,6 +1334,8 @@ pre[class*=language-]::selection {
|
||||
}
|
||||
}</style>
|
||||
|
||||
|
||||
|
||||
<script type="module">// Thank you to https://github.com/daviddarnes/heading-anchors
|
||||
// Thank you to https://amberwilson.co.uk/blog/are-your-anchor-links-accessible/
|
||||
|
||||
@@ -1476,6 +1590,41 @@ if (window.innerWidth > 650) {
|
||||
dialog.close();
|
||||
}
|
||||
});
|
||||
}
|
||||
const THEME = "theme";
|
||||
|
||||
const saveTheme = (themeValue) => {
|
||||
localStorage.setItem(THEME, themeValue);
|
||||
};
|
||||
|
||||
const themeLight = document.getElementById("theme-light");
|
||||
themeLight.addEventListener("input", (e) => {
|
||||
saveTheme(themeLight.value);
|
||||
});
|
||||
|
||||
const themeAuto = document.getElementById("theme-auto");
|
||||
themeAuto.addEventListener("input", (e) => {
|
||||
saveTheme(themeAuto.auto);
|
||||
});
|
||||
|
||||
const themeDark = document.getElementById("theme-dark");
|
||||
themeDark.addEventListener("input", (e) => {
|
||||
saveTheme(themeDark.value);
|
||||
});
|
||||
|
||||
var currentThemeValue = localStorage.getItem(THEME);
|
||||
switch (currentThemeValue) {
|
||||
case "light":
|
||||
themeLight.checked = true;
|
||||
break;
|
||||
case "auto":
|
||||
themeAuto.checked = true;
|
||||
break;
|
||||
case "dark":
|
||||
themeDark.checked = true;
|
||||
break;
|
||||
default:
|
||||
themeAuto.checked = true;
|
||||
}</script>
|
||||
|
||||
</head>
|
||||
@@ -1610,48 +1759,8 @@ if (window.innerWidth > 650) {
|
||||
<ol id="postlist">
|
||||
|
||||
<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/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="/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="/foxgloves/">
|
||||
<h2 data-ha-exclude="" id="foxgloves">foxgloves </h2>
|
||||
<a class="postlink" href="/trans-wrongs-skull/">
|
||||
<h2 data-ha-exclude="" id="trans-wrongs-skull">trans wrongs skull </h2>
|
||||
|
||||
<ul class="postlist-tags">
|
||||
|
||||
@@ -1659,10 +1768,46 @@ if (window.innerWidth > 650) {
|
||||
|
||||
<li>card</li>
|
||||
|
||||
<li>shirt</li>
|
||||
<li>sticker</li>
|
||||
|
||||
<li>pin</li>
|
||||
|
||||
<li>gender</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">
|
||||
<img src="/img/trans-wrongs-print.jpg" alt="A smiling skull with devil horns and a little spiked tail, and a speech bubble reading 'trans wrongs!'" 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>
|
||||
|
||||
<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, 'become unbutterable.'" loading="lazy" decoding="async" width="1000" height="562">
|
||||
|
||||
</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>
|
||||
|
||||
<ul class="postlist-tags">
|
||||
|
||||
<li>print</li>
|
||||
|
||||
<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>
|
||||
@@ -1695,9 +1840,30 @@ if (window.innerWidth > 650) {
|
||||
</a>
|
||||
</li>
|
||||
</ul>
|
||||
|
||||
<fieldset id="theme">
|
||||
<legend>color scheme</legend>
|
||||
|
||||
<input type="radio" id="theme-light" name="theme" value="light">
|
||||
<label class="theme-light" for="theme-light">
|
||||
<i class="fa-regular fa-sun" aria-hidden="true"></i>
|
||||
light
|
||||
</label>
|
||||
|
||||
<input type="radio" id="theme-auto" name="theme" value="auto">
|
||||
<label class="theme-auto" for="theme-auto">
|
||||
auto
|
||||
</label>
|
||||
|
||||
<input type="radio" id="theme-dark" name="theme" value="dark">
|
||||
<label class="theme-dark" for="theme-dark">
|
||||
dark
|
||||
<i class="fa-regular fa-moon" aria-hidden="true"></i>
|
||||
</label>
|
||||
</fieldset>
|
||||
</footer>
|
||||
|
||||
|
||||
<!-- This page `/euphorbia/` was built on 2026-09-08T23:18:32.764Z -->
|
||||
<!-- This page `/euphorbia/` was built on 2026-09-09T20:38:02.898Z -->
|
||||
</body>
|
||||
</html>
|
||||
|
||||
+206
-38
@@ -478,6 +478,13 @@ body:has(dialog[open]) {
|
||||
--color-grey: light-dark(var(--color-grey-dark), var(--color-grey-light));
|
||||
}
|
||||
|
||||
:root:has(#theme-light:checked) {
|
||||
color-scheme: light;
|
||||
}
|
||||
:root:has(#theme-dark:checked) {
|
||||
color-scheme: dark;
|
||||
}
|
||||
|
||||
/* Base */
|
||||
|
||||
* {
|
||||
@@ -621,7 +628,7 @@ ul, ol, dl, li {
|
||||
}
|
||||
|
||||
li {
|
||||
line-height: 1.2 5;
|
||||
line-height: 1.2;
|
||||
margin-top: .65rem;
|
||||
margin-bottom: .65rem;
|
||||
}
|
||||
@@ -960,6 +967,111 @@ footer a:focus-visible {
|
||||
outline-color: var(--color-pink);
|
||||
}
|
||||
|
||||
/* color picker */
|
||||
#theme {
|
||||
display: flex;
|
||||
justify-content: center;
|
||||
margin: .5rem auto 0;
|
||||
padding: 0 .75rem .5rem;
|
||||
width: fit-content;
|
||||
border: .125rem solid var(--color-teal);
|
||||
border-radius: 2rem;
|
||||
}
|
||||
|
||||
#theme legend {
|
||||
margin: 0 auto;
|
||||
color: var(--color-teal);
|
||||
}
|
||||
|
||||
footer label {
|
||||
cursor: pointer;
|
||||
border: .125rem solid var(--color-pink);
|
||||
padding: 0 .25rem;
|
||||
color: var(--color-pink);
|
||||
background-color: var(--color-bg); /* this stops the box shadows from showing through */
|
||||
box-shadow: .15em .15em var(--color-shadow);
|
||||
/* Click animation handling */
|
||||
position: relative;
|
||||
top: 0;
|
||||
left: 0;
|
||||
transition: top .05s ease-in, left .05s ease-in;
|
||||
}
|
||||
|
||||
footer input:checked + label {
|
||||
color: var(--color-blue);
|
||||
border-color: var(--color-blue);
|
||||
}
|
||||
|
||||
footer label i {
|
||||
color: var(--color-teal);
|
||||
}
|
||||
|
||||
footer input:checked + label i {
|
||||
color: var(--color-pink);
|
||||
}
|
||||
|
||||
@media (any-hover: hover) {
|
||||
footer label:hover,
|
||||
footer input:checked + label:hover,
|
||||
footer label:hover i,
|
||||
footer input:checked + label:hover i {
|
||||
color: var(--color-bg);
|
||||
}
|
||||
|
||||
footer label:hover {
|
||||
background-color: var(--color-pink);
|
||||
}
|
||||
|
||||
footer input:checked + label:hover {
|
||||
background-color: var(--color-teal);
|
||||
}
|
||||
}
|
||||
|
||||
footer input:focus-visible + label,
|
||||
footer input:focus-visible + label i {
|
||||
color: var(--color-bg);
|
||||
background-color: var(--color-pink);
|
||||
border-color: var(--color-pink);
|
||||
}
|
||||
|
||||
footer input:checked:focus-visible + label,
|
||||
footer input:checked:focus-visible + label i {
|
||||
color: var(--color-bg);
|
||||
background-color: var(--color-teal);
|
||||
border-color: var(--color-teal);
|
||||
}
|
||||
|
||||
footer label:active {
|
||||
top: .09em;
|
||||
left: .09em;
|
||||
box-shadow: .05em .05em var(--color-shadow);
|
||||
}
|
||||
|
||||
label.theme-light {
|
||||
border-top-left-radius: 1rem;
|
||||
border-bottom-left-radius: 1rem;
|
||||
border-right: none;
|
||||
padding-left: .35rem;
|
||||
}
|
||||
|
||||
label.theme-auto {
|
||||
}
|
||||
|
||||
label.theme-dark {
|
||||
border-top-right-radius: 1rem;
|
||||
border-bottom-right-radius: 1rem;
|
||||
border-left: none;
|
||||
padding-right: .35rem;
|
||||
}
|
||||
|
||||
footer input {
|
||||
/* To allow screen reader to still access these. */
|
||||
/* From https://lyra.horse/blog/2025/08/you-dont-need-js/ */
|
||||
opacity: 0;
|
||||
position: absolute;
|
||||
pointer-events: none;
|
||||
}
|
||||
|
||||
/* Pagination */
|
||||
.pagination,
|
||||
.pagination li {
|
||||
@@ -1222,6 +1334,8 @@ pre[class*=language-]::selection {
|
||||
}
|
||||
}</style>
|
||||
|
||||
|
||||
|
||||
<script type="module">// Thank you to https://github.com/daviddarnes/heading-anchors
|
||||
// Thank you to https://amberwilson.co.uk/blog/are-your-anchor-links-accessible/
|
||||
|
||||
@@ -1476,6 +1590,41 @@ if (window.innerWidth > 650) {
|
||||
dialog.close();
|
||||
}
|
||||
});
|
||||
}
|
||||
const THEME = "theme";
|
||||
|
||||
const saveTheme = (themeValue) => {
|
||||
localStorage.setItem(THEME, themeValue);
|
||||
};
|
||||
|
||||
const themeLight = document.getElementById("theme-light");
|
||||
themeLight.addEventListener("input", (e) => {
|
||||
saveTheme(themeLight.value);
|
||||
});
|
||||
|
||||
const themeAuto = document.getElementById("theme-auto");
|
||||
themeAuto.addEventListener("input", (e) => {
|
||||
saveTheme(themeAuto.auto);
|
||||
});
|
||||
|
||||
const themeDark = document.getElementById("theme-dark");
|
||||
themeDark.addEventListener("input", (e) => {
|
||||
saveTheme(themeDark.value);
|
||||
});
|
||||
|
||||
var currentThemeValue = localStorage.getItem(THEME);
|
||||
switch (currentThemeValue) {
|
||||
case "light":
|
||||
themeLight.checked = true;
|
||||
break;
|
||||
case "auto":
|
||||
themeAuto.checked = true;
|
||||
break;
|
||||
case "dark":
|
||||
themeDark.checked = true;
|
||||
break;
|
||||
default:
|
||||
themeAuto.checked = true;
|
||||
}</script>
|
||||
|
||||
</head>
|
||||
@@ -1627,40 +1776,8 @@ if (window.innerWidth > 650) {
|
||||
<ol id="postlist">
|
||||
|
||||
<li class="post">
|
||||
<a class="postlink" href="/euphorbia/">
|
||||
<h2 data-ha-exclude="" id="euphorbia">euphorbia </h2>
|
||||
|
||||
<ul class="postlist-tags">
|
||||
|
||||
<li>print</li>
|
||||
|
||||
</ul>
|
||||
<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">
|
||||
|
||||
</a>
|
||||
</li>
|
||||
|
||||
<li class="post">
|
||||
<a class="postlink" href="/greeting-loons/">
|
||||
<h2 data-ha-exclude="" id="greeting-loons">greeting loons </h2>
|
||||
|
||||
<ul class="postlist-tags">
|
||||
|
||||
<li>card</li>
|
||||
|
||||
<li>print</li>
|
||||
|
||||
<li>highlight</li>
|
||||
|
||||
</ul>
|
||||
<img src="/img/greeting-loons.jpg" alt="A pile of hand-printed A2 size greeting cards. A loon rearing up with outstretched wings spans the front and back of the cards." loading="lazy" decoding="async" width="1000" height="750">
|
||||
|
||||
</a>
|
||||
</li>
|
||||
|
||||
<li class="post">
|
||||
<a class="postlink" href="/lupine/">
|
||||
<h2 data-ha-exclude="" id="lupine">lupine </h2>
|
||||
<a class="postlink" href="/iris/">
|
||||
<h2 data-ha-exclude="" id="iris">iris </h2>
|
||||
|
||||
<ul class="postlist-tags">
|
||||
|
||||
@@ -1668,10 +1785,40 @@ if (window.innerWidth > 650) {
|
||||
|
||||
<li>card</li>
|
||||
|
||||
<li>shirt</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">
|
||||
|
||||
</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/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/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="/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 'happy biHRTday'" loading="lazy" decoding="async" width="1000" height="750">
|
||||
|
||||
</a>
|
||||
</li>
|
||||
@@ -1704,9 +1851,30 @@ if (window.innerWidth > 650) {
|
||||
</a>
|
||||
</li>
|
||||
</ul>
|
||||
|
||||
<fieldset id="theme">
|
||||
<legend>color scheme</legend>
|
||||
|
||||
<input type="radio" id="theme-light" name="theme" value="light">
|
||||
<label class="theme-light" for="theme-light">
|
||||
<i class="fa-regular fa-sun" aria-hidden="true"></i>
|
||||
light
|
||||
</label>
|
||||
|
||||
<input type="radio" id="theme-auto" name="theme" value="auto">
|
||||
<label class="theme-auto" for="theme-auto">
|
||||
auto
|
||||
</label>
|
||||
|
||||
<input type="radio" id="theme-dark" name="theme" value="dark">
|
||||
<label class="theme-dark" for="theme-dark">
|
||||
dark
|
||||
<i class="fa-regular fa-moon" aria-hidden="true"></i>
|
||||
</label>
|
||||
</fieldset>
|
||||
</footer>
|
||||
|
||||
|
||||
<!-- This page `/fat-raccoon/` was built on 2026-09-08T23:18:32.736Z -->
|
||||
<!-- This page `/fat-raccoon/` was built on 2026-09-09T20:38:02.903Z -->
|
||||
</body>
|
||||
</html>
|
||||
|
||||
@@ -478,6 +478,13 @@ body:has(dialog[open]) {
|
||||
--color-grey: light-dark(var(--color-grey-dark), var(--color-grey-light));
|
||||
}
|
||||
|
||||
:root:has(#theme-light:checked) {
|
||||
color-scheme: light;
|
||||
}
|
||||
:root:has(#theme-dark:checked) {
|
||||
color-scheme: dark;
|
||||
}
|
||||
|
||||
/* Base */
|
||||
|
||||
* {
|
||||
@@ -621,7 +628,7 @@ ul, ol, dl, li {
|
||||
}
|
||||
|
||||
li {
|
||||
line-height: 1.2 5;
|
||||
line-height: 1.2;
|
||||
margin-top: .65rem;
|
||||
margin-bottom: .65rem;
|
||||
}
|
||||
@@ -960,6 +967,111 @@ footer a:focus-visible {
|
||||
outline-color: var(--color-pink);
|
||||
}
|
||||
|
||||
/* color picker */
|
||||
#theme {
|
||||
display: flex;
|
||||
justify-content: center;
|
||||
margin: .5rem auto 0;
|
||||
padding: 0 .75rem .5rem;
|
||||
width: fit-content;
|
||||
border: .125rem solid var(--color-teal);
|
||||
border-radius: 2rem;
|
||||
}
|
||||
|
||||
#theme legend {
|
||||
margin: 0 auto;
|
||||
color: var(--color-teal);
|
||||
}
|
||||
|
||||
footer label {
|
||||
cursor: pointer;
|
||||
border: .125rem solid var(--color-pink);
|
||||
padding: 0 .25rem;
|
||||
color: var(--color-pink);
|
||||
background-color: var(--color-bg); /* this stops the box shadows from showing through */
|
||||
box-shadow: .15em .15em var(--color-shadow);
|
||||
/* Click animation handling */
|
||||
position: relative;
|
||||
top: 0;
|
||||
left: 0;
|
||||
transition: top .05s ease-in, left .05s ease-in;
|
||||
}
|
||||
|
||||
footer input:checked + label {
|
||||
color: var(--color-blue);
|
||||
border-color: var(--color-blue);
|
||||
}
|
||||
|
||||
footer label i {
|
||||
color: var(--color-teal);
|
||||
}
|
||||
|
||||
footer input:checked + label i {
|
||||
color: var(--color-pink);
|
||||
}
|
||||
|
||||
@media (any-hover: hover) {
|
||||
footer label:hover,
|
||||
footer input:checked + label:hover,
|
||||
footer label:hover i,
|
||||
footer input:checked + label:hover i {
|
||||
color: var(--color-bg);
|
||||
}
|
||||
|
||||
footer label:hover {
|
||||
background-color: var(--color-pink);
|
||||
}
|
||||
|
||||
footer input:checked + label:hover {
|
||||
background-color: var(--color-teal);
|
||||
}
|
||||
}
|
||||
|
||||
footer input:focus-visible + label,
|
||||
footer input:focus-visible + label i {
|
||||
color: var(--color-bg);
|
||||
background-color: var(--color-pink);
|
||||
border-color: var(--color-pink);
|
||||
}
|
||||
|
||||
footer input:checked:focus-visible + label,
|
||||
footer input:checked:focus-visible + label i {
|
||||
color: var(--color-bg);
|
||||
background-color: var(--color-teal);
|
||||
border-color: var(--color-teal);
|
||||
}
|
||||
|
||||
footer label:active {
|
||||
top: .09em;
|
||||
left: .09em;
|
||||
box-shadow: .05em .05em var(--color-shadow);
|
||||
}
|
||||
|
||||
label.theme-light {
|
||||
border-top-left-radius: 1rem;
|
||||
border-bottom-left-radius: 1rem;
|
||||
border-right: none;
|
||||
padding-left: .35rem;
|
||||
}
|
||||
|
||||
label.theme-auto {
|
||||
}
|
||||
|
||||
label.theme-dark {
|
||||
border-top-right-radius: 1rem;
|
||||
border-bottom-right-radius: 1rem;
|
||||
border-left: none;
|
||||
padding-right: .35rem;
|
||||
}
|
||||
|
||||
footer input {
|
||||
/* To allow screen reader to still access these. */
|
||||
/* From https://lyra.horse/blog/2025/08/you-dont-need-js/ */
|
||||
opacity: 0;
|
||||
position: absolute;
|
||||
pointer-events: none;
|
||||
}
|
||||
|
||||
/* Pagination */
|
||||
.pagination,
|
||||
.pagination li {
|
||||
@@ -1222,6 +1334,8 @@ pre[class*=language-]::selection {
|
||||
}
|
||||
}</style>
|
||||
|
||||
|
||||
|
||||
<script type="module">// Thank you to https://github.com/daviddarnes/heading-anchors
|
||||
// Thank you to https://amberwilson.co.uk/blog/are-your-anchor-links-accessible/
|
||||
|
||||
@@ -1476,6 +1590,41 @@ if (window.innerWidth > 650) {
|
||||
dialog.close();
|
||||
}
|
||||
});
|
||||
}
|
||||
const THEME = "theme";
|
||||
|
||||
const saveTheme = (themeValue) => {
|
||||
localStorage.setItem(THEME, themeValue);
|
||||
};
|
||||
|
||||
const themeLight = document.getElementById("theme-light");
|
||||
themeLight.addEventListener("input", (e) => {
|
||||
saveTheme(themeLight.value);
|
||||
});
|
||||
|
||||
const themeAuto = document.getElementById("theme-auto");
|
||||
themeAuto.addEventListener("input", (e) => {
|
||||
saveTheme(themeAuto.auto);
|
||||
});
|
||||
|
||||
const themeDark = document.getElementById("theme-dark");
|
||||
themeDark.addEventListener("input", (e) => {
|
||||
saveTheme(themeDark.value);
|
||||
});
|
||||
|
||||
var currentThemeValue = localStorage.getItem(THEME);
|
||||
switch (currentThemeValue) {
|
||||
case "light":
|
||||
themeLight.checked = true;
|
||||
break;
|
||||
case "auto":
|
||||
themeAuto.checked = true;
|
||||
break;
|
||||
case "dark":
|
||||
themeDark.checked = true;
|
||||
break;
|
||||
default:
|
||||
themeAuto.checked = true;
|
||||
}</script>
|
||||
|
||||
</head>
|
||||
@@ -1644,55 +1793,53 @@ if (window.innerWidth > 650) {
|
||||
<ol id="postlist">
|
||||
|
||||
<li class="post">
|
||||
<a class="postlink" href="/girldick/">
|
||||
<h2 data-ha-exclude="" id="girldick-mature">girldick (mature)</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>sticker</li>
|
||||
<li>card</li>
|
||||
|
||||
<li>shirt</li>
|
||||
<li>sticker</li>
|
||||
|
||||
<li>pin</li>
|
||||
|
||||
<li>gender</li>
|
||||
|
||||
</ul>
|
||||
<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">
|
||||
<img src="/img/trans-wrongs-print.jpg" alt="A smiling skull with devil horns and a little spiked tail, and a speech bubble reading 'trans wrongs!'" loading="lazy" decoding="async" width="1000" height="750">
|
||||
|
||||
</a>
|
||||
</li>
|
||||
|
||||
<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="/gender/">
|
||||
<h2 data-ha-exclude="" id="gender">gender? </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/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>
|
||||
|
||||
<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="/gender-as-a-proxy-variable/">
|
||||
<h2 data-ha-exclude="" id="gender-as-a-proxy-variable">gender as a proxy variable </h2>
|
||||
|
||||
<ul class="postlist-tags">
|
||||
|
||||
<li>print</li>
|
||||
|
||||
<li>shirt</li>
|
||||
|
||||
<li>gender</li>
|
||||
|
||||
<li>zine</li>
|
||||
|
||||
</ul>
|
||||
<img src="/img/trans-the-world-print.jpg" alt="A print that reads 'trans the world' surrounding an image of a globe and a trans symbol. It's in a ping-to-blue gradient." loading="lazy" decoding="async" width="1000" height="750">
|
||||
<img src="/img/gender-zine-cover.png" alt="Part of a scan of the cover of my zine, Gender as a Proxy Variable. It shows the title and a bit of handsewn binding." loading="lazy" decoding="async" width="1000" height="444">
|
||||
|
||||
</a>
|
||||
</li>
|
||||
@@ -1725,9 +1872,30 @@ if (window.innerWidth > 650) {
|
||||
</a>
|
||||
</li>
|
||||
</ul>
|
||||
|
||||
<fieldset id="theme">
|
||||
<legend>color scheme</legend>
|
||||
|
||||
<input type="radio" id="theme-light" name="theme" value="light">
|
||||
<label class="theme-light" for="theme-light">
|
||||
<i class="fa-regular fa-sun" aria-hidden="true"></i>
|
||||
light
|
||||
</label>
|
||||
|
||||
<input type="radio" id="theme-auto" name="theme" value="auto">
|
||||
<label class="theme-auto" for="theme-auto">
|
||||
auto
|
||||
</label>
|
||||
|
||||
<input type="radio" id="theme-dark" name="theme" value="dark">
|
||||
<label class="theme-dark" for="theme-dark">
|
||||
dark
|
||||
<i class="fa-regular fa-moon" aria-hidden="true"></i>
|
||||
</label>
|
||||
</fieldset>
|
||||
</footer>
|
||||
|
||||
|
||||
<!-- This page `/fd-signifier-and-oppositional-sexism/` was built on 2026-09-08T23:18:32.762Z -->
|
||||
<!-- This page `/fd-signifier-and-oppositional-sexism/` was built on 2026-09-09T20:38:02.897Z -->
|
||||
</body>
|
||||
</html>
|
||||
|
||||
+172
-2
@@ -478,6 +478,13 @@ body:has(dialog[open]) {
|
||||
--color-grey: light-dark(var(--color-grey-dark), var(--color-grey-light));
|
||||
}
|
||||
|
||||
:root:has(#theme-light:checked) {
|
||||
color-scheme: light;
|
||||
}
|
||||
:root:has(#theme-dark:checked) {
|
||||
color-scheme: dark;
|
||||
}
|
||||
|
||||
/* Base */
|
||||
|
||||
* {
|
||||
@@ -621,7 +628,7 @@ ul, ol, dl, li {
|
||||
}
|
||||
|
||||
li {
|
||||
line-height: 1.2 5;
|
||||
line-height: 1.2;
|
||||
margin-top: .65rem;
|
||||
margin-bottom: .65rem;
|
||||
}
|
||||
@@ -960,6 +967,111 @@ footer a:focus-visible {
|
||||
outline-color: var(--color-pink);
|
||||
}
|
||||
|
||||
/* color picker */
|
||||
#theme {
|
||||
display: flex;
|
||||
justify-content: center;
|
||||
margin: .5rem auto 0;
|
||||
padding: 0 .75rem .5rem;
|
||||
width: fit-content;
|
||||
border: .125rem solid var(--color-teal);
|
||||
border-radius: 2rem;
|
||||
}
|
||||
|
||||
#theme legend {
|
||||
margin: 0 auto;
|
||||
color: var(--color-teal);
|
||||
}
|
||||
|
||||
footer label {
|
||||
cursor: pointer;
|
||||
border: .125rem solid var(--color-pink);
|
||||
padding: 0 .25rem;
|
||||
color: var(--color-pink);
|
||||
background-color: var(--color-bg); /* this stops the box shadows from showing through */
|
||||
box-shadow: .15em .15em var(--color-shadow);
|
||||
/* Click animation handling */
|
||||
position: relative;
|
||||
top: 0;
|
||||
left: 0;
|
||||
transition: top .05s ease-in, left .05s ease-in;
|
||||
}
|
||||
|
||||
footer input:checked + label {
|
||||
color: var(--color-blue);
|
||||
border-color: var(--color-blue);
|
||||
}
|
||||
|
||||
footer label i {
|
||||
color: var(--color-teal);
|
||||
}
|
||||
|
||||
footer input:checked + label i {
|
||||
color: var(--color-pink);
|
||||
}
|
||||
|
||||
@media (any-hover: hover) {
|
||||
footer label:hover,
|
||||
footer input:checked + label:hover,
|
||||
footer label:hover i,
|
||||
footer input:checked + label:hover i {
|
||||
color: var(--color-bg);
|
||||
}
|
||||
|
||||
footer label:hover {
|
||||
background-color: var(--color-pink);
|
||||
}
|
||||
|
||||
footer input:checked + label:hover {
|
||||
background-color: var(--color-teal);
|
||||
}
|
||||
}
|
||||
|
||||
footer input:focus-visible + label,
|
||||
footer input:focus-visible + label i {
|
||||
color: var(--color-bg);
|
||||
background-color: var(--color-pink);
|
||||
border-color: var(--color-pink);
|
||||
}
|
||||
|
||||
footer input:checked:focus-visible + label,
|
||||
footer input:checked:focus-visible + label i {
|
||||
color: var(--color-bg);
|
||||
background-color: var(--color-teal);
|
||||
border-color: var(--color-teal);
|
||||
}
|
||||
|
||||
footer label:active {
|
||||
top: .09em;
|
||||
left: .09em;
|
||||
box-shadow: .05em .05em var(--color-shadow);
|
||||
}
|
||||
|
||||
label.theme-light {
|
||||
border-top-left-radius: 1rem;
|
||||
border-bottom-left-radius: 1rem;
|
||||
border-right: none;
|
||||
padding-left: .35rem;
|
||||
}
|
||||
|
||||
label.theme-auto {
|
||||
}
|
||||
|
||||
label.theme-dark {
|
||||
border-top-right-radius: 1rem;
|
||||
border-bottom-right-radius: 1rem;
|
||||
border-left: none;
|
||||
padding-right: .35rem;
|
||||
}
|
||||
|
||||
footer input {
|
||||
/* To allow screen reader to still access these. */
|
||||
/* From https://lyra.horse/blog/2025/08/you-dont-need-js/ */
|
||||
opacity: 0;
|
||||
position: absolute;
|
||||
pointer-events: none;
|
||||
}
|
||||
|
||||
/* Pagination */
|
||||
.pagination,
|
||||
.pagination li {
|
||||
@@ -1222,6 +1334,8 @@ pre[class*=language-]::selection {
|
||||
}
|
||||
}</style>
|
||||
|
||||
|
||||
|
||||
<script type="module">// Thank you to https://github.com/daviddarnes/heading-anchors
|
||||
// Thank you to https://amberwilson.co.uk/blog/are-your-anchor-links-accessible/
|
||||
|
||||
@@ -1476,6 +1590,41 @@ if (window.innerWidth > 650) {
|
||||
dialog.close();
|
||||
}
|
||||
});
|
||||
}
|
||||
const THEME = "theme";
|
||||
|
||||
const saveTheme = (themeValue) => {
|
||||
localStorage.setItem(THEME, themeValue);
|
||||
};
|
||||
|
||||
const themeLight = document.getElementById("theme-light");
|
||||
themeLight.addEventListener("input", (e) => {
|
||||
saveTheme(themeLight.value);
|
||||
});
|
||||
|
||||
const themeAuto = document.getElementById("theme-auto");
|
||||
themeAuto.addEventListener("input", (e) => {
|
||||
saveTheme(themeAuto.auto);
|
||||
});
|
||||
|
||||
const themeDark = document.getElementById("theme-dark");
|
||||
themeDark.addEventListener("input", (e) => {
|
||||
saveTheme(themeDark.value);
|
||||
});
|
||||
|
||||
var currentThemeValue = localStorage.getItem(THEME);
|
||||
switch (currentThemeValue) {
|
||||
case "light":
|
||||
themeLight.checked = true;
|
||||
break;
|
||||
case "auto":
|
||||
themeAuto.checked = true;
|
||||
break;
|
||||
case "dark":
|
||||
themeDark.checked = true;
|
||||
break;
|
||||
default:
|
||||
themeAuto.checked = true;
|
||||
}</script>
|
||||
|
||||
</head>
|
||||
@@ -1620,9 +1769,30 @@ if (window.innerWidth > 650) {
|
||||
</a>
|
||||
</li>
|
||||
</ul>
|
||||
|
||||
<fieldset id="theme">
|
||||
<legend>color scheme</legend>
|
||||
|
||||
<input type="radio" id="theme-light" name="theme" value="light">
|
||||
<label class="theme-light" for="theme-light">
|
||||
<i class="fa-regular fa-sun" aria-hidden="true"></i>
|
||||
light
|
||||
</label>
|
||||
|
||||
<input type="radio" id="theme-auto" name="theme" value="auto">
|
||||
<label class="theme-auto" for="theme-auto">
|
||||
auto
|
||||
</label>
|
||||
|
||||
<input type="radio" id="theme-dark" name="theme" value="dark">
|
||||
<label class="theme-dark" for="theme-dark">
|
||||
dark
|
||||
<i class="fa-regular fa-moon" aria-hidden="true"></i>
|
||||
</label>
|
||||
</fieldset>
|
||||
</footer>
|
||||
|
||||
|
||||
<!-- This page `/fedilearns/` was built on 2026-09-08T23:18:32.758Z -->
|
||||
<!-- This page `/fedilearns/` was built on 2026-09-09T20:38:02.939Z -->
|
||||
</body>
|
||||
</html>
|
||||
|
||||
+188
-18
@@ -478,6 +478,13 @@ body:has(dialog[open]) {
|
||||
--color-grey: light-dark(var(--color-grey-dark), var(--color-grey-light));
|
||||
}
|
||||
|
||||
:root:has(#theme-light:checked) {
|
||||
color-scheme: light;
|
||||
}
|
||||
:root:has(#theme-dark:checked) {
|
||||
color-scheme: dark;
|
||||
}
|
||||
|
||||
/* Base */
|
||||
|
||||
* {
|
||||
@@ -621,7 +628,7 @@ ul, ol, dl, li {
|
||||
}
|
||||
|
||||
li {
|
||||
line-height: 1.2 5;
|
||||
line-height: 1.2;
|
||||
margin-top: .65rem;
|
||||
margin-bottom: .65rem;
|
||||
}
|
||||
@@ -960,6 +967,111 @@ footer a:focus-visible {
|
||||
outline-color: var(--color-pink);
|
||||
}
|
||||
|
||||
/* color picker */
|
||||
#theme {
|
||||
display: flex;
|
||||
justify-content: center;
|
||||
margin: .5rem auto 0;
|
||||
padding: 0 .75rem .5rem;
|
||||
width: fit-content;
|
||||
border: .125rem solid var(--color-teal);
|
||||
border-radius: 2rem;
|
||||
}
|
||||
|
||||
#theme legend {
|
||||
margin: 0 auto;
|
||||
color: var(--color-teal);
|
||||
}
|
||||
|
||||
footer label {
|
||||
cursor: pointer;
|
||||
border: .125rem solid var(--color-pink);
|
||||
padding: 0 .25rem;
|
||||
color: var(--color-pink);
|
||||
background-color: var(--color-bg); /* this stops the box shadows from showing through */
|
||||
box-shadow: .15em .15em var(--color-shadow);
|
||||
/* Click animation handling */
|
||||
position: relative;
|
||||
top: 0;
|
||||
left: 0;
|
||||
transition: top .05s ease-in, left .05s ease-in;
|
||||
}
|
||||
|
||||
footer input:checked + label {
|
||||
color: var(--color-blue);
|
||||
border-color: var(--color-blue);
|
||||
}
|
||||
|
||||
footer label i {
|
||||
color: var(--color-teal);
|
||||
}
|
||||
|
||||
footer input:checked + label i {
|
||||
color: var(--color-pink);
|
||||
}
|
||||
|
||||
@media (any-hover: hover) {
|
||||
footer label:hover,
|
||||
footer input:checked + label:hover,
|
||||
footer label:hover i,
|
||||
footer input:checked + label:hover i {
|
||||
color: var(--color-bg);
|
||||
}
|
||||
|
||||
footer label:hover {
|
||||
background-color: var(--color-pink);
|
||||
}
|
||||
|
||||
footer input:checked + label:hover {
|
||||
background-color: var(--color-teal);
|
||||
}
|
||||
}
|
||||
|
||||
footer input:focus-visible + label,
|
||||
footer input:focus-visible + label i {
|
||||
color: var(--color-bg);
|
||||
background-color: var(--color-pink);
|
||||
border-color: var(--color-pink);
|
||||
}
|
||||
|
||||
footer input:checked:focus-visible + label,
|
||||
footer input:checked:focus-visible + label i {
|
||||
color: var(--color-bg);
|
||||
background-color: var(--color-teal);
|
||||
border-color: var(--color-teal);
|
||||
}
|
||||
|
||||
footer label:active {
|
||||
top: .09em;
|
||||
left: .09em;
|
||||
box-shadow: .05em .05em var(--color-shadow);
|
||||
}
|
||||
|
||||
label.theme-light {
|
||||
border-top-left-radius: 1rem;
|
||||
border-bottom-left-radius: 1rem;
|
||||
border-right: none;
|
||||
padding-left: .35rem;
|
||||
}
|
||||
|
||||
label.theme-auto {
|
||||
}
|
||||
|
||||
label.theme-dark {
|
||||
border-top-right-radius: 1rem;
|
||||
border-bottom-right-radius: 1rem;
|
||||
border-left: none;
|
||||
padding-right: .35rem;
|
||||
}
|
||||
|
||||
footer input {
|
||||
/* To allow screen reader to still access these. */
|
||||
/* From https://lyra.horse/blog/2025/08/you-dont-need-js/ */
|
||||
opacity: 0;
|
||||
position: absolute;
|
||||
pointer-events: none;
|
||||
}
|
||||
|
||||
/* Pagination */
|
||||
.pagination,
|
||||
.pagination li {
|
||||
@@ -1222,6 +1334,8 @@ pre[class*=language-]::selection {
|
||||
}
|
||||
}</style>
|
||||
|
||||
|
||||
|
||||
<script type="module">// Thank you to https://github.com/daviddarnes/heading-anchors
|
||||
// Thank you to https://amberwilson.co.uk/blog/are-your-anchor-links-accessible/
|
||||
|
||||
@@ -1476,6 +1590,41 @@ if (window.innerWidth > 650) {
|
||||
dialog.close();
|
||||
}
|
||||
});
|
||||
}
|
||||
const THEME = "theme";
|
||||
|
||||
const saveTheme = (themeValue) => {
|
||||
localStorage.setItem(THEME, themeValue);
|
||||
};
|
||||
|
||||
const themeLight = document.getElementById("theme-light");
|
||||
themeLight.addEventListener("input", (e) => {
|
||||
saveTheme(themeLight.value);
|
||||
});
|
||||
|
||||
const themeAuto = document.getElementById("theme-auto");
|
||||
themeAuto.addEventListener("input", (e) => {
|
||||
saveTheme(themeAuto.auto);
|
||||
});
|
||||
|
||||
const themeDark = document.getElementById("theme-dark");
|
||||
themeDark.addEventListener("input", (e) => {
|
||||
saveTheme(themeDark.value);
|
||||
});
|
||||
|
||||
var currentThemeValue = localStorage.getItem(THEME);
|
||||
switch (currentThemeValue) {
|
||||
case "light":
|
||||
themeLight.checked = true;
|
||||
break;
|
||||
case "auto":
|
||||
themeAuto.checked = true;
|
||||
break;
|
||||
case "dark":
|
||||
themeDark.checked = true;
|
||||
break;
|
||||
default:
|
||||
themeAuto.checked = true;
|
||||
}</script>
|
||||
|
||||
</head>
|
||||
@@ -1609,6 +1758,22 @@ if (window.innerWidth > 650) {
|
||||
<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's called 'on the shoulders of giants' and it'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>
|
||||
@@ -1627,22 +1792,6 @@ if (window.innerWidth > 650) {
|
||||
</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's called 'on the shoulders of giants' and it'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>
|
||||
@@ -1687,9 +1836,30 @@ if (window.innerWidth > 650) {
|
||||
</a>
|
||||
</li>
|
||||
</ul>
|
||||
|
||||
<fieldset id="theme">
|
||||
<legend>color scheme</legend>
|
||||
|
||||
<input type="radio" id="theme-light" name="theme" value="light">
|
||||
<label class="theme-light" for="theme-light">
|
||||
<i class="fa-regular fa-sun" aria-hidden="true"></i>
|
||||
light
|
||||
</label>
|
||||
|
||||
<input type="radio" id="theme-auto" name="theme" value="auto">
|
||||
<label class="theme-auto" for="theme-auto">
|
||||
auto
|
||||
</label>
|
||||
|
||||
<input type="radio" id="theme-dark" name="theme" value="dark">
|
||||
<label class="theme-dark" for="theme-dark">
|
||||
dark
|
||||
<i class="fa-regular fa-moon" aria-hidden="true"></i>
|
||||
</label>
|
||||
</fieldset>
|
||||
</footer>
|
||||
|
||||
|
||||
<!-- This page `/fedizinefest-2025/` was built on 2026-09-08T23:18:32.764Z -->
|
||||
<!-- This page `/fedizinefest-2025/` was built on 2026-09-09T20:38:02.898Z -->
|
||||
</body>
|
||||
</html>
|
||||
|
||||
@@ -74,6 +74,13 @@ https://nicolas-hoizey.com/feeds/all.xml
|
||||
--color-grey: light-dark(var(--color-grey-dark), var(--color-grey-light));
|
||||
}
|
||||
|
||||
:root:has(#theme-light:checked) {
|
||||
color-scheme: light;
|
||||
}
|
||||
:root:has(#theme-dark:checked) {
|
||||
color-scheme: dark;
|
||||
}
|
||||
|
||||
/* Base */
|
||||
|
||||
* {
|
||||
@@ -217,7 +224,7 @@ ul, ol, dl, li {
|
||||
}
|
||||
|
||||
li {
|
||||
line-height: 1.2 5;
|
||||
line-height: 1.2;
|
||||
margin-top: .65rem;
|
||||
margin-bottom: .65rem;
|
||||
}
|
||||
|
||||
@@ -478,6 +478,13 @@ body:has(dialog[open]) {
|
||||
--color-grey: light-dark(var(--color-grey-dark), var(--color-grey-light));
|
||||
}
|
||||
|
||||
:root:has(#theme-light:checked) {
|
||||
color-scheme: light;
|
||||
}
|
||||
:root:has(#theme-dark:checked) {
|
||||
color-scheme: dark;
|
||||
}
|
||||
|
||||
/* Base */
|
||||
|
||||
* {
|
||||
@@ -621,7 +628,7 @@ ul, ol, dl, li {
|
||||
}
|
||||
|
||||
li {
|
||||
line-height: 1.2 5;
|
||||
line-height: 1.2;
|
||||
margin-top: .65rem;
|
||||
margin-bottom: .65rem;
|
||||
}
|
||||
@@ -960,6 +967,111 @@ footer a:focus-visible {
|
||||
outline-color: var(--color-pink);
|
||||
}
|
||||
|
||||
/* color picker */
|
||||
#theme {
|
||||
display: flex;
|
||||
justify-content: center;
|
||||
margin: .5rem auto 0;
|
||||
padding: 0 .75rem .5rem;
|
||||
width: fit-content;
|
||||
border: .125rem solid var(--color-teal);
|
||||
border-radius: 2rem;
|
||||
}
|
||||
|
||||
#theme legend {
|
||||
margin: 0 auto;
|
||||
color: var(--color-teal);
|
||||
}
|
||||
|
||||
footer label {
|
||||
cursor: pointer;
|
||||
border: .125rem solid var(--color-pink);
|
||||
padding: 0 .25rem;
|
||||
color: var(--color-pink);
|
||||
background-color: var(--color-bg); /* this stops the box shadows from showing through */
|
||||
box-shadow: .15em .15em var(--color-shadow);
|
||||
/* Click animation handling */
|
||||
position: relative;
|
||||
top: 0;
|
||||
left: 0;
|
||||
transition: top .05s ease-in, left .05s ease-in;
|
||||
}
|
||||
|
||||
footer input:checked + label {
|
||||
color: var(--color-blue);
|
||||
border-color: var(--color-blue);
|
||||
}
|
||||
|
||||
footer label i {
|
||||
color: var(--color-teal);
|
||||
}
|
||||
|
||||
footer input:checked + label i {
|
||||
color: var(--color-pink);
|
||||
}
|
||||
|
||||
@media (any-hover: hover) {
|
||||
footer label:hover,
|
||||
footer input:checked + label:hover,
|
||||
footer label:hover i,
|
||||
footer input:checked + label:hover i {
|
||||
color: var(--color-bg);
|
||||
}
|
||||
|
||||
footer label:hover {
|
||||
background-color: var(--color-pink);
|
||||
}
|
||||
|
||||
footer input:checked + label:hover {
|
||||
background-color: var(--color-teal);
|
||||
}
|
||||
}
|
||||
|
||||
footer input:focus-visible + label,
|
||||
footer input:focus-visible + label i {
|
||||
color: var(--color-bg);
|
||||
background-color: var(--color-pink);
|
||||
border-color: var(--color-pink);
|
||||
}
|
||||
|
||||
footer input:checked:focus-visible + label,
|
||||
footer input:checked:focus-visible + label i {
|
||||
color: var(--color-bg);
|
||||
background-color: var(--color-teal);
|
||||
border-color: var(--color-teal);
|
||||
}
|
||||
|
||||
footer label:active {
|
||||
top: .09em;
|
||||
left: .09em;
|
||||
box-shadow: .05em .05em var(--color-shadow);
|
||||
}
|
||||
|
||||
label.theme-light {
|
||||
border-top-left-radius: 1rem;
|
||||
border-bottom-left-radius: 1rem;
|
||||
border-right: none;
|
||||
padding-left: .35rem;
|
||||
}
|
||||
|
||||
label.theme-auto {
|
||||
}
|
||||
|
||||
label.theme-dark {
|
||||
border-top-right-radius: 1rem;
|
||||
border-bottom-right-radius: 1rem;
|
||||
border-left: none;
|
||||
padding-right: .35rem;
|
||||
}
|
||||
|
||||
footer input {
|
||||
/* To allow screen reader to still access these. */
|
||||
/* From https://lyra.horse/blog/2025/08/you-dont-need-js/ */
|
||||
opacity: 0;
|
||||
position: absolute;
|
||||
pointer-events: none;
|
||||
}
|
||||
|
||||
/* Pagination */
|
||||
.pagination,
|
||||
.pagination li {
|
||||
@@ -1222,6 +1334,8 @@ pre[class*=language-]::selection {
|
||||
}
|
||||
}</style>
|
||||
|
||||
|
||||
|
||||
<script type="module">// Thank you to https://github.com/daviddarnes/heading-anchors
|
||||
// Thank you to https://amberwilson.co.uk/blog/are-your-anchor-links-accessible/
|
||||
|
||||
@@ -1476,6 +1590,41 @@ if (window.innerWidth > 650) {
|
||||
dialog.close();
|
||||
}
|
||||
});
|
||||
}
|
||||
const THEME = "theme";
|
||||
|
||||
const saveTheme = (themeValue) => {
|
||||
localStorage.setItem(THEME, themeValue);
|
||||
};
|
||||
|
||||
const themeLight = document.getElementById("theme-light");
|
||||
themeLight.addEventListener("input", (e) => {
|
||||
saveTheme(themeLight.value);
|
||||
});
|
||||
|
||||
const themeAuto = document.getElementById("theme-auto");
|
||||
themeAuto.addEventListener("input", (e) => {
|
||||
saveTheme(themeAuto.auto);
|
||||
});
|
||||
|
||||
const themeDark = document.getElementById("theme-dark");
|
||||
themeDark.addEventListener("input", (e) => {
|
||||
saveTheme(themeDark.value);
|
||||
});
|
||||
|
||||
var currentThemeValue = localStorage.getItem(THEME);
|
||||
switch (currentThemeValue) {
|
||||
case "light":
|
||||
themeLight.checked = true;
|
||||
break;
|
||||
case "auto":
|
||||
themeAuto.checked = true;
|
||||
break;
|
||||
case "dark":
|
||||
themeDark.checked = true;
|
||||
break;
|
||||
default:
|
||||
themeAuto.checked = true;
|
||||
}</script>
|
||||
|
||||
</head>
|
||||
@@ -1609,20 +1758,6 @@ if (window.innerWidth > 650) {
|
||||
<h2 data-ha-exclude="" id="related-posts">related posts</h2>
|
||||
<ol id="postlist">
|
||||
|
||||
<li class="post">
|
||||
<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/icelandic-lamb.jpg" alt="a skein of black handspun yarn" loading="lazy" decoding="async" width="1000" height="666">
|
||||
|
||||
</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>
|
||||
@@ -1651,6 +1786,20 @@ if (window.innerWidth > 650) {
|
||||
</a>
|
||||
</li>
|
||||
|
||||
<li class="post">
|
||||
<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/light-grey-jacobs.jpg" alt="a skein of light grey handspun yarn" loading="lazy" decoding="async" width="1000" height="666">
|
||||
|
||||
</a>
|
||||
</li>
|
||||
|
||||
</ol>
|
||||
|
||||
</section>
|
||||
@@ -1679,9 +1828,30 @@ if (window.innerWidth > 650) {
|
||||
</a>
|
||||
</li>
|
||||
</ul>
|
||||
|
||||
<fieldset id="theme">
|
||||
<legend>color scheme</legend>
|
||||
|
||||
<input type="radio" id="theme-light" name="theme" value="light">
|
||||
<label class="theme-light" for="theme-light">
|
||||
<i class="fa-regular fa-sun" aria-hidden="true"></i>
|
||||
light
|
||||
</label>
|
||||
|
||||
<input type="radio" id="theme-auto" name="theme" value="auto">
|
||||
<label class="theme-auto" for="theme-auto">
|
||||
auto
|
||||
</label>
|
||||
|
||||
<input type="radio" id="theme-dark" name="theme" value="dark">
|
||||
<label class="theme-dark" for="theme-dark">
|
||||
dark
|
||||
<i class="fa-regular fa-moon" aria-hidden="true"></i>
|
||||
</label>
|
||||
</fieldset>
|
||||
</footer>
|
||||
|
||||
|
||||
<!-- This page `/fire-and-ice-handspun/` was built on 2026-09-08T23:18:32.756Z -->
|
||||
<!-- This page `/fire-and-ice-handspun/` was built on 2026-09-09T20:38:02.938Z -->
|
||||
</body>
|
||||
</html>
|
||||
|
||||
@@ -478,6 +478,13 @@ body:has(dialog[open]) {
|
||||
--color-grey: light-dark(var(--color-grey-dark), var(--color-grey-light));
|
||||
}
|
||||
|
||||
:root:has(#theme-light:checked) {
|
||||
color-scheme: light;
|
||||
}
|
||||
:root:has(#theme-dark:checked) {
|
||||
color-scheme: dark;
|
||||
}
|
||||
|
||||
/* Base */
|
||||
|
||||
* {
|
||||
@@ -621,7 +628,7 @@ ul, ol, dl, li {
|
||||
}
|
||||
|
||||
li {
|
||||
line-height: 1.2 5;
|
||||
line-height: 1.2;
|
||||
margin-top: .65rem;
|
||||
margin-bottom: .65rem;
|
||||
}
|
||||
@@ -960,6 +967,111 @@ footer a:focus-visible {
|
||||
outline-color: var(--color-pink);
|
||||
}
|
||||
|
||||
/* color picker */
|
||||
#theme {
|
||||
display: flex;
|
||||
justify-content: center;
|
||||
margin: .5rem auto 0;
|
||||
padding: 0 .75rem .5rem;
|
||||
width: fit-content;
|
||||
border: .125rem solid var(--color-teal);
|
||||
border-radius: 2rem;
|
||||
}
|
||||
|
||||
#theme legend {
|
||||
margin: 0 auto;
|
||||
color: var(--color-teal);
|
||||
}
|
||||
|
||||
footer label {
|
||||
cursor: pointer;
|
||||
border: .125rem solid var(--color-pink);
|
||||
padding: 0 .25rem;
|
||||
color: var(--color-pink);
|
||||
background-color: var(--color-bg); /* this stops the box shadows from showing through */
|
||||
box-shadow: .15em .15em var(--color-shadow);
|
||||
/* Click animation handling */
|
||||
position: relative;
|
||||
top: 0;
|
||||
left: 0;
|
||||
transition: top .05s ease-in, left .05s ease-in;
|
||||
}
|
||||
|
||||
footer input:checked + label {
|
||||
color: var(--color-blue);
|
||||
border-color: var(--color-blue);
|
||||
}
|
||||
|
||||
footer label i {
|
||||
color: var(--color-teal);
|
||||
}
|
||||
|
||||
footer input:checked + label i {
|
||||
color: var(--color-pink);
|
||||
}
|
||||
|
||||
@media (any-hover: hover) {
|
||||
footer label:hover,
|
||||
footer input:checked + label:hover,
|
||||
footer label:hover i,
|
||||
footer input:checked + label:hover i {
|
||||
color: var(--color-bg);
|
||||
}
|
||||
|
||||
footer label:hover {
|
||||
background-color: var(--color-pink);
|
||||
}
|
||||
|
||||
footer input:checked + label:hover {
|
||||
background-color: var(--color-teal);
|
||||
}
|
||||
}
|
||||
|
||||
footer input:focus-visible + label,
|
||||
footer input:focus-visible + label i {
|
||||
color: var(--color-bg);
|
||||
background-color: var(--color-pink);
|
||||
border-color: var(--color-pink);
|
||||
}
|
||||
|
||||
footer input:checked:focus-visible + label,
|
||||
footer input:checked:focus-visible + label i {
|
||||
color: var(--color-bg);
|
||||
background-color: var(--color-teal);
|
||||
border-color: var(--color-teal);
|
||||
}
|
||||
|
||||
footer label:active {
|
||||
top: .09em;
|
||||
left: .09em;
|
||||
box-shadow: .05em .05em var(--color-shadow);
|
||||
}
|
||||
|
||||
label.theme-light {
|
||||
border-top-left-radius: 1rem;
|
||||
border-bottom-left-radius: 1rem;
|
||||
border-right: none;
|
||||
padding-left: .35rem;
|
||||
}
|
||||
|
||||
label.theme-auto {
|
||||
}
|
||||
|
||||
label.theme-dark {
|
||||
border-top-right-radius: 1rem;
|
||||
border-bottom-right-radius: 1rem;
|
||||
border-left: none;
|
||||
padding-right: .35rem;
|
||||
}
|
||||
|
||||
footer input {
|
||||
/* To allow screen reader to still access these. */
|
||||
/* From https://lyra.horse/blog/2025/08/you-dont-need-js/ */
|
||||
opacity: 0;
|
||||
position: absolute;
|
||||
pointer-events: none;
|
||||
}
|
||||
|
||||
/* Pagination */
|
||||
.pagination,
|
||||
.pagination li {
|
||||
@@ -1222,6 +1334,8 @@ pre[class*=language-]::selection {
|
||||
}
|
||||
}</style>
|
||||
|
||||
|
||||
|
||||
<script type="module">// Thank you to https://github.com/daviddarnes/heading-anchors
|
||||
// Thank you to https://amberwilson.co.uk/blog/are-your-anchor-links-accessible/
|
||||
|
||||
@@ -1476,6 +1590,41 @@ if (window.innerWidth > 650) {
|
||||
dialog.close();
|
||||
}
|
||||
});
|
||||
}
|
||||
const THEME = "theme";
|
||||
|
||||
const saveTheme = (themeValue) => {
|
||||
localStorage.setItem(THEME, themeValue);
|
||||
};
|
||||
|
||||
const themeLight = document.getElementById("theme-light");
|
||||
themeLight.addEventListener("input", (e) => {
|
||||
saveTheme(themeLight.value);
|
||||
});
|
||||
|
||||
const themeAuto = document.getElementById("theme-auto");
|
||||
themeAuto.addEventListener("input", (e) => {
|
||||
saveTheme(themeAuto.auto);
|
||||
});
|
||||
|
||||
const themeDark = document.getElementById("theme-dark");
|
||||
themeDark.addEventListener("input", (e) => {
|
||||
saveTheme(themeDark.value);
|
||||
});
|
||||
|
||||
var currentThemeValue = localStorage.getItem(THEME);
|
||||
switch (currentThemeValue) {
|
||||
case "light":
|
||||
themeLight.checked = true;
|
||||
break;
|
||||
case "auto":
|
||||
themeAuto.checked = true;
|
||||
break;
|
||||
case "dark":
|
||||
themeDark.checked = true;
|
||||
break;
|
||||
default:
|
||||
themeAuto.checked = true;
|
||||
}</script>
|
||||
|
||||
</head>
|
||||
@@ -1615,43 +1764,47 @@ if (window.innerWidth > 650) {
|
||||
<ol id="postlist">
|
||||
|
||||
<li class="post">
|
||||
<a class="postlink" href="/double-bill-pocket-bifold/">
|
||||
<h2 data-ha-exclude="" id="double-bill-pocket-bifold">double bill pocket bifold </h2>
|
||||
<a class="postlink" href="/vertical-bifold/">
|
||||
<h2 data-ha-exclude="" id="vertical-bifold">vertical bifold </h2>
|
||||
|
||||
<ul class="postlist-tags">
|
||||
|
||||
<li>leather</li>
|
||||
|
||||
</ul>
|
||||
<img src="/img/double-bill-pocket-bifold.jpg" alt="A 3-picture collage showing a hand-stitched leather wallet in plum and light natural leather, with a double bill pocket." loading="lazy" decoding="async" width="1000" height="1777">
|
||||
<img src="/img/vertical-bifold.jpg" alt="A collage showing a hand-stitched leather vertical bifold wallet with 6 card pockets, 2 hidden pockets, and 1 bill pocket." loading="lazy" decoding="async" width="1000" height="1777">
|
||||
|
||||
</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="/geese-trans-wrongs/">
|
||||
<h2 data-ha-exclude="" id="geese-trans-wrongs">geese/trans wrongs </h2>
|
||||
|
||||
<ul class="postlist-tags">
|
||||
|
||||
<li>leather</li>
|
||||
<li>print</li>
|
||||
|
||||
<li>shirt</li>
|
||||
|
||||
<li>gender</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/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 'trans rights!' while the honking goose says 'trans wrongs!'" loading="lazy" decoding="async" width="1000" height="750">
|
||||
|
||||
</a>
|
||||
</li>
|
||||
|
||||
<li class="post">
|
||||
<a class="postlink" href="/mom-bag/">
|
||||
<h2 data-ha-exclude="" id="mom-bag">mom bag </h2>
|
||||
<a class="postlink" href="/rachels-bracelets/">
|
||||
<h2 data-ha-exclude="" id="rachels-bracelets">rachel's bracelets </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/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>
|
||||
@@ -1684,9 +1837,30 @@ if (window.innerWidth > 650) {
|
||||
</a>
|
||||
</li>
|
||||
</ul>
|
||||
|
||||
<fieldset id="theme">
|
||||
<legend>color scheme</legend>
|
||||
|
||||
<input type="radio" id="theme-light" name="theme" value="light">
|
||||
<label class="theme-light" for="theme-light">
|
||||
<i class="fa-regular fa-sun" aria-hidden="true"></i>
|
||||
light
|
||||
</label>
|
||||
|
||||
<input type="radio" id="theme-auto" name="theme" value="auto">
|
||||
<label class="theme-auto" for="theme-auto">
|
||||
auto
|
||||
</label>
|
||||
|
||||
<input type="radio" id="theme-dark" name="theme" value="dark">
|
||||
<label class="theme-dark" for="theme-dark">
|
||||
dark
|
||||
<i class="fa-regular fa-moon" aria-hidden="true"></i>
|
||||
</label>
|
||||
</fieldset>
|
||||
</footer>
|
||||
|
||||
|
||||
<!-- This page `/fishhook-pride-keychains/` was built on 2026-09-08T23:18:32.745Z -->
|
||||
<!-- This page `/fishhook-pride-keychains/` was built on 2026-09-09T20:38:02.928Z -->
|
||||
</body>
|
||||
</html>
|
||||
|
||||
+193
-33
@@ -478,6 +478,13 @@ body:has(dialog[open]) {
|
||||
--color-grey: light-dark(var(--color-grey-dark), var(--color-grey-light));
|
||||
}
|
||||
|
||||
:root:has(#theme-light:checked) {
|
||||
color-scheme: light;
|
||||
}
|
||||
:root:has(#theme-dark:checked) {
|
||||
color-scheme: dark;
|
||||
}
|
||||
|
||||
/* Base */
|
||||
|
||||
* {
|
||||
@@ -621,7 +628,7 @@ ul, ol, dl, li {
|
||||
}
|
||||
|
||||
li {
|
||||
line-height: 1.2 5;
|
||||
line-height: 1.2;
|
||||
margin-top: .65rem;
|
||||
margin-bottom: .65rem;
|
||||
}
|
||||
@@ -960,6 +967,111 @@ footer a:focus-visible {
|
||||
outline-color: var(--color-pink);
|
||||
}
|
||||
|
||||
/* color picker */
|
||||
#theme {
|
||||
display: flex;
|
||||
justify-content: center;
|
||||
margin: .5rem auto 0;
|
||||
padding: 0 .75rem .5rem;
|
||||
width: fit-content;
|
||||
border: .125rem solid var(--color-teal);
|
||||
border-radius: 2rem;
|
||||
}
|
||||
|
||||
#theme legend {
|
||||
margin: 0 auto;
|
||||
color: var(--color-teal);
|
||||
}
|
||||
|
||||
footer label {
|
||||
cursor: pointer;
|
||||
border: .125rem solid var(--color-pink);
|
||||
padding: 0 .25rem;
|
||||
color: var(--color-pink);
|
||||
background-color: var(--color-bg); /* this stops the box shadows from showing through */
|
||||
box-shadow: .15em .15em var(--color-shadow);
|
||||
/* Click animation handling */
|
||||
position: relative;
|
||||
top: 0;
|
||||
left: 0;
|
||||
transition: top .05s ease-in, left .05s ease-in;
|
||||
}
|
||||
|
||||
footer input:checked + label {
|
||||
color: var(--color-blue);
|
||||
border-color: var(--color-blue);
|
||||
}
|
||||
|
||||
footer label i {
|
||||
color: var(--color-teal);
|
||||
}
|
||||
|
||||
footer input:checked + label i {
|
||||
color: var(--color-pink);
|
||||
}
|
||||
|
||||
@media (any-hover: hover) {
|
||||
footer label:hover,
|
||||
footer input:checked + label:hover,
|
||||
footer label:hover i,
|
||||
footer input:checked + label:hover i {
|
||||
color: var(--color-bg);
|
||||
}
|
||||
|
||||
footer label:hover {
|
||||
background-color: var(--color-pink);
|
||||
}
|
||||
|
||||
footer input:checked + label:hover {
|
||||
background-color: var(--color-teal);
|
||||
}
|
||||
}
|
||||
|
||||
footer input:focus-visible + label,
|
||||
footer input:focus-visible + label i {
|
||||
color: var(--color-bg);
|
||||
background-color: var(--color-pink);
|
||||
border-color: var(--color-pink);
|
||||
}
|
||||
|
||||
footer input:checked:focus-visible + label,
|
||||
footer input:checked:focus-visible + label i {
|
||||
color: var(--color-bg);
|
||||
background-color: var(--color-teal);
|
||||
border-color: var(--color-teal);
|
||||
}
|
||||
|
||||
footer label:active {
|
||||
top: .09em;
|
||||
left: .09em;
|
||||
box-shadow: .05em .05em var(--color-shadow);
|
||||
}
|
||||
|
||||
label.theme-light {
|
||||
border-top-left-radius: 1rem;
|
||||
border-bottom-left-radius: 1rem;
|
||||
border-right: none;
|
||||
padding-left: .35rem;
|
||||
}
|
||||
|
||||
label.theme-auto {
|
||||
}
|
||||
|
||||
label.theme-dark {
|
||||
border-top-right-radius: 1rem;
|
||||
border-bottom-right-radius: 1rem;
|
||||
border-left: none;
|
||||
padding-right: .35rem;
|
||||
}
|
||||
|
||||
footer input {
|
||||
/* To allow screen reader to still access these. */
|
||||
/* From https://lyra.horse/blog/2025/08/you-dont-need-js/ */
|
||||
opacity: 0;
|
||||
position: absolute;
|
||||
pointer-events: none;
|
||||
}
|
||||
|
||||
/* Pagination */
|
||||
.pagination,
|
||||
.pagination li {
|
||||
@@ -1222,6 +1334,8 @@ pre[class*=language-]::selection {
|
||||
}
|
||||
}</style>
|
||||
|
||||
|
||||
|
||||
<script type="module">// Thank you to https://github.com/daviddarnes/heading-anchors
|
||||
// Thank you to https://amberwilson.co.uk/blog/are-your-anchor-links-accessible/
|
||||
|
||||
@@ -1476,6 +1590,41 @@ if (window.innerWidth > 650) {
|
||||
dialog.close();
|
||||
}
|
||||
});
|
||||
}
|
||||
const THEME = "theme";
|
||||
|
||||
const saveTheme = (themeValue) => {
|
||||
localStorage.setItem(THEME, themeValue);
|
||||
};
|
||||
|
||||
const themeLight = document.getElementById("theme-light");
|
||||
themeLight.addEventListener("input", (e) => {
|
||||
saveTheme(themeLight.value);
|
||||
});
|
||||
|
||||
const themeAuto = document.getElementById("theme-auto");
|
||||
themeAuto.addEventListener("input", (e) => {
|
||||
saveTheme(themeAuto.auto);
|
||||
});
|
||||
|
||||
const themeDark = document.getElementById("theme-dark");
|
||||
themeDark.addEventListener("input", (e) => {
|
||||
saveTheme(themeDark.value);
|
||||
});
|
||||
|
||||
var currentThemeValue = localStorage.getItem(THEME);
|
||||
switch (currentThemeValue) {
|
||||
case "light":
|
||||
themeLight.checked = true;
|
||||
break;
|
||||
case "auto":
|
||||
themeAuto.checked = true;
|
||||
break;
|
||||
case "dark":
|
||||
themeDark.checked = true;
|
||||
break;
|
||||
default:
|
||||
themeAuto.checked = true;
|
||||
}</script>
|
||||
|
||||
</head>
|
||||
@@ -1622,30 +1771,38 @@ if (window.innerWidth > 650) {
|
||||
<ol id="postlist">
|
||||
|
||||
<li class="post">
|
||||
<a class="postlink" href="/queer/">
|
||||
<h2 data-ha-exclude="" id="queer">queer </h2>
|
||||
<a class="postlink" href="/not-a-drill/">
|
||||
<h2 data-ha-exclude="" id="not-a-drill">not a drill </h2>
|
||||
|
||||
<ul class="postlist-tags">
|
||||
|
||||
<li>print</li>
|
||||
|
||||
<li>card</li>
|
||||
|
||||
<li>sticker</li>
|
||||
|
||||
<li>pin</li>
|
||||
|
||||
<li>gender</li>
|
||||
<li>shirt</li>
|
||||
|
||||
</ul>
|
||||
<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">
|
||||
<img src="/img/not-a-drill-print.jpg" alt="A print in dark teal ink depicting a power drill with text in cursive below that reads 'ceci n'est pas un exercice' or 'this is not a drill'" loading="lazy" decoding="async" width="1000" height="750">
|
||||
|
||||
</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="/tiny-mushrooms/">
|
||||
<h2 data-ha-exclude="" id="tiny-mushrooms">tiny mushrooms </h2>
|
||||
|
||||
<ul class="postlist-tags">
|
||||
|
||||
<li>print</li>
|
||||
|
||||
</ul>
|
||||
<img src="/img/pixels-mushrooms.jpg" alt="3 tiny mushroom stamps next to their impressions. They are all about 1 inch square. There is a chanterelle in yellow, a russula in pink, and witch's hat mycena in indigo." loading="lazy" decoding="async" width="1000" height="750">
|
||||
|
||||
</a>
|
||||
</li>
|
||||
|
||||
<li class="post">
|
||||
<a class="postlink" href="/big-pidge/">
|
||||
<h2 data-ha-exclude="" id="big-pidge">big pidge </h2>
|
||||
|
||||
<ul class="postlist-tags">
|
||||
|
||||
@@ -1656,25 +1813,7 @@ if (window.innerWidth > 650) {
|
||||
<li>shirt</li>
|
||||
|
||||
</ul>
|
||||
<img src="/img/hummingbird-ungovernable-print.jpg" alt="A block print in black and orange ink of a rufous hummingbird, tail flared, hovering in midair. Clutched in eir tiny claws is a banner that waves in the wind and reads 'become ungovernable'" loading="lazy" decoding="async" width="1000" height="750">
|
||||
|
||||
</a>
|
||||
</li>
|
||||
|
||||
<li class="post">
|
||||
<a class="postlink" href="/flicker/">
|
||||
<h2 data-ha-exclude="" id="flicker">flicker </h2>
|
||||
|
||||
<ul class="postlist-tags">
|
||||
|
||||
<li>print</li>
|
||||
|
||||
<li>card</li>
|
||||
|
||||
<li>shirt</li>
|
||||
|
||||
</ul>
|
||||
<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">
|
||||
<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>
|
||||
@@ -1707,9 +1846,30 @@ if (window.innerWidth > 650) {
|
||||
</a>
|
||||
</li>
|
||||
</ul>
|
||||
|
||||
<fieldset id="theme">
|
||||
<legend>color scheme</legend>
|
||||
|
||||
<input type="radio" id="theme-light" name="theme" value="light">
|
||||
<label class="theme-light" for="theme-light">
|
||||
<i class="fa-regular fa-sun" aria-hidden="true"></i>
|
||||
light
|
||||
</label>
|
||||
|
||||
<input type="radio" id="theme-auto" name="theme" value="auto">
|
||||
<label class="theme-auto" for="theme-auto">
|
||||
auto
|
||||
</label>
|
||||
|
||||
<input type="radio" id="theme-dark" name="theme" value="dark">
|
||||
<label class="theme-dark" for="theme-dark">
|
||||
dark
|
||||
<i class="fa-regular fa-moon" aria-hidden="true"></i>
|
||||
</label>
|
||||
</fieldset>
|
||||
</footer>
|
||||
|
||||
|
||||
<!-- This page `/five-of-them/` was built on 2026-09-08T23:18:32.738Z -->
|
||||
<!-- This page `/five-of-them/` was built on 2026-09-09T20:38:02.905Z -->
|
||||
</body>
|
||||
</html>
|
||||
|
||||
+193
-29
@@ -478,6 +478,13 @@ body:has(dialog[open]) {
|
||||
--color-grey: light-dark(var(--color-grey-dark), var(--color-grey-light));
|
||||
}
|
||||
|
||||
:root:has(#theme-light:checked) {
|
||||
color-scheme: light;
|
||||
}
|
||||
:root:has(#theme-dark:checked) {
|
||||
color-scheme: dark;
|
||||
}
|
||||
|
||||
/* Base */
|
||||
|
||||
* {
|
||||
@@ -621,7 +628,7 @@ ul, ol, dl, li {
|
||||
}
|
||||
|
||||
li {
|
||||
line-height: 1.2 5;
|
||||
line-height: 1.2;
|
||||
margin-top: .65rem;
|
||||
margin-bottom: .65rem;
|
||||
}
|
||||
@@ -960,6 +967,111 @@ footer a:focus-visible {
|
||||
outline-color: var(--color-pink);
|
||||
}
|
||||
|
||||
/* color picker */
|
||||
#theme {
|
||||
display: flex;
|
||||
justify-content: center;
|
||||
margin: .5rem auto 0;
|
||||
padding: 0 .75rem .5rem;
|
||||
width: fit-content;
|
||||
border: .125rem solid var(--color-teal);
|
||||
border-radius: 2rem;
|
||||
}
|
||||
|
||||
#theme legend {
|
||||
margin: 0 auto;
|
||||
color: var(--color-teal);
|
||||
}
|
||||
|
||||
footer label {
|
||||
cursor: pointer;
|
||||
border: .125rem solid var(--color-pink);
|
||||
padding: 0 .25rem;
|
||||
color: var(--color-pink);
|
||||
background-color: var(--color-bg); /* this stops the box shadows from showing through */
|
||||
box-shadow: .15em .15em var(--color-shadow);
|
||||
/* Click animation handling */
|
||||
position: relative;
|
||||
top: 0;
|
||||
left: 0;
|
||||
transition: top .05s ease-in, left .05s ease-in;
|
||||
}
|
||||
|
||||
footer input:checked + label {
|
||||
color: var(--color-blue);
|
||||
border-color: var(--color-blue);
|
||||
}
|
||||
|
||||
footer label i {
|
||||
color: var(--color-teal);
|
||||
}
|
||||
|
||||
footer input:checked + label i {
|
||||
color: var(--color-pink);
|
||||
}
|
||||
|
||||
@media (any-hover: hover) {
|
||||
footer label:hover,
|
||||
footer input:checked + label:hover,
|
||||
footer label:hover i,
|
||||
footer input:checked + label:hover i {
|
||||
color: var(--color-bg);
|
||||
}
|
||||
|
||||
footer label:hover {
|
||||
background-color: var(--color-pink);
|
||||
}
|
||||
|
||||
footer input:checked + label:hover {
|
||||
background-color: var(--color-teal);
|
||||
}
|
||||
}
|
||||
|
||||
footer input:focus-visible + label,
|
||||
footer input:focus-visible + label i {
|
||||
color: var(--color-bg);
|
||||
background-color: var(--color-pink);
|
||||
border-color: var(--color-pink);
|
||||
}
|
||||
|
||||
footer input:checked:focus-visible + label,
|
||||
footer input:checked:focus-visible + label i {
|
||||
color: var(--color-bg);
|
||||
background-color: var(--color-teal);
|
||||
border-color: var(--color-teal);
|
||||
}
|
||||
|
||||
footer label:active {
|
||||
top: .09em;
|
||||
left: .09em;
|
||||
box-shadow: .05em .05em var(--color-shadow);
|
||||
}
|
||||
|
||||
label.theme-light {
|
||||
border-top-left-radius: 1rem;
|
||||
border-bottom-left-radius: 1rem;
|
||||
border-right: none;
|
||||
padding-left: .35rem;
|
||||
}
|
||||
|
||||
label.theme-auto {
|
||||
}
|
||||
|
||||
label.theme-dark {
|
||||
border-top-right-radius: 1rem;
|
||||
border-bottom-right-radius: 1rem;
|
||||
border-left: none;
|
||||
padding-right: .35rem;
|
||||
}
|
||||
|
||||
footer input {
|
||||
/* To allow screen reader to still access these. */
|
||||
/* From https://lyra.horse/blog/2025/08/you-dont-need-js/ */
|
||||
opacity: 0;
|
||||
position: absolute;
|
||||
pointer-events: none;
|
||||
}
|
||||
|
||||
/* Pagination */
|
||||
.pagination,
|
||||
.pagination li {
|
||||
@@ -1222,6 +1334,8 @@ pre[class*=language-]::selection {
|
||||
}
|
||||
}</style>
|
||||
|
||||
|
||||
|
||||
<script type="module">// Thank you to https://github.com/daviddarnes/heading-anchors
|
||||
// Thank you to https://amberwilson.co.uk/blog/are-your-anchor-links-accessible/
|
||||
|
||||
@@ -1476,6 +1590,41 @@ if (window.innerWidth > 650) {
|
||||
dialog.close();
|
||||
}
|
||||
});
|
||||
}
|
||||
const THEME = "theme";
|
||||
|
||||
const saveTheme = (themeValue) => {
|
||||
localStorage.setItem(THEME, themeValue);
|
||||
};
|
||||
|
||||
const themeLight = document.getElementById("theme-light");
|
||||
themeLight.addEventListener("input", (e) => {
|
||||
saveTheme(themeLight.value);
|
||||
});
|
||||
|
||||
const themeAuto = document.getElementById("theme-auto");
|
||||
themeAuto.addEventListener("input", (e) => {
|
||||
saveTheme(themeAuto.auto);
|
||||
});
|
||||
|
||||
const themeDark = document.getElementById("theme-dark");
|
||||
themeDark.addEventListener("input", (e) => {
|
||||
saveTheme(themeDark.value);
|
||||
});
|
||||
|
||||
var currentThemeValue = localStorage.getItem(THEME);
|
||||
switch (currentThemeValue) {
|
||||
case "light":
|
||||
themeLight.checked = true;
|
||||
break;
|
||||
case "auto":
|
||||
themeAuto.checked = true;
|
||||
break;
|
||||
case "dark":
|
||||
themeDark.checked = true;
|
||||
break;
|
||||
default:
|
||||
themeAuto.checked = true;
|
||||
}</script>
|
||||
|
||||
</head>
|
||||
@@ -1609,53 +1758,47 @@ if (window.innerWidth > 650) {
|
||||
<ol id="postlist">
|
||||
|
||||
<li class="post">
|
||||
<a class="postlink" href="/queer/">
|
||||
<h2 data-ha-exclude="" id="queer">queer </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>sticker</li>
|
||||
|
||||
<li>pin</li>
|
||||
|
||||
<li>gender</li>
|
||||
|
||||
</ul>
|
||||
<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="/quorbs/">
|
||||
<h2 data-ha-exclude="" id="quorbs">quorbs </h2>
|
||||
|
||||
<ul class="postlist-tags">
|
||||
|
||||
<li>print</li>
|
||||
<li>zine</li>
|
||||
|
||||
<li>highlight</li>
|
||||
|
||||
</ul>
|
||||
<img src="/img/quorbs-print.jpg" alt="A print in two layers of color showing two rotund quails on a branch. Most of the details are in black ink, then there is a layer with a brown gradient filling in some color on the head and breast." loading="lazy" decoding="async" width="1000" height="750">
|
||||
<img src="/img/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="/brown-creeper/">
|
||||
<h2 data-ha-exclude="" id="brown-creeper">brown creeper </h2>
|
||||
<a class="postlink" href="/euphorbia/">
|
||||
<h2 data-ha-exclude="" id="euphorbia">euphorbia </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">
|
||||
<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">
|
||||
|
||||
</a>
|
||||
</li>
|
||||
|
||||
<li class="post">
|
||||
<a class="postlink" href="/become-unbutterable/">
|
||||
<h2 data-ha-exclude="" id="become-unbutterable">become unbutterable </h2>
|
||||
|
||||
<ul class="postlist-tags">
|
||||
|
||||
<li>print</li>
|
||||
|
||||
</ul>
|
||||
<img src="/img/become-unbutterable.jpg" alt="3 copies of the same stamp in orange ink are spread out next to the hand carved rubber stamp they were made from. They show a cat lying on his back with paws curled, holding a butter knife in his mouth. Text around the cat reads, in all caps, 'become unbutterable.'" loading="lazy" decoding="async" width="1000" height="562">
|
||||
|
||||
</a>
|
||||
</li>
|
||||
@@ -1688,9 +1831,30 @@ if (window.innerWidth > 650) {
|
||||
</a>
|
||||
</li>
|
||||
</ul>
|
||||
|
||||
<fieldset id="theme">
|
||||
<legend>color scheme</legend>
|
||||
|
||||
<input type="radio" id="theme-light" name="theme" value="light">
|
||||
<label class="theme-light" for="theme-light">
|
||||
<i class="fa-regular fa-sun" aria-hidden="true"></i>
|
||||
light
|
||||
</label>
|
||||
|
||||
<input type="radio" id="theme-auto" name="theme" value="auto">
|
||||
<label class="theme-auto" for="theme-auto">
|
||||
auto
|
||||
</label>
|
||||
|
||||
<input type="radio" id="theme-dark" name="theme" value="dark">
|
||||
<label class="theme-dark" for="theme-dark">
|
||||
dark
|
||||
<i class="fa-regular fa-moon" aria-hidden="true"></i>
|
||||
</label>
|
||||
</fieldset>
|
||||
</footer>
|
||||
|
||||
|
||||
<!-- This page `/fix-your-hearts/` was built on 2026-09-08T23:18:32.747Z -->
|
||||
<!-- This page `/fix-your-hearts/` was built on 2026-09-09T20:38:02.931Z -->
|
||||
</body>
|
||||
</html>
|
||||
|
||||
+186
-24
@@ -478,6 +478,13 @@ body:has(dialog[open]) {
|
||||
--color-grey: light-dark(var(--color-grey-dark), var(--color-grey-light));
|
||||
}
|
||||
|
||||
:root:has(#theme-light:checked) {
|
||||
color-scheme: light;
|
||||
}
|
||||
:root:has(#theme-dark:checked) {
|
||||
color-scheme: dark;
|
||||
}
|
||||
|
||||
/* Base */
|
||||
|
||||
* {
|
||||
@@ -621,7 +628,7 @@ ul, ol, dl, li {
|
||||
}
|
||||
|
||||
li {
|
||||
line-height: 1.2 5;
|
||||
line-height: 1.2;
|
||||
margin-top: .65rem;
|
||||
margin-bottom: .65rem;
|
||||
}
|
||||
@@ -960,6 +967,111 @@ footer a:focus-visible {
|
||||
outline-color: var(--color-pink);
|
||||
}
|
||||
|
||||
/* color picker */
|
||||
#theme {
|
||||
display: flex;
|
||||
justify-content: center;
|
||||
margin: .5rem auto 0;
|
||||
padding: 0 .75rem .5rem;
|
||||
width: fit-content;
|
||||
border: .125rem solid var(--color-teal);
|
||||
border-radius: 2rem;
|
||||
}
|
||||
|
||||
#theme legend {
|
||||
margin: 0 auto;
|
||||
color: var(--color-teal);
|
||||
}
|
||||
|
||||
footer label {
|
||||
cursor: pointer;
|
||||
border: .125rem solid var(--color-pink);
|
||||
padding: 0 .25rem;
|
||||
color: var(--color-pink);
|
||||
background-color: var(--color-bg); /* this stops the box shadows from showing through */
|
||||
box-shadow: .15em .15em var(--color-shadow);
|
||||
/* Click animation handling */
|
||||
position: relative;
|
||||
top: 0;
|
||||
left: 0;
|
||||
transition: top .05s ease-in, left .05s ease-in;
|
||||
}
|
||||
|
||||
footer input:checked + label {
|
||||
color: var(--color-blue);
|
||||
border-color: var(--color-blue);
|
||||
}
|
||||
|
||||
footer label i {
|
||||
color: var(--color-teal);
|
||||
}
|
||||
|
||||
footer input:checked + label i {
|
||||
color: var(--color-pink);
|
||||
}
|
||||
|
||||
@media (any-hover: hover) {
|
||||
footer label:hover,
|
||||
footer input:checked + label:hover,
|
||||
footer label:hover i,
|
||||
footer input:checked + label:hover i {
|
||||
color: var(--color-bg);
|
||||
}
|
||||
|
||||
footer label:hover {
|
||||
background-color: var(--color-pink);
|
||||
}
|
||||
|
||||
footer input:checked + label:hover {
|
||||
background-color: var(--color-teal);
|
||||
}
|
||||
}
|
||||
|
||||
footer input:focus-visible + label,
|
||||
footer input:focus-visible + label i {
|
||||
color: var(--color-bg);
|
||||
background-color: var(--color-pink);
|
||||
border-color: var(--color-pink);
|
||||
}
|
||||
|
||||
footer input:checked:focus-visible + label,
|
||||
footer input:checked:focus-visible + label i {
|
||||
color: var(--color-bg);
|
||||
background-color: var(--color-teal);
|
||||
border-color: var(--color-teal);
|
||||
}
|
||||
|
||||
footer label:active {
|
||||
top: .09em;
|
||||
left: .09em;
|
||||
box-shadow: .05em .05em var(--color-shadow);
|
||||
}
|
||||
|
||||
label.theme-light {
|
||||
border-top-left-radius: 1rem;
|
||||
border-bottom-left-radius: 1rem;
|
||||
border-right: none;
|
||||
padding-left: .35rem;
|
||||
}
|
||||
|
||||
label.theme-auto {
|
||||
}
|
||||
|
||||
label.theme-dark {
|
||||
border-top-right-radius: 1rem;
|
||||
border-bottom-right-radius: 1rem;
|
||||
border-left: none;
|
||||
padding-right: .35rem;
|
||||
}
|
||||
|
||||
footer input {
|
||||
/* To allow screen reader to still access these. */
|
||||
/* From https://lyra.horse/blog/2025/08/you-dont-need-js/ */
|
||||
opacity: 0;
|
||||
position: absolute;
|
||||
pointer-events: none;
|
||||
}
|
||||
|
||||
/* Pagination */
|
||||
.pagination,
|
||||
.pagination li {
|
||||
@@ -1222,6 +1334,8 @@ pre[class*=language-]::selection {
|
||||
}
|
||||
}</style>
|
||||
|
||||
|
||||
|
||||
<script type="module">// Thank you to https://github.com/daviddarnes/heading-anchors
|
||||
// Thank you to https://amberwilson.co.uk/blog/are-your-anchor-links-accessible/
|
||||
|
||||
@@ -1476,6 +1590,41 @@ if (window.innerWidth > 650) {
|
||||
dialog.close();
|
||||
}
|
||||
});
|
||||
}
|
||||
const THEME = "theme";
|
||||
|
||||
const saveTheme = (themeValue) => {
|
||||
localStorage.setItem(THEME, themeValue);
|
||||
};
|
||||
|
||||
const themeLight = document.getElementById("theme-light");
|
||||
themeLight.addEventListener("input", (e) => {
|
||||
saveTheme(themeLight.value);
|
||||
});
|
||||
|
||||
const themeAuto = document.getElementById("theme-auto");
|
||||
themeAuto.addEventListener("input", (e) => {
|
||||
saveTheme(themeAuto.auto);
|
||||
});
|
||||
|
||||
const themeDark = document.getElementById("theme-dark");
|
||||
themeDark.addEventListener("input", (e) => {
|
||||
saveTheme(themeDark.value);
|
||||
});
|
||||
|
||||
var currentThemeValue = localStorage.getItem(THEME);
|
||||
switch (currentThemeValue) {
|
||||
case "light":
|
||||
themeLight.checked = true;
|
||||
break;
|
||||
case "auto":
|
||||
themeAuto.checked = true;
|
||||
break;
|
||||
case "dark":
|
||||
themeDark.checked = true;
|
||||
break;
|
||||
default:
|
||||
themeAuto.checked = true;
|
||||
}</script>
|
||||
|
||||
</head>
|
||||
@@ -1622,59 +1771,51 @@ if (window.innerWidth > 650) {
|
||||
<ol id="postlist">
|
||||
|
||||
<li class="post">
|
||||
<a class="postlink" href="/girldick/">
|
||||
<h2 data-ha-exclude="" id="girldick-mature">girldick (mature)</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>sticker</li>
|
||||
|
||||
<li>shirt</li>
|
||||
|
||||
<li>pin</li>
|
||||
|
||||
<li>gender</li>
|
||||
|
||||
</ul>
|
||||
<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">
|
||||
<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="/boypussy/">
|
||||
<h2 data-ha-exclude="" id="boypussy-mature">boypussy (mature)</h2>
|
||||
<a class="postlink" href="/nonbinary-flag/">
|
||||
<h2 data-ha-exclude="" id="nonbinary-flag">nonbinary flag </h2>
|
||||
|
||||
<ul class="postlist-tags">
|
||||
|
||||
<li>print</li>
|
||||
|
||||
<li>sticker</li>
|
||||
|
||||
<li>shirt</li>
|
||||
|
||||
<li>pin</li>
|
||||
<li>card</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/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="/squarsh/">
|
||||
<h2 data-ha-exclude="" id="squarsh">squarsh </h2>
|
||||
<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/squarsh-prints.jpg" alt="Two identical prints of a delicata squash. The body of the squash is cornsilk (muted yellow), the stem and stripes in mint green, and the shadows in lilac." loading="lazy" decoding="async" width="1000" height="1000">
|
||||
<img src="/img/happy-bihrtday-card-print.jpg" alt="A card and print in the same design - a bouncy, cheery font reading 'happy biHRTday'" loading="lazy" decoding="async" width="1000" height="750">
|
||||
|
||||
</a>
|
||||
</li>
|
||||
@@ -1707,9 +1848,30 @@ if (window.innerWidth > 650) {
|
||||
</a>
|
||||
</li>
|
||||
</ul>
|
||||
|
||||
<fieldset id="theme">
|
||||
<legend>color scheme</legend>
|
||||
|
||||
<input type="radio" id="theme-light" name="theme" value="light">
|
||||
<label class="theme-light" for="theme-light">
|
||||
<i class="fa-regular fa-sun" aria-hidden="true"></i>
|
||||
light
|
||||
</label>
|
||||
|
||||
<input type="radio" id="theme-auto" name="theme" value="auto">
|
||||
<label class="theme-auto" for="theme-auto">
|
||||
auto
|
||||
</label>
|
||||
|
||||
<input type="radio" id="theme-dark" name="theme" value="dark">
|
||||
<label class="theme-dark" for="theme-dark">
|
||||
dark
|
||||
<i class="fa-regular fa-moon" aria-hidden="true"></i>
|
||||
</label>
|
||||
</fieldset>
|
||||
</footer>
|
||||
|
||||
|
||||
<!-- This page `/flatfish/` was built on 2026-09-08T23:18:32.733Z -->
|
||||
<!-- This page `/flatfish/` was built on 2026-09-09T20:38:02.900Z -->
|
||||
</body>
|
||||
</html>
|
||||
|
||||
+182
-8
@@ -478,6 +478,13 @@ body:has(dialog[open]) {
|
||||
--color-grey: light-dark(var(--color-grey-dark), var(--color-grey-light));
|
||||
}
|
||||
|
||||
:root:has(#theme-light:checked) {
|
||||
color-scheme: light;
|
||||
}
|
||||
:root:has(#theme-dark:checked) {
|
||||
color-scheme: dark;
|
||||
}
|
||||
|
||||
/* Base */
|
||||
|
||||
* {
|
||||
@@ -621,7 +628,7 @@ ul, ol, dl, li {
|
||||
}
|
||||
|
||||
li {
|
||||
line-height: 1.2 5;
|
||||
line-height: 1.2;
|
||||
margin-top: .65rem;
|
||||
margin-bottom: .65rem;
|
||||
}
|
||||
@@ -960,6 +967,111 @@ footer a:focus-visible {
|
||||
outline-color: var(--color-pink);
|
||||
}
|
||||
|
||||
/* color picker */
|
||||
#theme {
|
||||
display: flex;
|
||||
justify-content: center;
|
||||
margin: .5rem auto 0;
|
||||
padding: 0 .75rem .5rem;
|
||||
width: fit-content;
|
||||
border: .125rem solid var(--color-teal);
|
||||
border-radius: 2rem;
|
||||
}
|
||||
|
||||
#theme legend {
|
||||
margin: 0 auto;
|
||||
color: var(--color-teal);
|
||||
}
|
||||
|
||||
footer label {
|
||||
cursor: pointer;
|
||||
border: .125rem solid var(--color-pink);
|
||||
padding: 0 .25rem;
|
||||
color: var(--color-pink);
|
||||
background-color: var(--color-bg); /* this stops the box shadows from showing through */
|
||||
box-shadow: .15em .15em var(--color-shadow);
|
||||
/* Click animation handling */
|
||||
position: relative;
|
||||
top: 0;
|
||||
left: 0;
|
||||
transition: top .05s ease-in, left .05s ease-in;
|
||||
}
|
||||
|
||||
footer input:checked + label {
|
||||
color: var(--color-blue);
|
||||
border-color: var(--color-blue);
|
||||
}
|
||||
|
||||
footer label i {
|
||||
color: var(--color-teal);
|
||||
}
|
||||
|
||||
footer input:checked + label i {
|
||||
color: var(--color-pink);
|
||||
}
|
||||
|
||||
@media (any-hover: hover) {
|
||||
footer label:hover,
|
||||
footer input:checked + label:hover,
|
||||
footer label:hover i,
|
||||
footer input:checked + label:hover i {
|
||||
color: var(--color-bg);
|
||||
}
|
||||
|
||||
footer label:hover {
|
||||
background-color: var(--color-pink);
|
||||
}
|
||||
|
||||
footer input:checked + label:hover {
|
||||
background-color: var(--color-teal);
|
||||
}
|
||||
}
|
||||
|
||||
footer input:focus-visible + label,
|
||||
footer input:focus-visible + label i {
|
||||
color: var(--color-bg);
|
||||
background-color: var(--color-pink);
|
||||
border-color: var(--color-pink);
|
||||
}
|
||||
|
||||
footer input:checked:focus-visible + label,
|
||||
footer input:checked:focus-visible + label i {
|
||||
color: var(--color-bg);
|
||||
background-color: var(--color-teal);
|
||||
border-color: var(--color-teal);
|
||||
}
|
||||
|
||||
footer label:active {
|
||||
top: .09em;
|
||||
left: .09em;
|
||||
box-shadow: .05em .05em var(--color-shadow);
|
||||
}
|
||||
|
||||
label.theme-light {
|
||||
border-top-left-radius: 1rem;
|
||||
border-bottom-left-radius: 1rem;
|
||||
border-right: none;
|
||||
padding-left: .35rem;
|
||||
}
|
||||
|
||||
label.theme-auto {
|
||||
}
|
||||
|
||||
label.theme-dark {
|
||||
border-top-right-radius: 1rem;
|
||||
border-bottom-right-radius: 1rem;
|
||||
border-left: none;
|
||||
padding-right: .35rem;
|
||||
}
|
||||
|
||||
footer input {
|
||||
/* To allow screen reader to still access these. */
|
||||
/* From https://lyra.horse/blog/2025/08/you-dont-need-js/ */
|
||||
opacity: 0;
|
||||
position: absolute;
|
||||
pointer-events: none;
|
||||
}
|
||||
|
||||
/* Pagination */
|
||||
.pagination,
|
||||
.pagination li {
|
||||
@@ -1222,6 +1334,8 @@ pre[class*=language-]::selection {
|
||||
}
|
||||
}</style>
|
||||
|
||||
|
||||
|
||||
<script type="module">// Thank you to https://github.com/daviddarnes/heading-anchors
|
||||
// Thank you to https://amberwilson.co.uk/blog/are-your-anchor-links-accessible/
|
||||
|
||||
@@ -1476,6 +1590,41 @@ if (window.innerWidth > 650) {
|
||||
dialog.close();
|
||||
}
|
||||
});
|
||||
}
|
||||
const THEME = "theme";
|
||||
|
||||
const saveTheme = (themeValue) => {
|
||||
localStorage.setItem(THEME, themeValue);
|
||||
};
|
||||
|
||||
const themeLight = document.getElementById("theme-light");
|
||||
themeLight.addEventListener("input", (e) => {
|
||||
saveTheme(themeLight.value);
|
||||
});
|
||||
|
||||
const themeAuto = document.getElementById("theme-auto");
|
||||
themeAuto.addEventListener("input", (e) => {
|
||||
saveTheme(themeAuto.auto);
|
||||
});
|
||||
|
||||
const themeDark = document.getElementById("theme-dark");
|
||||
themeDark.addEventListener("input", (e) => {
|
||||
saveTheme(themeDark.value);
|
||||
});
|
||||
|
||||
var currentThemeValue = localStorage.getItem(THEME);
|
||||
switch (currentThemeValue) {
|
||||
case "light":
|
||||
themeLight.checked = true;
|
||||
break;
|
||||
case "auto":
|
||||
themeAuto.checked = true;
|
||||
break;
|
||||
case "dark":
|
||||
themeDark.checked = true;
|
||||
break;
|
||||
default:
|
||||
themeAuto.checked = true;
|
||||
}</script>
|
||||
|
||||
</head>
|
||||
@@ -1641,29 +1790,33 @@ if (window.innerWidth > 650) {
|
||||
</li>
|
||||
|
||||
<li class="post">
|
||||
<a class="postlink" href="/fix-your-hearts/">
|
||||
<h2 data-ha-exclude="" id="fix-your-hearts">fix your hearts </h2>
|
||||
<a class="postlink" href="/kniphofia/">
|
||||
<h2 data-ha-exclude="" id="kniphofia">kniphofia </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 'fix your hearts or die', with the text shaped into a somewhat long and narrow heart." 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="/tiny-portraits/">
|
||||
<h2 data-ha-exclude="" id="tiny-portraits">tiny portraits </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/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">
|
||||
<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>
|
||||
@@ -1696,9 +1849,30 @@ if (window.innerWidth > 650) {
|
||||
</a>
|
||||
</li>
|
||||
</ul>
|
||||
|
||||
<fieldset id="theme">
|
||||
<legend>color scheme</legend>
|
||||
|
||||
<input type="radio" id="theme-light" name="theme" value="light">
|
||||
<label class="theme-light" for="theme-light">
|
||||
<i class="fa-regular fa-sun" aria-hidden="true"></i>
|
||||
light
|
||||
</label>
|
||||
|
||||
<input type="radio" id="theme-auto" name="theme" value="auto">
|
||||
<label class="theme-auto" for="theme-auto">
|
||||
auto
|
||||
</label>
|
||||
|
||||
<input type="radio" id="theme-dark" name="theme" value="dark">
|
||||
<label class="theme-dark" for="theme-dark">
|
||||
dark
|
||||
<i class="fa-regular fa-moon" aria-hidden="true"></i>
|
||||
</label>
|
||||
</fieldset>
|
||||
</footer>
|
||||
|
||||
|
||||
<!-- This page `/flicker/` was built on 2026-09-08T23:18:32.735Z -->
|
||||
<!-- This page `/flicker/` was built on 2026-09-09T20:38:02.901Z -->
|
||||
</body>
|
||||
</html>
|
||||
|
||||
+191
-19
@@ -478,6 +478,13 @@ body:has(dialog[open]) {
|
||||
--color-grey: light-dark(var(--color-grey-dark), var(--color-grey-light));
|
||||
}
|
||||
|
||||
:root:has(#theme-light:checked) {
|
||||
color-scheme: light;
|
||||
}
|
||||
:root:has(#theme-dark:checked) {
|
||||
color-scheme: dark;
|
||||
}
|
||||
|
||||
/* Base */
|
||||
|
||||
* {
|
||||
@@ -621,7 +628,7 @@ ul, ol, dl, li {
|
||||
}
|
||||
|
||||
li {
|
||||
line-height: 1.2 5;
|
||||
line-height: 1.2;
|
||||
margin-top: .65rem;
|
||||
margin-bottom: .65rem;
|
||||
}
|
||||
@@ -960,6 +967,111 @@ footer a:focus-visible {
|
||||
outline-color: var(--color-pink);
|
||||
}
|
||||
|
||||
/* color picker */
|
||||
#theme {
|
||||
display: flex;
|
||||
justify-content: center;
|
||||
margin: .5rem auto 0;
|
||||
padding: 0 .75rem .5rem;
|
||||
width: fit-content;
|
||||
border: .125rem solid var(--color-teal);
|
||||
border-radius: 2rem;
|
||||
}
|
||||
|
||||
#theme legend {
|
||||
margin: 0 auto;
|
||||
color: var(--color-teal);
|
||||
}
|
||||
|
||||
footer label {
|
||||
cursor: pointer;
|
||||
border: .125rem solid var(--color-pink);
|
||||
padding: 0 .25rem;
|
||||
color: var(--color-pink);
|
||||
background-color: var(--color-bg); /* this stops the box shadows from showing through */
|
||||
box-shadow: .15em .15em var(--color-shadow);
|
||||
/* Click animation handling */
|
||||
position: relative;
|
||||
top: 0;
|
||||
left: 0;
|
||||
transition: top .05s ease-in, left .05s ease-in;
|
||||
}
|
||||
|
||||
footer input:checked + label {
|
||||
color: var(--color-blue);
|
||||
border-color: var(--color-blue);
|
||||
}
|
||||
|
||||
footer label i {
|
||||
color: var(--color-teal);
|
||||
}
|
||||
|
||||
footer input:checked + label i {
|
||||
color: var(--color-pink);
|
||||
}
|
||||
|
||||
@media (any-hover: hover) {
|
||||
footer label:hover,
|
||||
footer input:checked + label:hover,
|
||||
footer label:hover i,
|
||||
footer input:checked + label:hover i {
|
||||
color: var(--color-bg);
|
||||
}
|
||||
|
||||
footer label:hover {
|
||||
background-color: var(--color-pink);
|
||||
}
|
||||
|
||||
footer input:checked + label:hover {
|
||||
background-color: var(--color-teal);
|
||||
}
|
||||
}
|
||||
|
||||
footer input:focus-visible + label,
|
||||
footer input:focus-visible + label i {
|
||||
color: var(--color-bg);
|
||||
background-color: var(--color-pink);
|
||||
border-color: var(--color-pink);
|
||||
}
|
||||
|
||||
footer input:checked:focus-visible + label,
|
||||
footer input:checked:focus-visible + label i {
|
||||
color: var(--color-bg);
|
||||
background-color: var(--color-teal);
|
||||
border-color: var(--color-teal);
|
||||
}
|
||||
|
||||
footer label:active {
|
||||
top: .09em;
|
||||
left: .09em;
|
||||
box-shadow: .05em .05em var(--color-shadow);
|
||||
}
|
||||
|
||||
label.theme-light {
|
||||
border-top-left-radius: 1rem;
|
||||
border-bottom-left-radius: 1rem;
|
||||
border-right: none;
|
||||
padding-left: .35rem;
|
||||
}
|
||||
|
||||
label.theme-auto {
|
||||
}
|
||||
|
||||
label.theme-dark {
|
||||
border-top-right-radius: 1rem;
|
||||
border-bottom-right-radius: 1rem;
|
||||
border-left: none;
|
||||
padding-right: .35rem;
|
||||
}
|
||||
|
||||
footer input {
|
||||
/* To allow screen reader to still access these. */
|
||||
/* From https://lyra.horse/blog/2025/08/you-dont-need-js/ */
|
||||
opacity: 0;
|
||||
position: absolute;
|
||||
pointer-events: none;
|
||||
}
|
||||
|
||||
/* Pagination */
|
||||
.pagination,
|
||||
.pagination li {
|
||||
@@ -1222,6 +1334,8 @@ pre[class*=language-]::selection {
|
||||
}
|
||||
}</style>
|
||||
|
||||
|
||||
|
||||
<script type="module">// Thank you to https://github.com/daviddarnes/heading-anchors
|
||||
// Thank you to https://amberwilson.co.uk/blog/are-your-anchor-links-accessible/
|
||||
|
||||
@@ -1476,6 +1590,41 @@ if (window.innerWidth > 650) {
|
||||
dialog.close();
|
||||
}
|
||||
});
|
||||
}
|
||||
const THEME = "theme";
|
||||
|
||||
const saveTheme = (themeValue) => {
|
||||
localStorage.setItem(THEME, themeValue);
|
||||
};
|
||||
|
||||
const themeLight = document.getElementById("theme-light");
|
||||
themeLight.addEventListener("input", (e) => {
|
||||
saveTheme(themeLight.value);
|
||||
});
|
||||
|
||||
const themeAuto = document.getElementById("theme-auto");
|
||||
themeAuto.addEventListener("input", (e) => {
|
||||
saveTheme(themeAuto.auto);
|
||||
});
|
||||
|
||||
const themeDark = document.getElementById("theme-dark");
|
||||
themeDark.addEventListener("input", (e) => {
|
||||
saveTheme(themeDark.value);
|
||||
});
|
||||
|
||||
var currentThemeValue = localStorage.getItem(THEME);
|
||||
switch (currentThemeValue) {
|
||||
case "light":
|
||||
themeLight.checked = true;
|
||||
break;
|
||||
case "auto":
|
||||
themeAuto.checked = true;
|
||||
break;
|
||||
case "dark":
|
||||
themeDark.checked = true;
|
||||
break;
|
||||
default:
|
||||
themeAuto.checked = true;
|
||||
}</script>
|
||||
|
||||
</head>
|
||||
@@ -1623,29 +1772,15 @@ if (window.innerWidth > 650) {
|
||||
<ol id="postlist">
|
||||
|
||||
<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="/striped-journal/">
|
||||
<h2 data-ha-exclude="" id="striped-journal">striped journal </h2>
|
||||
|
||||
<ul class="postlist-tags">
|
||||
|
||||
<li>book</li>
|
||||
|
||||
</ul>
|
||||
<img src="/img/leather-strap-journal.jpg" alt="A 3-part collage showing a blue journal with leather straps woven into the covers." loading="lazy" decoding="async" width="1000" height="1000">
|
||||
|
||||
</a>
|
||||
</li>
|
||||
|
||||
<li class="post">
|
||||
<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/stampede-journal.jpg" alt="A 4-part collage of a hardcover book, showing a coloring page with 'stampede!' written across it." loading="lazy" decoding="async" width="1000" height="1777">
|
||||
<img src="/img/striped-journal.jpg" alt="A three panel collage showcasing a journal with a striped cover." loading="lazy" decoding="async" width="1000" height="1776">
|
||||
|
||||
</a>
|
||||
</li>
|
||||
@@ -1664,6 +1799,22 @@ if (window.innerWidth > 650) {
|
||||
</a>
|
||||
</li>
|
||||
|
||||
<li class="post">
|
||||
<a class="postlink" href="/black-and-red-journal/">
|
||||
<h2 data-ha-exclude="" id="black-and-red-journal">black and red journal </h2>
|
||||
|
||||
<ul class="postlist-tags">
|
||||
|
||||
<li>book</li>
|
||||
|
||||
<li>leather</li>
|
||||
|
||||
</ul>
|
||||
<img src="/img/black-red-journal.jpg" alt="3 image collage showing a leather-bound journal. The cover is black, with long red vertical stitches along the spine and a red leather strap for a closure. On the back in one lower corner is stamped LEE CAT ART" loading="lazy" decoding="async" width="1000" height="1000">
|
||||
|
||||
</a>
|
||||
</li>
|
||||
|
||||
</ol>
|
||||
|
||||
</section>
|
||||
@@ -1692,9 +1843,30 @@ if (window.innerWidth > 650) {
|
||||
</a>
|
||||
</li>
|
||||
</ul>
|
||||
|
||||
<fieldset id="theme">
|
||||
<legend>color scheme</legend>
|
||||
|
||||
<input type="radio" id="theme-light" name="theme" value="light">
|
||||
<label class="theme-light" for="theme-light">
|
||||
<i class="fa-regular fa-sun" aria-hidden="true"></i>
|
||||
light
|
||||
</label>
|
||||
|
||||
<input type="radio" id="theme-auto" name="theme" value="auto">
|
||||
<label class="theme-auto" for="theme-auto">
|
||||
auto
|
||||
</label>
|
||||
|
||||
<input type="radio" id="theme-dark" name="theme" value="dark">
|
||||
<label class="theme-dark" for="theme-dark">
|
||||
dark
|
||||
<i class="fa-regular fa-moon" aria-hidden="true"></i>
|
||||
</label>
|
||||
</fieldset>
|
||||
</footer>
|
||||
|
||||
|
||||
<!-- This page `/flocked-notebook/` was built on 2026-09-08T23:18:32.732Z -->
|
||||
<!-- This page `/flocked-notebook/` was built on 2026-09-09T20:38:02.893Z -->
|
||||
</body>
|
||||
</html>
|
||||
|
||||
@@ -478,6 +478,13 @@ body:has(dialog[open]) {
|
||||
--color-grey: light-dark(var(--color-grey-dark), var(--color-grey-light));
|
||||
}
|
||||
|
||||
:root:has(#theme-light:checked) {
|
||||
color-scheme: light;
|
||||
}
|
||||
:root:has(#theme-dark:checked) {
|
||||
color-scheme: dark;
|
||||
}
|
||||
|
||||
/* Base */
|
||||
|
||||
* {
|
||||
@@ -621,7 +628,7 @@ ul, ol, dl, li {
|
||||
}
|
||||
|
||||
li {
|
||||
line-height: 1.2 5;
|
||||
line-height: 1.2;
|
||||
margin-top: .65rem;
|
||||
margin-bottom: .65rem;
|
||||
}
|
||||
@@ -960,6 +967,111 @@ footer a:focus-visible {
|
||||
outline-color: var(--color-pink);
|
||||
}
|
||||
|
||||
/* color picker */
|
||||
#theme {
|
||||
display: flex;
|
||||
justify-content: center;
|
||||
margin: .5rem auto 0;
|
||||
padding: 0 .75rem .5rem;
|
||||
width: fit-content;
|
||||
border: .125rem solid var(--color-teal);
|
||||
border-radius: 2rem;
|
||||
}
|
||||
|
||||
#theme legend {
|
||||
margin: 0 auto;
|
||||
color: var(--color-teal);
|
||||
}
|
||||
|
||||
footer label {
|
||||
cursor: pointer;
|
||||
border: .125rem solid var(--color-pink);
|
||||
padding: 0 .25rem;
|
||||
color: var(--color-pink);
|
||||
background-color: var(--color-bg); /* this stops the box shadows from showing through */
|
||||
box-shadow: .15em .15em var(--color-shadow);
|
||||
/* Click animation handling */
|
||||
position: relative;
|
||||
top: 0;
|
||||
left: 0;
|
||||
transition: top .05s ease-in, left .05s ease-in;
|
||||
}
|
||||
|
||||
footer input:checked + label {
|
||||
color: var(--color-blue);
|
||||
border-color: var(--color-blue);
|
||||
}
|
||||
|
||||
footer label i {
|
||||
color: var(--color-teal);
|
||||
}
|
||||
|
||||
footer input:checked + label i {
|
||||
color: var(--color-pink);
|
||||
}
|
||||
|
||||
@media (any-hover: hover) {
|
||||
footer label:hover,
|
||||
footer input:checked + label:hover,
|
||||
footer label:hover i,
|
||||
footer input:checked + label:hover i {
|
||||
color: var(--color-bg);
|
||||
}
|
||||
|
||||
footer label:hover {
|
||||
background-color: var(--color-pink);
|
||||
}
|
||||
|
||||
footer input:checked + label:hover {
|
||||
background-color: var(--color-teal);
|
||||
}
|
||||
}
|
||||
|
||||
footer input:focus-visible + label,
|
||||
footer input:focus-visible + label i {
|
||||
color: var(--color-bg);
|
||||
background-color: var(--color-pink);
|
||||
border-color: var(--color-pink);
|
||||
}
|
||||
|
||||
footer input:checked:focus-visible + label,
|
||||
footer input:checked:focus-visible + label i {
|
||||
color: var(--color-bg);
|
||||
background-color: var(--color-teal);
|
||||
border-color: var(--color-teal);
|
||||
}
|
||||
|
||||
footer label:active {
|
||||
top: .09em;
|
||||
left: .09em;
|
||||
box-shadow: .05em .05em var(--color-shadow);
|
||||
}
|
||||
|
||||
label.theme-light {
|
||||
border-top-left-radius: 1rem;
|
||||
border-bottom-left-radius: 1rem;
|
||||
border-right: none;
|
||||
padding-left: .35rem;
|
||||
}
|
||||
|
||||
label.theme-auto {
|
||||
}
|
||||
|
||||
label.theme-dark {
|
||||
border-top-right-radius: 1rem;
|
||||
border-bottom-right-radius: 1rem;
|
||||
border-left: none;
|
||||
padding-right: .35rem;
|
||||
}
|
||||
|
||||
footer input {
|
||||
/* To allow screen reader to still access these. */
|
||||
/* From https://lyra.horse/blog/2025/08/you-dont-need-js/ */
|
||||
opacity: 0;
|
||||
position: absolute;
|
||||
pointer-events: none;
|
||||
}
|
||||
|
||||
/* Pagination */
|
||||
.pagination,
|
||||
.pagination li {
|
||||
@@ -1222,6 +1334,8 @@ pre[class*=language-]::selection {
|
||||
}
|
||||
}</style>
|
||||
|
||||
|
||||
|
||||
<script type="module">// Thank you to https://github.com/daviddarnes/heading-anchors
|
||||
// Thank you to https://amberwilson.co.uk/blog/are-your-anchor-links-accessible/
|
||||
|
||||
@@ -1476,6 +1590,41 @@ if (window.innerWidth > 650) {
|
||||
dialog.close();
|
||||
}
|
||||
});
|
||||
}
|
||||
const THEME = "theme";
|
||||
|
||||
const saveTheme = (themeValue) => {
|
||||
localStorage.setItem(THEME, themeValue);
|
||||
};
|
||||
|
||||
const themeLight = document.getElementById("theme-light");
|
||||
themeLight.addEventListener("input", (e) => {
|
||||
saveTheme(themeLight.value);
|
||||
});
|
||||
|
||||
const themeAuto = document.getElementById("theme-auto");
|
||||
themeAuto.addEventListener("input", (e) => {
|
||||
saveTheme(themeAuto.auto);
|
||||
});
|
||||
|
||||
const themeDark = document.getElementById("theme-dark");
|
||||
themeDark.addEventListener("input", (e) => {
|
||||
saveTheme(themeDark.value);
|
||||
});
|
||||
|
||||
var currentThemeValue = localStorage.getItem(THEME);
|
||||
switch (currentThemeValue) {
|
||||
case "light":
|
||||
themeLight.checked = true;
|
||||
break;
|
||||
case "auto":
|
||||
themeAuto.checked = true;
|
||||
break;
|
||||
case "dark":
|
||||
themeDark.checked = true;
|
||||
break;
|
||||
default:
|
||||
themeAuto.checked = true;
|
||||
}</script>
|
||||
|
||||
</head>
|
||||
@@ -1610,45 +1759,45 @@ if (window.innerWidth > 650) {
|
||||
<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="/moss-harness/">
|
||||
<h2 data-ha-exclude="" id="moss-harness">moss 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/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>
|
||||
|
||||
<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="/leather-lighter-case/">
|
||||
<h2 data-ha-exclude="" id="leather-lighter-case">leather lighter case </h2>
|
||||
|
||||
<ul class="postlist-tags">
|
||||
|
||||
<li>leather</li>
|
||||
|
||||
<li>software</li>
|
||||
|
||||
</ul>
|
||||
<img src="/img/shoelace-bag.jpg" alt="a 3-image collage showcasing a leather crossbody bag. the leather body is brown and fairly simple. up the narrow sides, rope is laced through grommets in a style resembling a shoe lacing. the rope forms the handle and loops seamlessly through the other side of the bag, joining in one point in a figure-8 follow-through knot. At the bottom corners, there are small diagonal lines of stitching to give the bag a small lip around the base and ensure small objects don't slide out." loading="lazy" decoding="async" width="1000" height="1777">
|
||||
<img src="/img/leather-lighter-case.jpg" alt="A bic lighter wrapped in leather and hand-stitched up one side." loading="lazy" decoding="async" width="1000" height="750">
|
||||
|
||||
</a>
|
||||
</li>
|
||||
|
||||
<li class="post">
|
||||
<a class="postlink" href="/swoop-wallet/">
|
||||
<h2 data-ha-exclude="" id="swoop-wallet">swoop wallet </h2>
|
||||
<a class="postlink" href="/black-and-red-journal/">
|
||||
<h2 data-ha-exclude="" id="black-and-red-journal">black and red journal </h2>
|
||||
|
||||
<ul class="postlist-tags">
|
||||
|
||||
<li>book</li>
|
||||
|
||||
<li>leather</li>
|
||||
|
||||
</ul>
|
||||
<img src="/img/swoop-wallet.jpg" alt="A collage showing 3 pictures of a red and brown leather card wallet. The red pocket separator folds around to the back to become a fetching curlicue." loading="lazy" decoding="async" width="900" height="1200">
|
||||
<img src="/img/black-red-journal.jpg" alt="3 image collage showing a leather-bound journal. The cover is black, with long red vertical stitches along the spine and a red leather strap for a closure. On the back in one lower corner is stamped LEE CAT ART" loading="lazy" decoding="async" width="1000" height="1000">
|
||||
|
||||
</a>
|
||||
</li>
|
||||
@@ -1681,9 +1830,30 @@ if (window.innerWidth > 650) {
|
||||
</a>
|
||||
</li>
|
||||
</ul>
|
||||
|
||||
<fieldset id="theme">
|
||||
<legend>color scheme</legend>
|
||||
|
||||
<input type="radio" id="theme-light" name="theme" value="light">
|
||||
<label class="theme-light" for="theme-light">
|
||||
<i class="fa-regular fa-sun" aria-hidden="true"></i>
|
||||
light
|
||||
</label>
|
||||
|
||||
<input type="radio" id="theme-auto" name="theme" value="auto">
|
||||
<label class="theme-auto" for="theme-auto">
|
||||
auto
|
||||
</label>
|
||||
|
||||
<input type="radio" id="theme-dark" name="theme" value="dark">
|
||||
<label class="theme-dark" for="theme-dark">
|
||||
dark
|
||||
<i class="fa-regular fa-moon" aria-hidden="true"></i>
|
||||
</label>
|
||||
</fieldset>
|
||||
</footer>
|
||||
|
||||
|
||||
<!-- This page `/foldy-wallet-with-thumb-slide/` was built on 2026-09-08T23:18:32.760Z -->
|
||||
<!-- This page `/foldy-wallet-with-thumb-slide/` was built on 2026-09-09T20:38:02.895Z -->
|
||||
</body>
|
||||
</html>
|
||||
|
||||
+183
-11
@@ -478,6 +478,13 @@ body:has(dialog[open]) {
|
||||
--color-grey: light-dark(var(--color-grey-dark), var(--color-grey-light));
|
||||
}
|
||||
|
||||
:root:has(#theme-light:checked) {
|
||||
color-scheme: light;
|
||||
}
|
||||
:root:has(#theme-dark:checked) {
|
||||
color-scheme: dark;
|
||||
}
|
||||
|
||||
/* Base */
|
||||
|
||||
* {
|
||||
@@ -621,7 +628,7 @@ ul, ol, dl, li {
|
||||
}
|
||||
|
||||
li {
|
||||
line-height: 1.2 5;
|
||||
line-height: 1.2;
|
||||
margin-top: .65rem;
|
||||
margin-bottom: .65rem;
|
||||
}
|
||||
@@ -960,6 +967,111 @@ footer a:focus-visible {
|
||||
outline-color: var(--color-pink);
|
||||
}
|
||||
|
||||
/* color picker */
|
||||
#theme {
|
||||
display: flex;
|
||||
justify-content: center;
|
||||
margin: .5rem auto 0;
|
||||
padding: 0 .75rem .5rem;
|
||||
width: fit-content;
|
||||
border: .125rem solid var(--color-teal);
|
||||
border-radius: 2rem;
|
||||
}
|
||||
|
||||
#theme legend {
|
||||
margin: 0 auto;
|
||||
color: var(--color-teal);
|
||||
}
|
||||
|
||||
footer label {
|
||||
cursor: pointer;
|
||||
border: .125rem solid var(--color-pink);
|
||||
padding: 0 .25rem;
|
||||
color: var(--color-pink);
|
||||
background-color: var(--color-bg); /* this stops the box shadows from showing through */
|
||||
box-shadow: .15em .15em var(--color-shadow);
|
||||
/* Click animation handling */
|
||||
position: relative;
|
||||
top: 0;
|
||||
left: 0;
|
||||
transition: top .05s ease-in, left .05s ease-in;
|
||||
}
|
||||
|
||||
footer input:checked + label {
|
||||
color: var(--color-blue);
|
||||
border-color: var(--color-blue);
|
||||
}
|
||||
|
||||
footer label i {
|
||||
color: var(--color-teal);
|
||||
}
|
||||
|
||||
footer input:checked + label i {
|
||||
color: var(--color-pink);
|
||||
}
|
||||
|
||||
@media (any-hover: hover) {
|
||||
footer label:hover,
|
||||
footer input:checked + label:hover,
|
||||
footer label:hover i,
|
||||
footer input:checked + label:hover i {
|
||||
color: var(--color-bg);
|
||||
}
|
||||
|
||||
footer label:hover {
|
||||
background-color: var(--color-pink);
|
||||
}
|
||||
|
||||
footer input:checked + label:hover {
|
||||
background-color: var(--color-teal);
|
||||
}
|
||||
}
|
||||
|
||||
footer input:focus-visible + label,
|
||||
footer input:focus-visible + label i {
|
||||
color: var(--color-bg);
|
||||
background-color: var(--color-pink);
|
||||
border-color: var(--color-pink);
|
||||
}
|
||||
|
||||
footer input:checked:focus-visible + label,
|
||||
footer input:checked:focus-visible + label i {
|
||||
color: var(--color-bg);
|
||||
background-color: var(--color-teal);
|
||||
border-color: var(--color-teal);
|
||||
}
|
||||
|
||||
footer label:active {
|
||||
top: .09em;
|
||||
left: .09em;
|
||||
box-shadow: .05em .05em var(--color-shadow);
|
||||
}
|
||||
|
||||
label.theme-light {
|
||||
border-top-left-radius: 1rem;
|
||||
border-bottom-left-radius: 1rem;
|
||||
border-right: none;
|
||||
padding-left: .35rem;
|
||||
}
|
||||
|
||||
label.theme-auto {
|
||||
}
|
||||
|
||||
label.theme-dark {
|
||||
border-top-right-radius: 1rem;
|
||||
border-bottom-right-radius: 1rem;
|
||||
border-left: none;
|
||||
padding-right: .35rem;
|
||||
}
|
||||
|
||||
footer input {
|
||||
/* To allow screen reader to still access these. */
|
||||
/* From https://lyra.horse/blog/2025/08/you-dont-need-js/ */
|
||||
opacity: 0;
|
||||
position: absolute;
|
||||
pointer-events: none;
|
||||
}
|
||||
|
||||
/* Pagination */
|
||||
.pagination,
|
||||
.pagination li {
|
||||
@@ -1222,6 +1334,8 @@ pre[class*=language-]::selection {
|
||||
}
|
||||
}</style>
|
||||
|
||||
|
||||
|
||||
<script type="module">// Thank you to https://github.com/daviddarnes/heading-anchors
|
||||
// Thank you to https://amberwilson.co.uk/blog/are-your-anchor-links-accessible/
|
||||
|
||||
@@ -1476,6 +1590,41 @@ if (window.innerWidth > 650) {
|
||||
dialog.close();
|
||||
}
|
||||
});
|
||||
}
|
||||
const THEME = "theme";
|
||||
|
||||
const saveTheme = (themeValue) => {
|
||||
localStorage.setItem(THEME, themeValue);
|
||||
};
|
||||
|
||||
const themeLight = document.getElementById("theme-light");
|
||||
themeLight.addEventListener("input", (e) => {
|
||||
saveTheme(themeLight.value);
|
||||
});
|
||||
|
||||
const themeAuto = document.getElementById("theme-auto");
|
||||
themeAuto.addEventListener("input", (e) => {
|
||||
saveTheme(themeAuto.auto);
|
||||
});
|
||||
|
||||
const themeDark = document.getElementById("theme-dark");
|
||||
themeDark.addEventListener("input", (e) => {
|
||||
saveTheme(themeDark.value);
|
||||
});
|
||||
|
||||
var currentThemeValue = localStorage.getItem(THEME);
|
||||
switch (currentThemeValue) {
|
||||
case "light":
|
||||
themeLight.checked = true;
|
||||
break;
|
||||
case "auto":
|
||||
themeAuto.checked = true;
|
||||
break;
|
||||
case "dark":
|
||||
themeDark.checked = true;
|
||||
break;
|
||||
default:
|
||||
themeAuto.checked = true;
|
||||
}</script>
|
||||
|
||||
</head>
|
||||
@@ -1610,43 +1759,45 @@ if (window.innerWidth > 650) {
|
||||
<ol id="postlist">
|
||||
|
||||
<li class="post">
|
||||
<a class="postlink" href="/snap-pouch/">
|
||||
<h2 data-ha-exclude="" id="snap-pouch">snap pouch </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/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/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="/leaf-patches/">
|
||||
<h2 data-ha-exclude="" id="leaf-patches">leaf patches </h2>
|
||||
<a class="postlink" href="/patchwork-wallet/">
|
||||
<h2 data-ha-exclude="" id="patchwork-wallet">patchwork wallet </h2>
|
||||
|
||||
<ul class="postlist-tags">
|
||||
|
||||
<li>leather</li>
|
||||
|
||||
<li>highlight</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">
|
||||
<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="/soras-collar/">
|
||||
<h2 data-ha-exclude="" id="soras-collar">sora's collar </h2>
|
||||
<a class="postlink" href="/brookes-suspenders/">
|
||||
<h2 data-ha-exclude="" id="brookes-suspenders">brooke's suspenders </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's fully stitched with dark red stitching and has brass hardware." loading="lazy" decoding="async" width="1000" height="1000">
|
||||
<img src="/img/brooke-suspenders.jpg" alt="a two image collage showing the front and back of a person, neck to waist. she's wearing leather suspenders with a button attachment, buckles for adjustment, and a stitched diamond where the straps cross in the back." loading="lazy" decoding="async" width="1000" height="750">
|
||||
|
||||
</a>
|
||||
</li>
|
||||
@@ -1679,9 +1830,30 @@ if (window.innerWidth > 650) {
|
||||
</a>
|
||||
</li>
|
||||
</ul>
|
||||
|
||||
<fieldset id="theme">
|
||||
<legend>color scheme</legend>
|
||||
|
||||
<input type="radio" id="theme-light" name="theme" value="light">
|
||||
<label class="theme-light" for="theme-light">
|
||||
<i class="fa-regular fa-sun" aria-hidden="true"></i>
|
||||
light
|
||||
</label>
|
||||
|
||||
<input type="radio" id="theme-auto" name="theme" value="auto">
|
||||
<label class="theme-auto" for="theme-auto">
|
||||
auto
|
||||
</label>
|
||||
|
||||
<input type="radio" id="theme-dark" name="theme" value="dark">
|
||||
<label class="theme-dark" for="theme-dark">
|
||||
dark
|
||||
<i class="fa-regular fa-moon" aria-hidden="true"></i>
|
||||
</label>
|
||||
</fieldset>
|
||||
</footer>
|
||||
|
||||
|
||||
<!-- This page `/foldy-wallet/` was built on 2026-09-08T23:18:32.759Z -->
|
||||
<!-- This page `/foldy-wallet/` was built on 2026-09-09T20:38:02.894Z -->
|
||||
</body>
|
||||
</html>
|
||||
|
||||
@@ -478,6 +478,13 @@ body:has(dialog[open]) {
|
||||
--color-grey: light-dark(var(--color-grey-dark), var(--color-grey-light));
|
||||
}
|
||||
|
||||
:root:has(#theme-light:checked) {
|
||||
color-scheme: light;
|
||||
}
|
||||
:root:has(#theme-dark:checked) {
|
||||
color-scheme: dark;
|
||||
}
|
||||
|
||||
/* Base */
|
||||
|
||||
* {
|
||||
@@ -621,7 +628,7 @@ ul, ol, dl, li {
|
||||
}
|
||||
|
||||
li {
|
||||
line-height: 1.2 5;
|
||||
line-height: 1.2;
|
||||
margin-top: .65rem;
|
||||
margin-bottom: .65rem;
|
||||
}
|
||||
@@ -960,6 +967,111 @@ footer a:focus-visible {
|
||||
outline-color: var(--color-pink);
|
||||
}
|
||||
|
||||
/* color picker */
|
||||
#theme {
|
||||
display: flex;
|
||||
justify-content: center;
|
||||
margin: .5rem auto 0;
|
||||
padding: 0 .75rem .5rem;
|
||||
width: fit-content;
|
||||
border: .125rem solid var(--color-teal);
|
||||
border-radius: 2rem;
|
||||
}
|
||||
|
||||
#theme legend {
|
||||
margin: 0 auto;
|
||||
color: var(--color-teal);
|
||||
}
|
||||
|
||||
footer label {
|
||||
cursor: pointer;
|
||||
border: .125rem solid var(--color-pink);
|
||||
padding: 0 .25rem;
|
||||
color: var(--color-pink);
|
||||
background-color: var(--color-bg); /* this stops the box shadows from showing through */
|
||||
box-shadow: .15em .15em var(--color-shadow);
|
||||
/* Click animation handling */
|
||||
position: relative;
|
||||
top: 0;
|
||||
left: 0;
|
||||
transition: top .05s ease-in, left .05s ease-in;
|
||||
}
|
||||
|
||||
footer input:checked + label {
|
||||
color: var(--color-blue);
|
||||
border-color: var(--color-blue);
|
||||
}
|
||||
|
||||
footer label i {
|
||||
color: var(--color-teal);
|
||||
}
|
||||
|
||||
footer input:checked + label i {
|
||||
color: var(--color-pink);
|
||||
}
|
||||
|
||||
@media (any-hover: hover) {
|
||||
footer label:hover,
|
||||
footer input:checked + label:hover,
|
||||
footer label:hover i,
|
||||
footer input:checked + label:hover i {
|
||||
color: var(--color-bg);
|
||||
}
|
||||
|
||||
footer label:hover {
|
||||
background-color: var(--color-pink);
|
||||
}
|
||||
|
||||
footer input:checked + label:hover {
|
||||
background-color: var(--color-teal);
|
||||
}
|
||||
}
|
||||
|
||||
footer input:focus-visible + label,
|
||||
footer input:focus-visible + label i {
|
||||
color: var(--color-bg);
|
||||
background-color: var(--color-pink);
|
||||
border-color: var(--color-pink);
|
||||
}
|
||||
|
||||
footer input:checked:focus-visible + label,
|
||||
footer input:checked:focus-visible + label i {
|
||||
color: var(--color-bg);
|
||||
background-color: var(--color-teal);
|
||||
border-color: var(--color-teal);
|
||||
}
|
||||
|
||||
footer label:active {
|
||||
top: .09em;
|
||||
left: .09em;
|
||||
box-shadow: .05em .05em var(--color-shadow);
|
||||
}
|
||||
|
||||
label.theme-light {
|
||||
border-top-left-radius: 1rem;
|
||||
border-bottom-left-radius: 1rem;
|
||||
border-right: none;
|
||||
padding-left: .35rem;
|
||||
}
|
||||
|
||||
label.theme-auto {
|
||||
}
|
||||
|
||||
label.theme-dark {
|
||||
border-top-right-radius: 1rem;
|
||||
border-bottom-right-radius: 1rem;
|
||||
border-left: none;
|
||||
padding-right: .35rem;
|
||||
}
|
||||
|
||||
footer input {
|
||||
/* To allow screen reader to still access these. */
|
||||
/* From https://lyra.horse/blog/2025/08/you-dont-need-js/ */
|
||||
opacity: 0;
|
||||
position: absolute;
|
||||
pointer-events: none;
|
||||
}
|
||||
|
||||
/* Pagination */
|
||||
.pagination,
|
||||
.pagination li {
|
||||
@@ -1222,6 +1334,8 @@ pre[class*=language-]::selection {
|
||||
}
|
||||
}</style>
|
||||
|
||||
|
||||
|
||||
<script type="module">// Thank you to https://github.com/daviddarnes/heading-anchors
|
||||
// Thank you to https://amberwilson.co.uk/blog/are-your-anchor-links-accessible/
|
||||
|
||||
@@ -1476,6 +1590,41 @@ if (window.innerWidth > 650) {
|
||||
dialog.close();
|
||||
}
|
||||
});
|
||||
}
|
||||
const THEME = "theme";
|
||||
|
||||
const saveTheme = (themeValue) => {
|
||||
localStorage.setItem(THEME, themeValue);
|
||||
};
|
||||
|
||||
const themeLight = document.getElementById("theme-light");
|
||||
themeLight.addEventListener("input", (e) => {
|
||||
saveTheme(themeLight.value);
|
||||
});
|
||||
|
||||
const themeAuto = document.getElementById("theme-auto");
|
||||
themeAuto.addEventListener("input", (e) => {
|
||||
saveTheme(themeAuto.auto);
|
||||
});
|
||||
|
||||
const themeDark = document.getElementById("theme-dark");
|
||||
themeDark.addEventListener("input", (e) => {
|
||||
saveTheme(themeDark.value);
|
||||
});
|
||||
|
||||
var currentThemeValue = localStorage.getItem(THEME);
|
||||
switch (currentThemeValue) {
|
||||
case "light":
|
||||
themeLight.checked = true;
|
||||
break;
|
||||
case "auto":
|
||||
themeAuto.checked = true;
|
||||
break;
|
||||
case "dark":
|
||||
themeDark.checked = true;
|
||||
break;
|
||||
default:
|
||||
themeAuto.checked = true;
|
||||
}</script>
|
||||
|
||||
</head>
|
||||
@@ -1680,9 +1829,30 @@ if (window.innerWidth > 650) {
|
||||
</a>
|
||||
</li>
|
||||
</ul>
|
||||
|
||||
<fieldset id="theme">
|
||||
<legend>color scheme</legend>
|
||||
|
||||
<input type="radio" id="theme-light" name="theme" value="light">
|
||||
<label class="theme-light" for="theme-light">
|
||||
<i class="fa-regular fa-sun" aria-hidden="true"></i>
|
||||
light
|
||||
</label>
|
||||
|
||||
<input type="radio" id="theme-auto" name="theme" value="auto">
|
||||
<label class="theme-auto" for="theme-auto">
|
||||
auto
|
||||
</label>
|
||||
|
||||
<input type="radio" id="theme-dark" name="theme" value="dark">
|
||||
<label class="theme-dark" for="theme-dark">
|
||||
dark
|
||||
<i class="fa-regular fa-moon" aria-hidden="true"></i>
|
||||
</label>
|
||||
</fieldset>
|
||||
</footer>
|
||||
|
||||
|
||||
<!-- This page `/fountain-pen-friendly-stationery/` was built on 2026-09-08T23:18:32.765Z -->
|
||||
<!-- This page `/fountain-pen-friendly-stationery/` was built on 2026-09-09T20:38:02.899Z -->
|
||||
</body>
|
||||
</html>
|
||||
|
||||
+203
-25
@@ -478,6 +478,13 @@ body:has(dialog[open]) {
|
||||
--color-grey: light-dark(var(--color-grey-dark), var(--color-grey-light));
|
||||
}
|
||||
|
||||
:root:has(#theme-light:checked) {
|
||||
color-scheme: light;
|
||||
}
|
||||
:root:has(#theme-dark:checked) {
|
||||
color-scheme: dark;
|
||||
}
|
||||
|
||||
/* Base */
|
||||
|
||||
* {
|
||||
@@ -621,7 +628,7 @@ ul, ol, dl, li {
|
||||
}
|
||||
|
||||
li {
|
||||
line-height: 1.2 5;
|
||||
line-height: 1.2;
|
||||
margin-top: .65rem;
|
||||
margin-bottom: .65rem;
|
||||
}
|
||||
@@ -960,6 +967,111 @@ footer a:focus-visible {
|
||||
outline-color: var(--color-pink);
|
||||
}
|
||||
|
||||
/* color picker */
|
||||
#theme {
|
||||
display: flex;
|
||||
justify-content: center;
|
||||
margin: .5rem auto 0;
|
||||
padding: 0 .75rem .5rem;
|
||||
width: fit-content;
|
||||
border: .125rem solid var(--color-teal);
|
||||
border-radius: 2rem;
|
||||
}
|
||||
|
||||
#theme legend {
|
||||
margin: 0 auto;
|
||||
color: var(--color-teal);
|
||||
}
|
||||
|
||||
footer label {
|
||||
cursor: pointer;
|
||||
border: .125rem solid var(--color-pink);
|
||||
padding: 0 .25rem;
|
||||
color: var(--color-pink);
|
||||
background-color: var(--color-bg); /* this stops the box shadows from showing through */
|
||||
box-shadow: .15em .15em var(--color-shadow);
|
||||
/* Click animation handling */
|
||||
position: relative;
|
||||
top: 0;
|
||||
left: 0;
|
||||
transition: top .05s ease-in, left .05s ease-in;
|
||||
}
|
||||
|
||||
footer input:checked + label {
|
||||
color: var(--color-blue);
|
||||
border-color: var(--color-blue);
|
||||
}
|
||||
|
||||
footer label i {
|
||||
color: var(--color-teal);
|
||||
}
|
||||
|
||||
footer input:checked + label i {
|
||||
color: var(--color-pink);
|
||||
}
|
||||
|
||||
@media (any-hover: hover) {
|
||||
footer label:hover,
|
||||
footer input:checked + label:hover,
|
||||
footer label:hover i,
|
||||
footer input:checked + label:hover i {
|
||||
color: var(--color-bg);
|
||||
}
|
||||
|
||||
footer label:hover {
|
||||
background-color: var(--color-pink);
|
||||
}
|
||||
|
||||
footer input:checked + label:hover {
|
||||
background-color: var(--color-teal);
|
||||
}
|
||||
}
|
||||
|
||||
footer input:focus-visible + label,
|
||||
footer input:focus-visible + label i {
|
||||
color: var(--color-bg);
|
||||
background-color: var(--color-pink);
|
||||
border-color: var(--color-pink);
|
||||
}
|
||||
|
||||
footer input:checked:focus-visible + label,
|
||||
footer input:checked:focus-visible + label i {
|
||||
color: var(--color-bg);
|
||||
background-color: var(--color-teal);
|
||||
border-color: var(--color-teal);
|
||||
}
|
||||
|
||||
footer label:active {
|
||||
top: .09em;
|
||||
left: .09em;
|
||||
box-shadow: .05em .05em var(--color-shadow);
|
||||
}
|
||||
|
||||
label.theme-light {
|
||||
border-top-left-radius: 1rem;
|
||||
border-bottom-left-radius: 1rem;
|
||||
border-right: none;
|
||||
padding-left: .35rem;
|
||||
}
|
||||
|
||||
label.theme-auto {
|
||||
}
|
||||
|
||||
label.theme-dark {
|
||||
border-top-right-radius: 1rem;
|
||||
border-bottom-right-radius: 1rem;
|
||||
border-left: none;
|
||||
padding-right: .35rem;
|
||||
}
|
||||
|
||||
footer input {
|
||||
/* To allow screen reader to still access these. */
|
||||
/* From https://lyra.horse/blog/2025/08/you-dont-need-js/ */
|
||||
opacity: 0;
|
||||
position: absolute;
|
||||
pointer-events: none;
|
||||
}
|
||||
|
||||
/* Pagination */
|
||||
.pagination,
|
||||
.pagination li {
|
||||
@@ -1222,6 +1334,8 @@ pre[class*=language-]::selection {
|
||||
}
|
||||
}</style>
|
||||
|
||||
|
||||
|
||||
<script type="module">// Thank you to https://github.com/daviddarnes/heading-anchors
|
||||
// Thank you to https://amberwilson.co.uk/blog/are-your-anchor-links-accessible/
|
||||
|
||||
@@ -1476,6 +1590,41 @@ if (window.innerWidth > 650) {
|
||||
dialog.close();
|
||||
}
|
||||
});
|
||||
}
|
||||
const THEME = "theme";
|
||||
|
||||
const saveTheme = (themeValue) => {
|
||||
localStorage.setItem(THEME, themeValue);
|
||||
};
|
||||
|
||||
const themeLight = document.getElementById("theme-light");
|
||||
themeLight.addEventListener("input", (e) => {
|
||||
saveTheme(themeLight.value);
|
||||
});
|
||||
|
||||
const themeAuto = document.getElementById("theme-auto");
|
||||
themeAuto.addEventListener("input", (e) => {
|
||||
saveTheme(themeAuto.auto);
|
||||
});
|
||||
|
||||
const themeDark = document.getElementById("theme-dark");
|
||||
themeDark.addEventListener("input", (e) => {
|
||||
saveTheme(themeDark.value);
|
||||
});
|
||||
|
||||
var currentThemeValue = localStorage.getItem(THEME);
|
||||
switch (currentThemeValue) {
|
||||
case "light":
|
||||
themeLight.checked = true;
|
||||
break;
|
||||
case "auto":
|
||||
themeAuto.checked = true;
|
||||
break;
|
||||
case "dark":
|
||||
themeDark.checked = true;
|
||||
break;
|
||||
default:
|
||||
themeAuto.checked = true;
|
||||
}</script>
|
||||
|
||||
</head>
|
||||
@@ -1626,8 +1775,22 @@ if (window.innerWidth > 650) {
|
||||
<ol id="postlist">
|
||||
|
||||
<li class="post">
|
||||
<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>
|
||||
<a class="postlink" href="/kniphofia/">
|
||||
<h2 data-ha-exclude="" id="kniphofia">kniphofia </h2>
|
||||
|
||||
<ul class="postlist-tags">
|
||||
|
||||
<li>print</li>
|
||||
|
||||
</ul>
|
||||
<img src="/img/kniphofia-print.jpg" alt="A print of a brightly colored flower in 4 layers of color" loading="lazy" decoding="async" width="1000" height="1333">
|
||||
|
||||
</a>
|
||||
</li>
|
||||
|
||||
<li class="post">
|
||||
<a class="postlink" href="/trans-rights-skull/">
|
||||
<h2 data-ha-exclude="" id="trans-rights-skull">trans rights skull </h2>
|
||||
|
||||
<ul class="postlist-tags">
|
||||
|
||||
@@ -1635,15 +1798,21 @@ if (window.innerWidth > 650) {
|
||||
|
||||
<li>card</li>
|
||||
|
||||
<li>sticker</li>
|
||||
|
||||
<li>pin</li>
|
||||
|
||||
<li>gender</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 'Congrats on the Autism'; one in rainbow ink and one in black ink with a glittery gold shadow. On the left, two cards read 'Congrats on the ADHD'; one in red and one in black, both with glittery pink shadows." loading="lazy" decoding="async" width="1000" height="562">
|
||||
<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 'trans rights!'" loading="lazy" decoding="async" width="1000" height="750">
|
||||
|
||||
</a>
|
||||
</li>
|
||||
|
||||
<li class="post">
|
||||
<a class="postlink" href="/big-pidge/">
|
||||
<h2 data-ha-exclude="" id="big-pidge">big pidge </h2>
|
||||
<a class="postlink" href="/queer/">
|
||||
<h2 data-ha-exclude="" id="queer">queer </h2>
|
||||
|
||||
<ul class="postlist-tags">
|
||||
|
||||
@@ -1651,26 +1820,14 @@ if (window.innerWidth > 650) {
|
||||
|
||||
<li>card</li>
|
||||
|
||||
<li>shirt</li>
|
||||
<li>sticker</li>
|
||||
|
||||
<li>pin</li>
|
||||
|
||||
<li>gender</li>
|
||||
|
||||
</ul>
|
||||
<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="/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 'Artisans Cooperative' with a print of some chickens and a quail." 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>
|
||||
@@ -1703,9 +1860,30 @@ if (window.innerWidth > 650) {
|
||||
</a>
|
||||
</li>
|
||||
</ul>
|
||||
|
||||
<fieldset id="theme">
|
||||
<legend>color scheme</legend>
|
||||
|
||||
<input type="radio" id="theme-light" name="theme" value="light">
|
||||
<label class="theme-light" for="theme-light">
|
||||
<i class="fa-regular fa-sun" aria-hidden="true"></i>
|
||||
light
|
||||
</label>
|
||||
|
||||
<input type="radio" id="theme-auto" name="theme" value="auto">
|
||||
<label class="theme-auto" for="theme-auto">
|
||||
auto
|
||||
</label>
|
||||
|
||||
<input type="radio" id="theme-dark" name="theme" value="dark">
|
||||
<label class="theme-dark" for="theme-dark">
|
||||
dark
|
||||
<i class="fa-regular fa-moon" aria-hidden="true"></i>
|
||||
</label>
|
||||
</fieldset>
|
||||
</footer>
|
||||
|
||||
|
||||
<!-- This page `/foxgloves/` was built on 2026-09-08T23:18:32.739Z -->
|
||||
<!-- This page `/foxgloves/` was built on 2026-09-09T20:38:02.906Z -->
|
||||
</body>
|
||||
</html>
|
||||
|
||||
+189
-19
@@ -478,6 +478,13 @@ body:has(dialog[open]) {
|
||||
--color-grey: light-dark(var(--color-grey-dark), var(--color-grey-light));
|
||||
}
|
||||
|
||||
:root:has(#theme-light:checked) {
|
||||
color-scheme: light;
|
||||
}
|
||||
:root:has(#theme-dark:checked) {
|
||||
color-scheme: dark;
|
||||
}
|
||||
|
||||
/* Base */
|
||||
|
||||
* {
|
||||
@@ -621,7 +628,7 @@ ul, ol, dl, li {
|
||||
}
|
||||
|
||||
li {
|
||||
line-height: 1.2 5;
|
||||
line-height: 1.2;
|
||||
margin-top: .65rem;
|
||||
margin-bottom: .65rem;
|
||||
}
|
||||
@@ -960,6 +967,111 @@ footer a:focus-visible {
|
||||
outline-color: var(--color-pink);
|
||||
}
|
||||
|
||||
/* color picker */
|
||||
#theme {
|
||||
display: flex;
|
||||
justify-content: center;
|
||||
margin: .5rem auto 0;
|
||||
padding: 0 .75rem .5rem;
|
||||
width: fit-content;
|
||||
border: .125rem solid var(--color-teal);
|
||||
border-radius: 2rem;
|
||||
}
|
||||
|
||||
#theme legend {
|
||||
margin: 0 auto;
|
||||
color: var(--color-teal);
|
||||
}
|
||||
|
||||
footer label {
|
||||
cursor: pointer;
|
||||
border: .125rem solid var(--color-pink);
|
||||
padding: 0 .25rem;
|
||||
color: var(--color-pink);
|
||||
background-color: var(--color-bg); /* this stops the box shadows from showing through */
|
||||
box-shadow: .15em .15em var(--color-shadow);
|
||||
/* Click animation handling */
|
||||
position: relative;
|
||||
top: 0;
|
||||
left: 0;
|
||||
transition: top .05s ease-in, left .05s ease-in;
|
||||
}
|
||||
|
||||
footer input:checked + label {
|
||||
color: var(--color-blue);
|
||||
border-color: var(--color-blue);
|
||||
}
|
||||
|
||||
footer label i {
|
||||
color: var(--color-teal);
|
||||
}
|
||||
|
||||
footer input:checked + label i {
|
||||
color: var(--color-pink);
|
||||
}
|
||||
|
||||
@media (any-hover: hover) {
|
||||
footer label:hover,
|
||||
footer input:checked + label:hover,
|
||||
footer label:hover i,
|
||||
footer input:checked + label:hover i {
|
||||
color: var(--color-bg);
|
||||
}
|
||||
|
||||
footer label:hover {
|
||||
background-color: var(--color-pink);
|
||||
}
|
||||
|
||||
footer input:checked + label:hover {
|
||||
background-color: var(--color-teal);
|
||||
}
|
||||
}
|
||||
|
||||
footer input:focus-visible + label,
|
||||
footer input:focus-visible + label i {
|
||||
color: var(--color-bg);
|
||||
background-color: var(--color-pink);
|
||||
border-color: var(--color-pink);
|
||||
}
|
||||
|
||||
footer input:checked:focus-visible + label,
|
||||
footer input:checked:focus-visible + label i {
|
||||
color: var(--color-bg);
|
||||
background-color: var(--color-teal);
|
||||
border-color: var(--color-teal);
|
||||
}
|
||||
|
||||
footer label:active {
|
||||
top: .09em;
|
||||
left: .09em;
|
||||
box-shadow: .05em .05em var(--color-shadow);
|
||||
}
|
||||
|
||||
label.theme-light {
|
||||
border-top-left-radius: 1rem;
|
||||
border-bottom-left-radius: 1rem;
|
||||
border-right: none;
|
||||
padding-left: .35rem;
|
||||
}
|
||||
|
||||
label.theme-auto {
|
||||
}
|
||||
|
||||
label.theme-dark {
|
||||
border-top-right-radius: 1rem;
|
||||
border-bottom-right-radius: 1rem;
|
||||
border-left: none;
|
||||
padding-right: .35rem;
|
||||
}
|
||||
|
||||
footer input {
|
||||
/* To allow screen reader to still access these. */
|
||||
/* From https://lyra.horse/blog/2025/08/you-dont-need-js/ */
|
||||
opacity: 0;
|
||||
position: absolute;
|
||||
pointer-events: none;
|
||||
}
|
||||
|
||||
/* Pagination */
|
||||
.pagination,
|
||||
.pagination li {
|
||||
@@ -1222,6 +1334,8 @@ pre[class*=language-]::selection {
|
||||
}
|
||||
}</style>
|
||||
|
||||
|
||||
|
||||
<script type="module">// Thank you to https://github.com/daviddarnes/heading-anchors
|
||||
// Thank you to https://amberwilson.co.uk/blog/are-your-anchor-links-accessible/
|
||||
|
||||
@@ -1476,6 +1590,41 @@ if (window.innerWidth > 650) {
|
||||
dialog.close();
|
||||
}
|
||||
});
|
||||
}
|
||||
const THEME = "theme";
|
||||
|
||||
const saveTheme = (themeValue) => {
|
||||
localStorage.setItem(THEME, themeValue);
|
||||
};
|
||||
|
||||
const themeLight = document.getElementById("theme-light");
|
||||
themeLight.addEventListener("input", (e) => {
|
||||
saveTheme(themeLight.value);
|
||||
});
|
||||
|
||||
const themeAuto = document.getElementById("theme-auto");
|
||||
themeAuto.addEventListener("input", (e) => {
|
||||
saveTheme(themeAuto.auto);
|
||||
});
|
||||
|
||||
const themeDark = document.getElementById("theme-dark");
|
||||
themeDark.addEventListener("input", (e) => {
|
||||
saveTheme(themeDark.value);
|
||||
});
|
||||
|
||||
var currentThemeValue = localStorage.getItem(THEME);
|
||||
switch (currentThemeValue) {
|
||||
case "light":
|
||||
themeLight.checked = true;
|
||||
break;
|
||||
case "auto":
|
||||
themeAuto.checked = true;
|
||||
break;
|
||||
case "dark":
|
||||
themeDark.checked = true;
|
||||
break;
|
||||
default:
|
||||
themeAuto.checked = true;
|
||||
}</script>
|
||||
|
||||
</head>
|
||||
@@ -1715,20 +1864,6 @@ if (window.innerWidth > 650) {
|
||||
<h2 data-ha-exclude="" id="related-posts">related posts</h2>
|
||||
<ol id="postlist">
|
||||
|
||||
<li class="post">
|
||||
<a class="postlink" href="/redirections/">
|
||||
<h2 data-ha-exclude="" id="redirections">redirections </h2>
|
||||
|
||||
<ul class="postlist-tags">
|
||||
|
||||
<li>software</li>
|
||||
|
||||
</ul>
|
||||
<img src="/img/angle-brackets-uwu.jpg" alt="Ascii art of an emoticon with pinched eyes and a small mouth made with two angle brackets." loading="lazy" decoding="async" width="1000" height="316">
|
||||
|
||||
</a>
|
||||
</li>
|
||||
|
||||
<li class="post">
|
||||
<a class="postlink" href="/designing-a-bag/">
|
||||
<h2 data-ha-exclude="" id="designing-a-bag">designing a bag </h2>
|
||||
@@ -1746,15 +1881,29 @@ if (window.innerWidth > 650) {
|
||||
</li>
|
||||
|
||||
<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="/visual-site-builders-and-accessibility/">
|
||||
<h2 data-ha-exclude="" id="visual-site-builders-and-accessibility">visual site builders and accessibility </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/roses.jpg" alt="Image unrelated to post. Two peach-colored roses, the farther away one a bit out of focus." loading="lazy" decoding="async" width="1000" height="666">
|
||||
|
||||
</a>
|
||||
</li>
|
||||
|
||||
<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>
|
||||
|
||||
<ul class="postlist-tags">
|
||||
|
||||
<li>software</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">
|
||||
|
||||
</a>
|
||||
</li>
|
||||
@@ -1787,9 +1936,30 @@ if (window.innerWidth > 650) {
|
||||
</a>
|
||||
</li>
|
||||
</ul>
|
||||
|
||||
<fieldset id="theme">
|
||||
<legend>color scheme</legend>
|
||||
|
||||
<input type="radio" id="theme-light" name="theme" value="light">
|
||||
<label class="theme-light" for="theme-light">
|
||||
<i class="fa-regular fa-sun" aria-hidden="true"></i>
|
||||
light
|
||||
</label>
|
||||
|
||||
<input type="radio" id="theme-auto" name="theme" value="auto">
|
||||
<label class="theme-auto" for="theme-auto">
|
||||
auto
|
||||
</label>
|
||||
|
||||
<input type="radio" id="theme-dark" name="theme" value="dark">
|
||||
<label class="theme-dark" for="theme-dark">
|
||||
dark
|
||||
<i class="fa-regular fa-moon" aria-hidden="true"></i>
|
||||
</label>
|
||||
</fieldset>
|
||||
</footer>
|
||||
|
||||
|
||||
<!-- This page `/framer-accessibility/` was built on 2026-09-08T23:18:32.759Z -->
|
||||
<!-- This page `/framer-accessibility/` was built on 2026-09-09T20:38:02.940Z -->
|
||||
</body>
|
||||
</html>
|
||||
|
||||
+172
-3
@@ -311,6 +311,13 @@
|
||||
--color-grey: light-dark(var(--color-grey-dark), var(--color-grey-light));
|
||||
}
|
||||
|
||||
:root:has(#theme-light:checked) {
|
||||
color-scheme: light;
|
||||
}
|
||||
:root:has(#theme-dark:checked) {
|
||||
color-scheme: dark;
|
||||
}
|
||||
|
||||
/* Base */
|
||||
|
||||
* {
|
||||
@@ -454,7 +461,7 @@ ul, ol, dl, li {
|
||||
}
|
||||
|
||||
li {
|
||||
line-height: 1.2 5;
|
||||
line-height: 1.2;
|
||||
margin-top: .65rem;
|
||||
margin-bottom: .65rem;
|
||||
}
|
||||
@@ -793,6 +800,111 @@ footer a:focus-visible {
|
||||
outline-color: var(--color-pink);
|
||||
}
|
||||
|
||||
/* color picker */
|
||||
#theme {
|
||||
display: flex;
|
||||
justify-content: center;
|
||||
margin: .5rem auto 0;
|
||||
padding: 0 .75rem .5rem;
|
||||
width: fit-content;
|
||||
border: .125rem solid var(--color-teal);
|
||||
border-radius: 2rem;
|
||||
}
|
||||
|
||||
#theme legend {
|
||||
margin: 0 auto;
|
||||
color: var(--color-teal);
|
||||
}
|
||||
|
||||
footer label {
|
||||
cursor: pointer;
|
||||
border: .125rem solid var(--color-pink);
|
||||
padding: 0 .25rem;
|
||||
color: var(--color-pink);
|
||||
background-color: var(--color-bg); /* this stops the box shadows from showing through */
|
||||
box-shadow: .15em .15em var(--color-shadow);
|
||||
/* Click animation handling */
|
||||
position: relative;
|
||||
top: 0;
|
||||
left: 0;
|
||||
transition: top .05s ease-in, left .05s ease-in;
|
||||
}
|
||||
|
||||
footer input:checked + label {
|
||||
color: var(--color-blue);
|
||||
border-color: var(--color-blue);
|
||||
}
|
||||
|
||||
footer label i {
|
||||
color: var(--color-teal);
|
||||
}
|
||||
|
||||
footer input:checked + label i {
|
||||
color: var(--color-pink);
|
||||
}
|
||||
|
||||
@media (any-hover: hover) {
|
||||
footer label:hover,
|
||||
footer input:checked + label:hover,
|
||||
footer label:hover i,
|
||||
footer input:checked + label:hover i {
|
||||
color: var(--color-bg);
|
||||
}
|
||||
|
||||
footer label:hover {
|
||||
background-color: var(--color-pink);
|
||||
}
|
||||
|
||||
footer input:checked + label:hover {
|
||||
background-color: var(--color-teal);
|
||||
}
|
||||
}
|
||||
|
||||
footer input:focus-visible + label,
|
||||
footer input:focus-visible + label i {
|
||||
color: var(--color-bg);
|
||||
background-color: var(--color-pink);
|
||||
border-color: var(--color-pink);
|
||||
}
|
||||
|
||||
footer input:checked:focus-visible + label,
|
||||
footer input:checked:focus-visible + label i {
|
||||
color: var(--color-bg);
|
||||
background-color: var(--color-teal);
|
||||
border-color: var(--color-teal);
|
||||
}
|
||||
|
||||
footer label:active {
|
||||
top: .09em;
|
||||
left: .09em;
|
||||
box-shadow: .05em .05em var(--color-shadow);
|
||||
}
|
||||
|
||||
label.theme-light {
|
||||
border-top-left-radius: 1rem;
|
||||
border-bottom-left-radius: 1rem;
|
||||
border-right: none;
|
||||
padding-left: .35rem;
|
||||
}
|
||||
|
||||
label.theme-auto {
|
||||
}
|
||||
|
||||
label.theme-dark {
|
||||
border-top-right-radius: 1rem;
|
||||
border-bottom-right-radius: 1rem;
|
||||
border-left: none;
|
||||
padding-right: .35rem;
|
||||
}
|
||||
|
||||
footer input {
|
||||
/* To allow screen reader to still access these. */
|
||||
/* From https://lyra.horse/blog/2025/08/you-dont-need-js/ */
|
||||
opacity: 0;
|
||||
position: absolute;
|
||||
pointer-events: none;
|
||||
}
|
||||
|
||||
/* Pagination */
|
||||
.pagination,
|
||||
.pagination li {
|
||||
@@ -1055,7 +1167,43 @@ pre[class*=language-]::selection {
|
||||
}
|
||||
}</style>
|
||||
|
||||
<script type="module"></script>
|
||||
|
||||
|
||||
<script type="module">const THEME = "theme";
|
||||
|
||||
const saveTheme = (themeValue) => {
|
||||
localStorage.setItem(THEME, themeValue);
|
||||
};
|
||||
|
||||
const themeLight = document.getElementById("theme-light");
|
||||
themeLight.addEventListener("input", (e) => {
|
||||
saveTheme(themeLight.value);
|
||||
});
|
||||
|
||||
const themeAuto = document.getElementById("theme-auto");
|
||||
themeAuto.addEventListener("input", (e) => {
|
||||
saveTheme(themeAuto.auto);
|
||||
});
|
||||
|
||||
const themeDark = document.getElementById("theme-dark");
|
||||
themeDark.addEventListener("input", (e) => {
|
||||
saveTheme(themeDark.value);
|
||||
});
|
||||
|
||||
var currentThemeValue = localStorage.getItem(THEME);
|
||||
switch (currentThemeValue) {
|
||||
case "light":
|
||||
themeLight.checked = true;
|
||||
break;
|
||||
case "auto":
|
||||
themeAuto.checked = true;
|
||||
break;
|
||||
case "dark":
|
||||
themeDark.checked = true;
|
||||
break;
|
||||
default:
|
||||
themeAuto.checked = true;
|
||||
}</script>
|
||||
|
||||
</head>
|
||||
<body>
|
||||
@@ -1353,9 +1501,30 @@ pre[class*=language-]::selection {
|
||||
</a>
|
||||
</li>
|
||||
</ul>
|
||||
|
||||
<fieldset id="theme">
|
||||
<legend>color scheme</legend>
|
||||
|
||||
<input type="radio" id="theme-light" name="theme" value="light">
|
||||
<label class="theme-light" for="theme-light">
|
||||
<i class="fa-regular fa-sun" aria-hidden="true"></i>
|
||||
light
|
||||
</label>
|
||||
|
||||
<input type="radio" id="theme-auto" name="theme" value="auto">
|
||||
<label class="theme-auto" for="theme-auto">
|
||||
auto
|
||||
</label>
|
||||
|
||||
<input type="radio" id="theme-dark" name="theme" value="dark">
|
||||
<label class="theme-dark" for="theme-dark">
|
||||
dark
|
||||
<i class="fa-regular fa-moon" aria-hidden="true"></i>
|
||||
</label>
|
||||
</fieldset>
|
||||
</footer>
|
||||
|
||||
|
||||
<!-- This page `/gallery/1/` was built on 2026-09-08T23:18:35.787Z -->
|
||||
<!-- This page `/gallery/1/` was built on 2026-09-09T20:38:06.492Z -->
|
||||
</body>
|
||||
</html>
|
||||
|
||||
+172
-3
@@ -311,6 +311,13 @@
|
||||
--color-grey: light-dark(var(--color-grey-dark), var(--color-grey-light));
|
||||
}
|
||||
|
||||
:root:has(#theme-light:checked) {
|
||||
color-scheme: light;
|
||||
}
|
||||
:root:has(#theme-dark:checked) {
|
||||
color-scheme: dark;
|
||||
}
|
||||
|
||||
/* Base */
|
||||
|
||||
* {
|
||||
@@ -454,7 +461,7 @@ ul, ol, dl, li {
|
||||
}
|
||||
|
||||
li {
|
||||
line-height: 1.2 5;
|
||||
line-height: 1.2;
|
||||
margin-top: .65rem;
|
||||
margin-bottom: .65rem;
|
||||
}
|
||||
@@ -793,6 +800,111 @@ footer a:focus-visible {
|
||||
outline-color: var(--color-pink);
|
||||
}
|
||||
|
||||
/* color picker */
|
||||
#theme {
|
||||
display: flex;
|
||||
justify-content: center;
|
||||
margin: .5rem auto 0;
|
||||
padding: 0 .75rem .5rem;
|
||||
width: fit-content;
|
||||
border: .125rem solid var(--color-teal);
|
||||
border-radius: 2rem;
|
||||
}
|
||||
|
||||
#theme legend {
|
||||
margin: 0 auto;
|
||||
color: var(--color-teal);
|
||||
}
|
||||
|
||||
footer label {
|
||||
cursor: pointer;
|
||||
border: .125rem solid var(--color-pink);
|
||||
padding: 0 .25rem;
|
||||
color: var(--color-pink);
|
||||
background-color: var(--color-bg); /* this stops the box shadows from showing through */
|
||||
box-shadow: .15em .15em var(--color-shadow);
|
||||
/* Click animation handling */
|
||||
position: relative;
|
||||
top: 0;
|
||||
left: 0;
|
||||
transition: top .05s ease-in, left .05s ease-in;
|
||||
}
|
||||
|
||||
footer input:checked + label {
|
||||
color: var(--color-blue);
|
||||
border-color: var(--color-blue);
|
||||
}
|
||||
|
||||
footer label i {
|
||||
color: var(--color-teal);
|
||||
}
|
||||
|
||||
footer input:checked + label i {
|
||||
color: var(--color-pink);
|
||||
}
|
||||
|
||||
@media (any-hover: hover) {
|
||||
footer label:hover,
|
||||
footer input:checked + label:hover,
|
||||
footer label:hover i,
|
||||
footer input:checked + label:hover i {
|
||||
color: var(--color-bg);
|
||||
}
|
||||
|
||||
footer label:hover {
|
||||
background-color: var(--color-pink);
|
||||
}
|
||||
|
||||
footer input:checked + label:hover {
|
||||
background-color: var(--color-teal);
|
||||
}
|
||||
}
|
||||
|
||||
footer input:focus-visible + label,
|
||||
footer input:focus-visible + label i {
|
||||
color: var(--color-bg);
|
||||
background-color: var(--color-pink);
|
||||
border-color: var(--color-pink);
|
||||
}
|
||||
|
||||
footer input:checked:focus-visible + label,
|
||||
footer input:checked:focus-visible + label i {
|
||||
color: var(--color-bg);
|
||||
background-color: var(--color-teal);
|
||||
border-color: var(--color-teal);
|
||||
}
|
||||
|
||||
footer label:active {
|
||||
top: .09em;
|
||||
left: .09em;
|
||||
box-shadow: .05em .05em var(--color-shadow);
|
||||
}
|
||||
|
||||
label.theme-light {
|
||||
border-top-left-radius: 1rem;
|
||||
border-bottom-left-radius: 1rem;
|
||||
border-right: none;
|
||||
padding-left: .35rem;
|
||||
}
|
||||
|
||||
label.theme-auto {
|
||||
}
|
||||
|
||||
label.theme-dark {
|
||||
border-top-right-radius: 1rem;
|
||||
border-bottom-right-radius: 1rem;
|
||||
border-left: none;
|
||||
padding-right: .35rem;
|
||||
}
|
||||
|
||||
footer input {
|
||||
/* To allow screen reader to still access these. */
|
||||
/* From https://lyra.horse/blog/2025/08/you-dont-need-js/ */
|
||||
opacity: 0;
|
||||
position: absolute;
|
||||
pointer-events: none;
|
||||
}
|
||||
|
||||
/* Pagination */
|
||||
.pagination,
|
||||
.pagination li {
|
||||
@@ -1055,7 +1167,43 @@ pre[class*=language-]::selection {
|
||||
}
|
||||
}</style>
|
||||
|
||||
<script type="module"></script>
|
||||
|
||||
|
||||
<script type="module">const THEME = "theme";
|
||||
|
||||
const saveTheme = (themeValue) => {
|
||||
localStorage.setItem(THEME, themeValue);
|
||||
};
|
||||
|
||||
const themeLight = document.getElementById("theme-light");
|
||||
themeLight.addEventListener("input", (e) => {
|
||||
saveTheme(themeLight.value);
|
||||
});
|
||||
|
||||
const themeAuto = document.getElementById("theme-auto");
|
||||
themeAuto.addEventListener("input", (e) => {
|
||||
saveTheme(themeAuto.auto);
|
||||
});
|
||||
|
||||
const themeDark = document.getElementById("theme-dark");
|
||||
themeDark.addEventListener("input", (e) => {
|
||||
saveTheme(themeDark.value);
|
||||
});
|
||||
|
||||
var currentThemeValue = localStorage.getItem(THEME);
|
||||
switch (currentThemeValue) {
|
||||
case "light":
|
||||
themeLight.checked = true;
|
||||
break;
|
||||
case "auto":
|
||||
themeAuto.checked = true;
|
||||
break;
|
||||
case "dark":
|
||||
themeDark.checked = true;
|
||||
break;
|
||||
default:
|
||||
themeAuto.checked = true;
|
||||
}</script>
|
||||
|
||||
</head>
|
||||
<body>
|
||||
@@ -1367,9 +1515,30 @@ pre[class*=language-]::selection {
|
||||
</a>
|
||||
</li>
|
||||
</ul>
|
||||
|
||||
<fieldset id="theme">
|
||||
<legend>color scheme</legend>
|
||||
|
||||
<input type="radio" id="theme-light" name="theme" value="light">
|
||||
<label class="theme-light" for="theme-light">
|
||||
<i class="fa-regular fa-sun" aria-hidden="true"></i>
|
||||
light
|
||||
</label>
|
||||
|
||||
<input type="radio" id="theme-auto" name="theme" value="auto">
|
||||
<label class="theme-auto" for="theme-auto">
|
||||
auto
|
||||
</label>
|
||||
|
||||
<input type="radio" id="theme-dark" name="theme" value="dark">
|
||||
<label class="theme-dark" for="theme-dark">
|
||||
dark
|
||||
<i class="fa-regular fa-moon" aria-hidden="true"></i>
|
||||
</label>
|
||||
</fieldset>
|
||||
</footer>
|
||||
|
||||
|
||||
<!-- This page `/gallery/10/` was built on 2026-09-08T23:18:39.522Z -->
|
||||
<!-- This page `/gallery/10/` was built on 2026-09-09T20:38:10.075Z -->
|
||||
</body>
|
||||
</html>
|
||||
|
||||
+172
-3
@@ -311,6 +311,13 @@
|
||||
--color-grey: light-dark(var(--color-grey-dark), var(--color-grey-light));
|
||||
}
|
||||
|
||||
:root:has(#theme-light:checked) {
|
||||
color-scheme: light;
|
||||
}
|
||||
:root:has(#theme-dark:checked) {
|
||||
color-scheme: dark;
|
||||
}
|
||||
|
||||
/* Base */
|
||||
|
||||
* {
|
||||
@@ -454,7 +461,7 @@ ul, ol, dl, li {
|
||||
}
|
||||
|
||||
li {
|
||||
line-height: 1.2 5;
|
||||
line-height: 1.2;
|
||||
margin-top: .65rem;
|
||||
margin-bottom: .65rem;
|
||||
}
|
||||
@@ -793,6 +800,111 @@ footer a:focus-visible {
|
||||
outline-color: var(--color-pink);
|
||||
}
|
||||
|
||||
/* color picker */
|
||||
#theme {
|
||||
display: flex;
|
||||
justify-content: center;
|
||||
margin: .5rem auto 0;
|
||||
padding: 0 .75rem .5rem;
|
||||
width: fit-content;
|
||||
border: .125rem solid var(--color-teal);
|
||||
border-radius: 2rem;
|
||||
}
|
||||
|
||||
#theme legend {
|
||||
margin: 0 auto;
|
||||
color: var(--color-teal);
|
||||
}
|
||||
|
||||
footer label {
|
||||
cursor: pointer;
|
||||
border: .125rem solid var(--color-pink);
|
||||
padding: 0 .25rem;
|
||||
color: var(--color-pink);
|
||||
background-color: var(--color-bg); /* this stops the box shadows from showing through */
|
||||
box-shadow: .15em .15em var(--color-shadow);
|
||||
/* Click animation handling */
|
||||
position: relative;
|
||||
top: 0;
|
||||
left: 0;
|
||||
transition: top .05s ease-in, left .05s ease-in;
|
||||
}
|
||||
|
||||
footer input:checked + label {
|
||||
color: var(--color-blue);
|
||||
border-color: var(--color-blue);
|
||||
}
|
||||
|
||||
footer label i {
|
||||
color: var(--color-teal);
|
||||
}
|
||||
|
||||
footer input:checked + label i {
|
||||
color: var(--color-pink);
|
||||
}
|
||||
|
||||
@media (any-hover: hover) {
|
||||
footer label:hover,
|
||||
footer input:checked + label:hover,
|
||||
footer label:hover i,
|
||||
footer input:checked + label:hover i {
|
||||
color: var(--color-bg);
|
||||
}
|
||||
|
||||
footer label:hover {
|
||||
background-color: var(--color-pink);
|
||||
}
|
||||
|
||||
footer input:checked + label:hover {
|
||||
background-color: var(--color-teal);
|
||||
}
|
||||
}
|
||||
|
||||
footer input:focus-visible + label,
|
||||
footer input:focus-visible + label i {
|
||||
color: var(--color-bg);
|
||||
background-color: var(--color-pink);
|
||||
border-color: var(--color-pink);
|
||||
}
|
||||
|
||||
footer input:checked:focus-visible + label,
|
||||
footer input:checked:focus-visible + label i {
|
||||
color: var(--color-bg);
|
||||
background-color: var(--color-teal);
|
||||
border-color: var(--color-teal);
|
||||
}
|
||||
|
||||
footer label:active {
|
||||
top: .09em;
|
||||
left: .09em;
|
||||
box-shadow: .05em .05em var(--color-shadow);
|
||||
}
|
||||
|
||||
label.theme-light {
|
||||
border-top-left-radius: 1rem;
|
||||
border-bottom-left-radius: 1rem;
|
||||
border-right: none;
|
||||
padding-left: .35rem;
|
||||
}
|
||||
|
||||
label.theme-auto {
|
||||
}
|
||||
|
||||
label.theme-dark {
|
||||
border-top-right-radius: 1rem;
|
||||
border-bottom-right-radius: 1rem;
|
||||
border-left: none;
|
||||
padding-right: .35rem;
|
||||
}
|
||||
|
||||
footer input {
|
||||
/* To allow screen reader to still access these. */
|
||||
/* From https://lyra.horse/blog/2025/08/you-dont-need-js/ */
|
||||
opacity: 0;
|
||||
position: absolute;
|
||||
pointer-events: none;
|
||||
}
|
||||
|
||||
/* Pagination */
|
||||
.pagination,
|
||||
.pagination li {
|
||||
@@ -1055,7 +1167,43 @@ pre[class*=language-]::selection {
|
||||
}
|
||||
}</style>
|
||||
|
||||
<script type="module"></script>
|
||||
|
||||
|
||||
<script type="module">const THEME = "theme";
|
||||
|
||||
const saveTheme = (themeValue) => {
|
||||
localStorage.setItem(THEME, themeValue);
|
||||
};
|
||||
|
||||
const themeLight = document.getElementById("theme-light");
|
||||
themeLight.addEventListener("input", (e) => {
|
||||
saveTheme(themeLight.value);
|
||||
});
|
||||
|
||||
const themeAuto = document.getElementById("theme-auto");
|
||||
themeAuto.addEventListener("input", (e) => {
|
||||
saveTheme(themeAuto.auto);
|
||||
});
|
||||
|
||||
const themeDark = document.getElementById("theme-dark");
|
||||
themeDark.addEventListener("input", (e) => {
|
||||
saveTheme(themeDark.value);
|
||||
});
|
||||
|
||||
var currentThemeValue = localStorage.getItem(THEME);
|
||||
switch (currentThemeValue) {
|
||||
case "light":
|
||||
themeLight.checked = true;
|
||||
break;
|
||||
case "auto":
|
||||
themeAuto.checked = true;
|
||||
break;
|
||||
case "dark":
|
||||
themeDark.checked = true;
|
||||
break;
|
||||
default:
|
||||
themeAuto.checked = true;
|
||||
}</script>
|
||||
|
||||
</head>
|
||||
<body>
|
||||
@@ -1325,9 +1473,30 @@ pre[class*=language-]::selection {
|
||||
</a>
|
||||
</li>
|
||||
</ul>
|
||||
|
||||
<fieldset id="theme">
|
||||
<legend>color scheme</legend>
|
||||
|
||||
<input type="radio" id="theme-light" name="theme" value="light">
|
||||
<label class="theme-light" for="theme-light">
|
||||
<i class="fa-regular fa-sun" aria-hidden="true"></i>
|
||||
light
|
||||
</label>
|
||||
|
||||
<input type="radio" id="theme-auto" name="theme" value="auto">
|
||||
<label class="theme-auto" for="theme-auto">
|
||||
auto
|
||||
</label>
|
||||
|
||||
<input type="radio" id="theme-dark" name="theme" value="dark">
|
||||
<label class="theme-dark" for="theme-dark">
|
||||
dark
|
||||
<i class="fa-regular fa-moon" aria-hidden="true"></i>
|
||||
</label>
|
||||
</fieldset>
|
||||
</footer>
|
||||
|
||||
|
||||
<!-- This page `/gallery/11/` was built on 2026-09-08T23:18:39.938Z -->
|
||||
<!-- This page `/gallery/11/` was built on 2026-09-09T20:38:10.398Z -->
|
||||
</body>
|
||||
</html>
|
||||
|
||||
+172
-3
@@ -311,6 +311,13 @@
|
||||
--color-grey: light-dark(var(--color-grey-dark), var(--color-grey-light));
|
||||
}
|
||||
|
||||
:root:has(#theme-light:checked) {
|
||||
color-scheme: light;
|
||||
}
|
||||
:root:has(#theme-dark:checked) {
|
||||
color-scheme: dark;
|
||||
}
|
||||
|
||||
/* Base */
|
||||
|
||||
* {
|
||||
@@ -454,7 +461,7 @@ ul, ol, dl, li {
|
||||
}
|
||||
|
||||
li {
|
||||
line-height: 1.2 5;
|
||||
line-height: 1.2;
|
||||
margin-top: .65rem;
|
||||
margin-bottom: .65rem;
|
||||
}
|
||||
@@ -793,6 +800,111 @@ footer a:focus-visible {
|
||||
outline-color: var(--color-pink);
|
||||
}
|
||||
|
||||
/* color picker */
|
||||
#theme {
|
||||
display: flex;
|
||||
justify-content: center;
|
||||
margin: .5rem auto 0;
|
||||
padding: 0 .75rem .5rem;
|
||||
width: fit-content;
|
||||
border: .125rem solid var(--color-teal);
|
||||
border-radius: 2rem;
|
||||
}
|
||||
|
||||
#theme legend {
|
||||
margin: 0 auto;
|
||||
color: var(--color-teal);
|
||||
}
|
||||
|
||||
footer label {
|
||||
cursor: pointer;
|
||||
border: .125rem solid var(--color-pink);
|
||||
padding: 0 .25rem;
|
||||
color: var(--color-pink);
|
||||
background-color: var(--color-bg); /* this stops the box shadows from showing through */
|
||||
box-shadow: .15em .15em var(--color-shadow);
|
||||
/* Click animation handling */
|
||||
position: relative;
|
||||
top: 0;
|
||||
left: 0;
|
||||
transition: top .05s ease-in, left .05s ease-in;
|
||||
}
|
||||
|
||||
footer input:checked + label {
|
||||
color: var(--color-blue);
|
||||
border-color: var(--color-blue);
|
||||
}
|
||||
|
||||
footer label i {
|
||||
color: var(--color-teal);
|
||||
}
|
||||
|
||||
footer input:checked + label i {
|
||||
color: var(--color-pink);
|
||||
}
|
||||
|
||||
@media (any-hover: hover) {
|
||||
footer label:hover,
|
||||
footer input:checked + label:hover,
|
||||
footer label:hover i,
|
||||
footer input:checked + label:hover i {
|
||||
color: var(--color-bg);
|
||||
}
|
||||
|
||||
footer label:hover {
|
||||
background-color: var(--color-pink);
|
||||
}
|
||||
|
||||
footer input:checked + label:hover {
|
||||
background-color: var(--color-teal);
|
||||
}
|
||||
}
|
||||
|
||||
footer input:focus-visible + label,
|
||||
footer input:focus-visible + label i {
|
||||
color: var(--color-bg);
|
||||
background-color: var(--color-pink);
|
||||
border-color: var(--color-pink);
|
||||
}
|
||||
|
||||
footer input:checked:focus-visible + label,
|
||||
footer input:checked:focus-visible + label i {
|
||||
color: var(--color-bg);
|
||||
background-color: var(--color-teal);
|
||||
border-color: var(--color-teal);
|
||||
}
|
||||
|
||||
footer label:active {
|
||||
top: .09em;
|
||||
left: .09em;
|
||||
box-shadow: .05em .05em var(--color-shadow);
|
||||
}
|
||||
|
||||
label.theme-light {
|
||||
border-top-left-radius: 1rem;
|
||||
border-bottom-left-radius: 1rem;
|
||||
border-right: none;
|
||||
padding-left: .35rem;
|
||||
}
|
||||
|
||||
label.theme-auto {
|
||||
}
|
||||
|
||||
label.theme-dark {
|
||||
border-top-right-radius: 1rem;
|
||||
border-bottom-right-radius: 1rem;
|
||||
border-left: none;
|
||||
padding-right: .35rem;
|
||||
}
|
||||
|
||||
footer input {
|
||||
/* To allow screen reader to still access these. */
|
||||
/* From https://lyra.horse/blog/2025/08/you-dont-need-js/ */
|
||||
opacity: 0;
|
||||
position: absolute;
|
||||
pointer-events: none;
|
||||
}
|
||||
|
||||
/* Pagination */
|
||||
.pagination,
|
||||
.pagination li {
|
||||
@@ -1055,7 +1167,43 @@ pre[class*=language-]::selection {
|
||||
}
|
||||
}</style>
|
||||
|
||||
<script type="module"></script>
|
||||
|
||||
|
||||
<script type="module">const THEME = "theme";
|
||||
|
||||
const saveTheme = (themeValue) => {
|
||||
localStorage.setItem(THEME, themeValue);
|
||||
};
|
||||
|
||||
const themeLight = document.getElementById("theme-light");
|
||||
themeLight.addEventListener("input", (e) => {
|
||||
saveTheme(themeLight.value);
|
||||
});
|
||||
|
||||
const themeAuto = document.getElementById("theme-auto");
|
||||
themeAuto.addEventListener("input", (e) => {
|
||||
saveTheme(themeAuto.auto);
|
||||
});
|
||||
|
||||
const themeDark = document.getElementById("theme-dark");
|
||||
themeDark.addEventListener("input", (e) => {
|
||||
saveTheme(themeDark.value);
|
||||
});
|
||||
|
||||
var currentThemeValue = localStorage.getItem(THEME);
|
||||
switch (currentThemeValue) {
|
||||
case "light":
|
||||
themeLight.checked = true;
|
||||
break;
|
||||
case "auto":
|
||||
themeAuto.checked = true;
|
||||
break;
|
||||
case "dark":
|
||||
themeDark.checked = true;
|
||||
break;
|
||||
default:
|
||||
themeAuto.checked = true;
|
||||
}</script>
|
||||
|
||||
</head>
|
||||
<body>
|
||||
@@ -1369,9 +1517,30 @@ pre[class*=language-]::selection {
|
||||
</a>
|
||||
</li>
|
||||
</ul>
|
||||
|
||||
<fieldset id="theme">
|
||||
<legend>color scheme</legend>
|
||||
|
||||
<input type="radio" id="theme-light" name="theme" value="light">
|
||||
<label class="theme-light" for="theme-light">
|
||||
<i class="fa-regular fa-sun" aria-hidden="true"></i>
|
||||
light
|
||||
</label>
|
||||
|
||||
<input type="radio" id="theme-auto" name="theme" value="auto">
|
||||
<label class="theme-auto" for="theme-auto">
|
||||
auto
|
||||
</label>
|
||||
|
||||
<input type="radio" id="theme-dark" name="theme" value="dark">
|
||||
<label class="theme-dark" for="theme-dark">
|
||||
dark
|
||||
<i class="fa-regular fa-moon" aria-hidden="true"></i>
|
||||
</label>
|
||||
</fieldset>
|
||||
</footer>
|
||||
|
||||
|
||||
<!-- This page `/gallery/2/` was built on 2026-09-08T23:18:36.190Z -->
|
||||
<!-- This page `/gallery/2/` was built on 2026-09-09T20:38:06.811Z -->
|
||||
</body>
|
||||
</html>
|
||||
|
||||
+172
-3
@@ -311,6 +311,13 @@
|
||||
--color-grey: light-dark(var(--color-grey-dark), var(--color-grey-light));
|
||||
}
|
||||
|
||||
:root:has(#theme-light:checked) {
|
||||
color-scheme: light;
|
||||
}
|
||||
:root:has(#theme-dark:checked) {
|
||||
color-scheme: dark;
|
||||
}
|
||||
|
||||
/* Base */
|
||||
|
||||
* {
|
||||
@@ -454,7 +461,7 @@ ul, ol, dl, li {
|
||||
}
|
||||
|
||||
li {
|
||||
line-height: 1.2 5;
|
||||
line-height: 1.2;
|
||||
margin-top: .65rem;
|
||||
margin-bottom: .65rem;
|
||||
}
|
||||
@@ -793,6 +800,111 @@ footer a:focus-visible {
|
||||
outline-color: var(--color-pink);
|
||||
}
|
||||
|
||||
/* color picker */
|
||||
#theme {
|
||||
display: flex;
|
||||
justify-content: center;
|
||||
margin: .5rem auto 0;
|
||||
padding: 0 .75rem .5rem;
|
||||
width: fit-content;
|
||||
border: .125rem solid var(--color-teal);
|
||||
border-radius: 2rem;
|
||||
}
|
||||
|
||||
#theme legend {
|
||||
margin: 0 auto;
|
||||
color: var(--color-teal);
|
||||
}
|
||||
|
||||
footer label {
|
||||
cursor: pointer;
|
||||
border: .125rem solid var(--color-pink);
|
||||
padding: 0 .25rem;
|
||||
color: var(--color-pink);
|
||||
background-color: var(--color-bg); /* this stops the box shadows from showing through */
|
||||
box-shadow: .15em .15em var(--color-shadow);
|
||||
/* Click animation handling */
|
||||
position: relative;
|
||||
top: 0;
|
||||
left: 0;
|
||||
transition: top .05s ease-in, left .05s ease-in;
|
||||
}
|
||||
|
||||
footer input:checked + label {
|
||||
color: var(--color-blue);
|
||||
border-color: var(--color-blue);
|
||||
}
|
||||
|
||||
footer label i {
|
||||
color: var(--color-teal);
|
||||
}
|
||||
|
||||
footer input:checked + label i {
|
||||
color: var(--color-pink);
|
||||
}
|
||||
|
||||
@media (any-hover: hover) {
|
||||
footer label:hover,
|
||||
footer input:checked + label:hover,
|
||||
footer label:hover i,
|
||||
footer input:checked + label:hover i {
|
||||
color: var(--color-bg);
|
||||
}
|
||||
|
||||
footer label:hover {
|
||||
background-color: var(--color-pink);
|
||||
}
|
||||
|
||||
footer input:checked + label:hover {
|
||||
background-color: var(--color-teal);
|
||||
}
|
||||
}
|
||||
|
||||
footer input:focus-visible + label,
|
||||
footer input:focus-visible + label i {
|
||||
color: var(--color-bg);
|
||||
background-color: var(--color-pink);
|
||||
border-color: var(--color-pink);
|
||||
}
|
||||
|
||||
footer input:checked:focus-visible + label,
|
||||
footer input:checked:focus-visible + label i {
|
||||
color: var(--color-bg);
|
||||
background-color: var(--color-teal);
|
||||
border-color: var(--color-teal);
|
||||
}
|
||||
|
||||
footer label:active {
|
||||
top: .09em;
|
||||
left: .09em;
|
||||
box-shadow: .05em .05em var(--color-shadow);
|
||||
}
|
||||
|
||||
label.theme-light {
|
||||
border-top-left-radius: 1rem;
|
||||
border-bottom-left-radius: 1rem;
|
||||
border-right: none;
|
||||
padding-left: .35rem;
|
||||
}
|
||||
|
||||
label.theme-auto {
|
||||
}
|
||||
|
||||
label.theme-dark {
|
||||
border-top-right-radius: 1rem;
|
||||
border-bottom-right-radius: 1rem;
|
||||
border-left: none;
|
||||
padding-right: .35rem;
|
||||
}
|
||||
|
||||
footer input {
|
||||
/* To allow screen reader to still access these. */
|
||||
/* From https://lyra.horse/blog/2025/08/you-dont-need-js/ */
|
||||
opacity: 0;
|
||||
position: absolute;
|
||||
pointer-events: none;
|
||||
}
|
||||
|
||||
/* Pagination */
|
||||
.pagination,
|
||||
.pagination li {
|
||||
@@ -1055,7 +1167,43 @@ pre[class*=language-]::selection {
|
||||
}
|
||||
}</style>
|
||||
|
||||
<script type="module"></script>
|
||||
|
||||
|
||||
<script type="module">const THEME = "theme";
|
||||
|
||||
const saveTheme = (themeValue) => {
|
||||
localStorage.setItem(THEME, themeValue);
|
||||
};
|
||||
|
||||
const themeLight = document.getElementById("theme-light");
|
||||
themeLight.addEventListener("input", (e) => {
|
||||
saveTheme(themeLight.value);
|
||||
});
|
||||
|
||||
const themeAuto = document.getElementById("theme-auto");
|
||||
themeAuto.addEventListener("input", (e) => {
|
||||
saveTheme(themeAuto.auto);
|
||||
});
|
||||
|
||||
const themeDark = document.getElementById("theme-dark");
|
||||
themeDark.addEventListener("input", (e) => {
|
||||
saveTheme(themeDark.value);
|
||||
});
|
||||
|
||||
var currentThemeValue = localStorage.getItem(THEME);
|
||||
switch (currentThemeValue) {
|
||||
case "light":
|
||||
themeLight.checked = true;
|
||||
break;
|
||||
case "auto":
|
||||
themeAuto.checked = true;
|
||||
break;
|
||||
case "dark":
|
||||
themeDark.checked = true;
|
||||
break;
|
||||
default:
|
||||
themeAuto.checked = true;
|
||||
}</script>
|
||||
|
||||
</head>
|
||||
<body>
|
||||
@@ -1359,9 +1507,30 @@ pre[class*=language-]::selection {
|
||||
</a>
|
||||
</li>
|
||||
</ul>
|
||||
|
||||
<fieldset id="theme">
|
||||
<legend>color scheme</legend>
|
||||
|
||||
<input type="radio" id="theme-light" name="theme" value="light">
|
||||
<label class="theme-light" for="theme-light">
|
||||
<i class="fa-regular fa-sun" aria-hidden="true"></i>
|
||||
light
|
||||
</label>
|
||||
|
||||
<input type="radio" id="theme-auto" name="theme" value="auto">
|
||||
<label class="theme-auto" for="theme-auto">
|
||||
auto
|
||||
</label>
|
||||
|
||||
<input type="radio" id="theme-dark" name="theme" value="dark">
|
||||
<label class="theme-dark" for="theme-dark">
|
||||
dark
|
||||
<i class="fa-regular fa-moon" aria-hidden="true"></i>
|
||||
</label>
|
||||
</fieldset>
|
||||
</footer>
|
||||
|
||||
|
||||
<!-- This page `/gallery/3/` was built on 2026-09-08T23:18:36.598Z -->
|
||||
<!-- This page `/gallery/3/` was built on 2026-09-09T20:38:07.208Z -->
|
||||
</body>
|
||||
</html>
|
||||
|
||||
+172
-3
@@ -311,6 +311,13 @@
|
||||
--color-grey: light-dark(var(--color-grey-dark), var(--color-grey-light));
|
||||
}
|
||||
|
||||
:root:has(#theme-light:checked) {
|
||||
color-scheme: light;
|
||||
}
|
||||
:root:has(#theme-dark:checked) {
|
||||
color-scheme: dark;
|
||||
}
|
||||
|
||||
/* Base */
|
||||
|
||||
* {
|
||||
@@ -454,7 +461,7 @@ ul, ol, dl, li {
|
||||
}
|
||||
|
||||
li {
|
||||
line-height: 1.2 5;
|
||||
line-height: 1.2;
|
||||
margin-top: .65rem;
|
||||
margin-bottom: .65rem;
|
||||
}
|
||||
@@ -793,6 +800,111 @@ footer a:focus-visible {
|
||||
outline-color: var(--color-pink);
|
||||
}
|
||||
|
||||
/* color picker */
|
||||
#theme {
|
||||
display: flex;
|
||||
justify-content: center;
|
||||
margin: .5rem auto 0;
|
||||
padding: 0 .75rem .5rem;
|
||||
width: fit-content;
|
||||
border: .125rem solid var(--color-teal);
|
||||
border-radius: 2rem;
|
||||
}
|
||||
|
||||
#theme legend {
|
||||
margin: 0 auto;
|
||||
color: var(--color-teal);
|
||||
}
|
||||
|
||||
footer label {
|
||||
cursor: pointer;
|
||||
border: .125rem solid var(--color-pink);
|
||||
padding: 0 .25rem;
|
||||
color: var(--color-pink);
|
||||
background-color: var(--color-bg); /* this stops the box shadows from showing through */
|
||||
box-shadow: .15em .15em var(--color-shadow);
|
||||
/* Click animation handling */
|
||||
position: relative;
|
||||
top: 0;
|
||||
left: 0;
|
||||
transition: top .05s ease-in, left .05s ease-in;
|
||||
}
|
||||
|
||||
footer input:checked + label {
|
||||
color: var(--color-blue);
|
||||
border-color: var(--color-blue);
|
||||
}
|
||||
|
||||
footer label i {
|
||||
color: var(--color-teal);
|
||||
}
|
||||
|
||||
footer input:checked + label i {
|
||||
color: var(--color-pink);
|
||||
}
|
||||
|
||||
@media (any-hover: hover) {
|
||||
footer label:hover,
|
||||
footer input:checked + label:hover,
|
||||
footer label:hover i,
|
||||
footer input:checked + label:hover i {
|
||||
color: var(--color-bg);
|
||||
}
|
||||
|
||||
footer label:hover {
|
||||
background-color: var(--color-pink);
|
||||
}
|
||||
|
||||
footer input:checked + label:hover {
|
||||
background-color: var(--color-teal);
|
||||
}
|
||||
}
|
||||
|
||||
footer input:focus-visible + label,
|
||||
footer input:focus-visible + label i {
|
||||
color: var(--color-bg);
|
||||
background-color: var(--color-pink);
|
||||
border-color: var(--color-pink);
|
||||
}
|
||||
|
||||
footer input:checked:focus-visible + label,
|
||||
footer input:checked:focus-visible + label i {
|
||||
color: var(--color-bg);
|
||||
background-color: var(--color-teal);
|
||||
border-color: var(--color-teal);
|
||||
}
|
||||
|
||||
footer label:active {
|
||||
top: .09em;
|
||||
left: .09em;
|
||||
box-shadow: .05em .05em var(--color-shadow);
|
||||
}
|
||||
|
||||
label.theme-light {
|
||||
border-top-left-radius: 1rem;
|
||||
border-bottom-left-radius: 1rem;
|
||||
border-right: none;
|
||||
padding-left: .35rem;
|
||||
}
|
||||
|
||||
label.theme-auto {
|
||||
}
|
||||
|
||||
label.theme-dark {
|
||||
border-top-right-radius: 1rem;
|
||||
border-bottom-right-radius: 1rem;
|
||||
border-left: none;
|
||||
padding-right: .35rem;
|
||||
}
|
||||
|
||||
footer input {
|
||||
/* To allow screen reader to still access these. */
|
||||
/* From https://lyra.horse/blog/2025/08/you-dont-need-js/ */
|
||||
opacity: 0;
|
||||
position: absolute;
|
||||
pointer-events: none;
|
||||
}
|
||||
|
||||
/* Pagination */
|
||||
.pagination,
|
||||
.pagination li {
|
||||
@@ -1055,7 +1167,43 @@ pre[class*=language-]::selection {
|
||||
}
|
||||
}</style>
|
||||
|
||||
<script type="module"></script>
|
||||
|
||||
|
||||
<script type="module">const THEME = "theme";
|
||||
|
||||
const saveTheme = (themeValue) => {
|
||||
localStorage.setItem(THEME, themeValue);
|
||||
};
|
||||
|
||||
const themeLight = document.getElementById("theme-light");
|
||||
themeLight.addEventListener("input", (e) => {
|
||||
saveTheme(themeLight.value);
|
||||
});
|
||||
|
||||
const themeAuto = document.getElementById("theme-auto");
|
||||
themeAuto.addEventListener("input", (e) => {
|
||||
saveTheme(themeAuto.auto);
|
||||
});
|
||||
|
||||
const themeDark = document.getElementById("theme-dark");
|
||||
themeDark.addEventListener("input", (e) => {
|
||||
saveTheme(themeDark.value);
|
||||
});
|
||||
|
||||
var currentThemeValue = localStorage.getItem(THEME);
|
||||
switch (currentThemeValue) {
|
||||
case "light":
|
||||
themeLight.checked = true;
|
||||
break;
|
||||
case "auto":
|
||||
themeAuto.checked = true;
|
||||
break;
|
||||
case "dark":
|
||||
themeDark.checked = true;
|
||||
break;
|
||||
default:
|
||||
themeAuto.checked = true;
|
||||
}</script>
|
||||
|
||||
</head>
|
||||
<body>
|
||||
@@ -1357,9 +1505,30 @@ pre[class*=language-]::selection {
|
||||
</a>
|
||||
</li>
|
||||
</ul>
|
||||
|
||||
<fieldset id="theme">
|
||||
<legend>color scheme</legend>
|
||||
|
||||
<input type="radio" id="theme-light" name="theme" value="light">
|
||||
<label class="theme-light" for="theme-light">
|
||||
<i class="fa-regular fa-sun" aria-hidden="true"></i>
|
||||
light
|
||||
</label>
|
||||
|
||||
<input type="radio" id="theme-auto" name="theme" value="auto">
|
||||
<label class="theme-auto" for="theme-auto">
|
||||
auto
|
||||
</label>
|
||||
|
||||
<input type="radio" id="theme-dark" name="theme" value="dark">
|
||||
<label class="theme-dark" for="theme-dark">
|
||||
dark
|
||||
<i class="fa-regular fa-moon" aria-hidden="true"></i>
|
||||
</label>
|
||||
</fieldset>
|
||||
</footer>
|
||||
|
||||
|
||||
<!-- This page `/gallery/4/` was built on 2026-09-08T23:18:36.918Z -->
|
||||
<!-- This page `/gallery/4/` was built on 2026-09-09T20:38:07.695Z -->
|
||||
</body>
|
||||
</html>
|
||||
|
||||
+172
-3
@@ -311,6 +311,13 @@
|
||||
--color-grey: light-dark(var(--color-grey-dark), var(--color-grey-light));
|
||||
}
|
||||
|
||||
:root:has(#theme-light:checked) {
|
||||
color-scheme: light;
|
||||
}
|
||||
:root:has(#theme-dark:checked) {
|
||||
color-scheme: dark;
|
||||
}
|
||||
|
||||
/* Base */
|
||||
|
||||
* {
|
||||
@@ -454,7 +461,7 @@ ul, ol, dl, li {
|
||||
}
|
||||
|
||||
li {
|
||||
line-height: 1.2 5;
|
||||
line-height: 1.2;
|
||||
margin-top: .65rem;
|
||||
margin-bottom: .65rem;
|
||||
}
|
||||
@@ -793,6 +800,111 @@ footer a:focus-visible {
|
||||
outline-color: var(--color-pink);
|
||||
}
|
||||
|
||||
/* color picker */
|
||||
#theme {
|
||||
display: flex;
|
||||
justify-content: center;
|
||||
margin: .5rem auto 0;
|
||||
padding: 0 .75rem .5rem;
|
||||
width: fit-content;
|
||||
border: .125rem solid var(--color-teal);
|
||||
border-radius: 2rem;
|
||||
}
|
||||
|
||||
#theme legend {
|
||||
margin: 0 auto;
|
||||
color: var(--color-teal);
|
||||
}
|
||||
|
||||
footer label {
|
||||
cursor: pointer;
|
||||
border: .125rem solid var(--color-pink);
|
||||
padding: 0 .25rem;
|
||||
color: var(--color-pink);
|
||||
background-color: var(--color-bg); /* this stops the box shadows from showing through */
|
||||
box-shadow: .15em .15em var(--color-shadow);
|
||||
/* Click animation handling */
|
||||
position: relative;
|
||||
top: 0;
|
||||
left: 0;
|
||||
transition: top .05s ease-in, left .05s ease-in;
|
||||
}
|
||||
|
||||
footer input:checked + label {
|
||||
color: var(--color-blue);
|
||||
border-color: var(--color-blue);
|
||||
}
|
||||
|
||||
footer label i {
|
||||
color: var(--color-teal);
|
||||
}
|
||||
|
||||
footer input:checked + label i {
|
||||
color: var(--color-pink);
|
||||
}
|
||||
|
||||
@media (any-hover: hover) {
|
||||
footer label:hover,
|
||||
footer input:checked + label:hover,
|
||||
footer label:hover i,
|
||||
footer input:checked + label:hover i {
|
||||
color: var(--color-bg);
|
||||
}
|
||||
|
||||
footer label:hover {
|
||||
background-color: var(--color-pink);
|
||||
}
|
||||
|
||||
footer input:checked + label:hover {
|
||||
background-color: var(--color-teal);
|
||||
}
|
||||
}
|
||||
|
||||
footer input:focus-visible + label,
|
||||
footer input:focus-visible + label i {
|
||||
color: var(--color-bg);
|
||||
background-color: var(--color-pink);
|
||||
border-color: var(--color-pink);
|
||||
}
|
||||
|
||||
footer input:checked:focus-visible + label,
|
||||
footer input:checked:focus-visible + label i {
|
||||
color: var(--color-bg);
|
||||
background-color: var(--color-teal);
|
||||
border-color: var(--color-teal);
|
||||
}
|
||||
|
||||
footer label:active {
|
||||
top: .09em;
|
||||
left: .09em;
|
||||
box-shadow: .05em .05em var(--color-shadow);
|
||||
}
|
||||
|
||||
label.theme-light {
|
||||
border-top-left-radius: 1rem;
|
||||
border-bottom-left-radius: 1rem;
|
||||
border-right: none;
|
||||
padding-left: .35rem;
|
||||
}
|
||||
|
||||
label.theme-auto {
|
||||
}
|
||||
|
||||
label.theme-dark {
|
||||
border-top-right-radius: 1rem;
|
||||
border-bottom-right-radius: 1rem;
|
||||
border-left: none;
|
||||
padding-right: .35rem;
|
||||
}
|
||||
|
||||
footer input {
|
||||
/* To allow screen reader to still access these. */
|
||||
/* From https://lyra.horse/blog/2025/08/you-dont-need-js/ */
|
||||
opacity: 0;
|
||||
position: absolute;
|
||||
pointer-events: none;
|
||||
}
|
||||
|
||||
/* Pagination */
|
||||
.pagination,
|
||||
.pagination li {
|
||||
@@ -1055,7 +1167,43 @@ pre[class*=language-]::selection {
|
||||
}
|
||||
}</style>
|
||||
|
||||
<script type="module"></script>
|
||||
|
||||
|
||||
<script type="module">const THEME = "theme";
|
||||
|
||||
const saveTheme = (themeValue) => {
|
||||
localStorage.setItem(THEME, themeValue);
|
||||
};
|
||||
|
||||
const themeLight = document.getElementById("theme-light");
|
||||
themeLight.addEventListener("input", (e) => {
|
||||
saveTheme(themeLight.value);
|
||||
});
|
||||
|
||||
const themeAuto = document.getElementById("theme-auto");
|
||||
themeAuto.addEventListener("input", (e) => {
|
||||
saveTheme(themeAuto.auto);
|
||||
});
|
||||
|
||||
const themeDark = document.getElementById("theme-dark");
|
||||
themeDark.addEventListener("input", (e) => {
|
||||
saveTheme(themeDark.value);
|
||||
});
|
||||
|
||||
var currentThemeValue = localStorage.getItem(THEME);
|
||||
switch (currentThemeValue) {
|
||||
case "light":
|
||||
themeLight.checked = true;
|
||||
break;
|
||||
case "auto":
|
||||
themeAuto.checked = true;
|
||||
break;
|
||||
case "dark":
|
||||
themeDark.checked = true;
|
||||
break;
|
||||
default:
|
||||
themeAuto.checked = true;
|
||||
}</script>
|
||||
|
||||
</head>
|
||||
<body>
|
||||
@@ -1365,9 +1513,30 @@ pre[class*=language-]::selection {
|
||||
</a>
|
||||
</li>
|
||||
</ul>
|
||||
|
||||
<fieldset id="theme">
|
||||
<legend>color scheme</legend>
|
||||
|
||||
<input type="radio" id="theme-light" name="theme" value="light">
|
||||
<label class="theme-light" for="theme-light">
|
||||
<i class="fa-regular fa-sun" aria-hidden="true"></i>
|
||||
light
|
||||
</label>
|
||||
|
||||
<input type="radio" id="theme-auto" name="theme" value="auto">
|
||||
<label class="theme-auto" for="theme-auto">
|
||||
auto
|
||||
</label>
|
||||
|
||||
<input type="radio" id="theme-dark" name="theme" value="dark">
|
||||
<label class="theme-dark" for="theme-dark">
|
||||
dark
|
||||
<i class="fa-regular fa-moon" aria-hidden="true"></i>
|
||||
</label>
|
||||
</fieldset>
|
||||
</footer>
|
||||
|
||||
|
||||
<!-- This page `/gallery/5/` was built on 2026-09-08T23:18:37.403Z -->
|
||||
<!-- This page `/gallery/5/` was built on 2026-09-09T20:38:08.056Z -->
|
||||
</body>
|
||||
</html>
|
||||
|
||||
+172
-3
@@ -311,6 +311,13 @@
|
||||
--color-grey: light-dark(var(--color-grey-dark), var(--color-grey-light));
|
||||
}
|
||||
|
||||
:root:has(#theme-light:checked) {
|
||||
color-scheme: light;
|
||||
}
|
||||
:root:has(#theme-dark:checked) {
|
||||
color-scheme: dark;
|
||||
}
|
||||
|
||||
/* Base */
|
||||
|
||||
* {
|
||||
@@ -454,7 +461,7 @@ ul, ol, dl, li {
|
||||
}
|
||||
|
||||
li {
|
||||
line-height: 1.2 5;
|
||||
line-height: 1.2;
|
||||
margin-top: .65rem;
|
||||
margin-bottom: .65rem;
|
||||
}
|
||||
@@ -793,6 +800,111 @@ footer a:focus-visible {
|
||||
outline-color: var(--color-pink);
|
||||
}
|
||||
|
||||
/* color picker */
|
||||
#theme {
|
||||
display: flex;
|
||||
justify-content: center;
|
||||
margin: .5rem auto 0;
|
||||
padding: 0 .75rem .5rem;
|
||||
width: fit-content;
|
||||
border: .125rem solid var(--color-teal);
|
||||
border-radius: 2rem;
|
||||
}
|
||||
|
||||
#theme legend {
|
||||
margin: 0 auto;
|
||||
color: var(--color-teal);
|
||||
}
|
||||
|
||||
footer label {
|
||||
cursor: pointer;
|
||||
border: .125rem solid var(--color-pink);
|
||||
padding: 0 .25rem;
|
||||
color: var(--color-pink);
|
||||
background-color: var(--color-bg); /* this stops the box shadows from showing through */
|
||||
box-shadow: .15em .15em var(--color-shadow);
|
||||
/* Click animation handling */
|
||||
position: relative;
|
||||
top: 0;
|
||||
left: 0;
|
||||
transition: top .05s ease-in, left .05s ease-in;
|
||||
}
|
||||
|
||||
footer input:checked + label {
|
||||
color: var(--color-blue);
|
||||
border-color: var(--color-blue);
|
||||
}
|
||||
|
||||
footer label i {
|
||||
color: var(--color-teal);
|
||||
}
|
||||
|
||||
footer input:checked + label i {
|
||||
color: var(--color-pink);
|
||||
}
|
||||
|
||||
@media (any-hover: hover) {
|
||||
footer label:hover,
|
||||
footer input:checked + label:hover,
|
||||
footer label:hover i,
|
||||
footer input:checked + label:hover i {
|
||||
color: var(--color-bg);
|
||||
}
|
||||
|
||||
footer label:hover {
|
||||
background-color: var(--color-pink);
|
||||
}
|
||||
|
||||
footer input:checked + label:hover {
|
||||
background-color: var(--color-teal);
|
||||
}
|
||||
}
|
||||
|
||||
footer input:focus-visible + label,
|
||||
footer input:focus-visible + label i {
|
||||
color: var(--color-bg);
|
||||
background-color: var(--color-pink);
|
||||
border-color: var(--color-pink);
|
||||
}
|
||||
|
||||
footer input:checked:focus-visible + label,
|
||||
footer input:checked:focus-visible + label i {
|
||||
color: var(--color-bg);
|
||||
background-color: var(--color-teal);
|
||||
border-color: var(--color-teal);
|
||||
}
|
||||
|
||||
footer label:active {
|
||||
top: .09em;
|
||||
left: .09em;
|
||||
box-shadow: .05em .05em var(--color-shadow);
|
||||
}
|
||||
|
||||
label.theme-light {
|
||||
border-top-left-radius: 1rem;
|
||||
border-bottom-left-radius: 1rem;
|
||||
border-right: none;
|
||||
padding-left: .35rem;
|
||||
}
|
||||
|
||||
label.theme-auto {
|
||||
}
|
||||
|
||||
label.theme-dark {
|
||||
border-top-right-radius: 1rem;
|
||||
border-bottom-right-radius: 1rem;
|
||||
border-left: none;
|
||||
padding-right: .35rem;
|
||||
}
|
||||
|
||||
footer input {
|
||||
/* To allow screen reader to still access these. */
|
||||
/* From https://lyra.horse/blog/2025/08/you-dont-need-js/ */
|
||||
opacity: 0;
|
||||
position: absolute;
|
||||
pointer-events: none;
|
||||
}
|
||||
|
||||
/* Pagination */
|
||||
.pagination,
|
||||
.pagination li {
|
||||
@@ -1055,7 +1167,43 @@ pre[class*=language-]::selection {
|
||||
}
|
||||
}</style>
|
||||
|
||||
<script type="module"></script>
|
||||
|
||||
|
||||
<script type="module">const THEME = "theme";
|
||||
|
||||
const saveTheme = (themeValue) => {
|
||||
localStorage.setItem(THEME, themeValue);
|
||||
};
|
||||
|
||||
const themeLight = document.getElementById("theme-light");
|
||||
themeLight.addEventListener("input", (e) => {
|
||||
saveTheme(themeLight.value);
|
||||
});
|
||||
|
||||
const themeAuto = document.getElementById("theme-auto");
|
||||
themeAuto.addEventListener("input", (e) => {
|
||||
saveTheme(themeAuto.auto);
|
||||
});
|
||||
|
||||
const themeDark = document.getElementById("theme-dark");
|
||||
themeDark.addEventListener("input", (e) => {
|
||||
saveTheme(themeDark.value);
|
||||
});
|
||||
|
||||
var currentThemeValue = localStorage.getItem(THEME);
|
||||
switch (currentThemeValue) {
|
||||
case "light":
|
||||
themeLight.checked = true;
|
||||
break;
|
||||
case "auto":
|
||||
themeAuto.checked = true;
|
||||
break;
|
||||
case "dark":
|
||||
themeDark.checked = true;
|
||||
break;
|
||||
default:
|
||||
themeAuto.checked = true;
|
||||
}</script>
|
||||
|
||||
</head>
|
||||
<body>
|
||||
@@ -1353,9 +1501,30 @@ pre[class*=language-]::selection {
|
||||
</a>
|
||||
</li>
|
||||
</ul>
|
||||
|
||||
<fieldset id="theme">
|
||||
<legend>color scheme</legend>
|
||||
|
||||
<input type="radio" id="theme-light" name="theme" value="light">
|
||||
<label class="theme-light" for="theme-light">
|
||||
<i class="fa-regular fa-sun" aria-hidden="true"></i>
|
||||
light
|
||||
</label>
|
||||
|
||||
<input type="radio" id="theme-auto" name="theme" value="auto">
|
||||
<label class="theme-auto" for="theme-auto">
|
||||
auto
|
||||
</label>
|
||||
|
||||
<input type="radio" id="theme-dark" name="theme" value="dark">
|
||||
<label class="theme-dark" for="theme-dark">
|
||||
dark
|
||||
<i class="fa-regular fa-moon" aria-hidden="true"></i>
|
||||
</label>
|
||||
</fieldset>
|
||||
</footer>
|
||||
|
||||
|
||||
<!-- This page `/gallery/6/` was built on 2026-09-08T23:18:37.812Z -->
|
||||
<!-- This page `/gallery/6/` was built on 2026-09-09T20:38:08.478Z -->
|
||||
</body>
|
||||
</html>
|
||||
|
||||
+172
-3
@@ -311,6 +311,13 @@
|
||||
--color-grey: light-dark(var(--color-grey-dark), var(--color-grey-light));
|
||||
}
|
||||
|
||||
:root:has(#theme-light:checked) {
|
||||
color-scheme: light;
|
||||
}
|
||||
:root:has(#theme-dark:checked) {
|
||||
color-scheme: dark;
|
||||
}
|
||||
|
||||
/* Base */
|
||||
|
||||
* {
|
||||
@@ -454,7 +461,7 @@ ul, ol, dl, li {
|
||||
}
|
||||
|
||||
li {
|
||||
line-height: 1.2 5;
|
||||
line-height: 1.2;
|
||||
margin-top: .65rem;
|
||||
margin-bottom: .65rem;
|
||||
}
|
||||
@@ -793,6 +800,111 @@ footer a:focus-visible {
|
||||
outline-color: var(--color-pink);
|
||||
}
|
||||
|
||||
/* color picker */
|
||||
#theme {
|
||||
display: flex;
|
||||
justify-content: center;
|
||||
margin: .5rem auto 0;
|
||||
padding: 0 .75rem .5rem;
|
||||
width: fit-content;
|
||||
border: .125rem solid var(--color-teal);
|
||||
border-radius: 2rem;
|
||||
}
|
||||
|
||||
#theme legend {
|
||||
margin: 0 auto;
|
||||
color: var(--color-teal);
|
||||
}
|
||||
|
||||
footer label {
|
||||
cursor: pointer;
|
||||
border: .125rem solid var(--color-pink);
|
||||
padding: 0 .25rem;
|
||||
color: var(--color-pink);
|
||||
background-color: var(--color-bg); /* this stops the box shadows from showing through */
|
||||
box-shadow: .15em .15em var(--color-shadow);
|
||||
/* Click animation handling */
|
||||
position: relative;
|
||||
top: 0;
|
||||
left: 0;
|
||||
transition: top .05s ease-in, left .05s ease-in;
|
||||
}
|
||||
|
||||
footer input:checked + label {
|
||||
color: var(--color-blue);
|
||||
border-color: var(--color-blue);
|
||||
}
|
||||
|
||||
footer label i {
|
||||
color: var(--color-teal);
|
||||
}
|
||||
|
||||
footer input:checked + label i {
|
||||
color: var(--color-pink);
|
||||
}
|
||||
|
||||
@media (any-hover: hover) {
|
||||
footer label:hover,
|
||||
footer input:checked + label:hover,
|
||||
footer label:hover i,
|
||||
footer input:checked + label:hover i {
|
||||
color: var(--color-bg);
|
||||
}
|
||||
|
||||
footer label:hover {
|
||||
background-color: var(--color-pink);
|
||||
}
|
||||
|
||||
footer input:checked + label:hover {
|
||||
background-color: var(--color-teal);
|
||||
}
|
||||
}
|
||||
|
||||
footer input:focus-visible + label,
|
||||
footer input:focus-visible + label i {
|
||||
color: var(--color-bg);
|
||||
background-color: var(--color-pink);
|
||||
border-color: var(--color-pink);
|
||||
}
|
||||
|
||||
footer input:checked:focus-visible + label,
|
||||
footer input:checked:focus-visible + label i {
|
||||
color: var(--color-bg);
|
||||
background-color: var(--color-teal);
|
||||
border-color: var(--color-teal);
|
||||
}
|
||||
|
||||
footer label:active {
|
||||
top: .09em;
|
||||
left: .09em;
|
||||
box-shadow: .05em .05em var(--color-shadow);
|
||||
}
|
||||
|
||||
label.theme-light {
|
||||
border-top-left-radius: 1rem;
|
||||
border-bottom-left-radius: 1rem;
|
||||
border-right: none;
|
||||
padding-left: .35rem;
|
||||
}
|
||||
|
||||
label.theme-auto {
|
||||
}
|
||||
|
||||
label.theme-dark {
|
||||
border-top-right-radius: 1rem;
|
||||
border-bottom-right-radius: 1rem;
|
||||
border-left: none;
|
||||
padding-right: .35rem;
|
||||
}
|
||||
|
||||
footer input {
|
||||
/* To allow screen reader to still access these. */
|
||||
/* From https://lyra.horse/blog/2025/08/you-dont-need-js/ */
|
||||
opacity: 0;
|
||||
position: absolute;
|
||||
pointer-events: none;
|
||||
}
|
||||
|
||||
/* Pagination */
|
||||
.pagination,
|
||||
.pagination li {
|
||||
@@ -1055,7 +1167,43 @@ pre[class*=language-]::selection {
|
||||
}
|
||||
}</style>
|
||||
|
||||
<script type="module"></script>
|
||||
|
||||
|
||||
<script type="module">const THEME = "theme";
|
||||
|
||||
const saveTheme = (themeValue) => {
|
||||
localStorage.setItem(THEME, themeValue);
|
||||
};
|
||||
|
||||
const themeLight = document.getElementById("theme-light");
|
||||
themeLight.addEventListener("input", (e) => {
|
||||
saveTheme(themeLight.value);
|
||||
});
|
||||
|
||||
const themeAuto = document.getElementById("theme-auto");
|
||||
themeAuto.addEventListener("input", (e) => {
|
||||
saveTheme(themeAuto.auto);
|
||||
});
|
||||
|
||||
const themeDark = document.getElementById("theme-dark");
|
||||
themeDark.addEventListener("input", (e) => {
|
||||
saveTheme(themeDark.value);
|
||||
});
|
||||
|
||||
var currentThemeValue = localStorage.getItem(THEME);
|
||||
switch (currentThemeValue) {
|
||||
case "light":
|
||||
themeLight.checked = true;
|
||||
break;
|
||||
case "auto":
|
||||
themeAuto.checked = true;
|
||||
break;
|
||||
case "dark":
|
||||
themeDark.checked = true;
|
||||
break;
|
||||
default:
|
||||
themeAuto.checked = true;
|
||||
}</script>
|
||||
|
||||
</head>
|
||||
<body>
|
||||
@@ -1399,9 +1547,30 @@ pre[class*=language-]::selection {
|
||||
</a>
|
||||
</li>
|
||||
</ul>
|
||||
|
||||
<fieldset id="theme">
|
||||
<legend>color scheme</legend>
|
||||
|
||||
<input type="radio" id="theme-light" name="theme" value="light">
|
||||
<label class="theme-light" for="theme-light">
|
||||
<i class="fa-regular fa-sun" aria-hidden="true"></i>
|
||||
light
|
||||
</label>
|
||||
|
||||
<input type="radio" id="theme-auto" name="theme" value="auto">
|
||||
<label class="theme-auto" for="theme-auto">
|
||||
auto
|
||||
</label>
|
||||
|
||||
<input type="radio" id="theme-dark" name="theme" value="dark">
|
||||
<label class="theme-dark" for="theme-dark">
|
||||
dark
|
||||
<i class="fa-regular fa-moon" aria-hidden="true"></i>
|
||||
</label>
|
||||
</fieldset>
|
||||
</footer>
|
||||
|
||||
|
||||
<!-- This page `/gallery/7/` was built on 2026-09-08T23:18:38.196Z -->
|
||||
<!-- This page `/gallery/7/` was built on 2026-09-09T20:38:08.920Z -->
|
||||
</body>
|
||||
</html>
|
||||
|
||||
+172
-3
@@ -311,6 +311,13 @@
|
||||
--color-grey: light-dark(var(--color-grey-dark), var(--color-grey-light));
|
||||
}
|
||||
|
||||
:root:has(#theme-light:checked) {
|
||||
color-scheme: light;
|
||||
}
|
||||
:root:has(#theme-dark:checked) {
|
||||
color-scheme: dark;
|
||||
}
|
||||
|
||||
/* Base */
|
||||
|
||||
* {
|
||||
@@ -454,7 +461,7 @@ ul, ol, dl, li {
|
||||
}
|
||||
|
||||
li {
|
||||
line-height: 1.2 5;
|
||||
line-height: 1.2;
|
||||
margin-top: .65rem;
|
||||
margin-bottom: .65rem;
|
||||
}
|
||||
@@ -793,6 +800,111 @@ footer a:focus-visible {
|
||||
outline-color: var(--color-pink);
|
||||
}
|
||||
|
||||
/* color picker */
|
||||
#theme {
|
||||
display: flex;
|
||||
justify-content: center;
|
||||
margin: .5rem auto 0;
|
||||
padding: 0 .75rem .5rem;
|
||||
width: fit-content;
|
||||
border: .125rem solid var(--color-teal);
|
||||
border-radius: 2rem;
|
||||
}
|
||||
|
||||
#theme legend {
|
||||
margin: 0 auto;
|
||||
color: var(--color-teal);
|
||||
}
|
||||
|
||||
footer label {
|
||||
cursor: pointer;
|
||||
border: .125rem solid var(--color-pink);
|
||||
padding: 0 .25rem;
|
||||
color: var(--color-pink);
|
||||
background-color: var(--color-bg); /* this stops the box shadows from showing through */
|
||||
box-shadow: .15em .15em var(--color-shadow);
|
||||
/* Click animation handling */
|
||||
position: relative;
|
||||
top: 0;
|
||||
left: 0;
|
||||
transition: top .05s ease-in, left .05s ease-in;
|
||||
}
|
||||
|
||||
footer input:checked + label {
|
||||
color: var(--color-blue);
|
||||
border-color: var(--color-blue);
|
||||
}
|
||||
|
||||
footer label i {
|
||||
color: var(--color-teal);
|
||||
}
|
||||
|
||||
footer input:checked + label i {
|
||||
color: var(--color-pink);
|
||||
}
|
||||
|
||||
@media (any-hover: hover) {
|
||||
footer label:hover,
|
||||
footer input:checked + label:hover,
|
||||
footer label:hover i,
|
||||
footer input:checked + label:hover i {
|
||||
color: var(--color-bg);
|
||||
}
|
||||
|
||||
footer label:hover {
|
||||
background-color: var(--color-pink);
|
||||
}
|
||||
|
||||
footer input:checked + label:hover {
|
||||
background-color: var(--color-teal);
|
||||
}
|
||||
}
|
||||
|
||||
footer input:focus-visible + label,
|
||||
footer input:focus-visible + label i {
|
||||
color: var(--color-bg);
|
||||
background-color: var(--color-pink);
|
||||
border-color: var(--color-pink);
|
||||
}
|
||||
|
||||
footer input:checked:focus-visible + label,
|
||||
footer input:checked:focus-visible + label i {
|
||||
color: var(--color-bg);
|
||||
background-color: var(--color-teal);
|
||||
border-color: var(--color-teal);
|
||||
}
|
||||
|
||||
footer label:active {
|
||||
top: .09em;
|
||||
left: .09em;
|
||||
box-shadow: .05em .05em var(--color-shadow);
|
||||
}
|
||||
|
||||
label.theme-light {
|
||||
border-top-left-radius: 1rem;
|
||||
border-bottom-left-radius: 1rem;
|
||||
border-right: none;
|
||||
padding-left: .35rem;
|
||||
}
|
||||
|
||||
label.theme-auto {
|
||||
}
|
||||
|
||||
label.theme-dark {
|
||||
border-top-right-radius: 1rem;
|
||||
border-bottom-right-radius: 1rem;
|
||||
border-left: none;
|
||||
padding-right: .35rem;
|
||||
}
|
||||
|
||||
footer input {
|
||||
/* To allow screen reader to still access these. */
|
||||
/* From https://lyra.horse/blog/2025/08/you-dont-need-js/ */
|
||||
opacity: 0;
|
||||
position: absolute;
|
||||
pointer-events: none;
|
||||
}
|
||||
|
||||
/* Pagination */
|
||||
.pagination,
|
||||
.pagination li {
|
||||
@@ -1055,7 +1167,43 @@ pre[class*=language-]::selection {
|
||||
}
|
||||
}</style>
|
||||
|
||||
<script type="module"></script>
|
||||
|
||||
|
||||
<script type="module">const THEME = "theme";
|
||||
|
||||
const saveTheme = (themeValue) => {
|
||||
localStorage.setItem(THEME, themeValue);
|
||||
};
|
||||
|
||||
const themeLight = document.getElementById("theme-light");
|
||||
themeLight.addEventListener("input", (e) => {
|
||||
saveTheme(themeLight.value);
|
||||
});
|
||||
|
||||
const themeAuto = document.getElementById("theme-auto");
|
||||
themeAuto.addEventListener("input", (e) => {
|
||||
saveTheme(themeAuto.auto);
|
||||
});
|
||||
|
||||
const themeDark = document.getElementById("theme-dark");
|
||||
themeDark.addEventListener("input", (e) => {
|
||||
saveTheme(themeDark.value);
|
||||
});
|
||||
|
||||
var currentThemeValue = localStorage.getItem(THEME);
|
||||
switch (currentThemeValue) {
|
||||
case "light":
|
||||
themeLight.checked = true;
|
||||
break;
|
||||
case "auto":
|
||||
themeAuto.checked = true;
|
||||
break;
|
||||
case "dark":
|
||||
themeDark.checked = true;
|
||||
break;
|
||||
default:
|
||||
themeAuto.checked = true;
|
||||
}</script>
|
||||
|
||||
</head>
|
||||
<body>
|
||||
@@ -1379,9 +1527,30 @@ pre[class*=language-]::selection {
|
||||
</a>
|
||||
</li>
|
||||
</ul>
|
||||
|
||||
<fieldset id="theme">
|
||||
<legend>color scheme</legend>
|
||||
|
||||
<input type="radio" id="theme-light" name="theme" value="light">
|
||||
<label class="theme-light" for="theme-light">
|
||||
<i class="fa-regular fa-sun" aria-hidden="true"></i>
|
||||
light
|
||||
</label>
|
||||
|
||||
<input type="radio" id="theme-auto" name="theme" value="auto">
|
||||
<label class="theme-auto" for="theme-auto">
|
||||
auto
|
||||
</label>
|
||||
|
||||
<input type="radio" id="theme-dark" name="theme" value="dark">
|
||||
<label class="theme-dark" for="theme-dark">
|
||||
dark
|
||||
<i class="fa-regular fa-moon" aria-hidden="true"></i>
|
||||
</label>
|
||||
</fieldset>
|
||||
</footer>
|
||||
|
||||
|
||||
<!-- This page `/gallery/8/` was built on 2026-09-08T23:18:38.621Z -->
|
||||
<!-- This page `/gallery/8/` was built on 2026-09-09T20:38:09.246Z -->
|
||||
</body>
|
||||
</html>
|
||||
|
||||
+172
-3
@@ -311,6 +311,13 @@
|
||||
--color-grey: light-dark(var(--color-grey-dark), var(--color-grey-light));
|
||||
}
|
||||
|
||||
:root:has(#theme-light:checked) {
|
||||
color-scheme: light;
|
||||
}
|
||||
:root:has(#theme-dark:checked) {
|
||||
color-scheme: dark;
|
||||
}
|
||||
|
||||
/* Base */
|
||||
|
||||
* {
|
||||
@@ -454,7 +461,7 @@ ul, ol, dl, li {
|
||||
}
|
||||
|
||||
li {
|
||||
line-height: 1.2 5;
|
||||
line-height: 1.2;
|
||||
margin-top: .65rem;
|
||||
margin-bottom: .65rem;
|
||||
}
|
||||
@@ -793,6 +800,111 @@ footer a:focus-visible {
|
||||
outline-color: var(--color-pink);
|
||||
}
|
||||
|
||||
/* color picker */
|
||||
#theme {
|
||||
display: flex;
|
||||
justify-content: center;
|
||||
margin: .5rem auto 0;
|
||||
padding: 0 .75rem .5rem;
|
||||
width: fit-content;
|
||||
border: .125rem solid var(--color-teal);
|
||||
border-radius: 2rem;
|
||||
}
|
||||
|
||||
#theme legend {
|
||||
margin: 0 auto;
|
||||
color: var(--color-teal);
|
||||
}
|
||||
|
||||
footer label {
|
||||
cursor: pointer;
|
||||
border: .125rem solid var(--color-pink);
|
||||
padding: 0 .25rem;
|
||||
color: var(--color-pink);
|
||||
background-color: var(--color-bg); /* this stops the box shadows from showing through */
|
||||
box-shadow: .15em .15em var(--color-shadow);
|
||||
/* Click animation handling */
|
||||
position: relative;
|
||||
top: 0;
|
||||
left: 0;
|
||||
transition: top .05s ease-in, left .05s ease-in;
|
||||
}
|
||||
|
||||
footer input:checked + label {
|
||||
color: var(--color-blue);
|
||||
border-color: var(--color-blue);
|
||||
}
|
||||
|
||||
footer label i {
|
||||
color: var(--color-teal);
|
||||
}
|
||||
|
||||
footer input:checked + label i {
|
||||
color: var(--color-pink);
|
||||
}
|
||||
|
||||
@media (any-hover: hover) {
|
||||
footer label:hover,
|
||||
footer input:checked + label:hover,
|
||||
footer label:hover i,
|
||||
footer input:checked + label:hover i {
|
||||
color: var(--color-bg);
|
||||
}
|
||||
|
||||
footer label:hover {
|
||||
background-color: var(--color-pink);
|
||||
}
|
||||
|
||||
footer input:checked + label:hover {
|
||||
background-color: var(--color-teal);
|
||||
}
|
||||
}
|
||||
|
||||
footer input:focus-visible + label,
|
||||
footer input:focus-visible + label i {
|
||||
color: var(--color-bg);
|
||||
background-color: var(--color-pink);
|
||||
border-color: var(--color-pink);
|
||||
}
|
||||
|
||||
footer input:checked:focus-visible + label,
|
||||
footer input:checked:focus-visible + label i {
|
||||
color: var(--color-bg);
|
||||
background-color: var(--color-teal);
|
||||
border-color: var(--color-teal);
|
||||
}
|
||||
|
||||
footer label:active {
|
||||
top: .09em;
|
||||
left: .09em;
|
||||
box-shadow: .05em .05em var(--color-shadow);
|
||||
}
|
||||
|
||||
label.theme-light {
|
||||
border-top-left-radius: 1rem;
|
||||
border-bottom-left-radius: 1rem;
|
||||
border-right: none;
|
||||
padding-left: .35rem;
|
||||
}
|
||||
|
||||
label.theme-auto {
|
||||
}
|
||||
|
||||
label.theme-dark {
|
||||
border-top-right-radius: 1rem;
|
||||
border-bottom-right-radius: 1rem;
|
||||
border-left: none;
|
||||
padding-right: .35rem;
|
||||
}
|
||||
|
||||
footer input {
|
||||
/* To allow screen reader to still access these. */
|
||||
/* From https://lyra.horse/blog/2025/08/you-dont-need-js/ */
|
||||
opacity: 0;
|
||||
position: absolute;
|
||||
pointer-events: none;
|
||||
}
|
||||
|
||||
/* Pagination */
|
||||
.pagination,
|
||||
.pagination li {
|
||||
@@ -1055,7 +1167,43 @@ pre[class*=language-]::selection {
|
||||
}
|
||||
}</style>
|
||||
|
||||
<script type="module"></script>
|
||||
|
||||
|
||||
<script type="module">const THEME = "theme";
|
||||
|
||||
const saveTheme = (themeValue) => {
|
||||
localStorage.setItem(THEME, themeValue);
|
||||
};
|
||||
|
||||
const themeLight = document.getElementById("theme-light");
|
||||
themeLight.addEventListener("input", (e) => {
|
||||
saveTheme(themeLight.value);
|
||||
});
|
||||
|
||||
const themeAuto = document.getElementById("theme-auto");
|
||||
themeAuto.addEventListener("input", (e) => {
|
||||
saveTheme(themeAuto.auto);
|
||||
});
|
||||
|
||||
const themeDark = document.getElementById("theme-dark");
|
||||
themeDark.addEventListener("input", (e) => {
|
||||
saveTheme(themeDark.value);
|
||||
});
|
||||
|
||||
var currentThemeValue = localStorage.getItem(THEME);
|
||||
switch (currentThemeValue) {
|
||||
case "light":
|
||||
themeLight.checked = true;
|
||||
break;
|
||||
case "auto":
|
||||
themeAuto.checked = true;
|
||||
break;
|
||||
case "dark":
|
||||
themeDark.checked = true;
|
||||
break;
|
||||
default:
|
||||
themeAuto.checked = true;
|
||||
}</script>
|
||||
|
||||
</head>
|
||||
<body>
|
||||
@@ -1397,9 +1545,30 @@ pre[class*=language-]::selection {
|
||||
</a>
|
||||
</li>
|
||||
</ul>
|
||||
|
||||
<fieldset id="theme">
|
||||
<legend>color scheme</legend>
|
||||
|
||||
<input type="radio" id="theme-light" name="theme" value="light">
|
||||
<label class="theme-light" for="theme-light">
|
||||
<i class="fa-regular fa-sun" aria-hidden="true"></i>
|
||||
light
|
||||
</label>
|
||||
|
||||
<input type="radio" id="theme-auto" name="theme" value="auto">
|
||||
<label class="theme-auto" for="theme-auto">
|
||||
auto
|
||||
</label>
|
||||
|
||||
<input type="radio" id="theme-dark" name="theme" value="dark">
|
||||
<label class="theme-dark" for="theme-dark">
|
||||
dark
|
||||
<i class="fa-regular fa-moon" aria-hidden="true"></i>
|
||||
</label>
|
||||
</fieldset>
|
||||
</footer>
|
||||
|
||||
|
||||
<!-- This page `/gallery/9/` was built on 2026-09-08T23:18:38.970Z -->
|
||||
<!-- This page `/gallery/9/` was built on 2026-09-09T20:38:09.650Z -->
|
||||
</body>
|
||||
</html>
|
||||
|
||||
+172
-3
@@ -311,6 +311,13 @@
|
||||
--color-grey: light-dark(var(--color-grey-dark), var(--color-grey-light));
|
||||
}
|
||||
|
||||
:root:has(#theme-light:checked) {
|
||||
color-scheme: light;
|
||||
}
|
||||
:root:has(#theme-dark:checked) {
|
||||
color-scheme: dark;
|
||||
}
|
||||
|
||||
/* Base */
|
||||
|
||||
* {
|
||||
@@ -454,7 +461,7 @@ ul, ol, dl, li {
|
||||
}
|
||||
|
||||
li {
|
||||
line-height: 1.2 5;
|
||||
line-height: 1.2;
|
||||
margin-top: .65rem;
|
||||
margin-bottom: .65rem;
|
||||
}
|
||||
@@ -793,6 +800,111 @@ footer a:focus-visible {
|
||||
outline-color: var(--color-pink);
|
||||
}
|
||||
|
||||
/* color picker */
|
||||
#theme {
|
||||
display: flex;
|
||||
justify-content: center;
|
||||
margin: .5rem auto 0;
|
||||
padding: 0 .75rem .5rem;
|
||||
width: fit-content;
|
||||
border: .125rem solid var(--color-teal);
|
||||
border-radius: 2rem;
|
||||
}
|
||||
|
||||
#theme legend {
|
||||
margin: 0 auto;
|
||||
color: var(--color-teal);
|
||||
}
|
||||
|
||||
footer label {
|
||||
cursor: pointer;
|
||||
border: .125rem solid var(--color-pink);
|
||||
padding: 0 .25rem;
|
||||
color: var(--color-pink);
|
||||
background-color: var(--color-bg); /* this stops the box shadows from showing through */
|
||||
box-shadow: .15em .15em var(--color-shadow);
|
||||
/* Click animation handling */
|
||||
position: relative;
|
||||
top: 0;
|
||||
left: 0;
|
||||
transition: top .05s ease-in, left .05s ease-in;
|
||||
}
|
||||
|
||||
footer input:checked + label {
|
||||
color: var(--color-blue);
|
||||
border-color: var(--color-blue);
|
||||
}
|
||||
|
||||
footer label i {
|
||||
color: var(--color-teal);
|
||||
}
|
||||
|
||||
footer input:checked + label i {
|
||||
color: var(--color-pink);
|
||||
}
|
||||
|
||||
@media (any-hover: hover) {
|
||||
footer label:hover,
|
||||
footer input:checked + label:hover,
|
||||
footer label:hover i,
|
||||
footer input:checked + label:hover i {
|
||||
color: var(--color-bg);
|
||||
}
|
||||
|
||||
footer label:hover {
|
||||
background-color: var(--color-pink);
|
||||
}
|
||||
|
||||
footer input:checked + label:hover {
|
||||
background-color: var(--color-teal);
|
||||
}
|
||||
}
|
||||
|
||||
footer input:focus-visible + label,
|
||||
footer input:focus-visible + label i {
|
||||
color: var(--color-bg);
|
||||
background-color: var(--color-pink);
|
||||
border-color: var(--color-pink);
|
||||
}
|
||||
|
||||
footer input:checked:focus-visible + label,
|
||||
footer input:checked:focus-visible + label i {
|
||||
color: var(--color-bg);
|
||||
background-color: var(--color-teal);
|
||||
border-color: var(--color-teal);
|
||||
}
|
||||
|
||||
footer label:active {
|
||||
top: .09em;
|
||||
left: .09em;
|
||||
box-shadow: .05em .05em var(--color-shadow);
|
||||
}
|
||||
|
||||
label.theme-light {
|
||||
border-top-left-radius: 1rem;
|
||||
border-bottom-left-radius: 1rem;
|
||||
border-right: none;
|
||||
padding-left: .35rem;
|
||||
}
|
||||
|
||||
label.theme-auto {
|
||||
}
|
||||
|
||||
label.theme-dark {
|
||||
border-top-right-radius: 1rem;
|
||||
border-bottom-right-radius: 1rem;
|
||||
border-left: none;
|
||||
padding-right: .35rem;
|
||||
}
|
||||
|
||||
footer input {
|
||||
/* To allow screen reader to still access these. */
|
||||
/* From https://lyra.horse/blog/2025/08/you-dont-need-js/ */
|
||||
opacity: 0;
|
||||
position: absolute;
|
||||
pointer-events: none;
|
||||
}
|
||||
|
||||
/* Pagination */
|
||||
.pagination,
|
||||
.pagination li {
|
||||
@@ -1055,7 +1167,43 @@ pre[class*=language-]::selection {
|
||||
}
|
||||
}</style>
|
||||
|
||||
<script type="module"></script>
|
||||
|
||||
|
||||
<script type="module">const THEME = "theme";
|
||||
|
||||
const saveTheme = (themeValue) => {
|
||||
localStorage.setItem(THEME, themeValue);
|
||||
};
|
||||
|
||||
const themeLight = document.getElementById("theme-light");
|
||||
themeLight.addEventListener("input", (e) => {
|
||||
saveTheme(themeLight.value);
|
||||
});
|
||||
|
||||
const themeAuto = document.getElementById("theme-auto");
|
||||
themeAuto.addEventListener("input", (e) => {
|
||||
saveTheme(themeAuto.auto);
|
||||
});
|
||||
|
||||
const themeDark = document.getElementById("theme-dark");
|
||||
themeDark.addEventListener("input", (e) => {
|
||||
saveTheme(themeDark.value);
|
||||
});
|
||||
|
||||
var currentThemeValue = localStorage.getItem(THEME);
|
||||
switch (currentThemeValue) {
|
||||
case "light":
|
||||
themeLight.checked = true;
|
||||
break;
|
||||
case "auto":
|
||||
themeAuto.checked = true;
|
||||
break;
|
||||
case "dark":
|
||||
themeDark.checked = true;
|
||||
break;
|
||||
default:
|
||||
themeAuto.checked = true;
|
||||
}</script>
|
||||
|
||||
</head>
|
||||
<body>
|
||||
@@ -1349,9 +1497,30 @@ pre[class*=language-]::selection {
|
||||
</a>
|
||||
</li>
|
||||
</ul>
|
||||
|
||||
<fieldset id="theme">
|
||||
<legend>color scheme</legend>
|
||||
|
||||
<input type="radio" id="theme-light" name="theme" value="light">
|
||||
<label class="theme-light" for="theme-light">
|
||||
<i class="fa-regular fa-sun" aria-hidden="true"></i>
|
||||
light
|
||||
</label>
|
||||
|
||||
<input type="radio" id="theme-auto" name="theme" value="auto">
|
||||
<label class="theme-auto" for="theme-auto">
|
||||
auto
|
||||
</label>
|
||||
|
||||
<input type="radio" id="theme-dark" name="theme" value="dark">
|
||||
<label class="theme-dark" for="theme-dark">
|
||||
dark
|
||||
<i class="fa-regular fa-moon" aria-hidden="true"></i>
|
||||
</label>
|
||||
</fieldset>
|
||||
</footer>
|
||||
|
||||
|
||||
<!-- This page `/gallery/` was built on 2026-09-08T23:18:32.765Z -->
|
||||
<!-- This page `/gallery/` was built on 2026-09-09T20:38:02.941Z -->
|
||||
</body>
|
||||
</html>
|
||||
|
||||
+208
-38
@@ -478,6 +478,13 @@ body:has(dialog[open]) {
|
||||
--color-grey: light-dark(var(--color-grey-dark), var(--color-grey-light));
|
||||
}
|
||||
|
||||
:root:has(#theme-light:checked) {
|
||||
color-scheme: light;
|
||||
}
|
||||
:root:has(#theme-dark:checked) {
|
||||
color-scheme: dark;
|
||||
}
|
||||
|
||||
/* Base */
|
||||
|
||||
* {
|
||||
@@ -621,7 +628,7 @@ ul, ol, dl, li {
|
||||
}
|
||||
|
||||
li {
|
||||
line-height: 1.2 5;
|
||||
line-height: 1.2;
|
||||
margin-top: .65rem;
|
||||
margin-bottom: .65rem;
|
||||
}
|
||||
@@ -960,6 +967,111 @@ footer a:focus-visible {
|
||||
outline-color: var(--color-pink);
|
||||
}
|
||||
|
||||
/* color picker */
|
||||
#theme {
|
||||
display: flex;
|
||||
justify-content: center;
|
||||
margin: .5rem auto 0;
|
||||
padding: 0 .75rem .5rem;
|
||||
width: fit-content;
|
||||
border: .125rem solid var(--color-teal);
|
||||
border-radius: 2rem;
|
||||
}
|
||||
|
||||
#theme legend {
|
||||
margin: 0 auto;
|
||||
color: var(--color-teal);
|
||||
}
|
||||
|
||||
footer label {
|
||||
cursor: pointer;
|
||||
border: .125rem solid var(--color-pink);
|
||||
padding: 0 .25rem;
|
||||
color: var(--color-pink);
|
||||
background-color: var(--color-bg); /* this stops the box shadows from showing through */
|
||||
box-shadow: .15em .15em var(--color-shadow);
|
||||
/* Click animation handling */
|
||||
position: relative;
|
||||
top: 0;
|
||||
left: 0;
|
||||
transition: top .05s ease-in, left .05s ease-in;
|
||||
}
|
||||
|
||||
footer input:checked + label {
|
||||
color: var(--color-blue);
|
||||
border-color: var(--color-blue);
|
||||
}
|
||||
|
||||
footer label i {
|
||||
color: var(--color-teal);
|
||||
}
|
||||
|
||||
footer input:checked + label i {
|
||||
color: var(--color-pink);
|
||||
}
|
||||
|
||||
@media (any-hover: hover) {
|
||||
footer label:hover,
|
||||
footer input:checked + label:hover,
|
||||
footer label:hover i,
|
||||
footer input:checked + label:hover i {
|
||||
color: var(--color-bg);
|
||||
}
|
||||
|
||||
footer label:hover {
|
||||
background-color: var(--color-pink);
|
||||
}
|
||||
|
||||
footer input:checked + label:hover {
|
||||
background-color: var(--color-teal);
|
||||
}
|
||||
}
|
||||
|
||||
footer input:focus-visible + label,
|
||||
footer input:focus-visible + label i {
|
||||
color: var(--color-bg);
|
||||
background-color: var(--color-pink);
|
||||
border-color: var(--color-pink);
|
||||
}
|
||||
|
||||
footer input:checked:focus-visible + label,
|
||||
footer input:checked:focus-visible + label i {
|
||||
color: var(--color-bg);
|
||||
background-color: var(--color-teal);
|
||||
border-color: var(--color-teal);
|
||||
}
|
||||
|
||||
footer label:active {
|
||||
top: .09em;
|
||||
left: .09em;
|
||||
box-shadow: .05em .05em var(--color-shadow);
|
||||
}
|
||||
|
||||
label.theme-light {
|
||||
border-top-left-radius: 1rem;
|
||||
border-bottom-left-radius: 1rem;
|
||||
border-right: none;
|
||||
padding-left: .35rem;
|
||||
}
|
||||
|
||||
label.theme-auto {
|
||||
}
|
||||
|
||||
label.theme-dark {
|
||||
border-top-right-radius: 1rem;
|
||||
border-bottom-right-radius: 1rem;
|
||||
border-left: none;
|
||||
padding-right: .35rem;
|
||||
}
|
||||
|
||||
footer input {
|
||||
/* To allow screen reader to still access these. */
|
||||
/* From https://lyra.horse/blog/2025/08/you-dont-need-js/ */
|
||||
opacity: 0;
|
||||
position: absolute;
|
||||
pointer-events: none;
|
||||
}
|
||||
|
||||
/* Pagination */
|
||||
.pagination,
|
||||
.pagination li {
|
||||
@@ -1222,6 +1334,8 @@ pre[class*=language-]::selection {
|
||||
}
|
||||
}</style>
|
||||
|
||||
|
||||
|
||||
<script type="module">// Thank you to https://github.com/daviddarnes/heading-anchors
|
||||
// Thank you to https://amberwilson.co.uk/blog/are-your-anchor-links-accessible/
|
||||
|
||||
@@ -1476,6 +1590,41 @@ if (window.innerWidth > 650) {
|
||||
dialog.close();
|
||||
}
|
||||
});
|
||||
}
|
||||
const THEME = "theme";
|
||||
|
||||
const saveTheme = (themeValue) => {
|
||||
localStorage.setItem(THEME, themeValue);
|
||||
};
|
||||
|
||||
const themeLight = document.getElementById("theme-light");
|
||||
themeLight.addEventListener("input", (e) => {
|
||||
saveTheme(themeLight.value);
|
||||
});
|
||||
|
||||
const themeAuto = document.getElementById("theme-auto");
|
||||
themeAuto.addEventListener("input", (e) => {
|
||||
saveTheme(themeAuto.auto);
|
||||
});
|
||||
|
||||
const themeDark = document.getElementById("theme-dark");
|
||||
themeDark.addEventListener("input", (e) => {
|
||||
saveTheme(themeDark.value);
|
||||
});
|
||||
|
||||
var currentThemeValue = localStorage.getItem(THEME);
|
||||
switch (currentThemeValue) {
|
||||
case "light":
|
||||
themeLight.checked = true;
|
||||
break;
|
||||
case "auto":
|
||||
themeAuto.checked = true;
|
||||
break;
|
||||
case "dark":
|
||||
themeDark.checked = true;
|
||||
break;
|
||||
default:
|
||||
themeAuto.checked = true;
|
||||
}</script>
|
||||
|
||||
</head>
|
||||
@@ -1627,51 +1776,51 @@ if (window.innerWidth > 650) {
|
||||
<ol id="postlist">
|
||||
|
||||
<li class="post">
|
||||
<a class="postlink" href="/brown-creeper/">
|
||||
<h2 data-ha-exclude="" id="brown-creeper">brown creeper </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>print</li>
|
||||
|
||||
</ul>
|
||||
<img src="/img/brown-creeper-print.jpg" alt="2 copies of the same print side by side. In yellow, black, and purple ink, a brown creeper, a small bird, is depicted, well camouflaged against a tree trunk." loading="lazy" decoding="async" width="1000" height="1000">
|
||||
|
||||
</a>
|
||||
</li>
|
||||
|
||||
<li class="post">
|
||||
<a class="postlink" href="/coming-out/">
|
||||
<h2 data-ha-exclude="" id="coming-out">coming out </h2>
|
||||
|
||||
<ul class="postlist-tags">
|
||||
|
||||
<li>print</li>
|
||||
|
||||
<li>card</li>
|
||||
|
||||
<li>gender</li>
|
||||
|
||||
</ul>
|
||||
<img src="/img/coming-out-card-print.jpg" alt="A card and print in the same design - a chick and a broken eggshell, and a simple font reading 'congrats on coming out of your shell'" loading="lazy" decoding="async" width="1000" height="750">
|
||||
|
||||
</a>
|
||||
</li>
|
||||
|
||||
<li class="post">
|
||||
<a class="postlink" href="/greeting-loons/">
|
||||
<h2 data-ha-exclude="" id="greeting-loons">greeting loons </h2>
|
||||
|
||||
<ul class="postlist-tags">
|
||||
|
||||
<li>card</li>
|
||||
|
||||
<li>print</li>
|
||||
<li>software</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/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="/fishhook-pride-keychains/">
|
||||
<h2 data-ha-exclude="" id="fishhook-pride-keychains">fishhook pride keychains </h2>
|
||||
|
||||
<ul class="postlist-tags">
|
||||
|
||||
<li>leather</li>
|
||||
|
||||
<li>gender</li>
|
||||
|
||||
</ul>
|
||||
<img src="/img/fishhook-keychain-nonbinary.jpg" alt="a keychain with an iridescent fishhook style attachment linked via leather to an iridescent keyring. the leather is stitched with nonbinary flag colors." loading="lazy" decoding="async" width="1000" height="750">
|
||||
|
||||
</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/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>
|
||||
@@ -1704,9 +1853,30 @@ if (window.innerWidth > 650) {
|
||||
</a>
|
||||
</li>
|
||||
</ul>
|
||||
|
||||
<fieldset id="theme">
|
||||
<legend>color scheme</legend>
|
||||
|
||||
<input type="radio" id="theme-light" name="theme" value="light">
|
||||
<label class="theme-light" for="theme-light">
|
||||
<i class="fa-regular fa-sun" aria-hidden="true"></i>
|
||||
light
|
||||
</label>
|
||||
|
||||
<input type="radio" id="theme-auto" name="theme" value="auto">
|
||||
<label class="theme-auto" for="theme-auto">
|
||||
auto
|
||||
</label>
|
||||
|
||||
<input type="radio" id="theme-dark" name="theme" value="dark">
|
||||
<label class="theme-dark" for="theme-dark">
|
||||
dark
|
||||
<i class="fa-regular fa-moon" aria-hidden="true"></i>
|
||||
</label>
|
||||
</fieldset>
|
||||
</footer>
|
||||
|
||||
|
||||
<!-- This page `/geese-trans-wrongs/` was built on 2026-09-08T23:18:32.736Z -->
|
||||
<!-- This page `/geese-trans-wrongs/` was built on 2026-09-09T20:38:02.904Z -->
|
||||
</body>
|
||||
</html>
|
||||
|
||||
Some files were not shown because too many files have changed in this diff Show More
Reference in New Issue
Block a user
