From 5d7d9d02ab39133a7071d8daabf810365911b765 Mon Sep 17 00:00:00 2001
From: Chris Hofstaedtler <ch@grml.org>
Date: Thu, 21 Nov 2024 22:38:44 +0100
Subject: [PATCH] css: somewhat more phone-friendly

---
 assets/css/main.css | 57 +++++++++++++++++++++++++++++++++------------
 1 file changed, 42 insertions(+), 15 deletions(-)

diff --git a/assets/css/main.css b/assets/css/main.css
index 609a849..60dcb53 100644
--- a/assets/css/main.css
+++ b/assets/css/main.css
@@ -12,32 +12,27 @@ html{color:#000;background:#FFF}body,div,dl,dt,dd,ul,ol,li,h1,h2,h3,h4,h5,h6,pre
 /* http://alumnos.elo.utfsm.cl/~osrehe - thx!                                  */
 
 @media all {
-  html {background-color: #FFDA62; height: 100%; font-size: 10pt; }
+  /* default, including small devices (phones). Note they get a yellow background! */
+  html { background-color: #FFDA62; height: 100%; font-size: 11pt; }
   body { font-family: verdana, tahoma, helvetica, arial, sans-serif; background-color:#FFDA62; margin: 0; padding: 0; height:100%; }
-  div.container { width: 80%; text-align: left; background-color:#FFFFFF; margin: 0px auto 0px auto; border-width: 0 1px 0 1px; border-color: #E5E5E5; border-style: solid; overflow: auto; height: 100%; }
-  cite {font-size: 80%}
 
-  div.copyright { font-size: 80%; color: #666; padding: 1em }
-  div.copyright a { color: navy; }
+  cite {font-size: 80%}
 
   b,strong { font-weight: bold; }
   i,em { font-style: italic; }
 
-  header { font-size: 10pt; height: 5em; padding-top: 2.7em; padding-left: 1.1em; }
+  header { font-size: 10pt; height: 5em; padding-top: 1.1em; padding-left: 1.1em; line-height: 100%; }
   header a { color: navy; text-decoration: none; }
   header h1 { color: navy; font-size: 240%; line-height: 100%; font-weight: bold; }
   header h2 { color: navy; font-size: 110%; line-height: 130%; font-weight: bold; }
   header #logo { float: left; }
 
   .mainandnav { display: flex; flex-flow: row wrap; column-gap: 1em; }
-  .mainandnav main { width: auto; flex: 1 100%; }
-  .mainandnav aside { padding-top: 2em; flex: 1 auto; }
-  @media all and (min-width: 800px) {
-    .mainandnav main { flex: 14 0; order: 1; }
-    .mainandnav aside { order: 2; }
-  }
+  .mainandnav main { width: auto; flex: 1 100%; order: 2; }
+  .mainandnav aside { padding-top: 2em; flex: 1 auto; order: 1; }
 
-  main { padding: 0 1em 0 1em; }
+  aside { padding: 0 1em 0 1em; }
+  main { padding: 0 1em 0 1em; line-height: 130%; }
 
   main h1 {color:navy; font-size: 200%; font-weight:bold; padding-top: 1.5em; padding-bottom: 0.2em; }
   main h2, main h2 a {color:black; font-size: 120%; font-weight:bold; padding-top: 0.5em; padding-bottom: 0.2em; text-decoration: none; }
@@ -64,9 +59,41 @@ html{color:#000;background:#FFF}body,div,dl,dt,dd,ul,ol,li,h1,h2,h3,h4,h5,h6,pre
   main blockquote { font-family: serif; font-size: 120%; padding-left: 2em; font-style: italic; }
   main .postlist-item { padding-bottom: 2em; }
 
-  main ul.pagination { text-align: center; }
-  main ul.pagination li { display: inline; }
+  main ul.pagination { text-align: center; font-size: 120%; }
+  main ul.pagination li { display: inline; margin: 0 1em 0 0; }
+  /* need the space on small devices */
+  main ul.pagination li.disabled { display: none; }
+
+  footer { padding: 2em 1em 1em 1em; }
+  footer .copyright { color: #666; }
+  footer .copyright a { color: navy; }
+}
+
+@media all and (max-width: 800px) {
+  aside h2 { display: inline; }
+  aside h2:after { content: ": "; }
+  aside nav, aside ul, aside ul li { display: inline; }
+  aside nav { padding-bottom: 0; }
+  /* hide "Subscribe" (RSS) group - what a hack */
+  aside h2:nth-of-type(3), aside nav:nth-of-type(3) { display: none; }
+}
+
+@media all and (min-width: 801px) {
+  /* assume tablet or desktop */
+
+  .mainandnav main { flex: 14 0; order: 1; }
+  .mainandnav aside { order: 2; }
+
+  div.container { width: 80%; text-align: left; background-color:#FFFFFF; margin: 0px auto 0px auto; border-width: 0 1px 0 1px; border-color: #E5E5E5; border-style: solid; overflow: auto; height: 100%; }
+  header { padding-top: 2.7em; }
+
+  footer { font-size: 80%; }
+
+  /* undo space saving */
+  main ul.pagination li.disabled { display: inline; }
 
+  /* reset padding set in media default */
+  aside { padding: 0; }
   aside h2 { font-weight: bold; color: #999; line-height:2em; }
   aside nav { padding-bottom: 2em; }
 }