feat: 404 page and footer always at bottom

brown-ccv · Jun 28, 2024 · 68a8c0e · 68a8c0e
1 parent eeb02ab
commit 68a8c0e
Show file tree

Hide file tree

Showing 3 changed files with 26 additions and 12 deletions.
diff --git a/src/layouts/Layout.astro b/src/layouts/Layout.astro
@@ -19,18 +19,20 @@ const { title, description } = Astro.props
   </head>
 
   <body>
-    <Header />
-    <main>
-      <article>
-        <div>
-          <div class="space-y-3 pb-6">
-            <h1>{title}</h1>
+    <div class="flex flex-col h-full">
+      <Header />
+      <main class="grow">
+        <article>
+          <div>
+            <div class="space-y-3 pb-6">
+              <h1>{title}</h1>
+            </div>
+            <HeaderDivider />
+            <slot />
           </div>
-          <HeaderDivider />
-          <slot />
-        </div>
-      </article>
-    </main>
-    <Footer />
+        </article>
+      </main>
+      <Footer />
+    </div>
   </body>
 </html>
diff --git a/src/pages/404.astro b/src/pages/404.astro
@@ -0,0 +1,7 @@
+---
+import Layout from "../layouts/Layout.astro"
+---
+
+<Layout title="Not found" description="">
+  <p>Whoops! Looks like that page doesn't exist!</p>
+</Layout>
diff --git a/src/styles/global.css b/src/styles/global.css
@@ -11,6 +11,11 @@
     @apply text-neutral-700;
   }
 
+  html,
+  body {
+    @apply h-full;
+  }
+
   body {
     @apply grid;
     @apply bg-neutral-50;