Skip to content

Commit a6f51c6

Browse files
andersy005andersy005
authored
Fix sticky sidebar responsiveness on small screens (#5039)
1 parent d9ba56c commit a6f51c6

File tree

1 file changed

+246
-3
lines changed

1 file changed

+246
-3
lines changed

‎doc/_static/style.css‎

Lines changed: 246 additions & 3 deletions
Original file line numberDiff line numberDiff line change
@@ -10,11 +10,254 @@ table.docutils td {
1010
/* Reduce left and right margins */
1111

1212
.container, .container-lg, .container-md, .container-sm, .container-xl {
13-
max-width: 1600px !important;
13+
max-width: 1350px !important;
1414
}
1515

16-
/* Make sidebar sticky */
16+
17+
/* Copied from
18+
https://github.com/bokeh/bokeh/blob/branch-2.4/sphinx/source/bokeh/static/custom.css
19+
*/
20+
21+
:root {
22+
/* Logo image height + all the paddings/margins make the navbar height. */
23+
--navbar-height: calc(30px + 0.3125rem * 2 + 0.5rem * 2);
24+
}
25+
26+
.bd-search {
27+
position: relative;
28+
padding-bottom: 20px;
29+
}
30+
31+
@media (min-width: 768px) {
32+
.search-front-page {
33+
width: 50%;
34+
}
35+
}
36+
37+
/* minimal copy paste from bootstrap docs css to get sidebars working */
38+
39+
.bd-toc {
40+
-ms-flex-order: 2;
41+
order: 2;
42+
padding-top: 1.5rem;
43+
padding-bottom: 1.5rem;
44+
/* font-size: 0.875rem; */
45+
/* add scrolling sidebar */
46+
height: calc(100vh - 2rem);
47+
overflow-y: auto;
48+
}
49+
50+
@supports ((position: -webkit-sticky) or (position: sticky)) {
51+
.bd-toc {
52+
position: -webkit-sticky;
53+
position: sticky;
54+
top: 4rem;
55+
height: calc(100vh - 4rem);
56+
overflow-y: auto;
57+
}
58+
}
59+
60+
.section-nav {
61+
padding-left: 0;
62+
border-left: 1px solid #eee;
63+
border-bottom: none;
64+
}
65+
66+
.section-nav ul {
67+
padding-left: 1rem;
68+
}
69+
70+
.toc-entry {
71+
display: block;
72+
}
73+
74+
.toc-entry a {
75+
display: block;
76+
padding: 0.125rem 1.5rem;
77+
color: #77757a;
78+
}
79+
80+
.toc-entry a:hover {
81+
color: rgba(0, 0, 0, 0.85);
82+
text-decoration: none;
83+
}
1784

1885
.bd-sidebar {
19-
position: sticky !important;
86+
-ms-flex-order: 0;
87+
order: 0;
88+
border-bottom: 1px solid rgba(0, 0, 0, 0.1);
89+
}
90+
91+
@media (min-width: 768px) {
92+
.bd-sidebar {
93+
border-right: 1px solid rgba(0, 0, 0, 0.1);
94+
}
95+
@supports ((position: -webkit-sticky) or (position: sticky)) {
96+
.bd-sidebar {
97+
position: -webkit-sticky;
98+
position: sticky;
99+
top: var(--navbar-height);
100+
z-index: 1000;
101+
height: calc(100vh - var(--navbar-height));
102+
}
103+
}
104+
}
105+
106+
@media (min-width: 1200px) {
107+
.bd-sidebar {
108+
-ms-flex: 0 1 320px;
109+
flex: 0 1 320px;
110+
}
111+
}
112+
113+
.bd-links {
114+
padding-top: 1rem;
115+
padding-bottom: 1rem;
116+
margin-right: -15px;
117+
margin-left: -15px;
118+
}
119+
120+
@media (min-width: 768px) {
121+
@supports ((position: -webkit-sticky) or (position: sticky)) {
122+
.bd-links {
123+
max-height: calc(100vh - 9rem);
124+
overflow-y: auto;
125+
}
126+
}
127+
}
128+
129+
@media (min-width: 768px) {
130+
.bd-links {
131+
display: block !important;
132+
}
133+
}
134+
135+
.bd-sidenav {
136+
display: none;
137+
}
138+
139+
.bd-toc-link {
140+
display: block;
141+
padding: 0.25rem 1.5rem;
142+
font-weight: 400;
143+
color: rgba(0, 0, 0, 0.65);
144+
}
145+
146+
.bd-toc-link:hover {
147+
color: rgba(0, 0, 0, 0.85);
148+
text-decoration: none;
149+
}
150+
151+
.bd-toc-item.active {
152+
margin-bottom: 1rem;
153+
}
154+
155+
.bd-toc-item.active:not(:first-child) {
156+
margin-top: 1rem;
157+
}
158+
159+
.bd-toc-item.active > .bd-toc-link {
160+
color: rgba(0, 0, 0, 0.85);
161+
}
162+
163+
.bd-toc-item.active > .bd-toc-link:hover {
164+
background-color: transparent;
165+
}
166+
167+
.bd-toc-item.active > .bd-sidenav {
168+
display: block;
169+
}
170+
171+
.bd-sidebar .nav > li > a {
172+
display: block;
173+
padding: 0.25rem 1.5rem;
174+
font-size: 90%;
175+
color: rgba(0, 0, 0, 0.65);
176+
}
177+
178+
.bd-sidebar .nav > li > a:hover {
179+
color: rgba(0, 0, 0, 0.85);
180+
text-decoration: none;
181+
background-color: transparent;
182+
}
183+
184+
.bd-sidebar .nav > .active > a,
185+
.bd-sidebar .nav > .active:hover > a {
186+
font-weight: 400;
187+
color: #130654;
188+
/* adjusted from original
189+
color: rgba(0, 0, 0, 0.85);
190+
background-color: transparent; */
191+
}
192+
193+
.bd-sidebar .nav > li > ul {
194+
list-style: none;
195+
padding: 0.25rem 1.5rem;
196+
}
197+
198+
.bd-sidebar .nav > li > ul > li > a {
199+
display: block;
200+
padding: 0.25rem 1.5rem;
201+
font-size: 90%;
202+
color: rgba(0, 0, 0, 0.65);
203+
}
204+
205+
.bd-sidebar .nav > li > ul > .active > a,
206+
.bd-sidebar .nav > li > ul > .active:hover > a {
207+
font-weight: 400;
208+
color: #542437;
209+
}
210+
211+
dt:target {
212+
background-color: initial;
213+
}
214+
215+
/* Offsetting anchored elements within the main content to adjust for fixed header
216+
https://github.com/pandas-dev/pandas-sphinx-theme/issues/6 */
217+
main *:target::before {
218+
display: block;
219+
content: '';
220+
height: var(--navbar-height);
221+
margin-top: calc(-1 * var(--navbar-height));
222+
}
223+
224+
body {
225+
/* Add padding to body to avoid overlap with navbar. */
226+
padding-top: var(--navbar-height);
227+
width: 100%;
228+
}
229+
230+
/* adjust toc font sizes to improve overview */
231+
.toc-h2 {
232+
font-size: 0.85rem;
233+
}
234+
235+
.toc-h3 {
236+
font-size: 0.75rem;
237+
}
238+
239+
.toc-h4 {
240+
font-size: 0.65rem;
241+
}
242+
243+
.toc-entry > .nav-link.active {
244+
font-weight: 400;
245+
color: #542437;
246+
background-color: transparent;
247+
border-left: 2px solid #563d7c;
248+
}
249+
250+
.nav-link:hover {
251+
border-style: none;
252+
}
253+
254+
/* Collapsing of the TOC sidebar while scrolling */
255+
256+
/* Nav: hide second level (shown on .active) */
257+
.bd-toc .nav .nav {
258+
display: none;
259+
}
260+
261+
.bd-toc .nav > .active > ul {
262+
display: block;
20263
}

0 commit comments

Comments
 (0)