feat: theme changes

src/lib/components/Footer.svelte

@@ -4,23 +4,26 @@
 	import Vercel from './icons/Vercel.svelte';
 </script>
 
-<footer class="text-center px-4 py-2">
-	<p>
-		<a href="https://svelte.dev/" target="_blank" rel="noopener noreferrer">
-			Made with <Svelte />
-		</a>
-		|
-		<a href="https://vercel.com/" target="_blank" rel="noopener noreferrer">
-			Hosted on <Vercel />
-		</a>
-		|
-		<a href="https://github.com/bartvdbraak/hellob.art" target="_blank" rel="noopener noreferrer">
-			Source code at <GitHub />
-		</a>
-	</p>
-	<p>
-		Licensed under GPLv3 &mdash; &copy; {new Date().getFullYear()} hellob.art &mdash; Bart van der Braak
-	</p>
+<footer class="text-center px-4 py-4 dark:text-indigo-300 text-indigo-900">
+	<a href="https://svelte.dev/" target="_blank" rel="external">
+		Made with <Svelte />
+	</a>
+	<span class="divider-vertical mx-2" />
+	<a href="https://vercel.com/" target="_blank" rel="external">
+		Hosted on <Vercel />
+	</a>
+	<span class="divider-vertical mx-2" />
+	<a href="https://github.com/bartvdbraak/hellob.art" target="_blank" rel="external">
+		Source code at <GitHub />
+	</a>
+	<br class="my-1" />
+	<span> Licensed under GPLv3 </span>
+	<span class="divider-vertical mx-2" />
+	<span>
+		&copy {new Date().getFullYear()} hellob.art
+	</span>
+	<span class="divider-vertical mx-2" />
+	<span> Bart van der Braak </span>
 </footer>
 
 <style>

src/lib/components/Header.svelte

@@ -3,7 +3,10 @@
 	import GitHub from './icons/GitHub.svelte';
 	import Hamburger from './icons/Hamburger.svelte';
 	import LinkedIn from './icons/LinkedIn.svelte';
-
+	import routes from '$lib/routes';
+	import { page } from '$app/stores';
+	$: classesActive = (href: string) =>
+		href === $page.url.pathname ? 'underline decoration-indigo-500' : '';
 	export let progress: number;
 
 	function drawerOpen(): void {
@@ -11,41 +14,51 @@
 	}
 </script>
 
-<AppBar>
+<AppBar background="">
 	<svelte:fragment slot="lead">
-		<button
-			aria-label="Toggle navigation menu"
-			class="md:hidden btn btn-sm mr-4"
-			on:click={drawerOpen}
-		>
-			<span>
-				<Hamburger />
-			</span>
-		</button>
-		<img width="32" height="24" src="./icon.svg" alt="Logo" srcset="" class="" />
-		<h1 class="h6">
-			<span
-				class="bg-gradient-to-br logo-text-gradient bg-clip-text text-transparent box-decoration-clone font-mono font-bold tracking-tighter pl-3"
-				>hellob.art</span
-			>
-		</h1>
+		<a href="/" class="md:ml-4 ml-1">
+			<img src="./logo@3x.png" alt="hellob.art logo" class="h-8" />
+		</a>
 	</svelte:fragment>
+
+	<nav>
+		<ul class="flex">
+			{#each routes as route}
+				<li class="mx-2">
+					<a class={classesActive(route.url)} href={route.url}>
+						<span class="flex-auto">{route.label}</span>
+					</a>
+				</li>{/each}
+		</ul>
+	</nav>
+
 	<svelte:fragment slot="trail">
 		<a
 			href="https://linkedin.com/in/bartvdbraak"
 			target="_blank"
 			rel="external"
-			class="btn-icon btn-icon-sm hover:variant-soft-primary"
-			><LinkedIn /><span class="sr-only">LinkedIn Profile of Bart van der Braak</span></a
+			class="btn-icon btn-icon-md hover:variant-soft-primary"
 		>
+			<LinkedIn />
+			<span class="sr-only">LinkedIn Profile of Bart van der Braak</span>
+		</a>
 		<a
 			href="https://github.com/bartvdbraak"
 			target="_blank"
 			rel="external"
-			class="btn-icon btn-icon-sm hover:variant-soft-primary"
-			><GitHub /><span class="sr-only">GitHub Profile of Bart van der Braak</span></a
+			class="btn-icon btn-icon-md hover:variant-soft-primary"
 		>
+			<GitHub />
+			<span class="sr-only">GitHub Profile of Bart van der Braak</span>
+		</a>
 		<LightSwitch />
+		<button
+			aria-label="Toggle navigation menu"
+			class="btn btn-sm mr-4 md:hidden"
+			on:click={drawerOpen}
+		>
+			<Hamburger />
+		</button>
 	</svelte:fragment>
 </AppBar>
 
@@ -53,7 +66,9 @@
 <ProgressBar
 	label="Progress Bar"
 	labelledby="progress-bar-label"
+	height="h-0.5"
 	value={progress}
 	max={100}
 	rounded=""
+	meter="bg-indigo-500"
 />

src/lib/components/Navigation.svelte

@@ -1,22 +1,39 @@
 <script lang="ts">
 	import { page } from '$app/stores';
+	import type { Route } from '$lib/routes';
 	import { drawerStore } from '@skeletonlabs/skeleton';
-	$: classesActive = (href: string) => (href === $page.url.pathname ? '!bg-primary-500' : '');
+	$: classesActive = (href: string) =>
+		href === $page.url.pathname ? '!bg-primary-500 text-indigo-100' : '';
 
-	export let routes: { url: string; label: string }[];
+	export let routes: Route[];
 
 	function drawerClose(): void {
 		drawerStore.close();
 	}
 </script>
 
-<nav class="list-nav p-3">
+<nav class="list-nav">
 	<ul>
 		{#each routes as route}
-			<li class="pb-2">
-				<a class={classesActive(route.url)} href={route.url} on:click={drawerClose}>{route.label}</a
-				>
-			</li>
-		{/each}
+			<li class="mb-2">
+				<a class={classesActive(route.url)} href={route.url} on:click={drawerClose}>
+					<span class="badge bg-primary-500"
+						><svg
+							xmlns="http://www.w3.org/2000/svg"
+							width="24"
+							height="24"
+							viewBox="0 0 24 24"
+							fill="none"
+							stroke="currentColor"
+							stroke-width="2"
+							stroke-linecap="round"
+							stroke-linejoin="round"
+							class="lucide lucide-chevron-righ text-white"><path d="m9 18 6-6-6-6" /></svg
+						></span
+					>
+					<span class="flex-auto">{route.label}</span>
+				</a>
+			</li>{/each}
+		<!-- ... -->
 	</ul>
 </nav>

src/lib/routes.ts

@@ -0,0 +1,13 @@
+export type Route = {
+	url: string;
+	label: string;
+};
+
+const routes: Route[] = [
+	{ url: '/', label: 'Home' },
+	{ url: '/projects', label: 'Projects' },
+	{ url: '/toolbox', label: 'Toolbox' }
+	// { url: '/blog', label: 'Blog' }
+];
+
+export default routes;