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

triangle-pouch/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,45 @@ switch (currentThemeValue) {
     <ol id="postlist">
 	
   <li class="post">
-		<a class="postlink" href="/gradient-purse-strap/">
-			<h2 data-ha-exclude="" id="gradient-purse-strap">gradient purse strap </h2>
+		<a class="postlink" href="/designing-a-bag/">
+			<h2 data-ha-exclude="" id="designing-a-bag">designing a bag </h2>
 			
 			<ul class="postlist-tags">
 				
 				<li>leather</li>
 				
+				<li>software</li>
+				
 			</ul>
-			<img src="/img/gradient-purse-strap.jpg" alt="a coiled up purse strap in gradient cool colors - we can see green, teal, indigo, and a slightly pinkish purple. It has brass hardware and is stiched along its length with cream stitches." loading="lazy" decoding="async" width="1000" height="750">
+			<img src="/img/shoelace-bag.jpg" alt="a 3-image collage showcasing a leather crossbody bag. the leather body is brown and fairly simple. up the narrow sides, rope is laced through grommets in a style resembling a shoe lacing. the rope forms the handle and loops seamlessly through the other side of the bag, joining in one point in a figure-8 follow-through knot. At the bottom corners, there are small diagonal lines of stitching to give the bag a small lip around the base and ensure small objects don&#39;t slide out." loading="lazy" decoding="async" width="1000" height="1777">
 			
 		</a>
 	</li>
 	
   <li class="post">
-		<a class="postlink" href="/brookes-collar/">
-			<h2 data-ha-exclude="" id="brookes-collar">brooke&#39;s collar </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/lined-shearling-collar.jpg" alt="A green leather collar lined with brown/grey shearling and fitted with two sizes of silver-toned spikes." loading="lazy" decoding="async" width="1000" height="750">
+			<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>
 	
   <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="/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/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/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>
@@ -1852,6 +1964,6 @@ switch (currentThemeValue) {
 </footer>
 
 
-    <!-- This page `/triangle-pouch/` was built on 2026-09-10T21:23:06.960Z -->
+    <!-- This page `/triangle-pouch/` was built on 2026-09-11T18:56:54.957Z -->
   </body>
 </html>