From b4043435dc8bf3ba02a1cfb376bd30438ddc3390 Mon Sep 17 00:00:00 2001 From: ma91n Date: Mon, 14 Sep 2026 10:56:41 +0900 Subject: [PATCH] =?UTF-8?q?=E3=83=98=E3=83=83=E3=83=80=E3=83=BC=E3=81=AE?= =?UTF-8?q?=E3=83=AD=E3=82=B4=E3=82=92=E5=B7=A6=E3=81=AE=E4=BD=99=E7=99=BD?= =?UTF-8?q?=E3=81=B8=E5=87=BA=E3=81=99=20(#3289)?= MIME-Version: 1.0 Content-Type: text/plain; charset=UTF-8 Content-Transfer-Encoding: 8bit 本文の左端より最大 64px 外へ出す。左に空いている余白へロゴを置く。 Cloudflare Blog が同じ形で、実測すると `max(16px, (100vw - 1440px)/2 - 64px)`——本文の枠より 64px 左、ただし 画面端から 16px より近づけない。動かすのはロゴだけで、ナビ・検索・ 下に開くパネルは本文の右端にそろえたまま（#2877 のパネルの基準を崩さない）。 出す量を固定にできないのは、左の余白が幅で 16〜300px と変わり単調でもないため （1366px で 113px、1400px では container が 1140→1320 に跳ねて 40px）。 余白のぶんだけ出して 64px で頭打ちにする。 Co-Authored-By: Claude Opus 5 (1M context) --- CLAUDE.md | 18 +++++++++++++- themes/future/css-src/theme-styles.styl | 33 +++++++++++++++++++++++++ 2 files changed, 50 insertions(+), 1 deletion(-) diff --git a/CLAUDE.md b/CLAUDE.md index b836ec7d1ae..372dd9f7c91 100644 --- a/CLAUDE.md +++ b/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 と同じ形）。引き金は `