From b24faf36d612f584770a404bd750943a55dab3e2 Mon Sep 17 00:00:00 2001
From: mat <github@matdoes.dev>
Date: Fri, 18 Mar 2022 22:27:32 -0500
Subject: Implement blur and darken background

---
 src/lib/Header.svelte | 7 ++++++-
 1 file changed, 6 insertions(+), 1 deletion(-)

(limited to 'src/lib/Header.svelte')

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>
-- 
cgit