Merge pull request 'Codex/design 启用新的页面风格' (#10) from codex/design into master

Reviewed-on: #10

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-identity">
-    <div class="profile-name">{siteConfig.author.name}</div>
+      <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>查看 GitHub</span>
-      <span>Follow Me</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}>
+  <a class="post-card-main" href={post.href}>
-    <time datetime={post.date.toISOString()}>{post.dateText}</time>
+    <span class="post-card-index" aria-hidden="true">
-    <h2>{post.title}</h2>
+      <small>LOG</small>
-    {post.summary && <p>{post.summary}</p>}
+      <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>)}

src/layouts/BaseLayout.astro

@@ -122,7 +122,7 @@ const consoleSites = [
   <body>
     <header class="site-header">
       <nav class="nav">
-        <a class="brand" href="/">{siteConfig.site.name}</a>
+        <a class="brand" href="/" aria-label={`${siteConfig.site.name} 首页`}><span>{siteConfig.author.name}</span><i>.log</i></a>
         <button class="nav-menu-toggle" type="button" aria-label="打开菜单" aria-expanded="false" data-nav-toggle>
           <i class="fa-solid fa-bars nav-menu-open" aria-hidden="true"></i>
           <i class="fa-solid fa-xmark nav-menu-close" aria-hidden="true"></i>

src/pages/about.astro

@@ -5,42 +5,42 @@ import { siteConfig } from '../../site.config.mjs';
 ---
 
 <BaseLayout title="关于" description={`关于 ${siteConfig.site.name} 和站长 ${siteConfig.author.name} 的简短介绍。`}>
-  <section class="content-wrap narrow page-with-card native-page">
+  <section class="content-wrap page-with-card native-page">
     <PageHeaderCard title="关于" subtitle="这里记录折腾、学习和一些普通日子的回声。" />
-  </section>
 
-  <article class="article page-article native-page-article">
+    <article class="article page-article native-page-article about-page-article">
-    <div class="prose">
+      <div class="prose">
-      <p>
+        <p>
-        你好，我是 Bi。这个博客主要用来保存技术实践、生活片段和那些一时半会儿不想让它们散掉的想法。
+          你好，我是 Bi。这个博客主要用来保存技术实践、生活片段和那些一时半会儿不想让它们散掉的想法。
-      </p>
+        </p>
 
-      <div class="native-feature-grid">
+        <div class="native-feature-grid">
-        <section>
+          <section>
-          <i class="fa-solid fa-code" aria-hidden="true"></i>
+            <i class="fa-solid fa-code" aria-hidden="true"></i>
-          <h2>技术笔记</h2>
+            <h2>技术笔记</h2>
-          <p>记录服务器、网络、开发环境、图像处理和一些实际踩坑过程。</p>
+            <p>记录服务器、网络、开发环境、图像处理和一些实际踩坑过程。</p>
-        </section>
+          </section>
-        <section>
+          <section>
-          <i class="fa-regular fa-comments" aria-hidden="true"></i>
+            <i class="fa-regular fa-comments" aria-hidden="true"></i>
-          <h2>日常碎片</h2>
+            <h2>日常碎片</h2>
-          <p>把普通的一天、突然冒出来的灵感和一点点情绪留在这里。</p>
+            <p>把普通的一天、突然冒出来的灵感和一点点情绪留在这里。</p>
-        </section>
+          </section>
-        <section>
+          <section>
-          <i class="fa-solid fa-seedling" aria-hidden="true"></i>
+            <i class="fa-solid fa-seedling" aria-hidden="true"></i>
-          <h2>持续生长</h2>
+            <h2>持续生长</h2>
-          <p>网站本身也在慢慢迁移和重写，新的页面会逐步变成原生实现。</p>
+            <p>网站本身也在慢慢迁移和重写，新的页面会逐步变成原生实现。</p>
-        </section>
+          </section>
+        </div>
+
+        <h2>联系</h2>
+        <p>
+          如果你想交流文章内容、友链或网站相关问题，可以通过
+          <a href={`mailto:${siteConfig.author.email}`}>{siteConfig.author.email}</a>
+          联系我，也可以去
+          <a href={siteConfig.author.github} target="_blank" rel="noreferrer">GitHub</a>
+          找到我。
+        </p>
       </div>
-
+    </article>
-      <h2>联系</h2>
+  </section>
-      <p>
-        如果你想交流文章内容、友链或网站相关问题，可以通过
-        <a href={`mailto:${siteConfig.author.email}`}>{siteConfig.author.email}</a>
-        联系我，也可以去
-        <a href={siteConfig.author.github} target="_blank" rel="noreferrer">GitHub</a>
-        找到我。
-      </p>
-    </div>
-  </article>
 </BaseLayout>

src/pages/archives/index.astro

@@ -19,7 +19,7 @@ const archiveStats = [...posts.reduce((months, post) => {
 ---
 
 <BaseLayout title="归档">
-  <section class="content-wrap narrow">
+  <section class="content-wrap">
     <PageHeaderCard title="归档" subtitle={`共 ${posts.length} 篇文章`} />
     <StatsChart title="归档发布趋势" subtitle="按月份统计文章发布数量" type="line" items={archiveStats} />
     <ArchiveTimeline posts={pageData.items} />

src/pages/archives/page/[page].astro

@@ -29,7 +29,7 @@ const archiveStats = [...posts.reduce((months, post) => {
 ---
 
 <BaseLayout title={`归档 - 第 ${pageData.currentPage} 页`}>
-  <section class="content-wrap narrow">
+  <section class="content-wrap">
     <PageHeaderCard title="归档" subtitle={`共 ${posts.length} 篇文章，第 ${pageData.currentPage} 页`} />
     <StatsChart title="归档发布趋势" subtitle="按月份统计文章发布数量" type="line" items={archiveStats} />
     <ArchiveTimeline posts={pageData.items} />

src/pages/categories/index.astro

@@ -32,7 +32,7 @@ const categoryChartSubtitle = [
 ---
 
 <BaseLayout title="分类">
-  <section class="content-wrap narrow">
+  <section class="content-wrap">
     <PageHeaderCard title="分类" subtitle={`共 ${categories.length} 个分类`} />
     <StatsChart title="分类归档统计" subtitle={categoryChartSubtitle} type="pie" items={categoryChartStats} totalLabel="次归档" />
     <div class="term-grid">

src/pages/index.astro

@@ -16,14 +16,15 @@ const pageData = getPageSlice(posts, 1);
 <BaseLayout>
   <section class="hero home-hero">
     <div class="hero-copy">
-      <p class="eyebrow">写给日常、技术和正在发生的自己</p>
+      <p class="hero-kicker"><span>FIELD NOTES</span><span>2025—NOW</span></p>
-      <h1>{siteConfig.site.name}</h1>
+      <h1><span>{siteConfig.author.name}</span><em>/log</em></h1>
-      <p>把折腾、学习和生活片段安静地收在这里。</p>
+      <p class="hero-intro">记录代码跑通之前，也记录它为什么没跑通。</p>
+      <p class="hero-route">OpenCV · OpenGL · 自托管服务 · 没打算归类的日常</p>
     </div>
     <aside id="bber-talk" class="hero-talk" aria-label="说说滚动展示">
       <div class="hero-talk-head">
-        <span>Recent Talks</span>
+        <span><strong>RECENT.TXT</strong><small>最近的碎片记录</small></span>
-        <a href="/shuoshuo/" aria-label="查看全部说说">
+        <a href="/shuoshuo/" aria-label="查看全部说说" title="查看全部说说">
           <i class="fa-regular fa-comments" aria-hidden="true"></i>
         </a>
       </div>
@@ -33,11 +34,14 @@ const pageData = getPageSlice(posts, 1);
   <section class="content-wrap home-layout">
     <div class="home-main">
       <div class="section-heading">
-        <h2>最新文章</h2>
+        <div>
-        <a href="/archives/">查看全部</a>
+          <p>INDEX / LATEST</p>
+          <h2>最近写下的</h2>
+        </div>
+        <a href="/archives/">完整归档 <span aria-hidden="true">→</span></a>
       </div>
       <div class="post-list">
-        {pageData.items.map((post) => <PostCard post={post} />)}
+        {pageData.items.map((post, index) => <PostCard post={post} index={index} />)}
       </div>
       <Pagination currentPage={pageData.currentPage} totalPages={pageData.totalPages} />
     </div>

src/pages/link.astro

@@ -7,7 +7,7 @@ const friends = siteConfig.friends;
 ---
 
 <BaseLayout title="友情链接" description={`${siteConfig.site.name} 的友情链接页面。`}>
-  <section class="content-wrap narrow native-page">
+  <section class="content-wrap native-page">
     <PageHeaderCard title="友情链接" subtitle="把仍在发光的角落放在一起。" />
 
     <div class="friend-link-grid" aria-label="友情链接列表">

src/pages/posts/[slug].astro

@@ -179,17 +179,16 @@ const articleJsonLd = {
         </div>
       </header>
       {post.summary && (
-        <section class="article-summary-card" aria-label="AI 文章摘要">
+        <section class="article-summary-card" aria-label="文章导读">
           <div class="article-summary-header">
             <span class="article-summary-brand">
-              <span class="article-summary-icon" aria-hidden="true">✦</span>
+              <span class="article-summary-icon" aria-hidden="true">↳</span>
-              AI 摘要
+              文章导读
             </span>
-            <span class="article-summary-model">QWEN</span>
+            <span class="article-summary-model">摘要由 Qwen 生成</span>
           </div>
           <p class="article-summary-content">
-            <span class="article-summary-text" data-summary-text={post.summary}>{post.summary}</span>
+            <span class="article-summary-text">{post.summary}</span>
-            <span class="article-summary-caret" aria-hidden="true"></span>
           </p>
         </section>
       )}
@@ -392,28 +391,6 @@ const articleJsonLd = {
       window.addEventListener('resize', updateToc);
     }
 
-    const summaryText = document.querySelector('.article-summary-text');
-    if (!summaryText) return;
-
-    const fullText = summaryText.dataset.summaryText || summaryText.textContent || '';
-    const reduceMotion = window.matchMedia('(prefers-reduced-motion: reduce)').matches;
-    if (reduceMotion) {
-      summaryText.textContent = fullText;
-      return;
-    }
-
-    summaryText.textContent = '';
-    let index = 0;
-
-    function typeSummary() {
-      index += 1;
-      summaryText.textContent = fullText.slice(0, index);
-      if (index < fullText.length) {
-        window.setTimeout(typeSummary, 34);
-      }
-    }
-
-    window.setTimeout(typeSummary, 280);
   })();
 </script>
 

src/pages/tags/index.astro

@@ -14,7 +14,7 @@ const tagStats = tags.map((tag) => ({
 ---
 
 <BaseLayout title="标签">
-  <section class="content-wrap narrow">
+  <section class="content-wrap">
     <PageHeaderCard title="标签" subtitle={`共 ${tags.length} 个标签`} />
     <StatsChart title="标签文章统计" subtitle={`共 ${posts.length} 篇文章`} type="pie" items={tagStats} />
     <div class="term-grid">

src/styles/site.css

@@ -15,3 +15,4 @@
 @import "./site/15-reading-series.css";
 @import "./site/16-pwa.css";
 @import "./site/17-revisions.css";
+@import "./site/18-worklog.css";