From ec6feec81ebab89dc6779027649b1ce517042d22 Mon Sep 17 00:00:00 2001
From: mjfernez <mjf@mjfer.net>
Date: Mon, 1 Nov 2021 23:56:07 -0400
Subject: Optimize mobile CSS. Add last update time default

This commit optimizes the mobile and web css to be responsive on zoom
(in supported browsers) and responsive on mobile screens. This is a
minimal optimization and lot can be done to improve it, particularly
for wider screen devices like tablets

This also adds the last update time to all views (except home).
Function logic was moved to view functions to support this and
rss_generator was changed to depend on it
---
 static/main.css | 92 ++++++++++++++++++++++++++++++++++++++++++++-------------
 1 file changed, 72 insertions(+), 20 deletions(-)

(limited to 'static/main.css')

diff --git a/static/main.css b/static/main.css
index 9b8c6db..4db48f9 100644
--- a/static/main.css
+++ b/static/main.css
@@ -1,48 +1,100 @@
 h1,h2,h3,h4 {
     text-align: center;
-    margin: 0.5em auto;
+    margin: 0.25em auto;
+    white-space: normal;
+}
+h3,h4 {
+    text-align: justify;
+    margin: 0.25em auto;
+}
+/* class to optionally center h3 when we want it */
+h3.center {
+    text-align: center;
+}
+h1 {
+    font-size: 200%;
+    color: #000000;
+}
+h2 {
+    font-size: 175%;
+    color: #404040;
+}
+h3 {
+    font-size: 150%;
+    color: #808080;
+}
+h4 {
+    font-size: 125%;
+    color: #bfbfbf;
 }
 body {
-    margin-left: auto;
-    margin-right: auto;
+    margin: 0 auto;
     text-align: center;
     font-family: Courier, Monospace;
     word-wrap: normal;
+    white-space: normal;
+    font-size: 120%;
 }
-/* some Stallman trickery for making mobile text bigger */
-@media screen and (max-device-width: 480px) {
-    body {
-        font-size: 200%
-    }
-    .license {
-        font-size: 75%;
-    }
-}
+
 .navbar {
     text-align: center;
-    max-width: 1000px;
+    max-width: 95%;
     display: block;
 }
 .content {
     text-align: justify;
-    max-width: 500px;
+    max-width: 85%;
     display: inline-block;
 }
 .license {
-    font-size: 65%;
+    font-size: 50%;
     text-align: center;
-    max-width: 350px;
+    max-width: 35%;
     display: block;
 }
+/* Use for long text which doesnt wrap nicely */
+.long {
+    word-wrap: break-word;
+}
 p {
-    margin-top: 0.75em;
-    margin-bottom: 0.75em;
+    margin-top: 1.5%;
+    margin-bottom: 1.5%;
+}
+small {
+    font-size: 75%;
+}
+code {
+    display: inline-block;
+    font-size: 125%;
+    background-color: #d8d8d8;
+    white-space: pre-wrap;
+    word-wrap: break-all;
 }
-
 table {
     border-spacing: 0 10px;
 }
 td {
     text-align: left
 }
-
+img {
+    max-width: 100%;
+    height: auto;
+    width: auto;
+}
+/*mobile*/
+@media screen and (max-device-width: 480px) {
+        body {
+        max-width: 100%;
+        font-size: 90%;
+        }
+        .license {
+        font-size: 0;
+        }
+        p {
+        margin-top: 5%;
+        margin-bottom: 5%;
+        }
+    code.long {
+        font-size: 65%;
+    }
+}
-- 
cgit v1.2.3