diff options
| author | mat <github@matdoes.dev> | 2022-12-25 21:34:54 -0600 |
|---|---|---|
| committer | mat <github@matdoes.dev> | 2022-12-25 21:34:54 -0600 |
| commit | 42edde07aeb10fe1844a2d6ab43091870865dfc2 (patch) | |
| tree | 8df8bfb7806f05a04c114d4138b3e43f7e0ea538 | |
| parent | b8cb6ae674690d8b0a549574eb8b2401e7da6165 (diff) | |
| download | skyblock-stats-42edde07aeb10fe1844a2d6ab43091870865dfc2.tar.gz skyblock-stats-42edde07aeb10fe1844a2d6ab43091870865dfc2.tar.bz2 skyblock-stats-42edde07aeb10fe1844a2d6ab43091870865dfc2.zip | |
make /player/[player] also have blur if enabled
| -rw-r--r-- | src/routes/player/[player]/+page.svelte | 7 | ||||
| -rw-r--r-- | src/routes/player/[player]/Main.svelte | 73 | ||||
| -rw-r--r-- | src/routes/player/[player]/[profile]/+page.svelte | 53 |
3 files changed, 80 insertions, 53 deletions
diff --git a/src/routes/player/[player]/+page.svelte b/src/routes/player/[player]/+page.svelte index dcda090..1611868 100644 --- a/src/routes/player/[player]/+page.svelte +++ b/src/routes/player/[player]/+page.svelte @@ -10,6 +10,7 @@ import Tooltip from '$lib/Tooltip.svelte' import { cleanId } from '$lib/utils' import type { PageData } from './$types' + import Main from './Main.svelte' export let data: PageData @@ -47,9 +48,9 @@ {/if} <Head title={data.player ? `${data.player.username}'s SkyBlock profiles` : 'Invalid player'} /> -<Header /> +<Header blurred={data.customization?.blurBackground ?? false} /> -<main> +<Main blurred={data.customization?.blurBackground} {backgroundUrl}> <h1> <Username player={data.player} headType="3d" />'s profiles </h1> @@ -104,7 +105,7 @@ {:else} <p>This player has no profiles. <Emoji value="😦" /></p> {/if} -</main> +</Main> <style> .profile-members { diff --git a/src/routes/player/[player]/Main.svelte b/src/routes/player/[player]/Main.svelte new file mode 100644 index 0000000..4396965 --- /dev/null +++ b/src/routes/player/[player]/Main.svelte @@ -0,0 +1,73 @@ +<script lang="ts"> + export let blurred = false + export let backgroundUrl: string | null = null +</script> + +<main class:has-blurred-background={blurred && backgroundUrl}> + {#if blurred && backgroundUrl} + <div class="blurred-background-container-container"> + <div class="blurred-background-container"> + <img class="blurred-background" src={backgroundUrl} alt="Background" /> + </div> + </div> + {/if} + + <div class="content"> + <slot /> + </div> +</main> + +<style> + main { + position: relative; + height: 100%; + } + .content { + position: absolute; + top: 0; + bottom: 0; + } + + .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); + } + + .content > :global(#categories), + .content > :global(.profile-list) { + max-width: 47rem; + } + + @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) { + .blurred-background-container-container { + left: 0 !important; + width: 100vw !important; + } + } +</style> diff --git a/src/routes/player/[player]/[profile]/+page.svelte b/src/routes/player/[player]/[profile]/+page.svelte index 8a3adbb..720c49e 100644 --- a/src/routes/player/[player]/[profile]/+page.svelte +++ b/src/routes/player/[player]/[profile]/+page.svelte @@ -32,6 +32,7 @@ import { cleanId } from '$lib/utils' import Head from '$lib/Head.svelte' import Toc from '$lib/Toc.svelte' + import Main from '../Main.svelte' export let data: PageData & CleanMemberProfile @@ -85,15 +86,7 @@ blurred={data.customization?.blurBackground ?? false} /> -<main class:has-blurred-background={data.customization?.blurBackground && backgroundUrl}> - {#if data.customization?.blurBackground && backgroundUrl} - <div class="blurred-background-container-container"> - <div class="blurred-background-container"> - <img class="blurred-background" src={backgroundUrl} alt="Background" /> - </div> - </div> - {/if} - +<Main blurred={data.customization?.blurBackground} {backgroundUrl}> <h1> <!-- this is weird like this so svelte doesn't add whitespace --> <Username player={data.member} headType="3d" />{#if data.customization?.emoji}<span @@ -276,12 +269,9 @@ </section> </div> </div> -</main> +</Main> <style> - main { - position: relative; - } .profile-emoji { display: inline; } @@ -309,45 +299,12 @@ 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; - } } .skill-heading-container { @@ -366,10 +323,6 @@ font-size: 0.9rem; } - .has-blurred-background #categories { - width: 47rem; - } - .technoblade-never-dies { border: 1px solid rgba(255, 255, 255, 0.1); background: rgba(0, 0, 0, 0.1); |