From 6ae219abff4d1fc3096c5a356d7c48f2b1e1e54a Mon Sep 17 00:00:00 2001
From: Yufa <112290188+01001101CK@users.noreply.github.com>
Date: Thu, 4 Sep 2025 16:00:25 -0700
Subject: [PATCH 1/2] add a 404 page

Signed-off-by: Yufa <112290188+01001101CK@users.noreply.github.com>
---
 src/layouts/base.css |   1 +
 src/pages/404.astro  | 109 +++++++++++++++++++++++++++++++++++++++++++
 2 files changed, 110 insertions(+)
 create mode 100644 src/pages/404.astro

diff --git a/src/layouts/base.css b/src/layouts/base.css
index c05440b..8a5e997 100644
--- a/src/layouts/base.css
+++ b/src/layouts/base.css
@@ -11,6 +11,7 @@
 	--colorBlueBright6: #196d9a;
 	--colorBlueDull3: #b0ccd7;
 	--colorBlueDull6: #58646b;
+	--colorBorderLight: #e0e0e0;
 	--colorBlue1: #bcdfe9;
 	--colorBlue2: #38ced6;
 	--colorBlue3: #116d9a;
diff --git a/src/pages/404.astro b/src/pages/404.astro
new file mode 100644
index 0000000..891462f
--- /dev/null
+++ b/src/pages/404.astro
@@ -0,0 +1,109 @@
+---
+import PageLayout from "~/layouts/PageLayout.astro";
+---
+
+<PageLayout description="Page not found - SquiggleConf" title="404">
+	<div class="error-container">
+		<div class="error-box">
+			<div class="error-title">404: NOT_FOUND</div>
+			<div class="error-code">Code: `NOT_FOUND`</div>
+			<div class="error-message">
+				You've drifted into uncharted waters. Navigate back to the surface?
+			</div>
+		</div>
+
+		<a href="/" class="home-link"> Home Page </a>
+	</div>
+</PageLayout>
+
+<style>
+	.error-container {
+		display: flex;
+		flex-direction: column;
+		align-items: center;
+		justify-content: center;
+		min-height: 60vh;
+		padding: 2rem;
+		height: 100vh;
+		background: var(--colorSandBackground);
+	}
+
+	.error-box {
+		background: var(--colorSandLight);
+		border: 1px solid var(--colorBorderLight);
+		border-radius: 8px;
+		padding: 2rem;
+		margin-bottom: 2rem;
+		text-align: left;
+		box-shadow: 0 2px 8px rgba(0, 0, 0, 0.1);
+		max-width: 500px;
+		width: 100%;
+	}
+
+	.error-title {
+		font-family: var(--fontFamilyHeading);
+		font-size: var(--fontSizeLarge);
+		font-weight: var(--fontWeightBold);
+		color: var(--colorBlackIsh);
+		margin-bottom: 0.5rem;
+	}
+
+	.error-code {
+		font-family: var(--fontFamilyBody);
+		font-size: var(--fontSizeSmall);
+		color: var(--colorBlackIsh);
+		margin-bottom: 1rem;
+	}
+
+	.error-message {
+		font-family: var(--fontFamilyBody);
+		font-size: var(--fontSizeSmall);
+		color: var(--colorBlackIsh);
+		line-height: 1.5;
+	}
+
+	.home-link {
+		background: var(--colorSandLight);
+		border: 1px solid var(--colorBlue3);
+		border-radius: 4px;
+		color: var(--colorBlue3);
+		text-decoration: none;
+		padding: 0.75rem 1.5rem;
+		font-family: var(--fontFamilyBody);
+		font-size: var(--fontSizeSmall);
+		text-align: center;
+		transition: all var(--transitionMedium);
+		display: inline-block;
+	}
+
+	.home-link:hover {
+		background: var(--colorBlue3);
+		color: var(--colorWhiteIsh);
+	}
+
+	:global(.dark) .error-container {
+		background: var(--colorSandLight);
+	}
+
+	:global(.dark) .error-box {
+		background: var(--colorSandBackground);
+		border-color: var(--colorBlueDull3);
+	}
+
+	:global(.dark) .error-title,
+	:global(.dark) .error-code,
+	:global(.dark) .error-message {
+		color: var(--colorSandForeground);
+	}
+
+	:global(.dark) .home-link {
+		background: var(--colorSandBackground);
+		border-color: var(--colorBlue2);
+		color: var(--colorWhiteIsh);
+	}
+
+	:global(.dark) .home-link:hover {
+		background: var(--colorBlue3);
+		color: var(--colorButtonColor);
+	}
+</style>

From 807d5387bd5e672c44ba39ca2c4656eea04239bf Mon Sep 17 00:00:00 2001
From: Yufa <112290188+01001101CK@users.noreply.github.com>
Date: Tue, 16 Sep 2025 14:35:32 -0700
Subject: [PATCH 2/2] 1) reduce the number of extra colors in the color scheme.
 2) remove specific .dark theme

---
 src/layouts/base.css |  1 -
 src/pages/404.astro  | 46 ++++++++++----------------------------------
 2 files changed, 10 insertions(+), 37 deletions(-)

diff --git a/src/layouts/base.css b/src/layouts/base.css
index 8a5e997..c05440b 100644
--- a/src/layouts/base.css
+++ b/src/layouts/base.css
@@ -11,7 +11,6 @@
 	--colorBlueBright6: #196d9a;
 	--colorBlueDull3: #b0ccd7;
 	--colorBlueDull6: #58646b;
-	--colorBorderLight: #e0e0e0;
 	--colorBlue1: #bcdfe9;
 	--colorBlue2: #38ced6;
 	--colorBlue3: #116d9a;
diff --git a/src/pages/404.astro b/src/pages/404.astro
index 891462f..7b4204c 100644
--- a/src/pages/404.astro
+++ b/src/pages/404.astro
@@ -29,8 +29,8 @@ import PageLayout from "~/layouts/PageLayout.astro";
 	}
 
 	.error-box {
-		background: var(--colorSandLight);
-		border: 1px solid var(--colorBorderLight);
+		background: var(--colorSandBackground);
+		border: 1px solid var(--colorSandLight);
 		border-radius: 8px;
 		padding: 2rem;
 		margin-bottom: 2rem;
@@ -44,66 +44,40 @@ import PageLayout from "~/layouts/PageLayout.astro";
 		font-family: var(--fontFamilyHeading);
 		font-size: var(--fontSizeLarge);
 		font-weight: var(--fontWeightBold);
-		color: var(--colorBlackIsh);
+		color: var(--colorSandForeground);
 		margin-bottom: 0.5rem;
 	}
 
 	.error-code {
 		font-family: var(--fontFamilyBody);
 		font-size: var(--fontSizeSmall);
-		color: var(--colorBlackIsh);
+		color: var(--colorSandForeground);
 		margin-bottom: 1rem;
 	}
 
 	.error-message {
 		font-family: var(--fontFamilyBody);
 		font-size: var(--fontSizeSmall);
-		color: var(--colorBlackIsh);
+		color: var(--colorSandForeground);
 		line-height: 1.5;
 	}
 
 	.home-link {
-		background: var(--colorSandLight);
-		border: 1px solid var(--colorBlue3);
+		background: var(--colorSandBackground);
+		border: 1px solid var(--colorSandForeground);
 		border-radius: 4px;
-		color: var(--colorBlue3);
+		color: var(--colorSandForeground);
 		text-decoration: none;
 		padding: 0.75rem 1.5rem;
 		font-family: var(--fontFamilyBody);
 		font-size: var(--fontSizeSmall);
 		text-align: center;
-		transition: all var(--transitionMedium);
+		transition: all var(--colorBlue3);
 		display: inline-block;
 	}
 
 	.home-link:hover {
 		background: var(--colorBlue3);
-		color: var(--colorWhiteIsh);
-	}
-
-	:global(.dark) .error-container {
-		background: var(--colorSandLight);
-	}
-
-	:global(.dark) .error-box {
-		background: var(--colorSandBackground);
-		border-color: var(--colorBlueDull3);
-	}
-
-	:global(.dark) .error-title,
-	:global(.dark) .error-code,
-	:global(.dark) .error-message {
-		color: var(--colorSandForeground);
-	}
-
-	:global(.dark) .home-link {
-		background: var(--colorSandBackground);
-		border-color: var(--colorBlue2);
-		color: var(--colorWhiteIsh);
-	}
-
-	:global(.dark) .home-link:hover {
-		background: var(--colorBlue3);
-		color: var(--colorButtonColor);
+		color: var(--colorForegroundAccent);
 	}
 </style>