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/molecules/_photo.scss
+++ b/src/style/molecules/_photo.scss
@@ -0,0 +1,146 @@
+.photo {
+
+    // Location
+    &__location {
+        margin-bottom: 32px;
+
+        @include breakpoint (sm) {
+            margin-bottom: 56px;
+        }
+
+        @include breakpoint (xs) {
+            padding: 0;
+        }
+
+        h2 {
+            text-align: left;
+            white-space: pre-line;
+
+            @include breakpoint (xs) {
+                font-size: rem(40px);
+            }
+        }
+        p {
+            color: $color-lightgray;
+            margin-top: 16px;
+        }
+    }
+
+    // Image container
+    &__image {
+        position: relative;
+        display: flex;
+        justify-content: flex-start;
+
+        @include breakpoint (xs) {
+            padding: 0;
+        }
+
+        // Alignment (left or right for list view)
+        .align {
+            position: relative;
+            max-width: 1180px;
+            padding: 0;
+            margin: 0;
+        }
+
+        // Image container
+        &--img {
+            position: relative;
+            z-index: 2;
+            overflow: hidden;
+            border-radius: 0;
+            box-shadow: 0 8px 18px rgba(#715E4E, .2);
+
+            @include breakpoint (sm) {
+                border-radius: 8px;
+            }
+
+            img {
+                display: block;
+                width: 100%;
+                height: auto;
+            }
+
+            // Cursor
+            .cursor {
+                position: absolute;
+                z-index: 4;
+                top: 0;
+                left: 0;
+            }
+
+            // Overlay
+            &:after {
+                content: "";
+                position: absolute;
+                z-index: 2;
+                opacity: 0;
+                pointer-events: none;
+                top: 0;
+                left: 0;
+                bottom: 0;
+                right: 0;
+                background-color: $color-primary;
+                display: block;
+                z-index: 3;
+                transition: all 200ms ease-in-out;
+            }
+        }
+
+        a {
+            display: block;
+            text-decoration: none;
+
+            // Hover
+            &:hover {
+                cursor: none;
+
+                .photo__image--img:after {
+                    opacity: 0.6;
+                }
+            }
+        }
+
+        // Date (on the side)
+        &--date {
+            display: block;
+            color: $color-lightgray;
+            font-size: rem(14px);
+            margin-top: 16px;
+            padding: 0 8vw;
+
+            @include breakpoint (sm) {
+                position: absolute;
+                z-index: 3;
+                left: calc(100% + 30px);
+                bottom: 0;
+                transform: rotate(270deg);
+                transform-origin: 0 0;
+                white-space: nowrap;
+                line-height: 0;
+                padding: 0;
+            }
+        }
+
+        // Photo number
+        &--number {
+            position: absolute;
+            pointer-events: none;
+            font-family: $font-serif-extra;
+            color: rgba($color-tertiary, .5);
+            font-size: rem(124px);
+            bottom: -80px;
+            right: 24px;
+
+            @include breakpoint (sm) {
+                font-size: 18.75vw;
+                left: 92%;
+                top: 50%;
+                z-index: 1;
+                transform: translate(-50%, -50%);
+
+            }
+        }
+    }
+}