fix: front page

src/lib/components/ui/Main.svelte

@@ -1,26 +1,23 @@
-<main id="main" tabindex="-1">
+<script lang="ts">
+	export let center: boolean | undefined = undefined;
+</script>
+
+<main id="main" class:center={center} tabindex="-1">
 	<div class="wrapper">
 		<slot />
 	</div>
 </main>
 
 <style>
-	main {
-		flex: 1;
-	}
-	@media (min-width: 900px) {
-		main {
-			z-index: 2;
-			max-width: 100%;
-		}
-		.wrapper {
-			border-radius: 6px 0 0 6px;
-		}
+	.center {
+		display: flex;
+		justify-content: center;
+		align-items: center;
 	}
 	.wrapper {
+		border-radius: 4px;
 		background-color: var(--background-color);
 		border: 1px solid var(--border-color);
-		border-right: 0;
 		padding: var(--spacing-4);
 	}
 </style>

src/routes/+layout.svelte

@@ -11,8 +11,10 @@
 	import ProgressBar from '$lib/components/ui/ProgressBar.svelte';
 	import Header from '$lib/components/ui/Header.svelte';
 
-	let routeId: FormatMethodsKeys | 'Playground';
+	let routeId: FormatMethodsKeys | 'Playground' | "/";
+	$: isHomePage = false;
 	const getRouteId = (page: Page<Record<string, string>>): void => {
+		isHomePage = page.route.id === "/";
 		routeId = page.route.id?.replace('/', '') as FormatMethodsKeys;
 		if(browser) {
 			document.querySelector("h1")?.setAttribute("tabIndex", "-1");
@@ -38,7 +40,7 @@
 
 	<Navigation />
 
-	<Main>
+	<Main bind:center={isHomePage}>
 		{#if $navigating}
 			<ProgressBar />
 		{/if}