From a5c365f7a39bc9e8041aa31b04dfabe680922b4d Mon Sep 17 00:00:00 2001
From: Mischa POSLAWSKY <perl@shiar.org>
Date: Fri, 16 Mar 2018 22:47:24 +0100
Subject: [PATCH] keys: flatten right legend columns on small screens

---
 base.css | 24 ++++++++++++++++++++++++
 1 file changed, 24 insertions(+)

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;
+		}
+	}
 }
 
 /*
-- 
2.30.0