From a4e42be9948e71324faefc3228e750e541245b54 Mon Sep 17 00:00:00 2001
From: Jonas_Jones <me@jonasjones.dev>
Date: Sun, 2 Mar 2025 21:44:44 +0100
Subject: [PATCH] added proper footer

---
 src/routes/+layout.svelte |  7 +--
 src/routes/Footer.svelte  | 91 +++++++++++++++++++++++++++++++++++++++
 2 files changed, 93 insertions(+), 5 deletions(-)
 create mode 100644 src/routes/Footer.svelte
diff --git a/src/routes/+layout.svelte b/src/routes/+layout.svelte
index 0f689a7..f726b15 100644
--- a/src/routes/+layout.svelte
+++ b/src/routes/+layout.svelte
@@ -1,5 +1,6 @@
 <script>
 	import Header from './Header.svelte';
+	import Footer from './Footer.svelte';
 	import '../app.css';
 
 	let { children } = $props();
@@ -12,11 +13,7 @@
 		{@render children()}
 	</main>
 
-	<footer>
-		<p>
-			visit <a href="https://svelte.dev/docs/kit">svelte.dev/docs/kit</a> to learn about SvelteKit
-		</p>
-	</footer>
+	<Footer />
 </div>
 
 <style>
diff --git a/src/routes/Footer.svelte b/src/routes/Footer.svelte
new file mode 100644
index 0000000..397c541
--- /dev/null
+++ b/src/routes/Footer.svelte
@@ -0,0 +1,91 @@
+<head>
+    <!-- Include Font Awesome CDN -->
+    <link href="https://cdnjs.cloudflare.com/ajax/libs/font-awesome/6.0.0-beta3/css/all.min.css" rel="stylesheet">
+</head>
+
+<div class="footer">
+    <div class="footer-left">
+        <a href="https://github.com/JonasunderscoreJones" target="_blank"><i class="fab fa-github" /></a>
+        <a href="https://www.youtube.com/channel/UCVIxvKBIMSMgurYS8pK7fSg" target="_blank"><i class="fab fa-youtube" /></a>
+        <a href="https://discord.gg/V2EsuUVmWh" target="_blank"><i class="fab fa-discord" /></a>
+        <a href="mailto:me@jonasjones.dev" target="_blank"><i class="fas fa-envelope" /></a>
+    </div>
+
+    <p>Website by Jonas_Jones 2021 - <script>document.write(new Date().getFullYear());</script></p>
+
+    <div class="footer-right">
+        <a href="https://jonasjones.dev" class="footer-link" target="_blank">
+            Homepage
+            <i class="fas fa-external-link"></i>
+        </a>
+        <a href="https://blog.jonasjones.dev" class="footer-link" target="_blank">
+            Blog
+            <i class="fas fa-external-link"></i>
+        </a>
+        <a href="https://docs.jonasjones.dev" class="footer-link" target="_blank">
+            Docs
+            <i class="fas fa-external-link"></i>
+        </a>
+    </div>
+</div>
+
+<style>
+    .footer {
+        height: 1rem;
+        background-color: black;
+        color: white;
+        display: flex;
+        justify-content: center;
+        align-items: center;
+        position: fixed;
+        bottom: 0px;
+        left: 0px;
+        right: 0px;
+        padding-top: 0.25rem;
+        padding-bottom: 0.5rem;
+        font-size: 20px;
+    }
+
+    .footer-left, .footer-right {
+        display: flex;
+        align-items: center;
+    }
+
+    .footer-left a, .footer-right a {
+        margin: 3px 10px;
+        display: flex;
+        align-items: center;
+        color: gray;
+        text-decoration: none;
+    }
+
+    .footer-left a:hover, .footer-right a:hover {
+        color: lightgray;
+    }
+
+    .footer-right {
+        position: fixed;
+        right: 10px; /* Keep the right section fixed */
+        bottom: 0;
+    }
+
+    .footer-left {
+        position: fixed;
+        left: 10px; /* Keep the left section fixed */
+        bottom: 0;
+    }
+
+    .footer-link i {
+        margin-left: 5px;
+        font-size: 15px;
+    }
+
+    @media (max-width: 1200px) {
+        .footer-left, .footer-right {
+            display: none;
+        }
+        .footer-left a, .footer-right a {
+            display: none;
+        }
+    }
+</style>
\ No newline at end of file
