Responsive text

[beafialho]

When browsing the page on mobile size, all the buttons text looks much smaller than the intended 18px. Can we match that to the mockup?

Also, can we use clamp to make larger text smaller on mobile? This includes headings as well.

For instance, in this section the mockup uses 36px on desktop and 24px on mobile, is that the size we're using here too?

[StevenDufresne]

The block editor doesn't have a graceful way of managing responsive text (I think?). In order to get the text responsive, I've converted the font sizes to rem units and changed the base font size on mobile. We could use clamp but I'm pretty sure we'll have to do it with custom CSS. We could set defaults using clamp, but anyone who would update afterward would overwrite it and the document would probably fall out of sync. As I mentioned in #31, ideally we are left with a site that can be updated entirely (almost) in the block editor.

I didn't do much of a font-size audit, some of it was from the original copy/paste and I'm sure some have drifted. So how about, I update the font sizes to match the designs but we stick with the rem unit? If we still think proportions are askew, we can move to a slightly more hard-coded theme. Thoughts?

[StevenDufresne]

Actually, after a bit more research, it looks like I can use it within the theme.json which should still make it flexible. I'll try that first :)

[StevenDufresne]

@beafialho Can you check the test site? I made some responsive text updates. Thanks :)

[beafialho]

Thanks @StevenDufresne, it's looking and working great!

I have only two comments:

• The headings are all currently set to Light. They should be Regular.
• Down at the bottom it needs some spacing above the heading:

Currently	Mockup

[StevenDufresne]

Alright, updated. Closing this issue for now.

In terms of future edits to padding and font sizes, etc..., I think it should be viewed as a content update... I'm not sure who managed those for .org 🤔

[beafialho]

Thanks for updating, it looks spot on now.