This Site Should Look Better On Mobile Devices

Is mobile first design still a thing? Either way, this site should be easier to read on a mobile device. Font sizes have been slightly reduces on smaller screens and a little extra padding has been added for a bit more breathing room. The diff below shows the changes. It's on github as well.

diff --git a/static/css/main.css b/static/css/main.css                                              
index 9566def..f27cc03 100644
--- a/static/css/main.css
+++ b/static/css/main.css
@@ -3,6 +3,11 @@ html, body {
 }


+header, main, footer {
+    box-sizing: border-box;
+}
+
+
 header {
     color: #262E2E;
     width: 600px;
@@ -128,17 +133,23 @@ footer a {

 /* Responsive Stuff */
 @media only screen and (max-width: 600px) {
-    html, body {
-       padding: 0px 20px;
-    }
-
     header,
     main,
     footer {
        width: 100%;
     }

+    h1 {
+       font-size: 24px;
+    }
+
+    main {
+       padding: 10px 15px;
+       font-size: 16px;
+    }
+
     header {
        padding: 0;
     }
+
 }

Slowly this little site is taking shape. Even though I'm categorizing these posts the theme bit is unfinished. Pelican comes with a categories page out of the box, and the theme seems to handle it well, but I think it could use some work. Also, what's the difference between categories and tags? I'll have to read up more on that. Maybe this would be a good starting point.

Also, I need to read more about S3 and how to get this site behind TLS for great good. Perhaps that's for a future meta post.

I think most of this is going to be a lot me thinking out loud but hopefully some structure will arrive in the midst. Recently I finished the Algorithmic Toolbox course with a grade of 85.8%. Not terrible but not great either. The important part is that I learned a few things of which should be written down before I forget.