From 6f855a9f4584370d0ddd1d8fa93d668ccd3529bd Mon Sep 17 00:00:00 2001
From: Jonas_Jones <91549607+J-onasJones@users.noreply.github.com>
Date: Mon, 2 Oct 2023 19:40:44 +0200
Subject: [PATCH] Fixed Footer Style

Fixed an issue where the footer text would wrap in a wrong way on smaller screens and not be aligned correctly.
---
 src/lib/components/Footer.svelte | 39 +++++++++++++++++---------------
 1 file changed, 21 insertions(+), 18 deletions(-)

diff --git a/src/lib/components/Footer.svelte b/src/lib/components/Footer.svelte
index 8bfaa5f..66bcffd 100644
--- a/src/lib/components/Footer.svelte
+++ b/src/lib/components/Footer.svelte
@@ -4,23 +4,25 @@
 
 <!-- Footer.svelte -->
 <footer>
-	<a href="/">Home</a>
+	<div class="footer-flex">
+		<a href="/">Home</a>
+		<nav>
+			<ul>
+				<li>
+					<a href="https://jonasjones.dev/">Homepage</a>
+				</li>
+				<li>
+					<a href="/about">About</a>
+				</li>
+				<li>
+					<a href="/contact">Contact</a>
+				</li>
+			</ul>
+		</nav>
+	</div>
 	<div class="footer">
 		<p>Website by Jonas_Jones 2021 - 2023</p>
 	</div>
-	<nav>
-		<ul>
-			<li>
-				<a href="https://jonasjones.dev/">Homepage</a>
-			</li>
-			<li>
-				<a href="/about">About</a>
-			</li>
-			<li>
-				<a href="/contact">Contact</a>
-			</li>
-		</ul>
-	</nav>
 </footer>
 
 <style>
@@ -30,10 +32,13 @@
 		margin-bottom: 2rem;
 		margin-top: 0;
 		background: var(--container-background-color);
+		border-radius: 0.5rem;
+	}
+
+	.footer-flex {
 		display: flex;
 		flex-wrap: wrap;
 		justify-content: space-between;
-		border-radius: 0.5rem;
 	}
 
 	ul {
@@ -49,10 +54,8 @@
 	}
 
 	.footer {
-		display: flex;
-		justify-content: center;
-		align-items: center;
 		font-size: 20px;
+		text-align: center;
 	}
 
 	@media (max-width: 550px) {