From 3288ff6b071d7ad5e932bda0f6052f03a9283ed0 Mon Sep 17 00:00:00 2001 From: Jarrett Widman Date: Thu, 25 Feb 2016 13:16:17 -0600 Subject: [PATCH 1/4] update -green to pass WCAG AA Based on the new colors defined with the updated logo, this is the the closest green that passes on a white background for small text where a contrast ratio of 4.5 is required. --- layouts/css/_variables.styl | 2 +- 1 file changed, 1 insertion(+), 1 deletion(-) diff --git a/layouts/css/_variables.styl b/layouts/css/_variables.styl index 71093215e67c8..92377842d2287 100644 --- a/layouts/css/_variables.styl +++ b/layouts/css/_variables.styl @@ -2,7 +2,7 @@ $body-max-width = 980px $white = #fff -$node-green = #80bd01 +$node-green = #43853d $light-green = #f1fbda $hover-green = #d9ebb3 From b2bbd2fd97ddbcdd87fc51a06823ac2f9088a9cb Mon Sep 17 00:00:00 2001 From: Jarrett Widman Date: Thu, 25 Feb 2016 14:53:39 -0600 Subject: [PATCH 2/4] color adjustments needed from green change Home page updated for aesthetics, download page updated for contrast --- layouts/css/_variables.styl | 1 + layouts/css/page-modules/_download.styl | 6 +++--- layouts/css/page-modules/_home.styl | 4 ++-- 3 files changed, 6 insertions(+), 5 deletions(-) diff --git a/layouts/css/_variables.styl b/layouts/css/_variables.styl index 92377842d2287..477952529cac0 100644 --- a/layouts/css/_variables.styl +++ b/layouts/css/_variables.styl @@ -3,6 +3,7 @@ $body-max-width = 980px $white = #fff $node-green = #43853d +$bright-green = #028a00 $light-green = #f1fbda $hover-green = #d9ebb3 diff --git a/layouts/css/page-modules/_download.styl b/layouts/css/page-modules/_download.styl index 38cdffd847ccc..1a2a379b7df44 100644 --- a/layouts/css/page-modules/_download.styl +++ b/layouts/css/page-modules/_download.styl @@ -49,7 +49,7 @@ a:hover, a:active background $gray - color $node-green + color $light-green .download-version-toggle display flex @@ -63,7 +63,7 @@ padding 5px 2px a:hover, a:active, a.is-version - color $node-green + color $light-green background $gray a.is-version @@ -97,7 +97,7 @@ a:hover, a:active background $gray - color $node-green + color $light-green 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..bdbfbe233227b 100644 --- a/layouts/css/page-modules/_home.styl +++ b/layouts/css/page-modules/_home.styl @@ -42,7 +42,7 @@ margin 10px 4px padding 0.2em 0.6em - background-color $node-green + background-color $bright-green color $white !important border-radius 2px font-size 30px @@ -51,7 +51,7 @@ transition .2s background-color ease-in-out &:hover - background-color saturation($node-green, 80%) + background-color darken($bright-green, 20%) small display block From 0479b5781c66327e604db6b2a65fa038a48b504c Mon Sep 17 00:00:00 2001 From: Jarrett Widman Date: Tue, 1 Mar 2016 10:11:31 -0600 Subject: [PATCH 3/4] consolidating color use makes on/hover states more consistent and fixes contrast on light backgrounds --- layouts/css/_variables.styl | 4 ++-- layouts/css/base.styl | 7 +++++-- layouts/css/page-modules/_download.styl | 20 ++++++++++++-------- layouts/css/page-modules/_home.styl | 10 ++++++++-- 4 files changed, 27 insertions(+), 14 deletions(-) diff --git a/layouts/css/_variables.styl b/layouts/css/_variables.styl index 477952529cac0..eac638ca2d572 100644 --- a/layouts/css/_variables.styl +++ b/layouts/css/_variables.styl @@ -4,8 +4,8 @@ $white = #fff $node-green = #43853d $bright-green = #028a00 -$light-green = #f1fbda -$hover-green = #d9ebb3 +$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 1a2a379b7df44..03717653a6161 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 img @@ -46,10 +47,13 @@ padding-bottom 1em margin 1em 0 0 + a:hover + background: $node-green + color $white - a:hover, a:active - background $gray - color $light-green + a:active + background $active-green + color $white .download-version-toggle display flex @@ -63,12 +67,12 @@ padding 5px 2px a:hover, a:active, a.is-version - color $light-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 @@ -96,8 +100,8 @@ text-align center a:hover, a:active - background $gray - color $light-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 bdbfbe233227b..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 $bright-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 darken($bright-green, 20%) + background-color $node-green small display block From 85472cd996da346cb8e5a12434ed760f6a995a8b Mon Sep 17 00:00:00 2001 From: Jarrett Widman Date: Thu, 3 Mar 2016 09:45:22 -0600 Subject: [PATCH 4/4] make svg download logo visible on hover --- layouts/css/page-modules/_download.styl | 3 +++ 1 file changed, 3 insertions(+) diff --git a/layouts/css/page-modules/_download.styl b/layouts/css/page-modules/_download.styl index 407533591c35b..f01bd0bb2153c 100644 --- a/layouts/css/page-modules/_download.styl +++ b/layouts/css/page-modules/_download.styl @@ -52,6 +52,9 @@ background: $node-green color $white + .download-logo + fill: $white + a:active background $active-green color $white