src/components/HitokotoCard.astro

@@ -342,6 +342,38 @@
     }
   }
 
+  .hitokoto-card,
+  :root[data-theme='dark'] .hitokoto-card {
+    border: 1px solid var(--line);
+    border-radius: 2px;
+    color: var(--text);
+    background: var(--surface-strong);
+    box-shadow: 5px 5px 0 color-mix(in srgb, var(--text) 14%, transparent);
+    backdrop-filter: none;
+    -webkit-backdrop-filter: none;
+  }
+
+  .hitokoto-card__refresh,
+  .hitokoto-card__collapse,
+  :root[data-theme='dark'] .hitokoto-card__refresh,
+  :root[data-theme='dark'] .hitokoto-card__collapse {
+    border-color: var(--line);
+    border-radius: 2px;
+    background: transparent;
+  }
+
+  .hitokoto-card__refresh:hover,
+  .hitokoto-card__collapse:hover {
+    color: #fff;
+    background: var(--accent);
+    transform: none;
+  }
+
+  .hitokoto-card__text,
+  :root[data-theme='dark'] .hitokoto-card__text {
+    color: var(--text);
+  }
+
   @media (max-width: 720px) {
     .hitokoto-card {
       left: 12px;

src/components/HomeSidebar.astro

@@ -11,13 +11,18 @@ interface Props {
 
 const { posts, tags, categories } = Astro.props;
 const avatar = siteConfig.author.avatar;
-const recentPosts = posts.slice(0, 5);
 ---
 
 <aside class="home-sidebar" aria-label="首页侧边栏">
   <section class="sidebar-card profile-card">
-    <img class="profile-avatar" src={avatar} alt={siteConfig.author.name} loading="lazy" />
-    <div class="profile-name">{siteConfig.author.name}</div>
+    <div class="profile-identity">
+      <img class="profile-avatar" src={avatar} alt={siteConfig.author.name} loading="lazy" />
+      <div>
+        <span>MAINTAINER</span>
+        <strong class="profile-name">{siteConfig.author.name}</strong>
+      </div>
+    </div>
+    <p class="profile-bio">在代码、图形和自托管服务之间做长期记录。</p>
     <div class="profile-stats">
       <a href="/archives/">
         <span>文章</span>
@@ -33,8 +38,8 @@ const recentPosts = posts.slice(0, 5);
       </a>
     </div>
     <a class="follow-button" href={siteConfig.author.github} target="_blank" rel="noreferrer">
-      <span class="github-mark" aria-hidden="true">GitHub</span>
-      <span>Follow Me</span>
+      <span>查看 GitHub</span>
+      <span aria-hidden="true">↗</span>
     </a>
     <div class="profile-links" aria-label="联系方式">
       <a href={siteConfig.author.github} target="_blank" rel="noreferrer" aria-label="GitHub">GitHub</a>
@@ -44,7 +49,7 @@ const recentPosts = posts.slice(0, 5);
 
   <div class="sticky-sidebar">
     <section class="sidebar-card notice-card">
-      <h2><span aria-hidden="true">!</span> 公告</h2>
+      <h2><span aria-hidden="true">●</span> 站点广播</h2>
       <div id="welcome-ip-location-info">
         欢迎来自 <strong>远方</strong> 的小友。<br />
         烧烤三件套，灵魂蘸料。<br />
@@ -94,25 +99,6 @@ const recentPosts = posts.slice(0, 5);
       </div>
     </section>
 
-    <section class="sidebar-card recent-card">
-      <h2>最新文章</h2>
-      <div class="sidebar-posts">
-        {recentPosts.map((post) => (
-          <a class="sidebar-post" href={post.href}>
-            {post.cover ? (
-              <img src={post.cover} alt="" loading="lazy" />
-            ) : (
-              <span class="post-thumb-fallback" aria-hidden="true"></span>
-            )}
-            <span>
-              <strong>{post.title}</strong>
-              <time datetime={post.date.toISOString()}>{post.dateText}</time>
-            </span>
-          </a>
-        ))}
-      </div>
-    </section>
-
     <SiteInfoCard posts={posts} />
   </div>
 </aside>

src/components/PostCard.astro

@@ -3,16 +3,27 @@ import { getCategoryHref, type BlogPost } from '@/lib/posts';
 
 interface Props {
   post: BlogPost;
+  index?: number;
 }
 
-const { post } = Astro.props;
+const { post, index } = Astro.props;
+const logNumber = index === undefined
+  ? post.date.toISOString().slice(5, 10).replace('-', '.')
+  : String(index + 1).padStart(2, '0');
 ---
 
 <article class="post-card">
-  <a href={post.href}>
-    <time datetime={post.date.toISOString()}>{post.dateText}</time>
-    <h2>{post.title}</h2>
-    {post.summary && <p>{post.summary}</p>}
+  <a class="post-card-main" href={post.href}>
+    <span class="post-card-index" aria-hidden="true">
+      <small>LOG</small>
+      <strong>{logNumber}</strong>
+    </span>
+    <span class="post-card-copy">
+      <time datetime={post.date.toISOString()}>{post.dateText}</time>
+      <span class="post-card-title">{post.title}</span>
+      {post.summary && <span class="post-card-summary">{post.summary}</span>}
+    </span>
+    <span class="post-card-open" aria-hidden="true">↗</span>
   </a>
   <div class="meta-list">
     {post.categories.map((category) => <a href={getCategoryHref(category)}>{category}</a>)}