diff --git a/pep_sphinx_extensions/pep_theme/static/mq.css b/pep_sphinx_extensions/pep_theme/static/mq.css index c800e5d925b..360eb372d60 100644 --- a/pep_sphinx_extensions/pep_theme/static/mq.css +++ b/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 { diff --git a/pep_sphinx_extensions/pep_theme/static/style.css b/pep_sphinx_extensions/pep_theme/static/style.css index d4c643312ee..6a169fa5835 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; @@ -32,8 +31,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 */ @@ -41,7 +39,6 @@ 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; } 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 @@