Skip to content

Commit 92445e9

Browse files
drammockdrammock
authored
MAINT: fixes to tabbed examples in docs (#1379)
* capitalize tab titles * add overline hover effect to tabs * make rST/md examples match * prevent spurious link to conf.py
1 parent e9f248c commit 92445e9

File tree

4 files changed

+39
-25
lines changed

4 files changed

+39
-25
lines changed

‎docs/community/topics/page-metadata.md

Lines changed: 2 additions & 2 deletions
Original file line numberDiff line numberDiff line change
@@ -8,12 +8,12 @@ This is [similar to how the TOML language defines nested configuration](https://
88
For example, to remove the secondary sidebar, we use a page metadata key like this:
99

1010
`````{tab-set}
11-
````{tab-item} rst
11+
````{tab-item} rST
1212
```rst
1313
:html_theme.sidebar_secondary.remove: true
1414
```
1515
````
16-
````{tab-item} markdown
16+
````{tab-item} Markdown
1717
```md
1818
---
1919
html_theme.sidebar_secondary.remove: true

‎docs/user_guide/static_assets.md

Lines changed: 28 additions & 15 deletions
Original file line numberDiff line numberDiff line change
@@ -35,7 +35,9 @@ They will be added to the end of the `<head>` of your site.
3535
For example:
3636

3737
```{code-block} python
38-
:caption: conf.py
38+
---
39+
caption: '`conf.py`'
40+
---
3941
4042
html_static_path = ["_static"]
4143
html_css_files = ["mycss.css"]
@@ -59,7 +61,9 @@ In addition, `app.add_js_file` allows you to add _raw JavaScript_ in addition to
5961
For example:
6062

6163
```{code-block} python
62-
:caption: conf.py
64+
---
65+
caption: '`conf.py`'
66+
---
6367
6468
html_static_path = ["_static"]
6569
@@ -87,7 +91,9 @@ If you run `app.add_js_file` or `app.add_css_file`, it will _only be added for t
8791
For example:
8892

8993
```{code-block} python
90-
:caption: conf.py
94+
---
95+
caption: '`conf.py`'
96+
---
9197
html_static_path = ["_static"]
9298
9399
def add_my_files(app, pagename, templatename, context, doctree):
@@ -103,28 +109,35 @@ def setup(app):
103109
## Add it directly to the page content
104110

105111
Finally, you can add CSS or JS directly to a page's content.
106-
If you're using either the raw directive (reStructuredText) or pure html (MyST Markdown).
112+
If you're using reStructuredText you can use the `.. raw::` directive; if you're using MyST Markdown you can simply include the HTML content in-line with your Markdown-formatted content.
107113

108114
``````{tab-set}
109-
`````{tab-item} rst
115+
`````{tab-item} rST
110116
````{code-block} rst
111117
:caption: some_page_in_my_site.rst
118+
My title
119+
========
120+
121+
Some text
122+
112123
.. raw:: html
113124
114-
<style>
115-
.myclass {
116-
font-size: 2rem;
117-
}
125+
<style>
126+
/* Make h2 bigger */
127+
h2 {
128+
font-size: 3rem;
129+
}
130+
</style>
118131
119-
</style>
120-
<script>
121-
console.log("hi!")
122-
</script>
132+
A bigger title
133+
--------------
134+
135+
Some other text
123136
````
124137
`````
125-
`````{tab-item} markdown
138+
`````{tab-item} Markdown
126139
````{code-block} md
127-
:caption: other_page_in_my_site.md
140+
:caption: some_page_in_my_site.md
128141
# My title
129142
130143
Some text

‎docs/user_guide/theme-elements.md

Lines changed: 6 additions & 6 deletions
Original file line numberDiff line numberDiff line change
@@ -61,15 +61,15 @@ You can also provide captions with code blocks, which will be displayed right ab
6161
For example, the following code:
6262

6363
``````{tab-set}
64-
`````{tab-item} rst
64+
`````{tab-item} rST
6565
````rst
6666
.. code-block:: python
6767
:caption: python.py
6868
6969
print("A code block with a caption.")
7070
````
7171
`````
72-
`````{tab-item} markdown
72+
`````{tab-item} Markdown
7373
````md
7474
```{code-block} python
7575
:caption: python.py
@@ -92,7 +92,7 @@ You can also display line numbers.
9292
For example, the following code:
9393

9494
``````{tab-set}
95-
`````{tab-item} rst
95+
`````{tab-item} rST
9696
````rst
9797
.. code-block:: python
9898
:caption: python.py
@@ -103,7 +103,7 @@ For example, the following code:
103103
print("A code block with a caption and line numbers.")
104104
````
105105
`````
106-
`````{tab-item} markdown
106+
`````{tab-item} Markdown
107107
````md
108108
```{code-block} python
109109
:caption: python.py
@@ -183,15 +183,15 @@ To make an admonition behave like a sidebar, add the `sidebar` class to its list
183183
The admonition sidebar in this section was created with the following Markdown:
184184

185185
``````{tab-set}
186-
`````{tab-item} rst
186+
`````{tab-item} rST
187187
````rst
188188
.. admonition:: A sidebar admonition!
189189
:class: sidebar note
190190
191191
Some sidebar content.
192192
````
193193
`````
194-
`````{tab-item} markdown
194+
`````{tab-item} Markdown
195195
````md
196196
```{admonition} A sidebar admonition!
197197
:class: sidebar note

‎src/pydata_sphinx_theme/assets/styles/extensions/_sphinx_design.scss

Lines changed: 3 additions & 2 deletions
Original file line numberDiff line numberDiff line change
@@ -158,7 +158,7 @@ html[data-theme="light"] {
158158
> input {
159159
// Active tab label
160160
&:checked + label {
161-
border-color: var(--pst-color-primary);
161+
border-color: transparent transparent var(--pst-color-primary); // top LR bottom
162162
color: var(--pst-color-primary);
163163
}
164164

@@ -172,7 +172,8 @@ html[data-theme="light"] {
172172
// Tab label
173173
> label {
174174
color: var(--pst-color-text-muted);
175-
175+
border-top: 0.125rem solid transparent; // so hover isn't just color change
176+
padding-top: 0.5em; // same as bottom padding, so hover overline looks OK
176177
// Hovered label
177178
html &:hover {
178179
color: var(--pst-color-secondary);

0 commit comments

Comments
 (0)