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.

Sign up for GitHub

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

Jump to bottom

Add variants with 100% root font size and rem values / 1.6 #80

Open
wants to merge 1 commit into
base: main
Choose a base branch
from
Open

Add variants with 100% root font size and rem values / 1.6 #80

wants to merge 1 commit into from
+440 −511

Conversation

lionel-rowe
Copy link

@lionel-rowe lionel-rowe commented Feb 4, 2022 •
edited
Loading

Fixes #79. Uses a purpose-built postcss plugin, postcss-revert-rem-size, to create variant builds of Chota (chota.100.css and chota.100.min.css) that have a root font size of 100% and accordingly divide all rem values by 1.6.

Sample diff output from running git diff HEAD:./dist/chota.css ./dist/chota.100.css after running yarn run build:

diff --git a/dist/chota.css b/dist/chota.100.css
index ca1b640..56cc553 100644
--- a/dist/chota.css
+++ b/dist/chota.100.css
@@ -8,9 +8,9 @@
   --color-darkGrey: #3f4144;
   --color-error: #d43939;
   --color-success: #28bd14;
-  --grid-maxWidth: 120rem;
-  --grid-gutter: 2rem;
-  --font-size: 1.6rem;
+  --grid-maxWidth: 75rem;
+  --grid-gutter: 1.25rem;
+  --font-size: 1rem;
   --font-color: #333333;
   --font-family-sans: -apple-system, BlinkMacSystemFont, Avenir, "Avenir Next",
     "Segoe UI", "Roboto", "Oxygen", "Ubuntu", "Cantarell", "Fira Sans",
@@ -20,7 +20,6 @@
 html {
   -webkit-box-sizing: border-box;
           box-sizing: border-box;
-  font-size: 62.5%;
   line-height: 1.15;
   -ms-text-size-adjust: 100%;
   -webkit-text-size-adjust: 100%;
@@ -94,7 +93,7 @@ p {
 }
 blockquote {
   background-color: var(--bg-secondary-color);
-  padding: 1.5rem 2rem;
+  padding: 0.9375rem 1.25rem;
   border-left: 3px solid var(--color-lightGrey);
 }
 dl dt {
@@ -104,7 +103,7 @@ hr {
   border: none;
   background-color: var(--color-lightGrey);
   height: 1px;
-  margin: 1rem 0;
+  margin: 0.625rem 0;
 }
 table {
   width: 100%;
...

@lionel-rowe lionel-rowe marked this pull request as draft February 4, 2022 23:05
@lionel-rowe lionel-rowe force-pushed the add-root-font-size-100pct-variants branch from dc0b3e7 to 9f2b81b Compare February 4, 2022 23:46
@lionel-rowe lionel-rowe marked this pull request as ready for review February 4, 2022 23:49
@lionel-rowe lionel-rowe changed the title Add variants with 100% root font size and rem values * 1.6 Add variants with 100% root font size and rem values / 1.6 Feb 4, 2022
@jenil
Copy link
Owner

jenil commented Aug 31, 2022

Hey @lionel-rowe

Sorry for the super late response here.

I'm happy to get rid of the 62.5% font sizing in the main CSS itself, no need for a variant. Can you update your PR to do it?

Sign up for free to join this conversation on GitHub. Already have an account? Sign in to comment
Reviewers
No reviews
Assignees

@lionel-rowe lionel-rowe

Labels
None yet
Projects
None yet
Milestone
No milestone
Development

Successfully merging this pull request may close these issues.

remove font-size: 62.5% hack
2 participants
@lionel-rowe @jenil