use dynamic image path for auth background
This commit is contained in:
parent
901fd5a157
commit
d1c40ee38d
1 changed files with 5 additions and 2 deletions
|
|
@ -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
|
||||||
|
|
|
||||||
Loading…
Reference in a new issue