From 68f44f90f7c2d265044561b55798d916ca5dabaf Mon Sep 17 00:00:00 2001
From: Daniel Bulant <danbulant@gmail.com>
Date: Sat, 4 Mar 2023 19:24:23 +0100
Subject: [PATCH] small visual changes for home page

---
 src/lib/components/hero.svelte    | 28 ++++++++++++++++++++++++++--
 src/lib/components/posts.svelte   |  5 ++---
 src/lib/components/project.svelte |  4 ++--
 3 files changed, 30 insertions(+), 7 deletions(-)

diff --git a/src/lib/components/hero.svelte b/src/lib/components/hero.svelte
index 8448245..02dfc58 100644
--- a/src/lib/components/hero.svelte
+++ b/src/lib/components/hero.svelte
@@ -18,11 +18,18 @@
 </script>
 
 <div class="hero">
-    <div class="bg">
+    <div class="bg z-0">
         <img class="bg1" style="right: {(current - 3) * 100}%;" src="/screenshots/heaventaker/heaventaker.webp" alt="">
         <img class="bg2" style="right: {(current - 2) * 100}%;" src="/screenshots/animasher.webp" alt="">
         <img class="bg3" style="right: {(current - 1) * 100}%;" src="/screenshots/ignibg.webp" alt="">
-        <img class="bg4" style="right: {(current - 0) * 100}%;" src="/screenshots/mangadex.webp" alt="">
+        <img class="bg4" style="right: {(current - 0) * 100}%;" src="/screenshots/mangadex.png" alt="">
+    </div>
+    <div class="blur z-1"></div>
+    <div class="bg z-2">
+        <img class="bg1" style="right: {(current - 3) * 100}%;" src="/screenshots/heaventaker/heaventaker.webp" alt="">
+        <img class="bg2" style="right: {(current - 2) * 100}%;" src="/screenshots/animasher.webp" alt="">
+        <img class="bg3" style="right: {(current - 1) * 100}%;" src="/screenshots/ignibg.webp" alt="">
+        <img class="bg4" style="right: {(current - 0) * 100}%;" src="/screenshots/mangadex.png" alt="">
     </div>
     <slot />
 </div>
@@ -60,6 +67,23 @@
         border-radius: 5px;
         transition: right .4s;
     }
+    .blur {
+        position: absolute;
+        top: -4rem;
+        left: -4rem;
+        width: calc(100% + 8rem);
+        height: calc(100% + 8rem);
+        backdrop-filter: blur(20px);
+    }
+    .z-0 {
+        z-index: -3;
+    }
+    .z-1 {
+        z-index: -2;
+    }
+    .z-2 {
+        z-index: -1;
+    }
     @media (prefers-reduced-motion) {
         .bg img {
             transition: none;
diff --git a/src/lib/components/posts.svelte b/src/lib/components/posts.svelte
index f129d52..c296b33 100644
--- a/src/lib/components/posts.svelte
+++ b/src/lib/components/posts.svelte
@@ -39,11 +39,10 @@
         margin: 50px auto 30px;
     }
     .hero {
-        width: calc(60% - 5px);
-        margin-right: 5px;
+        @apply mr-2 mb-4;
+        width: calc(60% - 0.5rem);
         min-width: 620px;
         flex-shrink: 0;
-        margin-bottom: 15px;
     }
     .posts {
         width: calc(40% - 5px);
diff --git a/src/lib/components/project.svelte b/src/lib/components/project.svelte
index f993eb1..5602210 100644
--- a/src/lib/components/project.svelte
+++ b/src/lib/components/project.svelte
@@ -90,7 +90,7 @@
         filter: blur(35px);
     }
     .desc {
-        @apply absolute top-0 left-0 w-full h-full rounded-lg opacity-0 select-none flex flex-col py-10px px-15px;
+        @apply absolute top-0 left-0 w-full h-full rounded-lg opacity-0 select-none flex flex-col py-2rem px-2rem;
         transition: background-color 0.3s, opacity 0.3s;
         background-color: rgba(0, 0, 0, 0.2);
         color: rgb(214, 214, 214);
@@ -114,7 +114,7 @@
         filter: blur(0px) grayscale(0);
     }
     img.grayscale {
-        filter: grayscale(100%);
+        filter: blur(0px) grayscale(100%);
     }
     h3 {
         @apply font-normal text-xl;