JustUtahCoders / utahexpungements.org

The frontend code for utahexpungements.org
MIT License
11 stars 19 forks source link

Fixed font-size rem default 16px (#61) #81

Closed HappyViki closed 4 years ago

HappyViki commented 4 years ago

Root font-size is 16px, rest font-size are rem. I used this ref to convert. All the rems that were not font-size have been changed to px.

joeldenning commented 4 years ago

Please merge the master branch into your branch, which will fix the build (see related #85)

HappyViki commented 4 years ago

I learned how to copy from one branch to another, woot! I learned about font-size: 62.5% from this article.

Anyway, here's what I did:

:root { font-size: 62.5%; ... }
body { font-size: 1.6rem; ... }

And changed all previous rems to what it was before divided by ten, example:

& button, & a.button {
  font-size: 18rem -> 1.8rem;
  border-radius: 6rem -> 0.6rem;
  ...
}

font-size: 62.5% in root makes it easier to translate default px -> rem, as you can see in the above example. If font-size: 100% in root, then you'd have to do something like font-size: 18rem -> 11.25rem, aka multiply by 62.5%.

Body font-size used to be 16px. I treated it like the other rems. You could say I did 16px -> 16rem -> 1.6rem. If I removed that line, body font-size would be 16px * 62.5% by default.

I hope I explained well. I did this mainly to learn from what I did today.