✨ Add data to Shop page

2021-10-31 19:38:08 +01:00
parent 2c0adcc4e2
commit 99fe09c4fd
9 changed files with 241 additions and 128 deletions
--- a/src/style/layouts/_poster.scss
+++ b/src/style/layouts/_poster.scss
@@ -0,0 +1,175 @@
+.poster-layout {
+    background-color: $color-cream;
+
+    @include bp (sm) {
+        display: grid
+    }
+
+    // Title Location
+    h2 {
+        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;
+        }
+    }
+
+
+
+    /*
+    ** Product Layout
+    */
+    // Poster Display
+    &__buy {
+        grid-column: 1 / span var(--columns);
+        margin: 0 20px 48px;
+
+        @include bp (sm) {
+            grid-column: 2 / span 10;
+            margin: 0 0 104px;
+        }
+    }
+
+    // Product Info
+    &__info {
+        display: flex;
+        justify-content: space-between;
+        margin-bottom: 32px;
+
+        @include bp (sm) {
+            margin-bottom: 56px;
+        }
+
+        // Title
+        dt {
+            color: $color-secondary;
+            font-family: $font-serif;
+            font-size: rem(36px);
+            line-height: 1.3;
+        }
+
+        // Text
+        dd {
+            font-size: rem(16px);
+            color: $color-gray;
+            margin-top: 8px;
+            max-width: 140px;
+
+            @include bp (sm) {
+                max-width: none;
+            }
+        }
+    }
+
+    // Images set
+    &__images {
+        @include bp (sm) {
+            --columns: 10;
+            position: relative;
+            z-index: 2;
+            grid-column: 14 / span var(--columns);
+        }
+    }
+    .image {
+        position: relative;
+        border-radius: 6px;
+
+        img {
+            position: absolute;
+            top: 0;
+            left: 0;
+            display: block;
+            width: 100%;
+            height: 100%;
+            object-fit: cover;
+        }
+
+        &:after {
+            content: "";
+            display: block;
+            width: 100%;
+            padding-bottom: 75%;
+        }
+
+        &--1 {
+            grid-column: 1 / span 7;
+        }
+        &--2 {
+            grid-column: 2 / span 5;
+            margin: 32px 0;
+
+            @include bp (sm) {
+                margin: 48px 0;
+            }
+        }
+        &--3 {
+            grid-column: 4 / span 5;
+            z-index: 10;
+            margin-bottom: -64px;
+
+            @include bp (sm) {
+                grid-column: 5 / span 5;
+                margin-bottom: 0;
+            }
+
+            &:after {
+                padding-bottom: 128%;
+            }
+        }
+        &--4 {
+            grid-column: 1 / span 8;
+            margin-bottom: 56px;
+
+            @include bp (sm) {
+                grid-column: 8 / span 13;
+                margin-bottom: 120px;
+            }
+        }
+    }
+
+    // About
+    &__about {
+        background-color: #fff;
+        padding: 144px 0 72px;
+        margin: -100px 0 -120;
+        font-size: rem(36px);
+        font-weight: 300;
+        color: $color-primary-tertiary20;
+        line-height: 1.4;
+        white-space: pre-line;
+
+        @include bp (sm) {
+            padding: 148px 0 260px;
+            margin: -120px 0;
+        }
+
+        .text {
+            grid-column: 1 / span 8;
+            font-size: rem(28px);
+            font-weight: 200;
+
+            @include bp (sm) {
+                grid-column: 4 / span 12;
+                font-size: rem(32px);
+            }
+        }
+
+        .details {
+            color: $color-gray;
+            font-size: rem(16px);
+            margin-top: 32px;
+            line-height: 1.5;
+            font-weight: 300;
+
+            @include bp (sm) {
+                margin-top: 56px;
+                font-size: rem(18px);
+            }
+        }
+    }
+}