Better article rendering style on small screens

madblog/static/css/blog.css

@@ -16,6 +16,12 @@ main .content code, .codehilite {
   font-size: .85em;
 }
 
+@media screen and (max-width: 767px) {
+  main {
+    font-size: 0.9em;
+  }
+}
+
 a:hover {
   opacity: 0.7;
 }

madblog/static/css/common.css

@@ -95,7 +95,18 @@ main {
   display: flex;
   flex-direction: column;
   align-items: center;
-  padding: 0 2em;
+}
+
+@media screen and (max-width: 767px) {
+  main {
+    padding: 0 0.75em;
+  }
+}
+
+@media screen and (min-width: 768px) {
+  main {
+    padding: 0 2em;
+  }
 }
 
 h1 {