fix: Update font size and line height to vh, resolve #2

[chethtrayen]

PR Checklist

• [x] Addresses an existing open issue: fixes #002
• [x] That issue was marked as status: accepting prs
• [x] Steps in CONTRIBUTING.md were taken

Overview

Updated font size and line height to use vh rather than rem. While zooming, the text will not overlap each other and scale accordingly.

Screenshot

Spec:

Resolution: 1069x490 Zoom: 200%

[tjwds]

This is great!

Is there any way we could make the font sizes a little bit larger? I like how the blocks of text are a little bit closer to each other on what we currently have in production — it contributes to that brütalist vibe.

[chethtrayen]

Updated the size. Let me know if it changes.

[tjwds]

Looking good! I'd suggest we get as close to where we were before as possible, just with the clamps making things look better on atypical screen sizes. I played around with this and got pretty close, but I'll leave it up to you as to what looks best:

-   --font-size-large: clamp(5vh, 5vw, 5.5vh);
+   --font-size-large: clamp(5vh, 5vw, 5.6vh);
    --font-size-larger: clamp(6vh, 5vw, 9vh);
-   --font-size-title: clamp(11vh, 15vw, 24vh);
+   --font-size-title: clamp(11vh, 15vw, 26vh);

Could we reduce the height of .page-grid-footer when (width >= 1000px) too? It looks like it makes the "back" link on the code of conduct page a bit hard to click on desktop.

[chethtrayen]

I updated the font to be closer to prod. I kept the title size to be smaller because on prod the title is bleeding beyond the mobile size. Also not sure what is the .page-grid-footer issue.

[tjwds]

@chethtrayen I think the structure you've put in place is perfect — on my machine, on Chrome, there's a bit of a difference still between production and this branch:

Are you also seeing that on your end?

[JoshuaKGoldberg]

Ping @chethtrayen - is this still something you're interested in?

[JoshuaKGoldberg]

Closing out to keep the queue clear in case someone else wants to work on this. LMK if you want to resume! But no worries if you don't have time. 🙂