SSWConsulting / SSWConsulting/SSW.Rules
Figure captions CSS Semantics
Nobody has claimed this yet.
- Dominant language
- TypeScript
- Stars
- 26
- Forks
- 17
- Avg merge
- 14h 39m
- Merged PRs (30d)
- 2
Description
Hi @christianmorfordwaitessw
as per our conversation, I noticed that the way we are adding the icons next to captions (good/bad/ok) is using the pseudo-element ::after with position:absolute;. This doesn't make sense and make it harder to get the icons aligned to the text in different screens.
I'd like to have it changed to ::before as per https://sswconsulting.github.io/SSW.Rules-prototype-style/rule.html
- Please action from ::after to ::before (avoid position:absolute/relative)
...The good and bad icons are also using a GIF image... it should use FontAwesome, as per the OK icon
- Please fix from images to FontAwesome
Contributor guide
No contributing guide indexed for this repository
First steps
- Read the whole issue, then the project's contributing guide.
- Comment on the issue to say you are picking it up — it saves two people doing the same work.
- Fork the repository and make your change on a branch.
- Open a pull request that references the issue number.
Research direction
Start by locating the figure-caption styles and comparing the current ::after and absolute-positioned icon rules with the linked style reference. Check how the existing OK icon uses FontAwesome, then update the good and bad captions to use the same approach and verify all three icons align without absolute or relative positioning.
Written by the indexing model from the issue text.
Assessment
- Tech stack
- css
- Domain
- design, frontend
- Issue type
- Refactor
- Difficulty
- 2/5
- Estimated time
- 1-3 hours
- Activity status
- Stale
- Clarity
- Mostly clear
- Newbie friendliness
- 45/100