From 769e679417c6e6767a6ccc8ebf9b1668155b7f55 Mon Sep 17 00:00:00 2001
From: SepComet <202308010230@stu.csust.edu.cn>
Date: Sat, 9 May 2026 14:47:34 +0800
Subject: [PATCH] Make log listings scan cleanly in a single column

Constraint: Keep the change scoped to /logs list rendering and reuse existing log frontmatter
Rejected: Changing shared .card-grid behavior | would affect projects and home sections
Confidence: high
Scope-risk: narrow
Directive: Keep future log-list experiments on logs-specific classes unless other list pages are intentionally redesigned
Tested: npm run build; ./scripts/deploy-homepage.sh
Not-tested: Local browser-only manual narrow-screen visual pass in this session
---
 src/components/LogCard.astro | 27 ++++++++-------
 src/pages/logs/index.astro   |  2 +-
 src/styles/global.css        | 64 ++++++++++++++++++++++++++++++++++++
 3 files changed, 81 insertions(+), 12 deletions(-)

diff --git a/src/components/LogCard.astro b/src/components/LogCard.astro
index 81c11b3..8d6ad23 100644
--- a/src/components/LogCard.astro
+++ b/src/components/LogCard.astro
@@ -14,17 +14,22 @@ const { slug, title, date, repo, summary, tags } = Astro.props;
 const formattedDate = formatDate(date);
 ---
 
-<article class="card">
-  <p class="log-meta">
-    <span class="mono">{formattedDate}</span>
-    <span class="mono">{repo}</span>
-  </p>
-  <h3 class="log-title">
-    <a href={`/logs/${slug}/`}>{title}</a>
-  </h3>
-  <p>{summary}</p>
+<article class="card log-card">
+  <div class="log-card__content">
+    <h3 class="log-card__title">
+      <a href={`/logs/${slug}/`}>{title}</a>
+    </h3>
+    <p class="log-card__summary">{summary}</p>
+  </div>
 
-  <div class="tag-list" style="margin-top: 1rem;">
-    {tags.map((tag) => <span class="tag tag--tech">{tag}</span>)}
+  <div class="log-card__meta">
+    <div class="log-card__tags tag-list">
+      {tags.map((tag) => <span class="tag tag--tech">{tag}</span>)}
+    </div>
+
+    <p class="log-card__meta-right">
+      <span class="mono">{repo}</span>
+      <span class="mono">{formattedDate}</span>
+    </p>
   </div>
 </article>
diff --git a/src/pages/logs/index.astro b/src/pages/logs/index.astro
index 99d3154..fa53ed6 100644
--- a/src/pages/logs/index.astro
+++ b/src/pages/logs/index.astro
@@ -22,7 +22,7 @@ const logs = (await getCollection('logs')).sort(
         <p>这里承载由 Markdown 驱动的开发日志。当前先放入 3 条示例内容，后续可由外部系统继续写入。</p>
       </div>
 
-      <div class="card-grid">
+      <div class="logs-list">
         {logs.map((log) => <LogCard slug={log.id} {...log.data} />)}
       </div>
     </div>
diff --git a/src/styles/global.css b/src/styles/global.css
index 98538b5..f70cace 100644
--- a/src/styles/global.css
+++ b/src/styles/global.css
@@ -450,6 +450,60 @@ main {
   transition: transform 180ms ease, box-shadow 180ms ease, border-color 180ms ease;
 }
 
+.logs-list {
+  display: grid;
+  grid-template-columns: minmax(0, 1fr);
+  gap: 1rem;
+}
+
+.log-card {
+  display: grid;
+  gap: 1rem;
+}
+
+.log-card__content {
+  display: grid;
+  gap: 0.5rem;
+}
+
+.log-card__title {
+  margin: 0;
+  font-family: 'Archivo', sans-serif;
+  font-size: 1.34rem;
+  line-height: 1.25;
+}
+
+.log-card__summary {
+  margin: 0;
+  font-size: 1rem;
+  color: var(--muted-strong);
+  line-height: 1.8;
+}
+
+.log-card__meta {
+  display: flex;
+  align-items: flex-start;
+  justify-content: space-between;
+  gap: 0.9rem 1rem;
+  padding-top: 0.1rem;
+}
+
+.log-card__tags {
+  min-width: 0;
+}
+
+.log-card__meta-right {
+  display: flex;
+  align-items: center;
+  justify-content: flex-end;
+  flex-wrap: wrap;
+  gap: 0.55rem 0.8rem;
+  margin: 0;
+  color: var(--muted);
+  font-size: 0.84rem;
+  text-align: right;
+}
+
 .card:hover,
 .card:focus-within {
   transform: translateY(-2px);
@@ -774,6 +828,16 @@ main {
     grid-template-rows: none;
   }
 
+  .log-card__meta {
+    flex-direction: column;
+    align-items: stretch;
+  }
+
+  .log-card__meta-right {
+    justify-content: flex-start;
+    text-align: left;
+  }
+
   .section-heading,
   .footer-card {
     align-items: flex-start;