diff options
| author | mat <github@matdoes.dev> | 2022-03-18 22:27:32 -0500 |
|---|---|---|
| committer | mat <github@matdoes.dev> | 2022-03-18 22:27:32 -0500 |
| commit | b24faf36d612f584770a404bd750943a55dab3e2 (patch) | |
| tree | 21ea58146b674ced571576592d7f0aa61162e2e9 /src/routes | |
| parent | df9fc83ad814ba93f162e22c3c5f552eb627414c (diff) | |
| download | skyblock-stats-b24faf36d612f584770a404bd750943a55dab3e2.tar.gz skyblock-stats-b24faf36d612f584770a404bd750943a55dab3e2.tar.bz2 skyblock-stats-b24faf36d612f584770a404bd750943a55dab3e2.zip | |
Implement blur and darken background
Diffstat (limited to 'src/routes')
| -rw-r--r-- | src/routes/player/[player]/[profile].svelte | 49 |
1 files changed, 48 insertions, 1 deletions
diff --git a/src/routes/player/[player]/[profile].svelte b/src/routes/player/[player]/[profile].svelte index 02c46bb..a801803 100644 --- a/src/routes/player/[player]/[profile].svelte +++ b/src/routes/player/[player]/[profile].svelte @@ -102,9 +102,20 @@ metaTitle={(data.member.rank.name ? `[${data.member.rank.name}] ` : '') + `${data.member.username}\'s SkyBlock profile (${data.member.profileName})`} /> -<Header backArrowHref="/player/{data.member.username}" /> +<Header + backArrowHref="/player/{data.member.username}" + blurred={data.customization?.blurBackground ?? false} +/> <main> + {#if data.customization?.blurBackground && data.customization?.backgroundUrl} + <div class="blurred-background-container-container"> + <div class="blurred-background-container"> + <img class="blurred-background" src={data.customization.backgroundUrl} alt="Background" /> + </div> + </div> + {/if} + <h1> <!-- this is weird like this so svelte doesn't add whitespace --> <Username player={data.member} headType="3d" />{#if data.customization?.emoji}<span @@ -184,6 +195,9 @@ </main> <style> + main { + position: relative; + } .profile-emoji { display: inline; } @@ -212,11 +226,44 @@ max-width: fit-content; } + .blurred-background-container-container { + position: absolute; + width: 47rem; + height: calc(100% + 1em); + z-index: -9; + overflow: hidden; + clip: rect(-1em, auto, auto, -2em); + } + .blurred-background { + position: fixed; + left: 0; + top: 0; + width: 100%; + height: 100%; + z-index: -10; + object-fit: cover; + background-blend-mode: overlay; + filter: blur(1em) brightness(0.6); + } + @media only screen and (max-width: 1400px) { + .blurred-background-container-container { + left: calc(5em + 5%); + width: 90%; + clip: rect(-1.7em, auto, auto, -10em); + } + main { + margin-top: 0.75em; + } + } @media only screen and (max-width: 1040px) { .profile-skills { position: unset; display: block; width: max-content; } + .blurred-background-container-container { + left: 0 !important; + width: 100vw !important; + } } </style> |