Skip to content

Commit 33a2e4b

Browse files
seto77claude
andcommitted
Compact the manual header/footer and unify language switchers
- Hide the .md-tabs bar: its only entries are the two top-level language sections (English / 日本語), duplicating the header translate selector (extra.alternate). Language switching now goes solely through the top-right selector; navigation.tabs stays on so the left sidebar keeps showing the active language tree. - Shrink the header row 2.4rem -> 2.0rem (title, icon buttons, search). - Compact the footer and pin it with position:sticky; bottom:0 so it stays visible at the viewport bottom. - Pull the wide-screen sidebar sticky offset back to 2.0rem (Material assumed header 2.4 + tabs 2.4 = 4.8rem) to avoid a gap once the tab bar is hidden. Co-Authored-By: Claude Opus 4.7 (1M context) <noreply@anthropic.com>
1 parent 73c41d5 commit 33a2e4b

1 file changed

Lines changed: 66 additions & 2 deletions

File tree

docs/src/assets/stylesheets/extra.css

Lines changed: 66 additions & 2 deletions
Original file line numberDiff line numberDiff line change
@@ -27,6 +27,69 @@
2727
font-size: 0.75rem;
2828
}
2929

30+
/* ============================================================================
31+
260525Cl: ヘッダー/フッターのコンパクト化と言語切替の一本化
32+
---------------------------------------------------------------------------
33+
要望:
34+
(1) ヘッダー・フッターをもう少し低くする
35+
(2) フッターを常時表示にする
36+
(3) 言語切替パーツが 2 か所 (右上の翻訳アイコン=extra.alternate と
37+
左下のタブバー=English/日本語) あり機能が重複。左下のタブを削除する
38+
============================================================================ */
39+
40+
/* (3) 左下の言語タブバー (.md-tabs) を非表示にする。
41+
nav の最上位は EN/JA の 2 言語だけなので、このバーは言語切替専用。
42+
右上の言語セレクタ (翻訳アイコン) と機能が重複するため消す。
43+
navigation.tabs 機能自体は残すので、左サイドバーは引き続きアクティブ言語の
44+
ページツリーを表示する (言語切替は右上セレクタが担当)。 */
45+
.md-tabs {
46+
display: none;
47+
}
48+
49+
/* タブバーを消した分、ワイド表示でサイドバーが header 直下に詰まるよう sticky 位置を補正する。
50+
Material 既定は header(2.4rem)+tabs(2.4rem)=4.8rem を前提に top:4.8rem を当てるため、
51+
タブを消すと 2.4rem の隙間ができる。header 高さ 2.0rem に合わせて 2.0rem へ。 */
52+
@media screen and (min-width: 76.25em) {
53+
.md-sidebar {
54+
top: 2.0rem;
55+
}
56+
}
57+
58+
/* (1) ヘッダーを少し低くする (既定 2.4rem → 2.0rem)。
59+
高さは .md-header__title が支配するので、これとアイコンボタン/検索窓を一緒に詰める。 */
60+
.md-header__title {
61+
height: 2.0rem;
62+
line-height: 2.0rem;
63+
}
64+
.md-header__button {
65+
margin-top: 0.1rem;
66+
margin-bottom: 0.1rem;
67+
padding: 0.3rem;
68+
}
69+
.md-search__input {
70+
height: 1.8rem;
71+
}
72+
73+
/* (1)(2) フッターを低くし、常に画面下部に表示する。
74+
.md-footer は body 直下・最後の要素なので、bottom:0 の sticky で常時可視になる
75+
(in-flow のまま固定されるので本文末尾との重なりも起きない)。 */
76+
.md-footer {
77+
position: sticky;
78+
bottom: 0;
79+
z-index: 3;
80+
}
81+
/* 前/次ページナビ (.md-footer__inner) と著作権バー (.md-footer-meta__inner) の余白を詰める */
82+
.md-footer__inner {
83+
padding: 0.1rem 0.2rem;
84+
}
85+
.md-footer__link {
86+
padding-top: 0.4rem;
87+
padding-bottom: 0.4rem;
88+
}
89+
.md-footer-meta__inner {
90+
padding: 0.1rem 0.2rem;
91+
}
92+
3093
/* 260525Ch: Keep the primary navigation visible on desktop-sized documentation views. */
3194
@media screen and (min-width: 60em) and (max-width: 76.234375em) {
3295
.md-header__button[for="__drawer"] {
@@ -40,11 +103,12 @@
40103
.md-sidebar--primary {
41104
display: block;
42105
flex: 0 0 12.1rem;
43-
height: calc(100vh - 2.4rem);
106+
/* 260525Cl: header 高さを 2.0rem に詰めたので sticky オフセットも 2.4rem → 2.0rem に合わせる */
107+
height: calc(100vh - 2.0rem);
44108
opacity: 1;
45109
order: 0;
46110
position: sticky;
47-
top: 2.4rem;
111+
top: 2.0rem;
48112
transform: none;
49113
visibility: visible;
50114
}

0 commit comments

Comments
 (0)