style: improve styles on user pages.

Particularly make the wiki page toggle more obvious
which mode it's in and improve page width for
pages without much content.

src/app.css

@@ -20,3 +20,11 @@ input::placeholder {
 .modal.contents .card {
 	@apply !bg-purple-950;
 }
+
+.slide-toggle-track {
+	@apply !bg-white/20;
+}
+
+[aria-checked='true'] .slide-toggle-track {
+	@apply !bg-success-500/75;
+}

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

@@ -106,7 +106,7 @@
 
 	<div class="hidden flex-grow sm:block"></div>
 
-	<div class="flex max-w-full flex-col items-center">
+	<div class="flex max-w-full grow flex-col items-center">
 		{#if error}
 			<aside class="alert variant-ghost-error relative mt-8 w-full">
 				<div class="alert-message">

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

@@ -176,7 +176,7 @@
 					</figcaption>
 				</figure>
 			{/if}
-			<div class="max-w-ful flex flex-shrink flex-col overflow-hidden">
+			<div class="flex flex-shrink flex-col overflow-hidden">
 				<h1 class="relative grid overflow-hidden text-ellipsis font-rubik text-4xl">
 					{#if !editingState.editing}
 						<div style="grid-area: 1 / 1;">

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

@@ -71,11 +71,11 @@
 	</title>
 </svelte:head>
 
-<main class="mx-4 flex w-full flex-col items-center font-spacemono">
+<main class="mx-4 flex w-full max-w-[800px] flex-col items-center px-2 font-spacemono">
 	<div
-		class="relative m-4 mt-12 flex w-full max-w-[700px] flex-col justify-center gap-4 rounded-xl border-[1px] border-black bg-pink-300/10 p-8 text-xl"
+		class="relative m-4 mt-12 flex w-full flex-col justify-center gap-4 rounded-xl border-[1px] border-black bg-pink-300/10 p-8 text-xl"
 	>
-		<h1 class="relative mt-2 max-w-72 self-center text-center font-rubik text-4xl">
+		<h1 class="relative mx-[2em] mt-2 grow self-center text-center font-rubik text-4xl">
 			{#if !editingState.editing}
 				{data.page.display_name}
 			{:else}