Better docs layout for narrow screens

Backport of 9b8793a2df508ac5f2cc7eeee72720488fa6f422

This uses a css grid instead of hard-coded 230px margins, and makes it
so the ToC only takes up 40% of the screen, so you don't have to
scroll past the entire thing for longer tables (like in the release notes)

Author: faho

docs/docs/4.0b1/_static/pydoctheme.css

@@ -71,12 +71,10 @@ div.related h3 {
 }
 
 div.related li.right {
-  float: right;
   margin-right: 5px;
 }
 
 div.sphinxsidebar {
-  width: 230px;
   overflow-wrap: break-word;
 }
 
@@ -113,7 +111,6 @@ div.sphinxsidebar ul {
   margin: 10px;
   padding: 0;
   color: var(--secondary-link-color);
-  margin: 10px;
   list-style: none;
 }
 
@@ -548,10 +545,6 @@ div.sphinxsidebar ul {
 }
 
 
-div.bodywrapper {
-    margin-left: 230px;
-}
-
 aside.footnote > .label {
     display: inline;
 }
@@ -565,34 +558,52 @@ div.documentwrapper {
     width: 100%;
 }
 
+div.document {
+    display: grid;
+    grid-template: 1fr min-content / 12rem minmax(0,1fr);
+}
+
 /* On screens that are less than 700px wide remove anything non-essential
    - the sidebar, the gradient background, ... */
 @media screen and (max-width: 700px) {
+    div.document {
+        display: grid;
+        grid-template: 30vh min-content / 100%;
+    }
     div.sphinxsidebar {
         font-size: 16px;
         width: 100%;
         height: auto;
         position: relative;
+        /* To separate the "side"bar from the content below */
+        border-bottom: 1px solid;
+        border-color: var(--sidebar-border-color);
     }
-    div.bodywrapper {
+
+    /* Reduce margins to save space */
+    div.sphinxsidebar ul ul, div.sphinxsidebar ul, div.bodywrapper, div.content {
         margin-left: 0;
     }
 
+    div.sphinxsidebar h3, div.sphinxsidebar h4 {
+        margin-top: 0;
+    }
 
     div.sphinxsidebar ul {
         flex-basis: content;
         flex-wrap: wrap;
     }
     div.sphinxsidebarwrapper {
         display: flex;
+        gap: 1em;
+        justify-content: space-between;
     }
     div.sphinxsidebarwrapper > h3:nth-child(5) {
         display: none;
     }
-    div#searchbox {
+    #searchbox {
         display: none !important;
     }
-    div.content {margin-left: 0;}
     div.body {
         padding: 1rem;
     }
@@ -613,6 +624,9 @@ div.documentwrapper {
 
 /* On print media remove anything non-essential. */
 @media print {
+    div.document {
+        display: block;
+    }
     .inline-search {
         display: none;
     }

site/docs/4.0b1/_static/pydoctheme.css

@@ -71,12 +71,10 @@ div.related h3 {
 }
 
 div.related li.right {
-  float: right;
   margin-right: 5px;
 }
 
 div.sphinxsidebar {
-  width: 230px;
   overflow-wrap: break-word;
 }
 
@@ -113,7 +111,6 @@ div.sphinxsidebar ul {
   margin: 10px;
   padding: 0;
   color: var(--secondary-link-color);
-  margin: 10px;
   list-style: none;
 }
 
@@ -548,10 +545,6 @@ div.sphinxsidebar ul {
 }
 
 
-div.bodywrapper {
-    margin-left: 230px;
-}
-
 aside.footnote > .label {
     display: inline;
 }
@@ -565,34 +558,52 @@ div.documentwrapper {
     width: 100%;
 }
 
+div.document {
+    display: grid;
+    grid-template: 1fr min-content / 12rem minmax(0,1fr);
+}
+
 /* On screens that are less than 700px wide remove anything non-essential
    - the sidebar, the gradient background, ... */
 @media screen and (max-width: 700px) {
+    div.document {
+        display: grid;
+        grid-template: 30vh min-content / 100%;
+    }
     div.sphinxsidebar {
         font-size: 16px;
         width: 100%;
         height: auto;
         position: relative;
+        /* To separate the "side"bar from the content below */
+        border-bottom: 1px solid;
+        border-color: var(--sidebar-border-color);
     }
-    div.bodywrapper {
+
+    /* Reduce margins to save space */
+    div.sphinxsidebar ul ul, div.sphinxsidebar ul, div.bodywrapper, div.content {
         margin-left: 0;
     }
 
+    div.sphinxsidebar h3, div.sphinxsidebar h4 {
+        margin-top: 0;
+    }
 
     div.sphinxsidebar ul {
         flex-basis: content;
         flex-wrap: wrap;
     }
     div.sphinxsidebarwrapper {
         display: flex;
+        gap: 1em;
+        justify-content: space-between;
     }
     div.sphinxsidebarwrapper > h3:nth-child(5) {
         display: none;
     }
-    div#searchbox {
+    #searchbox {
         display: none !important;
     }
-    div.content {margin-left: 0;}
     div.body {
         padding: 1rem;
     }
@@ -613,6 +624,9 @@ div.documentwrapper {
 
 /* On print media remove anything non-essential. */
 @media print {
+    div.document {
+        display: block;
+    }
     .inline-search {
         display: none;
     }