chota icon indicating copy to clipboard operation
chota copied to clipboard

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

Open lionel-rowe opened this issue 3 years ago • 4 comments

Fixes https://github.com/jenil/chota/issues/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 avatar Feb 04 '22 22:02 lionel-rowe

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?

jenil avatar Aug 31 '22 01:08 jenil