refactor: create layout groups

src/lib/Spinner.svelte

@@ -1,22 +0,0 @@
-<script>
-	import { IconSpiral } from '@tabler/icons-svelte';
-	export let size = 32;
-</script>
-
-<div class="spinner"><IconSpiral {size} class="spinner-icon" /></div>
-
-<style>
-	.spinner {
-		text-align: center;
-	}
-
-	:global(.spinner-icon) {
-		animation: spin 1s linear infinite;
-	}
-
-	@keyframes spin {
-		100% {
-			transform: rotate(360deg);
-		}
-	}
-</style>

src/lib/TestCard.svelte

@@ -7,7 +7,7 @@
 	import { createEventDispatcher } from 'svelte';
 	const dispatch = createEventDispatcher<{ focus: void }>();
 
-	export let full = false;
+	export let bg = false;
 
 	let sizes = {
 		blockSize: 64,
@@ -28,7 +28,7 @@
 <!-- svelte-ignore a11y-no-static-element-interactions -->
 <div
 	class="test-card"
-	class:full
+	class:bg
 	style="--block-size: {sizes.blockSize}px;
 				 --horizontal-margin: {sizes.horizontalMargin}px;
 				 --vertical-margin: {sizes.verticalMargin}px;
@@ -38,7 +38,7 @@
          --left-column: {leftColumn};"
 	on:dblclick={() => dispatch('focus') && document.body.requestFullscreen()}
 >
-	<BackgroundGrid on:change={(ev) => (sizes = ev.detail)} subdued={!full} />
+	<BackgroundGrid on:change={(ev) => (sizes = ev.detail)} subdued={bg} />
 
 	<div class="axes">
 		<Axes />
@@ -141,7 +141,7 @@
 		}
 	}
 
-	.test-card:not(.full) {
+	.test-card.bg {
 		& .info,
 		& .column,
 		& .axes,

src/routes/(fullscreen)/+layout.svelte

@@ -3,6 +3,7 @@
 </script>
 
 <a href="/" class="hide-idle"><i class="ti ti-arrow-back"></i> {$i18n.t('Back')}</a>
+<slot />
 
 <style>
 	a {
@@ -22,5 +23,7 @@
 		align-items: center;
 
 		text-decoration: none;
+
+		z-index: 99;
 	}
 </style>

src/routes/(fullscreen)/card/+page.svelte

@@ -0,0 +1,5 @@
+<script>
+	import TestCard from '$lib/TestCard.svelte';
+</script>
+
+<TestCard />

src/routes/(pages)/+layout.svelte

@@ -0,0 +1,50 @@
+<script lang="ts">
+	import TestCard from '$lib/TestCard.svelte';
+	import { page } from '$app/stores';
+	import { goto } from '$app/navigation';
+	import { i18n } from '$lib/i18n';
+</script>
+
+<TestCard bg on:focus={() => goto('/card')} />
+<main class:sub={!$page.data.root}>
+	<a href=".." class="button button-back"><i class="ti ti-arrow-back" />{$i18n.t('Back')}</a>
+	<slot />
+</main>
+
+<style>
+	main {
+		position: absolute;
+		top: 50%;
+		left: 50%;
+		transform: translate(-50%, -50%);
+		background: rgba(0, 0, 0, 0.8);
+		border-radius: 0.5rem;
+		border: 1px solid white;
+
+		padding: 1rem;
+
+		display: flex;
+		flex-direction: column;
+	}
+
+	main.sub {
+		height: 90vh;
+		width: 90vw;
+	}
+
+	.button-back {
+		position: absolute;
+		top: 1rem;
+		right: 1rem;
+
+		opacity: 0.66;
+		transition: opacity 0.3s;
+		&:hover {
+			opacity: 1;
+		}
+	}
+
+	main:not(.sub) .button-back {
+		display: none;
+	}
+</style>

src/routes/(pages)/+page.svelte

@@ -1,5 +1,5 @@
 <script>
-	import { version } from '../../package.json';
+	import { version } from '../../../package.json';
 	import { i18n } from '$lib/i18n';
 </script>
 

src/routes/+layout.svelte

@@ -4,11 +4,7 @@
 	import '@fontsource/b612/700.css';
 	import '@tabler/icons-webfont/tabler-icons.css';
 	import '../index.css';
-	import TestCard from '$lib/TestCard.svelte';
-	import { page } from '$app/stores';
 	import { onMount } from 'svelte';
-	import { goto } from '$app/navigation';
-	import { i18n } from '$lib/i18n';
 
 	let idleTimeout: NodeJS.Timeout | undefined;
 	onMount(() => {
@@ -20,53 +16,11 @@
 			}, 3000);
 		});
 	});
-
-	$: onlyCard = $page.data.card;
 </script>
 
-<TestCard full={onlyCard} on:focus={() => goto('/card')} />
-<main class:content={!onlyCard} class:sub={!$page.data.root && !onlyCard}>
-	<a href=".." class="button button-back"><i class="ti ti-arrow-back" />{$i18n.t('Back')}</a>
 <slot />
-</main>
 
 <style>
-	main.content {
-		position: absolute;
-		top: 50%;
-		left: 50%;
-		transform: translate(-50%, -50%);
-		background: rgba(0, 0, 0, 0.8);
-		border-radius: 0.5rem;
-		border: 1px solid white;
-
-		padding: 1rem;
-
-		display: flex;
-		flex-direction: column;
-	}
-
-	main.sub {
-		height: 90vh;
-		width: 90vw;
-	}
-
-	.button-back {
-		position: absolute;
-		top: 1rem;
-		right: 1rem;
-
-		opacity: 0.66;
-		transition: opacity 0.3s;
-		&:hover {
-			opacity: 1;
-		}
-	}
-
-	main:not(.sub) .button-back {
-		display: none;
-	}
-
 	:global(.hide-idle) {
 		transition: opacity 1s;
 		opacity: 1;

src/routes/card/+page.ts

@@ -1,7 +0,0 @@
-import type { PageLoad } from './$types';
-
-export const load: PageLoad = () => {
-	return {
-		card: true
-	};
-};