Merge branch 'dev'

2024-07-25 20:15:40 +02:00
parent cb7d83978d d2347cc7b2
commit e01d9af946
7 changed files with 57 additions and 63 deletions
--- a/apps/website/package.json
+++ b/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": [
--- a/apps/website/src/components/molecules/House/House.scss
+++ b/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;
            }

            & > * {
--- a/apps/website/src/routes/(site)/[country]/[location]/+page.server.ts
+++ b/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 }
-                illustration_desktop_2x { id }
-                illustration_mobile { id }
+                hero { id }
                credits {
                    credit_id {
                        name
--- a/apps/website/src/routes/(site)/[country]/[location]/+page.svelte
+++ b/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}
-            <picture class="location-page__illustration" style:--parallax-y="{illustrationOffsetY}px">
-                <source media="(min-width: 1200px)" srcset={getAssetUrlKey(location.illustration_desktop_2x.id, 'illustration-desktop-2x')}>
-                <source media="(min-width: 768px)" srcset={getAssetUrlKey(location.illustration_desktop.id, 'illustration-desktop-1x')}>
+        {#if location?.hero?.id}
+            <picture class="location-page__hero" style:--parallax-y="{heroOffsetY}px">
+                <source media="(min-width: 1200px)" srcset={getAssetUrlKey(location.hero.id, 'hero-large')}>
+                <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>
--- a/apps/website/src/routes/+layout.svelte
+++ b/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',
--- a/apps/website/src/style/_typography.scss
+++ b/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)});
    }
 }

--- a/apps/website/src/style/pages/_location.scss
+++ b/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
-    &__illustration {
+    // Hero
+    &__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%);
-            -webkit-mask-image: $mask;
-            mask-image: $mask;
+            mask-image: linear-gradient(180deg, #000 0%, rgba(#000, 0) 100%);
        }

        img {
            display: block;
            width: 100%;
-            height: auto;
-            object-fit: contain;
+            height: 100%;
+            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;