style: add a backdrop blur to cards.

Inspired by @Henry-Wow's PR: #282

src/app.css

@@ -15,6 +15,7 @@ input::placeholder {
 
 .card {
 	@apply !rounded-xl !border-[1px] !border-black !bg-pink-300/10;
+	backdrop-filter: blur(2px)
 }
 
 .modal.contents .card {

src/lib/components/layouts/OuterLayout.svelte

@@ -14,7 +14,7 @@
 
 <div class="stars"></div>
 
-<AppBar background="bg-pink-300/20">
+<AppBar background="bg-pink-300/20 backdrop-blur-[2px]">
 	{#snippet lead()}
 		<img src="/logo.webp" alt="Weird Logo" width="40px" />
 	{/snippet}

src/routes/(app)/[username]/+layout.svelte

@@ -78,7 +78,7 @@
 
 <div class="flex max-w-full flex-row flex-wrap-reverse justify-center sm:flex-nowrap">
 	{#if data.profileMatchesUserSession}
-		<aside class="sidebar">
+		<aside class="sidebar card">
 			<div class="mb-3 flex flex-row items-start justify-between">
 				<h1 class="mb-2 text-xl font-bold">Pages</h1>
 				<a
@@ -164,7 +164,7 @@
 
 <style>
 	.sidebar {
-		@apply sticky top-8 mx-4 my-8 flex w-full flex-shrink flex-col rounded-xl border-[1px] border-black bg-pink-300/10 p-5 sm:h-[85vh] sm:w-auto;
+		@apply sticky top-8 mx-4 my-8 flex w-full flex-shrink flex-col rounded-xl  p-5 sm:h-[85vh] sm:w-auto;
 		flex-basis: 18em;
 		.btn {
 			text-wrap: wrap;

src/routes/(app)/[username]/+page.svelte

@@ -127,7 +127,7 @@
 
 <main class="mx-4 flex w-full max-w-full flex-col items-center px-2 font-spacemono">
 	<div
-		class="m-4 mt-12 flex w-full max-w-[700px] flex-col gap-4 rounded-xl border-[1px] border-black bg-pink-300/10 p-8 text-xl"
+		class="m-4 mt-12 flex w-full max-w-[700px] flex-col gap-4 rounded-xl card p-8 text-xl"
 	>
 		<div class="relative flex items-center gap-4">
 			{#if !editingState.editing}
@@ -156,10 +156,6 @@
 						</div>
 					{:else}
 						<div style="grid-area: 1 / 1;">
-							<button
-								class="variant-filled badge absolute right-[-4em] top-[-2em] z-10"
-								onclick={() => displayNameEditorEl.focus()}>Click to Edit!</button
-							>
 							<InlineTextEditor
 								bind:this={displayNameEditorEl}
 								bind:content={editingState.profile.display_name as string}