From bdc305a77af04a15ee757505f3d29b8bcf57669b Mon Sep 17 00:00:00 2001
From: =?UTF-8?q?Fe=CC=81lix=20Pe=CC=81ault?= <hello@flayks.com>
Date: Sat, 4 Apr 2020 19:10:40 +0200
Subject: [PATCH] Fix some responsive and style

- Fullscreen: center image + add a background color
- Carousel: don't cut informations
- Title location font size
- Style location line height
- Photo reveal effect
- Photo has now a transparent png
---
 src/animations/Photo.js              | 35 +++++++++++++++++-----------
 src/molecules/Photo.svelte           |  2 +-
 src/organisms/Carousel.svelte        |  2 +-
 src/routes/_layout.svelte            |  3 +--
 src/style/_base.scss                 |  5 ++--
 src/style/layouts/_main.scss         |  1 -
 src/style/molecules/_location.scss   |  4 ++--
 src/style/organisms/_carousel.scss   |  6 +++--
 src/style/organisms/_fullscreen.scss |  2 ++
 src/style/organisms/_locations.scss  |  8 +++++--
 src/style/organisms/_photos.scss     |  2 +-
 src/style/pages/_homepage.scss       |  1 +
 12 files changed, 43 insertions(+), 28 deletions(-)

diff --git a/src/animations/Photo.js b/src/animations/Photo.js
index c20e07a..877e725 100644
--- a/src/animations/Photo.js
+++ b/src/animations/Photo.js
@@ -24,26 +24,33 @@ export const animateIn = scope => {
         }
     })
 
+
     // Photo (reveal on scroll)
-    imagesLoaded(scope.querySelector('.photo__image'), instance => {
-        const image = instance.elements[0]
+    const photoImage = scope.querySelector('.photo__image')
+    const photoAnim = anime.timeline({
+        easing: 'easeOutQuart',
+        duration: 2000,
+        autoplay: false
+    })
+    photoAnim.add({
+        targets: scope.querySelector('.photo__picture'),
+        opacity: [0, 1]
+    }, 50)
+    photoAnim.add({
+        targets: scope.querySelector('.photo__picture img'),
+        scale: [1.12, 1]
+    }, 50)
+
+    // Show photo when image is loaded
+    imagesLoaded(photoImage, instance => {
         const photoReveal = ScrollOut({
             once: true,
-            targets: image,
-            onShown (el) {
-                // Load the photo then reveal it
-                anime({
-                    targets: el.querySelector('img'),
-                    scale: [1.12, 1],
-                    opacity: [0, 1],
-                    easing: 'easeOutQuart',
-                    duration: 2000,
-                    delay: 50
-                })
-            }
+            targets: photoImage,
+            onShown: el => photoAnim.restart()
         })
     })
 
+
     // Number parallax on scroll
     const nbParallaxMedia = window.matchMedia('(min-width: 768px)')
     const nbParallax = matchMedia => {
diff --git a/src/molecules/Photo.svelte b/src/molecules/Photo.svelte
index 7cedfe1..33a0ba8 100644
--- a/src/molecules/Photo.svelte
+++ b/src/molecules/Photo.svelte
@@ -53,7 +53,7 @@
                     <source media="(min-width: 500px)" data-srcset={getThumbnail(private_hash, 650)}>
                     <source media="(min-width: 300px)" data-srcset={getThumbnail(private_hash, 400)}>
                     {#if layout === 'list'}
-                    <img src="data:image/gif;base64,R0lGODdhAQABAPAAAMPDwwAAACwAAAAAAQABAAACAkQBADs="
+                    <img src="data:image/png;base64,R0lGODlhAQABAAD/ACwAAAAAAQABAAACADs="
                         alt={imgAlt}
                         width={defaultWidth} height={defaultHeight}
                         class="lazyload">
diff --git a/src/organisms/Carousel.svelte b/src/organisms/Carousel.svelte
index 2229099..25a244d 100644
--- a/src/organisms/Carousel.svelte
+++ b/src/organisms/Carousel.svelte
@@ -148,7 +148,7 @@
                     on:click={openFullscreen}
                 >
                     <picture class="gallery__picture">
-                        <source media="(min-width: 968px)" srcset={getThumbnail(image.private_hash, 1400)}>
+                        <source media="(min-width: 968px)" srcset={getThumbnail(image.private_hash, 1200)}>
                         <source media="(min-width: 800px)" srcset={getThumbnail(image.private_hash, 900)}>
                         <source media="(min-width: 500px)" srcset={getThumbnail(image.private_hash, 600)}>
                         <source media="(min-width: 300px)" srcset={getThumbnail(image.private_hash, 400)}>
diff --git a/src/routes/_layout.svelte b/src/routes/_layout.svelte
index dc1c571..ba5b0d8 100644
--- a/src/routes/_layout.svelte
+++ b/src/routes/_layout.svelte
@@ -1,6 +1,4 @@
 <script context="module">
-    import { apiEndpoints } from 'utils/store'
-
     export async function preload (page, session) {
         const req = await this.fetch(apiEndpoints.gql, {
             method: 'post',
@@ -68,6 +66,7 @@
     import { fade } from 'svelte/transition'
     import { stores } from '@sapper/app'
     import {
+        apiEndpoints,
         site,
         continents,
         countries,
diff --git a/src/style/_base.scss b/src/style/_base.scss
index 6a8c58d..43840c4 100644
--- a/src/style/_base.scss
+++ b/src/style/_base.scss
@@ -2,6 +2,7 @@ html {
     font: #{$base-font-size} $font-sans;
     color: $color-text;
     min-width: 320px;
+    overflow-x: hidden;
 }
 body {
     @include font-smooth;
@@ -80,7 +81,7 @@ button {
 // Title: Locations
 .title-location {
     font-family: $font-serif;
-    font-size: rem(68px);
+    font-size: rem(48px);
     line-height: 1;
     color: $color-secondary;
     text-align: center;
@@ -165,7 +166,7 @@ button {
     font-family: $font-serif;
     font-size: rem(24px);
     color: #fff;
-    line-height: 1;
+    line-height: 1.15;
     text-align: center;
 
     a {
diff --git a/src/style/layouts/_main.scss b/src/style/layouts/_main.scss
index b70e32d..2796bbc 100644
--- a/src/style/layouts/_main.scss
+++ b/src/style/layouts/_main.scss
@@ -1,6 +1,5 @@
 // Main page
 .housesof {
-    overflow: hidden;
     position: absolute;
     top: 0;
     left: 0;
diff --git a/src/style/molecules/_location.scss b/src/style/molecules/_location.scss
index 8979e35..97fda66 100644
--- a/src/style/molecules/_location.scss
+++ b/src/style/molecules/_location.scss
@@ -36,7 +36,7 @@
         font-size: rem(32px);
         color: $color-secondary;
 
-        @include breakpoint (sm) {
+        @include breakpoint (md) {
             font-size: rem(48px);
         }
     }
@@ -44,7 +44,7 @@
             height: 40px;
             margin: 24px 0 16px;
 
-            @include breakpoint (sm) {
+            @include breakpoint (md) {
                 height: 64px;
                 margin-bottom: 24px;
             }
diff --git a/src/style/organisms/_carousel.scss b/src/style/organisms/_carousel.scss
index 5f0cdaa..b112d1d 100644
--- a/src/style/organisms/_carousel.scss
+++ b/src/style/organisms/_carousel.scss
@@ -210,13 +210,12 @@
     */
     &__infos {
         position: relative;
-        z-index: 3;
+        z-index: 2;
     }
 
     // Locations
     &__locations {
         position: relative;
-        overflow: hidden;
         min-height: 80px;
 
         @include breakpoint (sm) {
@@ -236,6 +235,7 @@
         transition: transform 0.9s $ease-quart, opacity 0.9s $ease-quart;
         will-change: transform, opacity;
         margin-top: 32px;
+        padding-bottom: 4px;
 
         @include breakpoint (sm) {
             margin-top: pxVW(80);
@@ -268,6 +268,8 @@
     */
     &__dots {
         display: none;
+        position: relative;
+        z-index: 3;
 
         @include breakpoint (xs) {
             display: flex;
diff --git a/src/style/organisms/_fullscreen.scss b/src/style/organisms/_fullscreen.scss
index 857b3fd..93c68aa 100644
--- a/src/style/organisms/_fullscreen.scss
+++ b/src/style/organisms/_fullscreen.scss
@@ -15,6 +15,7 @@
         overflow-x: auto;
         opacity: 0;
         transform: scale(1.1);
+        background: $color-primary;
         transition: transform 0.8s $ease-quart, opacity 0.8s $ease-quart;
         will-change: transform, opacity;
 
@@ -24,6 +25,7 @@
             display: block;
             height: 100%;
             width: auto;
+            margin: 0 auto;
         }
 
         // Open
diff --git a/src/style/organisms/_locations.scss b/src/style/organisms/_locations.scss
index 3d364c5..4816233 100644
--- a/src/style/organisms/_locations.scss
+++ b/src/style/organisms/_locations.scss
@@ -39,20 +39,24 @@
 
     // Locations
     &__locations {
-        min-height: 200px;
+        min-height: 120px;
         margin-top: 72px;
 
         @include breakpoint (sm) {
             display: flex;
             flex-wrap: wrap;
             justify-content: center;
-            margin-bottom: pxVW(232);
+            min-height: 200px;
             margin-top: 112px;
+            margin-bottom: pxVW(120);
             // display: grid;
             // grid-template-columns: repeat(auto-fit, minmax(200px, 1fr));
             // grid-column-gap: 120px;
             // grid-row-gap: pxVW(120);
         }
+        @include breakpoint (md) {
+            margin-bottom: pxVW(232);
+        }
         @include breakpoint (xl) {
             margin-bottom: 232px;
         }
diff --git a/src/style/organisms/_photos.scss b/src/style/organisms/_photos.scss
index 9bd4a0e..06c341f 100644
--- a/src/style/organisms/_photos.scss
+++ b/src/style/organisms/_photos.scss
@@ -45,7 +45,7 @@
                 position: sticky;
                 z-index: 10;
                 top: 32px;
-                height: 100%;
+                width: 100%;
             }
         }
 
diff --git a/src/style/pages/_homepage.scss b/src/style/pages/_homepage.scss
index 8680950..aa9202a 100644
--- a/src/style/pages/_homepage.scss
+++ b/src/style/pages/_homepage.scss
@@ -1,6 +1,7 @@
 // Introduction
 .intro {
     background-color: $color-tertiary;
+    overflow: hidden;
 
     // Title
     .title-parallax {