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

drone build Wed Sep 9 13:38:19 PDT 2026

Browse Source
This commit is contained in:
inherentlee
2026-09-09 20:38:19 +00:00
parent b8e29f5717
commit 33995d363c
298 changed files with 54051 additions and 3977 deletions
Download Patch File Download Diff File Expand all files Collapse all files
pink-socks/index.html
+189 -19
View File
@@ -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,29 +1759,15 @@ if (window.innerWidth > 650) {
<ol id="postlist">
<li class="post">
<a class="postlink" href="/acadia-mitts/">
<h2 data-ha-exclude="" id="acadia-mitts">acadia mitts </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/acadia-mitts.jpg" alt="a hand wearing a knitted fingerless mitten. it&#39;s knit in a slubby, almost tweedy yarn, with the body being blue grey stockinette and the cuffs and tips a vibrant green rib." loading="lazy" decoding="async" width="1000" height="1000">
</a>
</li>
<li class="post">
<a class="postlink" href="/keffiyah-fishing-net-pattern/">
<h2 data-ha-exclude="" id="keffiyah-fishing-net-pattern">keffiyah fishing net pattern </h2>
<ul class="postlist-tags">
<li>knit</li>
</ul>
<img src="/img/keffiyah-nets.jpg" alt="a knitted swatch. it&#39;s mostly white yarn, but a grid of dark red- purple- green yarn that looks like a chain link fence is built into it. the diagonal lines are achieved with floats of yarn from one row, then picked up and knit into several rows later." loading="lazy" decoding="async" width="1000" height="750">
<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>
@@ -1653,6 +1788,20 @@ if (window.innerWidth > 650) {
</a>
</li>
<li class="post">
<a class="postlink" href="/sideways-canvas-shirt/">
<h2 data-ha-exclude="" id="sideways-canvas-shirt">sideways canvas shirt </h2>
<ul class="postlist-tags">
<li>knit</li>
</ul>
<img src="/img/sideways-canvas.jpg" alt="someone&#39;s torso in a knitted short sleeve shirt. the front is teal, and the bit of back we can see is mustard yellow. looking closely, it&#39;s notable that the stitches are turned 90 degrees from a standard knit garment." loading="lazy" decoding="async" width="1000" height="1338">
</a>
</li>
</ol>
</section>
@@ -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 `/pink-socks/` was built on 2026-09-08T23:18:32.732Z -->
<!-- This page `/pink-socks/` was built on 2026-09-09T20:38:02.893Z -->
</body>
</html>