Skip to content

Commit e2b2ea9

Browse files
sarinacOriolAbril
sarinac
and
OriolAbril
authored
Update layout for example gallery (#2087)
* Move CSS to external file * Update CSS, resize images, remove thumbnails * Make PR fixes * Remove _thumb, _example_title, add more CSS on example plot pages * Update CSS colors/hover, homepage layout, README images * Update CSS to use contrasting colors * Test pydata-sphinx-theme dev version * update and fix some titles * set homepage and example gallery page to use extra space * css fixes? * Update CSS, Remove badges Co-authored-by: Oriol Abril-Pla <[email protected]>
1 parent 8a2bc39 commit e2b2ea9

File tree

103 files changed

+342
-627
lines changed

Some content is hidden

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

103 files changed

+342
-627
lines changed

‎README.md‎

Lines changed: 12 additions & 12 deletions
Original file line numberDiff line numberDiff line change
@@ -64,28 +64,28 @@ python setup.py install
6464
<td>
6565
<a href="https://python.arviz.org/en/latest/examples/plot_forest_ridge.html">
6666
<img alt="Ridge plot"
67-
src="https://raw.githubusercontent.com/arviz-devs/arviz/gh-pages/_static/plot_forest_ridge_thumb.png" />
67+
src="https://raw.githubusercontent.com/arviz-devs/arviz/gh-pages/_images/mpl_plot_forest_ridge.png" />
6868
</a>
6969
</td>
7070

7171
<td>
7272
<a href="https://python.arviz.org/en/latest/examples/plot_parallel.html">
7373
<img alt="Parallel plot"
74-
src="https://raw.githubusercontent.com/arviz-devs/arviz/gh-pages/_static/plot_parallel_minmax_thumb.png" />
74+
src="https://raw.githubusercontent.com/arviz-devs/arviz/gh-pages/_images/mpl_plot_parallel.png" />
7575
</a>
7676
</td>
7777

7878
<td>
7979
<a href="https://python.arviz.org/en/latest/examples/plot_trace.html">
8080
<img alt="Trace plot"
81-
src="https://raw.githubusercontent.com/arviz-devs/arviz/gh-pages/_static/plot_trace_bars_thumb.png" />
81+
src="https://raw.githubusercontent.com/arviz-devs/arviz/gh-pages/_images/mpl_plot_trace.png" />
8282
</a>
8383
</td>
8484

8585
<td>
8686
<a href="https://python.arviz.org/en/latest/examples/plot_density.html">
8787
<img alt="Density plot"
88-
src="https://raw.githubusercontent.com/arviz-devs/arviz/gh-pages/_static/plot_density_thumb.png" />
88+
src="https://raw.githubusercontent.com/arviz-devs/arviz/gh-pages/_images/mpl_plot_density.png" />
8989
</a>
9090
</td>
9191

@@ -95,28 +95,28 @@ python setup.py install
9595
<td>
9696
<a href="https://python.arviz.org/en/latest/examples/plot_posterior.html">
9797
<img alt="Posterior plot"
98-
src="https://raw.githubusercontent.com/arviz-devs/arviz/gh-pages/_static/plot_posterior_thumb.png" />
98+
src="https://raw.githubusercontent.com/arviz-devs/arviz/gh-pages/_images/mpl_plot_posterior.png" />
9999
</a>
100100
</td>
101101

102102
<td>
103103
<a href="https://python.arviz.org/en/latest/examples/plot_dot.html">
104104
<img alt="Joint plot"
105-
src="https://raw.githubusercontent.com/arviz-devs/arviz/gh-pages/_static/plot_dot_thumb.png" />
105+
src="https://raw.githubusercontent.com/arviz-devs/arviz/gh-pages/_images/mpl_plot_dot.png" />
106106
</a>
107107
</td>
108108

109109
<td>
110110
<a href="https://python.arviz.org/en/latest/examples/plot_ppc.html">
111111
<img alt="Posterior predictive plot"
112-
src="https://raw.githubusercontent.com/arviz-devs/arviz/gh-pages/_static/plot_ppc_thumb.png" />
112+
src="https://raw.githubusercontent.com/arviz-devs/arviz/gh-pages/_images/mpl_plot_ppc.png" />
113113
</a>
114114
</td>
115115

116116
<td>
117117
<a href="https://python.arviz.org/en/latest/examples/plot_pair.html">
118118
<img alt="Pair plot"
119-
src="https://raw.githubusercontent.com/arviz-devs/arviz/gh-pages/_static/plot_pair_thumb.png" />
119+
src="https://raw.githubusercontent.com/arviz-devs/arviz/gh-pages/_images/mpl_plot_pair.png" />
120120
</a>
121121
</td>
122122

@@ -126,28 +126,28 @@ python setup.py install
126126
<td>
127127
<a href="https://python.arviz.org/en/latest/examples/plot_energy.html">
128128
<img alt="Energy Plot"
129-
src="https://raw.githubusercontent.com/arviz-devs/arviz/gh-pages/_static/plot_pair_hex_thumb.png" />
129+
src="https://raw.githubusercontent.com/arviz-devs/arviz/gh-pages/_images/mpl_plot_pair_hex.png" />
130130
</a>
131131
</td>
132132

133133
<td>
134134
<a href="https://python.arviz.org/en/latest/examples/plot_violin.html">
135135
<img alt="Violin Plot"
136-
src="https://raw.githubusercontent.com/arviz-devs/arviz/gh-pages/_static/plot_violin_thumb.png" />
136+
src="https://raw.githubusercontent.com/arviz-devs/arviz/gh-pages/_images/mpl_plot_violin.png" />
137137
</a>
138138
</td>
139139

140140
<td>
141141
<a href="https://python.arviz.org/en/latest/examples/plot_forest.html">
142142
<img alt="Forest Plot"
143-
src="https://raw.githubusercontent.com/arviz-devs/arviz/gh-pages/_static/plot_forest_thumb.png" />
143+
src="https://raw.githubusercontent.com/arviz-devs/arviz/gh-pages/_images/mpl_plot_forest.png" />
144144
</a>
145145
</td>
146146

147147
<td>
148148
<a href="https://python.arviz.org/en/latest/examples/plot_autocorr.html">
149149
<img alt="Autocorrelation Plot"
150-
src="https://raw.githubusercontent.com/arviz-devs/arviz/gh-pages/_static/plot_autocorr_thumb.png" />
150+
src="https://raw.githubusercontent.com/arviz-devs/arviz/gh-pages/_images/mpl_plot_autocorr.png" />
151151
</a>
152152
</td>
153153

‎doc/_templates/layout.html‎

Lines changed: 0 additions & 11 deletions
Original file line numberDiff line numberDiff line change
@@ -1,16 +1,5 @@
11
{% extends "!layout.html" %}
22

3-
<!-- Make body have full width in home page -->
4-
{% block docs_main %}
5-
{% if pagename == 'index' %}
6-
<main class="col-12 py-md-5 pl-md-5 pr-md-4 bd-content" role="main">
7-
{% block body %} {% endblock %}
8-
</main>
9-
{% else %}
10-
{{ super() }}
11-
{% endif %}
12-
{% endblock %}
13-
143
<!-- Add banner to all pages! -->
154
{%- block scripts_end %}
165
{{ super() }}

‎doc/_templates/sections/sidebar-primary.html‎

Lines changed: 0 additions & 8 deletions
This file was deleted.

‎doc/_templates/sections/sidebar-secondary.html‎

Lines changed: 0 additions & 8 deletions
This file was deleted.

‎doc/source/_static/custom.css‎

Lines changed: 141 additions & 6 deletions
Original file line numberDiff line numberDiff line change
@@ -1,16 +1,151 @@
11
.sphinx-codeautolink-a{
2-
border-bottom-color: rgb(0, 0, 0);
3-
border-bottom-style: dotted;
4-
border-bottom-width: 1px;
2+
border-bottom-color: rgb(0, 0, 0);
3+
border-bottom-style: dotted;
4+
border-bottom-width: 1px;
55
}
66
.sphinx-codeautolink-a:hover{
7-
color: rgb(255, 139, 139);
7+
color: rgb(255, 139, 139);
88
}
99

1010
.supportbutton a {
11-
color: var(--pst-color-sidebar-link-active);
11+
color: var(--pst-color-sidebar-link-active);
1212
}
1313

1414
.navbar-brand {
15-
display: inline-block !important;
15+
display: inline-block !important;
16+
}
17+
18+
/* -------------------- THEME OVERRIDES -------------------- */
19+
20+
html[data-theme="light"] {
21+
--pst-color-primary: rgb(11 117 145);
22+
--pst-color-secondary: rgb(238 144 64);
23+
}
24+
25+
html[data-theme="dark"] {
26+
--pst-color-primary: rgb(0 192 191);
27+
--pst-color-secondary: rgb(238 144 64);
28+
}
29+
30+
.bd-content {
31+
flex-grow: 1;
32+
max-width: 70em; /* Override 60em default, can use 100% */
33+
}
34+
35+
/* -------------------- HOMEPAGE -------------------- */
36+
37+
.home-flex-grid {
38+
display: flex;
39+
flex-flow: row wrap;
40+
justify-content: center;
41+
gap: 10px;
42+
padding: 20px 0px 40px;
43+
}
44+
45+
.home-img-plot,
46+
.home-img-plot-overlay {
47+
width: 235px;
48+
height: 130px;
49+
display: flex;
50+
justify-content: center;
51+
align-items: center;
52+
overflow: hidden
53+
}
54+
55+
.home-img-plot img {
56+
flex-shrink: 0;
57+
min-width: 100%;
58+
min-height: 100%;
59+
}
60+
61+
.home-img-plot-overlay {
62+
background: var(--pst-color-primary);
63+
position: absolute;
64+
border: 1px solid #dee2e6; /* Same dimensions as img-thumbnail from pydata css */
65+
border-radius: 0.25rem; /* Same dimensions as img-thumbnail from pydata css */
66+
color: var(--pst-color-background);
67+
opacity: 0;
68+
transition: .2s ease;
69+
text-align: center;
70+
}
71+
72+
.home-img-plot-overlay:hover {
73+
opacity: 90%;
74+
}
75+
76+
/* -------------------- EXAMPLE GALLERY OVERRIDES -------------------- */
77+
78+
/* Each card has same height (across all rows in the grid) */
79+
.sd-card.example-gallery {
80+
height: 200px;
81+
padding: 0.2rem;
82+
border-radius: 0.2rem;
83+
border: 0.6px solid var(--pst-color-background); /* Same width as hover effect */
84+
}
85+
86+
/* Hover effects for each card */
87+
.example-gallery:hover {
88+
border: 0.6px solid var(--pst-color-primary);
89+
}
90+
.example-gallery:hover p {
91+
color: var(--pst-color-primary);
92+
}
93+
94+
/* Images in each card are scaled to fit 60% of the card */
95+
.example-gallery .sd-card-body {
96+
height: 70%;
97+
display: flex; /* This vertically centers the img */
98+
padding: 10px 10px 5px;
99+
}
100+
.example-gallery .sd-card-body img {
101+
max-height: 100%;
102+
max-width: 100%;
103+
margin: auto; /* This keeps img ratio and horizontally centers the img */
104+
}
105+
106+
/* Plot titles go in the footer and are aligned to fit 40% of the card */
107+
.example-gallery .sd-card-footer {
108+
height: 30%;
109+
width: 100%;
110+
padding: 0px 10px 10px;
111+
border-top: none !important;
112+
}
113+
.example-gallery .sd-card-text {
114+
color: var(--pst-color-text-muted);
115+
font-size: 0.8rem;
116+
}
117+
118+
/* -------------------- EXAMPLE PLOTS - DOWNLOAD PYTHON SOURCE CODE -------------------- */
119+
120+
.example-plot-download {
121+
border: 0.05rem solid rgb(222, 222, 222);
122+
border-radius: 0.2rem;
123+
/* Center button */
124+
width: fit-content;
125+
margin: 0 auto;
126+
box-shadow: 0 0.2rem 0.5rem rgb(0 0 0 / 5%), 0 0 0.0625rem rgb(0 0 0 / 10%);
127+
}
128+
.example-plot-download p a {
129+
padding: 0.4rem 2rem;
130+
}
131+
.example-plot-download p { /* Override margin defaults for p */
132+
margin: 0;
133+
}
134+
.example-plot-download code.literal { /* Override defaults for code.literal */
135+
border: 0px;
136+
background-color: transparent;
137+
}
138+
.example-plot-download a.download:hover { /* Override defaults for hover */
139+
color: var(--pst-color-primary);
140+
}
141+
142+
/* -------------------- TOCTREE OVERRIDES -------------------- */
143+
144+
.toctree-wrapper a {
145+
color: var(--pst-color-text-muted);
146+
}
147+
148+
.toctree-wrapper a:hover {
149+
text-decoration: none; /* No underline */
150+
color: var(--pst-color-primary);
16151
}

‎doc/source/conf.py‎

Lines changed: 2 additions & 5 deletions
Original file line numberDiff line numberDiff line change
@@ -38,10 +38,6 @@
3838
# ones.
3939
sys.path.insert(0, os.path.abspath("../sphinxext"))
4040

41-
thumb_directory = "example_thumbs"
42-
if not os.path.isdir(thumb_directory):
43-
os.mkdir(thumb_directory)
44-
4541
extensions = [
4642
"sphinx.ext.autodoc",
4743
"sphinx.ext.doctest",
@@ -185,14 +181,15 @@
185181
"default_mode": "light",
186182
}
187183
html_sidebars: Dict[str, Any] = {
184+
"index": [],
188185
"community": ["search-field.html", "sidebar-nav-bs.html", "twitter.html"],
189186
}
190187

191188
# Add any paths that contain custom static files (such as style sheets) here,
192189
# relative to this directory. They are copied after the builtin static files,
193190
# so a file named "default.css" will overwrite the builtin "default.css".
194191
# html_theme_path = sphinx_bootstrap_theme.get_html_theme_path()
195-
html_static_path = ["_static", thumb_directory]
192+
html_static_path = ["_static"]
196193
html_css_files = ["custom.css"]
197194

198195
# use additional pages to add a 404 page

0 commit comments

Comments
 (0)