From fc160a23fdb245985aa3ce5769b05a89c4fbcbc1 Mon Sep 17 00:00:00 2001
From: Sveske_Juice <carl.benjamin.dreyer@gmail.com>
Date: Sun, 25 Feb 2024 20:13:13 +0100
Subject: [PATCH] footer responsive

---
 src/routes/+layout.svelte | 32 ++++++++++++++++++++++++++++++--
 src/routes/+page.svelte   |  2 +-
 2 files changed, 31 insertions(+), 3 deletions(-)

diff --git a/src/routes/+layout.svelte b/src/routes/+layout.svelte
index 9b7f51e..a7b65a4 100644
--- a/src/routes/+layout.svelte
+++ b/src/routes/+layout.svelte
@@ -1,3 +1,13 @@
+<script lang="ts">
+    import MediaQuery from 'svelte-media-queries';
+
+    const mobileThreshold : string = '1000px';
+    let mobile : boolean;
+</script>
+
+<!-- Detect mobile -->
+<MediaQuery query='(max-width: {mobileThreshold})' bind:matches={mobile} />
+
 <!-- Nav bar -->
 
 <!-- Page content -->
@@ -56,10 +66,20 @@
         justify-content: space-evenly;
     }
 
+    .about-container > div {
+        align-items: center;
+        text-align: center;
+    }
+
     .credits {
         line-height: 2;
     }
 
+    .contact {
+        display: flex;
+        flex-direction: column;
+    }
+
     .social {
         display: flex;
         align-content: center;
@@ -83,6 +103,14 @@
     a:hover {
         filter: brightness(130%);
     }
-
-
 </style>
+
+{#if mobile}
+    <style>
+        .about-container {
+            flex-direction: column;
+            justify-content: center !important;
+            gap: 25px;
+        }
+    </style>
+{/if}
diff --git a/src/routes/+page.svelte b/src/routes/+page.svelte
index 2ae4756..0f86e49 100644
--- a/src/routes/+page.svelte
+++ b/src/routes/+page.svelte
@@ -10,8 +10,8 @@
     $: most_recent_post = data.summaries[0];
 
     const mobileThreshold : string = '1000px';
-    const post_show_count : number = 3;
     let mobile : boolean;
+    const post_show_count : number = 3;
 </script>
 
 <!-- Detect mobile -->