Merge branch 'hotfix/1.7.1'1.7.21.7.1

17 files changed, 618 insertions, 711 deletions

diff --git a/Gemfile.lock b/Gemfile.lock
index a2ae49b..91d55cb 100644
--- a/Gemfile.lock
+++ b/Gemfile.lock
@@ -38,7 +38,7 @@ GEM
     rb-fsevent (0.9.7)
     rb-inotify (0.9.7)
       ffi (>= 0.5.0)
-    rouge (1.10.1)
+    rouge (1.11.1)
     safe_yaml (1.0.4)
     sass (3.4.22)
     sawyer (0.7.0)
diff --git a/_posts/2013-08-16-code-highlighting-post.md b/_posts/2013-08-16-code-highlighting-post.md
index ccf93da..e41a838 100644
--- a/_posts/2013-08-16-code-highlighting-post.md
+++ b/_posts/2013-08-16-code-highlighting-post.md
@@ -111,4 +111,10 @@ module Jekyll
     end
   end
 end
-~~~
\ No newline at end of file
+~~~
+
+### GitHub Gist Embed
+
+An example of a Gist embed below.
+
+<script src="https://gist.github.com/mmistakes/43a355923921d22cd993.js"></script>
\ No newline at end of file
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..1547094 100644
--- a/_sass/_coderay.scss
+++ b/_sass/_coderay.scss
@@ -1,9 +1,13 @@
+/* ==========================================================================
+   CodeRay Syntax Highlighting
+   ========================================================================== */
+
 .CodeRay {
   font-family: $code-font;
   @include font(12);
   color: #d0d0d0;
   margin-bottom: 1.5em;
-  @include rounded(3px);
+  border-radius: 3px;
 }
 
 .CodeRay .code pre {
diff --git a/_sass/_dl-menu.scss b/_sass/_dl-menu.scss
index bb9fe22..5c2c523 100644
--- a/_sass/_dl-menu.scss
+++ b/_sass/_dl-menu.scss
@@ -1,5 +1,10 @@
+/* ==========================================================================
+   DL Menu
+   ========================================================================== */
+
 .dl-menuwrapper {
 	width: 100%;
+	height: 100%;
 	position: absolute;
 	top: 0;
 	left: 0;
@@ -10,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;
@@ -28,32 +35,38 @@
 		position: relative;
 		cursor: pointer;
 		outline: none;
-		@include border-radius(0,3px,0,0);
+		border-radius: 0 0 3px 0;
 		opacity: 0.6;
+		box-shadow: 0 12px 24px rgba(#000,0.4);
+
 		@media #{$medium} {
-			@include border-radius(3px,3px,3px,3px);
+			border-radius: 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;
@@ -61,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;
@@ -90,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);
@@ -115,21 +133,23 @@
 			-moz-transform: rotate(180deg);
 			transform: rotate(180deg);
 		}
+
 		> a:after {
 			right: 10px;
 			color: rgba(0,0,0,0.15);
 		}
 	}
+
 	.dl-menu {
 		margin: 0;
-		position: absolute;
+		position: relative;
 		width: 100%;
-		max-width: 400px;
+		max-height: 90%;
 		overflow-y: auto;
-		max-height: 600px;
+	  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);
@@ -137,16 +157,18 @@
 		-moz-backface-visibility: hidden;
 		backface-visibility: hidden;
 		z-index: inherit;
+
 		@media #{$medium} {
-			@include border-radius(3px,3px,3px,3px);
-			max-height: 650px;
+			border-radius: 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;
@@ -154,18 +176,22 @@
 		-moz-transform: translateY(0px);
 		transform: translateY(0px);
 	}
+
 	.dl-submenu {
-		@include rounded(3px);
-		box-shadow: 0 12px 24px rgba($black,0.4);
+		border-radius: 3px;
+		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".
@@ -178,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,
@@ -185,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 {
@@ -325,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;
@@ -337,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..370a8d6 100644
--- a/_sass/_elements.scss
+++ b/_sass/_elements.scss
@@ -1,3 +1,7 @@
+/* ==========================================================================
+   Base Elements and Components
+   ========================================================================== */
+
 hr { 
     display: block; 
     margin: 1em 0; 
@@ -8,143 +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;
+      transform: translate(0, 0);
+      transition-duration: 0.25s;
+
       &:hover {
-        @include translate(0, -5px);
-        @include box-shadow(0 0 10px fade($base-color, 20));
+        transform: translate(0, -5px);
+        box-shadow: 0 0 10px rgba($base-color, 0.2);
       }
     }
   }
+
+  /* 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);
+  border-radius: 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;
-  @include rounded(4px);
+  border-radius: 4px;
 }
\ No newline at end of file
diff --git a/_sass/_gist.scss b/_sass/_gist.scss
deleted file mode 100644
index f6d6299..0000000
--- a/_sass/_gist.scss
+++ /dev/null
@@ -1,186 +0,0 @@
-.gist {
-
-  .highlight {
-    color:#000;
-  }
-
-  .render-container .render-viewer-error,
-  .render-container .render-viewer-fatal,
-  .render-container .octospinner {
-    display:none;
-  }
-
-  .gist-render iframe {
-    width:100%;
-  }
-
-  .gist-file.gist-render .highlight {
-    border:none;
-  }
-
-  .gist-file .gist-meta .highlight a {
-    font-weight:700;
-    color:#666;
-    text-decoration:none;
-  }
-
-  .highlight {
-    background:#fff;
-  }
-
-  .highlight .err {
-    color:#a61717;
-    background-color:#e3d2d2;
-  }
-
-  .highlight .cp {
-    color:#999;
-    font-weight:700;
-  }
-
-  .highlight .cs {
-    color:#999;
-    font-weight:700;
-    font-style:italic;
-  }
-
-  .highlight .gd {
-    color:#000;
-    background-color:#fdd;
-  }
-
-  .highlight .gd .x {
-    color:#000;
-    background-color:#faa;
-  }
-
-  .highlight .ge {
-    color:#000;
-    font-style:italic;
-  }
-
-  .highlight .gi {
-    color:#000;
-    background-color:#dfd;
-  }
-
-  .highlight .gi .x {
-    color:#000;
-    background-color:#afa;
-  }
-
-  .highlight .go {
-    color:#888;
-  }
-
-  .highlight .gs {
-    font-weight:700;
-  }
-
-  .highlight .gu {
-    color:#aaa;
-  }
-
-  .highlight .nb {
-    color:#0086b3;
-  }
-
-  .highlight .ni {
-    color:purple;
-  }
-
-  .highlight .nt {
-    color:navy;
-  }
-
-  .highlight .w {
-    color:#bbb;
-  }
-
-  .highlight .sr {
-    color:#009926;
-  }
-
-  .highlight .ss {
-    color:#990073;
-  }
-
-  .highlight .c,
-  .highlight .cm,
-  .highlight .c1 {
-    color:#998;
-    font-style:italic;
-  }
-
-  .highlight .k,
-  .highlight .o,
-  .highlight .kc,
-  .highlight .kd,
-  .highlight .kp,
-  .highlight .kr,
-  .highlight .ow,
-  .highlight .n,
-  .highlight .p {
-    color:#000;
-    font-weight:700;
-  }
-
-  .highlight .gr,
-  .highlight .gt {
-    color:#a00;
-  }
-
-  .highlight .gh,
-  .highlight .bp {
-    color:#999;
-  }
-
-  .highlight .gp,
-  .highlight .nn {
-    color:#555;
-  }
-
-  .highlight .kt,
-  .highlight .nc {
-    color:#458;
-    font-weight:700;
-  }
-
-  .highlight .m,
-  .highlight .mf,
-  .highlight .mh,
-  .highlight .mi,
-  .highlight .mo,
-  .highlight .il {
-    color:#099;
-  }
-
-  .highlight .s,
-  .highlight .sb,
-  .highlight .sc,
-  .highlight .sd,
-  .highlight .s2,
-  .highlight .se,
-  .highlight .sh,
-  .highlight .si,
-  .highlight .sx,
-  .highlight .s1 {
-    color:#d14;
-  }
-
-  .highlight .na,
-  .highlight .no,
-  .highlight .nv,
-  .highlight .vc,
-  .highlight .vg,
-  .highlight .vi {
-    color:teal;
-  }
-
-  .highlight .ne,
-  .highlight .nf {
-    color:#900;
-    font-weight:700;
-  }
-
-}
\ No newline at end of file
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..01a8d16 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,219 +54,38 @@
   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
-// --------------------------------------------------
-
-@mixin horizontal($startColor : $white, $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+
-  background-image  : -moz-linear-gradient(left, $startColor, $endColor); 					 // FF 3.6+
-  background-image  : -ms-linear-gradient(left, $startColor, $endColor); 						 // IE10
-  background-image  : -o-linear-gradient(left, $startColor, $endColor); 						 // Opera 11.10
-  background-image  : linear-gradient(left, $startColor, $endColor); 							 // W3C
-  background-repeat : repeat-x; 
-}
-
-@mixin vertical($startColor : $white, $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;
-  background-image  : -moz-linear-gradient(top, $startColor, $endColor);   					 // FF 3.6+
-  background-image  : -ms-linear-gradient(top, $startColor, $endColor); 						 // IE10
-  background-image  : -o-linear-gradient(top, $startColor, $endColor); 						 // Opera 11.10
-  background-image  : linear-gradient(top, $startColor, $endColor); 							 // W3C
-  background-repeat : repeat-x; 
-}
-
-@mixin directional($startColor : $white, $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
-  background-image  : -webkit-linear-gradient($deg, $startColor, $endColor); 					// Safari 5.1+, Chrome 10+
-  background-image  : -o-linear-gradient($deg, $startColor, $endColor); 						// Opera 11.10
-  background-image  : linear-gradient($deg, $startColor, $endColor); 							// W3C
-  background-repeat : repeat-x; 
-}
-
-// .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;
-  border-right : solid 1px $right-color;
-  border-bottom : solid 1px $bottom-color; 
-}
-
-// ROUND CORNERS
-// --------------------------------------------------
-
-// .rounded(VALUE);
-@mixin rounded($radius:4px) {
-  -webkit-border-radius : $radius;
-  -moz-border-radius : $radius;
-  border-radius : $radius; 
-}
-
-// .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;
-  -webkit-border-bottom-left-radius : $bottomleft;
-  -webkit-border-top-left-radius : $topleft;
-  -moz-border-radius-topright : $topright;
-  -moz-border-radius-bottomright : $bottomright;
-  -moz-border-radius-bottomleft : $bottomleft;
-  -moz-border-radius-topleft : $topleft;
-  border-top-right-radius : $topright;
-  border-bottom-right-radius : $bottomright;
-  border-bottom-left-radius : $bottomleft;
-  border-top-left-radius : $topleft;
-  -webkit-background-clip : padding-box;
-  -moz-background-clip : padding;  
-  background-clip : padding-box; 
-}
-
-// .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);
-@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();
-@mixin text-shadow($shadow: 0 2px 3px rgba(0,0,0,.25)) {
-  text-shadow : $shadow; 
-}
-
-// TRANSFORMATIONS
-// --------------------------------------------------
-
-// .rotate(VALUEdeg);
-@mixin rotate($deg) {
-  -webkit-transform : rotate($deg);
-  -moz-transform : rotate($deg);
-  -ms-transform : rotate($deg);
-  -o-transform : rotate($deg);
-  transform : rotate($deg); 
-}
+/* 
+   Visibility
+   ========================================================================== */
 
-// .scale(VALUE);
-@mixin scale($ratio) {
-  -webkit-transform : scale($ratio);
-  -moz-transform : scale($ratio);
-  -ms-transform : scale($ratio);
-  -o-transform : scale($ratio);
-  transform : scale($ratio); 
-}
-
-// .skew(VALUE, VALUE);
-@mixin skew($x: 0, $y: 0) {
-  -webkit-transform : skew($x, $y);
-  -moz-transform : skew($x, $y);
-  -ms-transform : skew($x, $y);
-  -o-transform : skew($x, $y);
-  transform : skew($x, $y); 
-}
-
-// .transition(PROPERTY DURATION DELAY(OPTIONAL) TIMING-FINCTION);
-@mixin transition($transition) {
-  -webkit-transition : $transition;
-  -moz-transition : $transition;
-  -ms-transition : $transition;
-  -o-transition : $transition;
-  transition : $transition; 
-}
-
-// .translate(VALUE, VALUE)
-@mixin translate($x: 0, $y: 0) {
-  -webkit-transform : translate($x, $y);
-  -moz-transform : translate($x, $y);
-  -ms-transform : translate($x, $y);
-  -o-transform : translate($x, $y);
-  transform : translate($x, $y); 
-}
-
-@mixin translate3d($x: 0, $y: 0, $z: 0) {
-  -webkit-transform : translate($x, $y, $z);
-  -moz-transform : translate($x, $y, $z);
-  -ms-transform : translate($x, $y, $z);
-  -o-transform : translate($x, $y, $z);
-  transform : translate($x, $y, $z); 
-}
-
-@mixin animation($name, $duration: 300ms, $delay: 0, $ease: ease) {
-  -webkit-animation: $name $duration $delay $ease;
-  -moz-animation:    $name $duration $delay $ease;
-  -ms-animation:     $name $duration $delay $ease;
-}
-
-// BACKGROUND
-// --------------------------------------------------
-
-// .background-alpha(VALUE VALUE);
-@mixin background-alpha($color: $white, $alpha: 1) {
-  background-color : hsla(hue($color), saturation($color), lightness($color), $alpha); 
-}
-
-// .background-size(VALUE VALUE);
-@mixin background-size($size){
-  -webkit-background-size : $size;
-  -moz-background-size : $size;
-  -o-background-size : $size;
-  background-size : $size; 
-}
-
-// .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)
-@mixin box-sizing($boxsize: border-box) {
-  -webkit-box-sizing : $boxsize;
-  -moz-box-sizing : $boxsize;
-  -ms-box-sizing : $boxsize;
-  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,26 +95,12 @@
   visibility: hidden;
 }
 
-// Hide but maintain layout
+/* Hide but maintain layout */
 @mixin invisible() { 
   visibility : hidden; 
 }
 
-// .resize(VALUE) (none, both, horizontal, vertical, inherit)
-@mixin resize($direction: both) {
-  resize : $direction;
-  overflow : auto; 
-}
-
-// .userselect(VALUE) (all, element, none, text)
-@mixin user-select($select) {
-  -webkit-user-select : $select;
-  -moz-user-select : $select;
-  -o-user-select : $select;
-  user-select : $select; 
-}
-
-// Hidden but available to speaking browsers
+/* Hidden but available to speaking browsers */
 @mixin visuallyhidden() { 
   overflow : hidden; 
   position : absolute;
@@ -303,7 +112,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..c6885a6 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);
+	border-radius: 3px 0 0 0;
 	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;
-		@include rounded(3px);
+		color: #fff;
+		border-radius: 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);
+			border-radius: 0 3px 3px 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);
-		@include rounded(3px);
+		background-color: #fff;
+		box-shadow: 0 0 0 0, 0 6px 12px rgba(#000,0.1);
+		border-radius: 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);
-		@include rounded(3px);
+		background-color: #fff;
+		box-shadow: 0 0 0 1px rgba($border-color,0.1), 0 6px 12px rgba(#000,0.1);
+		border-radius: 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);
-	@include rounded(3px);
+	background-color: #fff;
+	box-shadow: 0 0 0 1px rgba($border-color,0.1), 0 6px 12px rgba(#000,0.1);
+	border-radius: 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);
+		border-radius: 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
+		border-radius: 3px 3px 0 0; // 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);
+	border-radius: 3px;
 }
+
 #goog-wm-sb {
 	@extend .btn;
-}
+}
\ No newline at end of file
diff --git a/_sass/_reset.scss b/_sass/_reset.scss
index 5674ada..3dff727 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;
@@ -143,7 +143,7 @@ input[type="checkbox"] {
     cursor: pointer; // Improves usability and consistency of cursor style between image-type `input` and others.
 }
 input[type="search"] { // Appearance in Safari/Chrome
-  @include box-sizing(content-box);
+  box-sizing: content-box;
   -webkit-appearance: textfield;
 }
 input[type="search"]::-webkit-search-decoration,
diff --git a/_sass/_site.scss b/_sass/_site.scss
index 68c2dd3..a2f9069 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);
+	transition: all 0.2s ease;
 }
\ No newline at end of file
diff --git a/_sass/_syntax.scss b/_sass/_syntax.scss
index 388b4c1..2203e24 100644
--- a/_sass/_syntax.scss
+++ b/_sass/_syntax.scss
@@ -1,3 +1,7 @@
+/* ==========================================================================
+   Syntax Highlighting
+   ========================================================================== */
+
 pre.highlight {
 	padding: 1em;
 }
@@ -9,12 +13,14 @@ pre.highlight {
 	color: #d0d0d0;
 	border: 1px solid darken($body-color, 5);
 	background-color: #272822;
-	@include rounded(3px);
+	border-radius: 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..e87443e 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;
@@ -62,64 +82,61 @@ figcaption {
 	@include font-rem(14);
 	background-color: $body-color;
 	border: 1px solid darken($body-color,20);
-	@include rounded(3px);
+	border-radius: 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);
-		@include rounded(3px);
+		border: 1px solid lighten(#000, 90);
+		background-color: lighten(#000, 95);
+		border-radius: 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);
+		border-radius: 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
diff --git a/assets/css/main.scss b/assets/css/main.scss
index 937ef6f..83f780f 100644
--- a/assets/css/main.scss
+++ b/assets/css/main.scss
@@ -20,8 +20,7 @@ sitemap: false
 @import "site";
 @import "typography";
 @import "syntax";
-@import "coderay";
-@import "gist";
+// @import "coderay";
 @import "grid";
 @import "elements";
 @import "animations";