Infra: improve text readability and webpage performance (#3132)

Co-authored-by: Adam Turner <9087854+AA-Turner@users.noreply.github.com>

pep_sphinx_extensions/pep_theme/static/mq.css

@@ -2,25 +2,10 @@
 
 /* Media Queries */
 
-/* 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;
+        padding: 1rem;
     }
     section#pep-page-section > header > h1 {
         padding-right: 0;

pep_sphinx_extensions/pep_theme/static/style.css

@@ -61,11 +61,9 @@ img.invert-in-dark-mode {
 :root {color-scheme: light dark}
 html {
     overflow-y: scroll;
-    margin: 0;
-    line-height: 1.4;
-    font-weight: normal;
+    line-height: 1.5;
     font-size: 1rem;
-    font-family: "Source Sans Pro", Arial, sans-serif;
+    font-family: -apple-system, BlinkMacSystemFont, avenir next, avenir, segoe ui, helvetica neue, helvetica, Cantarell, Ubuntu, roboto, noto, arial, sans-serif;
 }
 body {
     margin: 0;
@@ -76,40 +74,27 @@ section#pep-page-section {
     padding: 0.25rem;
 }
 
-/* Reduce margin sizes for body text */
-p {margin: .5rem 0}
-
 /* Header rules */
 h1 {
     font-size: 2rem;
     font-weight: bold;
-    margin-top: 1.25rem;
-    margin-bottom: 1rem;
 }
 h2 {
     font-size: 1.6rem;
     font-weight: bold;
-    margin-top: 1rem;
-    margin-bottom: .5rem;
 }
 h3 {
     font-size: 1.4rem;
     font-weight: normal;
-    margin-top: 1rem;
-    margin-bottom: 0.5rem;
 }
 h4 {
     font-size: 1.2rem;
     font-weight: normal;
-    margin-top: .5rem;
-    margin-bottom: 0;
 }
 h5,
 h6 {
     font-size: 1rem;
     font-weight: bold;
-    margin-top: 0;
-    margin-bottom: 0;
 }
 
 /* Anchor link rules */
@@ -131,7 +116,6 @@ a:focus {
 blockquote {
     font-style: italic;
     border-left: 1px solid var(--colour-rule-strong);
-    margin: .5rem;
     padding: .5rem 1rem;
 }
 blockquote em {
@@ -145,7 +129,7 @@ cite {
 /* Code rules (code literals and Pygments highlighting blocks) */
 code,
 pre {
-    font-family: ui-monospace, "Cascadia Mono", "Segoe UI Mono", "DejaVu Sans Mono", Consolas, monospace;
+    font-family: Menlo, Consolas, Monaco, Liberation Mono, Lucida Console, monospace;
     font-size: 0.875rem;
     -webkit-hyphens: none;
     hyphens: none;
@@ -189,9 +173,8 @@ dl dd {
 hr {
     border: 0;
     border-top: 1px solid var(--colour-rule-light);
-    margin: 0;
 }
-/*Image rules */
+/* Image rules */
 img {
     max-width: 100%;
 }
@@ -201,13 +184,6 @@ a img {
 }
 
 /* List rules */
-ul,
-ol {
-    padding: 0;
-    margin: 0 0 0 1.5rem;
-}
-ul {list-style: square}
-ol.arabic {list-style: decimal}
 ol.loweralpha {list-style: lower-alpha}
 ol.upperalpha {list-style: upper-alpha}
 ol.lowerroman {list-style: lower-roman}
@@ -263,7 +239,6 @@ section#pep-page-section > header {
 }
 section#pep-page-section > header > h1 {
     font-size: 1.1rem;
-    line-height: 1.4;
     margin: 0;
     display: inline-block;
     padding-right: .6rem;
@@ -379,7 +354,15 @@ dl.footnote > dd {
 #pep-sidebar > h2 {
     font-size: 1.4rem;
 }
+#contents ol,
+#contents ul,
+#pep-sidebar ol,
 #pep-sidebar ul {
+    padding: 0;
+    margin: 0 0 0 1.5rem;
+}
+#pep-sidebar ul {
+    font-size: .9rem;
     margin-left: 1rem;
 }
 #pep-sidebar ul a {

pep_sphinx_extensions/pep_theme/templates/page.html

@@ -13,7 +13,6 @@
     <link rel="stylesheet" href="{{ pathto('_static/pygments.css', resource=True) }}" type="text/css" media="(prefers-color-scheme: light)" id="pyg-light">
     <link rel="stylesheet" href="{{ pathto('_static/pygments_dark.css', resource=True) }}" type="text/css" media="(prefers-color-scheme: dark)" id="pyg-dark">
     <link rel="alternate" type="application/rss+xml" title="Latest PEPs" href="https://peps.python.org/peps.rss">
-    <link href="https://fonts.googleapis.com/css2?family=Source+Sans+Pro:ital,wght@0,400;0,700;1,400&display=swap" rel="stylesheet">
     <meta name="description" content="Python Enhancement Proposals (PEPs)">
 </head>
 <body>