Skip to content

Commit 6b8e537

Browse files
fsenffsenf
authored
Merge pull request #470 from freemansw1/pydata_documentation_theme
Feature: Documentation Revamp and Retheme
2 parents 0ebee82 + 0cecc40 commit 6b8e537

File tree

61 files changed

+716
-188
lines changed

Some content is hidden

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

61 files changed

+716
-188
lines changed

‎doc/_static/custom.css‎

Lines changed: 216 additions & 0 deletions
Original file line numberDiff line numberDiff line change
@@ -0,0 +1,216 @@
1+
/* Hero */
2+
3+
4+
#hero {
5+
display: flex;
6+
flex-direction: row;
7+
min-height: min(calc(75vh), 1000px); /* Make hero fill up most of the page on load */
8+
}
9+
#hero-left {
10+
max-width: 476px;
11+
width: 40%;
12+
margin: auto 0;
13+
}
14+
#hero-right {
15+
min-width: 476px;
16+
width: 60%;
17+
margin: auto 0;
18+
}
19+
20+
.homepage-button-container {
21+
margin-bottom: 1rem;
22+
display: flex;
23+
flex-direction: column;
24+
}
25+
.homepage-button-container-row {
26+
display: flex;
27+
flex-wrap: wrap;
28+
}
29+
30+
.homepage-button-container a {
31+
transition: 0.1s;
32+
}
33+
.homepage-button {
34+
min-width: 142px;
35+
padding: 0.5em 2em;
36+
border: 1px solid var(--pst-color-primary);
37+
border-radius: 4px;
38+
margin: 1em 0.5em 0.5em 0;
39+
}
40+
.primary-button {
41+
background-color: var(--pst-color-primary);
42+
color: var(--pst-color-background) !important;
43+
}
44+
.secondary-button {
45+
background-color: var(--pst-color-background);
46+
color: var(--pst-color-primary);
47+
}
48+
.homepage-button:hover {
49+
text-decoration: none;
50+
background-color: var(--pst-color-secondary);
51+
color: var(--pst-color-background);
52+
border: 1px solid var(--pst-color-secondary);
53+
}
54+
.homepage-button-link {
55+
text-decoration: underline;
56+
}
57+
58+
/* Key Features */
59+
#key-features .sd-card-body {
60+
display: flex;
61+
}
62+
#key-features .sd-card img {
63+
width: 140px;
64+
height: 140px;
65+
}
66+
#key-features .sd-card-body .key-features-text {
67+
min-width: 70%;
68+
padding: 20px 10px;
69+
}
70+
71+
/* Sponsors */
72+
#sponsors-and-institutional-partners p {
73+
text-align: center;
74+
}
75+
#sponsors-and-institutional-partners img {
76+
max-width: 200px;
77+
}
78+
79+
/* Support ArviZ */
80+
#support-arviz .sd-col {
81+
margin-bottom: 3rem;
82+
}
83+
#support-arviz p {
84+
text-align: center;
85+
}
86+
.support-arviz-img-merch img {
87+
height: 160px;
88+
}
89+
.support-arviz-img-donate img {
90+
display: block;
91+
width: 100%;
92+
padding: 60px 40px 20px;
93+
}
94+
.support-arviz-img-donate-responsive img {
95+
display: none;
96+
margin: auto;
97+
width: 80%;
98+
min-width: 0px;
99+
padding: 20px;
100+
}
101+
102+
/* Responsive */
103+
@media (max-width: 768px) {
104+
#hero {
105+
display: block;
106+
}
107+
#hero-left,
108+
#hero-right {
109+
width: 100%;
110+
min-width: 0px;
111+
}
112+
.support-arviz-img-donate img {
113+
display: none;
114+
}
115+
.support-arviz-img-donate-responsive img {
116+
display: block;
117+
}
118+
}
119+
120+
/* -------------------- HOMEPAGE + EXAMPLE GALLERY -------------------- */
121+
122+
/* Homepage - grid layout */
123+
.home-flex-grid {
124+
display: flex;
125+
flex-flow: row wrap;
126+
justify-content: center;
127+
gap: 10px;
128+
padding: 20px 0px 40px;
129+
}
130+
131+
/* Homepage + Example Gallery Body - Set dimensions */
132+
.home-img-plot,
133+
.bd-content div.sd-card.example-gallery .sd-card-body,
134+
.home-img-plot-overlay,
135+
.example-img-plot-overlay {
136+
display: flex;
137+
justify-content: center;
138+
align-items: center;
139+
overflow: hidden;
140+
padding: 10px;
141+
}
142+
.home-img-plot,
143+
.home-img-plot-overlay {
144+
width: 235px;
145+
height: 130px;
146+
}
147+
.bd-content div.sd-card.example-gallery .sd-card-body,
148+
.example-img-plot-overlay {
149+
width: 100%;
150+
height: 150px;
151+
}
152+
.home-img-plot img,
153+
.bd-content div.sd-card.example-gallery .sd-card-body img {
154+
/* Images keep aspect ratio and fit in container */
155+
/* To make images stretch/fill container, change to min-width */
156+
max-width: 100%;
157+
max-height: 100%;
158+
}
159+
160+
/* Homepage + Example Gallery Body - Set color and hover */
161+
.home-img-plot.img-thumbnail,
162+
.bd-content div.sd-card.example-gallery .sd-card-body {
163+
background-color: var(--pst-color-plot-background); /* Same as img-thumbnail from pydata css, adjusted for dark mode */
164+
}
165+
.home-img-plot-overlay,
166+
.example-img-plot-overlay,
167+
.bd-content div.sd-card.example-gallery .sd-card-body {
168+
border: 1px solid #dee2e6; /* Same as img-thumbnail from pydata css */
169+
border-radius: 0.25rem; /* Same as img-thumbnail from pydata css */
170+
}
171+
.home-img-plot-overlay,
172+
.example-img-plot-overlay,
173+
.example-img-plot-overlay p.sd-card-text {
174+
background: var(--pst-color-primary);
175+
position: absolute;
176+
color: var(--pst-color-background);
177+
opacity: 0;
178+
transition: .2s ease;
179+
text-align: center;
180+
padding: 10px;
181+
z-index: 998; /* Make sure overlay is above image...this is here to handle dark mode */
182+
}
183+
.home-img-plot-overlay:hover,
184+
.bd-content div.sd-card.example-gallery:hover .example-img-plot-overlay,
185+
.example-img-plot-overlay p.sd-card-text {
186+
opacity: 90%;
187+
}
188+
189+
/* Example Gallery Body - Set syntax highlighting for code on hover */
190+
.example-img-plot-overlay .sd-card-text code.code {
191+
background-color: var(--pst-color-background);
192+
}
193+
.example-img-plot-overlay .sd-card-text .code span.pre {
194+
color: var(--pst-color-primary);
195+
font-weight: 700;
196+
}
197+
198+
/* Example Gallery Footer - Plot titles goes here */
199+
.example-gallery .sd-card-footer {
200+
height: 40px;
201+
padding: 5px;
202+
border-top: none !important;
203+
}
204+
.example-gallery .sd-card-footer p.sd-card-text {
205+
color: var(--pst-color-text-muted);
206+
font-size: 1rem; /* This is font size for plot titles (below the chart) */
207+
font-weight: 700;
208+
}
209+
.sd-card.example-gallery:hover .sd-card-footer p.sd-card-text {
210+
color: var(--pst-color-primary); /* Change text color on hover over card */
211+
}
212+
213+
/* Overlapping */
214+
.example-gallery a.sd-stretched-link.reference.external {
215+
z-index: 999; /* Countermeasure where z-index = 998 */
216+
}

‎doc/_static/theme_overrides.css‎

Lines changed: 7 additions & 0 deletions
Original file line numberDiff line numberDiff line change
@@ -16,3 +16,10 @@
1616
}
1717

1818
}
19+
20+
html[data-theme="dark"] {
21+
/* tobac primary colors: #A2C2E5, #4D80BE, F6D94F*/
22+
--pst-color-primary: #4D80BE;
23+
--pst-color-secondary: #F6D94F;
24+
}
25+

‎doc/conf.py‎

Lines changed: 28 additions & 2 deletions
Original file line numberDiff line numberDiff line change
@@ -3,7 +3,7 @@
33
"""
44

55
# This is the standard readthedocs theme.
6-
import sphinx_rtd_theme
6+
import pydata_sphinx_theme
77
import sys, os
88

99
sys.path.insert(0, os.path.abspath("extensions"))
@@ -20,13 +20,38 @@
2020
"sphinx.ext.napoleon",
2121
"nbsphinx",
2222
"sphinx_gallery.load_style",
23+
"myst_parser",
24+
"sphinx_design",
2325
]
2426

2527

26-
html_theme = "sphinx_rtd_theme"
28+
html_theme = "pydata_sphinx_theme"
2729

2830
html_static_path = ["_static"]
31+
html_css_files = ["custom.css", "theme_overrides.css"]
32+
2933
exclude_patterns = ["_build", "Thumbs.db", ".DS_Store"]
34+
source_suffix = {".rst": "restructuredtext", ".md": "restructuredtext"}
35+
myst_enable_extensions = ["colon_fence"]
36+
37+
38+
html_theme_options = {
39+
"logo": {
40+
"image_light": "images/tobac-logo-colors.png",
41+
"image_dark": "images/tobac-logo-colors.png",
42+
},
43+
# https://pydata-sphinx-theme.readthedocs.io/en/stable/user_guide/header-links.html#fontawesome-icons
44+
"icon_links": [
45+
{
46+
"name": "GitHub",
47+
"url": "https://github.com/tobac-project/tobac",
48+
"icon": "fa-brands fa-github",
49+
},
50+
],
51+
"navbar_start": ["navbar-logo"],
52+
"navbar_align": "content",
53+
"header_links_before_dropdown": 5,
54+
}
3055

3156

3257
project = "tobac"
@@ -40,6 +65,7 @@
4065
# Include our custom CSS (currently for special table config)
4166
def setup(app):
4267
app.add_css_file("theme_overrides.css")
68+
app.add_css_file("custom.css")
4369

4470

4571
# This should include all modules used in tobac. These are dummy imports,

‎doc/code_reviews.rst‎ renamed to ‎doc/developer_guide/code_reviews.rst‎

Lines changed: 2 additions & 0 deletions
Original file line numberDiff line numberDiff line change
@@ -1,3 +1,5 @@
1+
.. _code-reviews:
2+
13
Code reviews
24
------------------
35

‎doc/code_structure.rst‎ renamed to ‎doc/developer_guide/code_structure.rst‎

Lines changed: 3 additions & 1 deletion
Original file line numberDiff line numberDiff line change
@@ -1,4 +1,6 @@
1-
Code structure and key design concepts
1+
.. _code_structure:
2+
3+
Code structure and key design concepts
24
--------------------------------------
35

46
==================================

0 commit comments

Comments
 (0)