改善可讀性：字體與配色

背景

延續上次的修改，淺色模式下存在一些可讀性問題：

1. 文字對比度不足：許多文字使用 text-stone-500 等較淺的灰色，與背景對比不夠明顯
2. 字體偏小：預設 16px 的基礎字體對於長時間閱讀不夠友善
3. Code Block 在淺色模式下的顯示問題：深色背景在淺色模式下顯得突兀

主要改善項目

1. 基礎字體大小調整

將根元素字體大小從 16px 提升到 18px，這個改動影響整個網站的閱讀體驗：

:root {
  color-scheme: light;
  font-size: 18px;  /* 從 16px 調整 */
}

2. 淺色模式文字對比度增強

針對不同層級的文字進行了系統性的調整：

元素	原配色	新配色	改善說明
標題文字	text-stone-900	text-black + font-bold	使用純黑色與粗體，提升視覺層級
文章標題	text-base font-medium	text-lg font-semibold	增大字號並加重字重
次要文字	text-stone-500	text-stone-600	加深對比度
描述文字	text-stone-600	text-stone-700	進一步加深
分隔線	border-stone-200	border-stone-300	提升可見度

3. 修正 Tailwind v4 Dark Mode

這次也發現專案使用 Tailwind CSS v4，但缺少正確的 dark mode 設定。新增了關鍵配置：

@custom-variant dark (&:where(.dark, .dark *));

這讓 class-based dark mode 在 Tailwind v4 中正常運作。

4. Code Block 樣式統一

經過多次嘗試不同的配色方案後，最終決定讓 code block 在淺色和深色模式下都使用深色背景：

/* Code block - 淺色與深色模式統一 */
.prose :where(pre):not(:where([class~='not-prose'] *)) {
  background-color: #1c1917 !important;
  color: #e7e5e4 !important;
}

5. 其他細節調整

• Inline code padding 從 px-1 py-0.5 增加到 px-1.5 py-1
• 文章列表間距從 space-y-3 增加到 space-y-4
• 文章內容使用 prose-lg class，提供更寬鬆的排版
• 各種小標籤的字體從 text-xs 調整為 text-sm

成果展示

首頁對比

文章頁面對比

Code Block 效果

總結

可能是年紀大了，老花越來越嚴重，現在比較傾向字體大一點的設計。加上本來就比較喜歡極簡的風格，希望網站整體看起來不會顯得太無聊。 接著還要研究一下怎麼樣讓網站上線。 啊…還沒有買域名…