diff --git a/src/routes/register/+layout.svelte b/src/routes/register/+layout.svelte index ed3c4f8..ddb9ee8 100644 --- a/src/routes/register/+layout.svelte +++ b/src/routes/register/+layout.svelte @@ -2,12 +2,22 @@ import { env } from '$env/dynamic/public'; </script> +<div class="fixed top-0 left-0 h-full w-full bg-[#050505]" /> <img - class="fixed top-0 left-0 h-full w-full object-cover pointer-events-none blur-[2px]" + class="bg-snipped bg-black fixed top-0 left-0 h-full w-full object-cover pointer-events-none blur-[2px]" src="{env.PUBLIC_BASE_PATH}/img/register-background.webp" alt="" /> -<div class="fixed top-0 left-0 h-full w-full bg-[radial-gradient(rgba(0,0,0,0),rgba(0,0,0,.4))]" /> <div class="flex justify-center w-full"> <slot /> </div> + +<style> + .bg-snipped { + /* prettier-ignore */ + clip-path: polygon( + 0 20%, 100% -35%, 100% -5%, 0 50%, + 0 110%, 100% 50%, 100% 80%, 0 140% + ); + } +</style> diff --git a/src/routes/register/+page.svelte b/src/routes/register/+page.svelte index 8717ea3..a191529 100644 --- a/src/routes/register/+page.svelte +++ b/src/routes/register/+page.svelte @@ -12,7 +12,7 @@ <!--the tooltip when not all fields are correctly filled won't completely show if the overflow is hidden--> <div - class="grid card w-11/12 xl:w-2/3 2xl:w-1/2 p-6 my-12 bg-base-100 shadow-lg" + class="grid card w-11/12 xl:w-2/3 2xl:w-1/2 p-6 my-12 bg-base-100 shadow-[0_0_10px_10px_rgba(0,0,0,0.7)]" class:overflow-hidden={registered} > {#if !registered}