Update style.scss

Author: jacquesfunk

style.scss

@@ -1,3 +1,6 @@
+---
+---
+
 //
 // IMPORTS
 //
@@ -10,26 +13,14 @@
 /* BASE RULES */
 /**************/
 
-:root {
-  --white: #FFFFFF; /* white */
-  --purple: #301F6E; /* purple */
-  --orange: #F08C00; /* orange */
-  --green: #04947A; /* green */
-  --cyan: #2DE2E6; /* cyan */
-  --pink: #D82F86; /* pink */
-  --lightpink: #00FF15; /* light pink */
-  --darkpink: #D82F86 /* dark pink */
-  --darkblue: #023788; /* dark blue */
-}
-
 html {
   font-size: 100%;
 }
 
 body {
-	background: var(--purple);
+	background: $white;
   font: 18px/1.4 $helvetica;
-  color: var(--white);
+  color: $darkGray;
 }
 
 .container {
@@ -41,7 +32,7 @@ body {
 
 h1, h2, h3, h4, h5, h6 {
   font-family: $helveticaNeue;
-  color: var(--cyan);
+  color: $darkerGray;
   font-weight: bold;
 
   line-height: 1.7;
@@ -78,11 +69,11 @@ p {
 }
 
 a {
-  color: var(--orange);
+  color: $blue;
   text-decoration: none;
 	cursor: pointer;
   &:hover, &:active {
-    color: var(--orange);
+    color: $blue;
   }
 }
 
@@ -131,15 +122,16 @@ img {
 
 // Specify the color of the selection
 ::-moz-selection {
-  color: var(--darkpink);
+  color: $black;
   background: $lightGray;
 }
 ::selection {
-  color: var(--darkpink);
+  color: $black;
   background: $lightGray;
 }
 
 // Nicolas Gallagher's micro clearfix hack
+// http://nicolasgallagher.com/micro-clearfix-hack/
 .clearfix:before,
 .clearfix:after {
     content: " ";
@@ -200,7 +192,7 @@ img {
 
 .site-name {
   margin: 0;
-  color: var(--cyan);
+  color: $darkGray;
   cursor: pointer;
   font-family: $helveticaNeue;
   font-weight: 300;
@@ -210,7 +202,7 @@ img {
 
 .site-description {
   margin: -5px 0 0 0;
-  color: var(--cyan);
+  color: $gray;
   font-size: 16px;
 
   @include mobile {
@@ -233,14 +225,14 @@ nav {
 
   a {
     margin-left: 20px;
-    color: var(--cyan);
+    color: $darkGray;
     text-align: right;
     font-weight: 300;
     letter-spacing: 1px;
 
     @include mobile {
       margin: 0 10px;
-      color: var(--orange);
+      color: $blue;
     }
   }
 }
@@ -291,6 +283,7 @@ footer {
   text-align: center;
 }
 
-// Syntax highlighting and icons
+// Settled on moving the import of syntax highlighting to the bottom of the CSS
+// ... Otherwise it really bloats up the top of the CSS file and makes it difficult to find the start
 @import "highlights";
-@import "svg-icons";
+@import "svg-icons";