Skip to content

Commit cd74ea3

Browse files
ArchmongerArchmonger
committed
docs(theme): fix sidebar, TOC, and code-header styling
Four real fixes, plus reformatting the whole stylesheet set to the .editorconfig contract for *.css (indent_size = 4): admonition, banner, button, footer, home, main, and navbar.css are whitespace-only changes and are byte-identical after whitespace normalization, so the useful diff was buried under tabs. The old mixed tab/space indentation came from 2bef10d. The TOC heading was only uppercased under the sidebar selector, so it kept material's default black and lost its casing cue outside that context. .md-nav__title[for="__toc"] is now uppercased and muted to rgb(133,142,159) directly, matching how the section is labelled everywhere else. The secondary sidebar stayed visible once the left sidebar had collapsed into the hamburger menu, leaving a lone right rail on tablet widths. It is now hidden at max-width 76.1875em, the same breakpoint at which the primary sidebar collapses. Content was centred only inside the desktop media query, so narrower viewports left it hanging on the left. The .md-content centring rules moved out to apply at every width, and the sidebar nav buttons picked up the muted, flat treatment: uppercase section titles, no background, no box-shadow, and no leftover list indent. A --sizebar-font-size-2 token covers the smaller nested level. The copy button sat on a visible grey bar over the code block; .md-code__nav is now transparent so it floats over the code instead. Measured with headless Chrome over CDP, A/B against a build of HEAD so the comparison is old CSS vs new CSS rather than reasoning from the diff: .md-code__nav background rgba(245,245,245,0.3) -> transparent; TOC title colour rgb(0,0,0) -> rgb(133,142,159); .md-content justify-self auto -> center at 1100px; .md-sidebar--secondary display block -> none at 1100px while it stays block at 1440px. prettier --check reports all ten files clean, and prettier was confirmed to resolve indent_size 4 from .editorconfig rather than its own 2-space default.
1 parent 78f1dd0 commit cd74ea3

10 files changed

Lines changed: 705 additions & 726 deletions

File tree

‎docs/src/assets/css/admonition.css‎

Lines changed: 78 additions & 78 deletions
Original file line numberDiff line numberDiff line change
@@ -1,160 +1,160 @@
11
[data-md-color-scheme="slate"] {
2-
--admonition-border-color: transparent;
3-
--admonition-expanded-border-color: rgba(255, 255, 255, 0.1);
4-
--note-bg-color: rgba(43, 110, 98, 0.2);
5-
--terminal-bg-color: #0c0c0c;
6-
--terminal-title-bg-color: #000;
7-
--deep-dive-bg-color: rgba(43, 52, 145, 0.2);
8-
--you-will-learn-bg-color: #353a45;
9-
--pitfall-bg-color: rgba(182, 87, 0, 0.2);
2+
--admonition-border-color: transparent;
3+
--admonition-expanded-border-color: rgba(255, 255, 255, 0.1);
4+
--note-bg-color: rgba(43, 110, 98, 0.2);
5+
--terminal-bg-color: #0c0c0c;
6+
--terminal-title-bg-color: #000;
7+
--deep-dive-bg-color: rgba(43, 52, 145, 0.2);
8+
--you-will-learn-bg-color: #353a45;
9+
--pitfall-bg-color: rgba(182, 87, 0, 0.2);
1010
}
1111
[data-md-color-scheme="default"] {
12-
--admonition-border-color: rgba(0, 0, 0, 0.08);
13-
--admonition-expanded-border-color: var(--admonition-border-color);
14-
--note-bg-color: rgb(244, 251, 249);
15-
--terminal-bg-color: rgb(64, 71, 86);
16-
--terminal-title-bg-color: rgb(35, 39, 47);
17-
--deep-dive-bg-color: rgb(243, 244, 253);
18-
--you-will-learn-bg-color: rgb(246, 247, 249);
19-
--pitfall-bg-color: rgb(254, 245, 231);
12+
--admonition-border-color: rgba(0, 0, 0, 0.08);
13+
--admonition-expanded-border-color: var(--admonition-border-color);
14+
--note-bg-color: rgb(244, 251, 249);
15+
--terminal-bg-color: rgb(64, 71, 86);
16+
--terminal-title-bg-color: rgb(35, 39, 47);
17+
--deep-dive-bg-color: rgb(243, 244, 253);
18+
--you-will-learn-bg-color: rgb(246, 247, 249);
19+
--pitfall-bg-color: rgb(254, 245, 231);
2020
}
2121

2222
.md-typeset details,
2323
.md-typeset .admonition {
24-
border-color: var(--admonition-border-color) !important;
25-
box-shadow: none;
24+
border-color: var(--admonition-border-color) !important;
25+
box-shadow: none;
2626
}
2727

2828
.md-typeset :is(.admonition, details) {
29-
margin: 0.55em 0;
29+
margin: 0.55em 0;
3030
}
3131

3232
.md-typeset .admonition {
33-
font-size: 0.7rem;
33+
font-size: 0.7rem;
3434
}
3535

3636
.md-typeset .admonition:focus-within,
3737
.md-typeset details:focus-within {
38-
box-shadow: none !important;
38+
box-shadow: none !important;
3939
}
4040

4141
.md-typeset details[open] {
42-
border-color: var(--admonition-expanded-border-color) !important;
42+
border-color: var(--admonition-expanded-border-color) !important;
4343
}
4444

45-
/*
46-
Admonition: "summary"
45+
/*
46+
Admonition: "summary"
4747
React Name: "You will learn"
4848
*/
4949
.md-typeset .admonition.summary {
50-
background: var(--you-will-learn-bg-color);
51-
padding: 0.8rem 1.4rem;
52-
border-radius: 0.8rem;
50+
background: var(--you-will-learn-bg-color);
51+
padding: 0.8rem 1.4rem;
52+
border-radius: 0.8rem;
5353
}
5454

5555
.md-typeset .summary .admonition-title {
56-
font-size: 1rem;
57-
background: transparent;
58-
padding-left: 0.6rem;
59-
padding-bottom: 0;
56+
font-size: 1rem;
57+
background: transparent;
58+
padding-left: 0.6rem;
59+
padding-bottom: 0;
6060
}
6161

6262
.md-typeset .summary .admonition-title:before {
63-
display: none;
63+
display: none;
6464
}
6565

6666
.md-typeset .admonition.summary {
67-
border-color: #ffffff17 !important;
67+
border-color: #ffffff17 !important;
6868
}
6969

70-
/*
71-
Admonition: "abstract"
70+
/*
71+
Admonition: "abstract"
7272
React Name: "Note"
7373
*/
7474
.md-typeset .admonition.abstract {
75-
background: var(--note-bg-color);
76-
padding: 0.8rem 1.4rem;
77-
border-radius: 0.8rem;
75+
background: var(--note-bg-color);
76+
padding: 0.8rem 1.4rem;
77+
border-radius: 0.8rem;
7878
}
7979

8080
.md-typeset .abstract .admonition-title {
81-
font-size: 1rem;
82-
background: transparent;
83-
padding-bottom: 0;
84-
color: rgb(68, 172, 153);
81+
font-size: 1rem;
82+
background: transparent;
83+
padding-bottom: 0;
84+
color: rgb(68, 172, 153);
8585
}
8686

8787
.md-typeset .abstract .admonition-title:before {
88-
font-size: 1.1rem;
89-
background: rgb(68, 172, 153);
88+
font-size: 1.1rem;
89+
background: rgb(68, 172, 153);
9090
}
9191

92-
/*
93-
Admonition: "warning"
92+
/*
93+
Admonition: "warning"
9494
React Name: "Pitfall"
9595
*/
9696
.md-typeset .admonition.warning {
97-
background: var(--pitfall-bg-color);
98-
padding: 0.8rem 1.4rem;
99-
border-radius: 0.8rem;
97+
background: var(--pitfall-bg-color);
98+
padding: 0.8rem 1.4rem;
99+
border-radius: 0.8rem;
100100
}
101101

102102
.md-typeset .warning .admonition-title {
103-
font-size: 1rem;
104-
background: transparent;
105-
padding-bottom: 0;
106-
color: rgb(219, 125, 39);
103+
font-size: 1rem;
104+
background: transparent;
105+
padding-bottom: 0;
106+
color: rgb(219, 125, 39);
107107
}
108108

109109
.md-typeset .warning .admonition-title:before {
110-
font-size: 1.1rem;
111-
background: rgb(219, 125, 39);
110+
font-size: 1.1rem;
111+
background: rgb(219, 125, 39);
112112
}
113113

114-
/*
115-
Admonition: "info"
114+
/*
115+
Admonition: "info"
116116
React Name: "Deep Dive"
117117
*/
118118
.md-typeset .admonition.info {
119-
background: var(--deep-dive-bg-color);
120-
padding: 0.8rem 1.4rem;
121-
border-radius: 0.8rem;
119+
background: var(--deep-dive-bg-color);
120+
padding: 0.8rem 1.4rem;
121+
border-radius: 0.8rem;
122122
}
123123

124124
.md-typeset .info .admonition-title {
125-
font-size: 1rem;
126-
background: transparent;
127-
padding-bottom: 0;
128-
color: rgb(136, 145, 236);
125+
font-size: 1rem;
126+
background: transparent;
127+
padding-bottom: 0;
128+
color: rgb(136, 145, 236);
129129
}
130130

131131
.md-typeset .info .admonition-title:before {
132-
font-size: 1.1rem;
133-
background: rgb(136, 145, 236);
132+
font-size: 1.1rem;
133+
background: rgb(136, 145, 236);
134134
}
135135

136-
/*
137-
Admonition: "example"
136+
/*
137+
Admonition: "example"
138138
React Name: "Terminal"
139139
*/
140140
.md-typeset .admonition.example {
141-
background: var(--terminal-bg-color);
142-
border-radius: 0.4rem;
143-
overflow: hidden;
144-
border: none;
141+
background: var(--terminal-bg-color);
142+
border-radius: 0.4rem;
143+
overflow: hidden;
144+
border: none;
145145
}
146146

147147
.md-typeset .example .admonition-title {
148-
background: var(--terminal-title-bg-color);
149-
color: rgb(246, 247, 249);
148+
background: var(--terminal-title-bg-color);
149+
color: rgb(246, 247, 249);
150150
}
151151

152152
.md-typeset .example .admonition-title:before {
153-
background: rgb(246, 247, 249);
153+
background: rgb(246, 247, 249);
154154
}
155155

156156
.md-typeset .admonition.example code {
157-
background: transparent;
158-
color: #fff;
159-
box-shadow: none;
157+
background: transparent;
158+
color: #fff;
159+
box-shadow: none;
160160
}

‎docs/src/assets/css/banner.css‎

Lines changed: 7 additions & 7 deletions
Original file line numberDiff line numberDiff line change
@@ -1,15 +1,15 @@
11
body[data-md-color-scheme="slate"] {
2-
--md-banner-bg-color: rgb(55, 81, 78);
3-
--md-banner-font-color: #fff;
2+
--md-banner-bg-color: rgb(55, 81, 78);
3+
--md-banner-font-color: #fff;
44
}
55

66
body[data-md-color-scheme="default"] {
7-
--md-banner-bg-color: #ff9;
8-
--md-banner-font-color: #000;
7+
--md-banner-bg-color: #ff9;
8+
--md-banner-font-color: #000;
99
}
1010

1111
.md-banner--warning {
12-
background-color: var(--md-banner-bg-color);
13-
color: var(--md-banner-font-color);
14-
text-align: center;
12+
background-color: var(--md-banner-bg-color);
13+
color: var(--md-banner-font-color);
14+
text-align: center;
1515
}

‎docs/src/assets/css/button.css‎

Lines changed: 22 additions & 19 deletions
Original file line numberDiff line numberDiff line change
@@ -1,41 +1,44 @@
11
[data-md-color-scheme="slate"] {
2-
--md-button-font-color: #fff;
3-
--md-button-border-color: #404756;
2+
--md-button-font-color: #fff;
3+
--md-button-border-color: #404756;
44
}
55

66
[data-md-color-scheme="default"] {
7-
--md-button-font-color: #000;
8-
--md-button-border-color: #8d8d8d;
7+
--md-button-font-color: #000;
8+
--md-button-border-color: #8d8d8d;
99
}
1010

1111
.md-typeset .md-button {
12-
border-width: 1px;
13-
border-color: var(--md-button-border-color);
14-
border-radius: 9999px;
15-
color: var(--md-button-font-color);
16-
transition: color 125ms, background 125ms, border-color 125ms,
17-
transform 125ms;
12+
border-width: 1px;
13+
border-color: var(--md-button-border-color);
14+
border-radius: 9999px;
15+
color: var(--md-button-font-color);
16+
transition:
17+
color 125ms,
18+
background 125ms,
19+
border-color 125ms,
20+
transform 125ms;
1821
}
1922

2023
.md-typeset .md-button:focus,
2124
.md-typeset .md-button:hover {
22-
border-color: var(--md-button-border-color);
23-
color: var(--md-button-font-color);
24-
background: rgba(78, 87, 105, 0.05);
25+
border-color: var(--md-button-border-color);
26+
color: var(--md-button-font-color);
27+
background: rgba(78, 87, 105, 0.05);
2528
}
2629

2730
.md-typeset .md-button.md-button--primary {
28-
color: #fff;
29-
border-color: transparent;
30-
background: var(--reactpy-color-dark);
31+
color: #fff;
32+
border-color: transparent;
33+
background: var(--reactpy-color-dark);
3134
}
3235

3336
.md-typeset .md-button.md-button--primary:focus,
3437
.md-typeset .md-button.md-button--primary:hover {
35-
border-color: transparent;
36-
background: var(--reactpy-color-darker);
38+
border-color: transparent;
39+
background: var(--reactpy-color-darker);
3740
}
3841

3942
.md-typeset .md-button:focus {
40-
transform: scale(0.98);
43+
transform: scale(0.98);
4144
}

0 commit comments

Comments
 (0)