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

2 files changed, 51 insertions, 0 deletions

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