From 61b9b58032bb398338f108c846386e3572caecbd Mon Sep 17 00:00:00 2001 From: ma91n Date: Tue, 15 Sep 2026 10:27:00 +0900 Subject: [PATCH] =?UTF-8?q?=E3=83=8F=E3=83=B3=E3=83=90=E3=83=BC=E3=82=AC?= =?UTF-8?q?=E3=83=BC=E3=81=AE=E4=B8=89=E6=9C=AC=E7=B7=9A=E3=82=92=E3=82=AC?= =?UTF-8?q?=E3=82=A4=E3=83=89=E3=83=A9=E3=82=A4=E3=83=B3=E3=81=A8=E5=90=8C?= =?UTF-8?q?=E3=81=98=E5=BD=A2=E3=81=AB=E3=81=99=E3=82=8B?= MIME-Version: 1.0 Content-Type: text/plain; charset=UTF-8 Content-Transfer-Encoding: 8bit Co-Authored-By: Claude Opus 5 (1M context) --- themes/future/css-src/theme-styles.styl | 34 ++++++++++++++++++++---- themes/future/layout/_partial/header.ejs | 5 ++-- 2 files changed, 32 insertions(+), 7 deletions(-) diff --git a/themes/future/css-src/theme-styles.styl b/themes/future/css-src/theme-styles.styl index b98d12c142a..ff01d155ca0 100644 --- a/themes/future/css-src/theme-styles.styl +++ b/themes/future/css-src/theme-styles.styl @@ -950,32 +950,56 @@ Header and header elements 押せる面は 24×24px を下回らないように上下左右に 4px ずつ取る */ .header-drawer-toggle { display: flex; - flex-direction: column; justify-content: center; align-items: center; - gap: space-step; margin: 0; padding: space-step; cursor: pointer; } + /* 3本は同じ長さで、右端をそろえて左端だけずらす。窓で切って見せるので、 + 開くときは線を伸ばさず横へ滑らせるだけで済む（アーキテクチャ + ガイドラインと同じ形）。高さ 14px は 2px の線3本と 4px の間隔2つの和 */ + .header-drawer-icon { + display: block; + position: relative; + width: 20px; + height: 14px; + overflow: hidden; + } .header-drawer-bar { display: block; + position: absolute; + left: 0; width: 20px; height: 2px; /* 線なのでピルにする。角丸の段の3つ目 */ border-radius: 999px; background: var(--ink-mute); /* 開閉は反応ではなく状態の変化なので、hover-speed ではなく state-speed */ - transition: transform state-speed ease, opacity state-speed ease; + transition: transform state-speed ease; + } + /* 窓からはみ出した分が隠れるので、見える長さは 20 / 10 / 15px になる */ + .header-drawer-bar:nth-child(1) { + top: 0; + } + .header-drawer-bar:nth-child(2) { + top: 6px; + transform: translateX(10px); + } + .header-drawer-bar:nth-child(3) { + top: 12px; + transform: translateX(5px); } /* 上下の線を中央へ寄せてから回す。6px は線の高さ2pxと間隔4pxの和で、 間隔の段として選んだ値ではない。角度は参照実装（リクルートサイト）と - 同じ ±135deg で、45deg と違って回る向きが両者で逆になる */ + 同じ ±135deg で、45deg と違って回る向きが両者で逆になる。 + ✕ の2本は左端もそろえて同じ長さにする */ .header-drawer-input:checked + .header-drawer-toggle .header-drawer-bar:nth-child(1) { transform: translateY(6px) rotate(-135deg); } + /* 真ん中は消すのではなく窓の外へ送る */ .header-drawer-input:checked + .header-drawer-toggle .header-drawer-bar:nth-child(2) { - opacity: 0; + transform: translateX(20px); } /* 動きを減らす設定では回さずに ✕ の形へ切り替える */ @media (prefers-reduced-motion: reduce) { diff --git a/themes/future/layout/_partial/header.ejs b/themes/future/layout/_partial/header.ejs index b889c52c88e..6ae6e3a98d7 100644 --- a/themes/future/layout/_partial/header.ejs +++ b/themes/future/layout/_partial/header.ejs @@ -34,8 +34,9 @@ 名前は中の sr-only が持つ（label に絵しか無いと読み上げる名前が無い） %> <%# 三本線は svg-icon の辞書ではなく3本の span で描く (#2883)。開くと1本目と - 3本目が回って ✕ になり、2本目が消える。1枚の絵では動かせないため %> - + 3本目が回って ✕ になり、2本目は窓の外へ抜ける。1枚の絵では動かせないため。 + 包む span はその窓で、3本を同じ長さのまま違う長さに見せる %> + <%# 行き先の帯。畳んだ中身は :hover と :focus-within で開く（JS は使わない）。 開く合図がフォーカスなので、押す必要のあるボタンにはしていない