<script lang="ts">
	import favicon from '$lib/assets/favicon.svg';

	let { children } = $props();
</script>

<svelte:head>
	<link rel="icon" href={favicon} />
</svelte:head>

<nav>
	<h1>On the Spectrum</h1>
	<ul>
		<li><a href="play">Play</a></li>
		<li><a href="rules">Rules</a></li>
		<li><a href="submit">Submit</a></li>
	</ul>
</nav>

<section>
	{@render children()}
</section>

<style>
	nav {
		display: inline-flex;
		ul {
			list-style: none;
			padding: none;
			display: inline-flex;
			gap: 1rem;
			align-items: end;
			font-size: 1.25rem;
		}
	}
	section {
		display: flex;
		flex-direction: column;
	}
</style>
