Shop WIP

src/components/molecules/Poster.svelte

@@ -1,7 +1,19 @@
 <script lang="ts">
+    import Button from '$components/atoms/Button.svelte';
 
 </script>
 
 <div class="poster">
     <img src="https://picsum.photos/326/475" width={326} height={475} alt="blob">
+    <div class="buttons">
+        <Button
+            text="View poster"
+            size="xsmall"
+        />
+        <Button
+            text="Add to cart"
+            color="pink"
+            size="xsmall"
+        />
+    </div>
 </div>

src/components/organisms/PosterProduct.svelte

@@ -7,20 +7,20 @@
     <h2 class="title-huge">Melbourne</h2>
 
     <div class="poster-product__buy">
-        <img src="/images/poster-display.jpg" alt="">
         <div class="info">
             <dl>
-                <dt>Houses Of <br /> Melbourne</dt>
+                <dt>Poster</dt>
-                <dd>Poster - 30€</dd>
+                <dd>Houses Of Melbourne – 30€</dd>
             </dl>
             <Button
                 text="Add to cart"
-                color="beige"
+                color="pink"
             />
         </div>
+        <img src="/images/poster-display.jpg" alt="">
     </div>
 
-    <div class="poster-product__images grid">
+    <div class="poster-product__images grid container">
         <picture class="image image--first photo shadow-box-light">
             <img src="https://picsum.photos/656/493" width={656} height={493} alt="blob">
         </picture>
@@ -33,7 +33,7 @@
     </div>
 
     <div class="poster-product__about grid">
-        <div class="text">
+        <div class="text container">
             <p>This poster will bring you to straight to Melbourne, Australia with its unique Victorian architectural style, wrought iron and colorful fronts.</p>
             <p class="details">
                 Format: 40cm x 60cm (16” x 24”)<br>Printed on Recycled offset paper, 150gm/m2.<br>Frame not included.
@@ -41,7 +41,7 @@
         </div>
     </div>
 
-    <div class="poster-product__image grid">
+    <div class="poster-product__image grid container">
         <picture class="image image--fourth photo shadow-box-light">
             <img src="https://picsum.photos/854/588" width={854} height={588} alt="blob">
         </picture>

src/style/molecules/_poster.scss

@@ -1,7 +1,52 @@
 .poster {
+    position: relative;
+    border-radius: 6px;
+    max-width: 326px;
+
+    @include bp (sm) {
+        background-color: $color-primary-tertiary20;
+        max-width: 600px;
+    }
+
     img {
         display: block;
         width: 100%;
         height: auto;
     }
+
+    .buttons {
+        display: flex;
+        margin-top: 40px;
+        justify-content: center;
+
+        @include bp (sm) {
+            position: absolute;
+            align-items: center;
+            justify-content: space-between;
+            bottom: 14px;
+            left: 10%;
+            right: 10%;
+            // margin: 0 10% 28px;
+            white-space: nowrap;
+        }
+
+        a {
+            margin-right: 8px;
+            margin-left: 8px;
+
+            @include bp (sm) {
+                margin: 0;
+            }
+        }
+    }
+
+    &:hover {
+        img {
+            transform: scale(0.8) translate3d(0, -5%, 0);
+        }
+        .buttons {
+            display: flex;
+        }
+    }
+
 }

src/style/organisms/_poster-product.scss

@@ -1,30 +1,45 @@
 .poster-product {
     background-color: $color-cream;
 
+    @include bp (sm) {
+        display: grid
+    }
+
     // Title Location
     h2 {
-        grid-column: 2 / span calc(var(--columns) - 1);
+        grid-column: 1 / span var(--columns);
         font-size: clamp(200px, 20vw, 340px);
         color: $color-secondary;
+        margin-bottom: 40px;
+
+        @include bp (sm) {
+            grid-column: 2 / span calc(var(--columns) - 1);
             text-align: center;
             margin-bottom: 48px;
         }
+    }
 
     // Poster Product
-    &__buy {
-        grid-column: 2 / span 10;
 
-        img {
+    // Poster Display
-            display: block;
+    &__buy {
-            width: 100%;
+        grid-column: 1 / span var(--columns);
-            height: auto;
+        margin: 0 20px 48px;
+
+        @include bp (sm) {
+            grid-column: 2 / span 10;
+            margin: 0;
         }
 
         // Product Info
         .info {
             display: flex;
             justify-content: space-between;
-            margin-top: 36px;
+            margin-bottom: 32px;
+
+            @include bp (sm) {
+                margin-bottom: 72px;
+            }
         }
 
         // Title
@@ -40,15 +55,31 @@
             font-size: rem(16px);
             color: $color-gray;
             margin-top: 8px;
+            max-width: 140px;
+
+            @include bp (sm) {
+                max-width: none;
+            }
+        }
+
+        // Image
+        img {
+            display: block;
+            width: 100%;
+            height: auto;
+            border-radius: 6px;
         }
     }
 
     // Images set
     &__images {
+
+        @include bp (sm) {
             --columns: 10;
-        grid-column: 14 / span var(--columns);
             position: relative;
             z-index: 2;
+            grid-column: 14 / span var(--columns);
+        }
 
         .image {
             border-radius: 6px;
@@ -62,44 +93,75 @@
 
         // Image 1
         .image--first {
-            grid-column: 1 / span 10;
+            grid-column: 1 / span 7;
         }
         // Image 2
         .image--second {
             grid-column: 2 / span 5;
+            margin: 32px 0;
+
+            @include bp (sm) {
                 margin: 48px 0;
             }
+        }
         // Image 3
         .image--third {
+            grid-column: 4 / span 5;
+            z-index: 10;
+            margin-bottom: -64px;
+
+            @include bp (sm) {
                 grid-column: 5 / span 5;
+                margin-bottom: 0;
+            }
         }
     }
 
     // About
     &__about {
         background-color: #fff;
-        padding: 148px 0 260px;
+        padding: 144px 0 72px;
-        margin: -80px 0 -120px;
+        margin: -100px 0 -120;
         font-size: rem(36px);
         font-weight: 300;
         color: $color-primary-tertiary20;
         line-height: 1.4;
 
+        @include bp (sm) {
+            padding: 148px 0 260px;
+            margin: -120px 0;
+        }
+
         .text {
-            grid-column: 4 / span 13;
+            grid-column: 1 / span 8;
+            font-size: rem(28px);
+
+            @include bp (sm) {
+                grid-column: 4 / span 12;
+                font-size: rem(32px);
+            }
         }
 
         .details {
             color: $color-gray;
-            font-size: rem(18px);
+            font-size: rem(16px);
-            margin-top: 56px;
+            margin-top: 32px;
             line-height: 1.5;
+
+            @include bp (sm) {
+                margin-top: 56px;
+                font-size: rem(18px);
+            }
         }
     }
 
     // Single Image
     &__image {
+        margin-bottom: 56px;
+
+        @include bp (sm) {
             margin-bottom: 120px;
+        }
 
         .image {
             border-radius: 6px;
@@ -113,7 +175,11 @@
 
         // Image 4
         .image--fourth {
+            grid-column: 1 / span 8;
+
+            @include bp (sm) {
                 grid-column: 8 / span 13;
             }
         }
+    }
 }

src/style/pages/_shop.scss

@@ -2,56 +2,102 @@
 
     // Header
     header {
-        // display: flex;
-        display: none;
         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: 0;
+            left: 50%;
-            bottom: 0;
+            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(24px);
+                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;
                 }
             }
-
-        // Cart
-        span {
-            position: absolute;
-            right: 0;
-            bottom: 0;
         }
     }
 
     // Intro
     &__intro {
         position: relative;
-        height: 80vh;
+        height: 100vh;
         min-height: 800px;
         overflow: hidden;
+        background-color: $color-primary-darker;
+
+        // Top Menu
+        // Back
+        .back {
+            position: absolute;
+            left: 32px;
+            top: 32px;
+            color: #fff;
+            text-decoration: none;
+            font-size: rem(14px);
+            color: $color-cream;
+            max-width: 76px;
+
+            @include bp (sm) {
+                max-width: none;
+                font-size: rem(18px);
+            }
+        }
+        // Shop
+        .shop-title {
+            position: absolute;
+            top: 32px;
+            left: 50%;
+            transform: translateX(-50%);
+            font-size: rem(14px);
+            color: $color-cream;
+
+            @include bp (sm) {
+                font-size: rem(18px);
+            }
+        }
 
         // Background Image
         picture {
             width: 100%;
             height: 100%;
+            opacity: 0.55;
 
             img {
                 display: block;
@@ -61,7 +107,6 @@
             }
         }
 
-
         // Site Title
         h1 {
             font-size: clamp(#{rem(88px)}, 10vw, #{rem(140px)});
@@ -80,36 +125,72 @@
 
     // 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;
+            font-size: rem(18px);
+
+            @include bp (sm) {
                 grid-column: 3 / span 12;
                 max-width: 560px;
-            font-weight: 300;
+                margin-left: 0;
+                padding: 0;
+                font-size: rem(22px);
+            }
         }
     }
 
     // Posters
     &__posters {
+        background-color: $color-primary-darker;
+        padding: 56px 20px 72px;
+        border-bottom: solid 1px $color-primary-tertiary20 ;
+
+        @include bp (sm) {
             padding: 120px 0;
+        }
 
         // Title
         h3 {
-            grid-column: 3 / span 7;
+            grid-column: 2 / span 6;
             font-family: $font-serif;
             color: $color-cream;
-            font-size: rem(48px);
+            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: 2 / span 22;
+            grid-column: 1 / span 8;
             display: block;
 
+            @include bp (sm) {
+                grid-column: 2 / span 22;
+            }
+
             @include bp (mob-lg) {
                 --gap: 32px;
                 display: grid;
@@ -124,7 +205,10 @@
                 grid-template-columns: repeat(4, 1fr);
             }
 
+            // Poster
             .poster {
+                margin: 0 auto auto;
+
                 // 2 columns
                 &:nth-child(2n + 1) {
                     @include bp (sm, max) {
@@ -165,15 +249,38 @@
 
         // Subscribe
         .subscribe {
-            grid-column: 14 / span 7;
+            grid-column: 1 / span var(--columns);
+            margin-top: 72px;
+            text-align: center;
+
+            @include bp (sm) {
+                grid-column: 14 / span 8;
+                margin-top: 0;
+                text-align: left;
+            }
 
             p {
-                font-size: rem(22px);
+                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;
+                    min-width: 368px;
+                }
+            }
 
             .newsletter-form__bottom {
                 display: none;