Skip to content

Commit 8da268f

Browse files
AakashGfudepre-commit-ci[bot]
AakashGfude
and
pre-commit-ci[bot]
authored
ENH: Update pydata theme to 0.10 (#597)
* update pyproject dependencies, link to prev-next, using announcement of pydata * updating layout.html, header-article, and using sidebar-primary and sidebar-secondary * header-article styles and sidebar-secondary style and html * scroll-pixel-helper, js fix, removing sidebar secondary css * setting sidebar primary styles * styling changes and rtd footer * [pre-commit.ci] auto fixes from pre-commit.com hooks for more information, see https://pre-commit.ci * changing comment and class name in _readthedocs * adding layout html, scss for sidebars and article width * sidebar secondary styles * [pre-commit.ci] auto fixes from pre-commit.com hooks for more information, see https://pre-commit.ci * sidebar secondary styles, margin, sidebars * [pre-commit.ci] auto fixes from pre-commit.com hooks for more information, see https://pre-commit.ci * removing package-lock.json here, but we should keep it in the repo in future * transition css * [pre-commit.ci] auto fixes from pre-commit.com hooks for more information, see https://pre-commit.ci * sidebar secondary toc * [pre-commit.ci] auto fixes from pre-commit.com hooks for more information, see https://pre-commit.ci * updated pydata version * cleaning layout file and empyting block navbar * correcting header-article and sidebar-secondary styles, html * max width 50em * [pre-commit.ci] auto fixes from pre-commit.com hooks for more information, see https://pre-commit.ci * footer content style * removing footer and editing primary sidebar * [pre-commit.ci] auto fixes from pre-commit.com hooks for more information, see https://pre-commit.ci * added some styles * [pre-commit.ci] auto fixes from pre-commit.com hooks for more information, see https://pre-commit.ci * search bar style * css and style changes * some admontion scss * added some admonition classed and generate_toctree_html * [pre-commit.ci] auto fixes from pre-commit.com hooks for more information, see https://pre-commit.ci * container widths * admonition styling * added nprint js and css/html changes * css and js adjustments * tests correction * [pre-commit.ci] auto fixes from pre-commit.com hooks for more information, see https://pre-commit.ci * updating to pydata 10.1 * styles for toggle button * [pre-commit.ci] auto fixes from pre-commit.com hooks for more information, see https://pre-commit.ci * changing test to accomodate primary sidebar * adding variables and comments * search related css * secondary sidebar icon and border-left * removed admonitions * updating styles in scss * updating links * changing color codes to rgb * set default_mode to light * adjusting content width to cater to full-width elements * config value * default_mode in builder-inited * setting mode to light * style edits for small anomalies * search input placeholder color Co-authored-by: pre-commit-ci[bot] <66853113+pre-commit-ci[bot]@users.noreply.github.com>
1 parent 5c6f03e commit 8da268f

41 files changed

Lines changed: 458 additions & 448 deletions

Some content is hidden

Large Commits have some content hidden by default. Use the searchbox below for content that may be hidden.

‎pyproject.toml‎

Lines changed: 2 additions & 2 deletions
Original file line numberDiff line numberDiff line change
@@ -22,8 +22,8 @@ readme = "README.md"
2222

2323
requires-python = ">=3.7"
2424
dependencies = [
25-
"sphinx>=3,<5",
26-
"pydata-sphinx-theme~=0.8.0",
25+
"sphinx>=3,<6",
26+
"pydata-sphinx-theme~=0.10.1",
2727
"pyyaml",
2828
]
2929

‎src/sphinx_book_theme/__init__.py‎

Lines changed: 8 additions & 2 deletions
Original file line numberDiff line numberDiff line change
@@ -111,7 +111,7 @@ def hash_html_assets(app, pagename, templatename, context, doctree):
111111
hash_assets_for_files(assets, get_html_theme_path() / "static", context)
112112

113113

114-
def update_thebe_config(app):
114+
def update_mode_thebe_config(app):
115115
"""Update thebe configuration with SBT-specific values"""
116116
theme_options = app.env.config.html_theme_options
117117
if theme_options.get("launch_buttons", {}).get("thebe") is True:
@@ -144,6 +144,12 @@ def update_thebe_config(app):
144144

145145
app.env.config.thebe_config = thebe_config
146146

147+
# setting default mode to light for now.
148+
# TODO: provide a button, and add css for dark theme.
149+
# sphinx-build command does not call config-inited,
150+
# so setting this in builder-inited.
151+
app.config.html_context["default_mode"] = "light"
152+
147153

148154
class Margin(Sidebar):
149155
"""Goes in the margin to the right of the page."""
@@ -185,7 +191,7 @@ def setup(app: Sphinx):
185191
app.add_message_catalog(MESSAGE_CATALOG_NAME, locale_dir)
186192

187193
# Events
188-
app.connect("builder-inited", update_thebe_config)
194+
app.connect("builder-inited", update_mode_thebe_config)
189195
app.connect("config-inited", update_general_config)
190196
app.connect("html-page-context", add_metadata_to_page)
191197
app.connect("html-page-context", hash_html_assets)

‎src/sphinx_book_theme/assets/scripts/index.js‎

Lines changed: 25 additions & 24 deletions
Original file line numberDiff line numberDiff line change
@@ -49,27 +49,6 @@ var toggleFullScreen = () => {
4949
}
5050
};
5151

52-
/**
53-
* Sidebar scroll on load.
54-
*
55-
* Detect the active page in the sidebar, and scroll so that it is centered on
56-
* the screen.
57-
*/
58-
var scrollToActive = () => {
59-
var navbar = document.getElementById("site-navigation");
60-
var navbar_scrollable = navbar.children[0];
61-
var active_pages = navbar.querySelectorAll(".active");
62-
var active_page = active_pages[active_pages.length - 1];
63-
// Only scroll the navbar if the active link is lower than 50% of the page
64-
if (
65-
active_page !== undefined &&
66-
active_page.offsetTop > $(window).height() * 0.5
67-
) {
68-
navbar_scrollable.scrollTop =
69-
active_page.offsetTop - $(window).height() * 0.2;
70-
}
71-
};
72-
7352
/**
7453
* Called when the "print to PDF" button is clicked.
7554
* This is a hack to prevent tooltips from showing up in the printed PDF.
@@ -118,9 +97,9 @@ var initTocHide = () => {
11897

11998
// Hide the TOC if any margin content is displayed on the screen
12099
if (onScreenItems.length > 0) {
121-
$("div.bd-toc").removeClass("show");
100+
$("div.bd-sidebar-secondary").removeClass("show");
122101
} else {
123-
$("div.bd-toc").addClass("show");
102+
$("div.bd-sidebar-secondary").addClass("show");
124103
}
125104
};
126105
let manageScrolledClassOnBody = (entries, observer) => {
@@ -218,6 +197,27 @@ function initRTDObserver() {
218197
observer.observe(document.body, config);
219198
}
220199

200+
/**
201+
* Add no print class to certain DOM elements
202+
*/
203+
204+
function addNoPrint() {
205+
$("div.bd-sidebar-primary").addClass("noprint");
206+
$("div.bd-header-article").addClass("noprint");
207+
$("div.bd-header-announcement").addClass("noprint");
208+
$("footer.bd-footer-article").addClass("noprint");
209+
}
210+
211+
/**
212+
* Set Mode of the theme
213+
* Remove this function once all modes are supported.
214+
*/
215+
216+
function setMode() {
217+
document.documentElement.dataset.mode = "light";
218+
document.documentElement.dataset.theme = "light";
219+
}
220+
221221
/**
222222
* Set up callback functions for UI click actions
223223
*/
@@ -229,6 +229,7 @@ window.toggleFullScreen = toggleFullScreen;
229229
* Set up functions to load when the DOM is ready
230230
*/
231231
sbRunWhenDOMLoaded(initTooltips);
232-
sbRunWhenDOMLoaded(scrollToActive);
233232
sbRunWhenDOMLoaded(initTocHide);
234233
sbRunWhenDOMLoaded(initRTDObserver);
234+
sbRunWhenDOMLoaded(addNoPrint);
235+
sbRunWhenDOMLoaded(setMode);

‎src/sphinx_book_theme/assets/styles/abstracts/_variables.scss‎

Lines changed: 12 additions & 18 deletions
Original file line numberDiff line numberDiff line change
@@ -24,7 +24,7 @@ $leftbar-width-mobile: 75%;
2424
$leftbar-width-wide: 275px;
2525
$toc-width-mobile: 75%;
2626
// Main content, to leave room for the margin
27-
$content-max-width: 70%;
27+
$content-max-width: 75%;
2828

2929
// Consistent styling for page elements
3030
$box-border-radius: 0.4em;
@@ -35,26 +35,13 @@ $border-thin: 1px solid rgba(0, 0, 0, 0.1);
3535

3636
// Overrides for pydata sphinx theme.
3737
// See https://github.com/pydata/pydata-sphinx-theme/blob/master/pydata_sphinx_theme/static/css/theme.css
38-
:root {
38+
:root[data-theme="light"] {
3939
// Over-ride the pydata theme so that readers can use their system base
4040
--pst-font-size-base: none;
4141

42-
// Pulling colors from the Binder logo since they are complementary and on-brand
43-
--pst-color-primary: 87, 154, 202;
44-
--pst-color-admonition-note: var(--pst-color-primary);
45-
--pst-color-admonition-default: var(--pst-color-primary);
46-
47-
--pst-color-info: 255, 193, 7;
48-
--pst-color-admonition-tip: var(--pst-color-info);
49-
--pst-color-admonition-hint: var(--pst-color-info);
50-
--pst-color-admonition-important: var(--pst-color-info);
51-
52-
--pst-color-warning: 245, 162, 82;
53-
54-
--pst-color-danger: 230, 101, 129;
55-
--pst-color-admonition-warning: var(--pst-color-danger);
56-
57-
--pst-color-link: 0, 113, 188;
42+
--pst-color-primary: rgb(87, 154, 202);
43+
--pst-color-link: rgb(0, 113, 188);
44+
--pst-color-border: rgb(238, 238, 238);
5845

5946
// Font sizes
6047
--sbt-font-size-regular: 100%;
@@ -67,4 +54,11 @@ $border-thin: 1px solid rgba(0, 0, 0, 0.1);
6754
--sbt-header-article-font-size: var(--sbt-font-size-small-1);
6855
--sbt-prevnext-font-size: var(--sbt-font-size-small-1);
6956
--sbt-footer-font-size: var(--sbt-font-size-small-1);
57+
58+
// Search variables
59+
--sbt-color-search-highlighted: rgb(243, 119, 38);
60+
--sbt-color-search-icon: rgb(164, 166, 167);
61+
62+
// Announcement
63+
--sbt-color-announcement: rgb(97, 97, 97);
7064
}

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

Lines changed: 5 additions & 0 deletions
Original file line numberDiff line numberDiff line change
@@ -28,6 +28,11 @@
2828
display: none;
2929
}
3030

31+
// default color for all the links
32+
a {
33+
color: var(--pst-color-link);
34+
}
35+
3136
// Print-specific utility classes
3237
.onlyprint {
3338
display: none;

‎src/sphinx_book_theme/assets/styles/base/_print.scss‎

Lines changed: 72 additions & 51 deletions
Original file line numberDiff line numberDiff line change
@@ -2,65 +2,86 @@
22
* Print-specific CSS *
33
*********************************************/
44
@media print {
5-
// Structural elements
6-
#jb-print-docs-body {
7-
max-width: 90%;
8-
margin: auto;
5+
.bd-main {
6+
.bd-content {
7+
margin-left: 3rem;
8+
height: auto;
9+
// Structural elements
10+
#jb-print-docs-body {
11+
margin-left: 0rem;
912

10-
h1 {
11-
font-size: 3em;
12-
text-align: center;
13-
margin-bottom: 0;
14-
}
15-
}
13+
h1 {
14+
font-size: 3em;
15+
text-align: center;
16+
margin-bottom: 0;
17+
}
18+
}
19+
// Main content adjustments
20+
.bd-article {
21+
padding-top: 0;
1622

17-
// Main content adjustments to center it a bit more
18-
#main-content {
19-
max-width: 67% !important;
20-
margin-left: 5% !important;
21-
padding-top: 0;
23+
// The first H1 is the title, we've already displayed above
24+
h1:first-of-type {
25+
display: none;
26+
}
27+
}
2228

23-
// The first H1 is the title, we've already displayed above
24-
h1:first-of-type {
25-
display: none;
26-
}
27-
}
29+
// HACK: Without this, some code cells take the whole width
30+
.container {
31+
min-width: 0% !important;
32+
}
2833

29-
// HACK: Without this, some code cells take the whole width
30-
.container {
31-
min-width: 0% !important;
32-
}
34+
// Content
35+
h1 {
36+
margin-top: 1em;
37+
margin-bottom: 1em;
38+
}
39+
h1,
40+
h2,
41+
h3,
42+
h4 {
43+
break-after: avoid;
44+
color: black;
45+
}
3346

34-
// Content
35-
h1 {
36-
margin-top: 1em;
37-
margin-bottom: 1em;
38-
}
39-
h1,
40-
h2,
41-
h3,
42-
h4 {
43-
break-after: avoid;
44-
color: black;
45-
}
47+
table {
48+
break-inside: avoid;
49+
}
4650

47-
table {
48-
break-inside: avoid;
49-
}
50-
51-
pre {
52-
word-wrap: break-word;
53-
}
51+
pre {
52+
word-wrap: break-word;
53+
}
5454

55-
a.headerlink {
56-
display: none;
57-
}
55+
a.headerlink {
56+
display: none;
57+
}
5858

59-
blockquote.epigraph {
60-
border: none;
61-
}
59+
blockquote.epigraph {
60+
border: none;
61+
}
6262

63-
.footer {
64-
margin-top: 1em;
63+
.footer {
64+
margin-top: 1em;
65+
}
66+
// Print-only table of contents
67+
#jb-print-toc {
68+
margin-bottom: 1.5rem;
69+
margin-left: 0rem;
70+
.section-nav {
71+
border-left: 0px !important;
72+
list-style-type: disc !important;
73+
margin-left: 3em !important;
74+
a {
75+
text-decoration: none !important;
76+
}
77+
li {
78+
display: list-item !important;
79+
}
80+
.nav {
81+
display: none;
82+
}
83+
}
84+
}
85+
}
6586
}
6687
}

‎src/sphinx_book_theme/assets/styles/base/_typography.scss‎

Lines changed: 4 additions & 9 deletions
Original file line numberDiff line numberDiff line change
@@ -2,22 +2,23 @@
22
* Basic text formatting and content structure *
33
*********************************************/
44

5-
.content-container {
5+
.bd-article-container {
66
// Content links and link color
77
a.headerlink {
88
opacity: 0;
99
margin-left: 0.2em;
1010

1111
&:hover {
1212
background-color: transparent;
13-
color: rgba(var(--pst-color-link), 1);
13+
color: var(--pst-color-link);
1414
opacity: 1 !important;
1515
}
1616
}
1717

1818
a,
19+
a.nav-link, // to be more specific, so that pst style doesn't override
1920
a:visited {
20-
color: rgba(var(--pst-color-link), 1);
21+
color: var(--pst-color-link);
2122
}
2223

2324
h1,
@@ -55,10 +56,4 @@
5556
p.centered {
5657
text-align: center;
5758
}
58-
59-
// Footnotes and Citations
60-
.footnote-reference,
61-
a.bibtex.internal {
62-
font-size: 1em;
63-
}
6459
}

‎src/sphinx_book_theme/assets/styles/components/_buttons.scss‎

Lines changed: 1 addition & 1 deletion
Original file line numberDiff line numberDiff line change
@@ -110,7 +110,7 @@ div.header-article-main {
110110
/**
111111
* In-page table of contents
112112
*/
113-
.headerbtn-page-toc {
113+
.headerbtn-secondary {
114114
// Hide the button on wide screens since we display the TOC.
115115
display: block;
116116
@media (min-width: $breakpoint-md) {

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

Lines changed: 10 additions & 1 deletion
Original file line numberDiff line numberDiff line change
@@ -5,5 +5,14 @@
55
// Highlighted search items are a slightly lighter version of Jupyter orange
66
dt:target,
77
span.highlighted {
8-
background-color: #f3772642;
8+
background-color: var(--sbt-color-search-highlighted);
9+
}
10+
11+
.bd-search {
12+
.icon {
13+
color: var(--sbt-color-search-icon);
14+
}
15+
.search-button__kbd-shortcut {
16+
display: none;
17+
}
918
}

0 commit comments

Comments
 (0)