From a6be8f371520255abdca23a6cc243b44a0365229 Mon Sep 17 00:00:00 2001
From: Jonas_Jones <91549607+J-onasJones@users.noreply.github.com>
Date: Sat, 14 Oct 2023 21:17:29 +0200
Subject: [PATCH] Added box shadow to main div's

Added a uniform box-shadow for a more crisp and interesting look of the website
---
 src/lib/components/Footer.svelte | 2 +-
 src/lib/components/Header.svelte | 1 +
 src/lib/styles/style.css         | 7 +++++++
 src/routes/+layout.svelte        | 4 ++--
 4 files changed, 11 insertions(+), 3 deletions(-)

diff --git a/src/lib/components/Footer.svelte b/src/lib/components/Footer.svelte
index 66bcffd..1b20e6e 100644
--- a/src/lib/components/Footer.svelte
+++ b/src/lib/components/Footer.svelte
@@ -3,7 +3,7 @@
 </script>
 
 <!-- Footer.svelte -->
-<footer>
+<footer class="box-shadow">
 	<div class="footer-flex">
 		<a href="/">Home</a>
 		<nav>
diff --git a/src/lib/components/Header.svelte b/src/lib/components/Header.svelte
index 013822f..f4b9f09 100644
--- a/src/lib/components/Header.svelte
+++ b/src/lib/components/Header.svelte
@@ -33,6 +33,7 @@
 		flex-wrap: wrap;
 		justify-content: space-between;
 		border-radius: 0.5rem;
+		box-shadow: 2px 2px rgb(0, 180, 0);
 	}
 
 	ul {
diff --git a/src/lib/styles/style.css b/src/lib/styles/style.css
index 9894a8b..ae66673 100644
--- a/src/lib/styles/style.css
+++ b/src/lib/styles/style.css
@@ -15,6 +15,7 @@
 	--text-color: #fff;
 	--link-text-color: #afb9c4;
 	--collapsed-background-color: #414753;
+	--box-shadow-color: #111316;
 }
 
 @media (prefers-color-scheme: light) {
@@ -23,6 +24,8 @@
 		--container-background-color: #d9d6d0;
 		--text-color: #000;
 		--link-text-color: #50463b;
+		--collapsed-background-color: #c4c4c4;
+		--box-shadow-color: #aaa;
 	}
 }
 
@@ -87,6 +90,10 @@ ul {
 	display: flex;
 }
 
+.box-shadow {
+	box-shadow: 2px 2px var(--box-shadow-color);
+}
+
 .row:after {
 	content: "";
 	display: table;
diff --git a/src/routes/+layout.svelte b/src/routes/+layout.svelte
index f7341bd..158e22b 100644
--- a/src/routes/+layout.svelte
+++ b/src/routes/+layout.svelte
@@ -6,8 +6,8 @@
 
 <Header />
 <div class="container">
-    <div class="column"><Navbar /></div>
-    <div class="column content flex_grow">
+    <div class="column box-shadow"><Navbar /></div>
+    <div class="column box-shadow content flex_grow">
         <main>
             <slot />
         </main>