more styling - added content to sidebar

client/assets/scss/Footer.scss

@@ -0,0 +1,10 @@
+.Footer{
+  height: 5em;
+  line-height: 5em;
+  background-color: #F1F1F1;
+  border-top: solid;
+  border-width: 1px;
+  border-color: #DADADA;
+  font-weight: 300;
+  margin-top: 1em;
+}

client/assets/scss/Preview.scss

@@ -0,0 +1,22 @@
+.Preview{
+  flex: 1;
+  -webkit-flex: 1;
+
+  .post + .post{
+    margin-top: 2em;
+  }
+
+  .date{
+    margin: 0;
+    opacity: 0.7;
+    font-weight: 300;
+  }
+
+  .intro{
+    margin-bottom: 0.5em;
+  }
+
+  p{
+    font-weight: 300;
+  }
+}

client/assets/scss/Sidebar.scss

@@ -5,32 +5,39 @@ $transitionDuration: .4s;
   width: 300px;
   padding-right: 1em;
   padding-left: 1em;
-  
+
   img{
       width: 100%;
       height: auto;
+      border-radius: 0.5em;
   }
-  
+
+  h2{
+    text-align: center;
+    margin-bottom: 0.5em;
+  }
+
   a.toggler{
     display: none;
   }
-  
+
   @media (max-width: 768px) {
     position: absolute;
     top: 0;
     right: 0;
     min-height: 100%;
-    
+    padding-top: 1em;
+
     transform: translateX(300px);
     -webkit-transform: translateX(300px);
     transition: transform $transitionDuration ease-out;
     -webkit-transition: transform $transitionDuration ease-out;
-    
+
     &.open {
       transform: translateX(0px);
       -webkit-transform: translateX(0px);
       border-left: 1px solid #EAEAEA;
-      
+
         &:before {
             content:    " ";
             display:    block;
@@ -41,12 +48,12 @@ $transitionDuration: .4s;
             top:        0;
             right:      100%;
         }
-        
+
         a.toggler{
             transform: rotate(450deg);
         }
     }
-    
+
     a.toggler{
         display: block;
         width: 2em;
@@ -59,6 +66,10 @@ $transitionDuration: .4s;
         transform: rotate(0deg);
         transition: transform $transitionDuration ease-out;
         -webkit-transition: transform $transitionDuration ease-out;
+
+        &:hover{
+          color: #3598db;
+        }
     }
   }
-}
+}

client/assets/scss/main.scss

@@ -1,10 +1,23 @@
 @import './utils.scss';
 
+html{
+    font-family: 'Roboto Slab', serif;
+}
+
 body{
   position: relative;
   -webkit-font-smoothing: subpixel-antialiased;
 }
 
+h1, h2, h3, h4, h5, h6{
+  margin: 0;
+  font-weight: 500;
+}
+
+p{
+  font-weight: 300;
+}
+
 *,
 *:before,
 *:after {
@@ -17,7 +30,7 @@ a{
   background-color: transparent;
   color: #3598db;
   text-decoration: none;
- 
+
  &:hover{
    color: #3598db;
  }
@@ -30,8 +43,8 @@ a{
 
   .Header, .Main, .Footer {
     display:    flex;
-    box-sizing: padding-box;
-    padding:    1em calc(50% - 997px / 2);
+    padding-right:    calc(50% - 997px / 2);
+    padding-left:    calc(50% - 997px / 2);
     &:before, &:after { content: " "; width: 1em; }
   }
 }
@@ -49,22 +62,8 @@ a{
   border-bottom: solid;
   border-width: 1px;
   border-color: #DADADA;
-  
+
   h1{
     text-align: center;
   }
 }
-
-.Footer{
-  height: 5em;
-  line-height: 5em;
-  background-color: #F1F1F1;
-  border-top: solid;
-  border-width: 1px;
-  border-color: #DADADA;
-}
-
-.Previews{
-  flex: 1;
-  -webkit-flex: 1;
-}