Merge branch 'dev'

package.json

@@ -18,22 +18,22 @@
     "animejs": "^3.2.0",
     "compression": "^1.7.4",
     "imagesloaded": "^4.1.4",
-    "lazysizes": "^5.2.0",
+    "lazysizes": "^5.2.2",
     "node-fetch": "^2.6.0",
     "normalize.css": "^8.0.1",
     "polka": "^1.0.0-next.11",
     "rellax": "^1.12.1",
-    "scroll-out": "^2.2.10",
+    "scroll-out": "^2.2.11",
     "sirv": "^0.4.6",
     "svelte-lazy": "^0.1.11",
     "swipe-listener": "^1.1.0"
   },
   "devDependencies": {
-    "@babel/core": "^7.9.6",
+    "@babel/core": "^7.10.2",
     "@babel/plugin-syntax-dynamic-import": "^7.8.3",
-    "@babel/plugin-transform-runtime": "^7.9.6",
-    "@babel/preset-env": "^7.9.6",
-    "@babel/runtime": "^7.9.6",
+    "@babel/plugin-transform-runtime": "^7.10.1",
+    "@babel/preset-env": "^7.10.2",
+    "@babel/runtime": "^7.10.2",
     "@rollup/plugin-alias": "^3.1.0",
     "@rollup/plugin-babel": "^5.0.2",
     "@rollup/plugin-commonjs": "12.0.0",
@@ -42,15 +42,15 @@
     "autoprefixer": "^9.8.0",
     "dotenv": "^8.2.0",
     "node-sass": "^4.14.1",
-    "postcss": "^7.0.30",
+    "postcss": "^7.0.32",
     "postcss-load-config": "^2.1.0",
     "postcss-preset-env": "^6.7.0",
-    "rollup": "^2.10.9",
+    "rollup": "^2.12.0",
     "rollup-plugin-glslify": "^1.2.0",
     "rollup-plugin-svelte": "^5.2.2",
-    "rollup-plugin-terser": "^6.0.1",
+    "rollup-plugin-terser": "^6.1.0",
     "sapper": "^0.27.13",
-    "svelte": "^3.22.3",
+    "svelte": "^3.23.0",
     "svelte-preprocess": "^3.7.4"
   },
   "browserslist": [

src/molecules/Photo.svelte

@@ -18,6 +18,7 @@
     const { name, date, location } = photo
     const { private_hash } = photo.image
     const imgAlt = `${name}, ${location.region}, ${location.country.name}`
+    const nameSplit = name.split(', ')
 
     // Photo index
     const photoIndex = (index < 10 ? '0': '') + index
@@ -35,9 +36,11 @@
     <div class="photo__location wrap">
         <div class="wrapper">
             <h2 class="title-location" id="photo-{index + 1}">
-                {#each name.split(', ') as line, i}
+                {#each nameSplit as line, i}
                 <span class="line">
-                    <span>{name.split(', ')[i]},</span>
+                    <span>
+                        {nameSplit[i]}{#if i < nameSplit.length - 1},{/if}
+                    </span>
                 </span>
                 {/each}
             </h2>

src/routes/_layout.svelte

@@ -99,7 +99,9 @@
                 // Add last updated date to each location
                 data.locations.data.forEach(location => {
                     const latestPhoto = latestPhotos.find(photo => photo.location.id === location.id)
-                    location.last_updated = latestPhoto.created_on
+                    if (latestPhoto) {
+                        location.last_updated = latestPhoto.created_on
+                    }
                 })
 
                 // Set data into store
@@ -171,7 +173,7 @@
     {/each}
 </svelte:head>
 
-<slot></slot>
+<slot />
 
 <Transition />
 

src/routes/location/[country]/[place].svelte

@@ -164,9 +164,10 @@
         {#if illu_desktop || illu_desktop_2x || illu_mobile}
         <div class="place__illustration">
             <div class="parallax" data-rellax-speed="-5" data-rellax-max-y="400">
-                <div class="place__illustration_img" style="{`--url-desktop: ${illu_desktop ? `url(${illu_desktop.full_url});` : undefined}`}
-                            {`--url-desktop-2x: ${illu_desktop_2x ? `url(${illu_desktop_2x.full_url});` : undefined}`}
-                            {`--url-mobile: ${illu_mobile ? `url(${illu_mobile.full_url});` : undefined}`}"
+                <div class="place__illustration_img"
+                    style="{`--url-desktop: ${illu_desktop ? `url(${illu_desktop.full_url});` : undefined}`}
+                           {`--url-desktop-2x: ${illu_desktop_2x ? `url(${illu_desktop_2x.full_url});` : undefined}`}
+                           {`--url-mobile: ${illu_mobile ? `url(${illu_mobile.full_url});` : undefined}`}"
                 />
             </div>
         </div>

src/style/molecules/_globe.scss

@@ -64,21 +64,32 @@
             display: block;
             top: -4px;
             left: -4px;
-            width: 8px;
-            height: 8px;
             padding: 4px;
-            border-radius: 50%;
             opacity: 1;
-            background: #ff6c89;
             will-change: transform;
 
+            // Dot
+            &:before {
+                content: "";
+                display: block;
+                position: absolute;
+                top: 0;
+                left: 0;
+                width: 8px;
+                height: 8px;
+                background: $color-secondary;
+                border-radius: 100%;
+            }
+
             span {
                 transition: color 0.4s $ease-quart, opacity 0.3s $ease-inout;
             }
 
             // Hover glow effect
             &.hover {
-                animation: globeMarkerPulse 1s;
+                &:before {
+                    animation: globeMarkerPulse 1s;
+                }
             }
 
             // Label
@@ -120,7 +131,7 @@
                 }
                 .marker {
                     &__city {
-                        color: #FF6C89;
+                        color: $color-secondary;
                     }
                     &__country {
                         color: $color-text;
@@ -158,6 +169,12 @@
             // Marker is close to another one
             // Show the marker infos only on hover
             &.is-close {
+                // Dot
+                &:before {
+                    width: 7px;
+                    height: 7px;
+                }
+                // Label
                 .marker__label {
                     opacity: 0;
                 }

src/style/molecules/_photo.scss

@@ -1,5 +1,4 @@
 .photo {
-
     /*
     ** Location
     */
@@ -13,6 +12,7 @@
             margin-bottom: 56px;
         }
 
+        // Street name
         h2 {
             text-align: left;
 
@@ -22,7 +22,8 @@
         }
         .line {
             overflow: hidden;
-            padding-bottom: 3px;
+            margin: -12px 0 -16px;
+            padding: 12px 0;
             display: block;
 
             span {

src/style/organisms/_locations.scss

@@ -55,15 +55,19 @@
         @include breakpoint (xl) {
             grid-column-gap: 96px;
             grid-row-gap: 96px;
-            max-width: 1024px;
+            // max-width: 1024px;
             margin-left: auto;
             margin-right: auto;
             margin-bottom: 72px;
 
             // To apply when having 4 locations:
-            // grid-template-columns: repeat(4, 1fr);
+            grid-template-columns: repeat(4, 1fr);
+            max-width: 1200px;
             // grid-column-gap: 120px;
             // grid-row-gap: 120px;
+            // Works well but fucks with the FLIP animations
+            // grid-auto-flow: column;
+            // grid-template-columns: repeat(auto-fit, minmax(min-content, 1fr));
         }
     }
 }

src/style/organisms/_photos.scss

@@ -80,6 +80,13 @@
                 }
             }
 
+            // Title
+            h2 {
+                @include breakpoint (sm) {
+                    max-width: 840px;
+                }
+            }
+
             // Even photos
             &:nth-child(even) {
                 @include breakpoint (sm) {
@@ -87,6 +94,9 @@
                     .photo__location, h2 {
                         text-align: right;
                     }
+                    h2 {
+                        margin-left: auto;
+                    }
 
                     // Image
                     .photo {

src/utils/functions.js

@@ -128,7 +128,7 @@ export const formatDate = (originDate, format) => {
 // Relative time from an input date
 export const relativeTime = (originDate, limit = 0) => {
     const date = new Date(originDate)
-    const diff = Number(new Date()) - date
+    const diff = Number(new Date()) - date - (2 * 3600 * 1000) // 2 hours difference in ms
 
     // Define units in milliseconds
     const mn = 60 * 1000