make use of vite's asset optimization

src/app.scss

@@ -13,4 +13,8 @@ body {
 
 .emoji {
   @apply w-6 inline-block;
+}
+
+a {
+  @apply hover:text-sky-500 hover:underline text-gray-400;
 }

src/lib/components/Footer.svelte

@@ -2,8 +2,8 @@
 </script>
 
 <footer class="footer">
-	<p>Logo art by <a class="hover:text-sky-500 hover:underline text-gray-400" href="https://bsky.app/profile/did:plc:sqwkomf6gkzbhnctiqexepzx">Aegiscarr</a></p>
-	<p>&copy; {new Date().getFullYear()} Lara The Protogen. All rights reserved.</p>
+	<p>Logo art by <a href="https://bsky.app/profile/did:plc:sqwkomf6gkzbhnctiqexepzx">Aegiscarr</a></p>
+	<p>&copy; {new Date().getFullYear()} <a href="https://laratheprotogen.dev">Lara The Protogen</a>. All rights reserved.</p>
 </footer>
 
 <style lang="scss">

src/routes/+error.svelte

@@ -0,0 +1,10 @@
+<script lang="ts">
+	import { page } from '$app/state';
+</script>
+
+<h1 class="text-4xl font-bold">No secrets here</h1>
+<p>{page.status} {page.error?.message}</p>
+
+<style lang="scss">
+
+</style>

src/routes/+layout.svelte

@@ -3,13 +3,22 @@
 	import { ParaglideJS } from '@inlang/paraglide-sveltekit';
 	import '../app.scss';
 
+	import logo from '$lib/images/logo.png'
+
 	import Footer from '$lib/components/Footer.svelte';
+	import { onMount } from 'svelte';
 
 	let { children } = $props();
+
+	let div: HTMLDivElement;
+
+	onMount(() => {
+		div.style.backgroundImage = `url(${logo})`;
+	});
 </script>
 
 <ParaglideJS {i18n}>
-	<div class="background">
+	<div class="background" bind:this={div}>
 		<article class="content">
 			{@render children()}
 		</article>
@@ -20,7 +29,6 @@
 <style lang="scss">
   .background {
     @apply relative w-full h-screen bg-cover bg-center bg-no-repeat;
-    background-image: url('/backdrop-logo.png');
     background-size: 40%;
   }
 

src/routes/demo/+page.svelte

@@ -1 +0,0 @@
-<a href="/demo/paraglide">paraglide</a>