Increase contrast for "reading time" info

[rhymes]

What type of PR is this? (check all applicable)

• Refactor
• Feature
• Bug Fix
• Documentation Update

Description

While perusing the Lighthouse report for dev.to I've noticed a "quick win" regarding the contrast between the white background and the text of the "reading time" info.

Right now the background is #fff and the reading time text is gray which is rgb(128, 128, 128) which in turn results in this contrast level:

I've darkened the text to rgb(89, 89, 89) with

color: darken($medium-gray, 5%);

instead of the current

color: lighten($medium-gray, 10%);

The contrast level now is:

I have used this color contrast analyzer linked by Lighthouse.

ps. the diff includes some auto fixed spacing issues, the relevant line his here: https://github.com/thepracticaldev/dev.to/pull/1689/files#diff-8604f2aa24d368dba9c73900d331fbbbR575

Related Tickets & Documents

Mobile & Desktop Screenshots/Recordings (if there are UI changes)

Before

After

Added to documentation?

• docs.dev.to
• readme
• no documentation needed

[nickytonline]

These are great PRs coming in @rhymes. I'm using lighthouse on my site for stuff like this as well. There's actually a beta Lighthouse CI that could be interesting to incorporate into the dev.to CI, https://github.com/ebidel/lighthousebot

[rhymes]

Thanks @nickytonline - that bot seems interesting. I wonder how much it would slow down the build. I know @maestromac has been trying to make it faster for a while, adding another step might result in him trying to commit seppuku 🗡 😆

Anyhow, it's an interesting tool.

(ps. I think the build failure is unrelated to the CSS change)

[benhalpern]

@rhymes sorry for letting this sit. It's good to be merged, but is now out of date, mind fixing the conflict and we'll merge it?

[rhymes]

@benhalpern done :) You can re-check the diff that ignores whitespace changes: https://github.com/thepracticaldev/dev.to/pull/1689/files?utf8=%E2%9C%93&diff=split&w=1

[Zhao-Andy]

Looks good! Sorry for the delay.