Merge pull request #536 from jrit/node-green

update node-green to pass WCAG AA

Author: silverwind

layouts/css/_variables.styl

@@ -2,9 +2,10 @@ $body-max-width = 980px
 
 $white = #fff
 
-$node-green = #80bd01
-$light-green = #f1fbda
-$hover-green = #d9ebb3
+$node-green = #43853d
+$bright-green = #028a00
+$light-green = lighten($node-green, 90%)
+$active-green = darken($bright-green, 20%)
 
 $yellow = #f7da03
 

layouts/css/base.styl

@@ -123,12 +123,15 @@ pre
         a
             display block
             padded-link(10px)
+            padding-top 5px
+            padding-bottom 5px
+            line-height 1
 
         .active
             > a,
             > a:hover
-                color $node-gray
-                background-color $hover-green
+                color $white
+                background-color $active-green
 
     article
         margin-left 220px

layouts/css/page-modules/_download.styl

@@ -36,6 +36,7 @@
         display block
         width 100%
         padding-top 1em
+        color $active-green
         background $light-green
 
     .download-logo
@@ -47,10 +48,16 @@
         padding-bottom 1em
         margin 1em 0 0
 
+    a:hover
+        background: $node-green
+        color $white
 
-    a:hover, a:active
-        background $gray
-        color $node-green
+        .download-logo
+            fill: $white
+
+    a:active
+        background $active-green
+        color $white
 
 .download-version-toggle
     display flex
@@ -64,12 +71,12 @@
         padding 5px 2px
 
     a:hover, a:active, a.is-version
-        color $node-green
-        background $gray
+        color $white
+        background $node-green
 
     a.is-version
         color $light-green
-        background $node-green
+        background $active-green
 
     .title
         font-size 1.5em
@@ -97,8 +104,8 @@
             text-align center
 
         a:hover, a:active
-            background $gray
-            color $node-green
+            background $node-green
+            color $white
 
 h5.download-table-previous-releases-header
     margin-bottom 5px

layouts/css/page-modules/_home.styl

@@ -11,6 +11,12 @@
     border-radius 2px
     margin-top 1em
 
+    a
+        color $active-green
+
+        &:hover
+            color $white
+
 .home-secondary-links
     $home-secondary-links-color = saturation($node-green, 20%)
 
@@ -42,7 +48,7 @@
     margin 10px 4px
     padding 0.2em 0.6em
 
-    background-color $node-green
+    background-color $active-green
     color $white !important
     border-radius 2px
     font-size 30px
@@ -51,7 +57,7 @@
     transition .2s background-color ease-in-out
 
     &:hover
-        background-color saturation($node-green, 80%)
+        background-color $node-green
 
     small
         display block