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 {
.u-invalid {background: #BBB} /* invalid, impossible */
/* foreground representation */
-#digraphs .u-l3 {color: #080} /* partial */
-#digraphs .u-l3.ex {color: #4C0} /* experimental */
-#digraphs .u-l2 {color: #A44; color: rgba(128, 0, 0, .6)} /* unofficial proposal */
-#digraphs .u-l1 {color: #D00; color: rgba(255, 0, 0, .8)} /* minimal or invalid */
+#digraphs .u-l4 {color: #080} /* partial */
+#digraphs .u-l5 {color: #4C0} /* experimental */
+#digraphs .u-l2 {color: #A44; color: rgba(128, 0, 0, .6)} /* unofficial */
+#digraphs .u-l1 {color: #D00; color: rgba(255, 0, 0, .8)} /* missing */
/* support percentage (browser cells) */
.p0 {opacity: .6}
.l3:hover {background: #FF8}
.l4:hover {background: #CF8}
.l5:hover {background: #8F8}
-.u-l3:hover {outline: 1px solid #080}
-.u-l3.ex:hover {outline: 1px solid #8F0}
+.u-l4:hover {outline: 1px solid #080}
+.u-l5:hover {outline: 1px solid #8F0}
.u-l2:hover {outline: 1px solid #800}
.u-l1:hover {outline: 1px solid #F00}
.keys td.new {
border-style: dashed;
}
+.ext,
dl.legend dt.ext,
.keys td.ext {
opacity: .6;