Improve design on small screens (with a tiny bit of responsiveness)

_src/page-template.html

@@ -32,7 +32,7 @@
       <header>
         <nav role="navigation" class="navigation-bar">
           <ul class="navigation-items left">
-            <li><a href="/"><h1>Alexis King</h1></a></li>
+            <li id="blog-title-header"><a href="/"><h1>Alexis King</h1></a></li>
           </ul>
           <ul class="navigation-items center"></ul>
           <ul class="navigation-items right">

scss/_code.scss

@@ -19,7 +19,11 @@ pre code, table.sourcetable pre {
 
 pre code {
   display: block;
+}
+
+pre code, div[class^='brush: '] {
   width: 100%;
+  overflow: auto;
 }
 
 table.sourcetable {

scss/application.scss

@@ -28,6 +28,7 @@ html, body {
 
 #page-content > section[role=main] {
   flex: 1;
+  padding: 0 30px;
 
   & > .content {
     margin: 0 auto;
@@ -49,6 +50,13 @@ html, body {
   }
 }
 
+// hide the blog title in the navbar on small screen sizes
+@media (max-width: 550px) {
+  #blog-title-header {
+    display: none;
+  }
+}
+
 #page-content > footer {
   background-color: $color-primary;
   color: $text-color-light;