Color update

assets/css/_variables.scss

@@ -1,3 +1,11 @@
+/* Color Theme Swatches in Hex */
+$i-lightbrown: #736E58;
+$i-darkbrown: #595645;
+$i-graytan: #BFB8AA;
+$i-lighttan: #F2E4D8;
+$i-black: #0D0D0D;
+
+// OLD THEME
 $black: #000;
 $white: #fff;
 $blue: #2d89ec;

assets/css/main.scss

@@ -20,13 +20,13 @@ html {
 
 body {
   font-family: 'Montserrat', sans-serif;
-  color: $white;
+  color: $i-black; //$white;
   margin: 0;
-  background-color: $darken-gray;
+  background-color: $i-lighttan;// $darken-gray;
   -webkit-font-smoothing: antialiased;
   -moz-osx-font-smoothing: grayscale;
 
-  &.invert {
+  &.invert { // XXX
       color: $darken-gray;
       background-color: $white;
   }
@@ -34,10 +34,10 @@ body {
 
 h1, h2, h3, h4, h5, h6 {
   font-family: 'Lato', sans-serif;
-  color: $light-purple;
+  color: $i-darkbrown;// $light-purple;
   font-weight: 400;
 
-  .invert & {
+  .invert & { // XXX
       color: $dark-purple;
   }
 }
@@ -68,7 +68,7 @@ img {
 }
 
 a {
-  color: $light-pink;
+  color: $i-darkbrown; //$light-pink;
 
   .invert & {
     color: $dark-pink;
@@ -76,13 +76,13 @@ a {
 }
 
 blockquote {
-  border-left: 3px solid $dark-gray;
+  border-left: 3px solid $i-graytan; //$dark-gray;
   padding-left: 18px;
   margin-left: 21px;
   font-style: italic;
-  color: $lighten-gray;
+  color: $i-darkbrown; //$lighten-gray;
 
-  .invert & {
+  .invert & { // XXX
       border-left-color: $dark-purple;
       color: $dark-purple;
   }

assets/css/parts/_footer.scss

@@ -1,10 +1,10 @@
 .main-footer {
   padding: 15px 0;
-  background-color: #black;
+  background-color: $i-black;
 
   .copyright {
     text-align: center;
-    color: $light-purple;
+    color: $i-lighttan;
     font-size: 16px;
   }
 }

assets/css/parts/_front.scss

@@ -14,7 +14,7 @@
 
         ul {
             list-style-type: none;
-            border-bottom: 1px solid $dark-gray;
+            border-bottom: 1px solid $i-darkbrown; //$dark-gray;
 
             li {
                 display: inline-block;
@@ -22,12 +22,17 @@
                 padding: 0.5rem 1rem;
 
                 &.on {
-                    background-color: $dark-gray;
+                    background-color: $i-darkbrown; //$dark-gray;
+
+                    a {
+                        color: $i-lighttan;
+                    }
                 }
 
                 a {
                     text-decoration: none;
                     font-size: 16pt;
+                    color: $i-darkbrown;
                 }
             }
         }

assets/css/parts/_header.scss

@@ -1,7 +1,7 @@
 .main-header {
   font-family: 'Lato', sans-serif;
   padding: 15px 0;
-  background-color: $darken-gray;
+  background-color: $i-black; //$darken-gray;
   box-shadow: 0px -5px 15px rgba(0,0,0,.3);
 
   .header-flex {
@@ -17,7 +17,7 @@
       text-transform: uppercase;
       font-size: 27px;
       font-weight: 300;
-      color: $light-purple;
+      color: $i-lighttan; //$light-purple;
     }
   }
 }
@@ -29,18 +29,18 @@
   z-index: 10;
   width: 300px;
   height: 100%;
-  background-color: $darken-gray;
+  background-color: $i-black; //$darken-gray;
   padding: 25px 30px;
   transform: translate3d(-300px, 0, 0);
   ul {
-    background-color: $darken-gray;
+    background-color: $i-black; //$darken-gray;
     padding: 15px 0 0;
     margin: 0 -30px 0 -30px;
     list-style: none;
 
     li {
       border-bottom: 1px solid $black;
-      background-color: $darken-gray;
+      background-color: $i-black; //$darken-gray;
       a {
         display: block;
         margin: 0 30px;
@@ -49,10 +49,10 @@
         text-transform: uppercase;
         font-weight: 400;
         font-size: 16px;
-        color: $light-purple;
+        color: $i-lighttan; //$light-purple;
         &:hover {
           opacity: .8;
-          color: $light-pink;
+          color: $i-graytan; //$light-pink;
         }
       }
     }
@@ -75,7 +75,7 @@
 .search-icon-close {
   cursor: pointer;
   font-size: 18px;
-  color: $light-purple;
+  color: $i-lighttan; //$light-purple;
   transition: all .4s;
   &:hover {
     opacity: .8;

assets/css/parts/_post-page.scss

@@ -5,7 +5,7 @@
   padding: 0;
   margin: 0;
   height: 500px;
-  background-color: $darken-gray;
+  background-color: $i-lighttan; //$darken-gray;
   overflow: hidden;
 
   .cover-image {
@@ -20,7 +20,7 @@
   line-height: 1.75;
   margin-top: -5px;
   margin-bottom: 100px;
-  background-color: $darken-gray;
+  background-color: $i-lighttan; //$darken-gray;
   padding: 20px 50px;
   box-shadow: 0px 5px 5px 5px rgba(0, 0, 0, 0.1);
 
@@ -29,7 +29,7 @@
       font-family: 'Gentium Book Basic', serif !important;
   }
 
-  .invert & {
+  .invert & { // XXX
       background-color: $white;
       color: $black;
       box-shadow: 0px 3px 3px rgba(0, 0, 0, 0.1);
@@ -93,9 +93,9 @@
     font-size: 36px;
     text-align: center;
     margin: 0 0 20px;
-    color: $light-purple;
+    color: $i-darkbrown; //$light-purple;
 
-    .invert & {
+    .invert & { // XXX
         color: $dark-purple;
     }
   }
@@ -115,18 +115,18 @@
   margin-top: 30px;
   padding-bottom: 30px;
   padding-bottom: 30px;
-  border-bottom: 1px solid $dark-gray;
+  border-bottom: 1px solid $i-black; //$dark-gray;
   .page-tag,
   .page-share {
     text-transform: uppercase;
     font-size: 12px;
-    color: $light-purple;
+    color: $i-darkbrown; //$light-purple;
   }
   .page-tag {
     margin-bottom: 10px;
     a {
       text-decoration: none;
-      color: $light-pink;
+      color: $i-darkbrown; //$light-pink;
       &:hover {
         opacity: .8;
       }
@@ -137,7 +137,7 @@
     text-align: center;
     a {
       text-decoration: none;
-      color: $dark-gray;
+      color: $i-darkbrown; //$dark-gray;
       margin-left: 10px;
       font-size: 18px;
       &:hover {