more posts button

src/routes/+page.svelte

@@ -3,6 +3,7 @@
     import NewsCard from '$lib/posts/NewsCard.svelte';
     import ShowcaseNewsCard from '$lib/posts/ShowcaseNewsCard.svelte';
     import Button from '$lib/IO/Button.svelte';
+    import { ButtonType } from '$lib/IO/ButtonType.ts';
 
     export let data; // <- contains post data
 
@@ -35,8 +36,15 @@
             {/each}
         </div>
     </div>
-    <footer>
-        <Button text={'More Posts'} />
+    <footer id="news-footer">
+        <div class="dummy"/>
+        <div id="more-posts">
+            <Button type={ButtonType.Primary}>
+                <a slot="content" href="/post">
+                    <span>More Posts</span>
+                </a>
+            </Button>
+        </div>
     </footer>
 </section>
 
@@ -46,8 +54,10 @@
         flex-direction: column;
         align-items: center;
 
-        width: 60%;
-        max-width: 1200px;
+        transition-duration: 500ms;
+        transition-property: width;
+        width: 80%;
+        max-width: 1400px;
         margin-inline: auto;
     }
 
@@ -72,8 +82,24 @@
         gap: 20px;
     }
 
-    footer {
-        margin-left: auto; /* align right */
+    #news-footer {
+        width: 100%;
+        display: flex;
+
+        margin-top: 25px;
+    }
+
+    .dummy {
+        width: 100%;
+    }
+
+    #more-posts {
+        flex-grow: 1;
+        min-width: 10em;
+    }
+
+    a {
+        white-space: nowrap;
     }
 
     .main-title {
@@ -87,20 +113,31 @@
         font-size: 9vw; /* Change if title changes */
     }
 
-    h1 {
+    .main-title {
+        font-family: var(--title-font);
         color: var(--text1);
     }
-
 </style>
 
 {#if mobile}
     <style>
         #news-section {
-            width: 90vw !important;
+            transition-duration: 500ms;
+            transition-property: width;
+            width: 90% !important;
         }
         .news-container {
             flex-direction: column !important;
         }
+
+        .dummy {
+            width: 0% !important;
+        }
+
+        /* #more-posts { */
+        /*     flex-grow: 1 !important; */
+        /* } */
+
     </style>
 {/if}