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

@@ -24,26 +24,33 @@ export const animateIn = scope => {
         }
     })
 
+
     // Photo (reveal on scroll)
-    imagesLoaded(scope.querySelector('.photo__image'), instance => {
+    const photoImage = scope.querySelector('.photo__image')
-        const image = instance.elements[0]
+    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,
+            targets: photoImage,
-            onShown (el) {
+            onShown: el => photoAnim.restart()
-                // Load the photo then reveal it
-                anime({
-                    targets: el.querySelector('img'),
-                    scale: [1.12, 1],
-                    opacity: [0, 1],
-                    easing: 'easeOutQuart',
-                    duration: 2000,
-                    delay: 50
-                })
-            }
         })
     })
 
+
     // Number parallax on scroll
     const nbParallaxMedia = window.matchMedia('(min-width: 768px)')
     const nbParallax = matchMedia => {

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">

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)}>

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,

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 {

src/style/layouts/_main.scss

@@ -1,6 +1,5 @@
 // Main page
 .housesof {
-    overflow: hidden;
     position: absolute;
     top: 0;
     left: 0;

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;
             }

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;

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

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;
         }

src/style/organisms/_photos.scss

@@ -45,7 +45,7 @@
                 position: sticky;
                 z-index: 10;
                 top: 32px;
-                height: 100%;
+                width: 100%;
             }
         }
 

src/style/pages/_homepage.scss

@@ -1,6 +1,7 @@
 // Introduction
 .intro {
     background-color: $color-tertiary;
+    overflow: hidden;
 
     // Title
     .title-parallax {