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">
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