WIP React > Svelte

Put most of the developed design into Svelte
2020-02-11 15:09:32 +01:00
parent 61e45cb171
commit 9b0c154f61
95 changed files with 3627 additions and 9464 deletions
--- a/src/style/pages/_viewer.scss
+++ b/src/style/pages/_viewer.scss
@@ -0,0 +1,138 @@
+// Viewer
+.viewer {
+    position: relative;
+    height: 100vh;
+    min-height: 560px;
+    padding-top: 24px;
+
+    // Top part
+    &__top {
+        position: absolute;
+        top: 0;
+        left: 0;
+        right: 0;
+        margin-top: 16px;
+        padding-left: 24px;
+        padding-right: 16px;
+        display: flex;
+        justify-content: space-between;
+        align-items: center;
+        flex-flow: row wrap;
+
+        @include breakpoint (sm) {
+            position: static;
+            justify-content: center;
+            margin: 24px 0 48px;
+        }
+
+        // Tip message
+        .tip {
+            font-family: $font-sans-sb;
+            font-size: rem(10px);
+            text-transform: uppercase;
+            color: rgba($color-tertiary, .4);
+            letter-spacing: 1px;
+
+            @include breakpoint (sm) {
+                display: none;
+            }
+        }
+
+        // Buttons
+        .buttons {
+            display: flex;
+
+            a {
+                margin-left: 16px;
+            }
+        }
+    }
+
+    // Carousel
+    .carousel {
+        position: absolute;
+        top: 50%;
+        left: 0;
+        right: 0;
+        transform: translate3d(0, -37%, 0);
+
+        @include breakpoint (sm) {
+            position: static;
+            transform: none;
+            margin-bottom: 88px;
+        }
+        
+        // Gallery
+        .gallery {
+            left: 0;
+            right: 0;
+        }
+
+        // Information
+        &__information {
+            margin-top: 24px;
+            padding: 0 24px;
+            
+            @include breakpoint (sm) {
+                display: flex;
+                justify-content: space-between;
+                padding: 0;
+            }
+
+            // Location
+            &--location {
+                text-align: left;
+
+                .street {
+                    margin: 0;
+                }
+            }
+
+            // Date
+            &--date {
+                color: rgba($color-tertiary, .5);
+                font-size: rem(12px);
+                margin-top: 16px;
+
+                @include breakpoint (sm) {
+                    font-size: rem(14px);
+                    margin: 0;
+                }
+            }
+        }
+
+        // Photo number
+        &__number {
+            display: none;
+            position: absolute;
+            z-index: 1;
+            top: 50%;
+            transform: translate3d(0, 0%, 0);
+            width: 100%;
+            font-family: $font-serif-extra;
+            color: rgba($color-tertiary, .4);
+            font-size: 42vw;
+            text-align: center;
+            pointer-events: none;
+            user-select: none;
+
+            @include breakpoint (sm) {
+                top: auto;
+                right: 250px;
+                bottom: -19vw;
+                width: auto;
+                font-size: rem(300px);
+                text-align: right;
+            }
+        }
+
+        // Dots
+        &__dots {
+            position: absolute;
+            bottom: 24px;
+            left: 0;
+            right: 0;
+            z-index: 20;
+        }
+    }
+}