drone build Wed Sep 9 13:38:19 PDT 2026
This commit is contained in:
+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>
|
||||
|
||||
Reference in New Issue
Block a user
