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>
|
||||
@@ -1610,6 +1759,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="/butch-hands-pattern/">
|
||||
<h2 data-ha-exclude="" id="butch-hands-pattern">butch hands pattern </h2>
|
||||
|
||||
<ul class="postlist-tags">
|
||||
|
||||
<li>knit</li>
|
||||
|
||||
<li>highlight</li>
|
||||
|
||||
</ul>
|
||||
<img src="/img/butch-hands.jpg" alt="Hands wearing a pair of pink and grey gloves with convertable mitten tops." loading="lazy" decoding="async" width="1000" height="750">
|
||||
|
||||
</a>
|
||||
</li>
|
||||
|
||||
<li class="post">
|
||||
<a class="postlink" href="/pink-socks/">
|
||||
<h2 data-ha-exclude="" id="pink-socks">pink socks </h2>
|
||||
@@ -1625,31 +1790,15 @@ if (window.innerWidth > 650) {
|
||||
</li>
|
||||
|
||||
<li class="post">
|
||||
<a class="postlink" href="/brookes-scarf/">
|
||||
<h2 data-ha-exclude="" id="brookes-scarf">brooke's scarf </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-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="/butch-hands-pattern/">
|
||||
<h2 data-ha-exclude="" id="butch-hands-pattern">butch hands pattern </h2>
|
||||
|
||||
<ul class="postlist-tags">
|
||||
|
||||
<li>knit</li>
|
||||
|
||||
<li>highlight</li>
|
||||
|
||||
</ul>
|
||||
<img src="/img/butch-hands.jpg" alt="Hands wearing a pair of pink and grey gloves with convertable mitten tops." loading="lazy" decoding="async" width="1000" height="750">
|
||||
<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>
|
||||
@@ -1682,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 `/sideways-canvas-shirt/` was built on 2026-09-08T23:18:32.748Z -->
|
||||
<!-- This page `/sideways-canvas-shirt/` was built on 2026-09-09T20:38:02.933Z -->
|
||||
</body>
|
||||
</html>
|
||||
|
||||
Reference in New Issue
Block a user
