Thanks to visit codestin.com
Credit goes to github.com

Skip to content

Commit 7aba474

Browse files
obulatobulat
committed
Make theme responsive
1 parent 628a664 commit 7aba474

File tree

4 files changed

+321
-5
lines changed

4 files changed

+321
-5
lines changed

‎python_docs_theme/layout.html

Lines changed: 62 additions & 2 deletions
Original file line numberDiff line numberDiff line change
@@ -20,7 +20,7 @@
2020
<input type="hidden" name="area" value="default" />
2121
</form>
2222
</div>
23-
<script type="text/javascript">$('.inline-search').show(0);</script>
23+
<script type="text/javascript">document.querySelector('.inline-search').style.display = 'block';</script>
2424
{%- endif %}
2525
{%- endmacro %}
2626

@@ -38,11 +38,71 @@
3838
{% block extrahead %}
3939
<link rel="shortcut icon" type="image/png" href="{{ pathto('_static/' + theme_root_icon, 1) }}" />
4040
{% if builder != "htmlhelp" %}
41-
{% if not embedded %}<script type="text/javascript" src="{{ pathto('_static/copybutton.js', 1) }}"></script>{% endif %}
41+
{% if not embedded %}
42+
<script type="text/javascript" src="{{ pathto('_static/copybutton.js', 1) }}"></script>
43+
<script type="text/javascript" src="{{ pathto('_static/menu.js', 1) }}"></script>
44+
{% endif %}
4245
{% endif %}
4346
{{ super() }}
4447
{% endblock %}
4548

49+
{%- block css %}
50+
<meta name="viewport" content="width=device-width, initial-scale=1.0">
51+
{{ super() }}
52+
{%- endblock %}
53+
54+
{%- block body_tag %}
55+
<body>
56+
<nav class="mobile-nav">
57+
<input type="checkbox" class="toggler">
58+
<div class="hamburger">
59+
<div></div>
60+
</div>
61+
<div class="nav-content">
62+
<img src="{{ pathto('_static/' + theme_root_icon, 1) }}" alt="Logo"/>
63+
{%- if switchers is defined %}
64+
<div class="version_switcher_placeholder">{{ release }}</div>
65+
{% endif -%}
66+
{%- if pagename != "search" and builder != "singlehtml" %}
67+
<div id="searchbox" style="display: none" role="search">
68+
<form class="search" action="{{ pathto('search') }}" method="get">
69+
<svg xmlns="http://www.w3.org/2000/svg" viewBox="0 0 24 24" aria-hidden="true"
70+
class="search-icon">
71+
<path fill-rule="nonzero"
72+
d="M15.5 14h-.79l-.28-.27a6.5 6.5 0 001.48-5.34c-.47-2.78-2.79-5-5.59-5.34a6.505 6.505 0 00-7.27 7.27c.34 2.8 2.56 5.12 5.34 5.59a6.5 6.5 0 005.34-1.48l.27.28v.79l4.25 4.25c.41.41 1.08.41 1.49 0 .41-.41.41-1.08 0-1.49L15.5 14zm-6 0C7.01 14 5 11.99 5 9.5S7.01 5 9.5 5 14 7.01 14 9.5 11.99 14 9.5 14z"></path>
73+
</svg>
74+
<label id="mobilesearchlabel" for="searchbox">{{ _('Quick search') }}</label>
75+
<input type="text" name="q" aria-labelledby="searchlabel"/>
76+
<input type="submit" value="{{ _('Go') }}"/>
77+
</form>
78+
</div>
79+
<script>document.getElementById('searchbox').style.display='block';</script>
80+
{%- endif %}
81+
</div>
82+
</nav>
83+
{% endblock %}
84+
85+
{% block sidebar1 %}
86+
<div class="menu-wrapper">
87+
<nav class="menu" role="navigation" aria-label="main navigation">
88+
{%- if switchers is defined %}
89+
<div class="language_switcher_placeholder">{{ language or 'en' }}</div>
90+
{% endif -%}
91+
{%- block sidebarlogo %}
92+
{%- if logo %}
93+
<p class="logo"><a href="{{ pathto(master_doc)|e }}">
94+
<img class="logo" src="{{ pathto('_static/' + logo, 1)|e }}" alt="Logo"/>
95+
</a></p>
96+
{%- endif %}
97+
{%- endblock %}
98+
{#- new style sidebar: explicitly include/exclude templates #}
99+
{%- for sidebartemplate in sidebars %}
100+
{%- include sidebartemplate %}
101+
{%- endfor %}
102+
</nav>
103+
</div>
104+
{% endblock %}
105+
46106
{% block footer %}
47107
<div class="footer">
48108
&copy; <a href="{{ pathto('copyright') }}">{% trans %}Copyright{% endtrans %}</a> {{ copyright|e }}.

‎python_docs_theme/static/menu.js

Lines changed: 22 additions & 0 deletions
Original file line numberDiff line numberDiff line change
@@ -0,0 +1,22 @@
1+
2+
document.addEventListener('DOMContentLoaded', function () {
3+
const toggler = document.querySelector('.toggler');
4+
const sideMenu = document.querySelector('.menu-wrapper');
5+
const doc = document.querySelector('.document');
6+
function closeMenu() {
7+
sideMenu.classList.remove('open');
8+
toggler.checked = false;
9+
}
10+
toggler.addEventListener('change', function (e) {
11+
if (toggler.checked) {
12+
sideMenu.classList.add('open');
13+
} else {
14+
closeMenu();
15+
}
16+
});
17+
doc.addEventListener('click', function () {
18+
if (toggler.checked) {
19+
closeMenu();
20+
}
21+
})
22+
})

‎python_docs_theme/static/pydoctheme.css

Lines changed: 235 additions & 1 deletion
Original file line numberDiff line numberDiff line change
@@ -1,11 +1,20 @@
11
@import url("default.css");
22

3+
* {
4+
box-sizing: border-box;
5+
}
6+
37
body {
48
background-color: white;
59
margin-left: 1em;
610
margin-right: 1em;
711
}
812

13+
.mobile-nav,
14+
.menu-wrapper {
15+
display: none;
16+
}
17+
918
div.related {
1019
margin-bottom: 1.2em;
1120
padding: 0.5em 0;
@@ -17,7 +26,7 @@ div.related a:hover {
1726
color: #0095C4;
1827
}
1928

20-
div.related:first-child {
29+
div.related:first-of-type {
2130
border-top: 0;
2231
border-bottom: 1px solid #ccc;
2332
}
@@ -191,3 +200,228 @@ div.footer a:hover {
191200
dl > dt span ~ em {
192201
font-family: monospace, sans-serif;
193202
}
203+
204+
@media (max-width: 900px) {
205+
/* Body layout */
206+
div.body {
207+
min-width: 100%;
208+
padding: 0;
209+
font-size: 0.875rem;
210+
}
211+
div.bodywrapper {
212+
margin: 0;
213+
}
214+
/* Typography */
215+
div.body h1, div.body h2, div.body h3, div.body h4, div.body h5, div.body p {
216+
font-family: SourceSansProRegular, Arial, sans-serif;
217+
}
218+
div.body h1 {
219+
font-size: 1.625rem;
220+
}
221+
div.body h2 {
222+
font-size: 1.25rem;
223+
}
224+
div.body h3, div.body h4, div.body h5 {
225+
font-size: 1rem;
226+
}
227+
/* Remove sidebar and top related bar */
228+
div.related, .sphinxsidebar {
229+
display: none;
230+
}
231+
/* Top navigation bar */
232+
.mobile-nav {
233+
display: block;
234+
padding: 0 1rem;
235+
height: 40px;
236+
width: 100%;
237+
position: fixed;
238+
top: 0;
239+
left: 0;
240+
background-color: white;
241+
box-shadow: rgba(0, 0, 0, 0.25) 0 0 2px 0;
242+
z-index: 5;
243+
}
244+
.nav-content {
245+
padding-left: 40px;
246+
height: 40px;
247+
display: flex;
248+
align-items: center;
249+
}
250+
.nav-content img {
251+
flex: 0 0 auto;
252+
margin-right: 0.7rem;
253+
}
254+
.version_switcher_placeholder {
255+
margin-right: 1rem;
256+
}
257+
.version_switcher_placeholder select {
258+
height: 24px;
259+
}
260+
.nav-content #searchbox {
261+
flex: 5 1 auto;
262+
}
263+
.nav-content .search {
264+
display: flex;
265+
flex-direction: row;
266+
align-items: center;
267+
box-sizing: border-box;
268+
padding: 0 0 0 2px;
269+
border: 1px solid #a9a9a9;
270+
height: 24px;
271+
}
272+
.nav-content .search:hover {
273+
box-shadow: 0 1px 6px 0 rgba(32,33,36,0.28);
274+
border-color: rgba(223,225,229,0);
275+
}
276+
.nav-content .search input[type=text] {
277+
border: 0;
278+
outline: 0;
279+
box-shadow: none;
280+
width: 40px;
281+
height: 100%;
282+
flex: 1 1 auto;
283+
}
284+
.nav-content .search input[type=submit] {
285+
height: 100%;
286+
border: 0;
287+
box-shadow: none;
288+
outline: 1px solid #999;
289+
}
290+
.nav-content .search label {
291+
border: 0;
292+
clip: rect(0 0 0 0);
293+
height: 1px;
294+
margin: -1px;
295+
overflow: hidden;
296+
padding: 0;
297+
position: absolute !important;
298+
width: 1px;
299+
}
300+
.nav-content .search svg {
301+
flex: 0 0 20px;
302+
fill: #333;
303+
}
304+
.toggler {
305+
width: 40px;
306+
height: 40px;
307+
margin: 0;
308+
position: absolute;
309+
cursor: pointer;
310+
top: 0;
311+
left: 0;
312+
opacity: 0;
313+
z-index: 5;
314+
}
315+
.hamburger {
316+
position: absolute;
317+
top: 0;
318+
left: 0;
319+
width: 56px;
320+
height: 40px;
321+
padding: 0.5rem 1rem;
322+
display: flex;
323+
align-items: center;
324+
justify-content: center;
325+
}
326+
.hamburger > div {
327+
position: relative;
328+
flex: none;
329+
height: 2px;
330+
width: 100%;
331+
background: black;
332+
transition: all 400ms ease;
333+
}
334+
.hamburger > div::before,
335+
.hamburger > div::after {
336+
content: '';
337+
height: 2px;
338+
width: 100%;
339+
background: inherit;
340+
position: absolute;
341+
top: -7px;
342+
}
343+
.hamburger > div::after {
344+
top: 7px;
345+
}
346+
.toggler:checked ~ .hamburger div {
347+
transform: rotate(135deg);
348+
}
349+
.toggler:checked ~ .hamburger div::before {
350+
transform: rotate(90deg);
351+
}
352+
.toggler:checked ~ .hamburger div::before,
353+
.toggler:checked ~ .hamburger div::after {
354+
top: 0;
355+
}
356+
.toggler:checked:hover ~ .hamburger div {
357+
transform: rotate(315deg);
358+
}
359+
360+
/* Sliding side menu */
361+
.menu-wrapper {
362+
display: block;
363+
position: fixed;
364+
top: 0;
365+
z-index: 1;
366+
left: -310px;
367+
width: 300px;
368+
height: 100%;
369+
transition: all 400ms ease;
370+
background-color: #eee;
371+
box-shadow: 0 0 10px rgba(0, 0, 0, 0.2);
372+
overflow-y: auto;
373+
}
374+
.menu-wrapper.open {
375+
visibility: visible;
376+
left: 0;
377+
}
378+
.menu {
379+
padding: 40px 10px 30px 20px;
380+
}
381+
.menu-wrapper h3,
382+
.menu-wrapper h4 {
383+
margin-bottom: 0;
384+
font-weight: normal;
385+
}
386+
.menu-wrapper h4 {
387+
font-size: 1.3em;
388+
}
389+
.menu-wrapper h3 {
390+
color: #444444;
391+
font-size: 1.4em;
392+
}
393+
.menu-wrapper h3 + p,
394+
.menu-wrapper h4 + p {
395+
margin-top: 0.5rem;
396+
}
397+
.menu a {
398+
font-size: smaller;
399+
color: #444444;
400+
text-decoration: none;
401+
}
402+
.menu ul {
403+
list-style: none;
404+
line-height: 1.4;
405+
overflow-wrap: break-word;
406+
padding-left: 0;
407+
}
408+
.menu ul ul {
409+
margin-left: 20px;
410+
list-style: square;
411+
}
412+
.menu ul li {
413+
margin-bottom: 0.5rem;
414+
}
415+
.language_switcher_placeholder {
416+
padding-top: 1.25rem;
417+
}
418+
.language_switcher_placeholder select {
419+
width: 95%;
420+
height: 24px;
421+
}
422+
.document {
423+
padding-top: 40px;
424+
position: relative;
425+
z-index: 0;
426+
}
427+
}

‎python_docs_theme/theme.conf

Lines changed: 2 additions & 2 deletions
Original file line numberDiff line numberDiff line change
@@ -4,8 +4,8 @@ stylesheet = pydoctheme.css
44
pygments_style = sphinx
55

66
[options]
7-
bodyfont = 'Lucida Grande', Arial, sans-serif
8-
headfont = 'Lucida Grande', Arial, sans-serif
7+
bodyfont = 'SourceSansProRegular','Lucida Grande', Arial, sans-serif
8+
headfont = 'SourceSansProRegular','Lucida Grande', Arial, sans-serif
99
footerbgcolor = white
1010
footertextcolor = #555555
1111
relbarbgcolor = white

0 commit comments

Comments
 (0)