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

leather-long-stitch-journals/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,43 +1874,43 @@ switch (currentThemeValue) {
     <ol id="postlist">
 	
   <li class="post">
-		<a class="postlink" href="/aarons-mask/">
-			<h2 data-ha-exclude="" id="aarons-mask">aaron&#39;s mask </h2>
+		<a class="postlink" href="/leatherworking-favorites/">
+			<h2 data-ha-exclude="" id="leatherworking-favorites">leatherworking favorites </h2>
 			
 			<ul class="postlist-tags">
 				
 				<li>leather</li>
 				
 			</ul>
-			<img src="/img/aaron-mask.jpg" alt="A brown/grey leather mask of a long snouted dog with visible teeth and red detailing." loading="lazy" decoding="async" width="900" height="1200">
+			<img src="/img/leather-harness-wip.jpg" alt="two pieces of a chest harness sitting on a messy workbench. both pieces are about 8 inches long total and consist of two large o-rings joined by a dark teal leather strap. the o rings and rivets are matte black." loading="lazy" decoding="async" width="1000" height="750">
 			
 		</a>
 	</li>
 	
   <li class="post">
-		<a class="postlink" href="/leather-lighter-case/">
-			<h2 data-ha-exclude="" id="leather-lighter-case">leather lighter case </h2>
+		<a class="postlink" href="/brookes-suspenders/">
+			<h2 data-ha-exclude="" id="brookes-suspenders">brooke&#39;s suspenders </h2>
 			
 			<ul class="postlist-tags">
 				
 				<li>leather</li>
 				
 			</ul>
-			<img src="/img/leather-lighter-case.jpg" alt="A bic lighter wrapped in leather and hand-stitched up one side." loading="lazy" decoding="async" width="1000" height="750">
+			<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">
 			
 		</a>
 	</li>
 	
   <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="/bag-strap/">
+			<h2 data-ha-exclude="" id="bag-strap">bag strap </h2>
 			
 			<ul class="postlist-tags">
 				
 				<li>leather</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/bag-strap.jpg" alt="A nylon webbing shoulder strap in bright teal with clips on each end." loading="lazy" decoding="async" width="1000" height="750">
 			
 		</a>
 	</li>
@@ -1857,6 +1967,6 @@ switch (currentThemeValue) {
 </footer>
 
 
-    <!-- This page `/leather-long-stitch-journals/` was built on 2026-09-10T21:23:06.962Z -->
+    <!-- This page `/leather-long-stitch-journals/` was built on 2026-09-11T18:56:54.959Z -->
   </body>
 </html>