drone build Wed Sep 9 13:38:19 PDT 2026
This commit is contained in:
@@ -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,20 +1763,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="/fedizinefest-2025/">
|
||||
<h2 data-ha-exclude="" id="fedizinefest-2025">fediZineFest 2025 </h2>
|
||||
|
||||
<ul class="postlist-tags">
|
||||
|
||||
<li>zine</li>
|
||||
|
||||
</ul>
|
||||
<img src="/img/fedizinefest-2025.png" alt="A logo in purple, yellow, blue, and green. A piece of paper folded into 8 sections reads FEDI ZINE; it resembles the classic folding pattern of a simple 8-page zine made from printer paper. Next to it, a fully folded zine reads fest 2025." loading="lazy" decoding="async" width="729" height="799">
|
||||
|
||||
</a>
|
||||
</li>
|
||||
|
||||
<li class="post">
|
||||
<a class="postlink" href="/pink-socks/">
|
||||
<h2 data-ha-exclude="" id="pink-socks">pink socks </h2>
|
||||
@@ -1643,17 +1778,29 @@ if (window.innerWidth > 650) {
|
||||
</li>
|
||||
|
||||
<li class="post">
|
||||
<a class="postlink" href="/pride-dice-bags/">
|
||||
<h2 data-ha-exclude="" id="pride-dice-bags">pride dice bags </h2>
|
||||
<a class="postlink" href="/knit-shrimp/">
|
||||
<h2 data-ha-exclude="" id="knit-shrimp">knit shrimp </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">
|
||||
|
||||
</a>
|
||||
</li>
|
||||
|
||||
<li class="post">
|
||||
<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/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">
|
||||
<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>
|
||||
@@ -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 `/on-the-shoulders-of-giants/` was built on 2026-09-08T23:18:32.748Z -->
|
||||
<!-- This page `/on-the-shoulders-of-giants/` was built on 2026-09-09T20:38:02.933Z -->
|
||||
</body>
|
||||
</html>
|
||||
|
||||
Reference in New Issue
Block a user
