Detect media on About Process Step, Visual fixes

src/components/molecules/ProcessStep.svelte

@@ -5,29 +5,42 @@
 <script lang="ts">
     // Components
     import Image from '$components/atoms/Image.svelte'
+    import { getAssetUrlKey } from '$utils/api'
 
     export let index: number
     export let title: string
     export let text: string
     export let image: any = undefined
+    export let video: any = undefined
 
     const imageRatio = image ? image.width / image.height : undefined
 </script>
 
 <div class="step" style:--index={index}>
     <div class="step__card grid">
-        {#if image}
-            <Image
-                class="image shadow-box-dark"
-                id={image.id}
-                sizeKey="photo-grid"
-                sizes={{
-                    small: { width: 400 },
-                    medium: { width: 600 },
-                }}
-                ratio={imageRatio}
-                alt={image.title}
-            />
+        {#if image || video}
+        <div class="media">
+            {#if image}
+                <Image
+                    class="image shadow-box-dark"
+                    id={image.id}
+                    sizeKey="product"
+                    sizes={{
+                        small: { width: 400 },
+                        medium: { width: 600 },
+                        large: { width: 800 },
+                    }}
+                    ratio={imageRatio}
+                    alt={image.title}
+                />
+            {:else if video}
+                <video autoplay muted loop playsinline allow="autoplay">
+                    <source type="video/mp4" src={getAssetUrlKey(video.mp4, 'step')} />
+                    <source type="video/webm" src={getAssetUrlKey(video.webm, 'step')} />
+                    <track kind="captions" />
+                </video>
+            {/if}
+        </div>
         {/if}
 
         <div class="content">

src/routes/about/+page.server.ts

@@ -42,11 +42,14 @@ export const load: PageServerLoad = async () => {
                 process_steps {
                     title
                     text
+                    media_type
                     image {
                         id
                         title
                         width, height
                     }
+                    video_mp4 { id }
+                    video_webm { id }
                 }
                 process_intention
 

src/routes/about/+page.svelte

@@ -19,6 +19,7 @@
     import AboutGridPhoto from '$components/atoms/AboutGridPhoto.svelte'
     import Heading from '$components/molecules/Heading.svelte'
     import ProcessStep from '$components/molecules/ProcessStep.svelte'
+    import InteractiveGlobe2 from '$components/organisms/InteractiveGlobe2.svelte'
     import ShopModule from '$components/organisms/ShopModule.svelte'
     import NewsletterModule from '$components/organisms/NewsletterModule.svelte'
 
@@ -262,11 +263,19 @@
                 <p class="text-normal">{about.process_subtitle}</p>
             </div>
 
-            <div class="steps" bind:this={stepsEl}
+            <div class="steps grid" bind:this={stepsEl}
                 style:--cards-amount={about.process_steps.length}
             >
                 {#each about.process_steps as step, index}
-                    <ProcessStep {...step} index={index} />
+                    <ProcessStep
+                        {...step}
+                        index={index}
+                        image={step.image ?? undefined}
+                        video={step.video_mp4 && step.video_webm ? {
+                            mp4: step.video_mp4.id,
+                            webm: step.video_webm.id
+                        } : undefined}
+                    />
                 {/each}
             </div>
 

src/style/molecules/_process-step.scss

@@ -21,12 +21,13 @@
     }
 
     // Image
-    :global(.image) {
+    .media {
         position: relative;
         z-index: 2;
         display: block;
         overflow: hidden;
         width: 70%;
+        max-height: 580px;
         margin: 0 auto 64px;
         border-radius: 6px;
 
@@ -38,12 +39,20 @@
             margin-bottom: 0;
         }
 
-        :global(img) {
+        video, :global(.image) {
             display: block;
-            width: 100%;
             height: 100%;
+            width: 100%;
             object-fit: cover;
         }
+        :global(.image) {
+            :global(img) {
+                display: block;
+                width: 100%;
+                height: 100%;
+                object-fit: cover;
+            }
+        }
     }
 
     // Content
@@ -90,7 +99,7 @@
 
     // Alternate content order
     &:nth-child(even) {
-        :global(.image) {
+        .media {
             @include bp (sm) {
                 grid-column: 2 / span 7;
             }

src/style/pages/_about.scss

@@ -262,12 +262,6 @@
             margin: 128px 0 0;
         }
 
-        .container {
-            @include bp (mob-lg, max) {
-                padding: 0 8px;
-            }
-        }
-
         .title {
             grid-column: 1 / -1;
             max-width: 400px;
@@ -307,12 +301,14 @@
             }
 
             & > :global(*) {
+                grid-column: 1 / -1;
                 position: sticky;
                 top: var(--card-margin);
+                transform-origin: center top;
                 padding-top: calc(var(--index) * var(--card-offset));
                 padding-bottom: var(--card-margin);
                 margin-bottom: calc(-1 * var(--index) * var(--card-offset));
-                transform-origin: center top;
+                will-change: transform;
             }
         }
 
@@ -342,6 +338,14 @@
                 width: clamp(250px, 75%, 562px);
                 margin: 0 auto;
             }
+
+            :global(.globe) {
+                margin-bottom: 32px;
+
+                @include bp (sm) {
+                    margin-bottom: 40px;
+                }
+            }
         }
     }
 
@@ -360,12 +364,16 @@
 
         .container-wide {
             overflow: hidden;
+
+            @include bp (sm, max) {
+                width: 100%;
+            }
         }
 
         .photos-grid {
             display: grid;
             grid-template-columns: repeat(5, 1fr);
-            gap: 12px;
+            gap: 1.75vw;
             margin: -5% -5% 0;
             transform: rotate(-6deg) translateY(var(--parallax-y)) translateZ(0);
             transition: transform 0.8s var(--ease-quart);