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 2 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
3 changes: 2 additions & 1 deletion layouts/css/_variables.styl
View file
Open in desktop
Original file line number Diff line number Diff line change
Expand Up @@ -2,7 +2,8 @@ $body-max-width = 980px

$white = #fff

$node-green = #80bd01
$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 = #f1fbda
$hover-green = #d9ebb3
Copy link
Contributor

Choose a reason for hiding this comment

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

Should these two be updated with the new color guide?

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'll take a look at where/how they are being used


Expand Down
6 changes: 3 additions & 3 deletions layouts/css/page-modules/_download.styl
View file
Open in desktop
Original file line number Diff line number Diff line change
Expand Up @@ -49,7 +49,7 @@

a:hover, a:active
background $gray
color $node-green
color $light-green

.download-version-toggle
display flex
Expand All @@ -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
Expand Down Expand Up @@ -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
Expand Down
4 changes: 2 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 @@ -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
Expand All @@ -51,7 +51,7 @@
transition .2s background-color ease-in-out

&:hover
background-color saturation($node-green, 80%)
background-color darken($bright-green, 20%)
Copy link
Contributor

Choose a reason for hiding this comment

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

Then this could use $hover-green?


small
display block
Expand Down