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>

src/routes/patches/+page.svelte

@@ -21,10 +21,13 @@
 	const debounce = () => {
 		clearTimeout(timeout);
 		timeout = setTimeout(() => {
-			searchTermFiltered = searchTerm?.replace(/\./g, '').replace(/\s/g, '').replace(/-/g, '').toLowerCase()
+			searchTermFiltered = searchTerm
+				?.replace(/\./g, '')
+				.replace(/\s/g, '')
+				.replace(/-/g, '')
+				.toLowerCase();
 		}, 500);
-	}
-
+	};
 
 	function search(patch: Patch) {
 		function checkPkgName(findTerm: string | boolean, array: any) {
@@ -60,8 +63,8 @@
 
 <main>
 	<aside in:fly={{ y: 10, easing: quintOut, duration: 750, delay: 100 }}>
-		<TreeMenu title="Search patches...">
-			<Search bind:searchTerm title="Search patches" on:keyup={debounce} />
+		<TreeMenu>
+			<Search bind:searchTerm bind:searchTermFiltered title="Search patches" on:keyup={debounce} />
 			<span>
 				{#each packages as pkg}
 					<TreeMenuButton bind:current name={pkg} />
@@ -74,7 +77,7 @@
 		{#each patches as patch}
 			{#key current || searchTermFiltered}
 				{#if filterByPackage(current, patch.compatiblePackages) || !current}
-					{#if search(patch) || !searchTerm}
+					{#if search(patch) || !searchTermFiltered}
 						<div in:fly={{ x: 10, easing: quintOut, duration: 750, delay: 100 }}>
 							<PatchCell bind:current {patch} />
 						</div>