Merge branch 'dev'

apps/website/package.json

@@ -1,6 +1,6 @@
 {
   "name": "website",
-  "version": "2.0.0",
+  "version": "2.1.0",
   "private": true,
   "author": "Félix Péault <hello@flayks.com> (https://flayks.com)",
   "contributors": [

apps/website/src/components/molecules/House/House.scss

@@ -15,7 +15,7 @@
         }
         @include bp (sm) {
             grid-column: 6 / span 14;
-            margin-bottom: 56px;
+            margin-bottom: 48px;
             padding: 0;
             max-width: 800px;
         }
@@ -28,7 +28,7 @@
         }
         .info {
             display: block;
-            margin-top: 12px;
+            margin-top: 8px;
             color: $color-lightgray;
             line-height: 1.5;
             opacity: 0;
@@ -36,10 +36,10 @@
             transition-delay: var(--delay);
 
             @include bp (sm) {
-                margin-top: 16px;
+                margin-top: 12px;
             }
             @include bp (md) {
-                margin-top: 24px;
+                margin-top: 16px;
             }
 
             & > * {

apps/website/src/routes/(site)/[country]/[location]/+page.server.ts

@@ -20,9 +20,7 @@ export const load = async ({ params, setHeaders }) => {
                 slug
                 description
                 date_updated
-                illustration_desktop { id }
+                hero { id }
-                illustration_desktop_2x { id }
-                illustration_mobile { id }
                 credits {
                     credit_id {
                         name

apps/website/src/routes/(site)/[country]/[location]/+page.svelte

@@ -41,12 +41,11 @@
     let currentPage = 1
     let ended: boolean
     let currentPhotosAmount: number
-    let illustrationOffsetY = 0
+    let heroOffsetY = 0
 
     $: latestPhoto = photos[0]
     $: currentPhotosAmount = photos.length
     $: ended = currentPhotosAmount === totalPhotos
-    $: hasIllustration = location.illustration_desktop && location.illustration_desktop_2x && location.illustration_mobile
 
 
     /**
@@ -104,7 +103,7 @@
      * Add parallax on illustration when scrolling
      */
     $: if (scrollY && scrollY < introEl.offsetHeight) {
-        illustrationOffsetY = scrollY * 0.1
+        heroOffsetY = scrollY * 0.1
     }
 
 
@@ -163,7 +162,7 @@
             }],
 
             // Illustration
-            ['.location-page__illustration', {
+            ['.location-page__hero', {
                 scale: [1.06, 1],
                 opacity: [0, 1],
             }, {
@@ -235,6 +234,7 @@
                     Houses of {location.name} {location.description ?? 'has no description yet'}
                 </div>
                 <div class="info">
+                    {#if location.credits}
                         <p class="text-label">
                             Photos by
                             {#each location.credits as { credit_id: { name, website } }}
@@ -247,6 +247,7 @@
                                 {/if}
                             {/each}
                         </p>
+                    {/if}
                     {#if latestPhoto}
                         &middot;
                         <p class="text-label" title={dayjs(latestPhoto.date_created).format('DD/MM/YYYY, hh:mm')}>
@@ -271,15 +272,15 @@
             </div>
         </div>
 
-        {#if hasIllustration}
+        {#if location?.hero?.id}
-            <picture class="location-page__illustration" style:--parallax-y="{illustrationOffsetY}px">
+            <picture class="location-page__hero" style:--parallax-y="{heroOffsetY}px">
-                <source media="(min-width: 1200px)" srcset={getAssetUrlKey(location.illustration_desktop_2x.id, 'illustration-desktop-2x')}>
+                <source media="(min-width: 1200px)" srcset={getAssetUrlKey(location.hero.id, 'hero-large')}>
-                <source media="(min-width: 768px)" srcset={getAssetUrlKey(location.illustration_desktop.id, 'illustration-desktop-1x')}>
+                <source media="(min-width: 768px)" srcset={getAssetUrlKey(location.hero.id, 'hero-small')}>
                 <img
-                    src={getAssetUrlKey(location.illustration_mobile.id, 'illustration-mobile')}
+                    src={getAssetUrlKey(location.hero.id, 'hero-mobile')}
                     width={320}
                     height={824}
-                    alt="Illustration for {location.name}"
+                    alt="Hero photo of {location.name}"
                     decoding="async"
                 />
             </picture>

apps/website/src/routes/+layout.svelte

@@ -62,24 +62,26 @@
         $previousPage = from.url.pathname
 
         // Enable page loading state if URL changed
-        if (from.route.id !== to.route.id) {
+        if (from?.route.id !== to?.route.id) {
             $pageLoading = true
         }
     })
 
-    afterNavigate(() => {
+    afterNavigate(({ from }) => {
         // Remove page loading state
         setTimeout(() => $pageLoading = false, DELAY.PAGE_LOADING)
 
         // Scroll back to top when new page is ready (excepted certain pages)
-        if (!$page.url.searchParams.get('country') && !$page.url.pathname.includes('/shop/')) {
+        if (from?.url?.pathname && (!$page.url.searchParams.get('country') && !$page.url.pathname.includes('/shop/'))) {
             setTimeout(scrollToTop, DELAY.PAGE_IN)
         }
     })
 
-    // Define page loading
     $: if (browser) {
+        // Define page loading
         document.body.classList.toggle('is-loading', $pageLoading)
+        // Block scroll on certain conditions
+        // document.body.classList.toggle('block-scroll', condition)
     }
 
 
@@ -120,7 +122,7 @@
     <Toast
         type="global"
         id="posters-promo"
-        text="Upgrade your walls! <strong>10% off</strong> in cart with free shipping on our graphic posters."
+        text="Upgrade your walls! Our graphic posters are <strong>10% off</strong> in cart with free shipping."
         cta={{
             label: 'View posters',
             url: '/shop',

apps/website/src/style/_typography.scss

@@ -20,12 +20,12 @@
 // House Name
 .title-image {
     font-family: $font-serif;
-    font-size: rem(40px);
+    font-size: clamp(#{rem(28px)}, 9vw, #{rem(36px)});
     line-height: 1;
     color: $color-secondary;
 
     @include bp (sm) {
-        font-size: clamp(#{rem(40px)}, 7vw, #{rem(88px)});
+        font-size: clamp(#{rem(40px)}, 4.5vw, #{rem(56px)});
     }
 }
 

apps/website/src/style/pages/_location.scss

@@ -7,13 +7,6 @@
         position: relative;
         background: $color-primary;
 
-        @include bp (sm) {
-            padding-top: clamp(40px, 14vw, 320px);
-        }
-        @include bp (lg) {
-            padding-top: clamp(40px, 18vw, 272px);
-        }
-
         // Houses Of Title
         .title {
             position: relative;
@@ -37,6 +30,15 @@
                 max-width: clamp(300px, 80vw, 1120px);
                 margin: 0 auto;
                 padding: 0;
+
+                @include bp (sm) {
+                    --margin-y: clamp(40px, 14vw, 256px);
+                    margin-top: var(--margin-y);
+                    margin-bottom: var(--margin-y);
+                }
+                @include bp (lg) {
+                    // --margin-y: clamp(40px, 10vw, 256px);
+                }
             }
 
             strong {
@@ -52,8 +54,6 @@
                 @include bp (sm) {
                     display: flex;
                     align-items: baseline;
-                    // margin-right: auto;
-                    // margin-left: -15vw;
                 }
 
                 span {
@@ -69,12 +69,6 @@
             }
             .city {
                 text-align: center;
-
-                @include bp (sm) {
-                    // margin-left: 15vw;
-                    // width: 80%;
-                    // padding-left: min(400px, 16vw);
-                }
             }
         }
     }
@@ -92,7 +86,7 @@
         @include bp (sm) {
             --columns: 19;
             grid-column: 4 / span 21;
-            margin: clamp(40px, 16vw, 260px) 0 calc(-1 * clamp(60px, 6vw, 120px));
+            margin-bottom: calc(-1 * clamp(60px, 6vw, 120px));
             border-radius: 8px 0 0 8px;
         }
         @include bp (md) {
@@ -152,34 +146,33 @@
         }
     }
 
-    // Illustration
+    // Hero
-    &__illustration {
+    &__hero {
         pointer-events: none;
         position: absolute;
         z-index: 1;
         top: 0;
         left: 0;
         right: 0;
-        width: clamp(320px, 100vw, 2560px);
+        width: 100%;
         height: 100%;
-        margin: 0 auto;
-        overflow: hidden;
         transform-origin: top center;
+        opacity: 0.75;
+        mix-blend-mode: soft-light;
 
         /* Bottom fading gradient for illustration */
         @include bp (sm) {
-            $mask: linear-gradient(180deg, #000 0%, #000 80%, rgba(0,0,0,0) 100%);
+            mask-image: linear-gradient(180deg, #000 0%, rgba(#000, 0) 100%);
-            -webkit-mask-image: $mask;
-            mask-image: $mask;
         }
 
         img {
             display: block;
             width: 100%;
-            height: auto;
+            height: 100%;
-            object-fit: contain;
+            object-fit: cover;
             pointer-events: none;
             user-select: none;
+            filter: grayscale(25%);
             transform: translate3d(0, var(--parallax-y), 0);
             transition: transform 0.7s var(--ease-quart);
             will-change: transform, opacity;