IntenseWebs/sphinx
3
0
Fork 0
mirror of https://github.com/sphinx-doc/sphinx.git synced 2025-02-25 18:55:22 -06:00
Code Issues Packages Projects Releases Wiki Activity

DOC: Improve internal sphinx13 style (#12439)

Browse Source 
This commit adds a few changes to the theme to make it more readable and visually more appealing. In particular:

- Slightly increase the font weight of headings (300 --> 400).
- Adapt the color of the search box border to sphinx-blue.
- Add horizontal bars between the components of the side bar. 
- Re-style admonitions to use colored title backgrounds.
This commit is contained in:
Tim Hoffmann 2024-06-19 00:44:44 +02:00 committed by GitHub
parent 6471027d19
commit e30430d2ba
No known key found for this signature in database
GPG Key ID: B5690EEEBB952194
1 changed files with 41 additions and 3 deletions
Show Stats Download Patch File Download Diff File Expand all files Collapse all files

44
doc/_themes/sphinx13/static/sphinx13.css vendored
View File

@ -4,6 +4,10 @@
:root { :root {
--fonts-sans-serif: system-ui, sans-serif, "Apple Color Emoji", "Segoe UI Emoji", "Segoe UI Symbol", "Noto Color Emoji"; --fonts-sans-serif: system-ui, sans-serif, "Apple Color Emoji", "Segoe UI Emoji", "Segoe UI Symbol", "Noto Color Emoji";
--colour-sphinx-blue: #0A507A; --colour-sphinx-blue: #0A507A;
--colour-warning-bg: #f8e3d0;
--colour-note-bg: #dce7fc;
--colour-success-bg: #d6ece1;
--colour-todo-bg: #e0c7ff;
--colour-text: #333; --colour-text: #333;
--colour-links-light: #057; --colour-links-light: #057;
} }
@ -93,6 +97,16 @@ div.sphinxsidebar {
font-size: 1em; font-size: 1em;
} }
/* horizontal line between sidebar components */
div.sphinxsidebar div:not(:first-child) {
border-top: 1px solid var(--colour-sphinx-blue);
}
/* overwrite color from basic theme */
div.sphinxsidebar input {
border: 1px solid var(--colour-sphinx-blue);
}
div.sphinxsidebar h3 { div.sphinxsidebar h3 {
font-size: 1.5em; font-size: 1.5em;
margin-top: 0; margin-top: 0;
@ -186,7 +200,7 @@ h1 {
margin: 10px 0 0 0; margin: 10px 0 0 0;
font-size: 2.4em; font-size: 2.4em;
color: var(--colour-sphinx-blue); color: var(--colour-sphinx-blue);
font-weight: 300; font-weight: 400;
} }
h1 span.pre { h1 span.pre {
@ -198,7 +212,7 @@ h1 span.pre {
h2 { h2 {
margin: 1em 0 0.2em 0; margin: 1em 0 0.2em 0;
font-size: 1.5em; font-size: 1.5em;
font-weight: 300; font-weight: 400;
padding: 0; padding: 0;
color: #174967; color: #174967;
} }
@ -206,7 +220,7 @@ h2 {
h3 { h3 {
margin: 1em 0 -0.3em 0; margin: 1em 0 -0.3em 0;
font-size: 1.3em; font-size: 1.3em;
font-weight: 300; font-weight: 400;
} }
div.body h1 a, div.body h2 a, div.body h3 a, div.body h4 a, div.body h5 a, div.body h6 a { div.body h1 a, div.body h2 a, div.body h3 a, div.body h4 a, div.body h5 a, div.body h6 a {
@ -341,8 +355,32 @@ div.admonition > pre, div.warning > pre {
div.admonition > p.admonition-title, div.admonition > p.admonition-title,
div.warning > p.admonition-title { div.warning > p.admonition-title {
font-weight: bold; font-weight: bold;
background-color: #ddd;
margin: -1rem -1rem 0.8rem -1rem;
padding: 0.3rem 1rem;
} }
div.important > p.admonition-title,
div.caution > p.admonition-title,
div.warning > p.admonition-title {
background-color: var(--colour-warning-bg);
}
div.note > p.admonition-title {
background-color: var(--colour-note-bg);
}
div.hint > p.admonition-title,
div.tip > p.admonition-title,
div.seealso > p.admonition-title {
background-color: var(--colour-success-bg);
}
div.todo > p.admonition-title {
background-color: var(--colour-todo-bg);
}
div.warning { div.warning {
border: 1px solid #940000; border: 1px solid #940000;
} }