Layout and sizing changes

src/lib/config.ts

@@ -9,5 +9,10 @@ export const games: GamesObj = {
 		name: 'Paku biiti',
 		image: '',
 		description: 'Sorteeri kolme suvalise muusika albumi pealkiri, artistid ja pilt.'
+	},
+	'': {
+		name: 'More soonTM',
+		image: '',
+		description: ''
 	}
 };

src/routes/(games)/(singlescreen)/+layout.svelte

@@ -1,7 +0,0 @@
-<script lang="ts">
-	let { children } = $props();
-</script>
-
-<div class="container flex min-h-screen flex-col items-center justify-center py-4">
-	{@render children()}
-</div>

src/routes/(games)/pakubiiti/+page.svelte

@@ -48,7 +48,7 @@
 			>
 				{#each { length: 3 }}
 					{#if i < 2}
-						<Skeleton class="h-[6rem] w-full rounded-xl border border-primary/5" />
+						<Skeleton class="h-[5rem] w-full rounded-xl border border-primary/5" />
 					{:else}
 						<Skeleton class="aspect-square h-auto max-w-full rounded-xl object-cover" />
 					{/if}
@@ -93,9 +93,9 @@
 	</AlertDialog.Content>
 </AlertDialog.Root>
 
-<header class="font-title mb-24 flex flex-col items-center">
+<header class="font-title mb-12 flex flex-col items-center">
-	<h1 class="mb-1 scroll-m-20 text-6xl font-extrabold tracking-tight lg:text-7xl">Paku biiti</h1>
+	<h1 class="mb-1 scroll-m-20 text-5xl font-extrabold tracking-tight lg:text-6xl">Paku biiti</h1>
-	<p class="text-2xl font-semibold text-muted-foreground">
+	<p class="text-xl font-semibold text-muted-foreground">
 		Lohista kokku õiged albumi <span class="text-red-600 dark:text-red-400">nimed</span>,
 		<span class="text-purple-600 dark:text-purple-400">artistid</span> ja
 		<span class="text-blue-600 dark:text-blue-400">pildid</span>.
@@ -112,7 +112,7 @@
 			{#await data.streamed.albums}
 				<div
 					class="grid w-full gap-4"
-					in:fade={{ duration: 150, delay: 150, easing: expoIn }}
+					in:fade={{ duration: 150, easing: expoIn }}
 					out:fade={{ duration: 150, easing: expoOut }}
 				>
 					{@render playArea(undefined, true)}

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

@@ -1,7 +0,0 @@
-<script lang="ts">
-	let { children } = $props();
-</script>
-
-<div class="container mt-32 flex flex-col items-center py-4">
-	{@render children()}
-</div>

src/routes/+layout.svelte

@@ -34,21 +34,23 @@
 
 <ModeWatcher />
 
-<header class="absolute top-0 flex w-full justify-between px-8 py-6">
+<header class="container flex w-full items-center justify-between px-8 py-6">
 	<a href="/">
-		<img src="/favicon.svg" alt="Mihkel Martin Kasterpalu logo" class="h-10" />
+		<img src="/favicon.svg" alt="Mihkel Martin Kasterpalu logo" class="h-9" />
 	</a>
-	<Button onclick={() => cycleTheme()} variant="outline" size="icon">
+	<Button onclick={() => cycleTheme()} variant="ghost" size="icon" class="h-12 w-12">
 		{#if theme === 'dark'}
-			<Moon class="absolute h-[1.2rem] w-[1.2rem]" />
+			<Moon class="!h-6 !w-6" />
 		{:else if theme === 'light'}
-			<Sun class="h-[1.2rem] w-[1.2rem] " />
+			<Sun class="!h-6 !w-6" />
 		{:else}
-			<LaptopMinimal class="h-[1.2rem] w-[1.2rem]" />
+			<LaptopMinimal class="!h-6 !w-6" />
 		{/if}
 
 		<span class="sr-only">Toggle theme</span>
 	</Button>
 </header>
 
-{@render children()}
+<div class="container flex flex-col items-center">
+	{@render children()}
+</div>

src/routes/+page.svelte

@@ -12,13 +12,13 @@
 	<meta property="og:image" content={baseURL + '/favicon.svg'} />
 </svelte:head>
 
-<header class="mb-24 flex flex-col items-center font-title">
+<header class="font-title mb-24 flex flex-col items-center">
-	<h1 class="mb-1 scroll-m-20 text-6xl font-extrabold tracking-tight lg:text-7xl">
+	<h1 class="mb-1 scroll-m-20 text-5xl font-extrabold tracking-tight lg:text-6xl">
 		stuff.kasterpalu.ee
 	</h1>
-	<p class="text-2xl font-semibold text-muted-foreground">Minimängud ja muud huvitavat</p>
+	<p class="text-xl font-semibold text-muted-foreground">Minimängud ja muud huvitavat</p>
 </header>
-<main class="grid w-full max-w-4xl justify-items-center">
+<main class="grid w-full max-w-4xl justify-items-center gap-y-8 lg:grid-cols-2">
 	{#each Object.entries(games) as [href, { image, name }]}
 		<a
 			class="shadow-sharp flex aspect-[4/1] w-full max-w-sm items-center justify-center rounded-xl border-2 border-current bg-contain bg-no-repeat transition-all"