Skip to content

Commit 048b09c

Browse files
choldgrafdrammock
choldgraf
and
drammock
authored
Fix several CSS elements and bugs for Sphinx 5 (#818)
Co-authored-by: Daniel McCloy <[email protected]>
1 parent f57ca0d commit 048b09c

29 files changed

+323
-87
lines changed

‎docs/examples/pydata.md

+4
Original file line numberDiff line numberDiff line change
@@ -32,6 +32,10 @@ df
3232

3333
## Matplotlib
3434

35+
```{sidebar}
36+
Here's a sidebar to test that the code cells behave as we'd expect when there is content to the right. The code cell should be displayed to the left and with no overlap.
37+
```
38+
3539
```{code-cell}
3640
import matplotlib.pyplot as plt
3741

‎docs/user_guide/analytics.rst

+1
Original file line numberDiff line numberDiff line change
@@ -1,3 +1,4 @@
1+
============================
12
Analytics and usage services
23
============================
34

‎docs/user_guide/layout.rst

+10-4
Original file line numberDiff line numberDiff line change
@@ -270,7 +270,7 @@ By default, it has the following configuration:
270270
271271
- ``sidebar-nav-bs.html`` - a bootstrap-friendly navigation section.
272272

273-
When there are no pages to show, it will disappear and potentially add extra space for your page's content.
273+
When there are no pages to show, it will disappear and potentially add extra space for your page's content.
274274

275275
- ``sidebar-ethical-ads.html`` - a placement for ReadTheDocs's Ethical Ads (will only show up on ReadTheDocs).
276276

@@ -407,20 +407,26 @@ Below is a list of built-in templates that you can insert into any section.
407407
Note that some of them may have CSS rules that assume a specific section (and
408408
will be named accordingly).
409409

410-
- ``icon-links.html``
411-
- ``search-field.html``
410+
.. refer to files in: src/pydata_sphinx_theme/theme/pydata_sphinx_theme/components/
411+
412412
- ``copyright.html``
413413
- ``edit-this-page.html``
414+
- ``footer-article/prev-next.html``
415+
- ``icon-links.html``
414416
- ``last-updated.html``
415417
- ``navbar-icon-links.html``
416418
- ``navbar-logo.html``
417419
- ``navbar-nav.html``
418420
- ``page-toc.html``
421+
- ``search-button.html``
422+
- ``search-field.html``
419423
- ``sidebar-ethical-ads.html``
420424
- ``sidebar-nav-bs.html``
425+
- ``sourcelink.html``
421426
- ``sphinx-version.html``
422-
- ``version-switcher.html``
423427
- ``theme-switcher.html``
428+
- ``version-switcher.html``
429+
424430

425431
Add your own HTML templates to theme sections
426432
=============================================

‎docs/user_guide/theme-elements.md

+11
Original file line numberDiff line numberDiff line change
@@ -118,6 +118,17 @@ I was made with the `{admonition}` directive and a `sidebar` class.
118118
I was made with the `{sidebar}` directive.
119119
```
120120

121+
## Footnotes
122+
123+
Here's one footnote[^1] and another footnote [^2] and a named footenote[^named], symbol [^*].
124+
125+
[^1]: Foo bar foo bar. Foo bar foo bar. Foo bar foo bar. Foo bar foo bar. Foo bar foo bar. Foo bar foo bar. Foo bar foo bar. Foo bar foo bar. Foo bar foo bar. Foo bar foo bar. Foo bar foo bar. Foo bar foo bar.
126+
[^2]: Foo bar foo bar. Foo bar foo bar. Foo bar foo bar. Foo bar foo bar. Foo bar foo bar. Foo bar foo bar. Foo bar foo bar. Foo bar foo bar. Foo bar foo bar. Foo bar foo bar. Foo bar foo bar. Foo bar foo bar.
127+
[^named]: Foo bar foo bar. Foo bar foo bar. Foo bar foo bar. Foo bar foo bar. Foo bar foo bar. Foo bar foo bar. Foo bar foo bar. Foo bar foo bar. Foo bar foo bar. Foo bar foo bar. Foo bar foo bar. Foo bar foo bar.
128+
[^*]: Foo bar foo bar. Foo bar foo bar. Foo bar foo bar. Foo bar foo bar. Foo bar foo bar. Foo bar foo bar. Foo bar foo bar. Foo bar foo bar. Foo bar foo bar. Foo bar foo bar. Foo bar foo bar. Foo bar foo bar.
129+
130+
## Version changes
131+
121132
This theme supports a short-hand way of making **admonitions behave like sidebars**.
122133
This can be a helpful way of highlighting content that lives to the side of your main text without interrupting the vertical flow as much.
123134

‎docs/user_guide/web-components.rst

+5-4
Original file line numberDiff line numberDiff line change
@@ -1,5 +1,6 @@
11
.. INSPIRED FROM sphinx-design documentation
22
3+
========================
34
Sphinx Design Components
45
========================
56

@@ -30,7 +31,7 @@ Below you can find some examples of the components created with the :code:`sphin
3031
.. _badges-buttons:
3132

3233
Badges and buttons
33-
------------------
34+
==================
3435

3536
Here are some of the available badges:
3637
:bdg-primary:`primary`
@@ -82,7 +83,7 @@ If in your site's `custom CSS file <custom-css>`_ you override the `CSS custom p
8283
Muted
8384

8485
Cards
85-
-----
86+
=====
8687

8788
.. grid::
8889

@@ -122,7 +123,7 @@ Cards
122123

123124

124125
Tabs
125-
----
126+
====
126127

127128
.. tab-set::
128129

@@ -165,7 +166,7 @@ Tabs
165166
END PROGRAM main
166167
167168
Dropdowns
168-
---------
169+
=========
169170

170171
Dropdowns should look similar to admonitions, but clickable.
171172
See `the Sphinx Design Dropdown documentation <https://sphinx-design.readthedocs.io/en/latest/dropdowns.html>`__ for more information.

‎src/pydata_sphinx_theme/assets/styles/base/_base.scss

+2-3
Original file line numberDiff line numberDiff line change
@@ -112,7 +112,7 @@ small,
112112

113113
hr {
114114
border: 0;
115-
border-top: 1px solid var(pst-color-border);
115+
border-top: 1px solid var(--pst-color-border);
116116
}
117117

118118
pre,
@@ -147,8 +147,7 @@ pre {
147147
color: var(--pst-color-text-base);
148148
line-height: 1.2em;
149149
border: 1px solid var(--pst-color-border);
150-
border-radius: 0.2rem;
151-
box-shadow: 1px 1px 1px var(--pst-color-shadow);
150+
border-radius: $admonition-border-radius;
152151

153152
@include scrollbar-style();
154153

‎src/pydata_sphinx_theme/assets/styles/components/_navbar-links.scss

+1-1
Original file line numberDiff line numberDiff line change
@@ -36,7 +36,7 @@
3636
}
3737

3838
// Active page is always highlighted
39-
&.current a {
39+
&.current > a {
4040
font-weight: 600;
4141
color: var(--pst-color-primary);
4242
}

‎src/pydata_sphinx_theme/assets/styles/components/_prev-next.scss

+1-1
Original file line numberDiff line numberDiff line change
@@ -24,7 +24,7 @@
2424

2525
p.prev-next-title {
2626
color: var(--pst-color-primary);
27-
font-weight: 600;
27+
font-weight: var(--pst-font-weight-heading);
2828
font-size: 1.1em;
2929
}
3030

‎src/pydata_sphinx_theme/assets/styles/components/_search.scss

+1-1
Original file line numberDiff line numberDiff line change
@@ -15,7 +15,7 @@
1515

1616
input {
1717
background-color: var(--pst-color-background);
18-
border-radius: 0.2rem;
18+
border-radius: $admonition-border-radius;
1919
border: 1px solid var(--pst-color-border);
2020
padding-left: 2.5rem;
2121
color: var(--pst-color-border);

‎src/pydata_sphinx_theme/assets/styles/components/_switcher-theme.scss

+2-1
Original file line numberDiff line numberDiff line change
@@ -2,7 +2,8 @@
22
.theme-switch-button {
33
// overide bootstrap settings
44
border-color: var(--pst-color-on-background);
5-
font-size: var(--pst-font-size-icon);
5+
// Size is a bit smaller because the background shadow is bigger
6+
font-size: calc(var(--pst-font-size-icon) - 0.1rem);
67
margin: 0 -0.5rem;
78
padding: 0; // We pad the `a` not the container
89

‎src/pydata_sphinx_theme/assets/styles/components/_versionmodified.scss

+1-1
Original file line numberDiff line numberDiff line change
@@ -8,7 +8,7 @@ div.deprecated {
88
page-break-inside: avoid;
99
border-left: 0.2rem solid;
1010
border-color: var(--pst-color-info);
11-
border-radius: 0.2rem;
11+
border-radius: $admonition-border-radius;
1212
transition: color 250ms, background-color 250ms, border-color 250ms;
1313
background-color: var(--pst-color-on-background);
1414
@include box-shadow();

‎src/pydata_sphinx_theme/assets/styles/content/_admonitions.scss

+63-11
Original file line numberDiff line numberDiff line change
@@ -1,5 +1,8 @@
1-
// Admonitions CSS originally inspired by https://squidfunk.github.io/mkdocs-material/getting-started/
2-
1+
/**
2+
* Admonitions and blocks of styled content.
3+
* Admonitions CSS originally inspired by https://squidfunk.github.io/mkdocs-material/getting-started/
4+
*/
5+
$admonition-border-radius: 0.25rem;
36
div.admonition,
47
.admonition {
58
margin: 1.5625em auto;
@@ -8,7 +11,7 @@ div.admonition,
811
page-break-inside: avoid;
912
border-left: 0.2rem solid;
1013
border-color: var(--pst-color-info);
11-
border-radius: 0.2rem;
14+
border-radius: $admonition-border-radius;
1215
background-color: var(--pst-color-on-background);
1316
@include box-shadow();
1417

@@ -33,7 +36,7 @@ div.admonition,
3336
> .admonition-title {
3437
margin: 0 -0.6rem;
3538
padding: 0.4rem 0.6rem 0.4rem 2rem;
36-
font-weight: 600;
39+
font-weight: var(--pst-font-weight-heading);
3740
position: relative;
3841

3942
&:after {
@@ -227,16 +230,26 @@ div.admonition,
227230
}
228231
}
229232

230-
/*
233+
/**************************************************************
231234
* Similar content blocks that are not technically admonitions.
232235
*/
233236

234-
// Topics (also used for `contents` directive)
235-
div.topic {
237+
/**
238+
* Topics and the {contents} directive
239+
*/
240+
// Docutils <= 0.17
241+
div.topic,
242+
div.topic.contents,
243+
// Docutils >= 0.18
244+
nav.contents,
245+
aside.topic, {
246+
display: flex;
247+
flex-direction: column;
236248
background-color: var(--pst-color-surface);
237249
border-color: var(--pst-color-border);
238-
border-radius: 0.2rem;
250+
border-radius: $admonition-border-radius;
239251
padding: 1rem 1.25rem;
252+
@include box-shadow();
240253

241254
.topic-title {
242255
margin: 0 0 0.5rem 0;
@@ -253,14 +266,53 @@ div.topic {
253266
}
254267
}
255268

269+
/**
270+
* Sidebar directive
271+
*/
256272
aside.sidebar {
257-
background-color: var(--pst-color-on-surface);
258-
border-color: var(--pst-color-border);
259-
border-radius: 0.2rem;
273+
border: 1px solid var(--pst-color-border);
274+
background-color: var(--pst-color-surface);
275+
border-radius: $admonition-border-radius;
260276
// to match the admonition-styled sidebars:
261277
margin-left: 0.5rem;
278+
padding: 0;
279+
> *:last-child {
280+
padding-bottom: 1rem;
281+
}
282+
283+
p.sidebar-title {
284+
position: relative;
285+
margin-bottom: 0;
286+
padding-top: 0.5rem;
287+
padding-bottom: 0.5rem;
288+
border-bottom: 1px solid var(--pst-color-border);
289+
font-family: var(--pst-font-family-heading);
290+
font-weight: var(--pst-font-weight-heading);
291+
}
292+
293+
// Add margin to the first non-`.sidebar-title` item
294+
> *:not(.sidebar-title):first-child,
295+
> p.sidebar-title + * {
296+
margin-top: 1rem;
297+
}
298+
299+
> * {
300+
padding-left: 1rem;
301+
padding-right: 1rem;
302+
}
262303
}
263304

305+
/**
306+
* Rubrics look kind of like section headers
307+
*/
308+
p.rubric {
309+
display: flex;
310+
flex-direction: column;
311+
}
312+
313+
/**
314+
* Seealso is kind of like a vertically-collapsed admonition
315+
*/
264316
.seealso dd {
265317
margin-top: 0;
266318
margin-bottom: 0;

‎src/pydata_sphinx_theme/assets/styles/content/_code.scss

+21-2
Original file line numberDiff line numberDiff line change
@@ -1,24 +1,43 @@
11
/**
22
* Code block styling
3+
* Note that we inherit a lot of styling from Bootstrap so not many rules here.
34
*/
5+
6+
// General code block behavior
7+
// Unset bootstrap behavior
8+
div[class*="highlight-"],
9+
div.highlight,
10+
div.literal-block-wrapper {
11+
display: flex;
12+
flex-direction: column;
13+
width: unset;
14+
border-radius: $admonition-border-radius;
15+
}
16+
17+
// Code blocks with captions
418
// There's a wrapper when the code block has a title
519
div.literal-block-wrapper {
620
border: 1px solid var(--pst-color-border);
7-
box-shadow: 1px 1px 1px var(--pst-color-shadow);
8-
border-radius: 0.2rem; // A bit higher to make sure it doesn't stick out
21+
border-radius: $admonition-border-radius;
922

1023
// This is where the title goes
1124
div.code-block-caption {
1225
margin: 0;
1326
border-bottom: 1px solid var(--pst-color-border);
1427
padding: 0.5rem;
1528
font-size: 1rem;
29+
font-weight: var(--pst-font-weight-caption);
30+
31+
a.headerlink {
32+
font-size: inherit;
33+
}
1634
}
1735

1836
// Remove the upper border radius since we want it to connect with the title
1937
// Remove the box shadow so the wrapper gets the shadow instead
2038
div[class*="highlight-"] {
2139
margin: 0;
40+
border-radius: 0;
2241
pre {
2342
border: none;
2443
box-shadow: none;

‎src/pydata_sphinx_theme/assets/styles/content/_figures.scss

+25
Original file line numberDiff line numberDiff line change
@@ -0,0 +1,25 @@
1+
figure {
2+
a.headerlink {
3+
// So that header link doesn't push caption to be off-center.
4+
position: absolute;
5+
font-size: inherit;
6+
}
7+
// Default headerlink hover doesn't trigger on figures
8+
&:hover a.headerlink {
9+
visibility: visible;
10+
}
11+
12+
figcaption {
13+
font-family: var(--pst-font-family-heading);
14+
font-weight: var(--pst-font-weight-caption);
15+
color: var(--pst-color-text-muted);
16+
margin-left: auto;
17+
margin-right: auto;
18+
19+
table.table {
20+
width: fit-content;
21+
margin-left: auto;
22+
margin-right: auto;
23+
}
24+
}
25+
}

‎src/pydata_sphinx_theme/assets/styles/content/_footnotes.scss

+12
Original file line numberDiff line numberDiff line change
@@ -13,3 +13,15 @@ a.footnote-reference {
1313
vertical-align: super;
1414
font-size: small;
1515
}
16+
17+
// Docutils 0.18 uses an `aside.footnote` container with different internal structure
18+
aside.footnote {
19+
margin-bottom: 0.5rem;
20+
&:last-child {
21+
margin-bottom: 1rem;
22+
}
23+
span.label,
24+
span.backrefs {
25+
font-weight: bold;
26+
}
27+
}

‎src/pydata_sphinx_theme/assets/styles/content/_lists.scss

+6
Original file line numberDiff line numberDiff line change
@@ -11,3 +11,9 @@ dl.field-list {
1111
display: grid;
1212
grid-template-columns: fit-content(30%) minmax(0, 1fr);
1313
}
14+
15+
ol li > p:first-child,
16+
ul li > p:first-child {
17+
margin-bottom: 0.25rem;
18+
margin-top: 0.25rem;
19+
}

0 commit comments

Comments
 (0)