amend! Use Pagefind's UI for the full search

Use Pagefind's UI for the full search It is much nicer that way, as it offers filters and sorting and stuff. This requires a bit of CSS to make the look & feel consistent with the rest of the site. Co-authored-by: Toon Claes <toon@iotcl.com> Signed-off-by: Johannes Schindelin <johannes.schindelin@gmx.de>
git · Sep 19, 2024 · 2be34d4 · 2be34d4
1 parent 42eea11
commit 2be34d4
Show file tree

Hide file tree

Showing 6 changed files with 44 additions and 5 deletions.
diff --git a/assets/sass/forms.scss b/assets/sass/forms.scss
@@ -39,7 +39,7 @@ form#search {
   width: 262px;
   padding-left: 32px;
   @include background-image-2x($baseurl + "images/icons/search", 17px, 17px, 10px 50%);
-  background-color: #fcfcfa !important;
+  background-color: $main-bg !important;
   border: solid 1px #ceccc5;
   @include border-radius(20px);
   @include box-shadow(inset 0 1px 4px #ddd);

diff --git a/assets/sass/layout.scss b/assets/sass/layout.scss
@@ -40,7 +40,7 @@ aside {
 #main {
   padding: 22px;
   margin-bottom: 35px;
-  background-color: #fcfcfa;
+  background-color: $main-bg;
   border: solid 1px #e2e0d8;
   @include border-radius(5px);
 

diff --git a/assets/sass/normalize.scss b/assets/sass/normalize.scss
@@ -41,8 +41,7 @@ hgroup,
 main,
 menu,
 nav,
-section,
-summary {
+section {
   display: block;
 }
 

diff --git a/assets/sass/search.scss b/assets/sass/search.scss
@@ -143,3 +143,43 @@ ol.full-search-results {
     margin-top: 4px;
   }
 }
+
+// Search results page
+#search-div {
+  border: solid 1px $base-border-color;
+  background: $main-bg;
+  padding: 22px;
+  @include border-radius(5px);
+
+  ol {
+    background-color: $callout-color;
+    @include border-radius(3px);
+    padding: 8px 14px 4px;
+    margin: 0 0 1.4em;
+    list-style: none;
+  }
+
+
+  .pagefind-ui__result-inner > .pagefind-ui__result-title {
+    font-size: 16px;
+    line-height: $base-line-height * 2;
+    font-weight: bold;
+  }
+
+  .pagefind-ui__result-tags {
+    list-style: none;
+    color: $light-font-color;
+    margin-bottom: 1.4em;
+    margin-left: 0;
+  }
+}
+
+button {
+  border-color: $link-color;
+  color: $link-color;
+  background: $callout-color;
+  font-weight: bold;
+  @include border-radius(3px);
+  outline: none;
+  padding: 0 0.5em;
+}
diff --git a/assets/sass/variables.scss b/assets/sass/variables.scss
@@ -32,3 +32,4 @@ $base-border-color:  #d8d7cf;
 $callout-color:      #e9e8e0;
 
 $black-3 : #333333;
+$main-bg: #fcfcfa;
diff --git a/layouts/_default/baseof.html b/layouts/_default/baseof.html
@@ -52,7 +52,6 @@ <h1>Redirecting&hellip;</h1>
 
   <link href="{{ relURL "favicon.ico" }}" rel='shortcut icon' type='image/x-icon'>
 
-  {{ if eq $section "search" }}<link href="{{ relURL "pagefind/pagefind-ui.css" }}" rel="stylesheet">{{ end }}
   {{ $style := resources.Get "sass/application.scss" | resources.ExecuteAsTemplate "application.scss" . | css.Sass | resources.Minify }}
   <link rel="stylesheet" href="{{ $style.RelPermalink }}">
   <script src="{{ relURL "js/modernizr.js" }}"></script>
Original file line number	Diff line number	Diff line change
Expand Up		@@ -32,3 +32,4 @@ $base-border-color: #d8d7cf;
		$callout-color: #e9e8e0;

		$black-3 : #333333;
		$main-bg: #fcfcfa;