Skip to content

Commit 42366a8

Browse files
alexchormanalexchorman
committed
Change sidebar styles
1 parent d067888 commit 42366a8

File tree

5 files changed

+122
-66
lines changed

5 files changed

+122
-66
lines changed

‎_theme/layout.html‎

Lines changed: 20 additions & 18 deletions
Original file line numberDiff line numberDiff line change
@@ -102,26 +102,28 @@
102102
{%- block content %}
103103
{%- block breadcrumb1 %}{{breadcrumb()}}{% endblock %}
104104
<div class="main container-fluid">
105-
<div class="row">
106-
{%- block sidebar1 %} {% if theme_show_sidebar|tobool and not theme_sidebar_right|tobool %}{{ sphinxsidebar() }}{% endif %} {% endblock %}
107-
108-
<div class="document">
109-
{%- block document %}
110-
<div class="documentwrapper">
111-
{%- if render_sidebar %}
112-
<div class="bodywrapper">
113-
{%- endif %}
114-
<div class="body">
115-
{% block body %} {% endblock %}
105+
<div class="content-container">
106+
<div class="row">
107+
{%- block sidebar1 %} {% if theme_show_sidebar|tobool and not theme_sidebar_right|tobool %}{{ sphinxsidebar() }}{% endif %} {% endblock %}
108+
109+
<div class="document">
110+
{%- block document %}
111+
<div class="documentwrapper">
112+
{%- if render_sidebar %}
113+
<div class="bodywrapper">
114+
{%- endif %}
115+
<div class="body">
116+
{% block body %} {% endblock %}
117+
</div>
118+
{%- if render_sidebar %}
116119
</div>
117-
{%- if render_sidebar %}
120+
{%- endif %}
118121
</div>
119-
{%- endif %}
122+
{%- endblock %}
120123
</div>
121-
{%- endblock %}
122-
</div>
123-
{%- block sidebar2 %}{% if theme_show_sidebar|tobool and theme_sidebar_right|tobool %}{{ sphinxsidebar() }}{% endif %}{% endblock %}
124-
<div class="clearer"></div>
124+
{%- block sidebar2 %}{% if theme_show_sidebar|tobool and theme_sidebar_right|tobool %}{{ sphinxsidebar() }}{% endif %}{% endblock %}
125+
<div class="clearer"></div>
126+
</div>
125127
</div>
126128
</div>
127-
{%- endblock %}
129+
{%- endblock %}

‎_theme/navbar.html‎

Lines changed: 41 additions & 39 deletions
Original file line numberDiff line numberDiff line change
@@ -1,43 +1,45 @@
1-
<nav class="navbar navbar-expand-{{ theme_navbar_collapse }} {{ theme_navbar_style }} navbar-{{ theme_navbar_color_class }} flex-wrap">
2-
<a class="navbar-brand py-1" href="{{ pathto(master_doc) }}">
3-
{%- if logo %}
4-
<img class="logo" src="{{ pathto('_static/' + logo, 1) }}" alt="{{ project }}" />
5-
{%- else %}
6-
<div class="header-logo">
7-
<div class="logo-light"></div>
8-
<p class="logo-text">for Developers</p>
9-
</div>
10-
{%- endif %}
11-
</a>
12-
<button class="navbar-toggler navbar-dark ml-auto py-2 black" type="button" data-toggle="collapse"
13-
data-target="#exCollapsingNavbar2">
14-
&#9776;
15-
</button>
16-
<div class="navbar-collapse collapse" id="exCollapsingNavbar2">
17-
{%- if version %}
18-
<span class="navbar-text navbar-version pb-0 pt-1"><b>{{version}}</b></span>
19-
{%- endif %}
20-
<ul class="navbar-nav mr-auto">
21-
{% if theme_navbar_show_pages %}
22-
<li class="nav-item dropdown d-none d-sm-block" id="navbar-pages">
23-
<a class="nav-link dropdown-toggle" data-toggle="dropdown">{{theme_navbar_pages_title}}</a>
24-
<ul class="dropdown-menu">
25-
{{ toctree(maxdepth=4, collapse=False, includehidden=False) }}
26-
</ul>
27-
</li>
28-
{%- endif -%}
29-
{%- for title, href, isExternal in theme_navbar_links %}
30-
<li class="nav-item">
31-
{% if isExternal %}
32-
<a class="nav-link" href="{{ href }}">{{ title }}</a>
33-
{%- else -%}
34-
<a class="nav-link" href="{{ pathto(href) }}">{{ title }}</a>
1+
<nav class="navbar navbar-expand-{{ theme_navbar_collapse }} {{ theme_navbar_style }} navbar-{{ theme_navbar_color_class }}">
2+
<div class="content-container d-flex flex-wrap">
3+
<a class="navbar-brand py-1" href="{{ pathto(master_doc) }}">
4+
{%- if logo %}
5+
<img class="logo" src="{{ pathto('_static/' + logo, 1) }}" alt="{{ project }}" />
6+
{%- else %}
7+
<div class="header-logo">
8+
<div class="logo-light"></div>
9+
<p class="logo-text">for Developers</p>
10+
</div>
11+
{%- endif %}
12+
</a>
13+
<button class="navbar-toggler navbar-dark ml-auto py-2 black" type="button" data-toggle="collapse"
14+
data-target="#exCollapsingNavbar2">
15+
&#9776;
16+
</button>
17+
<div class="navbar-collapse collapse" id="exCollapsingNavbar2">
18+
{%- if version %}
19+
<span class="navbar-text navbar-version pb-0 pt-1"><b>{{version}}</b></span>
20+
{%- endif %}
21+
<ul class="navbar-nav mr-auto">
22+
{% if theme_navbar_show_pages %}
23+
<li class="nav-item dropdown d-none d-sm-block" id="navbar-pages">
24+
<a class="nav-link dropdown-toggle" data-toggle="dropdown">{{theme_navbar_pages_title}}</a>
25+
<ul class="dropdown-menu">
26+
{{ toctree(maxdepth=4, collapse=False, includehidden=False) }}
27+
</ul>
28+
</li>
3529
{%- endif -%}
36-
</li>
37-
{%- endfor %}
38-
</ul>
39-
<div class="dropdown-divider d-block d-md-none my-3"></div>
40-
{% include "navbarsearch.html" %}
30+
{%- for title, href, isExternal in theme_navbar_links %}
31+
<li class="nav-item">
32+
{% if isExternal %}
33+
<a class="nav-link" href="{{ href }}">{{ title }}</a>
34+
{%- else -%}
35+
<a class="nav-link" href="{{ pathto(href) }}">{{ title }}</a>
36+
{%- endif -%}
37+
</li>
38+
{%- endfor %}
39+
</ul>
40+
<div class="dropdown-divider d-block d-md-none my-3"></div>
41+
{% include "navbarsearch.html" %}
42+
</div>
4143
</div>
4244

4345
<!--<div class="row hidden-sm-up">

‎_theme/static/css/main.css‎

Lines changed: 4 additions & 0 deletions
Original file line numberDiff line numberDiff line change
@@ -1,5 +1,6 @@
11
.content-container {
22
max-width: 1170px;
3+
width: 100%;
34
margin: 0 auto;
45
padding: 0 30px;
56
}
@@ -143,6 +144,9 @@
143144
}
144145
}
145146
@media handheld, only screen and ( max-width: 500px ), only screen and ( max-device-width: 500px ) {
147+
.content-container {
148+
padding: 0 15px;
149+
}
146150
.hero-nav .toctree-l1 {
147151
width: 100%;
148152
}

‎_theme/static/img/angle.svg‎

Lines changed: 3 additions & 0 deletions
Loading

‎_theme/static/sphinxbootstrap4.css_t‎

Lines changed: 54 additions & 9 deletions
Original file line numberDiff line numberDiff line change
@@ -39,6 +39,7 @@ a {
3939
width: {{ theme_main_width }};
4040
margin-left: auto;
4141
margin-right: auto;
42+
padding: 64px 0 76px;
4243
}
4344

4445
#acknowledgments .toctree-wrapper {
@@ -102,8 +103,10 @@ Navbar Class styles
102103
background: #fff;
103104
border-bottom: 1px solid #ced4da;
104105
}
105-
.navbar.fixed-top {
106+
nav.navbar.fixed-top {
106107
z-index: 100;
108+
padding-left: 0;
109+
padding-right: 0;
107110
}
108111
.navbar-row {
109112
display: flex;
@@ -218,6 +221,11 @@ Sidebar styles
218221
#searchbox {
219222
margin: 20px 20px 10px 20px;
220223
}
224+
.main a {
225+
text-decoration: underline;
226+
color: #3490E6;
227+
opacity: 0.8;
228+
}
221229

222230
div.sphinxsidebar {
223231
margin-left: 0px;
@@ -243,13 +251,35 @@ div.sphinxsidebar > div.sphinxsidebarwrapper h4 {
243251
padding: 12px 0px 3px 10px;
244252
border-bottom: 1px solid rgb(236, 238, 239);
245253
}
254+
div.sphinxsidebar > div.sphinxsidebarwrapper h4 {
255+
margin: 0 0 11px;
256+
padding: 0 0 8px;
257+
font-weight: 600;
258+
font-size: 22px;
259+
line-height: 36px;
260+
color: #13161F;
261+
}
246262

247263
div.sphinxsidebar > div.sphinxsidebarwrapper p.topless {
248-
padding: 1em 0px .5em 1.5em;
264+
padding: 0 0px .5em 1.5em;
249265
}
250-
251-
div.sphinxsidebarwrapper > div.sidebartoctree ul {
252-
padding: .1em 0 0 1em;
266+
.sidebartoctree .toctree-l1 > .reference {
267+
font-size: 18px;
268+
line-height: 24px;
269+
color: #13161F;
270+
opacity: 0.8;
271+
text-decoration: none;
272+
}
273+
div.sphinxsidebarwrapper > div.sidebartoctree > ul li.toctree-l1 a.arrow {
274+
width: 10px;
275+
height: 6px;
276+
border: none;
277+
margin: 11px 0 0;
278+
background: url('./img/angle.svg') center no-repeat;
279+
background-size: contain;
280+
}
281+
div.sphinxsidebarwrapper > div.sidebartoctree > ul li.toctree-l1 a.arrow.collapsed {
282+
transform: rotate(180deg);
253283
}
254284

255285
div.sphinxsidebar > div.sphinxsidebarwrapper a.reference {
@@ -260,9 +290,18 @@ div.sphinxsidebar > div.sphinxsidebarwrapper a.reference {
260290
}
261291

262292
div.sphinxsidebar > div.sphinxsidebarwrapper a.reference.current {
263-
color: #fff;
293+
font-weight: 600;
294+
font-size: 18px;
295+
color: #FF7E00;
296+
text-decoration: none;
264297
cursor: default;
265-
background-color: #0275d8;
298+
}
299+
sphinxsidebar > div.sphinxsidebarwrapper .toctree-l2 a.reference {
300+
font-size: 18px;
301+
line-height: 24px;
302+
text-decoration: underline;
303+
color: #3490E6;
304+
opacity: 0.8;
266305
}
267306

268307
/* sidebar tree minus icon */
@@ -287,13 +326,19 @@ div.sphinxsidebarwrapper > div.sidebartoctree > ul a.arrow.collapsed {
287326
z-index: 10;
288327
right: .3em;
289328
}
329+
.sphinxsidebarwrapper .toctree-l1 > ul {
330+
padding: 18px 0 17px 20px;
331+
margin: 0;
332+
}
290333

291334
ul.nav ul{ /* sidebaartreeview no list styles */
292335
list-style: none!important;
293336
}
294-
337+
.sidebartoctree > nav {
338+
padding-bottom: 18px;
339+
}
295340
.nav-pills .nav-item+.nav-item {
296-
margin-top: .2rem;
341+
margin-top: 6px;
297342
}
298343

299344
/* sidebar search form styles */

0 commit comments

Comments
 (0)