From f5bb095dfbc26e6de1cfef092a3cf128be09478c Mon Sep 17 00:00:00 2001
From: =?UTF-8?q?Fe=CC=81lix=20Pe=CC=81ault?= <hello@flayks.com>
Date: Fri, 29 Oct 2021 23:48:01 +0200
Subject: [PATCH] Rework Shop's Intro part

---
 src/style/pages/_shop.scss | 162 +++++++++++++++++++++----------------
 1 file changed, 92 insertions(+), 70 deletions(-)

diff --git a/src/style/pages/_shop.scss b/src/style/pages/_shop.scss
index 9755743..99ed66d 100644
--- a/src/style/pages/_shop.scss
+++ b/src/style/pages/_shop.scss
@@ -1,71 +1,16 @@
 .shop-page {
-
-    // Header
-    header {
-        position: fixed;
-        // display: flex;
-        // display: none;
-        z-index: 20;
-        bottom: 0;
-        width: 100%;
-        justify-content: center;
-        align-items: center;
-        background: linear-gradient(180deg, rgba(45, 4, 88, 0) 84.2%, #1E0538 100%);
-
-        @include bp (sm) {
-            display: flex;
-        }
-
-        // Shop
-        p {
-            position: absolute;
-            left: 50%;
-            transform: translateX(-50%);
-            bottom: 64px;
-        }
-
-        // Navigation
-        ul {
-            position: absolute;
-            display: flex;
-            bottom: 24px;
-            left: 0;
-            right: 0;
-
-            li {
-                display: block;
-            }
-            a {
-                text-decoration: none;
-                font-size: rem(22px);
-                font-family: $font-serif;
-                color: $color-tertiary;
-                margin: 0 10px;
-
-                &:hover {
-                    color: $color-secondary;
-                }
-
-                @include bp (sm) {
-                    font-size: rem(24px);
-                    margin: 0 12px;
-                }
-            }
-        }
-    }
-
     // Intro
     &__intro {
         position: relative;
         height: 100vh;
         min-height: 800px;
         overflow: hidden;
-        background-color: $color-primary-darker;
 
         // Top Menu
         // Back
         .back {
             position: absolute;
+            z-index: 2;
             left: 32px;
             top: 32px;
             color: #fff;
@@ -82,6 +27,7 @@
         // Shop
         .shop-title {
             position: absolute;
+            z-index: 2;
             top: 32px;
             left: 50%;
             transform: translateX(-50%);
@@ -93,24 +39,11 @@
             }
         }
 
-        // Background Image
-        picture {
-            width: 100%;
-            height: 100%;
-            opacity: 0.55;
-
-            img {
-                display: block;
-                object-fit: cover;
-                width: 100%;
-                height: 100%;
-            }
-        }
-
         // Site Title
         h1 {
             font-size: clamp(#{rem(88px)}, 10vw, #{rem(140px)});
             position: absolute;
+            z-index: 2;
             top: 50%;
             left: 50%;
             transform: translate(-50%, -50%);
@@ -121,6 +54,95 @@
                 color: #fff;
             }
         }
+
+        // Background Image
+        picture {
+            position: relative;
+            display: flex;
+            align-items: flex-end;
+            width: 100%;
+            height: 100%;
+            background-color: $color-primary-darker;
+            pointer-events: none;
+            user-select: none;
+
+            img {
+                opacity: 0.55;
+                display: block;
+                width: 100%;
+                height: 100%;
+                object-fit: cover;
+            }
+
+            // Gradient
+            &:before {
+                display: block;
+                content: "";
+                position: absolute;
+                z-index: 1;
+                top: 0;
+                left: 0;
+                width: 100%;
+                height: 100%;
+                background: linear-gradient(180deg, rgba(45, 4, 88, 0) 84.2%, #1E0538 100%);
+            }
+        }
+
+        // Navigation
+        header {
+            position: absolute;
+            z-index: 20;
+            bottom: 0;
+            width: 100%;
+
+            @include bp (md) {
+                height: 80px;
+            }
+
+            .container {
+                @include bp (md) {
+                    display: grid;
+                    grid-template-columns: 15% auto 15%;
+                    align-items: flex-end;
+                    gap: 16px;
+                    height: 100%;
+                    padding: 0 32px 32px;
+                }
+            }
+
+            // Shop
+            p {
+                margin-right: auto;
+            }
+
+            // Navigation
+            nav {
+                ul {
+                    display: flex;
+                    align-items: center;
+                    justify-content: center;
+                }
+                li {
+                    display: block;
+                }
+                a {
+                    text-decoration: none;
+                    font-size: rem(22px);
+                    font-family: $font-serif;
+                    color: $color-tertiary;
+                    margin: 0 10px;
+
+                    &:hover {
+                        color: $color-secondary;
+                    }
+
+                    @include bp (sm) {
+                        font-size: rem(24px);
+                        margin: 0 12px;
+                    }
+                }
+            }
+        }
     }
 
     // About