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/_place.scss
+++ b/src/style/pages/_place.scss
@@ -0,0 +1,106 @@
+// Place section
+.place {
+    background-position: 50% 0;
+    background-size: 100%;
+    background-repeat: no-repeat;
+
+    // Title
+    &__title {
+        padding: 14vw 0 15vw;
+        display: flex;
+        justify-content: center;
+        align-items: flex-end;
+
+        h1 {
+            position: relative;
+            z-index: 2;
+            text-align: left;
+            pointer-events: none;
+
+            span {
+                display: block;
+            }
+            .bottom {
+                text-align: right;
+                margin-left: 8vw;
+            }
+        }
+
+        // Switcher button
+        .button-control--dashed {
+            z-index: 1;
+            flex-shrink: 0;
+            margin-left: -24px;
+        }
+    }
+
+    // Description
+    &__description {
+        position: relative;
+        z-index: 2;
+        padding-top: 12.5vw;
+        padding-bottom: 72px;
+        background-color: $color-tertiary;
+        border-radius: none;
+        
+        @include breakpoint (m) {
+            padding-bottom: 96px;
+        }
+        @include breakpoint (sm) {
+            border-radius: 8px 0 0 8px;
+            padding-bottom: 15vw;
+        }
+
+        p {
+            font-size: rem(18px);
+            font-family: $font-sans-light;
+            line-height: 1.64;
+            color: $color-text;
+
+            @include breakpoint (sm) {
+                font-size: 1rem;
+            }
+        }
+
+        // Updated notice
+        .updated {
+            font-size: rem(12px);
+            margin-top: 32px;
+
+            strong {
+                font-family: $font-sans-sb;
+                color: rgba($color-text, .4);
+            }
+
+            @include breakpoint (sm) {
+                display: none;;
+            }
+        }
+
+        // Toggle
+        .toggle {
+            display: none;
+
+            @include breakpoint (sm) {
+                display: inline-flex;
+            }
+        }
+        
+        &:after {
+            content: "";
+            display: block;
+            position: absolute;
+            top: 0;
+            right: -49.9vw;
+            width: 50vw;
+            height: 100%;
+            background-color: $color-tertiary;
+        }
+
+        &--wrap {
+            @include breakpoint (xs) {
+                padding: 0;
+            }
+        }
+    }
+}