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
little-critter-pouch/index.html
+181 -11
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>
@@ -1615,43 +1764,43 @@ if (window.innerWidth > 650) {
<ol id="postlist">
<li class="post">
<a class="postlink" href="/brookes-suspenders/">
<h2 data-ha-exclude="" id="brookes-suspenders">brooke&#39;s suspenders </h2>
<a class="postlink" href="/eight-pocket-bifold/">
<h2 data-ha-exclude="" id="eight-pocket-bifold">eight pocket bifold </h2>
<ul class="postlist-tags">
<li>leather</li>
</ul>
<img src="/img/brooke-suspenders.jpg" alt="a two image collage showing the front and back of a person, neck to waist. she&#39;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">
<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">
</a>
</li>
<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="/zipper-bifold-green/">
<h2 data-ha-exclude="" id="zipper-bifold-green">zipper bifold (green) </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/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">
</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="/soras-collar/">
<h2 data-ha-exclude="" id="soras-collar">sora&#39;s 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/sora-collar.jpg" alt="A collage showing a red and black leather dog collar tooled with roses and the name Sora. It&#39;s fully stitched with dark red stitching and has brass hardware." loading="lazy" decoding="async" width="1000" height="1000">
</a>
</li>
@@ -1684,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 `/little-critter-pouch/` was built on 2026-09-08T23:18:32.743Z -->
<!-- This page `/little-critter-pouch/` was built on 2026-09-09T20:38:02.912Z -->
</body>
</html>