1 files changed, 53 insertions, 25 deletions
diff --git a/layouts/_default/search.html b/layouts/_default/search.html
index 4bf77f2..e61c9a0 100644
--- a/layouts/_default/search.html
+++ b/layouts/_default/search.html
@@ -1,30 +1,58 @@
-{{ define "footerfiles" }}
-<script src="https://code.jquery.com/jquery-3.3.1.min.js"></script>
-<script src="https://cdnjs.cloudflare.com/ajax/libs/fuse.js/3.2.1/fuse.min.js"></script>
-<script src="https://cdnjs.cloudflare.com/ajax/libs/mark.js/8.11.1/jquery.mark.min.js"></script>
-<script src="{{ "js/search.js" | absURL }}"></script>
-{{ end }}
-
 {{ define "main" }}
-<section class="bg-near-white pt5">
-    <div class="mw7 center pv4" >
-        <form action="{{ .Permalink }}">
-            <input id="search-query" name="s"/>
-        </form>
-        <div id="search-results">
-            <h3>Matching pages</h3>
-        </div>
+  <div class="max-w-screen-md mx-auto p-1">
+    <header>
+      <h2 class="baskerville px-1">
+        {{ T "search" | humanize }}
+      </h2>
+    </header>
+
+    <form action="{{ .Permalink }}">
+      <input
+        id="search-query"
+        name="q"
+        placeholder="{{ T "search_placeholder" }}"
+        class="p-2 w-full border"
+      />
+    </form>
+
+    <div id="search-results" class="my-2">
+      <p class="p-4 text-xl font-semibold text-center">
+        {{ T "search_request" }}
+      </p>
     </div>
-</section>
-<!-- this template is sucked in by search.js and appended to the search-results div above. So editing here will adjust style -->
-<script id="search-result-template" type="text/x-js-template">
- <div id="summary-${key}" class="bt bb b--black-10 ph4">
- <h4><a href="${link}">${title}</a></h4>
- <p>${snippet}&hellip;</p>
+  </div>
 
+  <template id="no-match">
+    <p
+      class="bg-red-100 p-4 text-red-600 text-xl font-semibold text-center border rounded border-current"
+    >
+      {{ T "no_match_found" }}
+    </p>
+  </template>
+  <template id="search-result-template">
+    <article class="py-2 border-y border-gray-200 search_summary">
+      <a class="hover:opacity-50 search_link" href="">
+        <time class="float-right text-sm px-8 search_time"></time>
+        <h4 class="baskerville my-2 search_title"></h4>
+        <div class="search_snippet"></div>
+      </a>
+    </article>
+  </template>
+  <script
+    async
+    src="https://cdnjs.cloudflare.com/ajax/libs/fuse.js/7.0.0/fuse.min.js"
+    integrity="sha512-GrJ4P9yra6dftp5O0eaKFKS4ch1FYn1xR/VCHQIMJO1LNqcKhjkAkAETHYoE81Ffh3BjCJMWA/AZSYP521jxFA=="
+    crossorigin="anonymous"
+    referrerpolicy="no-referrer"
+  ></script>
 
- ${ isset tags }<p><i class="fa fa-tags"></i> Tags: ${tags}</p>${ end }
- ${ isset categories }<p><i class="fa fa-bookmark"></i> Categories: ${categories}</p>${ end }
- </div>
-</script>
+  {{ with resources.Get "js/search.js" | resources.Minify | fingerprint }}
+    <script
+      async
+      src="{{ .RelPermalink }}"
+      integrity="{{ .Data.Integrity }}"
+      crossorigin="anonymous"
+      referrerpolicy="no-referrer"
+    ></script>
+  {{ end }}
 {{ end }}