From 15384d2aa688ebbf5b9442a0a1d0637d7b568888 Mon Sep 17 00:00:00 2001
From: Daniel Bulant <danbulant@gmail.com>
Date: Sat, 22 Jan 2022 22:13:42 +0100
Subject: [PATCH] improved post styles

---
 src/components/heroPost.svelte |  4 ++++
 src/components/post.svelte     | 21 +++++++++++++++++++--
 src/components/posts.svelte    |  9 ++++++---
 3 files changed, 29 insertions(+), 5 deletions(-)

diff --git a/src/components/heroPost.svelte b/src/components/heroPost.svelte
index 2e5860e..f09ec09 100644
--- a/src/components/heroPost.svelte
+++ b/src/components/heroPost.svelte
@@ -29,6 +29,10 @@
 </div>
 
 <style>
+    .post {
+        cursor: pointer;
+        user-select: none;
+    }
     .thumbnail {
         border-radius: 5px;
         width: 100%;
diff --git a/src/components/post.svelte b/src/components/post.svelte
index a032ab5..5d660c5 100644
--- a/src/components/post.svelte
+++ b/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;
     }
diff --git a/src/components/posts.svelte b/src/components/posts.svelte
index b9f86c0..a0c0240 100644
--- a/src/components/posts.svelte
+++ b/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}
-            <Post {...post} />
+        {#each posts as post (post.title)}
+            <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);