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

docs/source/_static/basic.css

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

docs/source/_static/nature.css

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

docs/source/_templates/layout.html

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

docs/source/_templates/localtoc.html

@@ -8,6 +8,6 @@
     :license: BSD, see LICENSE for details.
 #}
 {%- 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 }}
 {%- endif %}