SSWConsulting / SSWConsulting/SSW.Rules

CSS + UX | Acknowledgments - Avoid inline styling + add hover effect

Open
#203 2 comments 2 reactions 0 assignees View on GitHub

Nobody has claimed this yet.

Dominant language
TypeScript
Stars
26
Forks
17
Avg merge
14h 39m
Merged PRs (30d)
2

Description

Hi team,

I noticed that the styling for Acknowledgments photos is set as inline CSS - this is a bad practice:
Screen Shot 2021-01-25 at 7 27 26 PM

  1. Can we update it to have a class "acknowledgments" to be applied on that div?

  2. I'd like to have some hover effect there too. I suggest we make the photos B&W by default, and colorful on hover. Please apply if you agree
    E.g.

.acknowledgments img {
-webkit-filter: grayscale(100%); /* Safari 6.0 - 9.0 */
  filter: grayscale(100%);
}

.acknowledgments img:hover {
-webkit-filter: none; /* Safari 6.0 - 9.0 */
  filter: none;
}

So when hovering Adam would look like this:
Screen Shot 2021-01-25 at 7 34 36 PM

AB#59381

Contributor guide

No contributing guide indexed for this repository

First steps

  1. Read the whole issue, then the project's contributing guide.
  2. Comment on the issue to say you are picking it up — it saves two people doing the same work.
  3. Fork the repository and make your change on a branch.
  4. Open a pull request that references the issue number.

Research direction

Locate the Acknowledgments photo markup in the repository; the issue does not name a file or test. Add the requested acknowledgments class and grayscale-to-color hover behavior, then verify the photos display correctly in both states.

Written by the indexing model from the issue text.

Assessment

Tech stack
css
Domain
design, frontend
Issue type
Feature
Difficulty
2/5
Estimated time
1-3 hours
Activity status
Stale
Clarity
Mostly clear
Newbie friendliness
45/100

Get new issues in your inbox

A short digest of beginner-friendly GitHub issues.