feat: better documentation styling

src/lib/components/atoms/DocsNavNode.svelte

@@ -5,25 +5,51 @@
 
 <!-- Always part of a list -->
 <li>
-  <div class="doc-section">
-    <a href="/docs/{info.slug}">{info.title}</a>
+  <div class="doc-section item">
+    <a href="/docs/{info.slug}"><h5>{info.title}</h5></a>
   </div>
 </li>
 
+
 <style>
-a {
-  text-decoration: none;
-  background-color: inherit;
-  color: var(--white);
-}
 
-.doc-section {
-	background-color: var(--grey-one);
-	border-radius: 12px;
-	padding: 15px 20px;
-}
+  a {
+    text-decoration: none;
+  }
 
-li {
-  padding-bottom: 0.5rem;
-}
+  li {
+    list-style: none;
+  }
+	.item {
+		padding: 0.6rem 1rem;
+		border-radius: 8px;
+		cursor: pointer;
+		display: flex;
+		align-items: center;
+		gap: 0.6rem;
+		width: 100%;
+		user-select: none;
+		transition: background-color 0.4s var(--bezier-one);
+	}
+
+	.item h5 {
+		color: var(--grey-five);
+		transition: color 0.3s var(--bezier-one);
+	}
+
+	.selected h5 {
+		color: var(--grey-four);
+		transition: color 0.3s var(--bezier-one);
+	}
+
+	.selected {
+		background-color: var(--accent-color);
+	}
+	.item:hover:not(.selected) {
+		background-color: var(--grey-six);
+	}
+
+	.item:not(.selected):hover h5 {
+		color: var(--white);
+	}
 </style>

src/lib/components/atoms/Search.svelte

@@ -1,30 +1,26 @@
 <script lang="ts">
 	export let title: string;
 	export let searchTerm: string | null;
+	export let searchTermFiltered: string | null
 	import { fade } from 'svelte/transition';
 	import { quintOut } from 'svelte/easing';
-	// import { onMount } from 'svelte';
 
-	// let search: HTMLInputElement;
+	function clear() {
+		searchTerm = null;
+		searchTermFiltered = null;
+	}
 
-	// function handleKeydown(event) {
-	// 	if (event.code === 'Slash') {
-	// 		search.focus;
-	// 	}
-	// }
 </script>
 
-<!-- <svelte:window on:keydown={handleKeydown} /> -->
-
 <div>
 	<img src="../icons/search.svg" id="search" alt="Search" />
 	{#if searchTerm}
 		<img
 			src="../icons/close.svg"
 			id="clear"
-			alt="Close"
-			on:click={() => (searchTerm = null)}
-			on:keypress={() => (searchTerm = null)}
+			alt="Clear"
+			on:click={clear}
+			on:keypress={clear}
 			transition:fade|local={{ easing: quintOut, duration: 250 }}
 		/>
 	{/if}

src/lib/components/molecules/DocsNavTree.svelte

@@ -1,39 +1,37 @@
 <script lang="ts">
-  import { is_tree } from '$lib/documentation.shared';
-  import type { DocsTree } from '$lib/documentation.shared';
+	import { is_tree } from '$lib/documentation.shared';
+	import type { DocsTree } from '$lib/documentation.shared';
 
-  import DocsNavNode from '$lib/components/atoms/DocsNavNode.svelte';
+	import DocsNavNode from '$lib/components/atoms/DocsNavNode.svelte';
 
-  export let tree: DocsTree;
-  // How deeply nested this is.
-  export let nested = 0;
+	export let tree: DocsTree;
+	// How deeply nested this is.
+	export let nested = 0;
 </script>
 
 {#if nested}
-  <!-- The index should be part of the `ul` above us. -->
-  <DocsNavNode info={tree.index} />
+	<!-- The index should be part of the `ul` above us. -->
+	<DocsNavNode info={tree.index} />
 {/if}
 
 <ul>
-  {#if !nested}
-    <!-- There is no `ul` above us, so index should go here instead. -->
-    <DocsNavNode info={tree.index} />
-  {/if}
+	{#if !nested}
+		<!-- There is no `ul` above us, so index should go here instead. -->
+		<DocsNavNode info={tree.index} />
+	{/if}
 
-  {#each tree.nodes as node}
-    {#if is_tree(node)}
-      <!-- Recursion here is fine. We are not dealing with a tree the size of a linux root file system. -->
-      <svelte:self tree={node} nested={nested + 1} />
-    {:else}
-      <DocsNavNode info={node} />
-    {/if}
-  {/each}
+	{#each tree.nodes as node}
+		{#if is_tree(node)}
+			<!-- Recursion here is fine. We are not dealing with a tree the size of a linux root file system. -->
+			<svelte:self tree={node} nested={nested + 1} />
+		{:else}
+			<DocsNavNode info={node} />
+		{/if}
+	{/each}
 </ul>
 
 <style>
-ul {
-	padding-left: 2rem;
-  list-style-type: "• ";
-  color: var(--white);
-}
+	ul {
+		padding-left: 1rem;
+	}
 </style>