X-Git-Url: http://git.shiar.net/sheet.git/blobdiff_plain/fd25d20e6ae7a77338a781934aa72f04251ee745..b4493558a0a37d5288191d2f5417b5cd9e88320a:/base.css diff --git a/base.css b/base.css index 73241da..c349bde 100644 --- a/base.css +++ b/base.css @@ -243,6 +243,47 @@ dl.legend dt, 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 { @@ -960,6 +1001,8 @@ body .magic-perma { .keys td { position: relative; /* hides overflow */ width: 4.5em; + min-width: 6.5vw; + min-width: calc(7.7vw - 8px); } .keys td b, .keys .meta td b, @@ -978,17 +1021,19 @@ body .magic-perma { .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) {