ヘッダーのロゴを左の余白へ出す (#3289)

CLAUDE.md

@@ -1585,9 +1585,25 @@ bootstrap-subset → theme-styles.styl の順で `/css/site.css` に連結する
     - **サイドバーの目次は追従する**（#2909。以前は「固定サイドバーを置かないのと
       同じ理由」と書いていたが、そちらはトライアルで入れた）。目次は
       読んでいる記事の中の移動手段で、帯と同じ幅で追従する
-  - **帯の中身は `.container` の内側に置く。** サイト名の左端がパンくず・本文と揃う。
+  - **帯の中身は `.container` の内側に置く。ロゴだけが例外**（#3289）。
     下に開くパネル（ドロップダウン・検索のヒント）の位置の基準も `.header-bar` が持ち、
     `top: 100%` が帯の下辺、`right: 0` が本文と同じ右端になる
+    - **ロゴは本文の左端より最大 64px 外へ出す**（`.header-brand` の負のマージン。
+      992px 以上）。左に空いている余白へ置く。Cloudflare Blog が同じ形で、実測すると
+      `max(16px, (100vw - 1440px)/2 - 64px)`——本文の枠より 64px 左、ただし
+      画面端から 16px より近づけない。**動かすのはロゴだけで、ナビ・検索・パネルは
+      本文の右端にそろえたまま**（Cloudflare も右側は枠の位置に残している）
+      - **出す量は固定にできない。** 左の余白は幅で 16〜300px と変わり、
+        **単調ですらない**（1366px で 113px、1400px では `.container` が
+        1140→1320 に跳ねて 40px）。固定量にすると #2901 の
+        「どの幅でも揃わない＝揃え損ねに見える」に当たる。**余白のぶんだけ出して
+        64px で頭打ちにする**——狭いところでは出ず、広いところでは一定の距離になる
+      - **`50vw` から引く値は `.container` の半分 ＋ 左右の余白 12px。**
+        `100vw` はスクロールバーを含むので、余白いっぱいまで出すと画面の外へ出る。
+        12px を引いた残りを上限にすれば、いちばん詰まったところでも
+        画面端から 16.5px 残る（実測。`scrollWidth` は増えない）
+      - **効かせるのは 992px から**（#3222 の「ナビが引き出しに入る」境界）。
+        引き出しに入る幅では帯が詰まっていて、左の余白の話にならない
   - **ドロップダウンは `:hover` と `:focus-within` で開く。** JS は使わない
     （検索窓のヒントパネル #2791 と同じ形）。引き金は `<button>` で、
     ラベル（「リソース」「アクティビティ」）に対応する1枚のページが無いのでリンクにしない。

themes/future/css-src/theme-styles.styl

@@ -557,6 +557,39 @@ Header and header elements
   margin: 0;
   flex-shrink: 0;
 }
+/* ロゴだけ本文の左端より外へ出す (#3289)。帯の中身は container の内側という
+   #2877 の決まりを残したまま、左に空いている余白へロゴを置く。
+   Cloudflare Blog が同じ形で、実測すると
+   `max(16px, (100vw - 1440px)/2 - 64px)`——本文の枠より 64px 左、ただし
+   画面端から 16px より近づけない。動かすのはロゴだけで、ナビ・検索・
+   下に開くパネルは本文の右端にそろえたまま（#2877 のパネルの基準を崩さない）。
+
+   出す量を固定にできないのは、左の余白が幅で 16〜300px と変わるため
+   （1366px で 113px、1400px では container が 1140→1320 に跳ねて 40px）。
+   固定量にすると #2901 の「どの幅でも揃わない＝揃え損ねに見える」に当たる。
+   余白のぶんだけ出して 64px で頭打ちにすれば、狭いところでは出ず、
+   広いところでは一定の距離になる。
+
+   50vw から引く値は container の半分 ＋ container の左右の余白 12px。
+   100vw はスクロールバーを含むので、余白いっぱいまで出すと画面の外へ出る。
+   12px を引いた残りを上限にして、いちばん詰まったところでも画面端に接しない。
+   nav が帯に並ぶ 992px から効かせる（引き出しに入る幅では帯が詰まっていて
+   左の余白の話にならない #3222） */
+@media (min-width: 992px) {
+  .header-brand {
+    margin-left: unquote('calc(-1 * min(64px, max(0px, 50vw - 492px)))');
+  }
+}
+@media (min-width: 1200px) {
+  .header-brand {
+    margin-left: unquote('calc(-1 * min(64px, max(0px, 50vw - 582px)))');
+  }
+}
+@media (min-width: 1400px) {
+  .header-brand {
+    margin-left: unquote('calc(-1 * min(64px, max(0px, 50vw - 672px)))');
+  }
+}
 .header-brand-link {
   display: flex;
   align-items: center;