1. Antigravity 的實作細節

在本階段，我完成了網站的核心骨架開發，重點在於實現您要求的「Google News 風格」與「全寬 RWD」：

技術達成項目：

  1. CSS 框架重構：

    • 使用 CSS Grid 重新定義佈局，確保內容能撐滿整個螢幕寬度（最大 1440px）。
    • 配色方案採用淡灰色背景 (#F9FAFB) 與白底卡片，營造乾淨的閱讀感。
    • 字體選用 Inter 與 Plus Jakarta Sans，提升現代專業感。

  2. 響應式導覽列 (Navigation)：

    • 實作了帶有「漢堡選單」的 Header。
    • 在手機端（<768px）導覽列會摺疊並可透過點擊展開。
    • 導覽連結會根據當前頁面自動標示為「Active」狀態。

  3. 首頁新聞網格 (News Grid)：

    • 實作了精美的新聞卡片流，包含分類標籤 (Badge)、標題、摘要與日期。
    • 加入微妙的懸停 (Hover) 陰影效果，增加互動深度。

2. 使用者的回饋

  1. 連結失效問題：發現使用 .md 作為內部連結會在 HTML 靜態化後導致 404 錯誤。
  2. 佈局偏位 Bug：發現首頁內容因為殘留的 sidebar 網格定義而產生位移。
  3. 網格比例問題：初步實作的 News Grid 導致卡片過於「細長」，影響美感。

3. 階段性總結

本階段除了實作基礎骨架外，也針對使用者發現的關鍵 Bug 進行了即時修正。我們導入了 Hugo 的 ref 短代碼解決連結問題，並透過全新的「頭條 + 網格」層級佈局，解決了卡片比例失衡的問題。

導覽連結：