From 8cc38065cee9edd42234a994a03f3812edd55ab7 Mon Sep 17 00:00:00 2001
From: =?UTF-8?q?Fe=CC=81lix=20Pe=CC=81ault?= <hello@flayks.com>
Date: Fri, 9 Sep 2022 23:26:58 +0200
Subject: [PATCH] Create global style for big sans serif title + change some
 responsive fonts

---
 src/components/organisms/Banner.svelte     |  2 +-
 src/components/organisms/ShopBanner.svelte |  2 +-
 src/style/_typography.scss                 | 19 +++++++++++++++++--
 src/style/organisms/_banner.scss           | 11 +----------
 src/style/pages/shop/_intro.scss           |  6 +-----
 5 files changed, 21 insertions(+), 19 deletions(-)

diff --git a/src/components/organisms/Banner.svelte b/src/components/organisms/Banner.svelte
index c3c5f2e..0f9a2a6 100644
--- a/src/components/organisms/Banner.svelte
+++ b/src/components/organisms/Banner.svelte
@@ -80,7 +80,7 @@
     </div>
 
     <div class="banner__title">
-        <h1>{title}</h1>
+        <h1 class="title-big-sans">{title}</h1>
     </div>
 
     <Image
diff --git a/src/components/organisms/ShopBanner.svelte b/src/components/organisms/ShopBanner.svelte
index 1fc745c..0fcc93b 100644
--- a/src/components/organisms/ShopBanner.svelte
+++ b/src/components/organisms/ShopBanner.svelte
@@ -106,7 +106,7 @@
     </div>
 
     <div class="shop-page__title">
-        <h1>Shop</h1>
+        <h1 class="title-big-sans">Shop</h1>
     </div>
 
     <nav class="shop-page__nav">
diff --git a/src/style/_typography.scss b/src/style/_typography.scss
index 332a36c..8ea869f 100644
--- a/src/style/_typography.scss
+++ b/src/style/_typography.scss
@@ -63,7 +63,22 @@
     letter-spacing: -0.025em;
 
     @include bp (sm) {
-        font-size: clamp(#{rem(28px)}, 7vw, #{rem(48px)});
+        font-size: rem(32px);
+    }
+    @include bp (md) {
+        font-size: clamp(#{rem(32px)}, 3.5vw, #{rem(48px)});
+    }
+}
+
+// Big - Sans Sefif
+.title-big-sans {
+    font-size: rem(40px);
+    font-weight: 400;
+    line-height: 1.2;
+    letter-spacing: -0.02em;
+
+    @include bp (sm) {
+        font-size: clamp(#{rem(40px)}, 6vw, #{rem(56px)})
     }
 }
 
@@ -190,7 +205,7 @@
     font-size: rem(14px);
     line-height: 1.3;
 
-    @include bp (sm) {
+    @include bp (md) {
         font-size: rem(16px);
         line-height: 1.4;
     }
diff --git a/src/style/organisms/_banner.scss b/src/style/organisms/_banner.scss
index b79f11f..e8cc7fa 100644
--- a/src/style/organisms/_banner.scss
+++ b/src/style/organisms/_banner.scss
@@ -19,18 +19,9 @@
         width: 100%;
         transform: translate3d(-50%, -50%, 0);
 
-        @include bp (sm) {
-            // top: 50%;
-            // left: 0;
-            // transform: none;
-        }
-
         h1 {
-            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;
+            text-shadow: 0px 8px 12px rgba(#000, 0.25);
 
             :global(span), :global(strong) {
                 color: #fff;
diff --git a/src/style/pages/shop/_intro.scss b/src/style/pages/shop/_intro.scss
index 8154e51..e6763f5 100644
--- a/src/style/pages/shop/_intro.scss
+++ b/src/style/pages/shop/_intro.scss
@@ -80,18 +80,14 @@
         transform: translate3d(-50%, -50%, 0);
 
         @include bp (sm) {
-            // top: clamp(#{rem(40px)}, 16vw, #{rem(144px)});
             top: 40%;
             left: 0;
             transform: none;
         }
 
         :global(h1) {
-            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;
+            text-shadow: 0px 8px 12px rgba(#000, 0.25);
 
             :global(span), :global(strong) {
                 color: #fff;