左のサイドバーの現在地を白の重ねで表す - #185
Merged
Merged
Conversation
暗い帯の上に明るいグレー（#e3e3e3）・白（#fcfcfc）・#c9c9c9 の3段が 積み上がっていた。暗い地のまま白を 6% / 13% / 9% と重ねる形に替える。 枠線は面が段を作るので落とす。 Co-Authored-By: Claude Opus 5 (1M context) <noreply@anthropic.com>
テーマは水色（#55a5d9）で、押せない見出しなのにリンクに見える。 項目（#d9d9d9・14.4px）より弱い灰と一段小さい字にして、押せるものと分ける。 Co-Authored-By: Claude Opus 5 (1M context) <noreply@anthropic.com>
テーマは l3 に #c9c9c9、l4 に #bdbdbd の地を当てている。こちらの文字は 明るいので、残ると明るい地の上に明るい文字になって読めなかった。 li.current a の右の罫線も落とす。 Co-Authored-By: Claude Opus 5 (1M context) <noreply@anthropic.com>
This file contains hidden or bidirectional Unicode text that may be interpreted or compiled differently than what appears below. To review, open the file in an editor that reveals hidden Unicode characters.
Learn more about bidirectional Unicode characters
Sign up for free
to join this conversation on GitHub.
Already have an account?
Sign in to comment
1 participant
Add this suggestion to a batch that can be applied as a single commit.This suggestion is invalid because no changes were made to the code.Suggestions cannot be applied while the pull request is closed.Suggestions cannot be applied while viewing a subset of changes.Only one suggestion per line can be applied in a batch.Add this suggestion to a batch that can be applied as a single commit.Applying suggestions on deleted lines is not supported.You must change the existing code in this line in order to create a valid suggestion.Outdated suggestions cannot be applied.This suggestion has been applied or marked resolved.Suggestions cannot be applied from pending reviews.Suggestions cannot be applied on multi-line comments.Suggestions cannot be applied while the pull request is queued to merge.Suggestion cannot be applied right now. Please check back later.
左のサイドバーの現在地の表し方を、暗い地のまま白を薄く重ねる形に替えます（比較ページで案Aを選択）。
何が起きていたか
開いている枝が明るいグレー（
#e3e3e3）、その中のいまのページが白（#fcfcfc）、さらに深い枝が#c9c9c9と、暗い帯（#343131）の上に3段の明るい面が積み上がる作りでした。枝を開くたびに白いパネルが差し込まれる見え方になります。変更
#e3e3e3#fcfcfc（黒文字）#4e4a4aほか#404040（明るい面に載る前提）#d9d9d9暗い地では面を白の重ねで作ります。 明るさが上がると同時に彩度が落ちるので、色味が出ません（ブログが暗い地でやっているのと同じ形）。枝・現在地・hover の3つを、それぞれ 6% / 13% / 9% の一段ずつにしています。
現在の枝に付いていた枠線（
#c9c9c9の上下と右）も落としています。面で段を作っているので、線は要りません。章のラベル
あわせて「TypeScriptの書き方」などの章のラベルを直します。テーマは水色（
#55a5d9・13.6px）で、押せない見出しなのにリンクに見えます。項目（#d9d9d9・14.4px）より弱い灰（#9b9b9b）と一段小さい字（12px）にして、押せるものと分けます。太字と大文字はラベルの印としてそのままです。深い枝
テーマは深い枝にも明るい地を当てています（
li.toctree-l2.current li.toctree-l3 > aに#c9c9c9、li.toctree-l3.current li.toctree-l4 > aに#bdbdbd）。こちらの文字は明るいので、残ると明るい地の上に明るい文字になって読めません。この2つとli.current aの右の罫線も落としています。🤖 Generated with Claude Code