<script lang="ts">
	import favicon from '$lib/assets/favicon.ico';
	//TODO - make function to handle what stylesheet is used
	import '$lib/styles/base.scss';

	import Title from '$lib/components/title.svelte';
	import Billboard from '$lib/components/billboard.svelte';
	import Blinkies from '$lib/components/blinkies.svelte';
	import Banners from '$lib/components/banners.svelte';

	import Nav from '$lib/components/nav.svelte';

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

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

<header>
	<Title />
	<Billboard />
	<Blinkies />
</header>

<main>
	<Nav />
	{@render children?.()}
</main>

<div class="invisible">
<Banners />
</div>
<footer>
	<Banners />
</footer>

<style lang="scss">
	@use '$lib/styles/variables' as vars;

	main {
		border: 1px dashed vars.$base-colour;
		width: 800px;
		margin: 0 auto;
		box-sizing: border-box;
		padding: 1em;
	}

	footer {
		position: fixed;
		bottom: 0;
	}
	.invisible {
		visibility: hidden;
	}
</style>
