news post hover

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/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>

src/routes/post/+page.svelte

@@ -7,6 +7,11 @@
 <h1>All posts on deprived.dev!</h1>
 <ul>
     {#each data.summaries as summary}
-        <NewsCard post_url={summary.url} title={summary.title} summary={summary.summary} creation_date={summary.creation_date} />
+        <NewsCard
+            post_url={summary.url}
+            title={summary.title}
+            summary={summary.summary}
+            creation_date={summary.creation_date.toString()}
+        />
     {/each}
 </ul>