diff mbox series

[htdocs] tighten up margins on smaller devices

Message ID 20231216021029.22184-1-vapier@gentoo.org
State New
Headers
Series [htdocs] tighten up margins on smaller devices |

Checks

Context Check Description
linaro-tcwg-bot/tcwg_gdb_build--master-aarch64 fail Patch failed to apply
linaro-tcwg-bot/tcwg_gdb_build--master-arm fail Patch failed to apply

Commit Message

Mike Frysinger Dec. 16, 2023, 2:10 a.m. UTC 
  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(+)

Comments

Tom Tromey Dec. 22, 2023, 3:50 p.m. UTC | #1 
>>>>> "Mike" == Mike Frysinger <vapier@gentoo.org> writes:

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

Mike> Similarly, tighten the spacing on lists -- the default can quickly
Mike> suck up horizontal space.  The result is still clear how things are
Mike> broken up, but given more space for reading content.

Seems fine to me fwiw.

Tom
diff mbox series

Patch

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;
+  }
+}