diff --git a/layouts/css/_variables.styl b/layouts/css/_variables.styl index 71093215e67c8..eac638ca2d572 100644 --- a/layouts/css/_variables.styl +++ b/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 diff --git a/layouts/css/base.styl b/layouts/css/base.styl index 19cdc8d9ee9ee..d69771eac2e33 100644 --- a/layouts/css/base.styl +++ b/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 diff --git a/layouts/css/page-modules/_download.styl b/layouts/css/page-modules/_download.styl index a816e64d9c699..f01bd0bb2153c 100644 --- a/layouts/css/page-modules/_download.styl +++ b/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 diff --git a/layouts/css/page-modules/_home.styl b/layouts/css/page-modules/_home.styl index 611a8208c12af..32d6293475e08 100644 --- a/layouts/css/page-modules/_home.styl +++ b/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