Search modal tweaked

brklntmhwk · Apr 4, 2024 · 8d0434f · 8d0434f
1 parent 1e19935
commit 8d0434f
Show file tree

Hide file tree

Showing 7 changed files with 71 additions and 29 deletions.
diff --git a/public/border-image.gif b/public/border-image.gif
diff --git a/public/fonts/DotGothic16-Regular.woff2 b/public/fonts/DotGothic16-Regular.woff2
diff --git a/src/components/Navigation.astro b/src/components/Navigation.astro
@@ -5,12 +5,13 @@ import Search from '@/components/Search.astro'
 ---
 
 <nav data-pagefind-ignore="all">
-  <a class="blog-title" href="/"
-    ><Svg iconName="logo" width={54} height={48} /></a
-  >
+  <a class="blog-title" href="/">
+    <Svg iconName="logo" width={54} height={50} />
+  </a>
   <input type="checkbox" id="menu-toggle-check" />
-  <label for="menu-toggle-check" class="hamburger-icon-btn"><span></span></label
-  >
+  <label for="menu-toggle-check" class="hamburger-icon-btn">
+    <span></span>
+  </label>
   <div class="nav-menu-container">
     <div class="nav-links">
       <NavLink href="/">Home</NavLink>
@@ -30,7 +31,6 @@ import Search from '@/components/Search.astro'
     </div>
   </div>
 </nav>
-
 <style>
   nav {
     background-color: rgba(255 255 255 0.4);
@@ -42,10 +42,10 @@ import Search from '@/components/Search.astro'
     top: 0;
     left: 0;
     right: 0;
-    z-index: 10;
-    height: 2.75rem;
+    z-index: 50;
+    height: 4.25rem;
     box-sizing: border-box;
-    padding: 2.75rem 1.25rem;
+    padding: 0.5rem 1.25rem;
     display: flex;
     align-items: center;
     justify-content: space-between;
@@ -55,18 +55,23 @@ import Search from '@/components/Search.astro'
     border-bottom: 2px solid transparent;
     text-decoration: none;
   }
+  nav a.blog-title {
+    display: flex;
+    justify-content: center;
+    align-items: center;
+  }
   .nav-menu-container {
     width: 100%;
     height: 100vh;
     position: fixed;
     top: 0;
     left: 100%;
-    z-index: 80;
+    z-index: 50;
     display: flex;
     flex-direction: column;
     gap: 3.5rem;
     padding-top: 3rem;
-    margin-top: 5.35rem;
+    margin-top: 4.25rem;
     background-color: #f4f4f4;
     transition: all 0.2s;
   }
@@ -111,7 +116,7 @@ import Search from '@/components/Search.astro'
     display: flex;
     justify-content: center;
     align-items: center;
-    z-index: 90;
+    z-index: 50;
   }
   .hamburger-icon-btn span,
   .hamburger-icon-btn span:before,
@@ -151,9 +156,9 @@ import Search from '@/components/Search.astro'
 
   @media (min-width: 768px) {
     nav {
-      height: 2.85rem;
+      height: 5.25rem;
       box-sizing: border-box;
-      padding: 2.75rem 1.5rem;
+      padding: 0.85rem 1.5rem;
     }
     .nav-menu-container {
       /* width: 100%; */
@@ -166,7 +171,7 @@ import Search from '@/components/Search.astro'
       justify-content: space-between;
       flex-direction: unset;
       align-items: center;
-      gap: 3.75rem;
+      gap: 4rem;
       padding-top: 0;
       margin-top: 0;
       background-color: transparent;
@@ -180,10 +185,11 @@ import Search from '@/components/Search.astro'
       display: flex;
     }
     .nav-links {
-      gap: 2.75rem;
+      gap: 3.25rem;
     }
     .icon-links {
-      gap: 1.75rem;
+      justify-content: unset;
+      gap: 2rem;
     }
     label.hamburger-icon-btn {
       display: none;

diff --git a/src/components/Search.astro b/src/components/Search.astro
@@ -22,6 +22,9 @@ import Svg from '@/components/Svg/index.astro'
     height: 100vh;
     padding-top: 1.5rem;
     z-index: 90;
+    display: flex;
+    justify-content: center;
+    align-items: flex-start;
     background-color: hsla(223, 13%, 10%, 0.6);
     backdrop-filter: blur(6px);
     -webkit-backdrop-filter: blur(6px);
@@ -40,13 +43,22 @@ import Svg from '@/components/Svg/index.astro'
     display: none;
   }
   #search-wrapper {
+    color: #fff;
     background-color: color-mix(in srgb, var(--bg) 97%, var(--fg) 3%);
-    max-width: 32rem;
-    max-height: 100vh;
-    padding: 1.25rem;
-    border-radius: 0.15rem;
-    margin: 0 auto;
+    width: 100%;
+    max-width: 38rem;
+    max-height: 85vh;
+    padding: 1.5rem;
+    border-style: solid;
+    border-width: 8px;
+    border-image-source: url('/border-image.gif');
+    border-image-slice: 12;
+    border-image-repeat: repeat;
+    border-image-outset: 0.2rem;
+    image-rendering: pixelated;
+    margin: 0 1.5rem;
     overflow-y: auto;
+    box-sizing: border-box;
   }
   #search-icon-button {
     background-color: transparent;

diff --git a/src/layouts/AboutLayout.astro b/src/layouts/AboutLayout.astro
@@ -43,8 +43,7 @@ const meta = await getEntry('meta', 'site-data')
       padding: 2.25rem 0;
       display: flex;
       justify-content: center;
-      gap: 1.5rem;
-      justify-content: center;
+      gap: 2.25rem;
     }
   }
   @media (min-width: 1024px) {

diff --git a/src/layouts/BaseLayout.astro b/src/layouts/BaseLayout.astro
@@ -34,6 +34,11 @@ const { title, description } = Astro.props
           'main'
           'footer';
       }
+      @media (min-width: 768px) {
+        .base-wrapper {
+          padding-top: 5rem;
+        }
+      }
       @media (min-width: 1024px) {
         main {
           /* width: 100%; */
@@ -43,13 +48,13 @@ const { title, description } = Astro.props
         }
 
         .base-wrapper {
-          width: 100%;
+          /* width: 100%; */
           min-height: 100vh;
           padding-top: 0;
           margin: 0;
-          display: grid;
+          /* display: grid; */
           grid-template-columns: 18rem 1fr;
-          grid-template-rows: 1fr auto;
+          /* grid-template-rows: 1fr auto; */
           /* grid-auto-columns: 18rem minmax(50rem, auto); */
           grid-auto-rows: minmax(100px, auto);
           grid-template-areas:

diff --git a/src/styles/global.css b/src/styles/global.css
@@ -67,10 +67,16 @@
   font-display: swap;
   font-stretch: 200%;
 }
+@font-face {
+  font-family: 'DotGothic16';
+  src: url('/fonts/DotGothic16-Regular.woff2') format('woff2');
+  font-weight: 400;
+  font-style: normal;
+  font-display: swap;
+}
 body {
   width: 100%;
   font-family: 'PixelMplus10', sans-serif;
-  /* font-weight: 400; */
   margin: 0;
   padding: 0;
   text-align: left;
@@ -85,7 +91,17 @@ body {
 main {
   /* width: 100%; */
   grid-area: main;
-  padding: 2.25em 1.25em;
+  padding: 2.25rem 1.5rem;
+}
+@media (min-width: 768px) {
+  main {
+    padding: 2.25rem 2.75rem;
+  }
+}
+@media (min-width: 1024px) {
+  main {
+    padding: 2rem 2.25rem;
+  }
 }
 h1,
 h2,
@@ -132,8 +148,12 @@ a.hover::before {
   color: red;
 }
 p {
+  font-size: 0.9em;
   margin-bottom: 1em;
 }
+.prose {
+  font-family: 'DotGothic16';
+}
 .prose p {
   margin-bottom: 2em;
 }