From fb8ac54bd304bb28e68e8ff5d189b346e99116ee Mon Sep 17 00:00:00 2001
From: Zicklag <zicklag@katharostech.com>
Date: Sun, 19 Jan 2025 14:16:47 -0600
Subject: [PATCH] style: add a backdrop blur to cards.

Inspired by @Henry-Wow's PR: #282
---
 src/app.css                                   | 1 +
 src/lib/components/layouts/OuterLayout.svelte | 2 +-
 src/routes/(app)/[username]/+layout.svelte    | 4 ++--
 src/routes/(app)/[username]/+page.svelte      | 6 +-----
 4 files changed, 5 insertions(+), 8 deletions(-)

diff --git a/src/app.css b/src/app.css
index 3077dd06..49c1d82d 100644
--- a/src/app.css
+++ b/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 {
diff --git a/src/lib/components/layouts/OuterLayout.svelte b/src/lib/components/layouts/OuterLayout.svelte
index 5cede97f..3891a472 100644
--- a/src/lib/components/layouts/OuterLayout.svelte
+++ b/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}
diff --git a/src/routes/(app)/[username]/+layout.svelte b/src/routes/(app)/[username]/+layout.svelte
index 850ff8b0..431b1b7d 100644
--- a/src/routes/(app)/[username]/+layout.svelte
+++ b/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;
diff --git a/src/routes/(app)/[username]/+page.svelte b/src/routes/(app)/[username]/+page.svelte
index 5a23b8d9..ed18d117 100644
--- a/src/routes/(app)/[username]/+page.svelte
+++ b/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}