From bf8b2f3ff3dbbe462f15b09b2aa3b91675e2d4fd Mon Sep 17 00:00:00 2001
From: =?UTF-8?q?Fe=CC=81lix=20Pe=CC=81ault?= <hello@flayks.com>
Date: Fri, 20 May 2022 23:06:00 +0200
Subject: [PATCH] Update Shop intro and poster layout

---
 src/routes/shop/index.svelte     |  6 +-----
 src/style/layouts/_poster.scss   |  9 ++++++++-
 src/style/pages/shop/_intro.scss | 20 ++++++++++----------
 3 files changed, 19 insertions(+), 16 deletions(-)

diff --git a/src/routes/shop/index.svelte b/src/routes/shop/index.svelte
index 8dc8dd0..5df7116 100644
--- a/src/routes/shop/index.svelte
+++ b/src/routes/shop/index.svelte
@@ -103,13 +103,9 @@
                 </svg>
                 <span>Back to Houses Of</span>
             </a>
-
-            <span class="shop-title">Shop</span>
         </div>
 
-        <SiteTitle
-            variant="inline"
-        />
+        <h1>Shop</h1>
 
         <nav class="shop-page__nav">
             <div class="container">
diff --git a/src/style/layouts/_poster.scss b/src/style/layouts/_poster.scss
index dbe6a33..3207469 100644
--- a/src/style/layouts/_poster.scss
+++ b/src/style/layouts/_poster.scss
@@ -11,12 +11,18 @@
         width: auto;
         grid-column: 1 / span var(--columns);
         display: flex;
+        margin: clamp(72px, 24vw, 180px) 0 clamp(56px, 24vw, 120px);
+
+        @include bp (sm) {
+            margin: clamp(112px, 10vw, 200px) 0 clamp(88px, 10vw, 120px);
+        }
     }
     h2 {
         display: block;
         white-space: nowrap;
         margin-bottom: 16px;
-        font-size: clamp(200px, 20vw, 340px);
+        margin-left: clamp(24px, 5vw, 48px);
+        font-size: clamp(120px, 20vw, 240px);
         color: $color-secondary;
 
         @include bp (mob-lg) {
@@ -25,6 +31,7 @@
         @include bp (sm) {
             grid-column: 2 / span calc(var(--columns) - 1);
             margin-bottom: 88px;
+            font-size: clamp(200px, 20vw, 340px);
         }
     }
 
diff --git a/src/style/pages/shop/_intro.scss b/src/style/pages/shop/_intro.scss
index 514717e..a6f8975 100644
--- a/src/style/pages/shop/_intro.scss
+++ b/src/style/pages/shop/_intro.scss
@@ -4,11 +4,15 @@
 &__intro {
     position: relative;
     z-index: 30;
-    height: 100vh;
-    min-height: 600px;
-    max-height: 1400px;
+    height: 30vw;
+    min-height: 430px;
     overflow: hidden;
 
+    @include bp (lg) {
+        max-height: 400px;
+        min-height: 275px;
+    }
+
     // Top Menu
     .top {
         position: absolute;
@@ -74,22 +78,18 @@
         left: 50%;
         width: 100%;
         transform: translate3d(-50%, -50%, 0);
-        // font-size: clamp(#{rem(88px)}, 10vw, #{rem(140px)});
+        font-size: clamp(#{rem(48px)}, 7vw, #{rem(56px)});
+        font-weight: 400;
         text-shadow: 0px 8px 12px rgba(#000, 0.25);
         text-align: center;
-
+        letter-spacing: -0.02em;
 
         @include bp (sm) {
             // top: clamp(#{rem(40px)}, 16vw, #{rem(144px)});
             top: 40%;
             left: 0;
-            font-size: clamp(#{rem(40px)}, 8vw, #{rem(96px)});
             transform: none;
         }
-        @include bp (md) {
-            // top: clamp(#{rem(40px)}, 10vw, #{rem(96px)});
-            font-size: clamp(#{rem(40px)}, 6vw, #{rem(96px)});
-        }
 
         span, strong {
             color: #fff;