footer responsive

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}

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 -->