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

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

Conversation

chethtrayen
Copy link
Contributor

@chethtrayen chethtrayen commented May 19, 2023

PR Checklist

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%
image

@chethtrayen chethtrayen marked this pull request as draft May 20, 2023 16:03
@chethtrayen chethtrayen marked this pull request as ready for review May 20, 2023 17:13
@tjwds
Copy link
Contributor

tjwds commented May 20, 2023

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
Copy link
Contributor Author

Updated the size. Let me know if it changes.

@tjwds
Copy link
Contributor

tjwds commented May 20, 2023

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
Copy link
Contributor Author

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.

image
image

@tjwds
Copy link
Contributor

tjwds commented May 24, 2023

@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:

image
image

Are you also seeing that on your end?

@tjwds tjwds force-pushed the main branch 3 times, most recently from 701327d to 6fae433 Compare June 21, 2023 23:05
@JoshuaKGoldberg
Copy link
Contributor

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

@JoshuaKGoldberg
Copy link
Contributor

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. 🙂

Sign up for free to join this conversation on GitHub. Already have an account? Sign in to comment
Projects
None yet
Development

Successfully merging this pull request may close these issues.

🐛 Bug: legibility issues when zoomed in
3 participants