<script lang="ts">
	import type { LayoutData } from './$types';
	import './global.css';

	export let data: LayoutData;
</script>

<div class="layout">
	<div class="navigation">
		<nav>
			<a href="/">WebEM Sim ❤</a>
		</nav>
	</div>
	<div class="main">
		<slot />
	</div>
	<footer>
		<span> Made with ❤ by Lynn and Kevin </span>
	</footer>
</div>

<style>
	.navigation {
		nav {
			justify-content: center;
			display: flex;

			a {
				padding: var(--padding);
				font-weight: 900;
				font-size: 2em;
				text-decoration: none;
			}
		}
	}

	.layout {
		width: 100%;
		min-height: 100vh;
		display: flex;
		flex-direction: column;
	}

	.main {
		flex-grow: 1;
	}

	.main,
	.navigation,
	footer {
		display: grid;
		max-width: 100vw;
		overflow: hidden;

		grid-template-columns:
			[full-start] minmax(max(4vmin, var(--gap)), auto)
			[wide-start] minmax(auto, 240px)
			[main-start] min(var(--width), calc(100% - max(8vmin, calc(var(--gap) * 2))))
			[main-end] minmax(auto, 240px)
			[wide-end] minmax(max(4vmin, var(--gap)), auto)
			[full-end];

		& > :global(*) {
			grid-column: main-start/main-end;
			min-width: 0;
		}
	}

	footer {
		padding: var(--padding);
		text-align: center;
	}
</style>
