Skip to content
New issue

Have a question about this project? Sign up for a free GitHub account to open an issue and contact its maintainers and the community.

Sign up for GitHub

By clicking “Sign up for GitHub”, you agree to our terms of service and privacy statement. We’ll occasionally send you account related emails.

Already on GitHub? Sign in to your account

update node-green to pass WCAG AA #536

Merged
merged 5 commits into from
Mar 3, 2016
Merged

update node-green to pass WCAG AA #536

Show file tree
Hide file tree
Changes from 3 commits
Commits
Show all changes
5 commits
Select commit Hold shift + click to select a range
3288ff6
update -green to pass WCAG AA
jrit Feb 25, 2016
b2bbd2f
color adjustments needed from green change
jrit Feb 25, 2016
0479b57
consolidating color use
jrit Mar 1, 2016
176ce7a
Merge branch 'master' of https://github.com/nodejs/nodejs.org into no…
jrit Mar 3, 2016
85472cd
make svg download logo visible on hover
jrit Mar 3, 2016
File filter

Filter by extension

Filter by extension
Conversations
Failed to load comments.
Loading
Jump to
Jump to file
Failed to load files.
Loading
Diff view
Diff view
7 changes: 4 additions & 3 deletions layouts/css/_variables.styl
View file
Open in desktop
Original file line number Diff line number Diff line change
Expand Up @@ -2,9 +2,10 @@ $body-max-width = 980px

$white = #fff

$node-green = #80bd01
$light-green = #f1fbda
$hover-green = #d9ebb3
$node-green = #43853d
Copy link
Contributor

Choose a reason for hiding this comment

The reason will be displayed to describe this comment to others. Learn more.

Why not #44883e (http://rgb.to/pantone/7741-c)? I'd say it's good enough contrast.

Copy link
Contributor Author

Choose a reason for hiding this comment

The reason will be displayed to describe this comment to others. Learn more.

I think that was the original spec color (correct me if I'm wrong) and it turned out to just barely not pass WCAG, which was actually the impetus for this PR originally. It is my hope in the future we can include WCAG validation as part of the site build process, so even the minor difference would cause a failure. Just taking care of the most important contrast differences for now, baby steps.

Copy link
Contributor

Choose a reason for hiding this comment

The reason will be displayed to describe this comment to others. Learn more.

Well, It's barely noticeable, so I don't have much of an opinion, but I'd lean on more the side of using the original color than to make it match the guideline.

$bright-green = #028a00
$light-green = lighten($node-green, 90%)
$active-green = darken($bright-green, 20%)

$yellow = #f7da03

Expand Down
7 changes: 5 additions & 2 deletions layouts/css/base.styl
View file
Open in desktop
Original file line number Diff line number Diff line change
Expand Up @@ -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
Expand Down
20 changes: 12 additions & 8 deletions layouts/css/page-modules/_download.styl
View file
Open in desktop
Original file line number Diff line number Diff line change
Expand Up @@ -36,6 +36,7 @@
display block
width 100%
padding-top 1em
color $active-green
background $light-green

img
Expand All @@ -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 $node-green
a:active
background $active-green
color $white

.download-version-toggle
display flex
Expand All @@ -63,12 +67,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
Expand Down Expand Up @@ -96,8 +100,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
Expand Down
10 changes: 8 additions & 2 deletions layouts/css/page-modules/_home.styl
View file
Open in desktop
Original file line number Diff line number Diff line change
Expand Up @@ -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%)

Expand Down Expand Up @@ -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
Expand All @@ -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
Expand Down