✨ Use map function to define the side margins on Photos page

Also defines the amount of viewport from the screen width to height ratio for small screens

Merci @sixclones et @raphael! (devs slack)

src/routes/photos.svelte

@@ -7,7 +7,7 @@
     import { quartOut } from 'svelte/easing'
     import dayjs from 'dayjs'
     import relativeTime from 'dayjs/plugin/relativeTime.js'
-    import { clamp, lerp } from '$utils/functions'
+    import { map, lerp } from '$utils/functions'
     // Components
     import Metas from '$components/Metas.svelte'
     import IconEarth from '$components/atoms/IconEarth.svelte'
@@ -30,6 +30,7 @@
     let buttonReset: HTMLElement
     let buttonShuffle: HTMLElement
     let scrollY: number
+    let innerWidth: number, innerHeight: number
 
     // Filters
     const urlFiltersParams = new URLSearchParams()
@@ -49,10 +50,10 @@
 
     // Container margins
     let scrollProgress: number
-    let sideMargins: number = 6
+    let sideMargins: number = 8
     $: if (browser && window.innerWidth >= 768) {
-        // TODO: Define this value to be 1 past 1.5 viewport
-        scrollProgress = clamp(scrollY / (window.innerHeight * 1.5), 0, 1)
+        const viewportScroll = innerHeight / innerWidth <= 0.6 ? innerHeight * 1.5 : innerHeight
+        scrollProgress = map(scrollY, 0, viewportScroll, 0, 1, true)
         sideMargins = lerp(8, 30, scrollProgress)
     }
 
@@ -168,7 +169,7 @@
     image=""
 />
 
-<svelte:window bind:scrollY />
+<svelte:window bind:scrollY bind:innerWidth bind:innerHeight />
 
 
 <main class="photos">