Styled 404 page

Naapperas · Dec 25, 2023 · 296434c · 296434c
1 parent 25dc514
commit 296434c
Show file tree

Hide file tree

Showing 3 changed files with 8 additions and 4 deletions.
diff --git a/src/components/Page/Home/Introduction.astro b/src/components/Page/Home/Introduction.astro
@@ -4,7 +4,7 @@ import { Image } from "astro:assets";
 import banner from "./me.jpg";
 ---
 
-<header class="flex flex-col md:flex-row gap-10 md:mt-44 w-4/5 md:w-3/5">
+<header class="flex flex-col md:flex-row gap-10 w-4/5 md:w-3/5">
     <Image
         src={banner}
         alt="Home Page Banner"

diff --git a/src/layouts/Content.astro b/src/layouts/Content.astro
@@ -7,7 +7,7 @@ const { title, bgColor } = Astro.props;
 ---
 
 <Base title={title} bgColor={bgColor}>
-  <main class="px-10 py-8 items-center flex-col flex-1 flex">
+  <main class="px-10 py-8 items-center justify-center flex-col flex-1 flex">
     <slot />
   </main>
 </Base>
diff --git a/src/pages/404.astro b/src/pages/404.astro
@@ -5,6 +5,10 @@ import Layout from "../layouts/Content.astro";
 ---
 
 <Layout title="404: Not Found">
-    <h1>Looks like the page you attempted to reach does not exist</h1>
-    <a href="/">Go back to the homepage</a>
+    <h1 class="text-3xl">
+        Looks like the page you attempted to reach does not exist.
+    </h1>
+    <span class="text-lg">
+        Go back to the <a class="hover:underline" href="/">homepage</a>
+    </span>
 </Layout>