fixes adafruit#1610 - more adjustments to new design with colors and link states

Author: jwcooper

assets/sass/base/_variables.scss

@@ -1,27 +1,28 @@
 $purple: #652f8f;
 $pink: #e90e8b;
 $gray: #999999;
+$dark-gray: #333333;
 $gray-border: #cecece;
 
 // derived from bootstrap variables
 
 // Extra small screen / phone
-$screen-xs:                  480px !default;
-$screen-phone:               $screen-xs !default;
+$screen-xs: 480px !default;
+$screen-phone: $screen-xs !default;
 
 // Small screen / tablet
-$screen-sm:                  768px !default;
-$screen-tablet:              $screen-sm !default;
+$screen-sm: 768px !default;
+$screen-tablet: $screen-sm !default;
 
 // Medium screen / desktop
-$screen-md:                  1024px !default;
-$screen-desktop:             $screen-md !default;
+$screen-md: 1024px !default;
+$screen-desktop: $screen-md !default;
 
 // Large screen / wide desktop
-$screen-lg:                  1366px !default;
-$screen-lg-desktop:          $screen-lg !default;
+$screen-lg: 1366px !default;
+$screen-lg-desktop: $screen-lg !default;
 
 // So media queries don't overlap when required, provide a maximum
-$screen-xs-max:              ($screen-sm - 1) !default;
-$screen-sm-max:              ($screen-md - 1) !default;
-$screen-md-max:              ($screen-lg - 1) !default;
+$screen-xs-max: ($screen-sm - 1) !default;
+$screen-sm-max: ($screen-md - 1) !default;
+$screen-md-max: ($screen-lg - 1) !default;

assets/sass/layout/_header.scss

@@ -19,24 +19,25 @@
     padding: 0 25px;
     margin: 20px 0;
   }
-
-  a.active {
-    color: color.adjust(variables.$purple, $lightness: -15%, $space: hsl);
-  }
 }
 
 .top-navigation {
-  background-color: #333;
+  background-color: variables.$dark-gray;
   @include mixins.readable-content;
 
   .navigation {
     margin-left: 15px;
     padding: 10px;
+
     a {
       font-size: 16px;
       color: #aaa;
       margin-right: 40px;
 
+      &.active {
+        color: #fff;
+      }
+
       &:hover {
         color: #fff;
       }
@@ -100,11 +101,15 @@
 
   a {
     margin-right: 30px;
-    color: #63338f;
+    color: variables.$purple;
     white-space: nowrap;
 
+    &.active {
+      color: variables.$dark-gray;
+    }
+
     &:hover {
-      color: color.adjust(variables.$purple, $lightness: -15%, $space: hsl);
+      color: variables.$dark-gray;
     }
   }
 }