more posts button

src/lib/IO/Button.svelte

@@ -1,23 +1,49 @@
 <script lang="ts">
+    import { ButtonType } from "$lib/IO/ButtonType.ts";
     import { onMount } from "svelte";
 
-    export let text : string = 'button';
+    export let type : ButtonType = ButtonType.Primary;
-    export let color : string;
+    let cssName : string;
+
+    const buttonTypeColors = {
+        [ButtonType.Primary]: '--primary',
+        [ButtonType.Secondary]: '--secondary',
+        [ButtonType.Accent]: '--accent',
+    };
 
     onMount(() => {
-        if (!color || color.length === 0)
+        cssName = buttonTypeColors[type];
-        {
-            color = window.getComputedStyle(document.documentElement).getPropertyValue('--primary');
-        }
     });
 </script>
 
-<button style="--button-color: {color};" class="button">
+<button class="button" style="--button-color: var({cssName});">
-    {text}
+    <div class="content">
+        <slot name="content">
+            Click Me!
+        </slot>
+    </div>
 </button>
 
 <style>
     .button {
+        width: 100%;
+        border-radius: 6px;
+        border: none;
         background-color: var(--button-color);
+
+        display: flex;
+        justify-content: center;
+        font-size: 1.5em;
+    }
+
+    .button:hover {
+        cursor: pointer;
+    }
+
+    .content {
+        width: 100%;
+        color: var(--text1);
+
+        padding: 0.8em 4em;
     }
 </style>

src/lib/IO/ButtonType.ts

@@ -0,0 +1,5 @@
+export enum ButtonType {
+    Primary,
+    Secondary,
+    Accent
+}

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>
+    <footer id="news-footer">
-        <Button text={'More Posts'} />
+        <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%;
+        transition-duration: 500ms;
-        max-width: 1200px;
+        transition-property: width;
+        width: 80%;
+        max-width: 1400px;
         margin-inline: auto;
     }
 
@@ -72,8 +82,24 @@
         gap: 20px;
     }
 
-    footer {
+    #news-footer {
-        margin-left: auto; /* align right */
+        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}
 

static/stylesheets/global.css

@@ -7,7 +7,12 @@
 }
 
 body {
-    font-family: 'CozetteVector';
+    font-family: var(--main-font);
-    color: var(--text2); /* Default to secondary text color. */
+    color: var(--text1); /* Default to primary text color. */
     background-color: var(--background);
 }
+
+a, a:link a:visited {
+    color: var(--text1);
+    text-decoration: none;
+}