feat: better documentation styling

src/routes/docs/+layout.svelte

@@ -5,20 +5,28 @@
 
 	import { fly } from 'svelte/transition';
 	import { quintOut } from 'svelte/easing';
+	import Footer from '$lib/components/molecules/Footer.svelte';
 
 	export let data: PageData;
 </script>
 
-<section id="doc-section-main" in:fly={{ y: 10, easing: quintOut, duration: 700 }}>
+<section id="doc-section-main">
 	<div class="menu">
 		<DocsNavTree tree={data.tree} />
 	</div>
 	<slot />
 </section>
+<Footer />
 
 <style lang="scss">
+	#doc-section-main {
+		margin-inline: auto;
+		width: min(90%, 90rem);
+		margin-top: 8rem;
+		margin-bottom: 5rem;
+	}
+
 	.menu {
-		padding: 90px 15px 0px 15px;
 		display: flex;
 		flex-direction: column;
 		gap: 1rem;
@@ -26,9 +34,7 @@
 
 	#doc-section-main {
 		display: grid;
-		grid-template-columns: 300px 3fr;
-
-		height: 100vh;
-		width: 100%;
+		grid-template-columns: 320px 3fr;
+		gap: 3rem;
 	}
 </style>

src/routes/docs/[...slug]/+page.svelte

@@ -16,14 +16,6 @@
 </svelte:head>
 
 <div id="markup-content">
-  <h2 class="title">{data.title}</h2>
-
+  <h1 class="title">{data.title}</h1>
   {@html data.content}
 </div>
-
-<style>
-  h2 {
-    color: var(--white);
-    line-height: 1.6;
-  }
-</style>