use dynamic image path for auth background

This commit is contained in:
Justin Edmund 2025-12-01 03:08:11 -08:00
parent 901fd5a157
commit d1c40ee38d

View file

@ -1,6 +1,7 @@
<script lang="ts"> <script lang="ts">
import type { Snippet } from 'svelte' import type { Snippet } from 'svelte'
import Icon from '$lib/components/Icon.svelte' import Icon from '$lib/components/Icon.svelte'
import { getBasePath } from '$lib/utils/images'
import * as m from '$lib/paraglide/messages' import * as m from '$lib/paraglide/messages'
interface Props { interface Props {
@ -8,9 +9,11 @@
} }
let { children }: Props = $props() let { children }: Props = $props()
const backgroundUrl = `${getBasePath()}/port-breeze.jpg`
</script> </script>
<div class="authContainer"> <div class="authContainer" style:--auth-bg-url="url('{backgroundUrl}')">
<div class="authBackground"></div> <div class="authBackground"></div>
<a href="/" class="backLink"> <a href="/" class="backLink">
<Icon name="arrow-left" size={14} /> <Icon name="arrow-left" size={14} />
@ -37,7 +40,7 @@
.authBackground { .authBackground {
position: absolute; position: absolute;
inset: 0; 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; z-index: 0;
// Overlay for readability // Overlay for readability