style(ui): modify

Author: gxres042

src/components/Header.svelte

@@ -8,7 +8,7 @@
 </script>
 
 <header
-	class="shadow-md flex flex-col items-center justify-center bg-gradient-to-r from-blue-100 dark:from-blue-500/50 to-cyan-100 dark:to-cyan-500/50"
+	class="shadow-md flex flex-col items-center justify-center bg-gradient-to-r from-blue-100 dark:from-blue-500/50 to-cyan-100 dark:to-cyan-500/50 z-10"
 >
 	<div class="p-4 flex flex-col md:flex-row gap-4 items-center">
 		<img

src/lib/assets/style.css

@@ -1,6 +1,6 @@
-body,
-h1 {
+body {
 	margin: 0;
+	background-color: rgb(241 245 249);
 }
 
 html {
@@ -32,6 +32,7 @@ h1 {
 	font-size: 2.25rem; /* 36px */
 	line-height: 2.5rem; /* 40px */
 	font-weight: 500;
+	margin: 0;
 }
 
 h2 {
@@ -77,6 +78,9 @@ code {
 	html {
 		color-scheme: dark;
 	}
+	body {
+		background-color: rgb(2 6 23)
+	}
 	*,
 	*::before,
 	*::after {

src/routes/+layout.svelte

@@ -22,10 +22,12 @@
 	<link rel="canonical" href="https://insli.cc" />
 </svelte:head>
 
-<div class="flex flex-col min-h-svh">
+<div class="max-w-2xl mx-auto flex flex-col min-h-svh">
 	<Header />
-	<main class="flex-auto p-4 max-w-2xl mx-auto w-full">
-		<slot />
+	<main class="flex-auto w-full">
+		<section class="p-4 bg-white dark:bg-slate-800 shadow rounded-b-md">
+			<slot />
+		</section>
 	</main>
 	<footer>
 		<p class="text-center text-sm">