[bug fix] use rem units for callouts #116
Merged
Add this suggestion to a batch that can be applied as a single commit.
This suggestion is invalid because no changes were made to the code.
Suggestions cannot be applied while the pull request is closed.
Suggestions cannot be applied while viewing a subset of changes.
Only one suggestion per line can be applied in a batch.
Add this suggestion to a batch that can be applied as a single commit.
Applying suggestions on deleted lines is not supported.
You must change the existing code in this line in order to create a valid suggestion.
Outdated suggestions cannot be applied.
This suggestion has been applied or marked resolved.
Suggestions cannot be applied from pending reviews.
Suggestions cannot be applied on multi-line comments.
Suggestions cannot be applied while the pull request is queued to merge.
Suggestion cannot be applied right now. Please check back later.
Note: this is a patch release of version 1.0.1
One of the infinite hells that we were thrown into with this CSS we were
given was the fact that the implementors really just copy/pasted the
CSS directly from the figma designs, which emit font sizes in pixels
instead of relative units.
I attempted to fix this for the headings in 311a1e1, but I did not
address the callout or overview headings, which were fixed to px.
The latest update added a min() switch to the overview h3 font size, but
it was set at 25px, which was fine for the objectives, but problematic
for preguntas (es translation). Instead of bumping this down to 24px, I
changed it to min(1.5rem, calc(1.25rem + 0.2vw)); which matches better
with the size of the h3 headers of calc(1.25rem + 0.5vw); and provides
the fallback of 1.5rem for large screen sizes.
Screenshots:
Here is the before and after of the overview card:
Here is the before and after of the callout block headings, which improves the vertical spacing between the wrapped text.