CSS fixes, incl. scaling layout for small screens.

sanic/pages/styles/BasePage.css

@@ -1,3 +1,4 @@
+/** BasePage **/
 html {
     font: 16px sans-serif;
     background: #eee;
@@ -13,13 +14,14 @@ body>* {
     padding: 1rem 2vw;
 }
 
-@media (max-width: 1200px) {
+@media (max-width: 1000px) {
     body>* {
         padding: 0.5rem 1.5vw;
     }
 
-    body {
-        font-size: 1rem;
+    html {
+        /* Scale everything by rem of 6px-16px by viewport width */
+        font-size: calc(6px + 10 * 100vw / 1000);
     }
 }
 

sanic/pages/styles/DirectoryPage.css

@@ -1,3 +1,4 @@
+/** DirectoryPage **/
 #breadcrumbs>a:hover {
     text-decoration: none;
 }

sanic/pages/styles/ErrorPage.css

@@ -1,15 +1,13 @@
-/* ErrorPage */
+/** ErrorPage **/
 summary { color: #888; }
 
-
-/* TraceRite CSS: read from tracerite.html.style: */
+/** TraceRite **/
 :root {
   --tracerite-var: #8af;
   --tracerite-type: #5c8;
   --tracerite-val: #8af;
   --tracerite-tab: #aaaa;
 }
-/* CSS reset */
 .tracerite,
 .tracerite * {
   margin: 0;
@@ -17,6 +15,7 @@ summary { color: #888; }
   outline: none;
   box-sizing: border-box;
   overflow: hidden;
+  font: inherit;
 }
 .tracerite h3 {
   margin: 0;