From 1799f16ac5fe450419ce2571a6ade4edc3854229 Mon Sep 17 00:00:00 2001
From: Jonas_Jones <91549607+J-onasJones@users.noreply.github.com>
Date: Mon, 2 Oct 2023 19:09:46 +0200
Subject: [PATCH] Added extra small screen layout

---
 src/lib/components/Footer.svelte | 9 ++++++++-
 src/lib/components/Header.svelte | 7 ++++++-
 src/lib/styles/style.css         | 8 ++++++++
 src/routes/+layout.svelte        | 2 --
 4 files changed, 22 insertions(+), 4 deletions(-)

diff --git a/src/lib/components/Footer.svelte b/src/lib/components/Footer.svelte
index de87062..8bfaa5f 100644
--- a/src/lib/components/Footer.svelte
+++ b/src/lib/components/Footer.svelte
@@ -27,7 +27,7 @@
 	footer {
 		padding: 1rem;
 		margin: 2rem;
-		margin-bottom: 0;
+		margin-bottom: 2rem;
 		margin-top: 0;
 		background: var(--container-background-color);
 		display: flex;
@@ -54,4 +54,11 @@
 		align-items: center;
 		font-size: 20px;
 	}
+
+	@media (max-width: 550px) {
+		footer {
+			margin: 0;
+			border-radius: 0;
+		}
+	}
 </style>
diff --git a/src/lib/components/Header.svelte b/src/lib/components/Header.svelte
index 6245b5c..77b2af9 100644
--- a/src/lib/components/Header.svelte
+++ b/src/lib/components/Header.svelte
@@ -19,7 +19,7 @@
 	header {
 		padding: 1rem;
 		margin: 2rem;
-		margin-top: 0;
+		margin-top: 2rem;
 		margin-bottom: 0;
 		background: rgb(0, 255, 0);
 		display: flex;
@@ -67,5 +67,10 @@
 	header h1 {
 		font-size: 20px;
 	}
+
+	header {
+		margin: 0;
+		border-radius: 0;
+	}
 }
 </style>
diff --git a/src/lib/styles/style.css b/src/lib/styles/style.css
index 83ceebe..f970c5a 100644
--- a/src/lib/styles/style.css
+++ b/src/lib/styles/style.css
@@ -142,3 +142,11 @@ details a {
 		margin-top: 0;
 	}
 }
+
+@media screen and (max-width: 550px) {
+	.column {
+		margin: 0;
+		margin-bottom: 1rem;
+		border-radius: 0;
+	}
+}
diff --git a/src/routes/+layout.svelte b/src/routes/+layout.svelte
index 8f4c01c..f47681f 100644
--- a/src/routes/+layout.svelte
+++ b/src/routes/+layout.svelte
@@ -5,7 +5,6 @@
 
 </script>
 
-<div style="height:2rem" />
 <Header />
 <div class="container">
     <div class="column"><Navbar /></div>
@@ -17,4 +16,3 @@
 </div>
 
 <Footer />
-<div style="height:2rem" />