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.

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

Add .screen-reader-text CSS class, improve homepage CSS imports #1530

Merged
merged 2 commits into from
Sep 10, 2018

Conversation

benlk
Copy link
Collaborator

@benlk benlk commented Sep 10, 2018

Changes

Why

Adding .screen-reader-text fixes #1528 as part of #844.

The switch to (reference) is because I noticed that the homepage stylesheets were picking up the .visuallyhidden changes; they don't need to duplicate the mixin classes if the rules are already included in Largo's main style.css and style.min.css. This decreases duplication of styles.

The colors moved from single.less to variables.less because doing so allowed:

  • removing one duplicate variable
  • removing one variable for a color that can be replaced by a similar Largo color
  • moving one unique color to variables.less

Questions

@tyler Is it okay to switch from that slightly-lighter grey to a slightly-darker grey? We go from a WCAG 2.0 AAA contrast level to a slightly-higher-contrast WCAG 2.0 AAA contrast level.

original:

screen shot 2018-09-10 at 4 00 03 pm

new:

screen shot 2018-09-10 at 4 00 13 pm

…allyhidden technique

This fixes #1528 and addresses part of #844
For single.less, as part of this, move variables to less/inc/variables.less:
- variable `@grey` (local to single.less) is replaced by the theme color variable `@grayDark`; this changes the color from #777 to the darker #484848
- variable `@fog` is replaced by the theme color variable `@grayLighter`; this changes no colors
- variable `@sky` moves to less/inc/variables.less

As a result of switching to `(reference)` for the imports, top-stories.css (unminified) loses several dozen lines of comment-only CSS.

http://lesscss.org/features/#import-atrules-feature-reference
@benlk benlk added this to the 0.6 - Performance & SEO milestone Sep 10, 2018
@benlk
Copy link
Collaborator Author

benlk commented Sep 10, 2018

Tyler says it's okay.

@benlk benlk merged commit f8b5d04 into 0.5-dev Sep 10, 2018
@benlk benlk deleted the 1528-844-screen-reader-text branch September 11, 2018 04:27
Sign up for free to join this conversation on GitHub. Already have an account? Sign in to comment
Labels
None yet
Projects
None yet
Development

Successfully merging this pull request may close these issues.

add .screen-reader-text CSS
1 participant