Annikka/evennia
1
0
Fork 0
Code Issues Pull requests Projects Releases Packages Wiki Activity Actions

Make the docs site basically responsive, by using flexbox instead of floats for the sidebar and allowing it to take up 100% width when the screen width is less than 480px

Browse source
This commit is contained in:
Travis Briggs 2022-10-03 18:05:01 -07:00
parent b4065bb9c9
commit 77cdb3081d
4 changed files with 26 additions and 24 deletions
Download patch file Download diff file Expand all files Collapse all files

6
docs/source/_static/basic.css
View file

@ -48,9 +48,7 @@ div.sphinxsidebarwrapper {
} }
div.sphinxsidebar { div.sphinxsidebar {
float: left; width: 21%;
width: 230px;
margin-left: -100%;
font-size: 90%; font-size: 90%;
word-wrap: break-word; word-wrap: break-word;
overflow-wrap : break-word; overflow-wrap : break-word;
@ -72,7 +70,7 @@ div.sphinxsidebar ul ul {
} }
div.sphinxsidebar form { div.sphinxsidebar form {
margin-top: 10px; margin: 10px 0;
} }
div.sphinxsidebar input { div.sphinxsidebar input {

37
docs/source/_static/nature.css
View file

@ -26,12 +26,13 @@ body {
} }
div.documentwrapper { div.documentwrapper {
float: left; display: flex;
width: 100%; flex-wrap: wrap;
} }
div.bodywrapper { div.bodywrapper {
margin: 0 0 0 230px; width: 79%;
box-sizing: border-box;
} }
hr { hr {
@ -434,7 +435,9 @@ code.descname {
@media print, screen and (max-width: 960px) { @media print, screen and (max-width: 960px) {
div.body { div.body {
width: auto; min-width: auto;
max-width: none;
padding: 0 30px 30px 30px;
} }
div.bodywrapper { div.bodywrapper {
@ -445,21 +448,16 @@ code.descname {
div.document, div.document,
div.documentwrapper, div.documentwrapper,
div.bodywrapper { div.bodywrapper {
margin: 0 !important; margin: 0 !important;
width: 100%;
}
div.sphinxsidebar {
display: none;
} }
#top-link { #top-link {
display: none; display: none;
} }
} }
@media print, screen and (max-width: 720px) { @media print, screen and (max-width: 720px) {
div.related>ul { div.related>ul {
visibility: hidden; visibility: hidden;
} }
@ -471,15 +469,22 @@ code.descname {
} }
@media print, screen and (max-width: 480px) { @media print, screen and (max-width: 480px) {
div.body { div.body {
padding-left: 2px; box-sizing: border-box;
padding: 5px;
} }
div.body { /*
min-width: auto; * At screen sizes this small, the sidebar stacks on top
max-width: none; * of the main content, so they both are 100% width.
*/
div.sphinxsidebar {
width: 100%; width: 100%;
} }
div.document,
div.documentwrapper,
div.bodywrapper {
width: 100%;
}
} }

5
docs/source/_templates/layout.html
View file

@ -179,13 +179,14 @@
<div class="document"> <div class="document">
{%- block document %} {%- block document %}
<div class="documentwrapper"> <div class="documentwrapper">
{%- if render_sidebar %} {%- if render_sidebar %}
{%- block sidebar2 %}{{ sidebar() }}{% endblock %}
<div class="bodywrapper"> <div class="bodywrapper">
{%- endif %} {%- endif %}
<div class="body" role="main"> <div class="body" role="main">
{% block body %} {% endblock %} {% block body %} {% endblock %}
<div class="clearer"></div>
</div> </div>
{%- if render_sidebar %} {%- if render_sidebar %}
</div> </div>
@ -193,8 +194,6 @@
</div> </div>
{%- endblock %} {%- endblock %}
{%- block sidebar2 %}{{ sidebar() }}{% endblock %}
<div class="clearer"></div>
</div> </div>
{%- endblock %} {%- endblock %}

2
docs/source/_templates/localtoc.html
View file

@ -8,6 +8,6 @@
:license: BSD, see LICENSE for details. :license: BSD, see LICENSE for details.
#} #}
{%- if display_toc %} {%- if display_toc %}
<p><h3><a href="{{ pathto(master_doc) }}">{{ _('Table of Contents') }}</a></h3> <h3><a href="{{ pathto(master_doc) }}">{{ _('Table of Contents') }}</a></h3>
{{ toc }} {{ toc }}
{%- endif %} {%- endif %}