From 4d43f20a9c487f4bb24c24604a4a56835c786a6f Mon Sep 17 00:00:00 2001
From: Sveske_Juice <carl.benjamin.dreyer@gmail.com>
Date: Thu, 22 Feb 2024 03:04:32 +0100
Subject: [PATCH] gotobed zz

---
 src/lib/IO/Button.svelte | 23 +++++++++++++++++++++++
 src/routes/+page.svelte  | 15 ++++++++++++---
 2 files changed, 35 insertions(+), 3 deletions(-)
 create mode 100644 src/lib/IO/Button.svelte

diff --git a/src/lib/IO/Button.svelte b/src/lib/IO/Button.svelte
new file mode 100644
index 0000000..0b0e028
--- /dev/null
+++ b/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>
diff --git a/src/routes/+page.svelte b/src/routes/+page.svelte
index 44eb3e4..e897c21 100644
--- a/src/routes/+page.svelte
+++ b/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;