chota
chota copied to clipboard
Add variants with 100% root font size and rem values / 1.6
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%;
...
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?