feat: added skeleton as ui toolkit

src/lib/components/Footer.svelte

@@ -0,0 +1,30 @@
+<script>
+	import GitHub from './icons/GitHub.svelte';
+	import Svelte from './icons/Svelte.svelte';
+	import Vercel from './icons/Vercel.svelte';
+</script>
+
+<footer class="text-right 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>
+
+<style>
+	:global(.inline-svg) {
+		display: inline;
+	}
+</style>

src/lib/components/Header.svelte

@@ -0,0 +1,19 @@
+<script>
+	import { AppBar } from "@skeletonlabs/skeleton";
+	import GitHub from "./icons/GitHub.svelte";
+</script>
+
+<AppBar>
+  <svelte:fragment slot="lead">
+    <img src="./icon.svg" alt="Logo" srcset="" class="pr-2" />
+    <code class="code">hellob.art</code>
+  </svelte:fragment>
+  <svelte:fragment slot="trail">
+    <a
+      href="https://github.com/bartvdbraak/hellob.art"
+      target="_blank"
+      rel="noopener noreferrer"
+      class="btn-icon variant-primary"><GitHub /></a
+    >
+  </svelte:fragment>
+</AppBar>

src/lib/components/Navigation.svelte

@@ -0,0 +1,16 @@
+<script lang="ts">
+	import { page } from '$app/stores';
+	$: classesActive = (href: string) => (href === $page.url.pathname ? '!bg-primary-500' : '');
+
+	export let routes: { url: string; label: string }[];
+</script>
+
+<nav class="list-nav m-5">
+	<ul>
+		{#each routes as route}
+			<li>
+				<a class="{classesActive(route.url)}" href={route.url}>{route.label}</a>
+			</li>
+		{/each}
+	</ul>
+</nav>

src/lib/components/icons/GitHub.svelte

@@ -0,0 +1 @@
+<svg class="inline-svg" stroke="currentColor" fill="none" stroke-width="2" viewBox="0 0 24 24" stroke-linecap="round" stroke-linejoin="round" height="1em" width="1em" xmlns="http://www.w3.org/2000/svg"><path d="M9 19c-5 1.5-5-2.5-7-3m14 6v-3.87a3.37 3.37 0 0 0-.94-2.61c3.14-.35 6.44-1.54 6.44-7A5.44 5.44 0 0 0 20 4.77 5.07 5.07 0 0 0 19.91 1S18.73.65 16 2.48a13.38 13.38 0 0 0-7 0C6.27.65 5.09 1 5.09 1A5.07 5.07 0 0 0 5 4.77a5.44 5.44 0 0 0-1.5 3.78c0 5.42 3.3 6.61 6.44 7A3.37 3.37 0 0 0 9 18.13V22"></path></svg>

src/lib/components/icons/Svelte.svelte

@@ -0,0 +1 @@
+<svg class="inline-svg" stroke="currentColor" fill="currentColor" stroke-width="0" role="img" viewBox="0 0 24 24" height="1em" width="1em" xmlns="http://www.w3.org/2000/svg"><title></title><path d="M10.354 21.125a4.44 4.44 0 0 1-4.765-1.767 4.109 4.109 0 0 1-.703-3.107 3.898 3.898 0 0 1 .134-.522l.105-.321.287.21a7.21 7.21 0 0 0 2.186 1.092l.208.063-.02.208a1.253 1.253 0 0 0 .226.83 1.337 1.337 0 0 0 1.435.533 1.231 1.231 0 0 0 .343-.15l5.59-3.562a1.164 1.164 0 0 0 .524-.778 1.242 1.242 0 0 0-.211-.937 1.338 1.338 0 0 0-1.435-.533 1.23 1.23 0 0 0-.343.15l-2.133 1.36a4.078 4.078 0 0 1-1.135.499 4.44 4.44 0 0 1-4.765-1.766 4.108 4.108 0 0 1-.702-3.108 3.855 3.855 0 0 1 1.742-2.582l5.589-3.563a4.072 4.072 0 0 1 1.135-.499 4.44 4.44 0 0 1 4.765 1.767 4.109 4.109 0 0 1 .703 3.107 3.943 3.943 0 0 1-.134.522l-.105.321-.286-.21a7.204 7.204 0 0 0-2.187-1.093l-.208-.063.02-.207a1.255 1.255 0 0 0-.226-.831 1.337 1.337 0 0 0-1.435-.532 1.231 1.231 0 0 0-.343.15L8.62 9.368a1.162 1.162 0 0 0-.524.778 1.24 1.24 0 0 0 .211.937 1.338 1.338 0 0 0 1.435.533 1.235 1.235 0 0 0 .344-.151l2.132-1.36a4.067 4.067 0 0 1 1.135-.498 4.44 4.44 0 0 1 4.765 1.766 4.108 4.108 0 0 1 .702 3.108 3.857 3.857 0 0 1-1.742 2.583l-5.589 3.562a4.072 4.072 0 0 1-1.135.499m10.358-17.95C18.484-.015 14.082-.96 10.9 1.068L5.31 4.63a6.412 6.412 0 0 0-2.896 4.295 6.753 6.753 0 0 0 .666 4.336 6.43 6.43 0 0 0-.96 2.396 6.833 6.833 0 0 0 1.168 5.167c2.229 3.19 6.63 4.135 9.812 2.108l5.59-3.562a6.41 6.41 0 0 0 2.896-4.295 6.756 6.756 0 0 0-.665-4.336 6.429 6.429 0 0 0 .958-2.396 6.831 6.831 0 0 0-1.167-5.168Z"></path></svg>

src/lib/components/icons/Vercel.svelte

@@ -0,0 +1 @@
+<svg class="inline-svg" stroke="currentColor" fill="none" stroke-width="2" viewBox="0 0 24 24" stroke-linecap="round" stroke-linejoin="round" height="1em" width="1em" xmlns="http://www.w3.org/2000/svg"><path stroke="none" d="M0 0h24v24H0z" fill="none"></path><path d="M3 19h18l-9 -15z"></path></svg>