feat: Add custom 404 page (#35)

src/layouts/BaseLayout.astro

@@ -84,14 +84,17 @@ const pageTitle = Astro.url.pathname === "/" ? title : `${title} · Namesake`;
       <slot />
     </main>
     <Footer />
-  </body><style>
-    main {
-      flex: 1;
-      padding: var(--space-2xl) var(--space-l);
-      min-width: 0;
-      width: 100%;
-      max-width: 1200px;
-      margin-inline: auto;
-    }
-  </style>
+    <style>
+      main {
+        flex: 1;
+        padding: var(--space-2xl) var(--space-l);
+        min-width: 0;
+        width: 100%;
+        max-width: 1200px;
+        margin-inline: auto;
+        display: flex;
+        flex-direction: column;
+      }
+    </style>
+  </body>
 </html>

src/pages/404.astro

@@ -0,0 +1,37 @@
+---
+import { Image } from "astro:assets";
+import emptyShell from "./_images/empty-shell.png";
+import BaseLayout from "../layouts/BaseLayout.astro";
+---
+
+<BaseLayout
+  title="We couldn’t find that page"
+  description="Looks like nobody’s home. Maybe try a different page?"
+>
+  <div class="error">
+    <Image src={emptyShell} alt="Namesake empty shell" width={240} />
+    <h1>There’s nothing here</h1>
+    <p>
+      We couldn’t find that page. Check the spelling of the URL or <a href="/"
+        >go home</a
+      >.
+    </p>
+  </div>
+</BaseLayout>
+
+<style lang="scss">
+  .error {
+    flex: 1;
+    display: flex;
+    flex-direction: column;
+    align-items: center;
+    justify-content: center;
+    text-align: center;
+    gap: var(--space-l);
+  }
+
+  p {
+    font-size: var(--step-3);
+    text-wrap: balance;
+  }
+</style>

src/pages/index.astro

@@ -2,8 +2,8 @@
 import { Image } from "astro:assets";
 import BaseLayout from "../layouts/BaseLayout.astro";
 import { RiArrowRightLine } from "react-icons/ri";
-import illustration from "./namesake-form.png";
-import formIllustration from "./form-snail.png";
+import illustration from "./_images/namesake-form.png";
+import formIllustration from "./_images/form-snail.png";
 ---
 
 <BaseLayout
@@ -107,11 +107,9 @@ import formIllustration from "./form-snail.png";
   }
 
   img {
-    mix-blend-mode: multiply;
     width: 600px;
     max-width: 100%;
     order: 1;
-    user-select: none;
   }
 
   h1 {

src/styles/base.css

@@ -89,6 +89,12 @@ a {
   }
 }
 
+img {
+  mix-blend-mode: multiply;
+  max-width: 100%;
+  user-select: none;
+}
+
 .nowrap {
   white-space: nowrap;
 }