feat: search styling

fipguide · Jan 26, 2025 · 8071ec3 · 8071ec3
1 parent a4683ed
commit 8071ec3
Show file tree

Hide file tree

Showing 5 changed files with 41 additions and 34 deletions.
diff --git a/themes/fiptheme/assets/sass/stage.scss b/themes/fiptheme/assets/sass/stage.scss
@@ -2,7 +2,7 @@
     margin-bottom: 4rem;
 }
 
-.o-stage img {
+.o-stage > img {
     width: 100%;
     aspect-ratio: 4/1;
     max-width: 1320px;
@@ -15,17 +15,27 @@
     align-items: center;
 }
 
-.o-stage__search-container {
+.o-stage__search {
     position: absolute;
     width: 60%;
+    height: 6rem;
     left: 50%;
     transform: translate(-50%);
     display: flex;
+    background-color: white;
+
+    .pagefind-ui__drawer {
+        background-color: white;
+        padding: 0 1rem;
+        overscroll-behavior: contain;
+        height: 26rem;
+        overflow-y: scroll;
+    }
 }
 
 .o-stage__search-field {
     width: 100%;
-    height: 6rem;
+
     padding-left: 1rem;
     padding-right: 1rem;
     background-color: white;

diff --git a/themes/fiptheme/layouts/_default/home.html b/themes/fiptheme/layouts/_default/home.html
@@ -1,27 +1,18 @@
 {{ define "main" }}
-<link href="/pagefind/pagefind-ui.css" rel="stylesheet">
-<script src="/pagefind/pagefind-ui.js"></script>
-  <div id="search"></div>
-  <script>
-      window.addEventListener('DOMContentLoaded', (event) => {
-          new PagefindUI({ element: "#search", showSubResults: true });
-      });
-  </script>
-    {{ partial "stage.html" }}
-        <section class="container">
-            {{ .Content }}
-            {{ T "country"}}:
-            {{ range  where site.RegularPages "Section" "country"}}
-                <a href="{{ .Permalink }}">{{ .Title }}</a>
-            {{ end }}
-    </section>
-    <br>
-    <section class="container">
-        <div class="row">
-            <h3>Die neuesten Neuigkeiten 🔥</h3>
-            {{ range first 3 (where site.RegularPages "Section" "news") }}
-                {{ partial "teaser.html" . }}
-            {{ end }}
-        </div>
-    </section>
+  {{ partial "stage.html" }}
+  <section class="container">
+    {{ .Content }}
+    {{ T "country"}}:
+    {{ range  where site.RegularPages "Section" "country"}}
+        <a href="{{ .Permalink }}">{{ .Title }}</a>
+    {{ end }}
+  </section>
+  <section class="container">
+      <div class="row">
+          <h3>Die neuesten Neuigkeiten 🔥</h3>
+          {{ range first 3 (where site.RegularPages "Section" "news") }}
+              {{ partial "teaser.html" . }}
+          {{ end }}
+      </div>
+  </section>
 {{ end }}
diff --git a/themes/fiptheme/layouts/partials/head.html b/themes/fiptheme/layouts/partials/head.html
@@ -10,7 +10,16 @@
 {{ $options := (dict "targetPath" "css/styles.css" "outputStyle" "compressed") }}
 {{ $style := resources.Get "sass/main.scss" | toCSS $options | minify }}
 <link rel="stylesheet" href="{{ $style.RelPermalink }}" media="screen" />
+<link rel="stylesheet" href="/pagefind/pagefind-ui.css">
+<script src="/pagefind/pagefind-ui.js"></script>
+<script>
+  window.addEventListener('DOMContentLoaded', (event) => {
+    new PagefindUI({ element: "#search", showSubResults: true });
+  });
+</script>
 
 <!-- include a favicon for your site if you have it, else omit the line below 
      Location of favicon can be in mytheme/static/favicon.ico -->
 <link rel="shortcut icon" type="image/x-icon" href="/favicon.ico" />
+
+
diff --git a/themes/fiptheme/layouts/partials/stage.html b/themes/fiptheme/layouts/partials/stage.html
@@ -1,8 +1,5 @@
 <section class="o-stage container-fluid">
   {{ $image := resources.Get "images/startpage.webp" }}
-  <img src="{{ $image.RelPermalink }}" alt="">
-  <form class="o-stage__search-container" action="javascript:alert('Die Suche ist leider noch nicht implementiert 😭');">
-    <input class="o-stage__search-field" id="search" type="search" placeholder="{{ T "search-placeholder" }}">
-    <button class="o-stage__button" type="submit">{{ T "search-button" }}</button>
-  </form>
+  <img src="{{ $image.RelPermalink }}" alt="" loading="lazy">
+  <div id="search" class="o-stage__search"></div>
 </section>
diff --git a/themes/fiptheme/layouts/partials/teaser.html b/themes/fiptheme/layouts/partials/teaser.html
@@ -1,6 +1,6 @@
 <a href="{{ .RelPermalink }}" class="m-teaser col-12 col-lg-4">
   {{ $image := .Page.Resources.GetMatch "image.webp" }}
-  <img class="m-teaser__image" src="{{ $image.RelPermalink }}" alt="">
+  <img class="m-teaser__image" src="{{ $image.RelPermalink }}" alt="" loading="lazy">
   {{ $dateMachine := .Date | time.Format "2006-01-02T15:04:05-07:00" }}
   {{ $dateHuman := .Date | time.Format ":date_long" }}
   <time class="m-teaser__dateline" datetime="{{ $dateMachine }}">{{ $dateHuman }}</time>