feat: search styling

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

Hide file tree

Showing 4 changed files with 34 additions and 16 deletions.
diff --git a/themes/fiptheme/assets/sass/stage.scss b/themes/fiptheme/assets/sass/stage.scss
@@ -17,31 +17,41 @@
 
 .o-stage__search {
     position: absolute;
-    width: 60%;
+    width: 80%;
     height: 6rem;
     left: 50%;
     transform: translate(-50%);
     display: flex;
-    background-color: white;
+    z-index: 3;
+
+    @include media-breakpoint-up(md) {
+        width: 60%;
+    }
+
+    .pagefind-ui__suppressed {
+        display: none;
+    }
 
     .pagefind-ui__drawer {
         background-color: white;
         padding: 0 1rem;
         overscroll-behavior: contain;
-        height: 26rem;
+        height: 35rem;
         overflow-y: scroll;
+        position: relative;
+        top: -.7rem;
+        border-left: var(--pagefind-ui-border-width) solid var(--pagefind-ui-border);
+        border-right: var(--pagefind-ui-border-width) solid var(--pagefind-ui-border);
+        border-bottom: var(--pagefind-ui-border-width) solid var(--pagefind-ui-border);
+        border-bottom-left-radius: var(--pagefind-ui-border-radius);
+        border-bottom-right-radius: var(--pagefind-ui-border-radius);
     }
 }
 
-.o-stage__search-field {
-    width: 100%;
-
-    padding-left: 1rem;
-    padding-right: 1rem;
-    background-color: white;
-    border-radius: 1rem 0 0 1rem;
-}
-
-.o-stage__button {
-    border-radius: 0 1rem 1rem 0;
+.curtain:has(~ .o-stage .o-stage__search:focus-within)  {
+    background-color: rgba(0, 0, 0, .8);
+    inset: 0;
+    position: fixed;
+    z-index: 2;
+    transition: .3s ease;
 }
diff --git a/themes/fiptheme/assets/sass/styles.scss b/themes/fiptheme/assets/sass/styles.scss
@@ -4,8 +4,15 @@ html {
 }
 
 body {
-  background-color: $gray-300;
+  background-color: $gray-200;
   font-size: 1.8rem;
+  overflow-x: hidden;
+  font-family: Arial,Helvetica,sans-serif;
+}
+
+header {
+  z-index: 3;
+  position: relative;
 }
 
 a {

diff --git a/themes/fiptheme/layouts/_default/baseof.html b/themes/fiptheme/layouts/_default/baseof.html
@@ -6,7 +6,7 @@
   <head>
     {{ partial "head.html" . }}
   </head>
-  <body class="bg-light">
+  <body>
     <header>{{ partial "header.html" . }}</header>
     <main id="content" data-pagefind-body>{{ block "main" . }}{{ end }}</main>
     <footer>{{ partial "footer.html" . }}</footer>

diff --git a/themes/fiptheme/layouts/_default/home.html b/themes/fiptheme/layouts/_default/home.html
@@ -1,4 +1,5 @@
 {{ define "main" }}
+<div class="curtain"></div>
   {{ partial "stage.html" }}
   <section class="container">
     {{ .Content }}