Add blog post list and placeholder blog post

• add blog post list
• add css specificially for the blog and projects pages
• make layouts more modular for including different CSS on each page
• use HTML for directory pages for better use with Liquid

css/style.scss

@@ -3,8 +3,8 @@
 @import 'util';
 @import 'colors';
 @import 'fonts';
-@import 'mobile';
-
+$mobile-header-height: 70px;
+$mobile-width: {{ site.mobile-width }};
 
 .blue {
     fill: $blue;
@@ -46,19 +46,19 @@
     background-color: $dark-magenta;
 }
 
-
 ::selection {
     color: white;
-    background: $orange; /* WebKit/Blink Browsers */
+    background: $orange;
+    /* WebKit/Blink Browsers */
 }
 
 ::-moz-selection {
     color: white;
-    background: $orange; /* WebKit/Blink Browsers */
+    background: $orange;
+    /* WebKit/Blink Browsers */
 }
 
-
-html{
+html {
     margin: 0;
     background-color: $margin;
 }
@@ -67,43 +67,33 @@ body {
     background-color: $background;
     max-width: 800px;
     z-index: 0;
-    
     margin-left: auto;
     margin-right: auto;
     margin-top: 0;
     height: 100%;
-
-
-    @media screen and (min-width: $mobile-width){
+    @media screen and (min-width: $mobile-width) {
         box-shadow: 0 0 4px 5px $shadow;
         -moz-box-shadow: 0 0 4px 5px $shadow;
-     -webkit-box-shadow: 0 0 4px 5px $shadow;
+        -webkit-box-shadow: 0 0 4px 5px $shadow;
     }
 }
 
-
 // HEADER
-
-
 header {
-    margin:0;
+    margin: 0;
     padding: 10px;
     font-family: $title-font;
     color: $title-text;
     font-weight: normal;
     font-size: 28px;
-
     a {
         color: inherit;
         text-decoration: none;
     }
-
     a:hover {
         color: inherit;
         text-decoration: underline;
     }
-
-
     .slash {
         display: inline-block;
         vertical-align: -10%;
@@ -111,12 +101,19 @@ header {
             size: 36px;
         }
     }
-
 }
+
 main {
     display: flex;
 }
 
+hr {
+    border-width: 0;
+    height: 1px;
+    background-color: $body-text-subtle;
+}
+
+
 #content {
     padding: {
         right: 20px;
@@ -126,7 +123,6 @@ main {
     font-family: $body-font;
     color: $body-text;
     line-height: 1.5em;
-
     p {
         margin: {
             top: 0;
@@ -135,23 +131,18 @@ main {
     }
 }
 
-
-@media screen and (max-width: $mobile-width){
+@media screen and (max-width: $mobile-width) {
     header {
         top: 0;
         left: 0;
         right: 0;
         z-index: 1;
         background-color: darken($background, 5%);
-
-
         border-bottom: 1px solid $subtle;
         padding: {
             top: 0;
             bottom: 0;
         }
-        
-
         #title {
             font-size: $mobile-header-height * 0.5;
             text-align: center;
@@ -159,26 +150,20 @@ main {
                 top: 0;
                 bottom: 5px;
             }
-
             #path {
                 display: none;
             }
-
             #page {
                 display: block;
             }
-
         }
     }
-
     main {
         flex-direction: column;
     }
 }
 
-
-
 footer {
     font-size: 1em;
     text-align: center;
-}
+}