Finally fix CSS issues

assets/css/blog.css

@@ -1,3 +1,7 @@
+* {
+    box-sizing: border-box;
+}
+
 img {
     /* Prevent images in blog posts from getting too big */
     max-width: 800px;
@@ -20,6 +24,10 @@ h1, h2, h3, h4 {
     max-width: 800px;
 }
 
+.post-list-item-title {
+    color: #3498db;
+}
+
 .post {
     display: block;
     max-width: 1000px;
@@ -33,7 +41,21 @@ h1, h2, h3, h4 {
     font-size: 21px;
 }
 
+.text-content {
+    max-width: 1000px;
+}
+
 @media only screen and (max-width: 768px) {
+    .page-title {
+        /* The page header title otherwise overflows the page on small screens */
+        font-size: 8vw;
+    }
+
+    .text-content {
+        /* Otherwise the page content overflows the page */
+        max-width: 100%;
+    }
+
     .text {
         /* A smaller font looks better on smaller devices */
         font-size: 19px;
@@ -53,12 +75,22 @@ h1, h2, h3, h4 {
     }
 }
 
-.post-title {
-    color: #3498db;
-}
-
 code {
     display: inline-block;
-    max-width: 100%;
+    padding: 0 3px;
-    overflow-y: auto;
+    border-radius: 3px;
+
+    background-color: black;
+    line-height: 1.5;
+}
+
+pre > code {
+    background-color: black;
+    line-height: 1.5;
+    border-radius: 3px;
+
+    padding: 10px;
+
+    width: 100%;
+    overflow-x: auto;
 }

layout/item.html

@@ -1,6 +1,6 @@
 <div class="horizontal-center">
     <div class="post-list-item">
-        <h2><a class="post-title" href="/{{ slug }}.html">{{ title }}</a></h2>
+        <h2><a class="post-list-item-title" href="/{{ slug }}.html">{{ title }}</a></h2>
 
         <p><b>&gt; {{ date }}</b></p>
 

layout/post.html

@@ -14,6 +14,11 @@
             If you have any questions or comments, then feel free to send me an email
             (Preferably with <a href="{{ email_gpg_url }}">GPG encryption</a> to
             {{ email_user }} [weird "a" with a circle] {{ email_domain }}.
+
+            <p>
+                This post is signed using my <a href="{{ email_gpg_url }}">public key</a>.
+                See <a href=/verify.html>here</a> for more information.
+            </p>
         </article>
     </div>
 </div>