fix: make header max-w-4xl

src/components/Header.astro

@@ -9,16 +9,16 @@ const lang = getLangFromUrl(Astro.url);
 const translation = useTranslations(lang);
 ---
 
-<header>
-	<div class="left">
-		<a href="https://auxolotl.org" class="brand">
-			<Image class="icon" src={aux} alt="auxolotl.org logo" />
-			<span class="title">auxolotl.org</span>
+<header class="sticky flex justify-between top-0 bg-[rgb(var(--background))] z-10 max-w-4xl mx-auto p-4 text-lg">
+	<div class="flex items-center">
+		<a href="https://auxolotl.org" class="flex items-center text-lg gap-4">
+			<Image class="w-12 h-12" src={aux} alt="auxolotl.org logo" />
+			<span>Auxolotl</span>
 		</a>
 	</div>
-	<div class="right">
+
 	<nav>
-			<ul>
+		<ul class="flex gap-4 items-center h-full">
 		<!--
 			<li><a href="https://auxolotl.org/contribute">Contribute</a></li>
 		-->
@@ -28,62 +28,4 @@ const translation = useTranslations(lang);
 			<li><a href="https://github.com/auxolotl">GitHub</a></li>
 		</ul>
 	</nav>
-	</div>
 </header>
-
-<style>
-	header {
-		position: sticky;
-		display: flex;
-		justify-content: space-between;
-		top: 0;
-		background: rgb(var(--background));
-		padding: 0.5rem 0;
-		z-index: 100;
-	}
-
-	.left {
-		display: flex;
-		align-items: center;
-		padding-left: 0.5rem;
-	}
-
-	.left .brand {
-		display: flex;
-		align-items: center;
-		font-size: 1.5rem;
-	}
-
-	.left .brand .title {
-		padding-left: 0.5rem;
-	}
-
-	.icon {
-		width: 48px;
-		height: 48px;
-	}
-
-	.right {
-		display: flex;
-		justify-content: flex-end;
-		align-items: center;
-		padding-right: 1rem;
-	}
-
-	.right nav {
-		display: flex;
-		align-items: center;
-	}
-
-	.right nav ul {
-		display: flex;
-		list-style: none;
-	}
-
-	.right nav ul li {
-	}
-
-	.right nav ul li:not(:last-child) {
-		margin-right: 1rem;
-	}
-</style>