search

wagtail / wagtail.org

Wagtail’s official marketing website
https://wagtail.org/
66 stars 60 forks source link

style: changed font-size units from px to rem #448

Closed kituuu closed 6 months ago

kituuu commented 8 months ago

322

thibaudcolas commented 8 months ago

@kituuu thank you for giving this a go. Could you take a moment to describe how you’ve approached this task, and how you’ve tested your work?

kituuu commented 8 months ago

@kituuu thank you for giving this a go. Could you take a moment to describe how you’ve approached this task, and how you’ve tested your work?

Hey, so basically I used the calc method available in css to convert all the px sizes to rem. Like for example 1px is 0.0625rem. Suppose my font size is 20px, so replaced it with calc(200.0625rem) , 200.0625 is 1.5 so it evaluates to 1.5rem.

I have tested some of the tags by making a some dummy pages, and then checked the rendered UI for px units and rem units side by side with the help of developer tools.

As there are so many components/sections I can't check all of them. But the once which I tested are working as intended. As the logic is same everywhere, so I suppose that it will work with all components/sections.

kituuu commented 6 months ago

👍 this is working as expected for the newsletter pages and the 500 page… but not for any of the other component, where we use dynamic font sizes based on media queries on the root element.

Hey, are there any other beginner/intermediate issues I can solve?