feat: add basic layout

package.json

@@ -13,6 +13,7 @@
 		"format": "prettier --plugin-search-dir . --write ."
 	},
 	"devDependencies": {
+		"@fontsource/inter": "^5.0.8",
 		"@sveltejs/adapter-static": "^2.0.3",
 		"@sveltejs/kit": "^1.20.4",
 		"@typescript-eslint/eslint-plugin": "^5.45.0",

src/lib/ui/Layout.svelte

@@ -0,0 +1,27 @@
+<div>
+	<header>
+		<slot name="header" />
+	</header>
+
+	<main>
+		<slot name="main" />
+	</main>
+
+	<footer>
+		<slot name="footer" />
+	</footer>
+</div>
+
+<style>
+	div {
+		display: flex;
+		flex-direction: column;
+		width: 100%;
+		height: 100%;
+	}
+
+	main {
+		overflow-y: scroll;
+		height: 100%;
+	}
+</style>

src/lib/ui/css/main.css

@@ -0,0 +1,27 @@
+@import '@fontsource/inter/500.css';
+@import '@fontsource/inter/700.css';
+
+body {
+	margin: 0;
+}
+
+html,
+body {
+	height: 100%; /* See https://developer.chrome.com/blog/url-bar-resizing/ */
+}
+
+body,
+input,
+button {
+	font-family: 'Inter', Arial, Helvetica, sans-serif;
+	color: #2f2f2f;
+}
+
+/* prettier-ignore */
+html, body, div, article, aside, section, main, nav, footer, header, form,
+fieldset, label, legend, pre, code, a, h1, h2, h3, h4, h5, h6, p, ul, ol, li, dl, dt,
+dd, blockquote, figcaption, figure, textarea, table, td, th, tr,
+input[type="email"], input[type="date"], input[type="number"], input[type="password"],
+input[type="tel"], input[type="text"], input[type="url"] {
+  box-sizing: border-box;
+}

src/routes/+layout.svelte

@@ -0,0 +1,5 @@
+<slot />
+
+<style>
+	@import '$lib/ui/css/main.css';
+</style>

src/routes/timetables/[line]/[stop]/+page.svelte

@@ -1,5 +1,12 @@
 <script lang="ts">
-	import { page } from "$app/stores";
+	import { page } from '$app/stores';
+	import Layout from '$lib/ui/Layout.svelte';
 </script>
 
-<p>{$page.params.stop} ({$page.params.line})</p>
+<Layout>
+	<div slot="header">
+		header {$page.params.stop} ({$page.params.line})
+	</div>
+	<div slot="main">main</div>
+	<div slot="footer">footer</div>
+</Layout>