Use House component

2022-06-13 15:59:29 +02:00
parent b7a857e2e6
commit 157b50f36c
4 changed files with 64 additions and 37 deletions
--- a/src/style/molecules/_house.scss
+++ b/src/style/molecules/_house.scss
@@ -0,0 +1,178 @@
+.house {
+    position: relative;
+
+    @include bp (sm) {
+        --columns: 20;
+        grid-column-start: 3;
+    }
+
+    a {
+        display: block;
+        width: 100%;
+        height: 100%;
+        text-decoration: none;
+        cursor: zoom-in;
+    }
+
+    // Information
+    &__info {
+        --delay: 0.2s;
+        grid-column: 1 / span var(--columns);
+        margin-bottom: 32px;
+        padding: 0 20px;
+        overflow: hidden;
+
+        @include bp (mob-lg) {
+            max-width: min(540px, 85vw);
+        }
+        @include bp (sm) {
+            grid-column: 4 / span 14;
+            margin-bottom: 56px;
+            padding: 0;
+            max-width: 800px;
+        }
+
+        h2 {
+            opacity: 0;
+            transform: translate3d(0, 25%, 0);
+            transition: transform 1.2s var(--ease-quart), opacity 1.2s var(--ease-quart);
+            transition-delay: var(--delay);
+        }
+        .info {
+            display: block;
+            margin-top: 12px;
+            color: $color-lightgray;
+            line-height: 1.5;
+            opacity: 0;
+            transition: opacity 1.2s var(--ease-quart);
+            transition-delay: var(--delay);
+
+            @include bp (sm) {
+                margin-top: 16px;
+            }
+            @include bp (md) {
+                margin-top: 24px;
+            }
+
+            & > * {
+                display: inline-block;
+            }
+            svg {
+                width: 1em;
+                height: 1em;
+                margin-right: 0.4em;
+                margin-bottom: 3px;
+            }
+            .sep {
+                margin: 0 4px;
+            }
+        }
+    }
+
+    // Photo
+    &__photo {
+        position: relative;
+        display: block;
+        grid-column: 1 / span 17;
+        opacity: 0;
+        transition: opacity 2s var(--ease-quart);
+
+        picture {
+            position: relative;
+            z-index: 3;
+            border-radius: 0;
+            background: $color-primary;
+
+            @include bp (sm) {
+                border-radius: 8px;
+            }
+        }
+        img {
+            display: block;
+            width: calc(100% + 2px);
+            height: calc(100% + 2px);
+            object-fit: cover;
+            transform: scale3d(1.125, 1.125, 1.125);
+            transition: transform 2s var(--ease-quart), opacity 1.2s var(--ease-quart);
+            will-change: transform;
+        }
+
+        // Scale down image on hover
+        @media (hover: hover) {
+            a:hover {
+                img {
+                    opacity: 0.8;
+                    transform: scale3d(1.03, 1.03, 1.03) !important;
+                    transition-duration: 1.2s;
+                }
+            }
+        }
+    }
+
+    // Visible state
+    &.is-visible {
+        .house__info {
+            h2 {
+                opacity: 1;
+                transform: translate3d(0,0,0);
+            }
+            .info {
+                opacity: 1;
+            }
+        }
+        .house__photo {
+            opacity: 1;
+
+            img {
+                transform: scale3d(1,1,1);
+            }
+        }
+    }
+
+    // Photo number
+    &__index {
+        position: absolute;
+        z-index: 1;
+        bottom: -64px;
+        right: 20px;
+        text-align: right;
+        pointer-events: none;
+        user-select: none;
+
+        @include bp (sm) {
+            left: 112.5%;
+            width: 400px;
+            top: 50%;
+            bottom: auto;
+            text-align: left;
+            transform: translate3d(-50%, -50%, 0);
+        }
+    }
+
+    // Even photos
+    &:nth-child(even) {
+        .house {
+            &__photo {
+                @include bp (sm) {
+                    grid-column-start: 4;
+                }
+            }
+            &__info {
+                @include bp (sm) {
+                    margin-left: auto;
+                    text-align: right;
+                }
+            }
+            &__index {
+                left: auto;
+                right: 20px;
+
+                @include bp (sm) {
+                    right: auto;
+                    left: -12%;
+                    text-align: right;
+                }
+            }
+        }
+    }
+}