keys: flatten right legend columns on small screens

[sheet.git] / base.css

diff --git a/base.css b/base.css
index f20f167b3a9f184b95a5dc674d2118cd2e4c72ae..919f64e889db570613b097b39c066eb5a533c7fe 100644 (file)
--- a/base.css
+++ b/base.css
@@ -770,6 +770,30 @@ nav > .section {
                .row3 {margin-left: 4em}   /* 8em / Δtd */
                .row4 {margin-left: 5em}   /* 10em / Δtd */
        }
+
+       @media (max-width: 42em) {
+               /* flatten right legend column on mobile */
+               .help > * {
+                       display: table-row;
+                       width: auto;
+               }
+               ul.legend-set {
+                       clear: left;
+               }
+               .right dl.legend {
+                       margin-right: 0;
+                       margin-left: 6.4em;
+               }
+               .right dl.legend dt {
+                       margin-right: 0;
+                       margin-left: -6.4em;
+                       float: left;
+                       clear: left;
+               }
+               .right dl.legend dd {
+                       float: left;
+               }
+       }
 }
 
 /*