Create Photos page with filter bar

2021-10-03 22:50:33 +02:00
parent 7d1dab9775
commit de6da7394b
5 changed files with 255 additions and 0 deletions
--- a/src/style/pages/_photos.scss
+++ b/src/style/pages/_photos.scss
@@ -0,0 +1,144 @@
+// Photos Page
+.photos {
+    // Intro Section
+    &__intro {
+        color: $color-text;
+        text-align: center;
+        overflow: hidden;
+        padding-bottom: clamp(250px, 27vw, 600px);
+
+        // Title
+        h1 {
+            color: $color-secondary;
+            line-height: 1;
+            margin-top: -20px;
+
+            @include bp (sm) {
+                margin-top: -100px;
+            }
+        }
+        // Text
+        p {
+            max-width: 350px;
+            margin: 20px auto 56px;
+
+            @include bp (sm) {
+                margin: 50px auto 72px;
+                max-width: 524px;
+            }
+        }
+    }
+
+    // Filter
+    .filter {
+        position: relative;
+        max-width: 982px;
+        margin: 0 auto;
+        padding: 0 32px;
+
+        // Span
+        &__label {
+            display: block;
+            color: rgba($color-tertiary, 0.7);
+
+            @include bp (sm) {
+                position: absolute;
+                left: 64px;
+                top: 50%;
+                transform: translateY(-50%);
+                margin-bottom: 0;
+            }
+        }
+
+        &__bar {
+            display: flex;
+            justify-content: center;
+            align-items: center;
+            margin: 20px 0;
+            padding: 20px 22px;
+            background: $color-primary-darker;
+            border-radius: 50vh;
+
+            @include bp (sm) {
+                padding: 28px 32px;
+            }
+
+            ul {
+                display: flex;
+                flex-wrap: wrap;
+                align-items: center;
+                justify-content: center;
+            }
+            li {
+                display: block;
+                margin: 8px 10px;
+                font-size: rem(16px);
+                color: #fff;
+
+                @include bp (sm) {
+                    margin: 0 16px;
+                }
+            }
+            img {
+                color: #fff;
+                margin-right: 12px;
+
+                @include bp (sm) {
+                    margin-right: 16px;
+                }
+            }
+
+            .select {
+                position: relative;
+                font-weight: 900;
+
+                select {
+                    opacity: 0;
+                    position: absolute;
+                    top: 0;
+                    left: 0;
+                    width: 100%;
+                    height: 100%;
+                    cursor: pointer;
+                }
+            }
+        }
+
+        // Actions
+        &__actions {
+            display: flex;
+            align-items: center;
+            justify-content: center;
+
+            @include bp (sm) {
+                position: absolute;
+                right: 64px;
+                top: 50%;
+                transform: translateY(-50%);
+            }
+
+            a {
+                display: block;
+                text-decoration: none;
+                color: rgba(#fff, 0.6);
+                font-size: rem(14px);
+                font-weight: 900;
+                line-height: 1;
+
+                img {
+                    display: block;
+                }
+            }
+            .shuffle {
+                display: flex;
+                align-items: center;
+                justify-content: center;
+                height: 32px;
+                background-color: $color-tertiary;
+                padding: 0 16px;
+                border-radius: 50vh;
+                margin-left: 16px;
+            }
+        }
+    }
+}