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

Various Floating Social Buttons improvements #1635

Merged
merged 5 commits into from
Mar 1, 2019

Conversation

benlk
Copy link
Collaborator

@benlk benlk commented Feb 14, 2019

Changes

  • Fixes issue where floating social buttons were not clickable, because of z-index ordering. issue #1576.
  • Fixes links in social media buttons not respecting the blog's character set. issue #1283.
  • Function largo_post_social_links now respects the blog character set option. issue #1283.
  • Increases the text-to-background contrast of the post social media buttons and their popover menus:
    • Darkens button icons from @grayLighter to @gray, which is from #dddddd to #7D8185 against a #ffffff background. This is actually a little bit short of the required contrast ratio; this change bumps it from 1.36 to 3.92, but it should be at least 4.5. The next step on our color scheme is @grayDark, #484848, at 9.15 contrast ratio.
    • Removes some duplicative a coloration rules already present in the cascade

This image shows the z-index change, meaning that floating social buttons float over wide images and full-width images, but are now clickable:

screen shot 2019-02-13 at 3 02 43 pm

The above image also shows the old contrast levels.

Here's some samples of the new contrast level:

screen shot 2019-02-13 at 8 22 02 pm

screen shot 2019-02-13 at 8 22 09 pm

screen shot 2019-02-13 at 8 22 13 pm

Questions

@tylermachado, should we go all the way to 4.5 contrast ratio? If so, should this be through adjusting @gray (would require a review of the use of that color all across the theme) or should we define a new color?

Why

Because I was examining this section of code for INN/umbrella-freshenergy#21 anyways, while discovering #1634

Change the button color to make them meet the WCAG AA standards for contrast.

@benlk benlk added type: bug type: improvement priority: normal Must be completed before release of this version of plugin. labels Feb 14, 2019
@benlk benlk added this to the 0.6.2 milestone Feb 14, 2019
These buttons should meet WCAG AA standards for contrast, at least. That means they need to be much darker.

- Darkens post floating social media buttons to `@gray` from `@grayLighter`, which is from #dddddd to #7D8185 against a #ffffff background. This is actually a little bit short of the required contrast ratio; this change bumps it from `1.36` to `3.92`, but it should be at least `4.5`. The next step on our color scheme is `@grayDark`, #484848, at `9.15` contrast ratio.
@benlk
Copy link
Collaborator Author

benlk commented Mar 1, 2019

Tyler Machado [10:31 AM]
merge away

i think the contrast ratio is fine for this case

@benlk benlk merged commit ceee92a into 0.5-dev Mar 1, 2019
@benlk benlk deleted the hs-3039-floating-social-buttons branch July 18, 2019 17:26
Sign up for free to join this conversation on GitHub. Already have an account? Sign in to comment
Labels
priority: normal Must be completed before release of this version of plugin. type: bug type: improvement
Projects
None yet
Development

Successfully merging this pull request may close these issues.

None yet

1 participant