左寄せになった。ついに。他には、ロゴを反転させて左端にくっつけるようにしたり、ファビコンを微妙に小さくしたり、ナビゲーションだけ幅を広く使うようにしたりした。内部的には、CSSのファイル名がindex.{{version}}.cssになったり、色変数の命名規則がマテリアル・デザイン風になったりしている。
左側の余白には、やはりclamp()関数を使っている。こういうものも気を付けて書けば、カスタム・プロパティー化して再利用できることがわかってきた。
:root {
--ratio-1: 1.272;
--ratio-2: calc(var(--ratio-1) * var(--ratio-1));
--ratio-3: calc(var(--ratio-2) * var(--ratio-1));
--ratio-4: calc(var(--ratio-3) * var(--ratio-1));
--ratio-5: calc(var(--ratio-4) * var(--ratio-1));
--width-gap: calc(var(--ratio-1) * 1rem);
--width-column: calc(var(--width-gap) * var(--ratio-5) * var(--ratio-5) * var(--ratio-4));
--width-scrollbar: 24px;
--space-body-left: clamp(
0px,
(100vw - (var(--width-gap) + var(--width-column) + var(--width-gap) + var(--width-scrollbar))) / 2,
var(--width-column) / var(--ratio-5)
);
}
body {
margin-left: var(--space-body-left);
margin-right: auto;
}基本の1.272を使ってギャップ幅とカラム幅を作り出し、余白の最大値はカラム幅からまた作り出す。カラム幅が37remくらいで、余白の最大値が11remくらいになる。余白の最大値に達するまでは、真ん中寄せくらいになるように計算している。
安直にカスタム・プロパティー化すると、使われる要素(セレクター)によって、値選択のタイミングが変わる。中の計算が確定するよう、安定した単位であるpxやrem、vwなどの組み合わせで書いた場合は、無条件でカスタム・プロパティー化できる。そうでない場合は意図せずレスポンシブになりうるので、注意が必要だ。
CSSが肥大化しつつあって気になったので、マイナー更新のついでに、不可欠でないものは削除していった。構文強調や、余白の微妙な調整、検索フォーム、段落のtext-align: justifyなどなど。色々試す関係上、ある程度は均しておかないと、面倒なことになる。