Made a 'pretty' news section on the main page for the latest news

src/lib/posts/ShowcaseNewsCard.svelte

@@ -0,0 +1,77 @@
+<script>
+    export let post_url = '404';
+    export let thumbnail_url = '/favicon.png';
+    export let thumbnail_alt = 'Picture describting the deprived devs logo';
+    export let title = '<title>';
+    export let summary = '<summary>';
+    export let creation_date = '<date>';
+</script>
+
+<div class="news-card">
+    <a href=/post/{post_url} >
+        <div class="thumbnail">
+            <img src={thumbnail_url} alt={thumbnail_alt}/>
+        </div>
+        <div class="content">
+            <h3 id="title">{title}</h3>
+            <p id="summary-text">{summary}</p>
+            <p id="date">{creation_date}</p>
+        </div>
+    </a>
+</div>
+
+<style>
+    a {
+        text-decoration: none;
+    }
+
+    .news-card {
+        display: inline-flex;
+        flex-direction: column;
+        gap: 15px;
+    }
+
+    .news-card h3 {
+        color: var(--text1);
+        margin: 0px;
+        font-size: 22px;
+    }
+
+    .thumbnail img {
+        background-size: cover;
+        aspect-ratio: 16 / 9;
+        background-position: center;
+
+        box-shadow: 5px 5px 10px 2px rgba(0, 0, 0, 0.5);
+        border-radius: 8px;
+
+        flex-shrink: 0;
+        min-width: 100%;
+        min-height: 100%;
+    }
+
+    .content {
+        display: flex;
+        flex-direction: column;
+
+        gap: 10px;
+    }
+
+    #title {
+        margin: 0;
+        text-decoration: none;
+        color: var(--text1);
+    }
+
+    #summary-text {
+        margin: 0;
+        text-decoration: none;
+        color: var(--text2);
+    }
+
+    #date {
+        margin: 0;
+        text-decoration: none;
+        color: var(--text4);
+    }
+</style>