carpentries / varnish

Template for pkgdown site
https://carpentries.github.io/varnish/
Other
7 stars 25 forks source link

[bug fix] use rem units for callouts #116

Closed zkamvar closed 8 months ago

zkamvar commented 8 months ago

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:

old overview card that shows the title "Preguntas" breaking across two lines new overview card that shows a non-breaking "Preguntas" title

Here is the before and after of the callout block headings, which improves the vertical spacing between the wrapped text.

old callout with thin spindly letters new callout with larger letters and better spacing between headings