grid: auto-flow / 1fr 1fr;
clear: both;
}
-@media (max-width: 42em) {
- .section dl {
- grid: auto-flow / minmax(8em, 1fr) minmax(20em, 1fr);
- }
-}
.section dl > dt {
grid-column: 1;
text-align: right;
grid-column: 2;
text-align: left;
padding-left: 1em;
- margin: 0;
+ margin: 0 0 .5ex;
+}
+@media (max-width: 42em) {
+ .section dl {
+ grid: auto-flow / minmax(8em, 1fr) minmax(20em, 1fr);
+ }
+ dl > dd {
+ margin-bottom: 1ex; /* distinguish rows more as dts can wrap */
+ }
}
/* "keyboard" (list of keys) */
font-weight: normal; /* nice and subtle */
}
+/* enlarged keys */
+
+.keys.big td {
+ width: 1em;
+ min-width: auto;
+ height: 2.25ex;
+ font-size: 200%;
+ font-size: calc(7vmin - 4px); /* fit 12 keys to page */
+ overflow: visible;
+ position: relative;
+ padding: 0;
+ margin: 0 .2vw -1px;
+}
+
+/* override row alignments */
+.keys.big tbody {
+ font-size: calc(1.4vmin); /* enlarged td conversion */
+}
+.keys.big .row2 {margin-left: 7em}
+.keys.big .row3 {margin-left: 8em}
+.keys.big .row4 {margin-left: 10em}
+.keys.big .row0 {
+ display: none; /* headerless */
+}
+
+.keys.big td b {
+ position: absolute; /* overlay */
+ z-index: 1;
+ top: -1.2ex; /* halfway over shift */
+ left: 0;
+ right: 0;
+ font-size: 50%;
+ opacity: .5;
+ color: #FFF;
+ line-height: 2.25ex;
+}
+.keys.big.cmp td b,
+.keys.big .ctrl td b,
+.keys.big .meta td b,
+.keys.big .shift td b {
+ display: none;
+}
+
/* tables */
table {
.keys td.new {
border-style: dashed;
}
+.ext,
dl.legend dt.ext,
.keys td.ext {
opacity: .6;