From d58f0d707ef9c00bbbe2ba9527ea3bfb1b34c700 Mon Sep 17 00:00:00 2001
From: Bart van der Braak <bartvdbraak@gmail.com>
Date: Fri, 11 Aug 2023 09:03:50 +0200
Subject: [PATCH] feat: theme changes

---
 src/app.postcss                      |  1 +
 src/lib/components/Footer.svelte     | 37 ++++++-----
 src/lib/components/Header.svelte     | 59 ++++++++++-------
 src/lib/components/Navigation.svelte | 33 +++++++---
 src/lib/routes.ts                    | 13 ++++
 src/routes/+layout.svelte            | 30 ++++-----
 src/theme.postcss                    | 96 ++++++++++++++++++++++++++++
 7 files changed, 203 insertions(+), 66 deletions(-)
 create mode 100644 src/lib/routes.ts
 create mode 100644 src/theme.postcss

diff --git a/src/app.postcss b/src/app.postcss
index 2e566f9..cb59d9c 100644
--- a/src/app.postcss
+++ b/src/app.postcss
@@ -1,6 +1,7 @@
 html,
 body {
 	@apply h-full overflow-hidden;
+	@apply bg-white;
 }
 
 .dark .logo-text-gradient-dark {
diff --git a/src/lib/components/Footer.svelte b/src/lib/components/Footer.svelte
index 8c44dc5..754a836 100644
--- a/src/lib/components/Footer.svelte
+++ b/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>
diff --git a/src/lib/components/Header.svelte b/src/lib/components/Header.svelte
index ee29091..b6eccd5 100644
--- a/src/lib/components/Header.svelte
+++ b/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"
 />
diff --git a/src/lib/components/Navigation.svelte b/src/lib/components/Navigation.svelte
index 13b10ef..e90d0db 100644
--- a/src/lib/components/Navigation.svelte
+++ b/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>
diff --git a/src/lib/routes.ts b/src/lib/routes.ts
new file mode 100644
index 0000000..074d0ec
--- /dev/null
+++ b/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;
diff --git a/src/routes/+layout.svelte b/src/routes/+layout.svelte
index 6f9110a..58f56fc 100644
--- a/src/routes/+layout.svelte
+++ b/src/routes/+layout.svelte
@@ -1,5 +1,6 @@
 <script lang="ts">
-	import '@skeletonlabs/skeleton/themes/theme-crimson.css';
+	// import '@skeletonlabs/skeleton/themes/theme-crimson.css';
+	import '../theme.postcss';
 	import '@skeletonlabs/skeleton/styles/skeleton.css';
 	import '../app.postcss';
 	import { AppShell, Drawer } from '@skeletonlabs/skeleton';
@@ -15,6 +16,7 @@
 	import { webVitals } from '$lib/vitals';
 	import { browser } from '$app/environment';
 	import { page } from '$app/stores';
+	import routes from '$lib/routes';
 
 	let analyticsId = import.meta.env.VERCEL_ANALYTICS_ID;
 
@@ -27,13 +29,6 @@
 		});
 	}
 
-	let routes = [
-		{ url: '/', label: 'Home' },
-		{ url: '/projects', label: 'Projects' },
-		{ url: '/toolbox', label: 'Toolbox' }
-		// { url: '/blog', label: 'Blog' }
-	];
-
 	let progress = 0;
 
 	function handleScroll(event: Event) {
@@ -42,22 +37,19 @@
 	}
 </script>
 
-<Drawer width="w-[280px] md:w-[480px]">
-	<Navigation {routes} />
+<Drawer width="w-[280px] md:w-[200px]" position="right" bgDrawer="bg-gray-200 dark:bg-gray-800">
+	<div class="p-5 w-full mx-auto">
+		<Navigation {routes} />
+	</div>
 </Drawer>
 
-<AppShell slotSidebarLeft="w-0 md:w-40" on:scroll={handleScroll}>
+<AppShell on:scroll={handleScroll}>
 	<svelte:fragment slot="header">
 		<Header {progress} />
 	</svelte:fragment>
-	<svelte:fragment slot="sidebarLeft">
-		<Navigation {routes} />
-	</svelte:fragment>
-	<!-- Router Slot -->
-	<div class="container p-4 mx-auto">
-		<slot />
-	</div>
-	<!-- ---- / ---- -->
+
+	<slot />
+
 	<svelte:fragment slot="pageFooter">
 		<Footer />
 	</svelte:fragment>
diff --git a/src/theme.postcss b/src/theme.postcss
new file mode 100644
index 0000000..a081143
--- /dev/null
+++ b/src/theme.postcss
@@ -0,0 +1,96 @@
+:root {
+	/* =~= Theme Properties =~= */
+	--theme-font-family-base: system-ui;
+	--theme-font-family-heading: system-ui;
+	--theme-font-color-base: 0 0 0;
+	--theme-font-color-dark: 255 255 255;
+	--theme-rounded-base: 9999px;
+	--theme-rounded-container: 8px;
+	--theme-border-base: 1px;
+	/* =~= Theme On-X Colors =~= */
+	--on-primary: 255 255 255;
+	--on-secondary: 0 0 0;
+	--on-tertiary: 0 0 0;
+	--on-success: 0 0 0;
+	--on-warning: 0 0 0;
+	--on-error: 255 255 255;
+	--on-surface: 255 255 255;
+	/* =~= Theme Colors  =~= */
+	/* primary | #3833a5 */
+	--color-primary-50: 225 224 242; /* ⬅ #e1e0f2 */
+	--color-primary-100: 215 214 237; /* ⬅ #d7d6ed */
+	--color-primary-200: 205 204 233; /* ⬅ #cdcce9 */
+	--color-primary-300: 175 173 219; /* ⬅ #afaddb */
+	--color-primary-400: 116 112 192; /* ⬅ #7470c0 */
+	--color-primary-500: 56 51 165; /* ⬅ #3833a5 */
+	--color-primary-600: 50 46 149; /* ⬅ #322e95 */
+	--color-primary-700: 42 38 124; /* ⬅ #2a267c */
+	--color-primary-800: 34 31 99; /* ⬅ #221f63 */
+	--color-primary-900: 27 25 81; /* ⬅ #1b1951 */
+	/* secondary | #0FBA81 */
+	--color-secondary-50: 219 245 236; /* ⬅ #dbf5ec */
+	--color-secondary-100: 207 241 230; /* ⬅ #cff1e6 */
+	--color-secondary-200: 195 238 224; /* ⬅ #c3eee0 */
+	--color-secondary-300: 159 227 205; /* ⬅ #9fe3cd */
+	--color-secondary-400: 87 207 167; /* ⬅ #57cfa7 */
+	--color-secondary-500: 15 186 129; /* ⬅ #0FBA81 */
+	--color-secondary-600: 14 167 116; /* ⬅ #0ea774 */
+	--color-secondary-700: 11 140 97; /* ⬅ #0b8c61 */
+	--color-secondary-800: 9 112 77; /* ⬅ #09704d */
+	--color-secondary-900: 7 91 63; /* ⬅ #075b3f */
+	/* tertiary | #0EA5E9 */
+	--color-tertiary-50: 219 242 252; /* ⬅ #dbf2fc */
+	--color-tertiary-100: 207 237 251; /* ⬅ #cfedfb */
+	--color-tertiary-200: 195 233 250; /* ⬅ #c3e9fa */
+	--color-tertiary-300: 159 219 246; /* ⬅ #9fdbf6 */
+	--color-tertiary-400: 86 192 240; /* ⬅ #56c0f0 */
+	--color-tertiary-500: 14 165 233; /* ⬅ #0EA5E9 */
+	--color-tertiary-600: 13 149 210; /* ⬅ #0d95d2 */
+	--color-tertiary-700: 11 124 175; /* ⬅ #0b7caf */
+	--color-tertiary-800: 8 99 140; /* ⬅ #08638c */
+	--color-tertiary-900: 7 81 114; /* ⬅ #075172 */
+	/* success | #84cc16 */
+	--color-success-50: 237 247 220; /* ⬅ #edf7dc */
+	--color-success-100: 230 245 208; /* ⬅ #e6f5d0 */
+	--color-success-200: 224 242 197; /* ⬅ #e0f2c5 */
+	--color-success-300: 206 235 162; /* ⬅ #ceeba2 */
+	--color-success-400: 169 219 92; /* ⬅ #a9db5c */
+	--color-success-500: 132 204 22; /* ⬅ #84cc16 */
+	--color-success-600: 119 184 20; /* ⬅ #77b814 */
+	--color-success-700: 99 153 17; /* ⬅ #639911 */
+	--color-success-800: 79 122 13; /* ⬅ #4f7a0d */
+	--color-success-900: 65 100 11; /* ⬅ #41640b */
+	/* warning | #EAB308 */
+	--color-warning-50: 252 244 218; /* ⬅ #fcf4da */
+	--color-warning-100: 251 240 206; /* ⬅ #fbf0ce */
+	--color-warning-200: 250 236 193; /* ⬅ #faecc1 */
+	--color-warning-300: 247 225 156; /* ⬅ #f7e19c */
+	--color-warning-400: 240 202 82; /* ⬅ #f0ca52 */
+	--color-warning-500: 234 179 8; /* ⬅ #EAB308 */
+	--color-warning-600: 211 161 7; /* ⬅ #d3a107 */
+	--color-warning-700: 176 134 6; /* ⬅ #b08606 */
+	--color-warning-800: 140 107 5; /* ⬅ #8c6b05 */
+	--color-warning-900: 115 88 4; /* ⬅ #735804 */
+	/* error | #D41976 */
+	--color-error-50: 249 221 234; /* ⬅ #f9ddea */
+	--color-error-100: 246 209 228; /* ⬅ #f6d1e4 */
+	--color-error-200: 244 198 221; /* ⬅ #f4c6dd */
+	--color-error-300: 238 163 200; /* ⬅ #eea3c8 */
+	--color-error-400: 225 94 159; /* ⬅ #e15e9f */
+	--color-error-500: 212 25 118; /* ⬅ #D41976 */
+	--color-error-600: 191 23 106; /* ⬅ #bf176a */
+	--color-error-700: 159 19 89; /* ⬅ #9f1359 */
+	--color-error-800: 127 15 71; /* ⬅ #7f0f47 */
+	--color-error-900: 104 12 58; /* ⬅ #680c3a */
+	/* surface | #141a26 */
+	--color-surface-50: 220 221 222; /* ⬅ #dcddde */
+	--color-surface-100: 208 209 212; /* ⬅ #d0d1d4 */
+	--color-surface-200: 196 198 201; /* ⬅ #c4c6c9 */
+	--color-surface-300: 161 163 168; /* ⬅ #a1a3a8 */
+	--color-surface-400: 91 95 103; /* ⬅ #5b5f67 */
+	--color-surface-500: 20 26 38; /* ⬅ #141a26 */
+	--color-surface-600: 18 23 34; /* ⬅ #121722 */
+	--color-surface-700: 15 20 29; /* ⬅ #0f141d */
+	--color-surface-800: 12 16 23; /* ⬅ #0c1017 */
+	--color-surface-900: 10 13 19; /* ⬅ #0a0d13 */
+}