From 5bc025bd279639d3f380bcb617e837f1398a4151 Mon Sep 17 00:00:00 2001
From: zepp <zepp@zepps.cafe>
Date: Wed, 19 Feb 2025 22:00:20 -0500
Subject: [PATCH] BasicLayout complete tested with index.astro in light and
 dark modes

---
 src/components/Footer.astro     | 10 +++++--
 src/components/Header.astro     |  8 ++++-
 src/components/Navigation.astro |  9 +++++-
 src/layouts/BasicLayout.astro   | 10 +++++++
 src/pages/index.astro           | 52 ++++++++++++++++++---------------
 5 files changed, 61 insertions(+), 28 deletions(-)
 create mode 100644 src/layouts/BasicLayout.astro

diff --git a/src/components/Footer.astro b/src/components/Footer.astro
index be65e2f..1c05d5b 100644
--- a/src/components/Footer.astro
+++ b/src/components/Footer.astro
@@ -1,5 +1,6 @@
 ---
 const backgroundColor = "#ffd4de";
+const backgroundColorNightMode = "#240046";
 const disabilityPrideBlack = "#595959";
 const disabilityPrideRed =  "#cf7280";
 const disabilityPrideYellow = "#eede77";
@@ -14,7 +15,7 @@ const disabilityPrideGreen = "#3bb07d";
 	</span>
 </footer>
 
-<style define:vars={{backgroundColor, disabilityPrideBlack, disabilityPrideRed, disabilityPrideYellow, disabilityPrideWhite, disabilityPrideBlue, disabilityPrideGreen}}>
+<style define:vars={{backgroundColor, backgroundColorNightMode, disabilityPrideBlack, disabilityPrideRed, disabilityPrideYellow, disabilityPrideWhite, disabilityPrideBlue, disabilityPrideGreen}}>
     footer {
         background-color: var(--backgroundColor);
         grid-row: 3/4;
@@ -44,5 +45,10 @@ const disabilityPrideGreen = "#3bb07d";
         font-family: system-ui;
         font-size: 1.3rem;
         letter-spacing: 0.05rem;
-}
+    }
+    @media (prefers-color-scheme: dark) {
+        footer {
+            background-color: var(--backgroundColorNightMode);
+        }
+    }
 </style>
\ No newline at end of file
diff --git a/src/components/Header.astro b/src/components/Header.astro
index 9f321a4..77f8969 100644
--- a/src/components/Header.astro
+++ b/src/components/Header.astro
@@ -6,6 +6,7 @@ const pageTitle = "emma's place";
 const motto = "a celebration of self-expression through the personal web";
 
 const backgroundColor = "#ffd4de";
+const backgroundColorNightMode = "#240046";
 const biPridePink = "#d60270";
 const biPridePurple = "#9b4f96";
 const biPrideBlue =  "#0038a8";
@@ -20,7 +21,7 @@ const biPrideBlue =  "#0038a8";
 	</span>
 </header>
 
-<style define:vars={{biPridePink, biPridePurple, biPrideBlue, backgroundColor}}>
+<style define:vars={{biPridePink, biPridePurple, biPrideBlue, backgroundColor, backgroundColorNightMode}}>
     @font-face {
         font-family: lato-regular;
         src: url("/lato-regular.woff2");
@@ -67,4 +68,9 @@ const biPrideBlue =  "#0038a8";
         font-family: lato-regular;
         letter-spacing: 0.05rem;
     }
+
+    @media (prefers-color-scheme: dark) {
+        header {
+            background-color: var(--backgroundColorNightMode);
+        }
 </style>
\ No newline at end of file
diff --git a/src/components/Navigation.astro b/src/components/Navigation.astro
index ad2a1c8..92f967e 100644
--- a/src/components/Navigation.astro
+++ b/src/components/Navigation.astro
@@ -1,5 +1,6 @@
 ---
 const backgroundColor = "#ffd4de";
+const backgroundColorNightMode = "#240046";
 const transPrideBlue =  "#5bcefa";
 const transPridePink =  "#f5a9b8";
 const transPrideWhite = "#ffffff";
@@ -36,7 +37,7 @@ const transPrideWhite = "#ffffff";
 	</ul>
 </nav>
 
-<style define:vars={{backgroundColor, transPrideBlue, transPridePink, transPrideWhite}}>
+<style define:vars={{backgroundColor, backgroundColorNightMode, transPrideBlue, transPridePink, transPrideWhite}}>
     nav {
         background-color: var(--backgroundColor);
         grid-row: 2/3;
@@ -70,4 +71,10 @@ const transPrideWhite = "#ffffff";
     nav ul li a {
         font-size: 1rem;
     }
+
+    @media (prefers-color-scheme: dark) {
+        nav {
+            background-color: var(--backgroundColorNightMode);
+        }
+    }
 </style>
\ No newline at end of file
diff --git a/src/layouts/BasicLayout.astro b/src/layouts/BasicLayout.astro
new file mode 100644
index 0000000..6c88f0a
--- /dev/null
+++ b/src/layouts/BasicLayout.astro
@@ -0,0 +1,10 @@
+---
+import Header from "../components/Header.astro";
+import Navigation from "../components/Navigation.astro";
+import Footer from "../components/Footer.astro";
+---
+
+<Header />
+<Navigation />
+<slot />
+<Footer />
\ No newline at end of file
diff --git a/src/pages/index.astro b/src/pages/index.astro
index 8fa00b7..de53c62 100644
--- a/src/pages/index.astro
+++ b/src/pages/index.astro
@@ -1,4 +1,6 @@
 ---
+import BasicLayout from "../layouts/BasicLayout.astro";
+
 import "../styles/global.css";
 
 const pageTitle = "emma's place";
@@ -39,31 +41,33 @@ const linkColorNightMode = "#4cc9f0";
 		</style>
 	</head>
 	<body>
-		<main>
-			<section>
-				<h1>welcome to {pageTitle}</h1>
-				<p>
-					you're at emma's place. coffee or tea of your choice are waiting for you. my cat baxter loves pets if you'd like to say hello. there's a little bit of eveything that is me here. there's no rush, you can be here for as little or as long as you'd like. you can just take it easy here. if all of this somehow brings you some happiness or makes you feel like maybe there's another human on the other side of your screen then i've done my job. have a look around, don't forget to grab a beverage
-				</p>
+		<BasicLayout>
+			<main>
+				<section>
+					<h1>welcome to {pageTitle}</h1>
+					<p>
+						you're at emma's place. coffee or tea of your choice are waiting for you. my cat baxter loves pets if you'd like to say hello. there's a little bit of eveything that is me here. there's no rush, you can be here for as little or as long as you'd like. you can just take it easy here. if all of this somehow brings you some happiness or makes you feel like maybe there's another human on the other side of your screen then i've done my job. have a look around, don't forget to grab a beverage
+					</p>
 
-				<h3>latest status</h3>
-				<div class="status">
-					<script src="https://status.lol/emma.js?time&link&fluent&pretty" defer></script>
-				</div>
+					<h3>latest status</h3>
+					<div class="status">
+						<script src="https://status.lol/emma.js?time&link&fluent&pretty" defer></script>
+					</div>
 
-				<h3>news about emma</h3>
-				<ul>
-					<li>
-						12-25-2024 - i'm going to try to get back into the swing of learning javascript. i had taken a little break due to life. but this wonderful home of mine on the web came out of that break so i'm happy about that too!
-					</li>
-					<li>
-						01-16-2025 - i'm focusing on studying and trying to get used to the idea of pursuing interests because i can. i wrote a blog post today about how hard the concept is to me
-					</li>
-					<li>
-						01-23-2025 - i'm working on moving my blog to <a href="https://blog.emmas.place" target="_blank">blog.emmas.place</a> it is hosted on weblog.lol, a part of the <a href="https://omg.lol" target="_blank">omg.lol</a> service
-					</li>
-				</ul>
-			</section>
-		</main>
+					<h3>news about emma</h3>
+					<ul>
+						<li>
+							12-25-2024 - i'm going to try to get back into the swing of learning javascript. i had taken a little break due to life. but this wonderful home of mine on the web came out of that break so i'm happy about that too!
+						</li>
+						<li>
+							01-16-2025 - i'm focusing on studying and trying to get used to the idea of pursuing interests because i can. i wrote a blog post today about how hard the concept is to me
+						</li>
+						<li>
+							01-23-2025 - i'm working on moving my blog to <a href="https://blog.emmas.place" target="_blank">blog.emmas.place</a> it is hosted on weblog.lol, a part of the <a href="https://omg.lol" target="_blank">omg.lol</a> service
+						</li>
+					</ul>
+				</section>
+			</main>
+		</BasicLayout>
 	</body>
 </html>