Skip to content
New issue

Have a question about this project? Sign up for a free GitHub account to open an issue and contact its maintainers and the community.

By clicking “Sign up for GitHub”, you agree to our terms of service and privacy statement. We’ll occasionally send you account related emails.

Already on GitHub? Sign in to your account

[bug fix] use rem units for callouts #116

Merged
merged 1 commit into from
Dec 14, 2023
Merged

[bug fix] use rem units for callouts #116

merged 1 commit into from
Dec 14, 2023

Conversation

zkamvar
Copy link
Contributor

@zkamvar zkamvar commented Dec 14, 2023

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

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.
@zkamvar zkamvar merged commit 3079f59 into main Dec 14, 2023
2 checks passed
Sign up for free to join this conversation on GitHub. Already have an account? Sign in to comment
Labels
None yet
Projects
None yet
Development

Successfully merging this pull request may close these issues.

1 participant