Improve readability on small devices, especially posts, headers and lists

3 files changed, 55 insertions, 4 deletions

diff --git a/_post.html b/_post.html
index 51b24cd..c00cff8 100644
--- a/_post.html
+++ b/_post.html
@@ -2,13 +2,13 @@
 
 {% block content %}
 <div id="blog-show">
+  <p id="back-link">
+    <a href="{{ site.url }}/{{ entry.path.split("/")[0] }}">Zurück zur Übersicht</a>
+  </p>
+  <div id="post-date"><h1><small>{{ entry.date.strftime('%d %B %Y ') }}</small></h1></div>
   <h1>
     {{ entry.title|typogrify }}
-    <small>{{ entry.date.strftime('%d %B %Y ') }}</small>
   </h1>
-  <p>
-    <a href="{{ site.url }}/{{ entry.path.split("/")[0] }}">Zurück zur Übersicht</a>
-  </p>
 
   {{ entry.body }}
 
diff --git a/static/css/main.css b/static/css/main.css
index cb2ec41..3cd2462 100644
--- a/static/css/main.css
+++ b/static/css/main.css
@@ -142,6 +142,9 @@ nav a:hover {
 
 #blog-show small {
   float: right;
+  display: block;
+  vertical-align: top;
+  margin-left: 0.8em;
 }
 
 #howtos-index li {
@@ -161,6 +164,16 @@ nav a:hover {
   width: 140px;
 }
 
+#back-link {
+  margin-top: 10px;
+}
+
+/* Fix lists */
+dl, li p {
+  margin-top: 0;
+  margin-bottom: 0;
+}
+
 pre {
     white-space: pre !important;
 }
diff --git a/static/css/responsive.css b/static/css/responsive.css
index 0bb9f07..001b795 100644
--- a/static/css/responsive.css
+++ b/static/css/responsive.css
@@ -56,3 +56,41 @@
         margin: 0.5em;
     }
 }
+
+@media (max-width: 527px) {
+    h1 {
+        font-size: 20px;
+        margin: 6px 0px 10px 0px;
+    }
+
+    h2 {
+        font-size: 16px;
+        line-height: 1.2;
+        margin: 8px 0px 4px 0px;
+    }
+
+    h3 {
+        font-size: 14px;
+        line-height: 1.2;
+        margin: 6px 0px 4px 0px;
+    }
+
+    h4 {
+        font-size: 14px;
+    }
+
+    h1, h2, h3, h4, h5, h6 {
+        line-height: 1.2;
+    }
+
+    #post-date h1 {
+        margin: 0.0em 0.0em 0.0em 0.0em;
+    }
+
+    #blog-show small {
+        float: none !important;
+        margin: 0.0em 0em 0.0em 0em !important;
+        font-size: 16px;
+        line-height: 20px
+    }
+}