Destructure Shop stylesheets

2021-11-08 14:37:16 +01:00
parent 27daa26fd9
commit 11ff9291d2
5 changed files with 405 additions and 384 deletions
--- a/src/style/pages/shop/_posters.scss
+++ b/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;
+        }
+    }
+}