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

@@ -14,17 +14,22 @@ const { slug, title, date, repo, summary, tags } = Astro.props;
 const formattedDate = formatDate(date);
 ---
 
-<article class="card">
+<article class="card log-card">
-  <p class="log-meta">
+  <div class="log-card__content">
-    <span class="mono">{formattedDate}</span>
+    <h3 class="log-card__title">
-    <span class="mono">{repo}</span>
+      <a href={`/logs/${slug}/`}>{title}</a>
-  </p>
+    </h3>
-  <h3 class="log-title">
+    <p class="log-card__summary">{summary}</p>
-    <a href={`/logs/${slug}/`}>{title}</a>
+  </div>
-  </h3>
-  <p>{summary}</p>
 
-  <div class="tag-list" style="margin-top: 1rem;">
+  <div class="log-card__meta">
-    {tags.map((tag) => <span class="tag tag--tech">{tag}</span>)}
+    <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>

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>

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;