Skip to content

Commit ee0adf2

Browse files
VanuanVanuan
authored
[Bonsai docs] Add version switcher to sidebar and update custom styles (#6004)
* Create brand.html * Update custom.css for version switcher * Update brand.html
1 parent 2ce420e commit ee0adf2

2 files changed

Lines changed: 79 additions & 3 deletions

File tree

‎src/bonsai/docs/_static/custom.css‎

Lines changed: 32 additions & 3 deletions
Original file line numberDiff line numberDiff line change
@@ -1,5 +1,6 @@
11
@import url("https://fonts.googleapis.com/css2?family=Nunito:wght@200;300;400;500;600;700;800&display=swap");
22
@import url('https://fonts.googleapis.com/css2?family=Inconsolata:wght@200;300;400;500;600;700&display=swap');
3+
34
h1, h2, h3, h4 {
45
font-weight: normal;
56
color: #7cbf33;
@@ -8,22 +9,27 @@ h1, h2, h3, h4 {
89
-webkit-background-clip: text;
910
-webkit-text-fill-color: transparent;
1011
}
12+
1113
a {
1214
text-decoration: none;
1315
}
16+
1417
.toc-tree .reference:hover {
1518
color: #d98014;
1619
}
20+
1721
.sidebar-brand-text {
1822
font-size: 1rem;
1923
text-align: center;
2024
}
25+
2126
.blockbutton {
2227
max-width: 500px;
2328
margin-left: auto;
2429
margin-right: auto;
2530
text-align: center;
2631
}
32+
2733
.blockbutton a {
2834
display: block;
2935
padding-top: 15px;
@@ -35,54 +41,63 @@ a {
3541
color: #fff;
3642
text-decoration: none;
3743
}
44+
3845
.blockbutton a:hover {
3946
background: #70ba35;
4047
}
48+
4149
.highlight .hll {
4250
background-color: #ffc2;
4351
}
52+
4453
section img {
4554
display: block;
4655
margin-left: auto;
4756
margin-right: auto;
4857
box-shadow: rgba(0, 0, 0, 0.24) 0px 3px 8px;
4958
border-radius: 5px;
5059
}
60+
5161
.location-scene img {
5262
display: inline;
5363
border-radius: 0px;
5464
box-shadow: none;
5565
vertical-align: middle;
5666
margin-top: -3px;
5767
}
68+
5869
.location-scene p {
5970
margin: 0.75rem;
6071
}
72+
6173
.location-scene {
6274
border: 1px solid var(--color-admonition-title);
6375
background-color: var(--color-admonition-title-background);
6476
border-radius: 5px;
6577
font-style: italic;
6678
color: var(--color-admonition-text);
6779
}
80+
6881
img.transparent {
6982
width: auto;
7083
height: auto;
7184
box-shadow: none;
7285
}
86+
7387
img.icon {
7488
width: auto;
7589
height: auto;
7690
border-radius: 0px;
7791
box-shadow: none;
7892
vertical-align: middle;
79-
vertical-align: middle;
8093
}
94+
8195
.content figure figcaption>p {
8296
font-style: italic;
8397
font-size: small;
8498
color: #808080;
8599
}
100+
86101
span.menuselection {
87102
border: 1px solid var(--color-admonition-title);
88103
background-color: var(--color-admonition-title-background);
@@ -92,8 +107,6 @@ span.menuselection {
92107
padding-right: 3px;
93108
}
94109

95-
96-
97110
/* Start section cards. */
98111
.toc-cards {
99112
display: grid;
@@ -102,3 +115,19 @@ span.menuselection {
102115
list-style-type: none;
103116
margin-bottom: 24px;
104117
}
118+
119+
/* New styles for the version switcher */
120+
.doc-version-switcher {
121+
display: block;
122+
margin: 10px auto;
123+
padding: 5px;
124+
font-size: 1rem;
125+
border-radius: 5px;
126+
border: 1px solid #7cbf33;
127+
background-color: #f7f7f6;
128+
color: #2e3436;
129+
}
130+
131+
.doc-version-switcher:hover {
132+
border-color: #d98014;
133+
}

‎src/bonsai/docs/_templates/sidebar/brand.html‎

Lines changed: 47 additions & 0 deletions
Original file line numberDiff line numberDiff line change
@@ -0,0 +1,47 @@
1+
{#-
2+
3+
Hi there!
4+
5+
You might be interested in https://pradyunsg.me/furo/customisation/sidebar/
6+
7+
Although if you're reading this, chances are that you're either familiar
8+
enough with Sphinx that you know what you're doing, or landed here from that
9+
documentation page.
10+
11+
Hope your day's going well. :)
12+
13+
-#}
14+
<a class="sidebar-brand{% if logo %} centered{% endif %}" href="{{ pathto(master_doc) }}">
15+
{% block brand_content %}
16+
{%- if logo_url %}
17+
<div class="sidebar-logo-container">
18+
<img class="sidebar-logo" src="{{ logo_url }}" alt="Logo"/>
19+
</div>
20+
{%- endif %}
21+
{%- if theme_light_logo and theme_dark_logo %}
22+
<div class="sidebar-logo-container">
23+
<img class="sidebar-logo only-light" src="{{ pathto('_static/' + theme_light_logo, 1) }}" alt="Light Logo"/>
24+
<img class="sidebar-logo only-dark" src="{{ pathto('_static/' + theme_dark_logo, 1) }}" alt="Dark Logo"/>
25+
</div>
26+
{%- endif %}
27+
{% if not theme_sidebar_hide_name %}
28+
<span class="sidebar-brand-text">{{ docstitle if docstitle else project }}</span>
29+
{%- endif %}
30+
{% endblock brand_content %}
31+
<select class="doc-version-switcher" onchange="switchDocs()">
32+
<option value="stable">Stable</option>
33+
<option value="unstable">Unstable</option>
34+
</select>
35+
</a>
36+
37+
<script>
38+
function switchDocs() {
39+
var selectBox = document.querySelector('.doc-version-switcher');
40+
var selectedValue = selectBox.options[selectBox.selectedIndex].value;
41+
if (selectedValue === 'unstable') {
42+
window.location.href = 'http://docs-unstable.bonsaibim.org/';
43+
} else {
44+
window.location.href = 'http://docs.bonsaibim.org/';
45+
}
46+
}
47+
</script>

0 commit comments

Comments
 (0)