Dev

src/lib/components/art/image_frame.svelte

@@ -1,26 +1,20 @@
-<script>
-	import { base } from '$app/paths';
-	// accept a single `path` prop (URL to the image)
-	export let path = '';
+<script lang="ts">
+	let { path = '/' }: { path?: string } = $props();
 </script>
 
-<!-- eslint-disable-next-line svelte/no-navigation-without-resolve -->
-<a href="{base}{path}">
-	<img src={path} class="frame" alt="art" loading="lazy" />
-</a>
+<img src={path} class="frame" alt="art" loading="lazy" />
 
 <style>
 	.frame {
 		display: block;
 		width: 100%;
-		max-width: 300px; /* scale down large images to a reasonable width */
+		max-width: 300px;
 		height: auto;
 		object-fit: contain;
 		border-radius: 6px;
 		box-shadow: 0 2px 6px rgba(0, 0, 0, 0.12);
 	}
 
-	/* Make it smaller on very small screens if needed */
 	@media (max-width: 400px) {
 		.frame {
 			max-width: 220px;

src/lib/components/layout/footer.svelte

@@ -10,7 +10,7 @@
 	let pages = $derived(main_pages.concat(extra_pages));
 </script>
 
-<header>
+<footer>
 	<nav id="desktop_navbar">
 		<ul>
 			{#each main_pages as { route, name } (route)}
@@ -19,17 +19,17 @@
 		</ul>
 
 		<nav id="navbar_burger">
-			<MobileNavBar pages={extra_pages} transformX="-50%" transformY="-20px" />
+			<MobileNavBar pages={extra_pages} position="bottom" />
 		</nav>
 	</nav>
 
 	<nav id="mobile_navbar">
-		<MobileNavBar {pages} transformX="-50%" transformY="-20px" />
+		<MobileNavBar {pages} position="bottom" />
 	</nav>
-</header>
+</footer>
 
 <style>
-	header {
+	footer {
 		width: 100%;
 		height: 100px;
 
@@ -84,6 +84,7 @@
 
 	#mobile_navbar {
 		display: none;
+		height: 100%;
 	}
 
 	@media only screen and (max-width: 1200px) {

src/lib/components/layout/header.svelte

@@ -31,12 +31,12 @@ development hell.</pre>
 		</ul>
 
 		<nav id="navbar_burger">
-			<MobileNavBar pages={extra_pages} transformX="-250px" transformY="180px" />
+			<MobileNavBar pages={extra_pages} position="top" extra_style_list="right:0;" />
 		</nav>
 	</nav>
 
 	<nav id="mobile_navbar">
-		<MobileNavBar {pages} transformX="-250px" transformY="480px" />
+		<MobileNavBar {pages} position="top" extra_style_list="right:0;" />
 	</nav>
 </header>
 

src/lib/components/nav component/mobile navbar.svelte

@@ -4,8 +4,8 @@
 
 	let {
 		pages = [{ route: '/', name: 'Home' }],
-		transformX = '-50%',
-		transformY = '-20px'
+		position = 'bottom',
+		extra_style_list = ''
 	} = $props();
 	let open = $derived(false);
 
@@ -18,7 +18,7 @@
 	<BurgerIcon bind:open />
 
 	{#if open}
-		<ul style="transform: translateX({transformX}) translateY({transformY});">
+		<ul style="{position}:100%; {extra_style_list}">
 			{#each pages as { route, name } (route)}
 				<li><a href={resolve(route)} onclick={onClick}>{name}</a></li>
 			{/each}
@@ -32,6 +32,8 @@
 		flex-direction: column;
 		position: relative;
 		align-items: center;
+		height: 100%;
+		width: auto;
 
 		ul {
 			width: 300px;
@@ -41,8 +43,6 @@
 			flex-direction: column;
 			align-items: center;
 			position: absolute;
-			bottom: 100%;
-			left: 50%;
 
 			padding: 0;
 

src/routes/art/+page.svelte

@@ -1,8 +1,12 @@
-<script>
+<script lang="ts">
 	import ImageFrame from '$lib/components/art/image_frame.svelte';
 
-	const images = Object.values(
-		import.meta.glob('$lib/assets/art/*.{jpg,jpeg,png,gif,webp}', { as: 'url', eager: true })
+	const images: string[] = Object.values(
+		import.meta.glob('$lib/assets/art/*.{jpg,jpeg,png,gif,webp}', {
+			query: '?url',
+			import: 'default',
+			eager: true
+		})
 	);
 </script>
 
@@ -12,7 +16,7 @@
 	<div id="galleries_grid">
 		{#each images as img (img)}
 			<figure>
-				<ImageFrame path={img} />
+				<ImageFrame path={img as string} />
 			</figure>
 		{/each}
 	</div>