Css

kiwi-daily 停掉之後，把月曆搬到 Archives 頁首：桌機是一年 12 格的月份熱度長條加一篇一個 icon 的月曆，手機改成左右滑的月份滑桿，日格的底色和列表的縮圖則在看過預覽後拿掉。

PaperMod 讓文章表格在桌機只撐到內容寬、中文在手機不斷行。這篇記錄先量全站 101 張表、在建好的站上試 CSS，最後用 table render hook 把每張表包進可橫捲的框，以及一路踩到的斷字和選擇器權重問題。

PageSpeed 給 kiwi-walk 的無障礙分數是 95，扣分來自文字對比不足和 role=presentation 衝突。這篇記錄怎麼找到真正失敗的那一組顏色：對比在文章頁是過的，失敗的是 PaperMod 讓列表頁換了一個底色；怎麼在不改整體色系的前提下挑新的次要文字色和程式碼註解色，以及 logo 上一個 aria-label 為什麼會讓圖片「角色衝突」。四個頁面都升到 100。

kiwi-walk 的精選系列「打造自己的 LLM Wiki」原本照日期排成一長串，看不出哪篇在講架構、哪篇在講儀表板。這篇記錄把它改成按功能分組的過程：系列是手挑的所以不自動收文章、「同步」這組放哪都尷尬最後併掉、還沒有文章的組也要先佔位；分組選單從跳轉連結改成切換顯示，換行的 chips 改成一排等寬方塊，手機不准左右滑就排成三欄兩列。實作是分組寫在系列的 front matter、一個 Hugo partial 同時餵給系列頁和文章下的系列導覽，以及 hidden 屬性沒效、走過的分頁文字消失這兩個 CSS 的坑。

kiwi-walk 的 /series/ 原本三張卡片橫排三塊、各自依內容伸縮，摘要長短不齊，也看不出哪個系列還在更新。這篇記錄改版過程：先用 mockup 來回六輪才動程式，標籤從三層砍到一個，日期從大字縮成標籤大小再搬到「最新文章」那一行，連載中的系列用 Day30+N 表示 streak。實作上是 CSS grid 兩欄、由各系列 _index.md 的 front matter 決定卡片內容，以及手機上最新文章標題被截成幾個字的修正。

原本只想把 Projects 收進 /blogs/ 變成一個小方塊、順便讓它有趣一點，結果 /blogs/ 的方塊排版前後改了四版：原本的卡片、貼紙牆、改成三欄放描述，最後在 Claude Design 跑了三輪定稿成「走去哪裡？」的奇異鳥徽章，描述改成 hover 才出現。記錄每一版為什麼被換掉、Projects 怎麼在不搬目錄的情況下出現在 /blogs/、新畫的工程師 kiwi，以及幾個坑：worktree 沒拉主題時 Hugo 照樣 build 出空白頁、hover 不會晃是因為 Windows 關了動畫效果、設計稿在 claude.ai 上讀不到、寫這篇截圖時才發現徽章在寬螢幕排成 5＋3、字體跟全站不一樣。

指南升成主角之後，我拿手機實際用了一輪，丟給 Claude 一串體驗問題，第一條就是收回 Day21 做的「往下收、往上露」：「那個好卡，用一層就好了」。記錄這輪 UI 調整的取捨：固定哪一層（Claude 建議只固定頁首，我選頁首加日期列）、「← 總覽」收進選單還是整個拿掉、地區篩選要不要改下拉選單（地區要、類別不要），以及計畫被我退回六次、每次補了什麼。踩到的坑是為了壓低日期列把日期排成一行，最後一顆按鈕超出畫面 13px、整頁可以左右滑；之後「手機不能左右滑」寫成專案的硬規定，改版面前要在四種寬度量過。另外自動部署停住，改成手動部署。

旅行頁原本以「回來後的紀錄」為主，行前指南只是一個原樣保留的內嵌分頁；實際用下來我只看指南。這次的目標是四件事：少切頁面、打開就是當天的建議行程、旅途中記下去了哪就同步回指南（之後找店先列還沒去的，回來後的整理也直接在上面做）、頁首講清楚還剩幾天。記錄的取捨有：指南的分項攤平成頁首導覽、手機用漢堡選單（下拉選單被我否決），地點總表併進指南、新店只能加在清單尾端，頁首日期併進原本那一列、改成時間軸；另外用地址補座標的腳本把每家店畫進示意圖，太遠或沒座標的用虛線圈。踩到的坑有：合併時一刀切掉一個函式導致整頁空白、記住的舊分頁讓預設頁失效、平滑捲動讓切分項看起來沒反應、手機上一列塞不下日期、只靠店名幾乎查不到座標。

/projects/ 的卡片明明寫了 aspect-ratio，Art-Tracking 還是被一張直式截圖撐到 985px：封面是 column flex 的子項目，圖片的 height 100% 對不到確定的高度，修法是把圖片改成絕對定位。另外記錄封面比例選 4:3、手動 weight 排序、Archived 分區、自動連到最新一篇開發紀錄、為了漢堡選單複製一份 PaperMod header，以及上線後第二輪把小卡精簡、封面從截圖換成 icon。坑包括只讀 CSS 就誤判、漏一行 project 讓最新一篇指錯、背景分頁量到 0×0、拿掉一層包裝後標題被主題蓋成 24px。

拿一份附了檔案位置與 diff 的設計 handoff 修部落格，照做前先驗證，發現三處跟實際不符：layouts/blogs/list.html 會套到所有分類頁、水平捲動掃了 121 頁都重現不出來、閱讀時間到不了預期的 5–7 分鐘。另外記錄上一篇／下一篇怎麼定義「同分類」、Series 總覽頁怎麼做到英文網址配中文名稱，以及三個坑：Claude 把截圖時機誤判成 overflow 弄壞 image-zoom、html/template 把 var() 預設值轉成 ZgotmplZ、全站連結色的優先權把實心按鈕的字蓋成深色，而對比掃描用 3:1 當門檻漏抓了一顆。