[PATCH htdocs] tighten up margins on smaller devices

[Mike Frysinger <vapier@gentoo.org>]

Scale down the font size and margins on headers on smaller devices.
The defaults cause the GDB title to take up most of the screen, and
then the links & page intro take up the rest.  Scale down the font
so that it's still relatively larger, and tighten up the margins.
The content is still comfortably readable.

Similarly, tighten the spacing on lists -- the default can quickly
suck up horizontal space.  The result is still clear how things are
broken up, but given more space for reading content.
---
 css/site.css | 44 ++++++++++++++++++++++++++++++++++++++++++++
 1 file changed, 44 insertions(+)

diff --git a/css/site.css b/css/site.css
index 886dcccb3b0a..985fbde6e888 100644
--- a/css/site.css
+++ b/css/site.css
@@ -3,6 +3,7 @@
 body {
   background-color: #FFF;
   color: #000;
+  margin: 0 0.5em 0 0.5em;
 }
 
 a:link {
@@ -43,3 +44,46 @@ a:visited {
 img#archer-logo {
   max-width: 25%;
 }
+
+/* This is ~768px with 16pt font.  */
+@media only screen and (max-width: 50em) {
+  h1 {
+    font-size: 1.5em;
+  }
+
+  h2 {
+    font-size: 1.3em;
+  }
+
+  h3 {
+    font-size: 1.1em;
+  }
+
+  h1, h2, h3, h4 {
+    margin: 0.5em 0 0.5em 0;
+  }
+}
+
+/* This is ~480px with 16pt font.  */
+@media only screen and (max-width: 30em) {
+  h1 {
+    font-size: 1.3em;
+  }
+
+  h2 {
+    font-size: 1.2em;
+  }
+
+  ul {
+    padding-left: 1em;
+  }
+
+  dd {
+    margin-left: 1em;
+  }
+
+  /* How many spaces-per-tab.  */
+  pre {
+    tab-size: 4;
+  }
+}
-- 
2.43.0