Rewrite CSS to support scaling

This changes the layout to use the default font size with a reasonable
max width and margins around the body. Elements that would overflow on
narrow displays are changed to wrap (.author) or present a scroll bar as
necessary (figure, .verbatim, .fancyvrb). The properties on html and
body are set such that there is no full-document vertical scrolling.
Inline math is displayed in the same size as the surrounding text.

diff --git a/html.cfg b/html.cfg
index 8657127f440868d0b924f61b91a759c21b56c572..9211d4cb8c0a8555a173efd18dd7d51a83be2992 100644 (file)
--- a/html.cfg
+++ b/html.cfg
@@ -2,15 +2,31 @@
 
 \Configure{tableofcontents*}{chapter,section,subsection}
 
-\Css{* :not(img) {
-    max-width: 100\%;
-    width: 50vw; 
-    height: auto;
+\Css{html {
+    width: 100vw;
+    overflow-x: hidden;
+}}
+
+\Css{body {
+    max-width: 50rem;
+    box-sizing: border-box;
+    padding: 1rem;
     margin: 0 auto;
+    overflow-x: hidden;
+}}
+
+\Css{div.author {
+    white-space: normal;
+}}
+
+\Css{img.math {
+    height: 1rem;
+    vertical-align: top;
 }}
 
-\Css{* {
-    font-size: 1vw;
+\Css{figure, .fancyvrb, .verbatim {
+    margin-inline: 0;
+    overflow-x: auto;
 }}
 
 \Css{.ecrm-0500 { 
@@ -33,4 +49,4 @@
 }}
 
 \begin{document}
-\EndPreamble
\ No newline at end of file
+\EndPreamble