improved post styles

src/components/heroPost.svelte

@@ -29,6 +29,10 @@
 </div>
 
 <style>
+    .post {
+        cursor: pointer;
+        user-select: none;
+    }
     .thumbnail {
         border-radius: 5px;
         width: 100%;

src/components/post.svelte

@@ -5,9 +5,20 @@
     export var date;
     export var title;
     export var authorIcon;
+    export var currentHover;
+    
+    var grayscale = false;
+    $: grayscale = currentHover && currentHover !== title;
+
+    function mouseenter() {
+        currentHover = title;
+    }
+    function mouseleave() {
+        if(currentHover == title) currentHover = null;
+    }
 </script>
 
-<div class="post">
+<div class="post" class:grayscale on:mouseenter={mouseenter} on:mouseleave={mouseleave}>
     <img src={thumbnail} alt="Thumbnail" class="thumbnail" draggable={false}>
     <div class="data">
         <div class="categories">
@@ -27,10 +38,16 @@
 </div>
 
 <style>
+    .grayscale {
+        filter: grayscale(100%) blur(2px);
+    }
     .post {
+        transition: filter .3s;
+        cursor: pointer;
+        user-select: none;
         width: 100%;
         height: 150px;
-        margin: 10px 0;
+        padding: 10px 0;
         display: flex;
         align-items: center;
     }

src/components/posts.svelte

@@ -41,6 +41,8 @@
         categories: ["test"],
         date: "16-01-2021"
     }];
+
+    var currentHover = null;
 </script>
 
 <h2>Posts</h2>
@@ -49,8 +51,8 @@
         <HeroPost {...heroPost} />
     </div>
     <div class="posts">
-        {#each posts as post}
+        {#each posts as post (post.title)}
-            <Post {...post} />
+            <Post {...post} bind:currentHover />
         {/each}
     </div>
 </div>
@@ -64,9 +66,10 @@
         margin: auto;
     }
     h2 {
-        font-weight: 400;
+        font-weight: 500;
         max-width: 1360px;
         margin: auto;
+        margin-top: 50px;
     }
     .hero {
         width: calc(60% - 5px);