Improve readability of CSS by adding white-space between lines

13 files changed, 610 insertions, 323 deletions

diff --git a/_sass/_animations.scss b/_sass/_animations.scss
index 2f68ea5..27e5061 100644
--- a/_sass/_animations.scss
+++ b/_sass/_animations.scss
@@ -1,8 +1,12 @@
-.animated{-webkit-animation-fill-mode:both;-moz-animation-fill-mode:both;-ms-animation-fill-mode:both;-o-animation-fill-mode:both;animation-fill-mode:both;-webkit-animation-duration:1s;-moz-animation-duration:1s;-ms-animation-duration:1s;-o-animation-duration:1s;animation-duration:1s;}.animated.hinge{-webkit-animation-duration:2s;-moz-animation-duration:2s;-ms-animation-duration:2s;-o-animation-duration:2s;animation-duration:2s;}
+/* ==========================================================================
+   Animations
+   ========================================================================== */
 
+.animated{-webkit-animation-fill-mode:both;-moz-animation-fill-mode:both;-ms-animation-fill-mode:both;-o-animation-fill-mode:both;animation-fill-mode:both;-webkit-animation-duration:1s;-moz-animation-duration:1s;-ms-animation-duration:1s;-o-animation-duration:1s;animation-duration:1s;}.animated.hinge{-webkit-animation-duration:2s;-moz-animation-duration:2s;-ms-animation-duration:2s;-o-animation-duration:2s;animation-duration:2s;}
 
-// Fade in
-// --------------------------------------------------
+/* 
+   Fade in
+   ========================================================================== */
 
 @-webkit-keyframes fadeIn {
   0% {opacity: 0;}  
@@ -20,6 +24,7 @@
   0% {opacity: 0;}  
   100% {opacity: 1;}
 }
+
 .fadeIn {
   -webkit-animation-name: fadeIn;
   -moz-animation-name: fadeIn;
@@ -67,6 +72,7 @@
     transform: translateY(0);
   }
 }
+
 .fadeInDown {
   -webkit-animation-name: fadeInDown;
   -moz-animation-name: fadeInDown;
@@ -114,6 +120,7 @@
     transform: translateY(0);
   }
 }
+
 .fadeInDownBig {
   -webkit-animation-name: fadeInDownBig;
   -moz-animation-name: fadeInDownBig;
@@ -121,9 +128,9 @@
   animation-name: fadeInDownBig;
 }
 
-
-// Bounce
-// --------------------------------------------------
+/* 
+   Bounce
+   ========================================================================== */
 
 @-webkit-keyframes bounceIn {
   0% {
@@ -189,12 +196,14 @@
     transform: scale(1);
   }
 }
+
 .bounceIn {
   -webkit-animation-name: bounceIn;
   -moz-animation-name: bounceIn;
   -o-animation-name: bounceIn;
   animation-name: bounceIn;
 }
+
 @-webkit-keyframes bounceInDown {
   0% {
     opacity: 0;
@@ -282,9 +291,9 @@
   animation-name: bounceInDown;
 }
 
-
-// Drop
-// --------------------------------------------------
+/* 
+   Drop
+   ========================================================================== */
 
 @-webkit-keyframes drop {
   0% {
@@ -324,4 +333,120 @@
   -moz-animation-name: drop;
   -o-animation-name: drop;
   animation-name: drop;
+}
+
+/* 
+   DL Menu In/Out
+   ========================================================================== */
+
+@-webkit-keyframes MenuAnimOut {
+  100% {
+    -webkit-transform: translateZ(300px);
+    opacity: 0;
+  }
+}
+@-moz-keyframes MenuAnimOut {
+  100% {
+    -moz-transform: translateZ(300px);
+    opacity: 0;
+  }
+}
+@keyframes MenuAnimOut {
+  100% {
+    transform: translateZ(300px);
+    opacity: 0;
+  }
+}
+
+@-webkit-keyframes MenuAnimIn {
+  0% {
+    -webkit-transform: translateZ(300px);
+    opacity: 0;
+  }
+  100% {
+    -webkit-transform: translateZ(0px);
+    opacity: 1;
+  }
+}
+@-moz-keyframes MenuAnimIn {
+  0% {
+    -moz-transform: translateZ(300px);
+    opacity: 0;
+  }
+  100% {
+    -moz-transform: translateZ(0px);
+    opacity: 1;
+  }
+}
+@keyframes MenuAnimIn {
+  0% {
+    transform: translateZ(300px);
+    opacity: 0;
+  }
+  100% {
+    transform: translateZ(0px);
+    opacity: 1;
+  }
+}
+
+@-webkit-keyframes SubMenuAnimIn {
+  0% {
+    -webkit-transform: translateZ(-300px);
+    opacity: 0;
+  }
+  100% {
+    -webkit-transform: translateZ(0px);
+    opacity: 1;
+  }
+}
+@-moz-keyframes SubMenuAnimIn {
+  0% {
+    -moz-transform: translateZ(-300px);
+    opacity: 0;
+  }
+  100% {
+    -moz-transform: translateZ(0px);
+    opacity: 1;
+  }
+}
+@keyframes SubMenuAnimIn {
+  0% {
+    transform: translateZ(-300px);
+    opacity: 0;
+  }
+  100% {
+    transform: translateZ(0px);
+    opacity: 1;
+  }
+}
+
+@-webkit-keyframes SubMenuAnimOut {
+  0% {
+    -webkit-transform: translateZ(0px);
+    opacity: 1;
+  }
+  100% {
+    -webkit-transform: translateZ(-300px);
+    opacity: 0;
+  }
+}
+@-moz-keyframes SubMenuAnimOut {
+  0% {
+    -moz-transform: translateZ(0px);
+    opacity: 1;
+  }
+  100% {
+    -moz-transform: translateZ(-300px);
+    opacity: 0;
+  }
+}
+@keyframes SubMenuAnimOut {
+  0% {
+    transform: translateZ(0px);
+    opacity: 1;
+  }
+  100% {
+    transform: translateZ(-300px);
+    opacity: 0;
+  }
 }
\ No newline at end of file
diff --git a/_sass/_coderay.scss b/_sass/_coderay.scss
index 2ebe937..f3f4329 100644
--- a/_sass/_coderay.scss
+++ b/_sass/_coderay.scss
@@ -1,3 +1,7 @@
+/* ==========================================================================
+   CodeRay Syntax Highlighting
+   ========================================================================== */
+
 .CodeRay {
   font-family: $code-font;
   @include font(12);
diff --git a/_sass/_dl-menu.scss b/_sass/_dl-menu.scss
index 8ae7d0d..5e5a2eb 100644
--- a/_sass/_dl-menu.scss
+++ b/_sass/_dl-menu.scss
@@ -1,3 +1,7 @@
+/* ==========================================================================
+   DL Menu
+   ========================================================================== */
+
 .dl-menuwrapper {
 	width: 100%;
 	height: 100%;
@@ -11,12 +15,14 @@
 	-webkit-perspective-origin: 50% 200%;
 	-moz-perspective-origin: 50% 200%;
 	perspective-origin: 50% 200%;
+
 	@media #{$medium} {
 		position: fixed;
 		max-width: 175px;
 		top: 25px;
 		left: 25px;
 	}
+
 	button {
 		top: 0;
 		left: 0;
@@ -31,31 +37,36 @@
 		outline: none;
 		@include border-radius(0,3px,0,0);
 		opacity: 0.6;
-		box-shadow: 0 12px 24px rgba($black,0.4);
+		box-shadow: 0 12px 24px rgba(#000,0.4);
+
 		@media #{$medium} {
 			@include border-radius(3px,3px,3px,3px);
 		}
 	}
+
 	button:hover,
 	button.dl-active,
 	ul {
 		background: #aaa;
 	}
+
 	button:after {
 		content: '';
 		position: absolute;
 		width: 68%;
 		height: 5px;
-		background: $white;
+		background: #fff;
 		top: 10px;
 		left: 16%;
 		box-shadow: 
-			0 10px 0 $white, 
-			0 20px 0 $white;
+			0 10px 0 #fff, 
+			0 20px 0 #fff;
 	}
+
 	button.dl-active {
 		display: none;
 	}
+
 	ul {
 		padding: 0;
 		list-style: none;
@@ -63,28 +74,30 @@
 		-moz-transform-style: preserve-3d;
 		transform-style: preserve-3d;
 	}
+
 	li {
 		position: relative;
+
 		h4 {
 			margin:0;
 			padding: 15px 20px 0;
-			color: rgba($white,0.9);
+			color: rgba(#fff,0.9);
 		}
+
 		p {
 			margin: 0;
 			padding: 15px 20px;
 			@include font-rem(14);
-			color: rgba($white,0.8);
+			color: rgba(#fff,0.8);
 			font-weight: 300;
+
 			a {
 				display: inline;
 				padding: 0;
 				@include font-rem(14);
 			}
 		}
-		i {
-			// display: inline-block;
-		}
+
 		a {
 			display: block;
 			position: relative;
@@ -92,24 +105,27 @@
 			@include font-rem(14);
 			line-height: 20px;
 			font-weight: 400;
-			color: $white;
+			color: #fff;
 			outline: none;
 		}
+
 		&.dl-back > a {
 			padding-left: 30px;
 			background: rgba(0,0,0,0.2);
 		}
+
 		&.dl-back:after,
 		> a:not(:only-child):after {
 			position: absolute;
 			top: 0;
 			line-height: 50px;
-			font-family: 'fontawesome';
-			color: $white;
+			font-family: "fontawesome";
+			color: #fff;
 			speak: none;
 			-webkit-font-smoothing: antialiased;
 			content: "\f105";
 		}
+
 		&.dl-back:after {
 			left: 10px;
 			color: rgba(212,204,198,0.5);
@@ -117,11 +133,13 @@
 			-moz-transform: rotate(180deg);
 			transform: rotate(180deg);
 		}
+
 		> a:after {
 			right: 10px;
 			color: rgba(0,0,0,0.15);
 		}
 	}
+
 	.dl-menu {
 		margin: 0;
 		position: relative;
@@ -131,7 +149,7 @@
 	  overflow-x: hidden;
 		opacity: 0;
 		pointer-events: none;
-		box-shadow: 0 12px 24px rgba($black,0.4);
+		box-shadow: 0 12px 24px rgba(#000,0.4);
 		-webkit-transform: translateY(10px);
 		-moz-transform: translateY(10px);
 		transform: translateY(10px);
@@ -139,15 +157,18 @@
 		-moz-backface-visibility: hidden;
 		backface-visibility: hidden;
 		z-index: inherit;
+
 		@media #{$medium} {
 			@include border-radius(3px,3px,3px,3px);
 		}
 	}
+
 	.dl-menu.dl-menu-toggle {
 		-webkit-transition: all 0.3s ease;
 		-moz-transition: all 0.3s ease;
 		transition: all 0.3s ease;
 	}
+
 	.dl-menu.dl-menuopen {
 		opacity: 1;
 		pointer-events: auto;
@@ -155,18 +176,22 @@
 		-moz-transform: translateY(0px);
 		transform: translateY(0px);
 	}
+
 	.dl-submenu {
 		@include rounded(3px);
-		box-shadow: 0 12px 24px rgba($black,0.4);
+		box-shadow: 0 12px 24px rgba(#000,0.4);
+
 		.btn {
 			margin-bottom: 0;
 		}
 	}
+
 	/* Hide the inner submenus */
 	li .dl-submenu {
 		display: none;
 	}
 }
+
 /* 
 When a submenu is openend, we will hide all li siblings.
 For that we give a class to the parent menu called "dl-subview".
@@ -179,6 +204,7 @@ All this is done for any sub-level being entered.
 .dl-menu.dl-subview li.dl-subview > a {
 	display: none;
 }
+
 .dl-menu.dl-subview li.dl-subview,
 .dl-menu.dl-subview li.dl-subview .dl-submenu,
 .dl-menu.dl-subview li.dl-subviewopen,
@@ -186,139 +212,37 @@ All this is done for any sub-level being entered.
 .dl-menu.dl-subview li.dl-subviewopen > .dl-submenu > li {
 	display: block;
 }
+
 /* Animation classes for moving out and in */
 .dl-menu.dl-animate-out {
 	-webkit-animation: MenuAnimOut 0.4s ease;
 	-moz-animation: MenuAnimOut 0.4s ease;
 	animation: MenuAnimOut 0.4s ease;
 }
-@-webkit-keyframes MenuAnimOut {
-	100% {
-		-webkit-transform: translateZ(300px);
-		opacity: 0;
-	}
-}
-@-moz-keyframes MenuAnimOut {
-	100% {
-		-moz-transform: translateZ(300px);
-		opacity: 0;
-	}
-}
-@keyframes MenuAnimOut {
-	100% {
-		transform: translateZ(300px);
-		opacity: 0;
-	}
-}
+
 .dl-menu.dl-animate-in {
 	-webkit-animation: MenuAnimIn 0.4s ease;
 	-moz-animation: MenuAnimIn 0.4s ease;
 	animation: MenuAnimIn 0.4s ease;
 }
-@-webkit-keyframes MenuAnimIn {
-	0% {
-		-webkit-transform: translateZ(300px);
-		opacity: 0;
-	}
-	100% {
-		-webkit-transform: translateZ(0px);
-		opacity: 1;
-	}
-}
-@-moz-keyframes MenuAnimIn {
-	0% {
-		-moz-transform: translateZ(300px);
-		opacity: 0;
-	}
-	100% {
-		-moz-transform: translateZ(0px);
-		opacity: 1;
-	}
-}
-@keyframes MenuAnimIn {
-	0% {
-		transform: translateZ(300px);
-		opacity: 0;
-	}
-	100% {
-		transform: translateZ(0px);
-		opacity: 1;
-	}
-}
+
 .dl-menuwrapper > .dl-submenu.dl-animate-in {
 	-webkit-animation: SubMenuAnimIn 0.4s ease;
 	-moz-animation: SubMenuAnimIn 0.4s ease;
 	animation: SubMenuAnimIn 0.4s ease;
 }
-@-webkit-keyframes SubMenuAnimIn {
-	0% {
-		-webkit-transform: translateZ(-300px);
-		opacity: 0;
-	}
-	100% {
-		-webkit-transform: translateZ(0px);
-		opacity: 1;
-	}
-}
-@-moz-keyframes SubMenuAnimIn {
-	0% {
-		-moz-transform: translateZ(-300px);
-		opacity: 0;
-	}
-	100% {
-		-moz-transform: translateZ(0px);
-		opacity: 1;
-	}
-}
-@keyframes SubMenuAnimIn {
-	0% {
-		transform: translateZ(-300px);
-		opacity: 0;
-	}
-	100% {
-		transform: translateZ(0px);
-		opacity: 1;
-	}
-}
+
 .dl-menuwrapper > .dl-submenu.dl-animate-out {
 	-webkit-animation: SubMenuAnimOut 0.4s ease;
 	-moz-animation: SubMenuAnimOut 0.4s ease;
 	animation: SubMenuAnimOut 0.4s ease;
 }
-@-webkit-keyframes SubMenuAnimOut {
-	0% {
-		-webkit-transform: translateZ(0px);
-		opacity: 1;
-	}
-	100% {
-		-webkit-transform: translateZ(-300px);
-		opacity: 0;
-	}
-}
-@-moz-keyframes SubMenuAnimOut {
-	0% {
-		-moz-transform: translateZ(0px);
-		opacity: 1;
-	}
-	100% {
-		-moz-transform: translateZ(-300px);
-		opacity: 0;
-	}
-}
-@keyframes SubMenuAnimOut {
-	0% {
-		transform: translateZ(0px);
-		opacity: 1;
-	}
-	100% {
-		transform: translateZ(-300px);
-		opacity: 0;
-	}
-}
+
 /* No Touch Fallback */
 .no-touch .dl-menuwrapper li a:hover {
 	background: rgba(255,248,213,0.1);
 }
+
 /* No JS Fallback */
 .no-js {
 	.dl-trigger {
@@ -326,10 +250,12 @@ All this is done for any sub-level being entered.
 	}
 	.dl-menuwrapper {
 		position: initial;
+
 		@media #{$medium} {
 			position: absolute;
 		}
 	}
+
 	.dl-menuwrapper .dl-menu {
 		position: relative;
 		opacity: 1;
@@ -338,35 +264,44 @@ All this is done for any sub-level being entered.
 		-moz-transform: none;
 		transform: none;
 	}
+
 	.dl-menuwrapper li .dl-submenu {
 		display: block;
 	}
+
 	.dl-menuwrapper li.dl-back {
 		display: none;
 	}
+
 	.dl-menuwrapper li > a:not(:only-child) {
 		background: rgba(0,0,0,0.1);
 	}
+
 	.dl-menuwrapper li > a:not(:only-child):after {
 		content: '';
 	}
+
 	.dl-menu {
 		max-height: 100%;
 	}
+
 	.dl-menu li {
 		display: block;
 	}
 }
+
 // Menu Color
 .dl-menuwrapper button:hover,
 .dl-menuwrapper button.dl-active,
 .dl-menuwrapper ul {
 	background: $comp-color;
 }
+
 // Fix for IE
 .dl-menu li {
 	display: none
 }
+
 .dl-menuopen li {
 	display: block
 }
diff --git a/_sass/_elements.scss b/_sass/_elements.scss
index 4847610..51b7534 100644
--- a/_sass/_elements.scss
+++ b/_sass/_elements.scss
@@ -1,3 +1,7 @@
+/* ==========================================================================
+   Base Elements and Components
+   ========================================================================== */
+
 hr { 
     display: block; 
     margin: 1em 0; 
@@ -8,141 +12,177 @@ hr {
     border-bottom: 1px solid #fff; 
 }
 
-// Figures and images
-// --------------------------------------------------
+/* 
+   Figures and images
+   ========================================================================== */
+
 figure {
   margin: 0;
   padding-top: 10px;
   padding-bottom: 10px;
   @include clearfix();
+
   img {
     margin-bottom: 10px;
   }
+
   a { 
+
     img {
       @include translate(0, 0);
       -webkit-transition-duration: 0.25s;
       -moz-transition-duration: 0.25s;
       -o-transition-duration: 0.25s;
+
       &:hover {
         @include translate(0, -5px);
         @include box-shadow(0 0 10px fade($base-color, 20));
       }
     }
   }
+
+  /* 2 columns */
   &.half {
     @media #{$large} {
+
       img {
         width: 310px;
         float: left;
         margin-right: 10px;
       }
+
       figcaption {
         clear: left;
       }
     }
   }
+
+  /* 3 columns */
   &.third {
     @media #{$large} {
+
       img {
         width: 200px;
         float: left;
         margin-right: 10px;
       }
+
       figcaption {
         clear: left;
       }
     }
   }
 }
+
 svg:not(:root) {
   overflow: hidden; 
 }
 
-// Buttons
-// --------------------------------------------------
+/* 
+   Buttons
+   ========================================================================== */
+
 .btn {
   display: inline-block;
   margin-bottom: 20px;
   padding: 8px 20px;
   @include font-rem(14);
   background-color: $primary;
-  color: $white;
+  color: #fff;
   border-width: 2px !important;
   border-style: solid !important;
   border-color: $primary;
   @include rounded(3px);
+
   &:visited {
-    color: $white;
+    color: #fff;
   }
+
   &:hover {
-    background-color: $white;
+    background-color: #fff;
     color: $primary;
   }
 }
+
 .btn-inverse {
-  background-color: $white;
+  background-color: #fff;
   color: $primary;
-  border-color: $white;
+  border-color: #fff;
+
   &:visited {
     color: $primary;
   }
+
   &:hover {
     background-color: $primary;
-    color: $white;
+    color: #fff;
   }
 }
+
 .btn-success {
   background-color: $success;
-  color: $white;
+  color: #fff;
   border-color: $success;
+
   &:visited {
-    color: $white;
+    color: #fff;
   }
+
   &:hover {
-    background-color: $white;
+    background-color: #fff;
     color: $success;
   }
 }
+
 .btn-warning {
   background-color: $warning;
-  color: $white;
+  color: #fff;
   border-color: $warning;
+
   &:visited {
-    color: $white;
+    color: #fff;
   }
+
   &:hover {
-    background-color: $white;
+    background-color: #fff;
     color: $warning;
   }
 }
+
 .btn-danger {
   background-color: $danger;
-  color: $white;
+  color: #fff;
   border-color: $danger;
+
   &:visited {
-    color: $white;
+    color: #fff;
   }
+
   &:hover {
-    background-color: $white;
+    background-color: #fff;
     color: $danger;
   }
 }
+
 .btn-info {
   background-color: $info;
-  color: $white;
+  color: #fff;
   border-color: $info;
+
   &:visited {
-    color: $white;
+    color: #fff;
   }
+
   &:hover {
-    background-color: $white;
+    background-color: #fff;
     color: $info;
   }
 }
 
-// Well
-// --------------------------------------------------
+/* 
+   Wells
+   ========================================================================== */
+
 .well {
   padding: 20px;
   border: 1px solid $comp-color;
diff --git a/_sass/_grid.scss b/_sass/_grid.scss
index ffb89e7..1ae5df3 100644
--- a/_sass/_grid.scss
+++ b/_sass/_grid.scss
@@ -1,3 +1,7 @@
+/* ==========================================================================
+   Grid
+   ========================================================================== */
+
 // Defining number of columns in the grid.
 // Common Values would be 12, 16 or 24
 $width: 100%;
@@ -23,14 +27,17 @@ $margin: 0;
 @mixin prefix($grid:$def_grid,$cols:''){
   margin-left:(100%/$grid * $cols);
 }
+
 // Allows for padding after element
 @mixin suffix($grid:$def_grid,$cols:''){  
   margin-right:(100%/$grid * $cols);    
 }
+
 // Removes left margin
 @mixin first(){
   margin-left:0;
 }
+
 // Removes right margin
 @mixin last(){
   margin-right:0;
diff --git a/_sass/_mixins.scss b/_sass/_mixins.scss
index f8bfe8b..87c9536 100644
--- a/_sass/_mixins.scss
+++ b/_sass/_mixins.scss
@@ -1,11 +1,15 @@
-// UTILITY MIXINS
-// --------------------------------------------------
+/* ==========================================================================
+   Mixins
+   ========================================================================== */
 
-// Clearfix
-// --------------------
-// For clearing floats like a boss h5bp.com/q
+/* 
+   Utility mixins
+   ========================================================================== */
+
+/* clearfix */
 @mixin clearfix {
   *zoom: 1;
+
   &:before,
   &:after {
     display: table;
@@ -14,13 +18,13 @@
     // http://nicolasgallagher.com/micro-clearfix-hack/#comment-36952
     line-height: 0;
   }
+
   &:after {
     clear: both;
   }
 }
 
-// Webkit-style focus
-// --------------------
+/* Webkit-style focus */
 @mixin tab-focus() {
   // Default
   outline: thin dotted #333;
@@ -29,19 +33,19 @@
   outline-offset: -2px;
 }
 
-// Center-align a block level element
-// ----------------------------------
+/* Center-align a block level element */
+
 @mixin center-block() {
   display: block;
   margin-left: auto;
   margin-right: auto;
 }
 
-// TYPOGRAPHY
-// --------------------------------------------------
+/* 
+   Typography mixins
+   ========================================================================== */
 
-// Full-fat vertical rhythm
-// ------------------------
+/* Full-fat vertical rhythm */
 @mixin font-size($size) {
   font-size: 0px + $size;
   font-size: 0rem + $size / $doc-font-size;
@@ -50,31 +54,31 @@
   margin-bottom: 0rem + ($doc-line-height / $doc-font-size);
 }
 
-// Just the REMs
-// -------------
+/* Just the REMs */
 @mixin font-rem($size) {
   font-size: 0px + $size;
   font-size: 0rem + $size / $doc-font-size;
 }
 
-// Just font-size and line-height
-// ------------------------------
+/* Just font-size and line-height */
 @mixin font($size) {
   font-size: 0px + $size;
   font-size: 0rem + $size / $doc-font-size;
   line-height: 0 + round($doc-line-height / $size*10000) / 10000;
 }
 
+/* Ellipsis */
 @mixin text-overflow() {
   overflow: hidden;
   text-overflow: ellipsis;
   white-space: nowrap; 
 }
 
-// GRADIENTS
-// --------------------------------------------------
+/* 
+   Gradients
+   ========================================================================== */
 
-@mixin horizontal($startColor : $white, $endColor : $lightergrey) {
+@mixin horizontal($startColor : #fff, $endColor : $lightergrey) {
   background-color: $endColor;
   background-image  : -webkit-gradient(linear, 0 0, 100% 0, from($startColor), to($endColor)); // Safari 4+, Chrome 2+
   background-image  : -webkit-linear-gradient(left, $startColor, $endColor); 					 // Safari 5.1+, Chrome 10+
@@ -85,7 +89,7 @@
   background-repeat : repeat-x; 
 }
 
-@mixin vertical($startColor : $white, $endColor:  $lightergrey) {
+@mixin vertical($startColor : #fff, $endColor:  $lightergrey) {
   background-image  : -webkit-gradient(linear, 0 0, 0 100%, from($startColor), to($endColor)); // Safari 4+, Chrome 2+
   background-image  : -webkit-linear-gradient(top, $startColor, $endColor); 					 // Safari 5.1+, Chrome 10+
   background-color  : $endColor;
@@ -96,7 +100,7 @@
   background-repeat : repeat-x; 
 }
 
-@mixin directional($startColor : $white, $endColor : $lightergrey, $deg : 45deg) {
+@mixin directional($startColor : #fff, $endColor : $lightergrey, $deg : 45deg) {
   background-color  : $endColor;
   background-image  : -moz-linear-gradient($deg, $startColor, $endColor); 					// FF 3.6+
   background-image  : -ms-linear-gradient($deg, $startColor, $endColor); 						// IE10
@@ -106,7 +110,7 @@
   background-repeat : repeat-x; 
 }
 
-// .bordered(COLOR, COLOR, COLOR, COLOR);
+/* .bordered(COLOR, COLOR, COLOR, COLOR); */
 @mixin bordered($top-color: #eee, $right-color: #eee, $bottom-color: #eee, $left-color: #eee) {
   border-top : solid 1px $top-color;
   border-left : solid 1px $left-color;
@@ -114,17 +118,18 @@
   border-bottom : solid 1px $bottom-color; 
 }
 
-// ROUND CORNERS
-// --------------------------------------------------
+/* 
+   Rounded corners
+   ========================================================================== */
 
-// .rounded(VALUE);
+/* .rounded(VALUE); */
 @mixin rounded($radius:4px) {
   -webkit-border-radius : $radius;
   -moz-border-radius : $radius;
   border-radius : $radius; 
 }
 
-// .border-radius(VALUE,VALUE,VALUE,VALUE);
+/* .border-radius(VALUE,VALUE,VALUE,VALUE); */
 @mixin border-radius($topright: 0, $bottomright: 0, $bottomleft: 0, $topleft: 0) {
   -webkit-border-top-right-radius : $topright;
   -webkit-border-bottom-right-radius : $bottomright;
@@ -143,29 +148,30 @@
   background-clip : padding-box; 
 }
 
-// .box-shadow(HORIZONTAL VERTICAL BLUR COLOR))
+/* .box-shadow(HORIZONTAL VERTICAL BLUR COLOR)); */
 @mixin box-shadow($shadow: 0 1px 3px rgba(0,0,0,.25)) {
   -webkit-box-shadow : $shadow;
   -moz-box-shadow : $shadow;
   box-shadow : $shadow; 
 }
 
-// .drop-shadow(HORIZONTAL, VERTICAL, BLUR, ALPHA);
+/* .drop-shadow(HORIZONTAL, VERTICAL, BLUR, ALPHA); */
 @mixin drop-shadow($x-axis: 0, $y-axis: 1px, $blur: 2px, $alpha: 0.1) {
   -webkit-box-shadow : $x-axis $y-axis $blur rgba(0, 0, 0, $alpha);
   -moz-box-shadow : $x-axis $y-axis $blur rgba(0, 0, 0, $alpha);
   box-shadow : $x-axis $y-axis $blur rgba(0, 0, 0, $alpha); 
 }
 
-// .text-shadow();
+/* .text-shadow(); */
 @mixin text-shadow($shadow: 0 2px 3px rgba(0,0,0,.25)) {
   text-shadow : $shadow; 
 }
 
-// TRANSFORMATIONS
-// --------------------------------------------------
+/* 
+   Transformations
+   ========================================================================== */
 
-// .rotate(VALUEdeg);
+/* .rotate(VALUEdeg); */
 @mixin rotate($deg) {
   -webkit-transform : rotate($deg);
   -moz-transform : rotate($deg);
@@ -174,7 +180,7 @@
   transform : rotate($deg); 
 }
 
-// .scale(VALUE);
+/* .scale(VALUE); */
 @mixin scale($ratio) {
   -webkit-transform : scale($ratio);
   -moz-transform : scale($ratio);
@@ -183,7 +189,7 @@
   transform : scale($ratio); 
 }
 
-// .skew(VALUE, VALUE);
+/* .skew(VALUE, VALUE); */
 @mixin skew($x: 0, $y: 0) {
   -webkit-transform : skew($x, $y);
   -moz-transform : skew($x, $y);
@@ -192,7 +198,7 @@
   transform : skew($x, $y); 
 }
 
-// .transition(PROPERTY DURATION DELAY(OPTIONAL) TIMING-FINCTION);
+/* .transition(PROPERTY DURATION DELAY(OPTIONAL) TIMING-FINCTION); */
 @mixin transition($transition) {
   -webkit-transition : $transition;
   -moz-transition : $transition;
@@ -201,7 +207,7 @@
   transition : $transition; 
 }
 
-// .translate(VALUE, VALUE)
+/* .translate(VALUE, VALUE); */
 @mixin translate($x: 0, $y: 0) {
   -webkit-transform : translate($x, $y);
   -moz-transform : translate($x, $y);
@@ -224,15 +230,16 @@
   -ms-animation:     $name $duration $delay $ease;
 }
 
-// BACKGROUND
-// --------------------------------------------------
+/* 
+   Background
+   ========================================================================== */
 
-// .background-alpha(VALUE VALUE);
-@mixin background-alpha($color: $white, $alpha: 1) {
+/* .background-alpha(VALUE VALUE); */
+@mixin background-alpha($color: #fff, $alpha: 1) {
   background-color : hsla(hue($color), saturation($color), lightness($color), $alpha); 
 }
 
-// .background-size(VALUE VALUE);
+/* .background-size(VALUE VALUE); */
 @mixin background-size($size){
   -webkit-background-size : $size;
   -moz-background-size : $size;
@@ -240,14 +247,14 @@
   background-size : $size; 
 }
 
-// .background-clip(VALUE); (border-box, padding-box, content-box)
+/* .background-clip(VALUE); (border-box, padding-box, content-box) */
 @mixin background-clip($clip) {
   -webkit-background-clip : $clip;
   -moz-background-clip : $clip;
   background-clip : $clip; 
 }
 
-// .box-sizing(VALUE); (border-box, padding-box, content-box)
+/* .box-sizing(VALUE); (border-box, padding-box, content-box) */
 @mixin box-sizing($boxsize: border-box) {
   -webkit-box-sizing : $boxsize;
   -moz-box-sizing : $boxsize;
@@ -255,14 +262,14 @@
   box-sizing : $boxsize; 
 }
 
-// For image replacement
+/* For image replacement */
 @mixin hide-text() {
   text-indent : 100%;
   white-space : nowrap;
   overflow : hidden; 
 }
 
-// Hide from visual and speaking browsers
+/* Hide from visual and speaking browsers */
 @mixin hidden() {
   display : none !important; 
   visibility : hidden; 
@@ -272,18 +279,18 @@
   visibility: hidden;
 }
 
-// Hide but maintain layout
+/* Hide but maintain layout */
 @mixin invisible() { 
   visibility : hidden; 
 }
 
-// .resize(VALUE) (none, both, horizontal, vertical, inherit)
+/* .resize(VALUE) (none, both, horizontal, vertical, inherit) */
 @mixin resize($direction: both) {
   resize : $direction;
   overflow : auto; 
 }
 
-// .userselect(VALUE) (all, element, none, text)
+/* .userselect(VALUE) (all, element, none, text) */
 @mixin user-select($select) {
   -webkit-user-select : $select;
   -moz-user-select : $select;
@@ -291,7 +298,7 @@
   user-select : $select; 
 }
 
-// Hidden but available to speaking browsers
+/* Hidden but available to speaking browsers */
 @mixin visuallyhidden() { 
   overflow : hidden; 
   position : absolute;
@@ -303,7 +310,7 @@
   border : 0; 
 }
 
-// Make visuallyhidden focusable with a keyboard
+/* Make visuallyhidden focusable with a keyboard */
 .visuallyhidden.focusable:active, 
 .visuallyhidden.focusable:focus { 
   position : static;
diff --git a/_sass/_page.scss b/_sass/_page.scss
index b877750..3406330 100644
--- a/_sass/_page.scss
+++ b/_sass/_page.scss
@@ -1,3 +1,7 @@
+/* ==========================================================================
+   Page layout
+   ========================================================================== */
+
 body {
 	margin: 0;
 	padding: 0;
@@ -5,62 +9,88 @@ body {
 	background-color: $body-color;
 }
 
-// Main
-// --------------------------------------------------
+/* 
+   Main content
+   ========================================================================== */
+
 .entry,
 .hentry {
 	@include clearfix;
+
 	h1, h2, h3, h4, h5, h6, p, li {
 		word-wrap: break-word;
 	}
 }
+
 .entry-content {
 	@include font-size(16);
+
 	// Dotted line underlines for links
 	p > a,
 	li > a {
 		border-bottom: 1px dotted lighten($link-color, 50);
+
 		&:hover {
 			border-bottom-style: solid;
 		}
 	}
+
+	li {
+		margin-bottom: 7px;
+	}
+
+	.footnotes {
+		ol, li, p {
+			@include font-size(14);
+		}
+	}
 }
 
-// Entry Header
-// --------------------------------------------------
+/* 
+   Entry header
+   ========================================================================== */
+
 .entry-header {
 	width: 100%;
 	overflow: hidden;
 	position: relative;
 }
+
 .header-title {
 	text-align: center;
 	margin: 30px 0 0;
+
 	h1 {
 		margin: 10px 20px;
 		font-weight: 700;
 		@include font-rem(32);
 		color: lighten($base-color,20);
+
 		@media #{$medium} {
 			@include font-rem(48);
 		}
+
 		@media #{$large} {
 			@include font-rem(60);
 		}
 	}
+
 	h2 {
 		margin: 0;
 		@include font-rem(18);
 		text-transform: uppercase;
 		color: lighten($base-color,40);
+
 		@media #{$medium} {
 			@include font-rem(24);
 		}
 	}
+
 	p {
 		color: lighten($base-color,20);
 	}
 }
+
 .feature .header-title {
 	position: absolute;
 	top: 0;
@@ -69,38 +99,43 @@ body {
 	width: 100%;
 	height: $feature-image-height;
 	overflow: hidden;
+
 	.header-title-wrap {
 		display: table-cell;
 		vertical-align: middle;
 		margin: 0 auto;
 		text-align: center;
 	}
+
 	h1 {
 		margin: 10px;
 		font-weight: 700;
 		margin: 10px 60px;
-		color: $white;
+		color: #fff;
 		text-shadow: 1px 1px 4px rgba($base-color,0.6);
+
 		a {
-			color: $white;
-		}
-		@media #{$large} {
+			color: #fff;
 		}
 	}
+
 	h2 {
 		margin: 0;
-		color: $white;
+		color: #fff;
 		text-transform: uppercase;
+
 		@media #{$medium} {
 			a {
-				color: $white;
+				color: #fff;
 			}
 		}
 	}
+
 	p {
-		color: $white;
+		color: #fff;
 	}
 }
+
 .entry-image {
 	position: relative;
 	top: -50%; 
@@ -109,6 +144,7 @@ body {
 	height: 200%;
 	min-height: $feature-image-height;
 	overflow: hidden;
+
 	&:after {
 		content: '';
 		position: absolute;
@@ -118,6 +154,7 @@ body {
 		height: 100%;
 		background-color: rgba($base-color,0.3);
 	}
+
 	img {
 		position: absolute; 
 		top: 0; 
@@ -129,18 +166,23 @@ body {
 		min-height: $feature-image-height; // match .entry-image min-height
 	}
 }
+
 // Feature Image height on Front Page
 #post-index {
+
 	&.feature .header-title {
 		height: $front-page-feature-image-height;
 	}
+
 	.entry-image {
 		min-height: $front-page-feature-image-height;
+
 		img {
 			min-height: $front-page-feature-image-height;
 		}
 	}
 }
+
 // Feature Image Caption
 .image-credit {
 	position: absolute;
@@ -150,134 +192,165 @@ body {
 	max-width: 440px;
 	padding: 10px 15px;
 	background-color: rgba($base-color,0.5);
-	color: $white;
+	color: #fff;
 	@include font-rem(12);
 	text-align: right;
 	@include border-radius(3px,0,0,3px);
 	z-index: 10;
+
 	@media #{$medium} {
 		max-width: 760px;
 	}
+
 	@media #{$large} {
 		max-width: 960px;
 	}
+
 	a {
-		color: $white;
+		color: #fff;
 		text-decoration: none;
 	}
 }
 
-// Single Post and Page
-// --------------------------------------------------
+/* 
+   Single post and page
+   ========================================================================== */
+
 .entry-meta {
 	@include font-rem(12);
 	text-transform: uppercase;
 	color: lighten($base-color,60);
+
 	a {
 		color: lighten($base-color,60);
 	}
+
 	.vcard {
+
 		&:before {
 			content: " by ";
 		}
 	}
+
 	.tag {
 		display: inline-block;
 		margin: 4px;
-		color: $white;
+		color: #fff;
 		@include rounded(3px);
 		background-color: lighten($base-color,50);
+
 		span {
 			float: left;
 			padding: 2px 6px;
 		}
+
 		.count {
 			background-color: lighten($base-color,40);
 			@include border-radius(3px,3px,0,0);
 		}
+
 		&:hover {
 			background-color: lighten($base-color,40);
 		}
 	}
+
 	.entry-reading-time {
 		float: right;
 	}
 }
+
 header .entry-meta {
 	display: none; // hide header meta on small screens
+
 	@media #{$medium} {
 		display: block;
 	}
 }
+
 #post,
 #page {
+
 	.entry-content {
 		margin: 40px 2px 20px 2px;
 		padding: 10px 15px;
-		background-color: $white;
-		box-shadow: 0 0 0 0, 0 6px 12px rgba($black,0.1);
+		background-color: #fff;
+		box-shadow: 0 0 0 0, 0 6px 12px rgba(#000,0.1);
 		@include rounded(3px);
+
 		@media #{$medium} {
 			margin-left: 10px;
 			margin-right: 10px;
 			padding: 20px 30px;
 		}
+
 		@media #{$large} {
 			max-width: 800px;
 			margin: 50px auto 30px auto;
 			padding: 50px 80px;
+
 			> p:first-child {
 				@include font-size(20);
 			}
 		}
 	}
+
 	#disqus_thread {
 		margin: 40px 2px 20px 2px;
 		padding: 10px 15px;
-		background-color: $white;
-		box-shadow: 0 0 0 1px rgba($border-color,0.1), 0 6px 12px rgba($black,0.1);
+		background-color: #fff;
+		box-shadow: 0 0 0 1px rgba($border-color,0.1), 0 6px 12px rgba(#000,0.1);
 		@include rounded(3px);
+
 		@media #{$medium} {
 			margin-left: 10px;
 			margin-right: 10px;
 			padding: 20px 30px;
 		}
+
 		@media #{$large} {
 			max-width: 800px;
 			padding: 50px 80px;
 			margin: 0 auto 30px auto;
 		}
 	}
+
 	.entry-meta {
 		margin: 50px 30px 30px;
 		text-align: center;
 	}
 }
+
 .entry-tags {
 	display: block;
 	margin-bottom: 6px;
 }
+
 .tag-heading,
 .year-heading {
 	margin-top: 0;
 }
+
 // Permalink icon for link post
 .permalink {
 	margin-right: 7px;
 }
+
 // Post Pagination Module
 .pagination {
 	margin: 20px 10px;
 	text-align: center;
+
 	ul {
 		display: inline;
 		margin-left: 10px;
 		margin-right: 10px;
 	}
+
 	li {
 		padding-left: 4px;
 		padding-right: 4px;
 	}
+
 	.current-page {
 		font-weight: 700;
 	}
@@ -288,85 +361,106 @@ header .entry-meta {
 	position: relative;
 	margin: 40px 2px 20px 2px;
 	padding: 40px 15px 25px;
-	background-color: $white;
-	box-shadow: 0 0 0 1px rgba($border-color,0.1), 0 6px 12px rgba($black,0.1);
+	background-color: #fff;
+	box-shadow: 0 0 0 1px rgba($border-color,0.1), 0 6px 12px rgba(#000,0.1);
 	@include rounded(3px);
+
 	@media #{$medium} {
 		margin: 50px 10px 20px 10px;
 		padding: 50px 40px 25px;
 	}
+
 	@media #{$large} {
 		max-width: 800px;
 		padding: 50px 80px;
 		margin: 60px auto;
 	}
+
 	text-align: center;
 	@include clearfix;
 }
+
 .read-more-header {
 	position: absolute;
 	top: -20px;
 	left: 0;
 	right: 0;
 	height: 35px;
+
 	a {
 		@extend .btn;
 	}
 }
+
 .read-more-content {
 	@include font-size(16);
+
 	// Dotted line underlines for links
 	p > a,
 	li > a {
 		border-bottom: 1px dotted lighten($link-color, 50);
+
 		&:hover {
 			border-bottom-style: solid;
 		}
 	}
+
 	h3 {
 		margin: 0;
 		@include font-rem(28);
+
 		a { 
 			color: $text-color;
 		}
+
 		@media #{$medium} {
 			@include font-rem(36);
 		}
 	}
 }
+
 .read-more-list {
 	border-top: solid 2px lighten($base-color,80);
 }
+
 .list-item {
 	width: 100%;
 	text-align: left;
+
 	h4 { 
 		@include font-rem(18);
 		margin-bottom: 0; 
 	}
+
 	span { 
 		display: block;
 		@include font-rem(14);
 		color: lighten($base-color,50);
 	}
+
 	@media #{$medium} {
 		width: 49%;
 		float: left;
+
 		&:nth-child(2) {
 			text-align: right;
 		}
 	}
 }
 
-// Post Index 
-// --------------------------------------------------
+/* 
+   Post index
+   ========================================================================== */
+
 #post-index {
 	#main {
 		margin: 40px 2px 20px 2px;
+
 		@media #{$medium} {
 			margin-left: 20px;
 			margin-right: 20px;
 		}
+
 		@media #{$large} {
 			max-width: 800px;
 			margin-top: 50px;
@@ -374,63 +468,77 @@ header .entry-meta {
 			margin-right: auto;
 		}
 	}
+
 	article {
-		background-color: $white;
+		background-color: #fff;
 		box-shadow: 0 0 0 0, 0 6px 12px rgba($base-color,0.1);
 		@include rounded(3px);
 		margin-bottom: 20px;
 		padding: 25px 15px;
+
 		@media #{$medium} {
 			padding: 30px;
 		}
+
 		@media #{$large} {
 			margin-bottom: 30px;
 			padding: 50px 80px;
 		}
 	}
 }
+
 .entry-image-index {
 	margin-top: -25px;
 	margin-left: -15px;
 	margin-right: -15px;
 	margin-bottom: 10px;
+
 	@media #{$medium} {
 		margin-top: -30px;
 		margin-left: -30px;
 		margin-right: -30px;
 		margin-bottom: 15px;
 	}
+
 	@media #{$large} {
 		margin-top: -50px;
 		margin-left: -80px;
 		margin-right: -80px;
 		margin-bottom: 20px;
 	}
+
 	img {
 		@include border-radius(3px,0,0,3px); // round image corners
 	}
 }
 
-// Footer
-// --------------------------------------------------
+/* 
+   Footer
+   ========================================================================== */
+
 .footer-wrapper {
 	@include clearfix;
 	margin: 2em auto;
 	text-align: center;
 	color: lighten($text-color,20);
+
 	a {
 		color: lighten($text-color,20);
 	}
 }
 
-// Social Share
-// --------------------------------------------------
+/* 
+   Social share
+   ========================================================================== */
+
 .socialcount {
 	@include font-rem(16);
+
 	li { 
 		padding-left: 10px;
 		padding-right: 10px;
 	}
+
 	p > a,
 	li > a {
 		border-bottom-width: 0;
@@ -438,25 +546,32 @@ header .entry-meta {
 }
 
 
-// Browser Upgrade
-// --------------------------------------------------
+/* 
+   Browser upgrade
+   ========================================================================== */
+
 .upgrade {
 	padding: 10px;
 	text-align: center;
 }
 
-// Google Search
-// --------------------------------------------------
+/* 
+   Google Search
+   ========================================================================== */
+
 #goog-fixurl {
+
 	ul {
 		list-style: none;
 		margin-left: 0;
 		padding-left: 0;
+
 		li {
 			list-style-type: none;
 		}
 	}
 }
+
 #goog-wm-qt {
 	width: auto;
 	margin-right: 10px;
@@ -464,13 +579,14 @@ header .entry-meta {
 	padding: 8px 20px;
 	display: inline-block;
 	@include font-rem(14);
-	background-color: $white;
+	background-color: #fff;
 	color: $text-color;
 	border-width: 2px !important;
 	border-style: solid !important;
 	border-color: lighten($primary,50);
 	@include rounded(3px);
 }
+
 #goog-wm-sb {
 	@extend .btn;
-}
+}
\ No newline at end of file
diff --git a/_sass/_reset.scss b/_sass/_reset.scss
index 5674ada..bbd61d3 100644
--- a/_sass/_reset.scss
+++ b/_sass/_reset.scss
@@ -1,7 +1,7 @@
-//
-// Reset CSS
-// Adapted from http://github.com/necolas/normalize.css
-// --------------------------------------------------
+/* ==========================================================================
+   Reset CSS
+   Adapted from http://github.com/necolas/normalize.css
+   ========================================================================== */
 
 *, *:after, *:before {
   -webkit-box-sizing: border-box;
diff --git a/_sass/_site.scss b/_sass/_site.scss
index 68c2dd3..f678fe3 100644
--- a/_sass/_site.scss
+++ b/_sass/_site.scss
@@ -1,56 +1,80 @@
-// Selection
-// --------------------------------------------------
+/* ==========================================================================
+   Site utilities
+   ========================================================================== */
+
+/* 
+   Selection
+   ========================================================================== */
+
 ::-moz-selection { 
 	background-color: lighten($base-color, 65%); 
 	color: $base-color; 
 	text-shadow: none; 
-}  	
+}
+
 ::selection { 
 	background-color: lighten($base-color, 65%); 
 	color: $base-color; 
 	text-shadow: none; 
 }
 
-// Global Classes
-// --------------------------------------------------
+/* 
+   Global classes
+   ========================================================================== */
+
+/* wrapper */
 .wrap {
 	margin: 0 auto;
 }
+
+/* capitalize */
 .all-caps {
 	text-transform: uppercase;
 }
+
+/* float image to the left */
 .image-left {
 	float: none;
 	@media #{$medium} {
 		float: left;
 	}
 }
+
+/* float image to the right */
 .image-right {
 	float: none;
 	@media #{$medium} {
 		float: right;
 	}
 }
+
+/* remove styling from a list element */
 .unstyled-list {
 	list-style: none;
 	margin-left: 0;
 	padding-left: 0;
+
 	li {
 		list-style-type: none;
 	}
 }
+
+/* inline a list */
 .inline-list {
 	list-style: none;
 	margin-left: 0;
 	padding-left: 0;
+
 	li {
 		list-style-type: none;
 		display: inline;
 	}
 }
 
-// Global Transition
-// ---------------------------------------------------
+/* 
+   Global transition
+   ========================================================================== */
+
 b, i, strong, em, blockquote, p, q, span, figure, img, h1, h2, header, input, a {
-	@include transition(all .2s ease);
+	@include transition(all 0.2s ease);
 }
\ No newline at end of file
diff --git a/_sass/_syntax.scss b/_sass/_syntax.scss
index 388b4c1..34cb79d 100644
--- a/_sass/_syntax.scss
+++ b/_sass/_syntax.scss
@@ -1,3 +1,7 @@
+/* ==========================================================================
+   Syntax Highlighting
+   ========================================================================== */
+
 pre.highlight {
 	padding: 1em;
 }
@@ -10,11 +14,13 @@ pre.highlight {
 	border: 1px solid darken($body-color, 5);
 	background-color: #272822;
 	@include rounded(3px);
+
 	pre {
 		position: relative;
 		margin: 0;
 		padding: 1em;
 	}
+
 	.lineno { padding-right: 24px; color: #8f908a;}
 	.hll { background-color: #49483e }
 	.c { color: #75715e } /* Comment */
diff --git a/_sass/_typography.scss b/_sass/_typography.scss
index 5640631..304e100 100644
--- a/_sass/_typography.scss
+++ b/_sass/_typography.scss
@@ -1,37 +1,53 @@
-// Body
-// --------------------------------------------------
+/* ==========================================================================
+   Typography
+   ========================================================================== */
+
+/* 
+   Body
+   ========================================================================== */
+
 body {
 	font-family: $base-font;
 	color: $text-color;
 }
 
-// Headings
-// --------------------------------------------------
+/* 
+   Headings
+   ========================================================================== */
+
 h1, h2, h3, h4, h5, h6 {
 	font-family: $heading-font;
 }
+
 h1 {
 	@include font-rem(28);
+
 	@media #{$medium} {
 		@include font-rem(32);
 	}
 }
 
-// Links
-// --------------------------------------------------
+/* 
+   Links
+   ========================================================================== */
+
 a { 
 	text-decoration: none;
 	color: $link-color; 
+
 	&:visited { 
 		color: lighten($link-color, 20); 
 	}
+
 	&:hover { 
 		color: darken($link-color, 20); 
 	}
+
 	&:focus { 
 		outline: thin dotted; 
 		color: darken($link-color, 20);
 	}
+
 	&:hover, 
 	&:active { 
 		outline: 0; 
@@ -44,8 +60,10 @@ a {
 	font-style: normal;
 }
 
-// Figures
-// --------------------------------------------------
+/* 
+   Captions
+   ========================================================================== */
+
 figcaption {
 	padding-top: 10px;
 	@include font(14);
@@ -53,8 +71,10 @@ figcaption {
 	color: lighten($text-color, 10);
 }
 
-// Note text
-// --------------------------------------------------
+/* 
+   Notices
+   ========================================================================== */
+
 .notice {
 	margin-top: 1.5em;
 	padding: .5em 1em;
@@ -65,61 +85,58 @@ figcaption {
 	@include rounded(3px);
 }
 
-// Blockquotes
-// --------------------------------------------------
+/* 
+   Blockquotes
+   ========================================================================== */
+
 blockquote {
 	font-family: $alt-font;
 	font-style: italic;
 	border-left: 8px solid $border-color;
 	padding-left: 20px;
+
 	@media #{$medium} {
 		margin-left: -28px;
 	}
 }
 
-// List items
-// --------------------------------------------------
-.entry-content li {
-	margin-bottom: 7px;
-}
-
-// Footnotes
-// --------------------------------------------------
-.entry-content .footnotes {
-	ol, li, p {
-		@include font-size(14);
-	}
-}
+/* 
+   Code
+   ========================================================================== */
 
-// Code
-// --------------------------------------------------
 tt, code, kbd, samp, pre {
 	font-family: $code-font;
 }
+
 p,
 li { 
+
 	code {
 		@include font-rem(12);
 		line-height: 1.5;
 		white-space: nowrap;
 		margin: 0 2px;
 		padding: 0 5px;
-		border: 1px solid lighten($black, 90);
-		background-color: lighten($black, 95);
+		border: 1px solid lighten(#000, 90);
+		background-color: lighten(#000, 95);
 		@include rounded(3px);
 	}
 }
+
 pre {
+
 	@include font-rem(12);
 	line-height: 1.5;
 	overflow-x: auto;
+
 	&::-webkit-scrollbar {
 		height: 12px;
 		background-color: #34362e;
 		border-radius: 0 0 4px 4px;
 	}
+
 	&::-webkit-scrollbar-thumb:horizontal {
 		background-color: #6a6d5d;
 		@include rounded(4px);
 	}
-}
+}
\ No newline at end of file
diff --git a/_sass/_variables.scss b/_sass/_variables.scss
index 2ee807f..e0a47e7 100644
--- a/_sass/_variables.scss
+++ b/_sass/_variables.scss
@@ -1,50 +1,56 @@
-// Page
-// --------------------------------------------------
+/* ==========================================================================
+   SCSS Variables
+   ========================================================================== */
 
-$feature-image-height: 400px; // min 150px recommended
-$front-page-feature-image-height: 400px; // min 150px recommended
+/* 
+   Page
+   ========================================================================== */
 
-// Typography
-// --------------------------------------------------
+$feature-image-height            : 400px; // min 150px recommended
+$front-page-feature-image-height : 400px; // min 150px recommended
 
-$base-font: 'Lato', Calibri, Arial, sans-serif;
-$heading-font: $base-font;
-$caption-font: $base-font;
-$code-font: monospace;
-$alt-font: serif;
+/* 
+   Typography
+   ========================================================================== */
 
-$doc-font-size: 16;
-$doc-line-height: 26;
+$base-font                       : 'Lato', Calibri, Arial, sans-serif;
+$heading-font                    : $base-font;
+$caption-font                    : $base-font;
+$code-font                       : monospace;
+$alt-font                        : serif;
+
+$doc-font-size                   : 16;
+$doc-line-height                 : 26;
 
 
 // set-up the body font-size / line-height
 body {
-	margin-top: 0px + $doc-line-height;
-	font-size: 0px + $doc-font-size;	
+  margin-top: 0px + $doc-line-height;
+  font-size: 0px + $doc-font-size;
 }
 
+/* 
+   Colors
+   ========================================================================== */
 
-// Colors
-// --------------------------------------------------
-$base-color				   : rgba(#222,0.8);
-$body-color      		 : #e8e8e8;
-$text-color      		 : rgba(#222,0.8);
-$comp-color 	 		   : complement(#222); 
-$border-color    		 : lighten($base-color,60);
-$white           		 : #fff;
-$black           		 : #000;
-$link-color 		     : rgba(#222,0.8);
+$base-color                      : rgba(#222,0.8);
+$body-color                      : #e8e8e8;
+$text-color                      : rgba(#222,0.8);
+$comp-color                      : complement(#222);
+$border-color                    : lighten($base-color,60);
+$link-color                      : rgba(#222,0.8);
 
-$primary			       : #222;
-$success			       : #5cb85c;
-$warning			       : #dd8338;
-$danger				       : #C64537;
-$info				         : #308cbc;
+$primary                         : #222;
+$success                         : #5cb85c;
+$warning                         : #dd8338;
+$danger                          : #C64537;
+$info                            : #308cbc;
 
 
-// Screen Size
-// --------------------------------------------------
+/* 
+   Screen sizes
+   ========================================================================== */
 
-$small               : "only screen and (min-width: 30em)";
-$medium              : "only screen and (min-width: 48em)";
-$large               : "only screen and (min-width: 62.5em)";
\ No newline at end of file
+$small                           : "only screen and (min-width: 30em)";
+$medium                          : "only screen and (min-width: 48em)";
+$large                           : "only screen and (min-width: 62.5em)";
\ No newline at end of file
diff --git a/_sass/vendor/magnific-popup/_settings.scss b/_sass/vendor/magnific-popup/_settings.scss
index 56bd651..c023507 100644
--- a/_sass/vendor/magnific-popup/_settings.scss
+++ b/_sass/vendor/magnific-popup/_settings.scss
@@ -3,7 +3,7 @@
 ////////////////////////
 
 // overlay
-$mfp-overlay-color:                   $black;                     // Color of overlay screen
+$mfp-overlay-color:                   #000;                     // Color of overlay screen
 $mfp-overlay-opacity:                 0.8;                        // Opacity of overlay screen
 $mfp-shadow:                          0 0 8px rgba(0, 0, 0, 0.6); // Shadow on image or iframe
 
@@ -16,11 +16,11 @@ $mfp-z-index-base:                    1040;                       // Base z-inde
 // controls
 $mfp-include-arrows:                  true;                       // Include styles for nav arrows
 $mfp-controls-opacity:                1;                          // Opacity of controls
-$mfp-controls-color:                  $white;                     // Color of controls
-$mfp-controls-border-color:           $white;                     // Border color of controls
-$mfp-inner-close-icon-color:          $white;                     // Color of close button when inside
+$mfp-controls-color:                  #fff;                     // Color of controls
+$mfp-controls-border-color:           #fff;                     // Border color of controls
+$mfp-inner-close-icon-color:          #fff;                     // Color of close button when inside
 $mfp-controls-text-color:             #CCC;                       // Color of preloader and "1 of X" indicator
-$mfp-controls-text-color-hover:       $white;                     // Hover color of preloader and "1 of X" indicator
+$mfp-controls-text-color-hover:       #fff;                     // Hover color of preloader and "1 of X" indicator
 $mfp-IE7support:                      true;                       // Very basic IE7 support
 
 // Iframe-type options