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/organisms/_photos.scss
+++ b/src/style/organisms/_photos.scss
@@ -0,0 +1,156 @@
+.photos {
+    position: relative;
+    margin-top: -22px;
+    padding-bottom: 102px;
+    background-color: #fff;
+    
+    @include breakpoint (sm) {
+        margin-top: -128px;
+        padding-top: 72px;
+        padding-bottom: 0;
+    }
+
+    // Sidebar
+    &__side {
+        position: absolute;
+        z-index: 5;
+        top: 40px;
+        left: 24px;
+        height: 96%;
+        pointer-events: none;
+        
+        // Sticky
+        .sticky {
+            position: sticky;
+            top: 16px;
+            display: flex;
+            flex-direction: row-reverse;
+            align-items: flex-end;
+            transform: rotate(270deg) translate(-46%,-240%);
+            transform-origin: 50% 50%;
+        }
+
+        p {
+            font-size: rem(12px);
+            color: $color-lightgray;
+            margin-right: 24px;
+
+            strong {
+                font-weight: 600;
+                display: block;
+                text-align: right;
+            }
+        }
+    }
+
+
+    // Each photo
+    .photo {
+        position: relative;
+        z-index: 4;
+        margin-bottom: 102px;
+        
+        @include breakpoint (sm) {
+            margin-bottom: 120px;
+        }
+
+        // Last photo doesn't need spacing
+        &:last-child {
+            margin-bottom: 0;
+        }
+    }
+
+    // List view
+    &--list {
+        & > .wrap {
+            padding: 0;
+        }
+
+        // Photo
+        .photo {
+            // Even photos
+            &:nth-child(even) {
+                // Location
+                .photo__location, h2 {
+                    text-align: right;
+                }
+    
+                // Image
+                .photo__image {
+                    justify-content: flex-end;
+    
+                    &--date {
+                        right: 100%;
+                        left: -30px;
+                    }
+                    &--number {
+                        right: 77%;
+                        left: auto;
+                        text-align: right;
+                    }
+                }
+            }
+        }
+    }
+
+    // Grid view
+    &--grid {
+        & > .wrap {
+            display: grid;
+            grid-template-columns: repeat(2, 1fr);
+            grid-column-gap: 48px;
+            grid-row-gap: 72px;
+            padding-left: 192px;
+            padding-right: 64px;
+        }
+
+        // Photo
+        .photo {
+            display: flex;
+            flex-direction: column-reverse;
+            margin-bottom: 0;
+
+            // Every second (on column 2)
+            &:nth-child(2n+2) {
+                transform: translateY(-64px);
+            }
+
+            .wrap, .wrapper {
+                padding: 0;
+                margin: 0;
+            }
+
+            // Location
+            &__location {
+                text-align: left;
+            
+                h2 {
+                    font-size: rem(28px);
+                    margin-top: 28px;
+                    white-space: normal;
+                }
+
+                p {
+                    font-size: rem(12px);
+                    margin-top: 8px;
+                }
+            }
+
+            // Image
+            &__image {
+                &--number {
+                    font-size: rem(96px);
+                    bottom: -88px;
+                    right: 24px;
+                    z-index: 1;
+                    transform: none;
+                    top: auto;
+                    left: auto;
+                }
+                &--date {
+                    display: none;
+                }
+            }
+        }
+    }
+}