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

recommendations-and-favorites/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="">
       
 
 
@@ -1795,17 +1905,33 @@ switch (currentThemeValue) {
     <ol id="postlist">
 	
   <li class="post">
-		<a class="postlink" href="/quorbs/">
-			<h2 data-ha-exclude="" id="quorbs">quorbs </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>print</li>
+				<li>knit</li>
 				
 				<li>highlight</li>
 				
 			</ul>
-			<img src="/img/quorbs-print.jpg" alt="A print in two layers of color showing two rotund quails on a branch. Most of the details are in black ink, then there is a layer with a brown gradient filling in some color on the head and breast." loading="lazy" decoding="async" width="1000" height="750">
+			<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="/core-css/">
+			<h2 data-ha-exclude="" id="core-css">core CSS </h2>
+			
+			<ul class="postlist-tags">
+				
+				<li>software</li>
+				
+				<li>highlight</li>
+				
+			</ul>
+			<img src="/img/core-css.png" alt="A website mockup in dark mode with light pink accents. Everything is filler text such as the title &#39;This is my cool website&#39;, headers reading things like &#39;This is an h1&#39;, nav items &#39;Nav item 1&#39;, etc. There is a paragraph block - the opening of the Bee Movie - and part of an image visible - a screencap of the music video for Never Gonna Give You Up by Rick Astley." loading="lazy" decoding="async" width="1000" height="447">
 			
 		</a>
 	</li>
@@ -1828,22 +1954,6 @@ switch (currentThemeValue) {
 		</a>
 	</li>
 	
-  <li class="post">
-		<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/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>
-	
 </ol>
 
   </section>
@@ -1896,6 +2006,6 @@ switch (currentThemeValue) {
 </footer>
 
 
-    <!-- This page `/recommendations-and-favorites/` was built on 2026-09-10T21:23:06.956Z -->
+    <!-- This page `/recommendations-and-favorites/` was built on 2026-09-11T18:56:54.953Z -->
   </body>
 </html>