Pagefind v1 & styling

assets/scss/_main.scss

@@ -771,3 +771,12 @@ a[href^="/tags/"]:before {
   text-decoration: none;
   display:inline-block;
 }
+
+mark {
+  color: inherit;
+  background-color: lch(85% 25 var(--accentHue)) !important;
+  
+  @media (prefers-color-scheme: dark) {
+    background-color: lch(20% 25 var(--accentHue)) !important;
+  }
+}

assets/scss/_search.scss

@@ -0,0 +1,34 @@
+body.search {
+  --pagefind-ui-scale: 0.7619047619;
+  --pagefind-ui-primary: var(--accent);
+  // Not sure why these colours aren't pulling in from _variables.scss
+  --pagefind-ui-text: #222; // $light-color;
+  --pagefind-ui-background: #eaeaea; // $light-background-secondary;
+  --pagefind-ui-border: #dcdcdc; // $light-border-color;
+  --pagefind-ui-tag: #dcdcdc; // $light-border-color;
+  --pagefind-ui-border-width: 1px;
+  --pagefind-ui-border-radius: 0;
+  --pagefind-ui-image-border-radius: 0;
+  --pagefind-ui-image-box-ratio: 3 / 2;
+  --pagefind-ui-font: -apple-system, BlinkMacSystemFont, "Roboto", "Segoe UI", Helvetica, Arial, sans-serif;
+
+  @media (prefers-color-scheme: dark) {
+    --pagefind-ui-text: #a9a9b3; // $dark-color;
+    --pagefind-ui-background: #3b3d42; // $dark-background-secondary;
+    --pagefind-ui-border: #4e4e57; // $dark-border-color;
+    --pagefind-ui-tag: #4e4e57; // $dark-border-color;
+  }
+}
+
+.pagefind-ui__search-input, .pagefind-ui__message, .pagefind-ui__filter-name, .pagefind-ui__result-excerpt {
+  font-weight: inherit !important;
+  font-size: inherit !important;
+}
+
+.pagefind-ui__drawer {
+  flex-direction: row-reverse !important;
+}
+
+.pagefind-ui__result {
+  flex-direction: row-reverse !important;
+}

assets/scss/_variables.scss

@@ -30,6 +30,7 @@ $media-size-tablet: "(max-width: 900px)";
   --phoneWidth: (max-width: 684px);
   --tabletWidth: (max-width: 900px);
   --accent: #FE3C68;
+  --accentHue: 17.734;
 }
 
 /* Content */

assets/scss/main.scss

@@ -17,3 +17,4 @@
 @import "syndication";
 @import "tables";
 @import "404";
+@import "search";

content/search.md

@@ -2,6 +2,7 @@
 title: Search
 emoji: 🕵️‍♂️
 type: site-infra
+stylescope: search
 _build:
   list: never
 ---

pagefind.yaml

@@ -1,3 +1,3 @@
-source: public
+site: public
 # Don't use _pagefind as Github Pages will ignore it
-bundle_dir: search
+output-subdir: search