From 4791fe5b139db81f0950b32494e2be9a95badf77 Mon Sep 17 00:00:00 2001
From: =?UTF-8?q?Fe=CC=81lix=20Pe=CC=81ault?= <hello@flayks.com>
Date: Tue, 27 Sep 2022 09:45:27 +0200
Subject: [PATCH] Fix ScrollingTitle parallax on mobile

silly `display: inline-block`!
---
 src/components/atoms/ScrollingTitle.svelte | 10 +++++-----
 1 file changed, 5 insertions(+), 5 deletions(-)

diff --git a/src/components/atoms/ScrollingTitle.svelte b/src/components/atoms/ScrollingTitle.svelte
index acd6127..c617c31 100644
--- a/src/components/atoms/ScrollingTitle.svelte
+++ b/src/components/atoms/ScrollingTitle.svelte
@@ -1,5 +1,6 @@
 <style lang="scss">
-    :global(.scrolling-title) {
+    .scrolling-title {
+        display: inline-block;
         transform: translate3d(var(--parallax-x), 0, 0);
         transition: transform 1.2s var(--ease-quart);
         will-change: transform;
@@ -25,8 +26,8 @@
 
     // Define default values
     $: if (titleEl && !offsetStart && !offsetEnd) {
-        offsetStart = titleEl.offsetTop - innerHeight * 0.75
-        offsetEnd = titleEl.offsetTop + innerHeight * 0.25
+        offsetStart = titleEl.offsetTop - innerHeight * (innerWidth < 768 ? 0.2 : 0.75)
+        offsetEnd = titleEl.offsetTop + innerHeight * (innerWidth < 768 ? 0.5 : 0.5)
     }
 
     // Check if title is larger than viewport to translate it
@@ -34,7 +35,7 @@
 
     // Calculate the parallax value
     $: if (titleEl) {
-        const toTranslate = 100 - innerWidth / titleEl.offsetWidth * 100
+        const toTranslate = 100 - (innerWidth / titleEl.offsetWidth * 100)
         parallax = isLarger ? map(scrollY, offsetStart, offsetEnd, 0, -toTranslate, true) : 0
     }
 
@@ -44,7 +45,6 @@
         $$props.class
     ].join(' ').trim()
 
-
     const revealOptions = animate ? {
         children: '.char',
         animation: { y: ['-105%', 0] },