From 0728491aa6ad3d655d165a7e2841ac330dccf18f Mon Sep 17 00:00:00 2001
From: =?UTF-8?q?Fe=CC=81lix=20Pe=CC=81ault?= <hello@flayks.com>
Date: Wed, 14 Sep 2022 22:07:31 +0200
Subject: [PATCH] Use global typography styles on Poster page layout

---
 src/components/layouts/PosterLayout.svelte |  8 ++++----
 src/style/_typography.scss                 | 11 +++++++++--
 src/style/layouts/_poster.scss             | 22 ++++++----------------
 3 files changed, 19 insertions(+), 22 deletions(-)

diff --git a/src/components/layouts/PosterLayout.svelte b/src/components/layouts/PosterLayout.svelte
index 803b145..c3c7999 100644
--- a/src/components/layouts/PosterLayout.svelte
+++ b/src/components/layouts/PosterLayout.svelte
@@ -75,8 +75,8 @@
     <aside class="poster-layout__buy">
         <div class="poster-layout__info">
             <dl>
-                <dt>{capitalizeFirstLetter(product.type)}</dt>
-                <dd>{shopProduct.name} – {shopProduct.price}€</dd>
+                <dt class="title-small">{capitalizeFirstLetter(product.type)}</dt>
+                <dd class="text-info">{shopProduct.name} – {shopProduct.price}€</dd>
             </dl>
             <Button
                 tag="button"
@@ -114,10 +114,10 @@
     <div class="poster-layout__about grid">
         <div class="text container">
             {#if product.description}
-                <p>{product.description}</p>
+                <p class="headline text-large">{product.description}</p>
             {/if}
             {#if product.details}
-                <p class="details">{product.details}</p>
+                <p class="details text-xsmall">{product.details}</p>
             {/if}
         </div>
     </div>
diff --git a/src/style/_typography.scss b/src/style/_typography.scss
index 82f6149..4dde40b 100644
--- a/src/style/_typography.scss
+++ b/src/style/_typography.scss
@@ -142,9 +142,16 @@
 
 // Large
 .text-large {
-    font-size: rem(32px);
+    font-size: rem(24px);
     font-weight: 400;
-    line-height: 1.5;
+    line-height: 1.4;
+
+    @include bp (sm) {
+        font-size: rem(28px);
+    }
+    @include bp (sd) {
+        font-size: rem(32px);
+    }
 }
 
 // Medium
diff --git a/src/style/layouts/_poster.scss b/src/style/layouts/_poster.scss
index 1a4f93e..dc2e257 100644
--- a/src/style/layouts/_poster.scss
+++ b/src/style/layouts/_poster.scss
@@ -73,20 +73,15 @@
         // Title
         dt {
             color: $color-secondary;
-            font-family: $font-serif;
-            font-size: rem(36px);
-            line-height: 1.3;
+            line-height: 1.2;
         }
         // Text
         dd {
             margin-top: 8px;
-            font-size: rem(14px);
-            line-height: 1.4;
             color: $color-gray;
 
             @include bp (sm) {
                 max-width: none;
-                font-size: rem(16px);
             }
         }
     }
@@ -177,7 +172,7 @@
         white-space: pre-line;
 
         @include bp (sm) {
-            padding: 144px 0 260px;
+            padding: clamp(88px, 20vw, 144px) 0 clamp(256px, 20vw, 320px);
             margin: -120px 0;
         }
 
@@ -186,25 +181,20 @@
             max-width: 768px;
             margin-left: 0;
             margin-right: 0;
-            font-size: clamp(#{rem(22px)}, 5vw, #{rem(28px)});
-            font-weight: 200;
 
             @include bp (sm) {
                 grid-column: 5 / span 12;
-                font-size: rem(32px);
             }
         }
-
+        .headline {
+            font-weight: 300;
+        }
         .details {
             color: $color-gray;
-            font-size: rem(16px);
             margin-top: 32px;
-            line-height: 1.5;
-            font-weight: 300;
 
             @include bp (sm) {
-                margin-top: 56px;
-                font-size: rem(18px);
+                margin-top: 40px;
             }
         }
     }