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 .meta td b,
+.keys.big .shift td b {
+ display: none;
+}
+
/* tables */
table {
.row4 {margin-left: 7.5em} /* 10em / Δtd */
/* letter scripts columns to rows */
- .legend .glyphs:first-child td:not(td td) {
+ .legend .glyphs:first-child td {
display: table-row;
+ vertical-align: baseline;
}
.legend .glyphs td > table {
width: auto;
- display: inline-block;
- margin: 1px 0 1px 1ex;
- vertical-align: -6px;
+ display: inline;
+ margin-left: 1ex;
}
- .legend .glyphs td td {
+ .legend .glyphs:first-child td td {
margin: 2px;
+ display: inline-block;
+ width: auto;
}
@media (max-width: 61em) {