変わっていないけど、変わっている

v9.5.0で右寄りレイアウトに戻した後、CSSを整理し、v9.6.0でヘッダーとフッターだけ幅いっぱい使うように戻した。結果があまり変わっていないのに、CSSだけ変わっている。いろいろな書き方ができるようになった上、新旧の知識が混ざるので、書き方が安定しない。他には、タグラインが最重要な見出しだと問題がありそうなので、最重要な見出しはページ名(雑記とか近況とか)にするようにした。CSSでそれにタグラインが追加される。

サムネイルの列数の調整は、minmax()を使うものに書き換えた。サムネイルの数が12の倍数なら余りが出ないとしたかったので、最大で4列に制限するようにする。これなら1列から4列で可変なので、必ず割り切れる。

.thumbs {
  display: grid;
  grid-gap: var(--space-small);
  grid-template-columns: repeat(
    autofill,
    minmax(
      calc(var(--width-main) / 5),
      1fr
    )
  );

スペースを余らせずに(autofill)、均等に割り振りつつ(1fr)、最低でもコンテンツ幅(--width-main)の1/5は確保する、というrepeat()関数はこうなる。最大で4列にしたいなら5で割ると簡単だ。grid-gapプロパティーがないなら4で良い。

メディア・クエリーを減らすために、以前からこうしようとは思っていた。しかし、昔は最大6列だったので、5列の時に割り切れないのが気に食わず、先送りしていた。しばらく前に最大4列に変えた時はすっかり忘れていた。12の力はすごい。

基本フォント・サイズの調節をcalc()を使って行うようにできれば、完全にメディア・クエリーを追放できそうだ。ユーザー設定のフォント・サイズを尊重しつつ、ビューポート幅に応じて基本フォント・サイズを調整し、rem単位で統一できるようにする方法が思いつかない。Utopiaは興味深いけど、body要素でフォント・サイズを調節する前提なので、rem単位での統一は難しそうだった。これについては別にちょっと書く。