From 3ac254134f5fed81a02bc89b0ba5de3f5b49641f Mon Sep 17 00:00:00 2001
From: Travis Briggs <audiodude@gmail.com>
Date: Sun, 2 Oct 2022 20:15:37 -0700
Subject: [PATCH 1/3] Documentation fix for mobile/small screens

---
 docs/source/_static/nature.css | 14 ++++++--------
 1 file changed, 6 insertions(+), 8 deletions(-)

diff --git a/docs/source/_static/nature.css b/docs/source/_static/nature.css
index ee6c86b042..a86b9653f4 100644
--- a/docs/source/_static/nature.css
+++ b/docs/source/_static/nature.css
@@ -23,7 +23,6 @@ body {
     color: #555;
     margin: 0;
     padding: 0;
-    height:88
 }
 
 div.documentwrapper {
@@ -456,9 +455,6 @@ code.descname {
 
   .search {
     visibility: visible;
-    position: absolute;
-    top: -7px;
-    right: 200px;
   }
 
   #top-link {
@@ -476,10 +472,6 @@ code.descname {
     visibility: visible;
   }
 
-  .search {
-    right: 10px;
-  }
-
 }
 
 @media print, screen and (max-width: 480px) {
@@ -488,4 +480,10 @@ code.descname {
     padding-left: 2px;
   }
 
+  div.body {
+    min-width: auto;
+    max-width: none;
+    width: 100%;
+  }
+
 }

From b4065bb9c9146eadcbb39251afa62ca0028bb99f Mon Sep 17 00:00:00 2001
From: Travis Briggs <audiodude@gmail.com>
Date: Mon, 3 Oct 2022 17:00:15 -0700
Subject: [PATCH 2/3] Fix phantom search bar on normal doc pages in mobile view

---
 docs/source/_static/nature.css | 6 +-----
 1 file changed, 1 insertion(+), 5 deletions(-)

diff --git a/docs/source/_static/nature.css b/docs/source/_static/nature.css
index a86b9653f4..0080fa1683 100644
--- a/docs/source/_static/nature.css
+++ b/docs/source/_static/nature.css
@@ -450,11 +450,7 @@ code.descname {
   }
 
   div.sphinxsidebar {
-    visibility: hidden;
-  }
-
-  .search {
-    visibility: visible;
+    display: none;
   }
 
   #top-link {

From 77cdb3081dc7c15fe83a4705b2f86412d0ee229c Mon Sep 17 00:00:00 2001
From: Travis Briggs <audiodude@gmail.com>
Date: Mon, 3 Oct 2022 18:05:01 -0700
Subject: [PATCH 3/3] 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        |  6 ++---
 docs/source/_static/nature.css       | 37 ++++++++++++++++------------
 docs/source/_templates/layout.html   |  5 ++--
 docs/source/_templates/localtoc.html |  2 +-
 4 files changed, 26 insertions(+), 24 deletions(-)

diff --git a/docs/source/_static/basic.css b/docs/source/_static/basic.css
index 9f42944a9b..ec33ab6d6e 100644
--- a/docs/source/_static/basic.css
+++ b/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 {
diff --git a/docs/source/_static/nature.css b/docs/source/_static/nature.css
index 0080fa1683..868232b76b 100644
--- a/docs/source/_static/nature.css
+++ b/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%;
+  }
 }
diff --git a/docs/source/_templates/layout.html b/docs/source/_templates/layout.html
index 601836a7e5..1177222a5d 100644
--- a/docs/source/_templates/layout.html
+++ b/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 %}
 
diff --git a/docs/source/_templates/localtoc.html b/docs/source/_templates/localtoc.html
index c086a18df8..d10bc0711f 100644
--- a/docs/source/_templates/localtoc.html
+++ b/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 %}