[PATCH htdocs 2/2] style: tighten up spacing on smaller devices

[Mike Frysinger]

The current padding & margins work well when on a larger screen --
it provides a very comfortable view.  However, on smaller screens,
especially on mobile devices, the large amount of whitespace ends
up crowding out meaningful content leading to a lot of scrolling.

Scale down the spacing on smaller screens to maximize content.
The focus is on removing "extra" padding around elements rather
then padding among the content itself (e.g., line height and
paragraph breaks).  Now reading on a phone is very comfortable.
---
 glibc.css | 28 ++++++++++++++++++++++++++++
 1 file changed, 28 insertions(+)

diff --git a/glibc.css b/glibc.css
index 04f8f243fce5..40f6d6e2f8d7 100644
--- a/glibc.css
+++ b/glibc.css
@@ -146,3 +146,31 @@ pre.keys {
 	background:#eee;
 	width:80%;
 }
+
+/* This is ~768px with 16pt font.  */
+@media only screen and (max-width: 50em) {
+	body {
+		margin: 0;
+	}
+
+	#banner, #footer, #centercontent, #menucontent {
+		margin-left: 0;
+		margin-right: 0;
+	}
+
+	#banner {
+		min-height: 1em;
+	}
+
+	#centercontent {
+		padding: 0;
+	}
+
+	#menucontent {
+		padding: 5px;
+	}
+
+	#banner h1 {
+		font-size: 1.3em;
+	}
+}
-- 
2.43.0