buyfakett/kazoottt-blog-v2
1
0
Fork 0
mirror of https://github.com/KazooTTT/kazoottt-blog-v2.git synced 2025-06-23 18:51:30 +08:00
Code Issues Packages Projects Releases Wiki Activity

refactor: simplify friends page layout and header styling

Browse Source
This commit is contained in:
KazooTTT
2025-02-05 23:06:17 +08:00
parent 8e3e1d5834
commit 5056450ca5
2 changed files with 22 additions and 28 deletions
Download Patch File Download Diff File Expand all files Collapse all files

2
src/components/layout/Header.astro
View File

@ -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}

48
src/pages/friends.astro
View File

@ -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>