buyfakett/kazoottt-blog-v2
1
0
Fork 0
mirror of https://github.com/KazooTTT/kazoottt-blog-v2.git synced 2025-06-24 03:01: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"; 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"> <div class="flex sm:flex-col">
<a <a
aria-current={Astro.url.pathname === "/" ? "page" : false} 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 ", description: "my friends ",
}} }}
> >
<div class="container mx-auto px-4 py-8"> <div class="mb-6 flex items-center gap-3">
<h1 class="title mb-6">Friends</h1> <h1 class="title">Friends</h1>
<div class="grid grid-cols-1 gap-6 md:grid-cols-2"> </div>
{ <div class="grid grid-cols-1 gap-6 md:grid-cols-2">
friends.map((friend) => ( {
<a friends.map((friend) => (
href={friend.url.startsWith("http") ? friend.url : `https://${friend.url}`} <a
target="_blank" href={friend.url.startsWith("http") ? friend.url : `https://${friend.url}`}
rel="noopener noreferrer" target="_blank"
class="block rounded-lg bg-white p-6 shadow-md transition-shadow duration-300 hover:shadow-lg dark:bg-gray-800" 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 && ( <h2 class="text-xl font-semibold">{friend.name}</h2>
<p class="mt-2 truncate text-sm text-gray-600 dark:text-gray-400"> {friend.description && (
{friend.description} <p class="mt-2 truncate text-sm text-gray-600 dark:text-gray-400">
</p> {friend.description}
)} </p>
</a> )}
)) </a>
} ))
</div> }
</div> </div>
</BaseLayout> </BaseLayout>
<style>
.container {
max-width: 1200px;
}
</style>