fix: Add figure-img component
Changes
- Update README
- Add
<figure-img>
component - Update spacing on
<figure>
to margin - Update
<figure>
usage to<figure-img>
- Remove custom usage of
gl-p-5
class on<img>
in<figure>
to align image content to viewport width on mobile
Outcome
- Remove duplicate
alt
,aria-label
,<figcaption>
needing to be manually set - Remove
role="img"
needing to be manually set - Single source of truth for content images to update as
aria
/role="img"
support improves for<figure>
- Consistent spacing
- Remove custom styles and compute
max-width
fromwidth
prop - Remove
img-50
etc. classes which reduce images on mobile to 50% of viewport width, too small for small screens
Screenshots
Before | After |
---|---|
![]() |
![]() |
![]() |
![]() |
Edited by Scott de Jonge