fix: improve splash homepage layout and touch behavior on mobile

Author: D3SOX

src/components/Hero.astro

@@ -86,6 +86,7 @@ const imageAttrs = {
 			gap: clamp(1.5rem, calc(1rem + 2vw), 2.5rem);
 			padding-block: clamp(2rem, calc(1rem + 8vmin), 6rem);
 			text-align: center;
+			overflow-x: clip;
 		}
 
 		.hero-logo-glow {
@@ -104,7 +105,7 @@ const imageAttrs = {
 		}
 
 		.hero-logo-glow__halo {
-			inset: -35% -20%;
+			inset: -22% -6%;
 			background: radial-gradient(
 				ellipse at center,
 				color-mix(in srgb, var(--sl-color-accent) 55%, transparent) 0%,

src/components/SplashBackground.astro

@@ -20,6 +20,7 @@
 		const CENTER_X = 0.5;
 		const CENTER_Y = 0.4;
 		const RETURN_DELAY_MS = 450;
+		const finePointer = window.matchMedia('(hover: hover) and (pointer: fine)');
 
 		const state = {
 			targetX: CENTER_X,
@@ -67,14 +68,25 @@
 			root.style.setProperty('--otx-grid-shift-y', `${dy * 18}px`);
 		};
 
-		const onPointerMove = (event) => {
+		const updateTarget = (event) => {
 			cancelReturn();
 			state.pointerInside = true;
 			state.targetX = event.clientX / window.innerWidth;
 			state.targetY = event.clientY / window.innerHeight;
 		};
 
+		const onPointerMove = (event) => {
+			if (event.pointerType === 'touch' && !event.isPrimary) return;
+			updateTarget(event);
+		};
+
+		const onPointerDown = (event) => {
+			if (event.pointerType !== 'touch') return;
+			updateTarget(event);
+		};
+
 		const onPointerLeave = () => {
+			if (!finePointer.matches || !state.pointerInside) return;
 			scheduleReturn();
 		};
 
@@ -90,8 +102,17 @@
 			requestAnimationFrame(tick);
 		};
 
-		document.documentElement.addEventListener('pointerleave', onPointerLeave);
 		window.addEventListener('pointermove', onPointerMove, { passive: true });
+		window.addEventListener('pointerdown', onPointerDown, { passive: true });
+		if (finePointer.matches) {
+			document.documentElement.addEventListener('pointerleave', onPointerLeave);
+		} else {
+			const preventPinchZoom = (event) => {
+				if (event.touches.length > 1) event.preventDefault();
+			};
+			document.addEventListener('touchmove', preventPinchZoom, { passive: false });
+			document.addEventListener('gesturestart', (event) => event.preventDefault());
+		}
 		setVars();
 		requestAnimationFrame(tick);
 	}

src/content/docs/index.mdx

@@ -4,6 +4,10 @@ description: Privacy-first desktop YouTube player.
 head:
   - tag: title
     content: OpenTubeX
+  - tag: meta
+    attrs:
+      name: viewport
+      content: width=device-width, initial-scale=1, maximum-scale=1, user-scalable=no
 template: splash # Remove or comment out this line to display the site sidebar on this page.
 hero:
   image:

src/styles/splash.css

@@ -13,6 +13,12 @@ html[data-has-hero] {
 	--otx-orb-3-y: 0%;
 	--otx-grid-shift-x: 0px;
 	--otx-grid-shift-y: 0px;
+	touch-action: manipulation;
+	overflow-x: clip;
+}
+
+html[data-has-hero] body {
+	overflow-x: clip;
 }
 
 html[data-has-hero] .page {
@@ -336,6 +342,68 @@ html[data-has-hero] .main-frame :is(a, button, input, select, textarea, label, [
 		width: 1.25rem;
 		height: 1.25rem;
 	}
+
+	.splash-hotspot {
+		left: clamp(1rem, var(--hotspot-x), calc(100% - 1rem));
+		top: clamp(calc(var(--sl-nav-height) + 0.75rem), var(--hotspot-y), calc(100% - 1rem));
+	}
+
+	.splash-bg__grid {
+		inset: 0;
+		transform: none;
+	}
+
+	html[data-has-hero] {
+		--sl-content-width: 100%;
+	}
+
+	html[data-has-hero] main {
+		padding-bottom: 0;
+	}
+
+	html[data-has-hero] .content-panel {
+		padding-block: 0.5rem 0;
+	}
+
+	html[data-has-hero] .sl-container {
+		width: 100%;
+		min-width: 0;
+	}
+
+	html[data-has-hero] .sl-markdown-content,
+	html[data-has-hero] .content-panel footer {
+		display: none;
+	}
+
+	html[data-has-hero] .hero.splash-hero {
+		min-height: calc(100dvh - var(--sl-nav-height));
+		padding-block: 0.75rem 1rem;
+		gap: 0.85rem;
+		justify-content: center;
+	}
+
+	html[data-has-hero] .hero-logo-glow {
+		width: min(84vw, 20rem);
+	}
+
+	html[data-has-hero] .hero-logo-glow__halo {
+		inset: -16% -4%;
+		filter: blur(32px);
+	}
+
+	html[data-has-hero] .hero-logo-glow__core {
+		inset: -2% 8%;
+		filter: blur(16px);
+	}
+
+	html[data-has-hero] .tagline {
+		font-size: var(--sl-text-sm);
+		line-height: 1.45;
+	}
+
+	html[data-has-hero] .actions {
+		gap: 0.65rem 0.85rem;
+	}
 }
 
 @media (prefers-reduced-motion: reduce) {