Sveskejuice
/
deprived-main-website
1
0
Fork 0
Code Issues Pull Requests Packages Projects Releases Wiki Activity

Centered mobile div

This commit is contained in:
BOTAlex 2024-10-17 21:27:31 +02:00
parent beb02ef577
commit 046239e1a0
1 changed files with 6 additions and 4 deletions
Show Stats Download Patch File Download Diff File Expand all files Collapse all files

10
src/routes/+page.svelte
View File

@ -22,9 +22,9 @@
let showConfetti: boolean = false; let showConfetti: boolean = false;
function onProgressConfetti(progress: number){ function onProgressConfetti(progress: number){
// console.log(progress > 0.225); console.log(progress);
showConfetti = progress > 0.225; showConfetti = !mobile && progress > 0.225 || mobile && progress > 0.32;
} }
</script> </script>
@ -60,9 +60,11 @@
<StickyLayer offset={(!mobile) ? ({ top: 0.4, bottom: 0.75 }) : ({ top: 0.4, bottom: 0.4 })} class="pointer-events-none"> <StickyLayer offset={(!mobile) ? ({ top: 0.4, bottom: 0.75 }) : ({ top: 0.4, bottom: 0.4 })} class="pointer-events-none">
<div class="prose font-mono pointer-events-auto h-full" style="max-width: 100%;"> <div class="prose font-mono pointer-events-auto h-full" style="max-width: 100%;">
<div class="flex justify-center items-center h-full relative"> <div class="flex justify-center items-center h-full relative">
<div style="position: absolute; top: 30vh; {!mobile ? "max-width: 35vw;" : "width: 100%;"}"> <div class="flex justify-center" style="position: absolute; top: 30vh; {!mobile ? "max-width: 35vw;" : "width: 100%;"}">
{#if showConfetti} {#if showConfetti}
<Confetti amount={10} colorArray={["white"]} /> <div>
<Confetti amount={10} colorArray={["white"]} />
</div>
{/if} {/if}
</div> </div>
<div class="grid gap-4" style="{!mobile ? "max-width: 50vw;" : ""} background: linear-gradient(to bottom, transparent 0%, oklch(var(--b2)) 5%)"> <div class="grid gap-4" style="{!mobile ? "max-width: 50vw;" : ""} background: linear-gradient(to bottom, transparent 0%, oklch(var(--b2)) 5%)">