feat: Improve styling of search

Author: MoritzWeber0

assets/sass/_variables.scss

@@ -16,7 +16,7 @@ $color-onLight: #000000;
 $color-table-border: #5b5b5b;
 
 html {
-  --pagefind-ui-scale: 1;
+  --pagefind-ui-scale: 1 !important;
   --pagefind-ui-text: #000;
   --link-default: #{$link-default};
   --link-hovered: #{$link-hovered};

assets/sass/search.scss

@@ -1,55 +1,56 @@
-.o-search {
+#search {
   width: 100%;
-  height: 6rem;
   display: flex;
   z-index: 6;
 
   @media print {
     display: none;
   }
 
-  &--contentpage {
-    position: sticky;
-    display: none;
-    top: 10vh;
-    opacity: 0;
-    visibility: hidden;
-    transition: opacity 0.5s ease;
+  .pagefind-ui__search-input,
+  .pagefind-ui__message {
+    font-family: "Roboto", Arial, Helvetica, sans-serif;
+    font-weight: 400;
   }
 
-  &--show {
-    display: block;
-    opacity: 1;
-    visibility: visible;
-    z-index: 6;
+  .pagefind-ui__message {
+    padding: 1rem;
   }
 
-  .pagefind-ui__search-input,
-  .pagefind-ui__message,
-  .pagefind-ui__search-clear {
-    font-family: "Roboto", Arial, Helvetica, sans-serif;
+  .pagefind-ui__results-area {
+    margin-top: 0;
+  }
+
+  .pagefind-ui__results li:last-child {
+    border-bottom: none;
   }
 
   input.pagefind-ui__search-input {
     z-index: 6;
     outline: 0.2rem solid transparent;
     border: var(--border);
     box-shadow: var(--box-shadow);
+    border-radius: var(--border-radius-l);
 
     @include focus-indicator(0.2rem);
 
     &::placeholder {
       opacity: 0.7;
       color: var(--color-body);
     }
+
+    // This selector is used to identify if search results are visible
+    &:has(
+      + .pagefind-ui__search-clear
+        + .pagefind-ui__drawer
+        .pagefind-ui__results-area
+    ) {
+      border-radius: var(--border-radius-l) var(--border-radius-l) 0 0;
+    }
   }
 
   button.pagefind-ui__search-clear {
-    z-index: 6;
-    height: auto;
-    padding: 1rem;
-    top: 1rem;
-    margin-right: 0.7rem;
+    display: none;
   }
 
   .pagefind-ui__suppressed {
@@ -62,14 +63,26 @@
 
   .pagefind-ui__drawer {
     background-color: var(--bg-default);
-    padding: 0 1rem 1rem 1rem;
+    padding: 0 1rem;
     overscroll-behavior: contain;
-    height: 35rem;
-    top: 0.4rem;
     overflow-y: scroll;
-    position: relative;
-    border-radius: var(--pagefind-ui-border-radius);
+    position: absolute;
+    top: 6.2rem;
+    width: 100%;
     z-index: 6;
+    max-height: 50vh;
+    border: var(--border);
+  }
+
+  .pagefind-ui__result {
+    padding: 2rem 0;
+    margin: 0 1rem;
+    border-top: 2px solid grey;
+  }
+
+  .pagefind-ui__result-inner,
+  .pagefind-ui__result-thumb {
+    margin-top: 0;
   }
 
   .pagefind-ui__result-link {
@@ -113,3 +126,20 @@
     }
   }
 }
+
+.o-search {
+  &--contentpage {
+    position: absolute;
+    display: none;
+    opacity: 0;
+    visibility: hidden;
+    transition: opacity 0.5s ease;
+  }
+
+  &--show {
+    display: block;
+    opacity: 1;
+    visibility: visible;
+    z-index: 6;
+  }
+}