Updated HTML docs

docs/1.0-dev/_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/1.0-dev/_static/nature.css

@@ -23,16 +23,16 @@ body {
     color: #555;
     margin: 0;
     padding: 0;
-    height:88
 }
 
 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 {
@@ -435,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 {
@@ -446,28 +448,16 @@ code.descname {
   div.document,
   div.documentwrapper,
   div.bodywrapper {
-      margin: 0 !important;
-      width: 100%;
-  }
+    margin: 0 !important;
 
-  div.sphinxsidebar {
-    visibility: hidden;
-  }
-
-  .search {
-    visibility: visible;
-    position: absolute;
-    top: -7px;
-    right: 200px;
   }
 
   #top-link {
-      display: none;
+    display: none;
   }
 }
 
 @media print, screen and (max-width: 720px) {
-
   div.related>ul {
     visibility: hidden;
   }
@@ -476,16 +466,25 @@ code.descname {
     visibility: visible;
   }
 
-  .search {
-    right: 10px;
-  }
-
 }
 
 @media print, screen and (max-width: 480px) {
-
   div.body {
-    padding-left: 2px;
+    box-sizing: border-box;
+    padding: 5px;
   }
 
+  /*
+   * 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%;
+  }
 }