src/lib/IO/Button.svelte

@@ -31,24 +31,13 @@
         border: none;
         background-color: var(--button-color);
 
-        transition: transform 100ms ease-in-out;
-        transform: translate(0, 0);
-
         display: flex;
         justify-content: center;
         font-size: 1.5em;
-
-        box-shadow: 5px 5px 10px 2px rgba(0, 0, 0, 0.3);
     }
 
     .button:hover {
-        transition: transform 100ms ease-in-out;
-        transform: translate(0, -5px);
-
         cursor: pointer;
-
-        box-shadow:
-            inset 0 0 0 100px rgba(255, 255, 255, 0.25);
     }
 
     .content {

src/lib/posts/NewsCard.svelte

@@ -1,12 +1,12 @@
-<script lang="ts">
+<script>
-    export let post_url : string = '404';
+    export let post_url = '404';
-    export let thumbnail_url : string = '/favicon.png';
+    export let thumbnail_url = '/favicon.png';
-    export let thumbnail_alt : string = 'Picture describting the deprived devs logo';
+    export let thumbnail_alt = 'Picture describting the deprived devs logo';
-    export let title : string = '<title>';
+    export let title = '<title>';
-    export let summary : string = '<summary>';
+    export let summary = '<summary>';
-    export let creation_date : string = '<date>';
+    export let creation_date = '<date>';
 
-    const monthNames : string[] = ["January", "February", "March", "April", "May", "June",
+    const monthNames = ["January", "February", "March", "April", "May", "June",
                   "July", "August", "September", "October", "November", "December"];
 
     $: human_creation_date = new Date(+creation_date * 1000);
@@ -20,11 +20,7 @@
         <div class="content">
             <h3 id="title">{title}</h3>
             <p id="summary-text">{summary}</p>
-            <p id="date">
+            <p id="date">{human_creation_date.getDate()} {monthNames[human_creation_date.getMonth()]} {human_creation_date.getFullYear()}</p>
-                {human_creation_date.getDate()}
-                {monthNames[human_creation_date.getMonth()]}
-                {human_creation_date.getFullYear()}
-            </p>
         </div>
     </a>
 </div>

src/lib/posts/NewsVerticalCard.svelte

@@ -1,79 +0,0 @@
-<script lang="ts">
-    export let post_url : string = '404';
-    export let thumbnail_url : string = '/favicon.png';
-    export let thumbnail_alt : string = 'Picture describting the deprived devs logo';
-    export let title : string = '<title>';
-    export let summary : string = '<summary>';
-    export let creation_date : string = '<date>';
-
-    const monthNames : string[] = ["January", "February", "March", "April", "May", "June",
-                  "July", "August", "September", "October", "November", "December"];
-
-    $: human_creation_date = new Date(+creation_date * 1000);
-</script>
-
-<div class="news-card">
-    <a href=/post/{post_url}>
-        <div class="thumbnail">
-            <img src={thumbnail_url} alt={thumbnail_alt}/>
-        </div>
-        <div class="content">
-            <p id="date">
-                {human_creation_date.getDate()}
-                {monthNames[human_creation_date.getMonth()]}
-                {human_creation_date.getFullYear()}
-            </p>
-            <h3 id="title">{title}</h3>
-            <p id="summary-text">{summary}</p>
-        </div>
-    </a>
-</div>
-
-<style>
-    .news-card {
-        flex: 0 0 300px;
-    }
-
-    a {
-        min-width: 100%;
-        text-decoration: none;
-
-        display: flex;
-        flex-direction: column;
-    }
-
-    .thumbnail > img {
-        object-fit: cover;
-
-        box-shadow: 5px 5px 10px 2px rgba(0, 0, 0, 0.5);
-        border-radius: 8px;
-
-        min-width: 100%;
-        aspect-ratio: 16 / 9;
-    }
-
-    .content {
-        display: flex;
-        flex-direction: column;
-        gap: 10px;
-    }
-
-    #title {
-        font-size: 22px;
-        margin: 0;
-        text-decoration: none;
-        color: var(--text2);
-    }
-
-    #summary-text {
-        margin: 0;
-        text-decoration: none;
-        color: var(--text3);
-    }
-
-    #date {
-        margin: 0;
-        text-decoration: none;
-        color: var(--text4);
-    }
-</style>

src/routes/+layout.server.ts

@@ -3,7 +3,7 @@
     * for all posts on the website.
 */
 
-import { posts } from './post/posts_data';
+import { posts } from './post/posts_data.js';
 
 // Basically the same as Post but might contain less infomation - save storage
 type Summary = {

src/routes/+page.svelte

@@ -41,7 +41,7 @@
         <div id="more-posts">
             <Button type={ButtonType.Primary}>
                 <a slot="content" href="/post">
-                    <span>More News</span>
+                    <span>More Posts</span>
                 </a>
             </Button>
         </div>
@@ -62,7 +62,7 @@
     }
 
     #news-header {
-        font-size: min(8vw, 36px);
+        font-size: 48px;
         margin-right: auto;
     }
 

src/routes/post/+page.svelte

@@ -1,78 +1,12 @@
-<script lang="ts">
+<script>
-    import { type Post } from './posts_data';
+    import NewsCard from '$lib/posts/NewsCard.svelte';
-    import NewsVerticalCard from '$lib/posts/NewsVerticalCard.svelte';
 
     export let data; // <- contains post data
-
-    let search : string;
-    $: regex = search ? new RegExp(search, 'i') : null;
-    $: matches = (item : Post) =>
-        regex ? regex.test(item.title) || regex.test(item.summary) : true;
-    $: matched_posts = data.summaries.filter(matches);
 </script>
 
-<div class="head">
+<h1>All posts on deprived.dev!</h1>
-    <header>
+<ul>
-        <h1>Blog Posts</h1>
+    {#each data.summaries as summary}
-        <input id="search" placeholder="Search Blog Posts" bind:value={search} />
+        <NewsCard post_url={summary.url} title={summary.title} summary={summary.summary} creation_date={summary.creation_date} />
-    </header>
-</div>
-
-<div class="list">
-    {#if matched_posts.length == 0}
-        <span>No Matches</span>
-    {/if}
-    {#each matched_posts as summary}
-        <NewsVerticalCard
-            post_url={summary.url}
-            title={summary.title}
-            summary={summary.summary}
-            creation_date={summary.creation_date.toString()}
-        />
     {/each}
-</div>
+</ul>
-
-<style>
-    h1 {
-        font-size: 48px;
-        font-family: var(--title-font);
-    }
-    .head {
-        width: 100%;
-        background-color: var(--primary);
-    }
-
-    header {
-        display: flex;
-        flex-wrap: wrap;
-
-        align-items: center;
-        justify-content: space-around;
-
-        padding-bottom: 25px;
-        margin-bottom: 25px;
-    }
-
-    #search {
-        height: 40px;
-
-        border: none;
-        border-radius: 10px;
-        font-size: 18px;
-        line-height: 2;
-        padding: 0.5rem 0.8rem;
-
-        background-color: var(--background);
-        color: var(--text1);
-    }
-
-    .list {
-        max-width: 1500px;
-        display: flex;
-        flex-wrap: wrap;
-        gap: 25px;
-
-        justify-content: center;
-    }
-
-</style>

src/routes/post/posts_data.ts

@@ -1,5 +1,5 @@
 // TODO: document members
-export type Post = {
+type Post = {
     // Required
     url : string,
     title: string,