theme: Add static page search with pagefind

1 files changed, 65 insertions, 0 deletions

diff --git a/themes/conspiracy/assets/css/style.css b/themes/conspiracy/assets/css/style.css
index 78635d5..11654ea 100644
--- a/themes/conspiracy/assets/css/style.css
+++ b/themes/conspiracy/assets/css/style.css
@@ -601,6 +601,71 @@ body .il  { color: var(--c-text); font-weight: 600 } /* Literal.Number.Integer.L
     }
 }
 
+.search {
+    align-self: center;
+    max-width: calc(100vw - 20px);
+    flex-grow: 1;
+    margin-left: 10px;
+    margin-right: 10px;
+}
+
+.pagefind-ui__form {
+    max-width: 100%;
+}
+
+.search input {
+    height: 1.5lh;
+    max-width: 100%;
+}
+
+#search, .pagefind-ui, #search form, #search input {
+    width: 100%;
+}
+
+.search button {
+    display: none;
+}
+
+.pagefind-ui__drawer {
+    position: fixed;
+    margin-top: 10px;
+    background: var(--c-bg-highlight);
+    max-width: min(100%, min(100vw, 40em));
+    max-height: 100%;
+    overflow-x: clip;
+    overflow-y: scroll;
+    text-overflow: clip;
+    z-index: 100;
+}
+
+.pagefind-ui__message {
+    font-family: "Nyght Serif";
+    font-weight: 700;
+    font-size: 16pt;
+}
+
+.pagefind-ui__results-area {
+    padding: 10px;
+}
+
+.pagefind-ui__results-area img {
+    max-width: min(50vw, 200px);
+}
+
+.pagefind-ui__results-area a {
+    max-width: min(50vw, 200px);
+    color: var(--c-fg-secondary) !important;
+    text-decoration: none;
+    padding: 10px 10px 10px 0 !important;
+    font-family: "Nyght Serif";
+    font-weight: 700;
+    font-size: 12pt;
+}
+
+.pagefind-ui__results-area figure, .pagefind-ui__results-area div.subfigure, .pagefind-ui__results-area img {
+    display: none;
+}
+
 @media print, (prefers-color-scheme: light) {
     html {
         --c-bg-backdrop:        hsl(220, 10%, 90%);