templates

src/routes/_error.svelte

@@ -2,22 +2,31 @@
 	export let status: number;
 	export let error: Error;
 
-	const dev = process.env.NODE_ENV === 'development';
+	const dev = process.env.NODE_ENV === "development";
 </script>
 
-<style>
-	h1, p {
-		margin: 0 auto;
-	}
+<svelte:head>
+	<title>{status}</title>
+</svelte:head>
+<div id="content">
+	<div>
+		<h1>{status}</h1>
+		<p>{error.message}</p>
+	</div>
 
-	h1 {
-		font-size: 2.8em;
-		font-weight: 700;
-		margin: 0 0 0.5em 0;
-	}
+	{#if dev && error.stack}
+		<pre>{error.stack}</pre>
+	{/if}
+</div>
 
-	p {
-		margin: 1em auto;
+<style lang="scss">
+	div#content {
+		width: 100%;
+		display: grid;
+		place-items: center;
+		div {
+			text-align: center;
+		}
 	}
 
 	@media (min-width: 480px) {
@@ -26,15 +35,3 @@
 		}
 	}
 </style>
-
-<svelte:head>
-	<title>{status}</title>
-</svelte:head>
-
-<h1>{status}</h1>
-
-<p>{error.message}</p>
-
-{#if dev && error.stack}
-	<pre>{error.stack}</pre>
-{/if}

src/routes/_layout.svelte

@@ -1,24 +1,43 @@
 <script lang="ts">
+	export let segment: string | undefined;
+
+	import { onMount } from "svelte";
 	import Navbar from "../components/Navbar.svelte";
+	import { login } from "../components/stores";
+	import { postLogin } from "../lib/api";
+
+	onMount(async () => {
+		try {
+			login.set(await postLogin());
+		} catch (e) {
+			login.set(null);
+		}
+	});
 </script>
 
-<Navbar />
+<Navbar {segment} />
 
 <main>
 	<slot />
 </main>
 
 <style lang="scss">
+	@import url("https://fonts.googleapis.com/css2?family=Fira+Code&display=swap");
+	@font-face {
+		font-family: "Minecraft";
+		src: url("/Minecraft-Regular.otf");
+	}
+	$navbar-padding: 0.75em * 2 + 1em * 2 + 1.4375em;
 	:global(body) {
-		background-color: hsl(236, 10%, 5%);
-		font-family: monospace, "Courier New";
+		background-color: black;
+		font-family: "Fira Code", monospace;
 		color: hsl(30, 20%, 90%);
 	}
 	main {
 		display: flex;
-		flex-direction: column;
+		align-items: stretch;
 		padding: 0.75em;
-		padding-top: 4.67em;
-		min-height: calc(100% - 5.42em);
+		padding-top: $navbar-padding;
+		min-height: calc(100% - #{$navbar-padding} - 0.75em);
 	}
 </style>