40 lines
896 B
Svelte
40 lines
896 B
Svelte
<script lang="ts">
|
|
import '../app.css';
|
|
|
|
import logo from '$lib/images/logo.png';
|
|
|
|
import Footer from '$lib/components/Footer.svelte';
|
|
import { onMount } from 'svelte';
|
|
|
|
let { children } = $props();
|
|
|
|
let main: HTMLElement;
|
|
|
|
onMount(() => {
|
|
main.style.backgroundImage = `url("${logo}")`;
|
|
});
|
|
</script>
|
|
|
|
<main class="background" bind:this={main}>
|
|
<div class="blur"></div>
|
|
<article class="content">
|
|
{@render children()}
|
|
</article>
|
|
<Footer />
|
|
</main>
|
|
|
|
<style lang="postcss">
|
|
@reference "tailwindcss";
|
|
.background {
|
|
@apply relative flex h-screen w-full flex-col items-center justify-center bg-cover bg-center bg-no-repeat;
|
|
background-size: 40%;
|
|
}
|
|
|
|
.blur {
|
|
@apply absolute inset-0 h-full w-full backdrop-blur-lg;
|
|
}
|
|
|
|
.content {
|
|
@apply absolute z-10 mx-auto flex max-w-screen-md flex-col items-center justify-center rounded-lg bg-neutral-800/80 p-8 text-center;
|
|
}
|
|
</style>
|