X-Git-Url: http://git.shiar.net/sheet.git/blobdiff_plain/fd25d20e6ae7a77338a781934aa72f04251ee745..203c1ba6471f9fc4d32cfd4582f4e33219efc54d:/base.css

diff --git a/base.css b/base.css
index 73241da..061ca16 100644
--- a/base.css
+++ b/base.css
@@ -138,11 +138,6 @@ h2 small {
 	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;
@@ -154,7 +149,15 @@ dl > dd {
 	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) */
@@ -243,6 +246,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 +1004,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 +1024,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) {