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

1 files changed, 72 insertions, 20 deletions

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