Some tweaks to the _typography (and other) SCSS files. All pixel font variables are removed and replaced with REM variables (or the closest equivalents). Some other minor things:
- Added a variable for h5 in case someone wants to use it.
- Percent-based variables are replaced with rem.
When turning the changes on and off in Stylus a few noticeable "overall" changes:
- heading sizes and body fonts are slightly bigger
- muted, and some side-panel fonts are smaller
In the SCSS files where font-size is updated it looks a bit like this:
font-size: 20px;
font-size: var(--font-size-20); // rem version
The idea is that if older browsers don't support rem sizing they will have the 20px defined as a fall-back. It is a little redundant, but hopefully improves the experience for those using alternate browsers that have variable support for CSS prior to the rem unit's release (<2013).
Overall, I don't think this makes too many drastic changes to how Pyfedi looks however it does a lot of cleaning up and organising behind the scenes in the SCSS files.
Some tweaks to the _typography (and other) SCSS files. All pixel font variables are removed and replaced with REM variables (or the closest equivalents). Some other minor things:
- Added a variable for h5 in case someone wants to use it.
- Percent-based variables are replaced with rem.
When turning the changes on and off in Stylus a few noticeable "overall" changes:
- heading sizes and body fonts are slightly bigger
- muted, and some side-panel fonts are smaller
In the SCSS files where font-size is updated it looks a bit like this:
font-size: 20px;
font-size: var(--font-size-20); // rem version
The idea is that if older browsers don't support rem sizing they will have the 20px defined as a fall-back. It is a little redundant, but hopefully improves the experience for those using alternate browsers that have variable support for CSS prior to the rem unit's release (<2013).
Overall, I don't think this makes too many drastic changes to how Pyfedi looks however it does a lot of cleaning up and organising behind the scenes in the SCSS files.