From: Mischa POSLAWSKY <perl@shiar.org>
Date: Sun, 18 Jun 2017 07:56:56 +0000 (+0200)
Subject: keys: even smaller keyboard style for mobile
X-Git-Tag: v1.11~35
X-Git-Url: http://git.shiar.nl/sheet.git/commitdiff_plain/61fa0d2d3c57ee17fb43cd8b6f8b5fabc4b69613

keys: even smaller keyboard style for mobile

Make keys 3em wide but 3 lines high to support phone browsers in portrait.
Reduces width by nearly 40% over terse (within 600px without scaling).
---

diff --git a/base.css b/base.css
index 9d01449..b29b024 100644
--- a/base.css
+++ b/base.css
@@ -745,5 +745,30 @@ nav > .section {
 	table.keys {
 		width: 62.1em; /* 82.5em - 12 * Δtd(6.2em - 4.5em) */
 	}
+	@media (max-width: 61em) {
+		.keys td {
+			width: 3em;
+			height: 6.75ex; /* 3 lines */
+			font-size: 80%;
+		}
+		table.keys {
+			width: 37em; /* (12 * td(3em + 6px) + 8em) * 80% */
+		}
+	}
 }
 
+/*
+@media screen and (orientation: portrait) and (max-width: 62em) {
+	body table.keys,
+	#rows {
+		margin-top: 1ex;
+		transform: rotate(90deg);
+		transform-origin: top left;
+		width: 68em;
+		height: 37em;
+		margin-left: 40em;
+		margin-bottom: 30em;
+		font-size: 80%;
+	}
+}
+*/