From 429edbbc30c49778cdc10b447128124f694b48d1 Mon Sep 17 00:00:00 2001
From: JP Hastings-Spital <jphastings@gmail.com>
Date: Wed, 13 Sep 2023 22:08:40 +0100
Subject: [PATCH] Pagefind v1 & styling

---
 assets/scss/_main.scss      |  9 +++++++++
 assets/scss/_search.scss    | 34 ++++++++++++++++++++++++++++++++++
 assets/scss/_variables.scss |  1 +
 assets/scss/main.scss       |  1 +
 content/search.md           |  1 +
 pagefind.yaml               |  4 ++--
 6 files changed, 48 insertions(+), 2 deletions(-)
 create mode 100644 assets/scss/_search.scss

diff --git a/assets/scss/_main.scss b/assets/scss/_main.scss
index 7ae5a389..a5ddd33f 100644
--- a/assets/scss/_main.scss
+++ b/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;
+  }
+}
\ No newline at end of file
diff --git a/assets/scss/_search.scss b/assets/scss/_search.scss
new file mode 100644
index 00000000..d660847a
--- /dev/null
+++ b/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;
+}
\ No newline at end of file
diff --git a/assets/scss/_variables.scss b/assets/scss/_variables.scss
index f7079404..de0547ed 100644
--- a/assets/scss/_variables.scss
+++ b/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 */
diff --git a/assets/scss/main.scss b/assets/scss/main.scss
index 17921606..ab7c63ca 100644
--- a/assets/scss/main.scss
+++ b/assets/scss/main.scss
@@ -17,3 +17,4 @@
 @import "syndication";
 @import "tables";
 @import "404";
+@import "search";
diff --git a/content/search.md b/content/search.md
index 9196c2e2..68192b03 100644
--- a/content/search.md
+++ b/content/search.md
@@ -2,6 +2,7 @@
 title: Search
 emoji: 🕵️‍♂️
 type: site-infra
+stylescope: search
 _build:
   list: never
 ---
diff --git a/pagefind.yaml b/pagefind.yaml
index 0e83c8d9..61420510 100644
--- a/pagefind.yaml
+++ b/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