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

(#153) Enforce using rems/ems in stylesheets #204

Merged
merged 2 commits into from
Oct 9, 2024

Conversation

seyilonge-ps
Copy link
Collaborator

@seyilonge-ps seyilonge-ps commented Aug 15, 2024

Closes #153

  • Added and enabled stylelint-rem-over-px
  • Fixed console errors

@seyilonge-ps seyilonge-ps marked this pull request as draft August 15, 2024 16:57
less/bookmarklets.less Outdated Show resolved Hide resolved
@seyilonge-ps seyilonge-ps force-pushed the ticket/153-enforce-rem-em-use branch from d12c058 to ea9cb3a Compare August 17, 2024 16:14
@seyilonge-ps seyilonge-ps marked this pull request as ready for review August 19, 2024 18:58
@seyilonge-ps seyilonge-ps force-pushed the ticket/153-enforce-rem-em-use branch from ea9cb3a to 9170f89 Compare August 19, 2024 19:00
@seyilonge-ps seyilonge-ps force-pushed the ticket/153-enforce-rem-em-use branch from 9170f89 to 61e753f Compare September 3, 2024 18:11
@@ -10,27 +10,27 @@ body {

&__text {
fill: black;
stroke-width: 2px;
font-size: calc(54px * var(--text-zoom-factor));
stroke-width: 0.125rem;
Copy link
Collaborator

Choose a reason for hiding this comment

The reason will be displayed to describe this comment to others. Learn more.

I was hoping we can just force font-size to be in rems. Is there a way of doing that?

less/chart.less Outdated
border: solid 1px black;
width: initial;
}

svg {
font-size: 16px;
font-size: 1rem;
Copy link
Collaborator

Choose a reason for hiding this comment

The reason will be displayed to describe this comment to others. Learn more.

I think there is a little misunderstanding. I would like font-size to use the LESS mixin (i.e. 16/@px).

This is to be consistent with the advice we are giving on this page:

https://www.useragentman.com/enable/text-resize.php#replace-pixels-with-rems--heading

Your check can look at the resultant CSS to make sure there are no px units in a font-size property, if that makes it easier.

Let's talk more about this tomorrow.

@seyilonge-ps seyilonge-ps force-pushed the ticket/153-enforce-rem-em-use branch from 61e753f to a54f653 Compare September 12, 2024 19:50
Closes #153

* Added and enabled `stylelint-rem-over-px`
* Fixed console errors
* Removed `stylelint-rem-over-px` for `stylelint`'s `declaration-property-unit-allowed-list` rule which allows for greater flexibility
* Cleaned up console errors
* Separated `stylelint` into it's own task for `lint-staged`
* Fxied up font-size calculations
@seyilonge-ps seyilonge-ps force-pushed the ticket/153-enforce-rem-em-use branch from a54f653 to 31d89e3 Compare September 12, 2024 20:09
@zoltan-dulac zoltan-dulac merged commit 3313377 into main Oct 9, 2024
2 checks passed
Sign up for free to join this conversation on GitHub. Already have an account? Sign in to comment
Labels
None yet
Projects
None yet
Development

Successfully merging this pull request may close these issues.

Enforce using rems/ems in stylesheets
2 participants