Add search page and its styles

src/pages/search.astro

@@ -0,0 +1,54 @@
+---
+import Footer from "@components/Footer.astro";
+import Header from "@components/Header.astro";
+import Layout from "@layouts/Layout.astro";
+import Main from "@layouts/Main.astro";
+---
+
+<Layout title={`Search | ${import.meta.env.PUBLIC_SITE_TITLE}`}>
+  <Header activeNav="search" />
+  <Main pageTitle="Search" pageDesc="Search any article ...">
+    <label class="search-wrapper">
+      <span class="sr-only">Search</span>
+      <span class="search-icon">
+        <svg xmlns="http://www.w3.org/2000/svg"
+          ><path
+            d="M19.023 16.977a35.13 35.13 0 0 1-1.367-1.384c-.372-.378-.596-.653-.596-.653l-2.8-1.337A6.962 6.962 0 0 0 16 9c0-3.859-3.14-7-7-7S2 5.141 2 9s3.14 7 7 7c1.763 0 3.37-.66 4.603-1.739l1.337 2.8s.275.224.653.596c.387.363.896.854 1.384 1.367l1.358 1.392.604.646 2.121-2.121-.646-.604c-.379-.372-.885-.866-1.391-1.36zM9 14c-2.757 0-5-2.243-5-5s2.243-5 5-5 5 2.243 5 5-2.243 5-5 5z"
+          ></path>
+        </svg>
+      </span>
+      <input
+        class="search-input"
+        placeholder="Search for anything..."
+        type="text"
+        name="search"
+        autocomplete="off"
+      />
+    </label>
+    <!-- <ul>
+      {
+        sortedPosts.map(({ frontmatter }) => {
+          return (
+            <Card href={`/posts/${frontmatter.slug}`} post={frontmatter} />
+          );
+        })
+      }
+    </ul> -->
+  </Main>
+  <Footer />
+</Layout>
+
+<style>
+  .search-wrapper {
+    @apply relative block;
+  }
+  .search-icon {
+    @apply absolute inset-y-0 left-0 flex items-center pl-2 opacity-75;
+  }
+  .search-input {
+    @apply placeholder:italic placeholder:text-opacity-75 py-3 pl-10 pr-3 
+    block bg-skin-fill w-full rounded
+    border border-skin-fill border-opacity-40 
+    focus:outline-none focus:border-skin-fill;
+  }
+</style>