From 2e05f00b68edd280c7219ec670208172e6fef73a Mon Sep 17 00:00:00 2001
From: =?UTF-8?q?Fe=CC=81lix=20Pe=CC=81ault?= <hello@flayks.com>
Date: Fri, 5 Nov 2021 12:57:15 +0100
Subject: [PATCH] Add link to Poster component and make a better hover

Buttons are now under the image, creating a parallax scale effect
---
 src/components/molecules/Poster.svelte | 24 ++++++++++++----------
 src/style/molecules/_poster.scss       | 28 ++++++++++++++++----------
 2 files changed, 30 insertions(+), 22 deletions(-)

diff --git a/src/components/molecules/Poster.svelte b/src/components/molecules/Poster.svelte
index 1bda70b..32b31eb 100644
--- a/src/components/molecules/Poster.svelte
+++ b/src/components/molecules/Poster.svelte
@@ -8,17 +8,19 @@
 
 <div class="poster">
     {#if image}
-        <Image
-            id={image.id}
-            sizeKey="product"
-            sizes={{
-                small: { width: 326 },
-                medium: { width: 326 },
-                large: { width: 326 },
-            }}
-            ratio={1.5}
-            alt="Poster of {location.name}"
-        />
+        <a href="/shop/poster-{location.slug}">
+            <Image
+                id={image.id}
+                sizeKey="product"
+                sizes={{
+                    small: { width: 326 },
+                    medium: { width: 326 },
+                    large: { width: 326 },
+                }}
+                ratio={1.5}
+                alt="Poster of {location.name}"
+            />
+        </a>
     {/if}
     <div class="buttons">
         <Button
diff --git a/src/style/molecules/_poster.scss b/src/style/molecules/_poster.scss
index 6b98e32..2f4052c 100644
--- a/src/style/molecules/_poster.scss
+++ b/src/style/molecules/_poster.scss
@@ -9,7 +9,16 @@
         max-width: 600px;
     }
 
+    & > a {
+        display: block;
+        pointer-events: none;
+    }
+
+    // Poster image
     img {
+        pointer-events: auto;
+        position: relative;
+        z-index: 2;
         display: block;
         width: 100%;
         height: auto;
@@ -21,26 +30,26 @@
         transition: transform 0.8s var(--ease-quart), border-radius 0.8s var(--ease-quart);
     }
 
+    // Buttons
     .buttons {
         display: flex;
         margin-top: 40px;
         justify-content: center;
-        // opacity: 0;
-        transform: translate3d(0, 48px, 0);
-        transition: transform 0.8s var(--ease-quart), opacity 0.4s var(--ease-quart);
+        transform: translate3d(0, 100%, 0);
+        transition: transform 0.8s var(--ease-quart);
 
         @include bp (sm) {
             position: absolute;
+            z-index: 1;
+            bottom: 4.25%;
+            left: 0;
+            width: 100%;
             align-items: center;
             justify-content: center;
-            bottom: 14px;
-            left: 10%;
-            right: 10%;
         }
 
         a {
-            margin-right: 8px;
-            margin-left: 8px;
+            margin: 0 clamp(4px, 0.3vw, 8px);
             text-align: center;
         }
     }
@@ -52,10 +61,7 @@
             border-radius: 8px;
         }
         .buttons {
-            opacity: 1;
             transform: translate3d(0,0,0);
-            // transition-delay: 50ms;
         }
     }
-
 }
\ No newline at end of file