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

knit-shrimp/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="">
       
 
 
@@ -1764,15 +1874,33 @@ switch (currentThemeValue) {
     <ol id="postlist">
 	
   <li class="post">
-		<a class="postlink" href="/sideways-canvas-shirt/">
-			<h2 data-ha-exclude="" id="sideways-canvas-shirt">sideways canvas shirt </h2>
+		<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/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">
+			<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="/on-the-shoulders-of-giants/">
+			<h2 data-ha-exclude="" id="on-the-shoulders-of-giants">on the shoulders of giants </h2>
+			
+			<ul class="postlist-tags">
+				
+				<li>zine</li>
+				
+				<li>knit</li>
+				
+			</ul>
+			<img src="/img/on-the-shoulders.jpg" alt="ok so. five image collage showing the front, 3 inner spreads, and back of a riso-printed zine in green and light blue. it&#39;s called &#39;on the shoulders of giants&#39; and it&#39;s about a knitting technique I learned from Stephen west and how I built on that technique. it talks about joining two adjacent panels without seaming, instead knitting the second panel onto the selvedge of the first. then it uses that technique to approach two panels knit with significantly different weights of yarn" loading="lazy" decoding="async" width="1000" height="1000">
 			
 		</a>
 	</li>
@@ -1793,20 +1921,6 @@ switch (currentThemeValue) {
 		</a>
 	</li>
 	
-  <li class="post">
-		<a class="postlink" href="/brookes-scarf/">
-			<h2 data-ha-exclude="" id="brookes-scarf">brooke&#39;s scarf </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>
-	
 </ol>
 
   </section>
@@ -1859,6 +1973,6 @@ switch (currentThemeValue) {
 </footer>
 
 
-    <!-- This page `/knit-shrimp/` was built on 2026-09-10T21:23:06.966Z -->
+    <!-- This page `/knit-shrimp/` was built on 2026-09-11T18:56:54.973Z -->
   </body>
 </html>