From 1decc2f14c71637af65892a06c3870f945c0b139 Mon Sep 17 00:00:00 2001
From: bereketAlemu-git <ashebirbereket96@gmail.com>
Date: Tue, 14 Jul 2026 22:07:54 -0400
Subject: [PATCH 1/4] created 404.astro

---
 src/pages/404.astro | 12 ++++++++++++
 1 file changed, 12 insertions(+)
 create mode 100644 src/pages/404.astro

diff --git a/src/pages/404.astro b/src/pages/404.astro
new file mode 100644
index 0000000..8b20951
--- /dev/null
+++ b/src/pages/404.astro
@@ -0,0 +1,12 @@
+---
+import Base from '../layouts/Base.astro';
+---
+
+<Base title="Page not found · CCSS Showcase">
+  <section>
+    <p>404</p>
+    <h1>Page not found</h1>
+    <p>That page doesn't exist (or moved). Try the project gallery.</p>
+    <a href="/projects">Back to projects</a>
+  </section>
+</Base>
\ No newline at end of file

From 34953525a2f9fdd141b02cdb8475e1d15291445e Mon Sep 17 00:00:00 2001
From: bereketAlemu-git <ashebirbereket96@gmail.com>
Date: Wed, 15 Jul 2026 12:48:46 -0400
Subject: [PATCH 2/4] style done

---
 src/pages/404.astro | 25 ++++++++++++++++++++++++-
 1 file changed, 24 insertions(+), 1 deletion(-)

diff --git a/src/pages/404.astro b/src/pages/404.astro
index 8b20951..afedbac 100644
--- a/src/pages/404.astro
+++ b/src/pages/404.astro
@@ -3,8 +3,31 @@ import Base from '../layouts/Base.astro';
 ---
 
 <Base title="Page not found · CCSS Showcase">
+  <style>
+    section{
+      text-align: center; 
+      font:var(--font-sans);
+      font-size: 1.3rem;
+      color:var(--color-muted);
+    }
+    a,p,h1{
+      line-height: 2;
+    }
+    #error{
+      font-size: 6rem;
+    }
+    a{
+      background-color:var(--color-accent);
+      color:var(--color-surface);
+      padding: 6px 8px;
+      border-radius: var(--radius-card);
+    }
+    a:hover{
+      background-color:var(--color-ink);
+    }
+  </style>
   <section>
-    <p>404</p>
+    <p id="error">404</p>
     <h1>Page not found</h1>
     <p>That page doesn't exist (or moved). Try the project gallery.</p>
     <a href="/projects">Back to projects</a>

From db825e6d0b7153cc8d3b4ac7d32b7367780351b4 Mon Sep 17 00:00:00 2001
From: bereketAlemu-git <ashebirbereket96@gmail.com>
Date: Fri, 17 Jul 2026 21:56:34 -0400
Subject: [PATCH 3/4] updated the style

---
 src/pages/404.astro | 37 +++++++++++++++++++++----------------
 1 file changed, 21 insertions(+), 16 deletions(-)

diff --git a/src/pages/404.astro b/src/pages/404.astro
index afedbac..e9cea4c 100644
--- a/src/pages/404.astro
+++ b/src/pages/404.astro
@@ -4,26 +4,31 @@ import Base from '../layouts/Base.astro';
 
 <Base title="Page not found · CCSS Showcase">
   <style>
-    section{
-      text-align: center; 
-      font:var(--font-sans);
-      font-size: 1.3rem;
-      color:var(--color-muted);
+    section {
+      text-align: center;
+      font: var(--font-sans);
+      font-size: var(--text-2xl);
+      color: var(--color-muted);
     }
-    a,p,h1{
-      line-height: 2;
+    #error {
+      font-size: calc(var(--text-3xl) * 3.5);
+      margin-bottom: 0;
     }
-    #error{
-      font-size: 6rem;
+    h1 {
+      margin-bottom: calc(var(--spacing) * 2);
     }
-    a{
-      background-color:var(--color-accent);
-      color:var(--color-surface);
-      padding: 6px 8px;
+    p {
+      margin-bottom: calc(var(--spacing) * 9);
+    }
+    a {
+      background-color: var(--color-accent);
+      color: var(--color-surface);
+      padding: calc(var(--spacing) * 2) calc(var(--spacing) * 3);
       border-radius: var(--radius-card);
+      font-size: var(--text-3xl);
     }
-    a:hover{
-      background-color:var(--color-ink);
+    a:hover {
+      background-color: var(--color-ink);
     }
   </style>
   <section>
@@ -32,4 +37,4 @@ import Base from '../layouts/Base.astro';
     <p>That page doesn't exist (or moved). Try the project gallery.</p>
     <a href="/projects">Back to projects</a>
   </section>
-</Base>
\ No newline at end of file
+</Base>

From f093b477764c86dbaaf709cc329cfef385621733 Mon Sep 17 00:00:00 2001
From: bereketAlemu-git <ashebirbereket96@gmail.com>
Date: Wed, 29 Jul 2026 12:04:49 -0400
Subject: [PATCH 4/4] style: update 404 page with Tailwind classes

---
 src/pages/404.astro | 50 +++++++++++++++------------------------------
 1 file changed, 17 insertions(+), 33 deletions(-)

diff --git a/src/pages/404.astro b/src/pages/404.astro
index e9cea4c..f2fc6ea 100644
--- a/src/pages/404.astro
+++ b/src/pages/404.astro
@@ -3,38 +3,22 @@ import Base from '../layouts/Base.astro';
 ---
 
 <Base title="Page not found · CCSS Showcase">
-  <style>
-    section {
-      text-align: center;
-      font: var(--font-sans);
-      font-size: var(--text-2xl);
-      color: var(--color-muted);
-    }
-    #error {
-      font-size: calc(var(--text-3xl) * 3.5);
-      margin-bottom: 0;
-    }
-    h1 {
-      margin-bottom: calc(var(--spacing) * 2);
-    }
-    p {
-      margin-bottom: calc(var(--spacing) * 9);
-    }
-    a {
-      background-color: var(--color-accent);
-      color: var(--color-surface);
-      padding: calc(var(--spacing) * 2) calc(var(--spacing) * 3);
-      border-radius: var(--radius-card);
-      font-size: var(--text-3xl);
-    }
-    a:hover {
-      background-color: var(--color-ink);
-    }
-  </style>
-  <section>
-    <p id="error">404</p>
-    <h1>Page not found</h1>
-    <p>That page doesn't exist (or moved). Try the project gallery.</p>
-    <a href="/projects">Back to projects</a>
+  <section
+    class="flex min-h-[60vh] flex-col items-center justify-center text-center"
+  >
+    <p class="text-accent text-8xl leading-none font-bold tracking-tight">
+      404
+    </p>
+    <h1 class="mt-6 text-3xl font-bold tracking-tight">Page not found</h1>
+    <p class="text-muted mt-3">
+      That page doesn't exist (or moved). Try the project gallery.
+    </p>
+    <a
+      href="
+      projects"
+      class="rounded-card bg-accent text-accent-contrast hover:bg-accent/85 mt-2 inline-block px-3 py-2 transition-colors"
+    >
+      Back to projects
+    </a>
   </section>
 </Base>