From d1c40ee38db0efa057b6ee672fd9e63542d5dd86 Mon Sep 17 00:00:00 2001
From: Justin Edmund <justin@jedmund.com>
Date: Mon, 1 Dec 2025 03:08:11 -0800
Subject: [PATCH] use dynamic image path for auth background

---
 src/routes/auth/+layout.svelte | 7 +++++--
 1 file changed, 5 insertions(+), 2 deletions(-)

diff --git a/src/routes/auth/+layout.svelte b/src/routes/auth/+layout.svelte
index 1ed8bdea..20422cbc 100644
--- a/src/routes/auth/+layout.svelte
+++ b/src/routes/auth/+layout.svelte
@@ -1,6 +1,7 @@
 <script lang="ts">
 	import type { Snippet } from 'svelte'
 	import Icon from '$lib/components/Icon.svelte'
+	import { getBasePath } from '$lib/utils/images'
 	import * as m from '$lib/paraglide/messages'
 
 	interface Props {
@@ -8,9 +9,11 @@
 	}
 
 	let { children }: Props = $props()
+
+	const backgroundUrl = `${getBasePath()}/port-breeze.jpg`
 </script>
 
-<div class="authContainer">
+<div class="authContainer" style:--auth-bg-url="url('{backgroundUrl}')">
 	<div class="authBackground"></div>
 	<a href="/" class="backLink">
 		<Icon name="arrow-left" size={14} />
@@ -37,7 +40,7 @@
 	.authBackground {
 		position: absolute;
 		inset: 0;
-		background: #1a1a2e url('/images/port-breeze.jpg') center / cover no-repeat;
+		background: #1a1a2e var(--auth-bg-url) center / cover no-repeat;
 		z-index: 0;
 
 		// Overlay for readability