drone build Fri Sep 11 11:57:10 PDT 2026

charlie-the-alpaca-handspun/index.html

@@ -39,6 +39,7 @@
 
 
 
+
 <style>.post-metadata {
 	display: flex;
 	flex-flow: row wrap;
@@ -726,13 +727,12 @@ hr {
 }
 /* Header */
 header {
-	position: sticky;
-	top: 0;
 	background-color: var(--color-bg);
 	padding: .75rem 0;
-	z-index: 10;
 	border-bottom: thick solid var(--color-teal);
 	box-shadow: 0 .25rem .15rem var(--color-shadow);
+	display: grid;
+	grid-template-columns: auto;
 }
 
 /* Header links, pagination links */
@@ -890,7 +890,7 @@ a[aria-current="page"] a:focus-visible i,
 	width: auto;
 	height: auto;
 	overflow: auto;
-	margin: 0 10%;
+	margin: -.125rem 10%;
 	z-index: 999;
 }
 
@@ -1122,6 +1122,106 @@ footer input {
 .webring li {
 	margin-left: 0;
 }
+/* Handle color schemes */
+:root:has(#theme-light:checked) .dark {
+	display: none;
+}
+:root:has(#theme-dark:checked) .light {
+	display: none;
+}
+
+@media (prefers-color-scheme: light) {
+	:root:not(:has(#theme-dark:checked)) .dark {
+		display: none;
+	}
+}
+@media (prefers-color-scheme: dark) {
+	:root:not(:has(#theme-light:checked)) .light {
+		display: none;
+	}
+}
+
+.searchbox {
+	margin: 1rem auto 0;
+}
+
+pagefind-searchbox {
+	/* Shadows */
+ --pf-scroll-shadow: var(--color-shadow) !important;
+ --pf-shadow-sm: .15rem .15rem 0 var(--color-shadow) !important;
+ --pf-shadow-md: .25rem .25rem 0 var(--color-shadow) !important;
+ --pf-shadow-lg: 1rem 1rem 0 var(--color-shadow) !important;
+
+	/* Typography */
+  --pf-font: var(--font-family) !important;
+
+  /* Border */
+  --pf-border-radius: 1.5rem !important;
+
+  /* Focus */
+  --pf-outline-width: .125rem !important;
+  --pf-outline-offset: 0 !important;
+
+  /* Width */
+  --pf-searchbox-max-width: min(550px, 92vw) !important;
+}
+
+.light pagefind-searchbox {
+	--pf-text: var(--color-dark) !important;
+  --pf-text-secondary: var(--color-dark-alt) !important;
+  --pf-text-muted: var(--color-dark-alt) !important;
+  --pf-background: var(--color-light-alt) !important;
+  --pf-border: var(--color-pink-dark) !important;
+  --pf-border-focus: var(--color-pink-dark) !important;
+  --pf-skeleton: var(--color-light) !important;
+  --pf-skeleton-shine: var(--color-dark) !important;
+  --pf-hover: var(--color-light) !important;
+  --pf-mark: var(--color-teal-dark) !important;
+  --pf-outline-focus: var(--color-teal-dark) !important;
+
+  /* Error */
+  --pf-error-bg: var(--color-light-alt) !important;
+  --pf-error-border: var(--color-red-dark) !important;
+  --pf-error-text: var(--color-red-dark) !important;
+  --pf-error-text-secondary: var(--color-red-dark) !important;
+}
+
+.dark pagefind-searchbox {
+	--pf-text: var(--color-light) !important;
+  --pf-text-secondary: var(--color-light-alt) !important;
+  --pf-text-muted: var(--color-light-alt) !important;
+  --pf-background: var(--color-dark-alt) !important;
+  --pf-border: var(--color-pink-light) !important;
+  --pf-border-focus: var(--color-pink-light) !important;
+  --pf-skeleton: var(--color-dark) !important;
+  --pf-skeleton-shine: var(--color-dark) !important;
+  --pf-hover: var(--color-dark) !important;
+  --pf-mark: var(--color-teal-light) !important;
+  --pf-outline-focus: var(--color-teal-light) !important;
+
+  /* Error */
+  --pf-error-bg: var(--color-dark-alt) !important;
+  --pf-error-border: var(--color-red-light) !important;
+  --pf-error-text: var(--color-red-light) !important;
+  --pf-error-text-secondary: var(--color-red-light) !important;
+}
+
+pagefind-searchbox input {
+	border-width: .125rem !important;
+}
+
+pagefind-searchbox input:not(:focus-visible) {
+	box-shadow: var(--pf-shadow-md) !important;
+}
+
+.pf-searchbox-dropdown,
+.pf-searchbox-footer {
+	border-width: .125rem !important;
+}
+
+.pf-error {
+	margin-top: .5rem !important;
+}
 /* Adapted from PrismJS 1.30.0 Tomorrow Night theme
 	https://prismjs.com/download
 */
@@ -1627,6 +1727,10 @@ switch (currentThemeValue) {
 		themeAuto.checked = true;
 }</script>
 
+
+<link href="/pagefind/pagefind-component-ui.css" rel="stylesheet">
+<script src="/pagefind/pagefind-component-ui.js" type="module"></script>
+
   </head>
   <body>
     <header>
@@ -1675,10 +1779,16 @@ switch (currentThemeValue) {
     </ul>
   </nav>
 
+  <div class="dark searchbox" data-pf-theme="dark">
+    <pagefind-searchbox></pagefind-searchbox>
+  </div>
+  <div class="light searchbox">
+    <pagefind-searchbox></pagefind-searchbox>
+  </div>
 </header>
 
 
-    <main id="main">
+    <main id="main" data-pagefind-body="">
       
 
 
@@ -1759,43 +1869,43 @@ switch (currentThemeValue) {
     <ol id="postlist">
 	
   <li class="post">
-		<a class="postlink" href="/dyeing-fiber/">
-			<h2 data-ha-exclude="" id="dyeing-fiber">dyeing fiber </h2>
+		<a class="postlink" href="/icelandic-lamb-handspun/">
+			<h2 data-ha-exclude="" id="icelandic-lamb-handspun">icelandic lamb handspun </h2>
 			
 			<ul class="postlist-tags">
 				
 				<li>yarn</li>
 				
 			</ul>
-			<img src="/img/dyed-fiber.jpg" alt="4oz of yarn and a pound of wool, chunked out, drying on a drying rack outdoors. the yarn and half the wool is a mix of teals and greens; the other half of the wool is a beautiful orange-gold." loading="lazy" decoding="async" width="1000" height="1000">
+			<img src="/img/icelandic-lamb.jpg" alt="a skein of black handspun yarn" loading="lazy" decoding="async" width="1000" height="666">
 			
 		</a>
 	</li>
 	
   <li class="post">
-		<a class="postlink" href="/fire-and-ice-handspun/">
-			<h2 data-ha-exclude="" id="fire-and-ice-handspun">fire &amp; ice handspun </h2>
+		<a class="postlink" href="/light-grey-jacobs-handspun/">
+			<h2 data-ha-exclude="" id="light-grey-jacobs-handspun">light grey jacobs handspun </h2>
 			
 			<ul class="postlist-tags">
 				
 				<li>yarn</li>
 				
 			</ul>
-			<img src="/img/fire-ice-handspun.jpg" alt="2 skeins, one large and one small, of a heathered orange yarn with hints of blue in about a DK or worsted weight." loading="lazy" decoding="async" width="1000" height="666">
+			<img src="/img/light-grey-jacobs.jpg" alt="a skein of light grey handspun yarn" loading="lazy" decoding="async" width="1000" height="666">
 			
 		</a>
 	</li>
 	
   <li class="post">
-		<a class="postlink" href="/handspun-yarn-in-party-mix-and-orange-gold/">
-			<h2 data-ha-exclude="" id="handspun-yarn-in-party-mix-and-orange-gold">handspun yarn in party mix and orange-gold </h2>
+		<a class="postlink" href="/handcombed-jacobs-handspun/">
+			<h2 data-ha-exclude="" id="handcombed-jacobs-handspun">handcombed jacobs handspun </h2>
 			
 			<ul class="postlist-tags">
 				
 				<li>yarn</li>
 				
 			</ul>
-			<img src="/img/handspun0.jpg" alt="4 skeins of handspun yarn, two in a somewhat pastel multicolor and two in a blend of orange, gold, and white." loading="lazy" decoding="async" width="1000" height="750">
+			<img src="/img/handcombed-jacobs.jpg" alt="a skein of dark grey handspun yarn" loading="lazy" decoding="async" width="1000" height="666">
 			
 		</a>
 	</li>
@@ -1852,6 +1962,6 @@ switch (currentThemeValue) {
 </footer>
 
 
-    <!-- This page `/charlie-the-alpaca-handspun/` was built on 2026-09-10T21:23:06.990Z -->
+    <!-- This page `/charlie-the-alpaca-handspun/` was built on 2026-09-11T18:56:54.967Z -->
   </body>
 </html>