Destructure Shop stylesheets

src/routes/shop/__layout.svelte

@@ -66,9 +66,9 @@
         <div class="top container">
             <a href="/" class="back">
                 <svg width="5" height="8" viewBox="0 0 5 8" fill="none" xmlns="http://www.w3.org/2000/svg">
-                    <path d="M4 1 1 4l3 3" stroke="#fff" stroke-linecap="round" stroke-linejoin="round"/>
+                    <path d="M4 1 1 4l3 3" stroke="currentColor" stroke-linecap="round" stroke-linejoin="round"/>
                 </svg>
-                <span>Back to Houses Of</span>
+                <span>Back to site</span>
             </a>
 
             <span class="shop-title">Shop</span>
@@ -78,7 +78,7 @@
             variant="inline"
         />
 
-        <header class="shop-page__header">
+        <nav class="shop-page__nav">
             <div class="container">
                 <p class="text-label">Shop your city</p>
                 <nav>
@@ -95,7 +95,7 @@
 
                 <ButtonCart />
             </div>
-        </header>
+        </nav>
 
         <Image
             id={shop.page_heroimage.id}

src/style/pages/_shop.scss

@@ -1,23 +1,11 @@
 .shop-page {
     position: relative;
 
-    // Cart
+    // Sections
-    .cart {
+    @import "shop/intro";
-        position: fixed;
+    @import "shop/about";
-        z-index: 101;
+    @import "shop/posters";
-        top: 72px;
-        right: 0;
-        width: 100%;
-        height: calc(100vh - 72px);
 
-        @include bp (sm) {
-            top: 24px;
-            right: 24px;
-            width: clamp(320px, 45vw, 500px);
-            height: calc(100vh - 48px);
-            max-height: 1000px;
-        }
-    }
 
     // Nav
     .shop-location {
@@ -65,372 +53,21 @@
         }
     }
 
-    // Intro
+    // Cart
-    &__intro {
+    .cart {
-        position: relative;
+        position: fixed;
-        z-index: 30;
+        z-index: 101;
-        height: 100vh;
+        top: 72px;
-        min-height: 800px;
+        right: 0;
-        overflow: hidden;
-
-        // Top Menu
-        .top {
-            position: absolute;
-            z-index: 1;
-            top: 20px;
-            left: 0;
-            padding: 0 20px;
-            display: flex;
-            justify-content: space-between;
         width: 100%;
-            margin: 0 auto;
+        height: calc(100vh - 72px);
 
         @include bp (sm) {
-                top: 32px;
+            top: 24px;
-                padding: 0 32px;
+            right: 24px;
-            }
+            width: clamp(320px, 45vw, 500px);
-
+            height: calc(100vh - 48px);
-            // Back
+            max-height: 1000px;
-            .back {
-                display: flex;
-                align-items: center;
-                color: #fff;
-                font-size: rem(14px);
-                color: $color-cream;
-                text-decoration: none;
-
-                @include bp (sm) {
-                    max-width: none;
-                    font-size: rem(18px);
-                }
-
-                svg {
-                    margin-right: 8px;
-                }
-            }
-            // Shop
-            .shop-title {
-                font-size: rem(14px);
-                color: $color-cream;
-
-                @include bp (sm) {
-                    font-size: rem(18px);
-                }
-            }
-        }
-
-        // Site Title
-        h1 {
-            position: absolute;
-            z-index: 2;
-            top: 50%;
-            left: 50%;
-            width: 100%;
-            transform: translate3d(-50%, -50%, 0);
-            // font-size: clamp(#{rem(88px)}, 10vw, #{rem(140px)});
-            text-shadow: 0px 8px 12px rgba(#000, 0.25);
-            text-align: center;
-
-
-            @include bp (sm) {
-                top: clamp(#{rem(40px)}, 16vw, #{rem(144px)});
-                left: 0;
-                font-size: clamp(#{rem(40px)}, 8vw, #{rem(96px)});
-                transform: none;
-            }
-            @include bp (md) {
-                top: clamp(#{rem(40px)}, 10vw, #{rem(96px)});
-                font-size: clamp(#{rem(40px)}, 6vw, #{rem(96px)});
-            }
-
-            span, strong {
-                color: #fff;
-            }
-            span {
-                font-weight: 300;
-            }
-        }
-
-        // 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;
-            left: 0;
-            width: 100%;
-
-            .container {
-                padding: 0 16px 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 {
-                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;
-                    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;
-                    }
-                }
-            }
-        }
-    }
-
-    // About
-    &__about {
-        background-color: $color-cream;
-        color: $color-text;
-
-        .description {
-            --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) {
-                --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;
-            }
-        }
-    }
-
-    // Posters
-    &__posters {
-        background-color: $color-primary-darker;
-        padding: 0 20px 72px;
-        border-bottom: solid 1px $color-primary-tertiary20 ;
-
-        @include bp (sm) {
-            padding: 120px 0;
-        }
-
-        // Title
-        h3 {
-            grid-column: 2 / span 6;
-            font-family: $font-serif;
-            color: $color-cream;
-            font-size: rem(32px);
-            line-height: 1.1;
-            text-align: center;
-            margin-bottom: 24px;
-
-            @include bp (sm) {
-                grid-column: 3 / span 14;
-                font-size: rem(48px);
-                text-align: left;
-                max-width: 360px;
-                margin-bottom: 0;
-            }
-        }
-
-        // Posters Set
-        .set {
-            --gap: 24px;
-            grid-column: 1 / span 8;
-            display: block;
-
-            @include bp (sm) {
-                grid-column: 2 / span 22;
-            }
-
-            @include bp (mob-lg) {
-                --gap: 32px;
-                display: grid;
-                grid-template-columns: repeat(2, 1fr);
-                gap: var(--gap);
-            }
-            @include bp (md) {
-                grid-template-columns: repeat(3, 1fr);
-            }
-            @include bp (sd) {
-                --gap: 48px;
-                grid-template-columns: repeat(4, 1fr);
-            }
-
-            // Poster
-            .poster {
-                margin: 0 auto auto;
-
-                // 2 columns
-                &:nth-child(2n + 1) {
-                    @include bp (sm, max) {
-                        margin-top: calc(var(--gap) * 2);
-                    }
-                }
-
-                // 3 columns
-                &:nth-child(3n + 1) {
-                    @include bp (sd, max) {
-                        margin-top: calc(var(--gap) * 2);
-                    }
-                }
-                &:nth-child(3n + 2) {
-                    @include bp (sd, max) {
-                        margin-top: var(--gap);
-                    }
-                }
-
-                // 4 columns
-                &:nth-child(4n + 1) {
-                    @include bp (sd) {
-                        margin-top: 64px * 3;
-                    }
-                }
-                &:nth-child(4n + 2) {
-                    @include bp (sd) {
-                        margin-top: 64px * 2;
-                    }
-                }
-                &:nth-child(4n + 3) {
-                    @include bp (sd) {
-                        margin-top: 64px;
-                    }
-                }
-            }
-        }
-
-        // Subscribe
-        .subscribe {
-            grid-column: 1 / span var(--columns);
-            max-width: 380px;
-            margin: 72px auto 0;
-            text-align: center;
-
-            @include bp (sm) {
-                grid-column: 14 / span 8;
-                margin-top: 0;
-                text-align: left;
-            }
-
-            p {
-                font-size: rem(18px);
-                color: $color-cream;
-                font-weight: 300;
-                line-height: 1.5;
-                margin-bottom: 24px;
-
-                @include bp (sm) {
-                    font-size: rem(22px);
-                    margin-bottom: 30px;
-                }
-            }
-
-            .newsletter-form {
-                padding: 0;
-                margin: 0 auto;
-
-                @include bp (sm) {
-                    margin: 0;
-                }
-            }
-
-            .newsletter-form__bottom {
-                display: none;
-            }
         }
     }
 }

src/style/pages/shop/_about.scss

@@ -0,0 +1,46 @@
+/*
+** Shop: About
+*/
+&__about {
+    background-color: $color-cream;
+    color: $color-text;
+
+    .description {
+        --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) {
+            --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;
+        }
+    }
+}

src/style/pages/shop/_intro.scss

@@ -0,0 +1,201 @@
+/*
+** Shop: Intro
+*/
+&__intro {
+    position: relative;
+    z-index: 30;
+    height: 100vh;
+    min-height: 600px;
+    max-height: 1400px;
+    overflow: hidden;
+
+    // Top Menu
+    .top {
+        position: absolute;
+        z-index: 1;
+        top: 20px;
+        left: 0;
+        padding: 0 20px;
+        display: flex;
+        justify-content: space-between;
+        width: 100%;
+        margin: 0 auto;
+
+        @include bp (sm) {
+            top: 32px;
+            padding: 0 32px;
+        }
+
+        // Back
+        .back {
+            display: flex;
+            align-items: center;
+            color: #fff;
+            font-size: rem(14px);
+            color: $color-cream;
+            text-decoration: none;
+            transition: color 0.4s var(--ease-quart);
+
+            @include bp (sm) {
+                max-width: none;
+                font-size: rem(18px);
+            }
+
+            svg {
+                margin-right: 8px;
+                transition: transform 0.4s var(--ease-quart);
+            }
+
+            // Hover
+            &:hover {
+                color: $color-tertiary;
+
+                svg {
+                    transform: translate3d(-4px, 0, 0);
+                }
+            }
+        }
+        // Shop
+        .shop-title {
+            font-size: rem(14px);
+            color: $color-cream;
+
+            @include bp (sm) {
+                font-size: rem(18px);
+            }
+        }
+    }
+
+    // Site Title
+    h1 {
+        position: absolute;
+        z-index: 2;
+        top: 50%;
+        left: 50%;
+        width: 100%;
+        transform: translate3d(-50%, -50%, 0);
+        // font-size: clamp(#{rem(88px)}, 10vw, #{rem(140px)});
+        text-shadow: 0px 8px 12px rgba(#000, 0.25);
+        text-align: center;
+
+
+        @include bp (sm) {
+            top: clamp(#{rem(40px)}, 16vw, #{rem(144px)});
+            left: 0;
+            font-size: clamp(#{rem(40px)}, 8vw, #{rem(96px)});
+            transform: none;
+        }
+        @include bp (md) {
+            top: clamp(#{rem(40px)}, 10vw, #{rem(96px)});
+            font-size: clamp(#{rem(40px)}, 6vw, #{rem(96px)});
+        }
+
+        span, strong {
+            color: #fff;
+        }
+        span {
+            font-weight: 300;
+        }
+    }
+
+    // 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%);
+        }
+    }
+}
+
+// Intro: Navigation
+&__nav {
+    position: absolute;
+    z-index: 20;
+    bottom: 0;
+    left: 0;
+    width: 100%;
+
+    .container {
+        padding: 0 16px 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 {
+        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;
+            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;
+            }
+        }
+    }
+}

src/style/pages/shop/_posters.scss

@@ -0,0 +1,137 @@
+/*
+** Shop: Posters
+*/
+&__posters {
+    background-color: $color-primary-darker;
+    padding: 0 20px 72px;
+    border-bottom: solid 1px $color-primary-tertiary20 ;
+
+    @include bp (sm) {
+        padding: 120px 0;
+    }
+
+    // Title
+    h3 {
+        grid-column: 2 / span 6;
+        font-family: $font-serif;
+        color: $color-cream;
+        font-size: rem(32px);
+        line-height: 1.1;
+        text-align: center;
+        margin-bottom: 24px;
+
+        @include bp (sm) {
+            grid-column: 3 / span 14;
+            font-size: rem(48px);
+            text-align: left;
+            max-width: 360px;
+            margin-bottom: 0;
+        }
+    }
+
+    // Posters Set
+    .set {
+        --gap: 24px;
+        grid-column: 1 / span 8;
+        display: block;
+
+        @include bp (sm) {
+            grid-column: 2 / span 22;
+        }
+
+        @include bp (mob-lg) {
+            --gap: 32px;
+            display: grid;
+            grid-template-columns: repeat(2, 1fr);
+            gap: var(--gap);
+        }
+        @include bp (md) {
+            grid-template-columns: repeat(3, 1fr);
+        }
+        @include bp (sd) {
+            --gap: 48px;
+            grid-template-columns: repeat(4, 1fr);
+        }
+
+        // Poster
+        .poster {
+            margin: 0 auto auto;
+
+            // 2 columns
+            &:nth-child(2n + 1) {
+                @include bp (sm, max) {
+                    margin-top: calc(var(--gap) * 2);
+                }
+            }
+
+            // 3 columns
+            &:nth-child(3n + 1) {
+                @include bp (sd, max) {
+                    margin-top: calc(var(--gap) * 2);
+                }
+            }
+            &:nth-child(3n + 2) {
+                @include bp (sd, max) {
+                    margin-top: var(--gap);
+                }
+            }
+
+            // 4 columns
+            &:nth-child(4n + 1) {
+                @include bp (sd) {
+                    margin-top: 64px * 3;
+                }
+            }
+            &:nth-child(4n + 2) {
+                @include bp (sd) {
+                    margin-top: 64px * 2;
+                }
+            }
+            &:nth-child(4n + 3) {
+                @include bp (sd) {
+                    margin-top: 64px;
+                }
+            }
+        }
+    }
+
+    // Subscribe
+    .subscribe {
+        grid-column: 1 / span var(--columns);
+        max-width: 380px;
+        margin: 72px auto 0;
+        text-align: center;
+
+        @include bp (sm) {
+            grid-column: 14 / span 8;
+            margin-top: 0;
+            text-align: left;
+        }
+
+        p {
+            font-size: rem(18px);
+            color: $color-cream;
+            font-weight: 300;
+            line-height: 1.5;
+            margin-bottom: 24px;
+
+            @include bp (sm) {
+                font-size: rem(22px);
+                margin-bottom: 30px;
+            }
+        }
+
+        .newsletter-form {
+            padding: 0;
+            margin: 0 auto;
+
+            @include bp (sm) {
+                margin: 0;
+            }
+        }
+
+        .newsletter-form__bottom {
+            display: none;
+        }
+    }
+}