/post page styled

src/lib/IO/Button.svelte

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

src/lib/posts/NewsVerticalCard.svelte

@@ -0,0 +1,79 @@
+<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.js';
+import { posts } from './post/posts_data';
 
 // 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 Posts</span>
+                    <span>More News</span>
                 </a>
             </Button>
         </div>
@@ -62,7 +62,7 @@
     }
 
     #news-header {
-        font-size: 48px;
+        font-size: min(8vw, 36px);
         margin-right: auto;
     }
 

src/routes/post/+page.svelte

@@ -1,12 +1,78 @@
-<script>
+<script lang="ts">
-    import NewsCard from '$lib/posts/NewsCard.svelte';
+    import { type Post } from './posts_data';
+    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>
 
-<h1>All posts on deprived.dev!</h1>
+<div class="head">
-<ul>
+    <header>
-    {#each data.summaries as summary}
+        <h1>Blog Posts</h1>
-        <NewsCard post_url={summary.url} title={summary.title} summary={summary.summary} creation_date={summary.creation_date} />
+        <input id="search" placeholder="Search Blog Posts" bind:value={search} />
+    </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}
-</ul>
+</div>
+
+<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
-type Post = {
+export type Post = {
     // Required
     url : string,
     title: string,