From 7242027be98b5d146e25de8db46a4be1ea91e087 Mon Sep 17 00:00:00 2001
From: =?UTF-8?q?Fe=CC=81lix=20Pe=CC=81ault?= <hello@flayks.com>
Date: Sun, 7 Nov 2021 23:12:48 +0100
Subject: [PATCH] Fix Shop intro responsive

---
 src/routes/shop/__layout.svelte  | 14 +++--
 src/style/atoms/_site-title.scss |  2 +-
 src/style/pages/_shop.scss       | 89 ++++++++++++++++++++++----------
 3 files changed, 74 insertions(+), 31 deletions(-)

diff --git a/src/routes/shop/__layout.svelte b/src/routes/shop/__layout.svelte
index 4dd9ae1..ec9b526 100644
--- a/src/routes/shop/__layout.svelte
+++ b/src/routes/shop/__layout.svelte
@@ -62,10 +62,16 @@
     <Cart />
 
     <section class="shop-page__intro" bind:this={introEl}>
-        <a href="/" class="back">
-            Back to Houses Of
-        </a>
-        <span class="shop-title">Shop</span>
+        <div class="top container">
+            <a href="/" class="back">
+                <svg width="5" height="8" viewBox="0 0 5 8" fill="none" xmlns="http://www.w3.org/2000/svg">
+                    <path d="M4 1 1 4l3 3" stroke="#fff" stroke-linecap="round" stroke-linejoin="round"/>
+                </svg>
+                <span>Back to Houses Of</span>
+            </a>
+
+            <span class="shop-title">Shop</span>
+        </div>
 
         <SiteTitle
             variant="inline"
diff --git a/src/style/atoms/_site-title.scss b/src/style/atoms/_site-title.scss
index 7205639..261b469 100644
--- a/src/style/atoms/_site-title.scss
+++ b/src/style/atoms/_site-title.scss
@@ -75,7 +75,7 @@
 
             @include bp (sm) {
                 font-size: 0.333em;
-                margin: 0 16px 0 20px;
+                margin: 0 10px 0 20px;
             }
         }
     }
diff --git a/src/style/pages/_shop.scss b/src/style/pages/_shop.scss
index 310260a..da217e6 100644
--- a/src/style/pages/_shop.scss
+++ b/src/style/pages/_shop.scss
@@ -74,35 +74,48 @@
         overflow: hidden;
 
         // Top Menu
-        // Back
-        .back {
+        .top {
             position: absolute;
-            z-index: 2;
-            left: 32px;
-            top: 32px;
-            color: #fff;
-            text-decoration: none;
-            font-size: rem(14px);
-            color: $color-cream;
-            max-width: 76px;
+            z-index: 1;
+            top: 20px;
+            left: 0;
+            padding: 0 20px;
+            display: flex;
+            justify-content: space-between;
+            width: 100%;
+            margin: 0 auto;
 
             @include bp (sm) {
-                max-width: none;
-                font-size: rem(18px);
+                top: 32px;
+                padding: 0 32px;
             }
-        }
-        // Shop
-        .shop-title {
-            position: absolute;
-            z-index: 2;
-            top: 32px;
-            left: 50%;
-            transform: translateX(-50%);
-            font-size: rem(14px);
-            color: $color-cream;
 
-            @include bp (sm) {
-                font-size: rem(18px);
+            // Back
+            .back {
+                display: flex;
+                align-items: center;
+                color: #fff;
+                font-size: rem(14px);
+                color: $color-cream;
+                text-decoration: none;
+
+                @include bp (sm) {
+                    max-width: none;
+                    font-size: rem(18px);
+                }
+
+                svg {
+                    margin-right: 8px;
+                }
+            }
+            // Shop
+            .shop-title {
+                font-size: rem(14px);
+                color: $color-cream;
+
+                @include bp (sm) {
+                    font-size: rem(18px);
+                }
             }
         }
 
@@ -114,12 +127,28 @@
             left: 50%;
             width: 100%;
             transform: translate3d(-50%, -50%, 0);
-            font-size: clamp(#{rem(88px)}, 10vw, #{rem(140px)});
+            // font-size: clamp(#{rem(88px)}, 10vw, #{rem(140px)});
+            text-shadow: 0px 8px 12px rgba(#000, 0.25);
             text-align: center;
 
+
+            @include bp (sm) {
+                top: clamp(#{rem(40px)}, 16vw, #{rem(144px)});
+                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;
             }
+            span {
+                font-weight: 300;
+            }
         }
 
         // Background Image
@@ -160,6 +189,7 @@
             position: absolute;
             z-index: 20;
             bottom: 0;
+            left: 0;
             width: 100%;
 
             @include bp (md) {
@@ -167,6 +197,8 @@
             }
 
             .container {
+                padding: 0 16px 24px;
+
                 @include bp (md) {
                     display: grid;
                     grid-template-columns: 15% auto 15%;
@@ -179,7 +211,12 @@
 
             // Shop
             p {
-                margin-right: auto;
+                text-align: center;
+                margin-bottom: 8px;
+
+                @include bp (md) {
+                    margin-right: auto;
+                }
             }
 
             // Navigation