display: inline-block;
text-align: left;
}
+body > pre {
+ width: 78ch;
+ tab-size: 4;
+ -moz-tab-size: 4;
+ padding: 0 1em;
+ border-width: 0 1px;
+ border-style: solid;
+}
h2 small {
position: absolute; /* side note; do not influence alignment */
table.keys {
display: block;
- width: 82.5em; /* 12 * (2px + 1px + 6.2em + 1px + 2px) + 8em*/
+ width: 82.5em; /* 12 * td(2px + 1px + 6.2em + 1px + 2px) + 8em */
// padding-right: 72px;
border-spacing: 0;
border-collapse: collapse;
break-inside: avoid;
-webkit-column-break-inside: avoid; /* webkit */
page-break-inside: avoid; /* moz */
+ overflow: hidden; /* webkit workaround */
}
#index nav a {
display: inline-block;
ul.legend-set {display: none} /* current options only relevant on dynamic media */
}
+/* terse optimisation */
+
+@media (max-width: 79em) {
+ .keys td {
+ position: relative; /* hides overflow */
+ width: 4.5em;
+ }
+ .keys td b,
+ .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%;
+ line-height: 2.5ex;
+ opacity: .5;
+ color: #FFF;
+ }
+ table.keys {
+ width: 62.1em; /* 82.5em - 12 * Δtd(6.2em - 4.5em) */
+ }
+}
+