keys: lower background letters in portrait styling

[sheet.git] / base.css

diff --git a/base.css b/base.css
index 9d01449d11f38be02004abe0252a91902babecaa..e7c9105bac3076f5aa2a7d727f242991a1ade356 100644 (file)
--- a/base.css
+++ b/base.css
@@ -732,9 +732,9 @@ nav > .section {
                width: 4.5em;
        }
        .keys td b,
-       .keys.meta td b,
-       .keys.ctrl td b,
-       .keys.lead td b { /* leading chars always fit */
+       .keys .meta td b,
+       .keys .ctrl td b,
+       .keys .lead td b { /* leading chars always fit */
                position: absolute; /* background */
                right: 0; /* least overlap in corner */
                font-size: 250%;
@@ -745,5 +745,37 @@ nav > .section {
        table.keys {
                width: 62.1em; /* 82.5em - 12 * Δtd(6.2em - 4.5em) */
        }
+       @media (max-width: 61em) {
+               .keys td {
+                       width: 3em;
+                       height: 6.75ex; /* 3 lines */
+                       font-size: 80%;
+               }
+               .keys td b,
+               .keys .meta td b,
+               .keys .ctrl td b,
+               .keys .lead td b {
+                       line-height: 4ex;
+               }
+
+               table.keys {
+                       width: 37em; /* (12 * td(3em + 6px) + 8em) * 80% */
+               }
+       }
 }
 
+/*
+@media screen and (orientation: portrait) and (max-width: 62em) {
+       body table.keys,
+       #rows {
+               margin-top: 1ex;
+               transform: rotate(90deg);
+               transform-origin: top left;
+               width: 68em;
+               height: 37em;
+               margin-left: 40em;
+               margin-bottom: 30em;
+               font-size: 80%;
+       }
+}
+*/