Adapt Globe responsive and disable scroll on touch devices for now

Disabling scroll while finding a solution to only scroll horizontally on mobile

src/components/organisms/InteractiveGlobe.svelte

@@ -151,13 +151,13 @@
                 animation: { y: ['110%', 0] },
                 options: {
                     stagger: 0.04,
-                    duration: 1,
+                    duration: 0.85,
                     threshold: 0,
                 },
             }}
         >
             <SplitText text={hoveredMarker.name} mode="chars" class="name" />
-            <p class="country" in:flySvelte={{ y: 16, duration: 800, easing: quartOut, delay: 900 }}>
+            <p class="country" in:flySvelte={{ y: 16, duration: 800, easing: quartOut, delay: 700 }}>
                 {hoveredMarker.country}
             </p>
         </div>

src/style/modules/_globe.scss

@@ -13,6 +13,11 @@
         left: 50%;
         transform: translateX(-50%) translateZ(0);
         width: var(--width);
+        pointer-events: none;
+
+        @media (hover: hover) {
+            pointer-events: auto;
+        }
 
         // Responsive square padding
         &:after {
@@ -62,6 +67,7 @@
         top: 50%;
         left: 0;
         width: 100%;
+        padding-top: 0.25em;
         overflow: hidden;
         transform: translateY(-50%) translateZ(0);
         pointer-events: none;
@@ -74,16 +80,22 @@
             font-family: $font-serif;
             font-weight: 100;
             letter-spacing: -0.035em;
+            line-height: 0.75;
             color: $color-secondary;
             font-size: clamp(#{rem(88px)}, 20vw, #{rem(320px)});
         }
         .country {
             display: block;
             text-transform: uppercase;
+            margin-top: 2em;
             font-size: rem(14px);
             color: $color-tertiary;
             letter-spacing: 0.1em;
             font-weight: 500;
+
+            @include bp (md) {
+                margin-top: 4em;
+            }
         }
     }
 
@@ -112,27 +124,38 @@
 
         a {
             position: relative;
-            top: -10px;
+            top: -8px;
-            left: -10px;
+            left: -8px;
-            display: block;
-            width: 20px;
-            height: 20px;
             display: flex;
+            width: 16px;
+            height: 16px;
             align-items: center;
             justify-content: center;
             text-decoration: none;
             color: $color-secondary;
             pointer-events: auto;
 
+            @include bp (md) {
+                top: -10px;
+                left: -10px;
+                width: 20px;
+                height: 20px;
+            }
+
             // Dot
             i {
                 display: block;
-                width: 10px;
+                width: 6px;
-                height: 10px;
+                height: 6px;
                 border-radius: 32px;
                 background: $color-secondary;
                 transition: box-shadow 0.4s var(--ease-quart), transform 0.4s var(--ease-quart);
                 transform-origin: 50% 50%;
+
+                @include bp (md) {
+                    width: 10px;
+                    height: 10px;
+                }
             }
             // Name
             span {
@@ -142,7 +165,11 @@
             // Hover: Grow marker outline
             &:hover {
                 i {
-                    box-shadow: 0 0 0 10px rgba($color-tertiary, 0.25);
+                    box-shadow: 0 0 0 8px rgba($color-tertiary, 0.25);
+
+                    @include bp (md) {
+                        box-shadow: 0 0 0 10px rgba($color-tertiary, 0.25);
+                    }
                 }
             }
         }