Add style to Photo Viewer page

2021-10-19 12:22:04 +02:00
parent 1aaa12f435
commit ab9b0e1a59
8 changed files with 221 additions and 25 deletions
--- a/src/style/pages/_viewer-photo.scss
+++ b/src/style/pages/_viewer-photo.scss
@@ -0,0 +1,141 @@
+.viewer-photo {
+    height: 100vh;
+
+    @include bp (md, max) {
+        display: block;
+    }
+
+    // Carousel
+    &__carousel {
+        display: grid;
+        grid-row-gap: 20px;
+        margin: auto 8px;
+        height: 100%;
+
+        @include bp (md) {
+            margin: auto 0;
+            grid-column: 3 / span 16;
+        }
+    }
+
+    // Images
+    &__images {
+        position: relative;
+        margin: auto 0 0;
+
+        .photo {
+            position: relative;
+            z-index: 3;
+            border-radius: 6px;
+            overflow: hidden;
+            box-shadow:
+                0 12px 12px rgba(#000, 0.15),
+                0 20px 20px rgba(#000, 0.15),
+                0 48px 48px rgba(#000, 0.15);
+        }
+    }
+
+    // Infos
+    &__info {
+        margin-top: auto;
+        margin-bottom: 40px;
+        padding: 0 20px;
+        text-align: center;
+
+        @include bp (md) {
+            margin-top: 26px;
+            padding: 0;
+            text-align: left;
+        }
+        @include bp (lg) {
+            display: grid;
+            grid-template-columns: 55% 45%;
+            align-items: baseline;
+        }
+
+        h1 {
+            color: $color-secondary;
+            font-size: rem(32px);
+            line-height: 1.1;
+        }
+
+        // Details
+        .detail {
+            display: inline-block;
+            align-items: center;
+            margin-top: 24px;
+            color: $color-tertiary;
+            line-height: 1.5;
+
+            @include bp (lg) {
+                margin-top: 0;
+                margin-left: auto;
+                text-align: right;
+                padding-left: 16px;
+            }
+
+            // Icon
+            img {
+                display: inline-block;
+                margin-top: -5px;
+                margin-right: 12px;
+            }
+            // Separator
+            .sep {
+                display: inline-block;
+                margin: 0 4px;
+                line-height: 1;
+            }
+        }
+    }
+
+    // Index
+    &__index {
+        position: absolute;
+        z-index: 1;
+        left: 50%;
+        bottom: calc(92% + 1vw);
+        line-height: 1;
+        transform: translate3d(-50%, 0, 0);
+        color: rgba($color-tertiary, 0.4);
+
+        @include bp (md, max) {
+            font-size: clamp(#{rem(80px)}, 24vw, #{rem(120px)});
+        }
+        @include bp (md) {
+            top: 50%;
+            left: 95%;
+            width: 350px;
+            text-align: center;
+            bottom: auto;
+            transform: translate3d(0, -50%, 0);
+        }
+    }
+
+    // Controls
+    &__controls {
+        display: none;
+
+        @include bp (md) {
+            position: absolute;
+            z-index: 20;
+            display: flex;
+            left: -28px;
+            right: -28px;
+            top: 50%;
+            transform: translateY(-50%);
+            justify-content: space-between;
+        }
+    }
+
+    // Image
+    .photo {
+        grid-column: 3 / span 16;
+
+        img {
+            width: 100%;
+            height: auto;
+            display: block;
+        }
+    }
+}