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

[lionel-rowe]

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%;
...

[jenil]

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?

[lionel-rowe]

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 Sorry, somehow I missed this comment back in 2022.

I could do that, but that would be a breaking change for Chota vNext vs all previous versions (assuming most consumers use it alongside at least some of their own hand-written CSS). Is that OK? Perhaps a brief note about upgrading would suffice.

[jenil]

@lionel-rowe yes that would be a new major release and accompanied with upgrade instructions.

[lionel-rowe]

@lionel-rowe yes that would be a new major release and accompanied with upgrade instructions.

@jenil I've made the code changes. These are generated by running postcss on the src files using only [email protected] plugin with option percent: 62.5.

I think simply releasing chota-next as chota will be problematic, given that the README recommends importing via an un-versioned CDN URL, so any sites using this import are liable to break in unpredictable ways (depending on caching etc):

<link rel="stylesheet" href="https://unpkg.com/chota">

Given that, I'm not sure what a good upgrade path would be. chotacss looks to be squatted, assuming the owner's not you. Maybe something like @chota/chota, chota-css, etc?