<script lang="ts">
	import '../app.postcss';
	import { AppShell, AppBar } from '@skeletonlabs/skeleton';
</script>

<!-- App Shell -->
<AppShell>
	<svelte:fragment slot="header">
		<!-- App Bar -->
		<AppBar gridColumns="grid-cols-3" slotDefault="place-self-center" slotTrail="place-content-end">
			<svelte:fragment slot="lead"
				><strong class="text-xl uppercase"><a href="/">Froth Pages</a></strong></svelte:fragment
			>
			<noscript
				><strong>Hey, you! This page is interactive and currently requires JavaScript!</strong>
				<br />
				Want a non-JS version? Bother
				<a class="anchor" href="https://matrix.to/#/@samme:schizo.cafe">Sam</a> about it!</noscript
			>
			<svelte:fragment slot="trail"
				><a class="anchor" href="https://git.froth.zone/sam/static-pages">Source Code</a
				></svelte:fragment
			>
		</AppBar>
	</svelte:fragment>
	<!-- Page Route Content -->
	<slot />
</AppShell>
