style: update sidebar style tweak card styles to match mock-up closer.

src/app.css

@@ -2,3 +2,11 @@
 @tailwind components;
 @tailwind utilities;
 @tailwind variants;
+
+.input {
+    @apply !border-white !bg-purple-950/10 !text-white;
+}
+
+input::placeholder {
+    @apply !text-white/70;
+}

src/lib/components/layouts/OuterLayout.svelte

@@ -12,7 +12,9 @@
 	<title>{env.PUBLIC_INSTANCE_NAME}</title>
 </svelte:head>
 
-<AppBar background="bg-surface-100/10" i classes="blur-sm">
+<div class="stars"></div>
+
+<AppBar background="bg-pink-300/20">
 	{#snippet lead()}
 		<img src="/favicon.png" alt="Weird Logo" width="40px" />
 	{/snippet}
@@ -87,7 +89,26 @@
 		src: url('/UncutSans-Variable.woff2');
 	}
 
-	.weird-container {
+	:global(body) {
+    /* background: linear-gradient(180deg, #250941 20%, #de7287 40%); */
 		background: linear-gradient(180deg, #240940 20%, #8e4569 60%, #cb5873);
+    background-repeat: no-repeat;
+    background-size: cover;
+  }
+
+	.stars {
+		background: url('/stars.avif');
+		pointer-events: none;
+		/* extend a bit more than the viewport */
+		height: 100vh;
+		width: 100%;
+		background-position: center;
+		background-size: 100%;
+		background-blend-mode: darken;
+		position: absolute;
+		left: 0;
+		top: 0;
+		overflow: hidden;
+		opacity: 0.25;
 	}
 </style>

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

@@ -64,7 +64,7 @@
 <div class="flex flex-row flex-wrap-reverse justify-center sm:flex-nowrap">
 	{#if data.profileMatchesUserSession}
 		<aside
-			class="card sticky top-8 mx-4 my-8 flex w-full min-w-[15em] flex-col p-5 sm:h-[85vh] sm:w-auto"
+			class="sticky top-8 mx-4 my-8 flex w-full min-w-[15em] flex-col border-[1px] border-black rounded-xl bg-pink-300/10 p-5 sm:h-[85vh] sm:w-auto"
 		>
 			<div class="mb-3 flex flex-row items-start justify-between">
 				<h1 class="mb-2 text-xl font-bold">Pages</h1>
@@ -91,16 +91,16 @@
 			<h2 class="mb-2 text-lg font-bold">Settings</h2>
 			<div class="flex flex-col gap-2">
 				<button
-					class="variant-ghost btn"
+					class="variant-outline btn"
 					onclick={() => modalStore.trigger(manageSubscriptionModal)}
 				>
 					Manage Subscription
 				</button>
-				<button class="variant-ghost btn" onclick={() => modalStore.trigger(setHandleModal)}>
+				<button class="variant-outline btn" onclick={() => modalStore.trigger(setHandleModal)}>
 					Change Handle
 				</button>
 				<button
-					class="variant-ghost-error btn"
+					class="variant-outline btn"
 					onclick={() => modalStore.trigger(deleteProfileModal)}
 				>
 					Delete Profile

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

@@ -155,7 +155,7 @@
 
 <main class="mx-4 flex w-full flex-col items-center font-spacemono">
 	<div
-		class="m-4 mt-12 flex w-full max-w-[700px] flex-col gap-4 rounded-xl border-2 border-black bg-white/5 p-8 text-xl"
+		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"
 	>
 		<div class="relative flex items-center gap-4">
 			{#if !editingState.editing}

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

@@ -73,7 +73,7 @@
 
 <main class="mx-4 flex w-full flex-col items-center font-spacemono">
 	<div
-		class="relative m-4 mt-12 flex w-full max-w-[700px] flex-col justify-center gap-4 rounded-md border-2 border-black bg-white/5 p-8 text-xl"
+		class="relative m-4 mt-12 flex w-full max-w-[700px] flex-col justify-center gap-4 border-[1px] border-black rounded-xl bg-pink-300/10 p-8 text-xl"
 	>
 		<h1 class="relative mt-2 max-w-72 self-center text-center font-rubik text-4xl">
 			{#if !editingState.editing}

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

@@ -58,7 +58,7 @@
 </svelte:head>
 
 <main class="mx-4 mt-4 flex w-full flex-col items-center">
-	<div class="card m-4 mt-8 flex w-full max-w-[700px] flex-col gap-4 p-8 text-xl">
+	<div class="border-[1px] border-black rounded-xl bg-pink-300/10 m-4 mt-8 flex w-full max-w-[700px] flex-col gap-4 p-8 text-xl">
 		<h1 class="relative my-3 text-center text-4xl">
 			<div>
 				<InlineTextEditor bind:this={displayNameEditorEl} bind:content={page.display_name} />

src/routes/(app)/people/+page.svelte

@@ -1,6 +1,5 @@
 <script lang="ts">
 	import { env } from '$env/dynamic/public';
-	import MainContent from '$lib/components/theme/MainContent.svelte';
 	import SearchInput from '$lib/components/theme/SearchInput.svelte';
 	import type { SvelteComponent } from 'svelte';
 	import type { PageData } from './$types';