Style: Reduce size of code font and improve responsiveness at narrow screen widths (#2439)

Author: CAM-Gerlach

pep_sphinx_extensions/pep_theme/static/mq.css

@@ -1,7 +1,27 @@
 @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) {
+    section#pep-page-section {
+        padding: 0.25rem;
+    }
+    dl.footnote > dt,
+    dl.footnote > dd {
+        padding-left: 0;
+        padding-right: 0;
+    }
+    pre {
+        font-size: 0.75rem;
+    }
+}
+
+/* Reduce padding & margins for smaller screens */
+@media (max-width: 40em) {
+    section#pep-page-section {
+        padding: 0.5rem;
+    }
     section#pep-page-section > header > h1 {
         padding-right: 0;
         border-right: none;
@@ -12,22 +32,22 @@
     nav#pep-sidebar {
         display: none;
     }
+    pre {
+        font-size: 0.8175rem;
+    }
     table th,
     table td {
         padding: 0 0.1rem;
     }
 }
-@media (min-width: 32.5em) {
+
+@media (min-width: 40em) {
     section#pep-page-section {
-        max-width: 40em;
-        width: 100%;
+        display: table;
         margin: 0 auto;
-        padding: .5rem 1rem 0;
-    }
-}
-@media (min-width: 54em) {
-    section#pep-page-section {
         max-width: 75em;
+        padding: 0.5rem 1rem 0;
+        width: 100%;
     }
     section#pep-page-section > article {
         max-width: 40em;
@@ -41,6 +61,11 @@
         float: left;
         margin-right: 2%;
     }
+  /* Make less prominent when sidebar ToC is available */
+  details > summary {
+      font-size: 1rem;
+      width: max-content;
+  }
 }
 @media (min-width: 60em) {
     section#pep-page-section > article {

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;
@@ -32,16 +31,14 @@ 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 */
 p {margin: .5rem 0}
 
 /* Header rules */
 h1 {
-    line-height: 2.3;
     font-size: 2rem;
     font-weight: bold;
     margin-top: 2rem;
@@ -78,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 {
@@ -105,22 +104,33 @@ 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;
     hyphens: none;
 }
+code {
+    overflow-wrap: break-word;
+    overflow-wrap: anywhere;
+}
 code.literal {
     font-size: .8em;
     background-color: var(--colour-inline-code);
 }
 pre {
     padding: .5rem .75rem;
+    word-break: break-all;
 }
 
 /* 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 */
@@ -171,6 +181,9 @@ sup {top: -0.5em}
 sub {bottom: -0.25em}
 
 /* Table rules */
+div.table-wrapper {
+    overflow-x: auto;
+}
 table {
     width: 100%;
     border-collapse: collapse;
@@ -270,16 +283,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;
 }

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();
+    }
+})

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>