Refactoring, navbar color, shadow

_sass/_base.scss

@@ -1,18 +1,31 @@
 /**
  * Reset some basic elements
  */
-body, h1, h2, h3, h4, h5, h6,
-p, blockquote, pre,
-dl, dd, ol, ul, figure {
+
+body,
+h1,
+h2,
+h3,
+h4,
+h5,
+h6,
+p,
+blockquote,
+pre,
+dl,
+dd,
+ol,
+ul,
+figure {
     margin: 0;
     padding: 0;
 }
 
 
-
 /**
  * Basic styling
  */
+
 body {
     font-family: $base-font-family;
     font-size: $base-font-size;
@@ -24,33 +37,43 @@ body {
 }
 
 
-
 /**
  * Set `margin-bottom` to maintain vertical rhythm
  */
-h1, h2, h3, h4, h5, h6,
-p, blockquote, pre,
-ul, ol, dl, figure,
+
+h1,
+h2,
+h3,
+h4,
+h5,
+h6,
+p,
+blockquote,
+pre,
+ul,
+ol,
+dl,
+figure,
 %vertical-rhythm {
     margin-bottom: $spacing-unit / 2;
 }
 
 
-
 /**
  * Images
  */
+
 img {
     max-width: 100%;
     vertical-align: middle;
 }
 
 
-
 /**
  * Figures
  */
-figure > img {
+
+figure>img {
     display: block;
 }
 
@@ -59,43 +82,47 @@ figcaption {
 }
 
 
-
 /**
  * Lists
  */
-ul, ol {
+
+ul,
+ol {
     margin-left: $spacing-unit;
 }
 
 li {
-    > ul,
-    > ol {
-         margin-bottom: 0;
+    >ul,
+    >ol {
+        margin-bottom: 0;
     }
 }
 
 
-
 /**
  * Headings
  */
-h1, h2, h3, h4, h5, h6 {
+
+h1,
+h2,
+h3,
+h4,
+h5,
+h6 {
     font-weight: 300;
 }
 
 
-
 /**
  * Links
  */
+
 a {
     color: $brand-color;
     text-decoration: none;
-
     &:visited {
         color: darken($brand-color, 15%);
     }
-
     &:hover {
         color: $text-color;
         text-decoration: underline;
@@ -103,10 +130,10 @@ a {
 }
 
 
-
 /**
  * Blockquotes
  */
+
 blockquote {
     color: $grey-color;
     border-left: 4px solid $grey-color-light;
@@ -114,17 +141,16 @@ blockquote {
     font-size: 18px;
     letter-spacing: -1px;
     font-style: italic;
-
     > :last-child {
         margin-bottom: 0;
     }
 }
 
 
-
 /**
  * Code formatting
  */
+
 pre,
 code {
     font-size: 15px;
@@ -140,8 +166,7 @@ code {
 pre {
     padding: 8px 12px;
     overflow-x: scroll;
-
-    > code {
+    >code {
         border: 0;
         padding-right: 0;
         padding-left: 0;
@@ -149,34 +174,32 @@ pre {
 }
 
 
-
 /**
  * Wrapper
  */
+
 .wrapper {
     max-width: -webkit-calc(800px - (#{$spacing-unit} * 2));
-    max-width:         calc(800px - (#{$spacing-unit} * 2));
+    max-width : calc(800px - (#{$spacing-unit} * 2));
     margin-right: auto;
     margin-left: auto;
     padding-right: $spacing-unit;
     padding-left: $spacing-unit;
     @extend %clearfix;
-
     @include media-query($on-laptop) {
         max-width: -webkit-calc(800px - (#{$spacing-unit}));
-        max-width:         calc(800px - (#{$spacing-unit}));
+        max-width : calc(800px - (#{$spacing-unit}));
         padding-right: $spacing-unit / 2;
         padding-left: $spacing-unit / 2;
     }
 }
 
 
-
 /**
  * Clearfix
  */
-%clearfix {
 
+%clearfix {
     &:after {
         content: "";
         display: table;
@@ -185,20 +208,18 @@ pre {
 }
 
 
-
 /**
  * Icons
  */
-.icon {
 
-    > svg {
+.icon {
+    >svg {
         display: inline-block;
         width: 16px;
         height: 16px;
         vertical-align: middle;
-
         path {
             fill: $grey-color;
         }
     }
-}
+}