From 933318648e0fe273dd3c593b26a2c401a7af34a0 Mon Sep 17 00:00:00 2001
From: "C.A.M. Gerlach" <CAM.Gerlach@Gerlach.CAM>
Date: Wed, 16 Mar 2022 20:16:04 -0500
Subject: [PATCH 01/13] Style: Reduce size of code font to better match prose
 and fit 79 char

---
 pep_sphinx_extensions/pep_theme/static/style.css | 1 +
 1 file changed, 1 insertion(+)

diff --git a/pep_sphinx_extensions/pep_theme/static/style.css b/pep_sphinx_extensions/pep_theme/static/style.css
index d4c643312ee..a6dc92aefe7 100644
--- a/pep_sphinx_extensions/pep_theme/static/style.css
+++ b/pep_sphinx_extensions/pep_theme/static/style.css
@@ -105,6 +105,7 @@ cite {
 pre,
 code {
     font-family: ui-monospace, "Cascadia Mono", "Segoe UI Mono", "DejaVu Sans Mono", Consolas, monospace;
+    font-size: 0.875rem;
     white-space: pre-wrap;
     word-wrap: break-word;
     -webkit-hyphens: none;

From e50d0d796b19412f3f017d901ad9aa05cfc6ac86 Mon Sep 17 00:00:00 2001
From: "C.A.M. Gerlach" <CAM.Gerlach@Gerlach.CAM>
Date: Wed, 16 Mar 2022 20:28:59 -0500
Subject: [PATCH 02/13] Style: Break code blocks by letter to avoid bad format
 at narrow widths

---
 pep_sphinx_extensions/pep_theme/static/style.css | 1 +
 1 file changed, 1 insertion(+)

diff --git a/pep_sphinx_extensions/pep_theme/static/style.css b/pep_sphinx_extensions/pep_theme/static/style.css
index a6dc92aefe7..9f48d757745 100644
--- a/pep_sphinx_extensions/pep_theme/static/style.css
+++ b/pep_sphinx_extensions/pep_theme/static/style.css
@@ -117,6 +117,7 @@ code.literal {
 }
 pre {
     padding: .5rem .75rem;
+    word-break: break-all;
 }
 
 /* Contents rules */

From a487f41f63f231decc299f5f3d6f2fdcc5be4fae Mon Sep 17 00:00:00 2001
From: "C.A.M. Gerlach" <CAM.Gerlach@Gerlach.CAM>
Date: Wed, 16 Mar 2022 22:29:35 -0500
Subject: [PATCH 03/13] Style: Shrink table font at narrow screen widths to
 avoid layout issues

---
 pep_sphinx_extensions/pep_theme/static/mq.css | 22 ++++++++++++++++---
 1 file changed, 19 insertions(+), 3 deletions(-)

diff --git a/pep_sphinx_extensions/pep_theme/static/mq.css b/pep_sphinx_extensions/pep_theme/static/mq.css
index c800e5d925b..052d0fa4bd6 100644
--- a/pep_sphinx_extensions/pep_theme/static/mq.css
+++ b/pep_sphinx_extensions/pep_theme/static/mq.css
@@ -1,7 +1,21 @@
 @charset "UTF-8";
+
 /* Media Queries */
-@media (max-width: 32.5em) {
-    /* Reduce padding & margins for the smallest screens */
+
+/* Further reduce width of fixed elements for smallest screens */
+@media (max-width: 32em) {
+    pre,
+    code {
+        word-break: break-all;
+    }
+    table th,
+    table td {
+        font-size: 3vw;
+    }
+}
+
+/* Reduce padding & margins for smaller screens */
+@media (max-width: 36em) {
     section#pep-page-section > header > h1 {
         padding-right: 0;
         border-right: none;
@@ -17,7 +31,8 @@
         padding: 0 0.1rem;
     }
 }
-@media (min-width: 32.5em) {
+
+@media (min-width: 36em) {
     section#pep-page-section {
         max-width: 40em;
         width: 100%;
@@ -25,6 +40,7 @@
         padding: .5rem 1rem 0;
     }
 }
+
 @media (min-width: 54em) {
     section#pep-page-section {
         max-width: 75em;

From 6f494d171ffa85420ed758ccbad98891752b385a Mon Sep 17 00:00:00 2001
From: "C.A.M. Gerlach" <CAM.Gerlach@Gerlach.CAM>
Date: Wed, 16 Mar 2022 22:31:45 -0500
Subject: [PATCH 04/13] Style: Remove large line height on top-level title to
 avoid double-spacing

---
 pep_sphinx_extensions/pep_theme/static/style.css | 1 -
 1 file changed, 1 deletion(-)

diff --git a/pep_sphinx_extensions/pep_theme/static/style.css b/pep_sphinx_extensions/pep_theme/static/style.css
index 9f48d757745..54ab534a64b 100644
--- a/pep_sphinx_extensions/pep_theme/static/style.css
+++ b/pep_sphinx_extensions/pep_theme/static/style.css
@@ -41,7 +41,6 @@ p {margin: .5rem 0}
 
 /* Header rules */
 h1 {
-    line-height: 2.3;
     font-size: 2rem;
     font-weight: bold;
     margin-top: 2rem;

From 93cec699c330915c86c395b9d82e2fa997f9c345 Mon Sep 17 00:00:00 2001
From: "C.A.M. Gerlach" <CAM.Gerlach@Gerlach.CAM>
Date: Wed, 16 Mar 2022 22:39:54 -0500
Subject: [PATCH 05/13] Style: Further reduce code font size at narrow widths
 to fit better

---
 pep_sphinx_extensions/pep_theme/static/mq.css | 7 ++++++-
 1 file changed, 6 insertions(+), 1 deletion(-)

diff --git a/pep_sphinx_extensions/pep_theme/static/mq.css b/pep_sphinx_extensions/pep_theme/static/mq.css
index 052d0fa4bd6..dd6a02cb2ac 100644
--- a/pep_sphinx_extensions/pep_theme/static/mq.css
+++ b/pep_sphinx_extensions/pep_theme/static/mq.css
@@ -4,10 +4,12 @@
 
 /* Further reduce width of fixed elements for smallest screens */
 @media (max-width: 32em) {
-    pre,
     code {
         word-break: break-all;
     }
+    pre {
+        font-size: 0.75rem;
+    }
     table th,
     table td {
         font-size: 3vw;
@@ -26,6 +28,9 @@
     nav#pep-sidebar {
         display: none;
     }
+    pre {
+        font-size: 0.8175rem;
+    }
     table th,
     table td {
         padding: 0 0.1rem;

From f92bd9b4ebbd3472a1e0f7f84438633498800fbe Mon Sep 17 00:00:00 2001
From: "C.A.M. Gerlach" <CAM.Gerlach@Gerlach.CAM>
Date: Wed, 16 Mar 2022 23:15:18 -0500
Subject: [PATCH 06/13] Style: Make Contents more clickable & discoverable on
 desktop & mobile

---
 pep_sphinx_extensions/pep_theme/static/mq.css    | 5 +++++
 pep_sphinx_extensions/pep_theme/static/style.css | 6 ++++++
 2 files changed, 11 insertions(+)

diff --git a/pep_sphinx_extensions/pep_theme/static/mq.css b/pep_sphinx_extensions/pep_theme/static/mq.css
index dd6a02cb2ac..aad55e31aa2 100644
--- a/pep_sphinx_extensions/pep_theme/static/mq.css
+++ b/pep_sphinx_extensions/pep_theme/static/mq.css
@@ -62,6 +62,11 @@
         float: left;
         margin-right: 2%;
     }
+  /* Make Contents more visible on mobile */
+  details > summary {
+      font-size: 1rem;
+      width: max-content;
+  }
 }
 @media (min-width: 60em) {
     section#pep-page-section > article {
diff --git a/pep_sphinx_extensions/pep_theme/static/style.css b/pep_sphinx_extensions/pep_theme/static/style.css
index 54ab534a64b..6429362bf46 100644
--- a/pep_sphinx_extensions/pep_theme/static/style.css
+++ b/pep_sphinx_extensions/pep_theme/static/style.css
@@ -121,7 +121,13 @@ pre {
 
 /* Contents rules */
 details > summary {
+    cursor: pointer;
+    font-size: 1.6rem;
     font-weight: bold;
+    margin-bottom: 1em;
+}
+details > summary:hover {
+    text-decoration: underline;
 }
 
 /* Definition list rules */

From cb01bd4aaa996be6f5f685b8c619a6684a743329 Mon Sep 17 00:00:00 2001
From: "C.A.M. Gerlach" <CAM.Gerlach@Gerlach.CAM>
Date: Thu, 17 Mar 2022 12:39:27 -0500
Subject: [PATCH 07/13] Style: Add a bit more padding around content container
 at narrow widths

---
 pep_sphinx_extensions/pep_theme/static/mq.css    | 7 +++++++
 pep_sphinx_extensions/pep_theme/static/style.css | 3 +--
 2 files changed, 8 insertions(+), 2 deletions(-)

diff --git a/pep_sphinx_extensions/pep_theme/static/mq.css b/pep_sphinx_extensions/pep_theme/static/mq.css
index aad55e31aa2..1d9336ec491 100644
--- a/pep_sphinx_extensions/pep_theme/static/mq.css
+++ b/pep_sphinx_extensions/pep_theme/static/mq.css
@@ -4,6 +4,9 @@
 
 /* Further reduce width of fixed elements for smallest screens */
 @media (max-width: 32em) {
+    section#pep-page-section {
+        padding: 0.25rem;
+    }
     code {
         word-break: break-all;
     }
@@ -18,6 +21,9 @@
 
 /* Reduce padding & margins for smaller screens */
 @media (max-width: 36em) {
+    section#pep-page-section {
+        padding: 0.5rem;
+    }
     section#pep-page-section > header > h1 {
         padding-right: 0;
         border-right: none;
@@ -48,6 +54,7 @@
 
 @media (min-width: 54em) {
     section#pep-page-section {
+        display: table;
         max-width: 75em;
     }
     section#pep-page-section > article {
diff --git a/pep_sphinx_extensions/pep_theme/static/style.css b/pep_sphinx_extensions/pep_theme/static/style.css
index 6429362bf46..e295519f172 100644
--- a/pep_sphinx_extensions/pep_theme/static/style.css
+++ b/pep_sphinx_extensions/pep_theme/static/style.css
@@ -32,8 +32,7 @@ body {
     background-color: var(--colour-background);
 }
 section#pep-page-section {
-    padding: 0.25rem 0.25rem 0;
-    display: table;
+    padding: 0.25rem;
 }
 
 /* Reduce margin sizes for body text */

From 003992b825904d384a8d5a72fac638bd18237e69 Mon Sep 17 00:00:00 2001
From: "C.A.M. Gerlach" <CAM.Gerlach@Gerlach.CAM>
Date: Sun, 20 Mar 2022 19:08:33 -0500
Subject: [PATCH 08/13] Style: Allow tables to overflow for reponsiveness by
 wrapping w/JS

---
 pep_sphinx_extensions/pep_theme/static/mq.css |  4 ---
 .../pep_theme/static/style.css                |  3 ++
 .../pep_theme/static/wrap_tables.js           | 30 +++++++++++++++++++
 .../pep_theme/templates/page.html             |  1 +
 4 files changed, 34 insertions(+), 4 deletions(-)
 create mode 100644 pep_sphinx_extensions/pep_theme/static/wrap_tables.js

diff --git a/pep_sphinx_extensions/pep_theme/static/mq.css b/pep_sphinx_extensions/pep_theme/static/mq.css
index 1d9336ec491..45fba70b8c3 100644
--- a/pep_sphinx_extensions/pep_theme/static/mq.css
+++ b/pep_sphinx_extensions/pep_theme/static/mq.css
@@ -13,10 +13,6 @@
     pre {
         font-size: 0.75rem;
     }
-    table th,
-    table td {
-        font-size: 3vw;
-    }
 }
 
 /* Reduce padding & margins for smaller screens */
diff --git a/pep_sphinx_extensions/pep_theme/static/style.css b/pep_sphinx_extensions/pep_theme/static/style.css
index e295519f172..cff70cb70ba 100644
--- a/pep_sphinx_extensions/pep_theme/static/style.css
+++ b/pep_sphinx_extensions/pep_theme/static/style.css
@@ -177,6 +177,9 @@ sup {top: -0.5em}
 sub {bottom: -0.25em}
 
 /* Table rules */
+div.table-wrapper {
+    overflow-x: auto;
+}
 table {
     width: 100%;
     border-collapse: collapse;
diff --git a/pep_sphinx_extensions/pep_theme/static/wrap_tables.js b/pep_sphinx_extensions/pep_theme/static/wrap_tables.js
new file mode 100644
index 00000000000..70c0a3a4bc0
--- /dev/null
+++ b/pep_sphinx_extensions/pep_theme/static/wrap_tables.js
@@ -0,0 +1,30 @@
+// Wrap the tables in PEP bodies in a div, to allow for responsive scrolling
+
+"use strict";
+
+const pepContentId = "pep-content";
+
+
+// Wrap passed table element in wrapper divs
+function wrapTable (table) {
+    const wrapper = document.createElement("div");
+    wrapper.classList.add("table-wrapper");
+    table.parentNode.insertBefore(wrapper, table);
+    wrapper.appendChild(table);
+}
+
+
+// Wrap all tables in the PEP content in wrapper divs
+function wrapPepContentTables () {
+    const pepContent = document.getElementById(pepContentId);
+    const bodyTables = pepContent.getElementsByTagName("table");
+    Array.from(bodyTables).forEach(wrapTable);
+}
+
+
+// Wrap the tables as soon as the DOM is loaded
+document.addEventListener("DOMContentLoaded", () => {
+    if (document.getElementById(pepContentId)) {
+        wrapPepContentTables();
+    }
+})
diff --git a/pep_sphinx_extensions/pep_theme/templates/page.html b/pep_sphinx_extensions/pep_theme/templates/page.html
index 88ab2dedfeb..89e688ad0f4 100644
--- a/pep_sphinx_extensions/pep_theme/templates/page.html
+++ b/pep_sphinx_extensions/pep_theme/templates/page.html
@@ -41,5 +41,6 @@ <h2>Contents</h2>
         </nav>
     </section>
     <script src="{{ pathto('_static/colour_scheme.js', resource=True) }}"></script>
+    <script src="{{ pathto('_static/wrap_tables.js', resource=True) }}"></script>
 </body>
 </html>

From 8f4b378cbaace6e2fd3a89fffd552c41a48ca4a4 Mon Sep 17 00:00:00 2001
From: "C.A.M. Gerlach" <CAM.Gerlach@Gerlach.CAM>
Date: Mon, 21 Mar 2022 14:56:13 -0500
Subject: [PATCH 09/13] Style: Break by letter in footnotes at narrow widths to
 avoid scrolling

---
 pep_sphinx_extensions/pep_theme/static/mq.css | 4 +++-
 1 file changed, 3 insertions(+), 1 deletion(-)

diff --git a/pep_sphinx_extensions/pep_theme/static/mq.css b/pep_sphinx_extensions/pep_theme/static/mq.css
index 45fba70b8c3..e375cc2d8c6 100644
--- a/pep_sphinx_extensions/pep_theme/static/mq.css
+++ b/pep_sphinx_extensions/pep_theme/static/mq.css
@@ -7,7 +7,9 @@
     section#pep-page-section {
         padding: 0.25rem;
     }
-    code {
+    code,
+    dl.footnote > dt,
+    dl.footnote > dd {
         word-break: break-all;
     }
     pre {

From 38b3f8c62641f93edd6d88829d5aa4061ce7fc53 Mon Sep 17 00:00:00 2001
From: "C.A.M. Gerlach" <CAM.Gerlach@Gerlach.CAM>
Date: Mon, 21 Mar 2022 15:41:10 -0500
Subject: [PATCH 10/13] Style: Show sidebar on larger tablets and avoid
 spurious bottom ToC

---
 pep_sphinx_extensions/pep_theme/static/mq.css | 14 ++++----------
 1 file changed, 4 insertions(+), 10 deletions(-)

diff --git a/pep_sphinx_extensions/pep_theme/static/mq.css b/pep_sphinx_extensions/pep_theme/static/mq.css
index e375cc2d8c6..617a11501ef 100644
--- a/pep_sphinx_extensions/pep_theme/static/mq.css
+++ b/pep_sphinx_extensions/pep_theme/static/mq.css
@@ -42,18 +42,12 @@
 }
 
 @media (min-width: 36em) {
-    section#pep-page-section {
-        max-width: 40em;
-        width: 100%;
-        margin: 0 auto;
-        padding: .5rem 1rem 0;
-    }
-}
-
-@media (min-width: 54em) {
     section#pep-page-section {
         display: table;
+        margin: 0 auto;
         max-width: 75em;
+        padding: 0.5rem 1rem 0;
+        width: 100%;
     }
     section#pep-page-section > article {
         max-width: 40em;
@@ -67,7 +61,7 @@
         float: left;
         margin-right: 2%;
     }
-  /* Make Contents more visible on mobile */
+  /* Make less prominent when sidebar ToC is available */
   details > summary {
       font-size: 1rem;
       width: max-content;

From f0ac0d62c03319e6ac01a04c485b02cd96836f6f Mon Sep 17 00:00:00 2001
From: "C.A.M. Gerlach" <CAM.Gerlach@Gerlach.CAM>
Date: Mon, 21 Mar 2022 15:54:57 -0500
Subject: [PATCH 11/13] Style: Eliminate illegal browser scrollbar hacks that
 harm accesability

---
 pep_sphinx_extensions/pep_theme/static/style.css | 8 +-------
 1 file changed, 1 insertion(+), 7 deletions(-)

diff --git a/pep_sphinx_extensions/pep_theme/static/style.css b/pep_sphinx_extensions/pep_theme/static/style.css
index cff70cb70ba..85a96acdaeb 100644
--- a/pep_sphinx_extensions/pep_theme/static/style.css
+++ b/pep_sphinx_extensions/pep_theme/static/style.css
@@ -19,7 +19,6 @@
 :root {color-scheme: light dark}
 html {
     overflow-y: scroll;
-    -webkit-font-smoothing: antialiased;
     margin: 0;
     line-height: 1.4;
     font-weight: normal;
@@ -279,16 +278,11 @@ dl.footnote dd {
 
 /* Sidebar formatting */
 #pep-sidebar {
-    overflow-y: scroll;
+    overflow-y: auto;
     position: sticky;
     top: 0;
     height: 100vh;
-    scrollbar-width: thin;  /* CSS Standards, not *yet* widely supported */
-    scrollbar-color: var(--colour-scrollbar) transparent;
 }
-#pep-sidebar::-webkit-scrollbar {width: 6px}
-#pep-sidebar::-webkit-scrollbar-track {background: transparent}
-#pep-sidebar::-webkit-scrollbar-thumb {background: var(--colour-scrollbar)}
 #pep-sidebar > h2 {
     font-size: 1.4rem;
 }

From 9a0d8f8627913a0322b314e63377d09c63fefa5a Mon Sep 17 00:00:00 2001
From: "C.A.M. Gerlach" <CAM.Gerlach@Gerlach.CAM>
Date: Mon, 21 Mar 2022 16:14:05 -0500
Subject: [PATCH 12/13] Style: Bump up primary width breakpoint to trigger more
 approprately

---
 pep_sphinx_extensions/pep_theme/static/mq.css | 4 ++--
 1 file changed, 2 insertions(+), 2 deletions(-)

diff --git a/pep_sphinx_extensions/pep_theme/static/mq.css b/pep_sphinx_extensions/pep_theme/static/mq.css
index 617a11501ef..b323a762e9b 100644
--- a/pep_sphinx_extensions/pep_theme/static/mq.css
+++ b/pep_sphinx_extensions/pep_theme/static/mq.css
@@ -18,7 +18,7 @@
 }
 
 /* Reduce padding & margins for smaller screens */
-@media (max-width: 36em) {
+@media (max-width: 40em) {
     section#pep-page-section {
         padding: 0.5rem;
     }
@@ -41,7 +41,7 @@
     }
 }
 
-@media (min-width: 36em) {
+@media (min-width: 40em) {
     section#pep-page-section {
         display: table;
         margin: 0 auto;

From 35a8a0415e8f9282636926991f3bb8d6755dd52c Mon Sep 17 00:00:00 2001
From: "C.A.M. Gerlach" <CAM.Gerlach@Gerlach.CAM>
Date: Tue, 22 Mar 2022 04:40:43 -0500
Subject: [PATCH 13/13] Style: Refine and modernize approach to avoid container
 overflows

---
 pep_sphinx_extensions/pep_theme/static/mq.css    | 4 ++--
 pep_sphinx_extensions/pep_theme/static/style.css | 9 +++++++--
 2 files changed, 9 insertions(+), 4 deletions(-)

diff --git a/pep_sphinx_extensions/pep_theme/static/mq.css b/pep_sphinx_extensions/pep_theme/static/mq.css
index b323a762e9b..360eb372d60 100644
--- a/pep_sphinx_extensions/pep_theme/static/mq.css
+++ b/pep_sphinx_extensions/pep_theme/static/mq.css
@@ -7,10 +7,10 @@
     section#pep-page-section {
         padding: 0.25rem;
     }
-    code,
     dl.footnote > dt,
     dl.footnote > dd {
-        word-break: break-all;
+        padding-left: 0;
+        padding-right: 0;
     }
     pre {
         font-size: 0.75rem;
diff --git a/pep_sphinx_extensions/pep_theme/static/style.css b/pep_sphinx_extensions/pep_theme/static/style.css
index 85a96acdaeb..6a169fa5835 100644
--- a/pep_sphinx_extensions/pep_theme/static/style.css
+++ b/pep_sphinx_extensions/pep_theme/static/style.css
@@ -75,8 +75,10 @@ a,
 a:active,
 a:visited {
     color: var(--colour-links);
-    text-decoration-color: var(--colour-background-accent);
     display: inline;
+    overflow-wrap: break-word;
+    overflow-wrap: anywhere;
+    text-decoration-color: var(--colour-background-accent);
 }
 a:hover,
 a:focus {
@@ -104,10 +106,13 @@ code {
     font-family: ui-monospace, "Cascadia Mono", "Segoe UI Mono", "DejaVu Sans Mono", Consolas, monospace;
     font-size: 0.875rem;
     white-space: pre-wrap;
-    word-wrap: break-word;
     -webkit-hyphens: none;
     hyphens: none;
 }
+code {
+    overflow-wrap: break-word;
+    overflow-wrap: anywhere;
+}
 code.literal {
     font-size: .8em;
     background-color: var(--colour-inline-code);