update theme for search

README.md

@@ -2,22 +2,9 @@
 
 ## General informations
 
-This theme is modified from
-[hello-friend-ng](https://github.com/rhazdon/hugo-theme-hello-friend-ng) to be
-more lightweight, and also to fit my preferences.
-
----
-
-## Changes from the original theme
-
-- Code highlighting with PrismJS has been removed, it instead relies on Hugo doing the code highlighting at build time. This means the website is lighter (less javascript), and hightlighting works with javascript disabled.
-- Social share buttons were removed.
-- The social icons on the main page now have names next to them, and are arranged vertically.
-- Added a CV icon option for the social icons, designed by me. Released to public domain.
-- Switched to a custom slimmed down version of the [Bitter font](https://www.huertatipografica.com/en/fonts/bitter-ht). The slimmed down version omits most cyrillic and non-English characters so beware!
-
-## How to start
-
+This theme is heavily modified from
+[hello-friend-ng](https://github.com/rhazdon/hugo-theme-hello-friend-ng) for my
+preferences, and may not be suitable for general use at this point.
 
 ## Licence
 

assets/js/main.js

@@ -6,15 +6,16 @@
  *
  */
 const themeToggle = document.querySelector(".theme-toggle");
-const chosenTheme = window.localStorage && window.localStorage.getItem("theme");
-const chosenThemeIsDark = chosenTheme == "dark";
-const chosenThemeIsLight = chosenTheme == "light";
+function getChosenTheme() {
+  const chosenTheme = window.localStorage && window.localStorage.getItem("theme");
+  return chosenTheme;
+}
 
-// Detect the color scheme the operating system prefers.
-function detectOSColorTheme() {
-  if (chosenThemeIsDark) {
+function applyTheme() {
+  const theme = getChosenTheme();
+  if (theme === 'dark') {
     document.documentElement.setAttribute("data-theme", "dark");
-  } else if (chosenThemeIsLight) {
+  } else if (theme === 'light') {
     document.documentElement.setAttribute("data-theme", "light");
   } else if (window.matchMedia("(prefers-color-scheme: dark)").matches) {
     document.documentElement.setAttribute("data-theme", "dark");
@@ -25,27 +26,24 @@ function detectOSColorTheme() {
 
 // Switch the theme.
 function switchTheme(e) {
-  if (chosenThemeIsDark) {
+  if (getChosenTheme() === 'dark') {
     localStorage.setItem("theme", "light");
   } else {
     localStorage.setItem("theme", "dark");
   }
 
-  detectOSColorTheme();
-  window.location.reload();
+  applyTheme();
 }
 
 // Event listener
 if (themeToggle) {
   themeToggle.addEventListener("click", switchTheme, false);
   window
     .matchMedia("(prefers-color-scheme: dark)")
-    .addEventListener("change", (e) => e.matches && detectOSColorTheme());
+    .addEventListener("change", (e) => e.matches && applyTheme());
   window
     .matchMedia("(prefers-color-scheme: light)")
-    .addEventListener("change", (e) => e.matches && detectOSColorTheme());
+    .addEventListener("change", (e) => e.matches && applyTheme());
 
-  detectOSColorTheme();
-} else {
-  localStorage.removeItem("theme");
+  applyTheme();
 }

assets/scss/_header.scss

@@ -38,9 +38,40 @@
     align-items: center;
     justify-content: space-between;
     margin: 0 auto;
-    width: 760px;
+    width: 880px;
     max-width: 100%;
   }
+
+  #search {
+    width: calc(min(300px, calc(100vw - 36px)));
+    margin-left: 18px;
+
+    @media #{$media-size-phone} {
+      margin-left: 0;
+      margin-top: 6px;
+    }
+  }
+}
+
+.pagefind-ui__drawer {
+  right: 0;
+  width: calc(min(500px, calc(100vw - 36px)));
+  position: absolute;
+  background-color: $light-background-header;
+  padding: 10px;
+  border-radius: 10px;
+  box-shadow: 0 8px 10px rgba(0, 0, 0, 0.3);
+}
+
+.pagefind-ui__search-input {
+  color: $light-color;
+}
+[data-theme="dark"] .pagefind-ui__search-input {
+  color: $dark-color;
+}
+
+[data-theme="dark"] .pagefind-ui__drawer {
+  background-color: $dark-background-header;
 }
 
 .theme-toggle {

assets/scss/_variables.scss

@@ -20,13 +20,32 @@ $dark-color-secondary: #b3b3bd;
 $dark-border-color: #4e4e57;
 $dark-table-color: #4e4e57;
 
-$media-size-phone: "(max-width: 684px)";
+$media-size-phone: "(max-width: 820px)";
 $media-size-tablet: "(max-width: 900px)";
 
 /* Variables for js, must be the same as these in @custom-media queries */
 :root {
-  --phoneWidth: (max-width: 684px);
+  --phoneWidth: (max-width: 820px);
   --tabletWidth: (max-width: 900px);
+
+  --pagefind-ui-scale: .8;
+  --pagefind-ui-primary: #222;
+  --pagefind-ui-text: #222;
+  --pagefind-ui-background: #fafafa;
+  --pagefind-ui-border: #eaeaea;
+  --pagefind-ui-tag: #eaeaea;
+  --pagefind-ui-border-width: 2px;
+  --pagefind-ui-border-radius: 8px;
+  --pagefind-ui-image-border-radius: 8px;
+  --pagefind-ui-image-box-ratio: 3 / 2;
+}
+
+[data-theme="dark"] body {
+  --pagefind-ui-primary: #a9a9b3;
+  --pagefind-ui-text: #a9a9b3;
+  --pagefind-ui-background: #1b1c1d;
+  --pagefind-ui-border: #3b3d42;
+  --pagefind-ui-tag: #3b3d42;
 }
 
 /* Content */

layouts/_default/single.html

@@ -11,7 +11,7 @@
             </p>
         </div>
 
-        <article>
+        <article {{ if .Site.Params.enablePagefind }} data-pagefind-body {{ end }}>
             <h2 class="post-title"><a href="{{ .Permalink }}">{{ .Title | markdownify }}</a></h2>
 
             {{ if .Params.Cover }}

layouts/partials/menu.html

@@ -19,5 +19,9 @@
             </li>
         </div>
         {{- end }}
+
+        {{- if templates.Exists "partials/header-search.html" -}}
+            {{ partial "header-search.html" . }}
+        {{- end }}
     </ul>
 </nav>

layouts/posts/single.html

@@ -17,7 +17,7 @@
       </p>
     </div>
 
-    <article>
+    <article {{ if .Site.Params.enablePagefind }} data-pagefind-body {{ end }}>
       <h1 class="post-title">
         <a href="{{ .Permalink }}">{{ .Title | markdownify }}</a>
       </h1>