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/lib/Header.svelte | |
| 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/lib/Header.svelte')
| -rw-r--r-- | src/lib/Header.svelte | 7 |
1 files changed, 6 insertions, 1 deletions
diff --git a/src/lib/Header.svelte b/src/lib/Header.svelte index 825b4f3..3c84a7e 100644 --- a/src/lib/Header.svelte +++ b/src/lib/Header.svelte @@ -3,10 +3,11 @@ import SearchUser from './SearchUser.svelte' export let backArrowHref = '/' + export let blurred: boolean let searchUserValue = '' </script> -<header id="main-header"> +<header id="main-header" class:blurred={blurred}> <a href={backArrowHref} class="back-arrow-anchor" aria-label="back" sveltekit:prefetch> <svg class="back-arrow" height="33" width="23"> <path d="M 14 0 l -13 13 l 13 13" stroke-width="2" fill="none" /> @@ -47,4 +48,8 @@ .back-arrow:hover { stroke: var(--theme-main-text); } + #main-header.blurred { + background-color: rgba(0, 0, 0, 0.4); + backdrop-filter: blur(1em); + } </style> |