Fix css style for search modal.

Author: nikoshell

src/components/search/Search.astro

@@ -1,19 +1,20 @@
 ---
 import SearchComponent from "astro-pagefind/components/Search";
 import Button from "@ui/Button.astro";
+
 ---
 
 <div class="search-wrapper hidden" style="display: none;">
 
-  <div class="w-full flex items-center justify-between z-40 h-0 md:h-[85px] m-auto ">
+  <div class="search-header flex items-center justify-between z-40 h-0 md:h-[85px] m-auto ">
     <h2 class="text-black text-4xl ml-10 top-[46px] md:top-[85px]">Search<h2/>
     <Button
+      id="search-close"
       icon="close"
       iconSize="fa-xl"
-      class="search-close w-[3em] h-[3em] top-[46px] md:top-[85px]"
+      class="w-[3em] h-[3em] top-[46px] md:top-[85px]"
     />
   </div>
-
   <div class="modal__overlay"></div>
 
   <SearchComponent
@@ -33,7 +34,7 @@ document.addEventListener("DOMContentLoaded", function () {
   const searchWrapper = document.querySelector(".search-wrapper") as HTMLElement | null;
   const searchContainer = document.querySelector(".pagefind-ui") as HTMLElement | null;
   const searchInput = searchContainer?.querySelector("input") as HTMLInputElement | null;
-  const closeButton = document.querySelector(".search-close") as HTMLElement | null;
+  const closeButton = document.querySelector("#search-close") as HTMLElement | null;
   const searchButton = document.getElementById("searchButton") as HTMLElement | null;
 
   let selectedIndex = -1;
@@ -150,49 +151,3 @@ document.addEventListener("DOMContentLoaded", function () {
   closeButton?.addEventListener("click", closeSearch);
 });
 </script>
-
-<style is:global>
-  .search-wrapper div{
-    max-width: calc(48rem + 8vw);
-  }
-  .search-wrapper h2 {
-    position: relative;
-    left: -12px;
-    z-index:100;
-  }
-  .modal__overlay {
-    z-index: 1;
-    position: absolute;
-    top: 0;
-    left: 0;
-    width: 100%;
-    height: 100%;
-  }
-
-  .search-wrapper {
-    width: 100%;
-    height: 100%;
-    position: fixed;
-    display: block;
-    top: 0;
-    bottom: 0;
-    left: 0;
-    right: 0;
-    z-index: 500;
-    box-sizing: border-box;
-    display: none;
-    transition: opacity ease-out 0.2s;
-    background: rgba(37,40,43,0.9);
-    z-index: 100;
-  }
-
-  .search-wrapper :global(.search-close) {
-    position: relative;
-    left: -12px;
-    margin: 0;
-    border: 0;
-    transition: opacity ease-out 0.2s;
-    z-index: 10;
-  }
-
-</style>

src/layouts/HomePageLayout.astro

@@ -50,6 +50,7 @@ const jsonLd = JSON.stringify({
     <a href="#main-content" class="sr-only"> Skip to main content</a>
 
     <Search />
+
     <Header />
 
     <main id="main-content" class="layout-wrapper overflow-x-clip">

src/layouts/Layout.astro

@@ -2,6 +2,7 @@
 import Header from "../components/header/header.astro";
 import Footer from "../components/footer.astro";
 import BaseHead from "../components/BaseHead.astro";
+import Search from "@components/search/Search.astro";
 
 export interface Props {
   title: string;
@@ -20,6 +21,7 @@ const { title, description } = Astro.props;
   <div class="flex flex-col items-stretch min-h-screen">
     <a href="#main-content" class="sr-only"> Skip to main content</a>
 
+    <Search />
     <Header />
 
     <main id="main-content" class="layout-wrapper overflow-x-clip">

src/styles/global.css

@@ -253,3 +253,126 @@ p.cross::after {
     --max-fs: 1.5;
   }
 }
+
+.search-pagefind {
+  padding: 85px 10px 10px 10px;
+  position: relative;
+  max-height: 80vh;
+  width: 100%;
+  max-width: 48rem;
+  margin: auto;
+  background: #f5e5d6;
+  border-radius: 0.5rem;
+  box-shadow: 0 8px 24px -2px rgba(0, 0, 0, 0.4);
+  overflow: auto;
+  transition: background ease-out 0.2s;
+  z-index: 2;
+  overflow: auto;
+  height: 100%;
+
+  border-bottom: 1px solid #e1e3e6;
+  border-bottom-color: rgb(225, 227, 230);
+}
+
+.pagefind-ui__search-input {
+  border: 1px solid #ccc;
+  border-radius: 20px;
+  padding-inline-start: 0.75rem;
+  padding-inline-end: 0.5rem;
+  background-color: #fff;
+  font-size: 16px;
+  color: #5f3d1b;
+}
+
+.pagefind-ui__result.selected {
+  background-color: #f5f5f5;
+  background-image: linear-gradient(to right, #3684b6 7px, transparent 5px);
+  -webkit-transform: translate3d(0, 0, 0);
+  transform: translate3d(0, 0, 0);
+}
+.pagefind-ui__result:hover {
+  background-color: #f5f5f5;
+}
+.pagefind-ui__message {
+  margin: 1em;
+}
+.pagefind-ui__result mark {
+  background: #f9eb5d;
+  background-image: linear-gradient(to right, #f9eb5d 10%, #fcf4a7 100%);
+  margin: 4px;
+  padding-right: 6px;
+  padding-left: 6px;
+  padding-top: 2px;
+  padding-bottom: 2px;
+  color: #000000;
+  font-family: monospace;
+  border-radius: 4px;
+}
+.pagefind-ui {
+  --pagefind-ui-scale: 1;
+  --pagefind-ui-primary: #141f36;
+  --pagefind-ui-text: black;
+  --pagefind-ui-border: #d8d8d8;
+  --pagefind-ui-border-width: 2px;
+  --pagefind-ui-border-radius: 0.5rem;
+  /*width: 50%;*/
+}
+.pagefind-ui .pagefind-ui__drawer:not(.pagefind-ui__hidden) {
+  z-index: 9999;
+  position: relative;
+  overflow: auto;
+  height: 100%;
+}
+.pagefind-ui__result {
+  padding: 0 2em 1em !important;
+}
+.pagefind-ui .pagefind-ui__result-link {
+  color: var(--pagefind-ui-primary);
+}
+.pagefind-ui .pagefind-ui__result-excerpt {
+  color: var(--pagefind-ui-text);
+}
+
+.search-header {
+  max-width: 48rem;
+  margin: auto;
+}
+.search-header h2 {
+  position: relative;
+  left: -12px;
+  z-index: 100;
+}
+.modal__overlay {
+  z-index: 1;
+  position: absolute;
+  top: 0;
+  left: 0;
+  width: 100%;
+  height: 100%;
+}
+
+.search-wrapper {
+  width: 100%;
+  height: 100%;
+  position: fixed;
+  display: block;
+  top: 0;
+  bottom: 0;
+  left: 0;
+  right: 0;
+  z-index: 500;
+  box-sizing: border-box;
+  display: none;
+  transition: opacity ease-out 0.2s;
+  background: rgba(37, 40, 43, 0.9);
+  z-index: 100;
+}
+
+#search-close {
+  position: relative;
+  left: -12px;
+  margin: 0;
+  border: 0;
+  transition: opacity ease-out 0.2s;
+  z-index: 10;
+}