style: mobile prototype

vizchitra · Feb 14, 2025 · eddba3b · eddba3b
1 parent 12f9e48
commit eddba3b
Show file tree

Hide file tree

Showing 3 changed files with 97 additions and 24 deletions.
diff --git a/src/lib/components/BannerPolygon.svelte b/src/lib/components/BannerPolygon.svelte
@@ -25,9 +25,11 @@
 	}
 
 	const POINT_COUNT = 150;
+	const MOBILE_POINT_COUNT = 50;
 	const CURSOR_SIZE = 24;
 	const CURSOR_TIMEOUT = 10000;
 	const UPDATE_INTERVAL = 16;
+	const MOBILE_BREAKPOINT = 768;
 	const colors = [
 		'#ee88b3', // pink
 		'#a8bdf0', // light blue
@@ -36,6 +38,9 @@
 		'#f89f72' // light salmon
 	];
 
+	const getPointCount = () =>
+		window.innerWidth < MOBILE_BREAKPOINT ? MOBILE_POINT_COUNT : POINT_COUNT;
+
 	const staticPoints: Point[] = Array.from({ length: POINT_COUNT }, () => ({
 		x: Math.random() * (typeof window !== 'undefined' ? window.innerWidth : 1000),
 		y: Math.random() * (typeof window !== 'undefined' ? window.innerHeight : 1000)
@@ -104,6 +109,30 @@
 		updateDataWithCursors();
 	}
 
+	function handleTouchMove(event: TouchEvent) {
+		event.preventDefault();
+		const touch = event.touches[0];
+		if (!touch) return;
+
+		const rect = canvas.getBoundingClientRect();
+		const x = touch.clientX - rect.left;
+		const y = touch.clientY - rect.top;
+
+		cursorX = x;
+		cursorY = y;
+
+		if (socket?.readyState === WebSocket.OPEN) {
+			socket.send(
+				JSON.stringify({
+					x: x / width,
+					y: y / height
+				})
+			);
+		}
+
+		updateDataWithCursors();
+	}
+
 	function findIntersections(cells: any[]) {
 		const cursorCells = cells.slice(0, Object.keys(otherCursors).length + 1);
 		const vertices = new Map<string, { x: number; y: number }>();
@@ -259,8 +288,10 @@
 	bind:clientWidth={width}
 	bind:clientHeight={height}
 	on:mousemove={handleMouseMove}
+	on:touchmove|preventDefault={handleTouchMove}
+	on:touchstart|preventDefault={handleTouchMove}
 	role="banner"
-	class="relative h-screen cursor-none"
+	class="relative h-[100svh] cursor-none"
 >
 	<canvas bind:this={canvas} {width} {height} class="absolute inset-0 h-full w-full" />
 
@@ -299,6 +330,9 @@
 		left: 0;
 		pointer-events: none;
 		will-change: transform;
+		@media (max-width: 768px) {
+			display: none;
+		}
 	}
 
 	:global(.cursor-icon) {
@@ -356,4 +390,20 @@
 	.relative {
 		cursor: none;
 	}
+
+	@media (max-width: 768px) {
+		.cursor-info {
+			font-size: 0.5rem;
+			left: 12px;
+			padding: 0.05rem 0.15rem;
+		}
+
+		.flag {
+			font-size: 0.75rem;
+		}
+
+		.location {
+			font-size: 0.5rem;
+		}
+	}
 </style>
diff --git a/src/routes/+layout.svelte b/src/routes/+layout.svelte
@@ -51,4 +51,10 @@
 			padding: 12px 0;
 		}
 	}
+
+	@media (max-width: 768px) {
+		main {
+			max-width: 100%;
+		}
+	}
 </style>
diff --git a/src/routes/+page.svelte b/src/routes/+page.svelte
@@ -10,85 +10,95 @@
 <svelte:head>
 	<title>Home</title>
 	<meta name="description" content="Svelte demo app" />
+	<meta
+		name="viewport"
+		content="width=device-width, initial-scale=1.0, maximum-scale=1.0, user-scalable=no"
+	/>
 </svelte:head>
 
 <div class="banner-container full-bleed relative">
 	<BannerPolygon />
 	<div
-		class="logo-container pointer-events-none absolute top-1/2 left-1/2 mb-2 flex -translate-x-1/2 -translate-y-1/2 items-center gap-0 rounded-md bg-white px-8 py-4 shadow-lg"
+		class="logo-container pointer-events-none absolute top-1/2 left-1/2 mb-2 flex max-w-[90vw] -translate-x-1/2 -translate-y-1/2 flex-col items-center gap-4 rounded-md bg-white px-4 py-4 shadow-lg md:max-w-none md:flex-row md:gap-0 md:px-8"
 	>
-		<div class="logo w-[150px]">
+		<div class="logo w-[120px] md:w-[150px]">
 			{@html VizchitraLogo}
 		</div>
 
 		<h3
-			class="tagline max-w-[20ch] border-l-2 border-black pl-5 text-[1.6rem] leading-none uppercase"
+			class="tagline max-w-[20ch] border-black text-center text-[1.2rem] leading-none uppercase md:border-l-2 md:pl-5 md:text-left md:text-[1.6rem]"
 		>
 			{#each formatSlantedText('A SPACE TO CONNECT AND CREATE WITH DATA') as letter}
-				<span class="slanted-text text-[24px]" style="--letter-slant: {letter.slant}">
+				<span
+					class="slanted-text text-[18px] md:text-[24px]"
+					style="--letter-slant: {letter.slant}"
+				>
 					{letter.letter}
 				</span>
 			{/each}
 		</h3>
 	</div>
 </div>
 
-<div class="mt-20 flex flex-col items-start gap-10">
+<div class="mt-10 flex flex-col items-start gap-6 px-4 md:mt-20 md:gap-10 md:px-0">
 	<div class="content flex flex-col gap-2">
-		<h2 class="font-display font-bold">OUR MISSION</h2>
+		<h2 class="font-display text-[1.5rem] font-bold md:text-[2rem]">OUR MISSION</h2>
 
-		<p class="mb-4 max-w-[55ch] text-[22px]">
+		<p class="mb-4 max-w-[55ch] text-[18px] md:text-[22px]">
 			To foster a vibrant <span class="font-semibold">community of data storytellers in India</span
 			>, bridging technical analysis & design expertise to shape perspectives & drive change
 		</p>
 
-		<p class="mx-auto mb-8">
+		<p class="mx-auto mb-6 text-center md:mb-8">
 			{#each formatSlantedText('AN INDIAN DATA VISUALIZATION COMMUNITY') as letter}
-				<span class="slanted-text text-[24px]" style="--letter-slant: {letter.slant}">
+				<span
+					class="slanted-text text-[18px] md:text-[24px]"
+					style="--letter-slant: {letter.slant}"
+				>
 					{letter.letter}
 				</span>
 			{/each}
 		</p>
 
 		<div class="pillars">
-			<p class="mb-1 max-w-[55ch] text-[22px]">
+			<p class="mb-1 max-w-[55ch] text-[18px] md:text-[22px]">
 				The VizChitra community plans to drive this using these three main pillars of work:
 			</p>
-			<ol>
-				<li class="mb-[8px]">
-					<h3 class="font-display block text-[22px] leading-[1.5] font-bold">
+			<ol class="space-y-4 md:space-y-2">
+				<li>
+					<h3 class="font-display text-[18px] leading-[1.5] font-bold md:text-[22px]">
 						1. Consider & Curate:
 					</h3>
-					<p class="text-[22px]">
+					<p class="text-[16px] md:text-[22px]">
 						Build a rhythm of curated events to spread the practice of data visualisation
 					</p>
 				</li>
-				<li class="mb-[8px]">
-					<h3 class="font-display block text-[22px] leading-[1.5] font-bold">
+				<li>
+					<h3 class="font-display text-[18px] leading-[1.5] font-bold md:text-[22px]">
 						2. Cultivate & Care:
 					</h3>
-					<p class="text-[22px]">
+					<p class="text-[16px] md:text-[22px]">
 						Nurture a fertile space for learning & sharing of data visualisation skills
 					</p>
 				</li>
-				<li class="mb-[8px]">
-					<h3 class="font-display block text-[22px] leading-[1.5] font-bold">
+				<li>
+					<h3 class="font-display text-[18px] leading-[1.5] font-bold md:text-[22px]">
 						3. Create & Collaborate:
 					</h3>
-					<p class="text-[22px]">
+					<p class="text-[16px] md:text-[22px]">
 						Express and co-create to push the boundaries of data visualization
 					</p>
 				</li>
 			</ol>
 		</div>
 
-		<PolygonDivider></PolygonDivider>
+		<PolygonDivider />
 	</div>
 </div>
 
 <style>
 	.banner-container {
-		height: 100vh;
+		height: 100svh;
 		width: 100vw;
 		position: relative;
 	}
@@ -99,11 +109,18 @@
 		position: absolute;
 		left: 0;
 		right: 0;
-		height: 40vh;
+		height: 25vh;
 		pointer-events: none;
 		z-index: 1;
 	}
 
+	@media (min-width: 768px) {
+		.banner-container::before,
+		.banner-container::after {
+			height: 40vh;
+		}
+	}
+
 	.banner-container::before {
 		top: 0;
 		background: linear-gradient(