ビルドなしのモバイルファースト #

pico.css に任せていること #

• <html data-theme="dark"> と color-scheme: dark で、ダークテーマに固定する。
• viewport の meta タグで、端末の幅に合わせて表示する。
• header / main / footer を素直に並べれば、pico がコンテナの幅と余白を決める。
• 投稿一覧の各投稿は <article> で、pico がカードとして表示する。
• 本文の文字サイズ、リンクやボタンの色は pico の既定のまま。

site.css で足していること #

pico で表現できないものと、日本語向けの文字組みの調整だけを、埋め込みの site.css に書いている。 値は pico の CSS 変数から取るので、テーマを変えてもそのまま追従する。

• サイトのナビゲーションを position: sticky で画面上部に固定する。下をスクロールする本文が透けないよう、背景色を付けている。
• header と main の上下の余白を半分にする。pico はどちらにも同じ余白を付けるので、そのままだと間が空きすぎる。
• ナビゲーション項目の上下の余白を詰める。

日本語向けの調整は次のとおり。pico の既定は英文向けなので、スマートフォンだと日本語は詰まって見える。 <html lang="ja"> にしておくと、漢字が日本語の字形になり、文節で折り返す指定も効く。

• 本文の行間を 1.6 に広げる。--pico-line-height を変えるとフォーム部品の高さまで変わるので、article に直接指定する。
• 見出しを一回り小さくし、word-break: auto-phrase と text-wrap: balance で文節単位に、行の長さを揃えて折り返す。最後の行に 1 文字だけ残ることがなくなる。
• 見出しの上に余白を戻す。pico は見出しの直前に段落などの兄弟要素があるときだけ余白を付けるが、ここでは見出しが section の先頭にあるので付かない。
• リストのインデントを、ブラウザ既定の 40px から 1.25rem に詰める。項目の行間は 1.4 と本文より狭くして、項目同士が離れすぎず一つのリストとしてまとまって見えるようにする。
• 一覧のカードでは、タイトルを小さくして下線を消す。色でリンクと分かるし、下線は漢字の画数と重なって読みにくい。hgroup の下の余白も消して、カードの上下の余白を揃える。

site.css は /site.css?v=<ハッシュ> で配信している。 内容が変わるとハッシュも変わるので、長期間キャッシュさせても問題ない。