背景
このブログのトップページは、記事一覧が格好悪いと思っていました:
人のブログ を見ると、やはりカード風の表示が良いですね。
結果
カード表示
記事のカード表示を実装してみました。記事のタイトルが左寄せになったため、視認性が改善したと思います:
タグがスペースを取り過ぎているため、まだ調整が必要かとは思います。
ライトテーマ
別件ですが、 OS の設定に応じて Simple.css のライトテーマが表示するように変更しました (ダークテーマの強制を解除しました):
Prism.js によるコードスタイルも、 light/dark 両対応にしました:
<link rel="stylesheet" id="prism-light" href="/style/prism-light.css" media="(prefers-color-scheme: light)">
<link rel="stylesheet" id="prism-dark" href="/style/prism-dark.css" media="(prefers-color-scheme: dark)">
またヘッダにテーマの切り替えボタンを設置しました。これは document の data-theme 属性のトグルスイッチで、 data-theme 値に応じてダークテーマが有効化される CSS となっています:
:root[data-theme="dark"] {
color-scheme: dark;
/* dark theme setting here */
}
Prism.js については、上記 <link> タグの media 属性を動的に書き換えることで CSS ファイルを切り替えます。この動的なテーマの切り替えは Claude Code が実装しました。
まとめ
ブログのビルドスクリプトを更新しました。 Emacs Lisp の修正に乗り気になれなかったのですが、今回から記事の情報を plist として持つようにしたため、気軽に改造できるようになりました。
;; ある種オブジェクトのように扱えます
(plist-get article :title)
(plist-get article :date)
;; 今までは、何とタプルで頑張っていました (酷い！)