gotobed zz

src/lib/IO/Button.svelte

@@ -0,0 +1,23 @@
+<script lang="ts">
+    import { onMount } from "svelte";
+
+    export let text : string = 'button';
+    export let color : string;
+
+    onMount(() => {
+        if (!color || color.length === 0)
+        {
+            color = window.getComputedStyle(document.documentElement).getPropertyValue('--primary');
+        }
+    });
+</script>
+
+<button style="--button-color: {color};" class="button">
+    {text}
+</button>
+
+<style>
+    .button {
+        background-color: var(--button-color);
+    }
+</style>

src/routes/+page.svelte

@@ -2,6 +2,7 @@
     import MediaQuery from 'svelte-media-queries';
     import NewsCard from '$lib/posts/NewsCard.svelte';
     import ShowcaseNewsCard from '$lib/posts/ShowcaseNewsCard.svelte';
+    import Button from '$lib/IO/Button.svelte';
 
     export let data; // <- contains post data
 
@@ -21,7 +22,9 @@
 
 
 <section id="news-section">
-    <h1 id="news-header">Recent News</h1>
+    <header id="news-header">
+        <h1>Recent News</h1>
+    </header>
     <div class="news-container">
         <!-- The newest blog post being showcased -->
         <ShowcaseNewsCard post_url={most_recent_post.url} title={most_recent_post.title} summary={most_recent_post.summary} creation_date={most_recent_post.creation_date} />
@@ -31,9 +34,10 @@
                 <NewsCard post_url={summary.url} title={summary.title} summary={summary.summary} creation_date={summary.creation_date} />
             {/each}
         </div>
-            <!-- TODO: Filter by date or something -->
-
     </div>
+    <footer>
+        <Button text={'More Posts'} />
+    </footer>
 </section>
 
 <style>
@@ -43,6 +47,7 @@
         align-items: center;
 
         width: 60%;
+        max-width: 1200px;
         margin-inline: auto;
     }
 
@@ -67,6 +72,10 @@
         gap: 20px;
     }
 
+    footer {
+        margin-left: auto; /* align right */
+    }
+
     .main-title {
         color: var(--text1);
         margin: 0 auto;