Rework Shop nav and intro classes and styling

- rename things and move styles around to make more sense
- quick nav past banner was somehow broken and would not appear past banner

src/components/organisms/ShopBanner.svelte

@@ -1,5 +1,5 @@
 <style lang="scss">
-    @import "../../style/pages/shop/intro";
+    @import "../../style/pages/shop/banner";
 </style>
 
 <script lang="ts">
@@ -51,7 +51,7 @@
          */
         const animation = timeline([
             // Hero image
-            ['.shop-page__background', {
+            ['.shop-background', {
                 scale: [1.06, 1],
                 opacity: [0, 1],
                 z: 0,
@@ -61,7 +61,7 @@
             }],
 
             // Intro top elements
-            ['.shop-page__intro .top > *', {
+            ['.shop-banner .top > *', {
                 y: [-100, 0],
                 opacity: [0, 1],
             }, {
@@ -70,7 +70,7 @@
             }],
 
             // Hero title
-            ['.shop-page__title h1', {
+            ['.shop-banner .title h1', {
                 y: [32, 0],
                 opacity: [0, 1],
             }, {
@@ -78,7 +78,7 @@
             }],
 
             // Intro navbar
-            ['.shop-page__nav .container > *, .shop-page__intro .button-cart', {
+            ['.shop-banner .nav .container > *, .shop-banner .button-cart', {
                 y: [100, 0],
                 opacity: [0, 1],
             }, {
@@ -108,7 +108,7 @@
 <svelte:window bind:innerWidth />
 
 
-<section class="shop-page__intro" bind:this={introEl}>
+<section class="shop-banner" bind:this={introEl}>
     <div class="top container">
         <a href="/" class="back" data-sveltekit-noscroll>
             <svg width="5" height="8" viewBox="0 0 5 8" fill="none" xmlns="http://www.w3.org/2000/svg">
@@ -118,11 +118,11 @@
         </a>
     </div>
 
-    <div class="shop-page__title">
+    <div class="title">
         <h1 class="title-big-sans">Shop</h1>
     </div>
 
-    <nav class="shop-page__nav">
+    <div class="nav">
         <div class="container">
             <p class="text-label">Choose a city</p>
             <nav>
@@ -137,12 +137,12 @@
                 </ul>
             </nav>
         </div>
-    </nav>
+    </div>
 
     <ButtonCart />
 
     <Image
-        class="shop-page__background"
+        class="background"
         id={shop.page_heroimage.id}
         alt={shop.page_heroimage.alt}
         sizeKey="hero"
@@ -155,7 +155,7 @@
     />
 </section>
 
-<nav class="shop-location"
+<nav class="shop-quicknav"
     class:is-visible={scrolledPastIntro}
     class:is-overlaid={$cartOpen}
 >

src/style/pages/_shop.scss

@@ -1,8 +1,8 @@
-.shop-page {
+:global(.shop-page) {
     position: relative;
 
     // Error
-    &__error {
+    :global(.shop-page__error) {
         padding: 64px 0;
         background: $color-cream;
         color: $color-text;
@@ -31,32 +31,6 @@
     }
 }
 
-// Nav
-:global(.shop-location) {
-    --inset: 20px;
-    display: flex;
-    position: fixed;
-    z-index: 20;
-    top: var(--inset);
-    left: var(--inset);
-    right: var(--inset);
-    justify-content: flex-end;
-    transform: translate3d(0, -88px, 0);
-    transition: transform 1s var(--ease-quart);
-    transition-delay: 100ms;
-    pointer-events: none;
-
-    @include bp (sm) {
-        --inset: 32px;
-        justify-content: space-between;
-    }
-
-    // Visible state
-    &.is-visible {
-        transform: translate3d(0,0,0);
-    }
-}
-
 // Notifications
 :global(.notifications) {
     position: fixed;

src/style/pages/shop/_banner.scss

@@ -1,7 +1,7 @@
 /*
-** Shop: Intro
+** Shop: Intro banner
 */
-.shop-page__intro {
+.shop-banner {
     position: relative;
     z-index: 30;
     height: 30vw;
@@ -70,8 +70,8 @@
         }
     }
 
-    // Site Title
+    // Page title
-    .shop-page__title {
+    .title {
         position: absolute;
         z-index: 2;
         top: 42%;
@@ -98,6 +98,83 @@
         }
     }
 
+    // Navigation
+    .nav {
+        position: absolute;
+        z-index: 20;
+        bottom: 0;
+        left: 0;
+        width: 100%;
+
+        .container {
+            padding: 0 0 24px;
+
+            @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 {
+            text-align: center;
+            margin-bottom: 8px;
+
+            @include bp (md) {
+                margin-right: auto;
+            }
+        }
+
+        // Navigation
+        nav {
+            display: flex;
+            justify-content: center;
+            min-height: 50px;
+
+            ul {
+                display: flex;
+                align-items: center;
+                overflow: auto;
+
+                @include bp (sm) {
+                    justify-content: center;
+                    overflow: hidden;
+                }
+            }
+            li {
+                display: block;
+            }
+            a {
+                text-decoration: none;
+                font-size: rem(22px);
+                font-family: $font-serif;
+                color: $color-tertiary;
+                margin: 0 10px;
+                transition: color 0.3s;
+
+                &:hover {
+                    color: $color-secondary;
+                }
+
+                @include bp (sm) {
+                    font-size: rem(24px);
+                    margin: 0 12px;
+                }
+            }
+
+            // Active
+            .is-active {
+                a {
+                    color: $color-secondary;
+                }
+            }
+        }
+    }
+
     // Background Image
     :global(picture) {
         position: relative;
@@ -146,79 +223,29 @@
     }
 }
 
-// Intro: Navigation
+
-.shop-page__nav {
+// Quick nav
-    position: absolute;
+.shop-quicknav {
+    --inset: 20px;
+    display: flex;
+    position: fixed;
     z-index: 20;
-    bottom: 0;
+    top: var(--inset);
-    left: 0;
+    left: var(--inset);
-    width: 100%;
+    right: var(--inset);
+    justify-content: flex-end;
+    transform: translate3d(0, -88px, 0);
+    transition: transform 1s var(--ease-quart);
+    transition-delay: 100ms;
+    pointer-events: none;
 
-    .container {
+    @include bp (sm) {
-        padding: 0 0 24px;
+        --inset: 32px;
-
+        justify-content: space-between;
-        @include bp (md) {
-            display: grid;
-            grid-template-columns: 15% auto 15%;
-            align-items: flex-end;
-            gap: 16px;
-            height: 100%;
-            padding: 0 32px 32px;
-        }
     }
 
-    // Shop
+    // Visible state
-    p {
+    &.is-visible {
-        text-align: center;
+        transform: translate3d(0,0,0);
-        margin-bottom: 8px;
-
-        @include bp (md) {
-            margin-right: auto;
-        }
-    }
-
-    // Navigation
-    nav {
-        display: flex;
-        justify-content: center;
-        min-height: 50px;
-
-        ul {
-            display: flex;
-            align-items: center;
-            overflow: auto;
-
-            @include bp (sm) {
-                justify-content: center;
-                overflow: hidden;
-            }
-        }
-        li {
-            display: block;
-        }
-        a {
-            text-decoration: none;
-            font-size: rem(22px);
-            font-family: $font-serif;
-            color: $color-tertiary;
-            margin: 0 10px;
-            transition: color 0.3s;
-
-            &:hover {
-                color: $color-secondary;
-            }
-
-            @include bp (sm) {
-                font-size: rem(24px);
-                margin: 0 12px;
-            }
-        }
-
-        // Active
-        .is-active {
-            a {
-                color: $color-secondary;
-            }
-        }
     }
 }