Adjust margins/padding

scripts/parse-maps.js

@@ -22,27 +22,27 @@ fs.readdirSync(inputDir).forEach((file) => {
 
 		const contentSet = new Set();
 
-if (Array.isArray(content.routeDetail)) {
+		if (Array.isArray(content.routeDetail)) {
-    content.routeDetail.forEach(item => {
+			content.routeDetail.forEach((item) => {
-        if ((item.type === 'junction' || item.type === 'station') && item.name) {
+				if ((item.type === 'junction' || item.type === 'station') && item.name) {
-            let cleanName = item.name;
+					let cleanName = item.name;
 
-            // Run the replacement in a loop or twice to catch nested noise
+					// Run the replacement in a loop or twice to catch nested noise
-            // e.g., "Reading West Junction" 
+					// e.g., "Reading West Junction"
-            // Pass 1: "Reading West"
+					// Pass 1: "Reading West"
-            // Pass 2: "Reading"
+					// Pass 2: "Reading"
-            let previousName;
+					let previousName;
-            do {
+					do {
-                previousName = cleanName;
+						previousName = cleanName;
-                cleanName = cleanName.replace(noiseRegex, '').trim();
+						cleanName = cleanName.replace(noiseRegex, '').trim();
-            } while (cleanName !== previousName);
+					} while (cleanName !== previousName);
 
-            if (cleanName) {
+					if (cleanName) {
-                contentSet.add(cleanName);
+						contentSet.add(cleanName);
-            }
+					}
-        }
+				}
-    });
+			});
-}
+		}
 
 		mapList.push({
 			routeId: content.routeId || null,
@@ -50,7 +50,7 @@ if (Array.isArray(content.routeDetail)) {
 			routeEnd: content.routeEnd || null,
 			created: content.created || null,
 			checked: content.checked || null,
-			contents: Array.from(contentSet),
+			contents: Array.from(contentSet)
 		});
 	}
 });

src/lib/assets/global.css

@@ -1,17 +1,21 @@
 /* FONTS */
 @font-face {
-    font-family: "urwgothic";
+	font-family: 'urwgothic';
-    src: url("/fonts/urwgothic/urwgothic.woff2") format("woff2"), url("/font/urwgothic/urwgothic.woff") format("woff");
+	src:
-    font-weight: normal;
+		url('/fonts/urwgothic/urwgothic.woff2') format('woff2'),
-    font-style: normal;
+		url('/font/urwgothic/urwgothic.woff') format('woff');
+	font-weight: normal;
+	font-style: normal;
 }
 @font-face {
-    font-family: "urwgothic";
+	font-family: 'urwgothic';
-    src: url("/fonts/urwgothic/urwgothicDemi.woff2") format("woff2"), url("/font/urwgothic/urwgothicDemi.woff") format("woff");
+	src:
-    font-weight: 900;
+		url('/fonts/urwgothic/urwgothicDemi.woff2') format('woff2'),
-    font-style: normal;
+		url('/font/urwgothic/urwgothicDemi.woff') format('woff');
+	font-weight: 900;
+	font-style: normal;
 }
 
 [id] {
-    scroll-margin-top: 100px;
+	scroll-margin-top: 100px;
 }

src/lib/components/RouteRow.svelte

@@ -11,7 +11,7 @@
 		str?.toLocaleLowerCase().trim().replace(/\s+/g, '-') ?? 'unknown';
 </script>
 
-<div class="row-container" id="{slugify(feature.name)}">
+<div class="row-container" id={slugify(feature.name)}>
 	<div class="mileage-col">
 		<span class="miles">{feature.miles + 'm' || ''}</span>
 		<span class="chains">{feature.chains + 'ch' || ''}</span>

src/lib/components/mapIcons/SiteOf.svelte

@@ -6,7 +6,7 @@
 	export let feature: any;
 	export let reversed: boolean;
 
-	const pinSVG: string = `<svg xmlns="http://www.w3.org/2000/svg" xml:space="preserve" viewBox="0 0 256.96 385.14"><path fill="#4fd1d1" d="M128.48 0C57.52 0 0 57.52 0 128.48c0 14.1 2.32 28.12 6.88 41.47l-.01-.01 7.35 17.3c1.63 3.1 3.38 6.14 5.25 9.1l.98 1.68 108.03 187.12 108.03-187.12.98-1.69a128.5 128.5 0 0 0 5.25-9.09l7.34-17.28a128.48 128.48 0 0 0 6.88-41.48C256.96 57.52 199.44 0 128.48 0ZM44.47 49.27l2.52 2.37c7.74 7.3 16.96 12.23 28.02 15.02 4.65 1.17 4.62 1.17 8.11-.34 25.92-11.2 64.61-11.21 91-.03 7.28 3.09 25.1-4.12 36.1-14.58a30.17 30.17 0 0 1 2.43-2.18c.34 0 .47 6.13.19 9.02a49.7 49.7 0 0 1-9.28 24.82l-1.48 2.06.7.94c38.07 51.55-7.45 115.42-60.6 85-1.3-.74-2.45-1.24-2.56-1.12-.2.2-5.5 10.18-9.4 17.68-1.77 3.4-1.41 3.4-3.26-.13-4.77-9.13-9.38-17.71-9.5-17.71-.09 0-1.19.6-2.45 1.32-52.6 30.1-99.04-34.14-60.98-84.34.77-1.02 1.1-1.66.94-1.86-7.67-10.45-11.38-21.86-10.7-32.92zM89.3 88.5a35.62 35.62 0 0 0-15.47 3.91c-35.27 17.48-16.99 71.8 21.65 64.34a35.5 35.5 0 0 0 22.49-14.72c1.26-1.78 1.68-2.21 1.88-1.93.15.2 2.15 3.62 4.44 7.6 4.88 8.42 4.11 7.82 5.91 4.67a554.85 554.85 0 0 1 7.31-12.45c.15-.07.97.91 1.86 2.23 16.1 23.61 52.74 18.48 61.43-8.6 8.53-26.59-16.97-51.8-43.57-43.1-12.12 3.98-20.12 12.66-27.95 30.34l-.69 1.56-1.38-3.14c-8.81-20-22.72-30.88-37.9-30.71zm76.42 18.05c4.34-.12 8.8 1.42 12.33 4.95 11.83 11.83.35 31.55-16.05 27.58-8.43-2.05-13.82-10.73-12.05-19.41 1.64-8.06 8.54-12.91 15.77-13.12zm-75.7.03c8.54-.47 16.98 5.68 17.59 15.6.67 11.03-10.1 19.76-20.84 16.89-12.5-3.34-16.73-18.36-7.72-27.46a16.6 16.6 0 0 1 10.97-5.03zm6.22 4.93c-1.1.08-2.18.56-3 1.54-3.25 3.87 1.28 9.25 5.69 6.75a4.52 4.52 0 0 0 2.22-3.85c0-2.81-2.5-4.6-4.91-4.44zm63.97.07c-3.15.2-5.02 3.3-3.64 6.36 1.05 2.3 4.27 3.26 6.3 1.87 3.77-2.56 2.44-7.96-2.02-8.23a5.19 5.19 0 0 0-.64 0z"/></svg>`
+	const pinSVG: string = `<svg xmlns="http://www.w3.org/2000/svg" xml:space="preserve" viewBox="0 0 256.96 385.14"><path fill="#4fd1d1" d="M128.48 0C57.52 0 0 57.52 0 128.48c0 14.1 2.32 28.12 6.88 41.47l-.01-.01 7.35 17.3c1.63 3.1 3.38 6.14 5.25 9.1l.98 1.68 108.03 187.12 108.03-187.12.98-1.69a128.5 128.5 0 0 0 5.25-9.09l7.34-17.28a128.48 128.48 0 0 0 6.88-41.48C256.96 57.52 199.44 0 128.48 0ZM44.47 49.27l2.52 2.37c7.74 7.3 16.96 12.23 28.02 15.02 4.65 1.17 4.62 1.17 8.11-.34 25.92-11.2 64.61-11.21 91-.03 7.28 3.09 25.1-4.12 36.1-14.58a30.17 30.17 0 0 1 2.43-2.18c.34 0 .47 6.13.19 9.02a49.7 49.7 0 0 1-9.28 24.82l-1.48 2.06.7.94c38.07 51.55-7.45 115.42-60.6 85-1.3-.74-2.45-1.24-2.56-1.12-.2.2-5.5 10.18-9.4 17.68-1.77 3.4-1.41 3.4-3.26-.13-4.77-9.13-9.38-17.71-9.5-17.71-.09 0-1.19.6-2.45 1.32-52.6 30.1-99.04-34.14-60.98-84.34.77-1.02 1.1-1.66.94-1.86-7.67-10.45-11.38-21.86-10.7-32.92zM89.3 88.5a35.62 35.62 0 0 0-15.47 3.91c-35.27 17.48-16.99 71.8 21.65 64.34a35.5 35.5 0 0 0 22.49-14.72c1.26-1.78 1.68-2.21 1.88-1.93.15.2 2.15 3.62 4.44 7.6 4.88 8.42 4.11 7.82 5.91 4.67a554.85 554.85 0 0 1 7.31-12.45c.15-.07.97.91 1.86 2.23 16.1 23.61 52.74 18.48 61.43-8.6 8.53-26.59-16.97-51.8-43.57-43.1-12.12 3.98-20.12 12.66-27.95 30.34l-.69 1.56-1.38-3.14c-8.81-20-22.72-30.88-37.9-30.71zm76.42 18.05c4.34-.12 8.8 1.42 12.33 4.95 11.83 11.83.35 31.55-16.05 27.58-8.43-2.05-13.82-10.73-12.05-19.41 1.64-8.06 8.54-12.91 15.77-13.12zm-75.7.03c8.54-.47 16.98 5.68 17.59 15.6.67 11.03-10.1 19.76-20.84 16.89-12.5-3.34-16.73-18.36-7.72-27.46a16.6 16.6 0 0 1 10.97-5.03zm6.22 4.93c-1.1.08-2.18.56-3 1.54-3.25 3.87 1.28 9.25 5.69 6.75a4.52 4.52 0 0 0 2.22-3.85c0-2.81-2.5-4.6-4.91-4.44zm63.97.07c-3.15.2-5.02 3.3-3.64 6.36 1.05 2.3 4.27 3.26 6.3 1.87 3.77-2.56 2.44-7.96-2.02-8.23a5.19 5.19 0 0 0-.64 0z"/></svg>`;
 </script>
 
 <!--

src/routes/+page.svelte

@@ -4,7 +4,7 @@
 	import { resolve } from '$app/paths';
 
 	let { data }: { data: PageData } = $props();
-    let searchTerm = $state('');
+	let searchTerm = $state('');
 
 	let filteredMaps = $derived(
 		data.maps.filter((m) => {
@@ -12,9 +12,7 @@
 
 			if (m.routeId.toString().includes(term)) return true;
 
-			return m.contents.some(location =>
+			return m.contents.some((location) => location.toLowerCase().includes(term));
-				location.toLowerCase().includes(term)
-			);
 		})
 	);
 
@@ -22,7 +20,7 @@
 		if (typeof window !== 'undefined' && window.navigator.vibrate) {
 			window.navigator.vibrate(pattern);
 		}
-	}
+	};
 
 	const isVerifiedRecently = (dateVal: string | null) => {
 		if (!dateVal) return 'draft';
@@ -52,25 +50,20 @@
 <div class="page-wrapper">
 	<header class="main-header">
 		<div class="brand-container">
-			<img
+			<img src={logo} alt="OwlBoard Logo" class="main-logo" />
-				src={logo}
-				alt="OwlBoard Logo"
-				class="main-logo"
-			/>
 		</div>
 	</header>
 
 	<div class="list-container">
 		<a href="https://owlboard.info" class="button-link">Go to OwlBoard Live Departures & PIS</a>
 
-				<input
+		<input type="text" bind:value={searchTerm} placeholder="Search" class="search-input" />
-					type="text"
-					bind:value={searchTerm}
-					placeholder="Search"
-					class="search-input"
-				/>
 		{#each filteredMaps as map (map.routeId)}
-			<a href={resolve(`/map/${map.routeId.toString().padStart(4, '0')}`)} class="card" onclick={() => vibrate(10)}>
+			<a
+				href={resolve(`/map/${map.routeId.toString().padStart(4, '0')}`)}
+				class="card"
+				onclick={() => vibrate(10)}
+			>
 				<div class="card-top">
 					<span class="route-id">{map.routeId.toString().padStart(4, '0')}</span>
 					<span class="status-badge {isVerifiedRecently(map.checked)}">
@@ -150,7 +143,7 @@
 	.search-input {
 		width: 100%;
 		max-width: 500px;
-		font-family: "urwgothic";
+		font-family: 'urwgothic';
 		margin: auto;
 		height: 40px;
 		padding: 0.8rem 1rem;
@@ -254,14 +247,14 @@
 	}
 
 	.location {
-		font-family: "urwgothic";
+		font-family: 'urwgothic';
 		font-size: 1.23rem;
 		font-weight: 700;
 	}
 
 	.path-arrow {
 		color: #fff;
-		font-family: "urwgothic";
+		font-family: 'urwgothic';
 		font-size: 0.9rem;
 		margin: 0.2rem 0;
 	}

src/routes/manifest.webmanifest/+server.ts

@@ -1,4 +1,4 @@
-import { json } from "@sveltejs/kit";
+import { json } from '@sveltejs/kit';
 import type { RequestHandler } from './$types';
 import logo from '$lib/assets/round-logo.svg';
 import maskableLogo from '$lib/assets/maps-logo-maskable.svg';
@@ -7,39 +7,39 @@ import appleLogo from '$lib/assets/apple-touch-icon.png';
 export const prerender = true;
 
 export const GET: RequestHandler = ({ url }) => {
-    const manifest = {
+	const manifest = {
-        name: "OwlBoard Maps",
+		name: 'OwlBoard Maps',
-        short_name: "OwlBoard Maps",
+		short_name: 'OwlBoard Maps',
-        start_url: "/",
+		start_url: '/',
-        display: "standalone",
+		display: 'standalone',
-        theme_color: "#3c6f79",
+		theme_color: '#3c6f79',
-        background_color: "#3d4952",
+		background_color: '#3d4952',
-        icons: [
+		icons: [
-            {
+			{
-                src: logo,
+				src: logo,
-                sizes: "any",
+				sizes: 'any',
-                type: "image/svg+xml",
+				type: 'image/svg+xml',
-                purpose: "any",
+				purpose: 'any'
-            },
+			},
-            {
+			{
-                src: maskableLogo,
+				src: maskableLogo,
-                sizes: "any",
+				sizes: 'any',
-                type: "image/svg+xml",
+				type: 'image/svg+xml',
-                purpose: "maskable",
+				purpose: 'maskable'
-            },
+			},
-            {
+			{
-                src: appleLogo,
+				src: appleLogo,
-                sizes: "180x180",
+				sizes: '180x180',
-                type: "image/png",
+				type: 'image/png',
-                purpose: "any",
+				purpose: 'any'
-            },
+			}
-        ],
+		]
-    };
+	};
 
-    return json(manifest, {
+	return json(manifest, {
-        headers: {
+		headers: {
-            'Content-Type': 'application/manifest+json',
+			'Content-Type': 'application/manifest+json',
-            'Cache-Control': 'public, max-age=3600',
+			'Cache-Control': 'public, max-age=3600'
-        }
+		}
-    })
+	});
-}
+};

src/routes/map/[slug]/+page.svelte

@@ -80,20 +80,26 @@
 		</div>
 
 		<div class="quick-actions">
-			<button class="icon-btn" on:click={() => (reversed = !reversed)}>
+			<button class="icon-btn" onclick={() => (reversed = !reversed)}>
 				⇄ {reversed ? 'UP' : 'DN'}
 			</button>
-			<button class="icon-btn" on:click={() => (showFilters = !showFilters)}> Settings </button>
+			<button class="icon-btn" onclick={() => (showFilters = !showFilters)}> Settings </button>
 		</div>
 	</header>
 
 	{#if showFilters}
-		<div class="backdrop" on:click={() => (showFilters = false)}></div>
+		<div
+			class="backdrop"
+			role="button"
+			tabindex="0"
+			onclick={() => (showFilters = false)}
+			onkeydown={(e) => (e.key === 'Enter' || e.key === ' ') && (showFilters = false)}
+		></div>
 
 		<div class="filter-drawer" transition:slide>
 			<div class="drawer-header">
 				<h3>Visibility Filters</h3>
-				<button class="close-icon" on:click={() => (showFilters = false)} aria-label="Close">
+				<button class="close-icon" onclick={() => (showFilters = false)} aria-label="Close">
 					<svg
 						viewBox="0 0 24 24"
 						width="20"
@@ -113,7 +119,7 @@
 						<button
 							class="filter-chip"
 							class:active={visibleTypes[type]}
-							on:click={() => toggleFilter(type)}
+							onclick={() => toggleFilter(type)}
 						>
 							{formatLabel(type)}
 						</button>
@@ -156,7 +162,7 @@
 		display: flex;
 		align-items: center;
 		justify-content: space-between;
-		padding: 0.5rem 1rem;
+		padding: 0 0;
 		background: #3c6f79;
 		color: #e1ebeb;
 		gap: 1rem;
@@ -176,6 +182,8 @@
 		justify-content: center;
 		width: 52px;
 		height: 52px;
+		padding-left: 0;
+		margin-left: 0;
 		flex-shrink: 0;
 		transition: all 0.3s ease;
 	}

vite.config.ts

@@ -2,16 +2,14 @@ import { sveltekit } from '@sveltejs/kit/vite';
 import { defineConfig } from 'vite';
 
 export default defineConfig({
-	plugins: [
+	plugins: [sveltekit()],
-		sveltekit(),
-	],
 	build: {
 		assetsInlineLimit: 0,
 		cssCodeSplit: true,
 		sourcemap: false,
 		target: 'esnext',
 		modulePreload: {
-			polyfill: false,
+			polyfill: false
 		}
-	},
+	}
 });