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/3] 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/3] 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/3] 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>