src/lib/IO/Button.svelte

@@ -1,49 +1,23 @@
 <script lang="ts">
-    import { ButtonType } from "$lib/IO/ButtonType.ts";
     import { onMount } from "svelte";
 
-    export let type : ButtonType = ButtonType.Primary;
-    let cssName : string;
-
-    const buttonTypeColors = {
-        [ButtonType.Primary]: '--primary',
-        [ButtonType.Secondary]: '--secondary',
-        [ButtonType.Accent]: '--accent',
-    };
+    export let text : string = 'button';
+    export let color : string;
 
     onMount(() => {
-        cssName = buttonTypeColors[type];
+        if (!color || color.length === 0)
+        {
+            color = window.getComputedStyle(document.documentElement).getPropertyValue('--primary');
+        }
     });
 </script>
 
-<button class="button" style="--button-color: var({cssName});">
-    <div class="content">
-        <slot name="content">
-            Click Me!
-        </slot>
-    </div>
+<button style="--button-color: {color};" class="button">
+    {text}
 </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

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

src/routes/+page.svelte

@@ -3,7 +3,6 @@
     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
 
@@ -36,15 +35,8 @@
             {/each}
         </div>
     </div>
-    <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>
+        <Button text={'More Posts'} />
     </footer>
 </section>
 
@@ -54,10 +46,8 @@
         flex-direction: column;
         align-items: center;
 
-        transition-duration: 500ms;
-        transition-property: width;
-        width: 80%;
-        max-width: 1400px;
+        width: 60%;
+        max-width: 1200px;
         margin-inline: auto;
     }
 
@@ -82,24 +72,8 @@
         gap: 20px;
     }
 
-    #news-footer {
-        width: 100%;
-        display: flex;
-
-        margin-top: 25px;
-    }
-
-    .dummy {
-        width: 100%;
-    }
-
-    #more-posts {
-        flex-grow: 1;
-        min-width: 10em;
-    }
-
-    a {
-        white-space: nowrap;
+    footer {
+        margin-left: auto; /* align right */
     }
 
     .main-title {
@@ -113,31 +87,20 @@
         font-size: 9vw; /* Change if title changes */
     }
 
-    .main-title {
-        font-family: var(--title-font);
+    h1 {
         color: var(--text1);
     }
+
 </style>
 
 {#if mobile}
     <style>
         #news-section {
-            transition-duration: 500ms;
-            transition-property: width;
-            width: 90% !important;
+            width: 90vw !important;
         }
         .news-container {
             flex-direction: column !important;
         }
-
-        .dummy {
-            width: 0% !important;
-        }
-
-        /* #more-posts { */
-        /*     flex-grow: 1 !important; */
-        /* } */
-
     </style>
 {/if}
 

static/stylesheets/global.css

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

static/stylesheets/main-theme.css

@@ -1,12 +1,10 @@
 :root {
-    --title-font: 'CozetteVector';
-    --main-font: 'Segoe UI';
     --text1: #fff; /* Primary text. */
     --text2: #cac9c6; /* Secondary text. */
     --text3: #b0afad; /* Third text color. */
     --text4: #868584; /* Fourth text color. */
-    --background: #232222;
-    --primary: #227c9d;
-    --secondary: #ffcb77;
-    --accent: #17c3b2;
+    --background: #1e2122;
+    --primary: #ff8552;
+    --secondary: #6c6b44;
+    --accent: #7da16a;
 }