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

6 files changed, 94 insertions, 33 deletions

diff --git a/rss_generator.py b/rss_generator.py
index f248003..eb4ca82 100644
--- a/rss_generator.py
+++ b/rss_generator.py
@@ -1,7 +1,7 @@
 import os
 from time import strftime, strptime, ctime
 from siteconfig import siteconfig
-from view_functions import is_hidden_path
+from view_functions import is_hidden_path, file_last_modified
 
 
 class RSS_Item:
@@ -32,7 +32,7 @@ class RSS_Item:
         self.TITLE = path.rsplit('.', 1)[0].split('/')[-1]
         self.FILE_TYPE = path.rsplit('.', 1)[1]
         self.DESCRIPTION = self.parse_file()
-        self.LAST_UPDATE = self.file_last_modified()
+        self.LAST_UPDATE = self.last_updated()
         self.URI = self.get_uri()
         self.LINK = siteconfig.rss_channel_config['LINK'] + self.URI
 
@@ -42,7 +42,7 @@ class RSS_Item:
         )
 
     def short_timestamp(self):
-        return strftime("%Y-%m-%d %H:%M %z", strptime(self.LAST_UPDATE))
+        return strftime("%Y-%m-%d %H:%M", strptime(self.LAST_UPDATE))
 
     def parse_file(self):
         """
@@ -75,8 +75,8 @@ class RSS_Item:
 
         return ''.join(description)
 
-    def file_last_modified(self):
-        return ctime(os.stat(self.FULL_PATH).st_ctime)
+    def last_updated(self):
+        return file_last_modified(self.FULL_PATH)
 
     def get_uri(self):
         # return everything after "./templates/"
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%;
+    }
+}
diff --git a/templates/base.html b/templates/base.html
index 7c6fb17..5ca253a 100644
--- a/templates/base.html
+++ b/templates/base.html
@@ -3,6 +3,7 @@
     <title>{{ domain }}/{{ title }}</title>
     <head>
         <meta http-equiv="Content-Type" content="text/html; charset=utf-8"/>
+        <meta name="viewport" content="width=device-width, initial-scale=1.0"/>
         {% block css%}
         <link rel="stylesheet" type="text/css" href="/static/main.css">
         {% endblock %}
@@ -16,7 +17,7 @@
         <b> <a href="/site/{{ dir }}">{{ dir }}/</a> |</b>
         {% endfor %}
         <!-- Add icons here -->
-        <a href="/feed.xml">
+        <a href="/feed.xml"target="_blank" rel="noopener noreferrer">
             <img src="https://icons.getbootstrap.com/assets/icons/rss-fill.svg">
         </a>
         </div>
@@ -24,11 +25,14 @@
         <div class="content">
             {% block content %}
             {% endblock %}
-            <h3>{{ errors }}</h3>
+            <h3 class="center">{{ errors }}</h3>
             {% if parent_dir != '/site/' %}
-            <h3><a href="{{ parent_dir }}">Go up to parent folder ({{ parent_dir }})</a></h3>
+            <h3 class="center"><a href="{{ parent_dir }}">Go up to parent folder ({{ parent_dir }})</a></h3>
             {% endif %}
         </div>
+        {% if last_update %}
+        <p>Last update: {{ last_update }}</p>
+        {% endif %}
         <div class="license">{% include 'site/license.html' %}</div>
         </center></body>
 </html>
diff --git a/templates/index.html b/templates/index.html
index 714db1c..c8356fe 100644
--- a/templates/index.html
+++ b/templates/index.html
@@ -1,19 +1,19 @@
 {% extends 'base.html' %}
 {% block content %}
-
+<center>
 {% if description %}
 {% include cur_path + '/.description' %}
 {% endif %}
 
 {% if dirs %}
-<h3>Topics</h3>
+<h3 class="center">Topics</h3>
 {% for d in dirs %}
 <li><a href="{{ cur_dir }}{{ d }}">{{ d }}</a></li>
 {% endfor %}
 {% endif %}
 
 {% if files %}
-<h3>File Listing</h3>
+<h3 class="center">File Listing</h3>
 {% for f in files %}
 <li><a href="{{ cur_dir }}{{ f }}">{{ f.rstrip('!') }}</a></li>
 {% endfor %}
@@ -24,5 +24,5 @@
 <li><a href="{{ l.split(',')[1] }}" target="_blank" rel="noopener noreferrer">{{l.split(',')[0]}}</a></li>
 {% endfor %}
 {% endif %}
-
+</center>
 {% endblock %}
diff --git a/view_functions.py b/view_functions.py
index f86952d..1131778 100644
--- a/view_functions.py
+++ b/view_functions.py
@@ -3,6 +3,7 @@ view_functions.py - defines functions called by views to display the correct dat
 about files and paths.
 """
 import os
+from time import strftime, strptime, ctime
 from siteconfig import siteconfig
 
 
@@ -18,6 +19,9 @@ def default_context():
     }
 
 
+def file_last_modified(path):
+    return ctime(os.stat(path).st_ctime)
+
 def index_dir(path):
     """
     index_dir - Given a directory at `path`, list it's contents,
diff --git a/views.py b/views.py
index 7a6f273..aed9f17 100644
--- a/views.py
+++ b/views.py
@@ -7,7 +7,7 @@ from flask import request, send_from_directory, abort
 from flask import render_template, render_template_string, make_response
 from siteconfig import siteconfig
 from server import app, cache
-from view_functions import default_context, index_dir, is_hidden_path
+from view_functions import *
 
 # bit of a hack.
 # Brackets don't play nicely with Jinja so instead of using .format,
@@ -56,6 +56,7 @@ def render_file(path):
         {
             'title': path.split('.')[0].upper(),
             'parent_dir': '/site/' + '/'.join(path.split('/')[:-1]),
+            'last_update': file_last_modified(abs_path),
         }
     )
     if os.path.isfile(abs_path):