Use flexbox for API docs layout (#549)

Author: robsdedude

docs/source/_static/nature_custom.css_t

@@ -35,56 +35,63 @@
  */
 
 @import url("basic.css");
- 
+
 /* -- page layout ----------------------------------------------------------- */
- 
+
 body {
     font-family: Arial, sans-serif;
     font-size: 100%;
     background-color: #fff;
     color: #555;
     margin: 0;
     padding: 0;
+    min-width: 600px; /* new */
 }
 
 div.documentwrapper {
-    float: left;
-    width: 100%;
+    /* float: left; */
+    /* width: 100%; */
+    min-width: 450px; /* new */
+    flex: 600px 9999 1; /* new */
 }
 
 div.bodywrapper {
-    margin: 0 0 0 400px !important;
-    /*margin: 0 0 0 {{ theme_sidebarwidth|todim }};*/
+    /* margin: 0 0 0 {{ theme_sidebarwidth|todim }}; */
 }
 
 hr {
     border: 1px solid #B1B4B6;
 }
- 
+
 div.document {
     background-color: #eee;
+    display: flex; /* new */
+    flex-direction: row-reverse; /* new */
+    align-items: stretch; /* new */
+    flex-wrap: wrap-reverse; /* new */
+    justify-content: flex-end;  /* new */
 }
- 
+
 div.body {
     background-color: #ffffff;
     color: #3E4349;
     padding: 0 30px 30px 30px;
     font-size: 0.9em;
 }
- 
+
 div.footer {
     color: #555;
     width: 100%;
     padding: 13px 0;
     text-align: center;
     font-size: 75%;
 }
- 
+
 div.footer a {
     color: #444;
     text-decoration: underline;
 }
- 
+
 div.related {
     background-color: #000000;
     /*background-color: #6BA81E;*/
@@ -94,22 +101,25 @@ div.related {
     /*text-shadow: 0px 1px 0 #444;*/
     font-size: 0.9em;
 }
- 
+
 div.related a {
     color: #ffffff;
     /*color: #E2F3CC;*/
 }
- 
+
 div.sphinxsidebar {
-    width: 400px !important; /* new */
+    flex: {{ theme_sidebarwidth|todim }}; /* new */
     font-size: 0.75em;
     line-height: 1.5em;
+    float: initial; /* new */
+    width: unset; /* new */
+    margin-left: 0; /* new */
 }
 
 div.sphinxsidebarwrapper{
     padding: 20px 0;
 }
- 
+
 div.sphinxsidebar h3,
 div.sphinxsidebar h4 {
     font-family: Arial, sans-serif;
@@ -128,30 +138,30 @@ div.sphinxsidebar h4 {
 div.sphinxsidebar h4{
     font-size: 1.1em;
 }
- 
+
 div.sphinxsidebar h3 a {
     color: #444;
 }
- 
- 
+
+
 div.sphinxsidebar p {
     color: #888;
     padding: 5px 20px;
 }
- 
+
 div.sphinxsidebar p.topless {
 }
- 
+
 div.sphinxsidebar ul {
     margin: 10px 20px;
     padding: 0;
     color: #000;
 }
- 
+
 div.sphinxsidebar a {
     color: #444;
 }
- 
+
 div.sphinxsidebar input {
     border: 1px solid #ccc;
     font-family: sans-serif;
@@ -164,17 +174,17 @@ div.sphinxsidebar .searchformwrapper {
 }
 
 /* -- body styles ----------------------------------------------------------- */
- 
+
 a {
     color: #005B81;
     text-decoration: none;
 }
- 
+
 a:hover {
     color: #E32E00;
     text-decoration: underline;
 }
- 
+
 div.body h1,
 div.body h2,
 div.body h3,
@@ -191,30 +201,30 @@ div.body h6 {
     text-shadow: none;
     /*text-shadow: 0px 1px 0 white;*/
 }
- 
+
 div.body h1 { border-top: 20px solid white; margin-top: 0; font-size: 200%; }
 div.body h2 { font-size: 150%; background-color: #a9d3ff; }
 div.body h3 { font-size: 120%; background-color: #a9d3ff; }
 div.body h4 { font-size: 110%; background-color: #a9d3ff; }
 div.body h5 { font-size: 100%; background-color: #a9d3ff; }
 div.body h6 { font-size: 100%; background-color: #a9d3ff; }
- 
+
 a.headerlink {
     color: #c60f0f;
     font-size: 0.8em;
     padding: 0 4px 0 4px;
     text-decoration: none;
 }
- 
+
 a.headerlink:hover {
     background-color: #c60f0f;
     color: white;
 }
- 
+
 div.body p, div.body dd, div.body li {
     line-height: 1.5em;
 }
- 
+
 div.admonition p.admonition-title + p {
     display: inline;
 }
@@ -227,16 +237,16 @@ div.note {
     background-color: #eee;
     border: 1px solid #ccc;
 }
- 
+
 div.seealso {
     background-color: #ffc;
     border: 1px solid #ff6;
 }
- 
+
 div.topic {
     background-color: #eee;
 }
- 
+
 div.warning {
     background-color: #ffe4e4;
     border: 1px solid #f66;
@@ -250,11 +260,11 @@ div.note {
 p.admonition-title {
     display: inline;
 }
- 
+
 p.admonition-title:after {
     content: ":";
 }
- 
+
 pre {
     padding: 10px;
     background-color: #f0f0f0;
@@ -268,7 +278,7 @@ pre {
     /*-webkit-box-shadow: 1px 1px 1px #d8d8d8;*/
     /*-moz-box-shadow: 1px 1px 1px #d8d8d8;*/
 }
- 
+
 code {
     background-color: #ecf0f3;
     color: #222;
@@ -300,4 +310,4 @@ li > p:first-child {
 
 li > p:last-child {
     margin-top: 10px;
-}
+}