update: redesign links page with liuzhen932-style cards

src/pages/links.astro

@@ -39,19 +39,26 @@ const links: FriendLink[] = [
   <Breadcrumb />
 
   <Main pageTitle="友链" pageDesc="我的朋友们的博客和网站" class="app-prose">
-    <div class="links-grid">
+    <div class="grid grid-cols-1 gap-4 sm:grid-cols-2 mb-8">
       {
         links.map((link) => (
           <a
             href={link.url}
             target="_blank"
             rel="noopener noreferrer"
-            class="link-card"
+            class="flex items-center gap-4 rounded-xl border border-border bg-background px-4 transition-all duration-300 hover:shadow-lg"
           >
-            <img src={link.avatar} alt={`${link.name} 图标`} class="link-avatar" />
+            <img
-            <div class="link-info">
+              src={link.avatar}
-              <span class="link-name">{link.name}</span>
+              alt={`${link.name} 的头像`}
-              <span class="link-desc">{link.desc}</span>
+              class="h-12 w-12 flex-shrink-0 rounded-full"
+              width="48"
+              height="48"
+              loading="lazy"
+            />
+            <div class="min-w-0 flex-1">
+              <h3 class="truncate text-sm font-medium text-foreground">{link.name}</h3>
+              <p class="mt-1 truncate text-xs text-foreground/60">{link.desc}</p>
             </div>
           </a>
         ))
@@ -80,62 +87,3 @@ const links: FriendLink[] = [
 
   <Footer />
 </Layout>
-
-<style is:global>
-  .links-grid {
-    display: grid;
-    grid-template-columns: repeat(auto-fill, minmax(320px, 1fr));
-    gap: 0.75rem;
-    margin-bottom: 2rem;
-  }
-
-  .link-card {
-    display: flex;
-    align-items: center;
-    gap: 0.75rem;
-    padding: 0.75rem 1rem;
-    border: 1px solid var(--border);
-    border-radius: 0.75rem;
-    background: var(--background);
-    transition: all 0.2s ease;
-    text-decoration: none;
-    color: var(--foreground);
-  }
-
-  .link-card:hover {
-    border-color: var(--accent);
-    background: var(--muted);
-    transform: translateY(-1px);
-  }
-
-  .link-avatar {
-    width: 42px;
-    height: 42px;
-    border-radius: 50%;
-    flex-shrink: 0;
-    object-fit: cover;
-    background: var(--muted);
-  }
-
-  .link-info {
-    display: flex;
-    flex-direction: column;
-    gap: 0.15rem;
-    min-width: 0;
-  }
-
-  .link-name {
-    font-weight: 600;
-    font-size: 1rem;
-    line-height: 1.3;
-  }
-
-  .link-desc {
-    font-size: 0.82rem;
-    color: var(--muted-foreground);
-    line-height: 1.3;
-    overflow: hidden;
-    text-overflow: ellipsis;
-    white-space: nowrap;
-  }
-</style>