From f133c00522ca20d94b0645b1939b21ad8a2437de Mon Sep 17 00:00:00 2001
From: =?UTF-8?q?Fe=CC=81lix=20Pe=CC=81ault?= <hello@flayks.com>
Date: Mon, 8 Nov 2021 14:03:00 +0100
Subject: [PATCH] Change Shop About section layout

---
 src/routes/shop/__layout.svelte |  6 +++-
 src/style/layouts/_poster.scss  |  3 +-
 src/style/pages/_shop.scss      | 49 ++++++++++++++++++++-------------
 3 files changed, 36 insertions(+), 22 deletions(-)

diff --git a/src/routes/shop/__layout.svelte b/src/routes/shop/__layout.svelte
index dd27d69..6185a20 100644
--- a/src/routes/shop/__layout.svelte
+++ b/src/routes/shop/__layout.svelte
@@ -129,7 +129,11 @@
     </nav>
 
     <section class="shop-page__about grid">
-        <p class="description text-normal">{shop.about}</p>
+        <div class="description grid text-normal">
+            <div class="description__inner">
+                {@html shop.about}
+            </div>
+        </div>
     </section>
 
     <PosterLayout
diff --git a/src/style/layouts/_poster.scss b/src/style/layouts/_poster.scss
index c85682e..42af748 100644
--- a/src/style/layouts/_poster.scss
+++ b/src/style/layouts/_poster.scss
@@ -14,8 +14,7 @@
 
         @include bp (sm) {
             grid-column: 2 / span calc(var(--columns) - 1);
-            text-align: center;
-            margin-bottom: 48px;
+            margin-bottom: 88px;
         }
     }
 
diff --git a/src/style/pages/_shop.scss b/src/style/pages/_shop.scss
index da217e6..17c883b 100644
--- a/src/style/pages/_shop.scss
+++ b/src/style/pages/_shop.scss
@@ -192,10 +192,6 @@
             left: 0;
             width: 100%;
 
-            @include bp (md) {
-                height: 80px;
-            }
-
             .container {
                 padding: 0 16px 24px;
 
@@ -259,31 +255,46 @@
 
     // About
     &__about {
-        display: flex;
         background-color: $color-cream;
         color: $color-text;
-        padding: 100px 0 56px;
-
-        @include bp (sm) {
-            display: grid;
-            padding: 120px 0;
-        }
 
         .description {
-            font-weight: 300;
-            max-width: 450px;
-            margin-left: 20px;
-            padding-right: 20px;
+            --columns: 8;
+            grid-column: 1 / span var(--columns);
+            margin-bottom: -96px;
+            padding: 88px 0 160px;
             font-size: rem(18px);
+            font-weight: 200;
             white-space: pre-line;
+            background: #fff;
+            border-radius: 0 0 12px 0;
+            box-shadow: 0 0 16px rgba(#000, 0.05);
 
+            @include bp (mob-lg) {
+                --columns: 7;
+            }
             @include bp (sm) {
-                grid-column: 3 / span 12;
-                max-width: 560px;
-                margin-left: 0;
-                padding: 0;
+                --columns: 17;
+                margin-bottom: -160px;
+                padding: 160px 0 274px;
                 font-size: rem(22px);
             }
+            @include bp (lg) {
+                --columns: 13;
+            }
+
+            &__inner {
+                grid-column: 2 / span calc(var(--columns) - 2);
+
+                @include bp (sm) {
+                    grid-column: 3 / span calc(var(--columns) - 5);
+                }
+            }
+
+            strong {
+                font-weight: 400;
+                color: $color-secondary;
+            }
         }
     }