From 5056450ca59b6450644cdb3a8f4308260a520a3b Mon Sep 17 00:00:00 2001
From: KazooTTT <work@kazoottt.top>
Date: Wed, 5 Feb 2025 23:06:17 +0800
Subject: [PATCH] refactor: simplify friends page layout and header styling

---
 src/components/layout/Header.astro |  2 +-
 src/pages/friends.astro            | 48 +++++++++++++-----------------
 2 files changed, 22 insertions(+), 28 deletions(-)

diff --git a/src/components/layout/Header.astro b/src/components/layout/Header.astro
index 342a661..26f4785 100644
--- a/src/components/layout/Header.astro
+++ b/src/components/layout/Header.astro
@@ -4,7 +4,7 @@ import ThemeToggle from "@/components/ThemeToggle.astro";
 import { menuLinks, siteConfig } from "@/site.config";
 ---
 
-<header class="group relative mb-28 flex items-center sm:ps-18" id="main-header">
+<header class="group relative mb-14 flex items-center sm:ps-18" id="main-header">
 	<div class="flex sm:flex-col">
 		<a
 			aria-current={Astro.url.pathname === "/" ? "page" : false}
diff --git a/src/pages/friends.astro b/src/pages/friends.astro
index 1c38b3c..4c0aa92 100644
--- a/src/pages/friends.astro
+++ b/src/pages/friends.astro
@@ -47,32 +47,26 @@ const friends: { name: string; url: string; description?: string }[] = [
 		description: "my friends ",
 	}}
 >
-	<div class="container mx-auto px-4 py-8">
-		<h1 class="title mb-6">Friends</h1>
-		<div class="grid grid-cols-1 gap-6 md:grid-cols-2">
-			{
-				friends.map((friend) => (
-					<a
-						href={friend.url.startsWith("http") ? friend.url : `https://${friend.url}`}
-						target="_blank"
-						rel="noopener noreferrer"
-						class="block rounded-lg bg-white p-6 shadow-md transition-shadow duration-300 hover:shadow-lg dark:bg-gray-800"
-					>
-						<h2 class="text-xl font-semibold">{friend.name}</h2>
-						{friend.description && (
-							<p class="mt-2 truncate text-sm text-gray-600 dark:text-gray-400">
-								{friend.description}
-							</p>
-						)}
-					</a>
-				))
-			}
-		</div>
+	<div class="mb-6 flex items-center gap-3">
+		<h1 class="title">Friends</h1>
+	</div>
+	<div class="grid grid-cols-1 gap-6 md:grid-cols-2">
+		{
+			friends.map((friend) => (
+				<a
+					href={friend.url.startsWith("http") ? friend.url : `https://${friend.url}`}
+					target="_blank"
+					rel="noopener noreferrer"
+					class="block rounded-lg bg-white p-6 shadow-md transition-shadow duration-300 hover:shadow-lg dark:bg-gray-800"
+				>
+					<h2 class="text-xl font-semibold">{friend.name}</h2>
+					{friend.description && (
+						<p class="mt-2 truncate text-sm text-gray-600 dark:text-gray-400">
+							{friend.description}
+						</p>
+					)}
+				</a>
+			))
+		}
 	</div>
 </BaseLayout>
-
-<style>
-	.container {
-		max-width: 1200px;
-	}
-</style>