search bar timeeee

css/nav.css

@@ -1,12 +1,11 @@
 /* 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 */
@@ -164,7 +163,7 @@ a[aria-current="page"] a:focus-visible i,
 	width: auto;
 	height: auto;
 	overflow: auto;
-	margin: 0 10%;
+	margin: -.125rem 10%;
 	z-index: 999;
 }
 

css/pagefind.css

@@ -0,0 +1,90 @@
+/* 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,
+pagefind-modal-trigger,
+pagefind-modal {
+	/* 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,
+.light pagefind-modal-trigger,
+.light pagefind-modal {
+	--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;
+}
+
+.dark pagefind-searchbox,
+.dark pagefind-modal-trigger,
+.dark agefind-modal {
+	--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;
+}
+
+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;
+}