From: Mischa POSLAWSKY <perl@shiar.org>
Date: Fri, 16 Mar 2018 21:47:24 +0000 (+0100)
Subject: keys: flatten right legend columns on small screens
X-Git-Tag: v1.12~93
X-Git-Url: http://git.shiar.nl/sheet.git/commitdiff_plain/a5c365f7a39bc9e8041aa31b04dfabe680922b4d

keys: flatten right legend columns on small screens
---

diff --git a/base.css b/base.css
index f20f167..919f64e 100644
--- a/base.css
+++ b/base.css
@@ -770,6 +770,30 @@ nav > .section {
 		.row3 {margin-left: 4em}   /* 8em / Δtd */
 		.row4 {margin-left: 5em}   /* 10em / Δtd */
 	}
+
+	@media (max-width: 42em) {
+		/* flatten right legend column on mobile */
+		.help > * {
+			display: table-row;
+			width: auto;
+		}
+		ul.legend-set {
+			clear: left;
+		}
+		.right dl.legend {
+			margin-right: 0;
+			margin-left: 6.4em;
+		}
+		.right dl.legend dt {
+			margin-right: 0;
+			margin-left: -6.4em;
+			float: left;
+			clear: left;
+		}
+		.right dl.legend dd {
+			float: left;
+		}
+	}
 }
 
 /*