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

src/_base.css

@@ -7,9 +7,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: #333;
   --font-family-sans: -apple-system, "BlinkMacSystemFont", "Avenir",
     "Avenir Next", "Segoe UI", "Roboto", "Oxygen", "Ubuntu", "Cantarell",
@@ -19,7 +19,6 @@
 
 html {
   box-sizing: border-box;
-  font-size: 62.5%;
   line-height: 1.15;
   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);
 }
 
@@ -106,7 +105,7 @@ hr {
   border: none;
   background-color: var(--color-lightGrey);
   height: 1px;
-  margin: 1rem 0;
+  margin: 0.625rem 0;
 }
 
 table {
@@ -124,7 +123,7 @@ table.striped tr:nth-of-type(2n) {
 td,
 th {
   vertical-align: middle;
-  padding: 1.2rem 0.4rem;
+  padding: 0.75rem 0.25rem;
 }
 
 thead {
@@ -156,7 +155,7 @@ kbd {
 pre {
   background-color: var(--bg-secondary-color);
   font-size: 1em;
-  padding: 1rem;
+  padding: 0.625rem;
   overflow-x: auto;
 }
 

src/_card.css

@@ -1,5 +1,5 @@
 .card {
-  padding: 1rem 2rem;
+  padding: 0.625rem 1.25rem;
   border-radius: 4px;
   background: var(--bg-color);
   box-shadow: 0 1px 3px var(--color-grey);
@@ -11,5 +11,5 @@
 
 .card header > * {
   margin-top: 0;
-  margin-bottom: 1rem;
+  margin-bottom: 0.625rem;
 }

src/_form.css

@@ -1,19 +1,19 @@
 fieldset {
-  padding: 0.5rem 2rem;
+  padding: 0.3125rem 1.25rem;
 }
 
 legend {
   text-transform: uppercase;
   font-size: 0.8em;
-  letter-spacing: 0.1rem;
+  letter-spacing: 0.0625rem;
 }
 
 input:not([type="checkbox"], [type="radio"], [type="submit"], [type="color"], [type="button"], [type="reset"]),
 select,
 textarea,
 textarea[type="text"] {
   font-family: inherit;
-  padding: 0.8rem 1rem;
+  padding: 0.5rem 0.625rem;
   border-radius: 4px;
   border: 1px solid var(--color-lightGrey);
   font-size: 1em;
@@ -42,7 +42,7 @@ select {
 [type="reset"],
 [type="submit"],
 button {
-  padding: 1rem 2.5rem;
+  padding: 0.625rem 1.5625rem;
   color: var(--color-darkGrey);
   background: var(--color-lightGrey);
   border-radius: 4px;
@@ -135,14 +135,14 @@ textarea.success {
 
 [type="checkbox"],
 [type="radio"] {
-  width: 2rem;
-  height: 1.6rem;
+  width: 1.25rem;
+  height: 1rem;
 }
 
 /* BUTTONS */
 
 .button + .button {
-  margin-left: 1rem;
+  margin-left: 0.625rem;
 }
 
 .button.secondary {
@@ -197,7 +197,7 @@ textarea.success {
 }
 
 .button.icon-only {
-  padding: 1rem;
+  padding: 0.625rem;
 }
 
 .button:active:not(:disabled),

src/_nav.css

@@ -1,11 +1,11 @@
 .nav {
   display: flex;
-  min-height: 5rem;
+  min-height: 3.125rem;
   align-items: stretch;
 }
 
 .nav img {
-  max-height: 3rem;
+  max-height: 1.875rem;
 }
 
 .nav > .container {
@@ -50,7 +50,7 @@
   text-decoration: none;
   display: flex;
   align-items: center;
-  padding: 1rem 2rem;
+  padding: 0.625rem 1.25rem;
   color: var(--color-darkGrey);
 }
 
@@ -67,9 +67,9 @@
 }
 
 .nav .brand img {
-  padding-right: 1rem;
+  padding-right: 0.625rem;
 }
 
 .nav .button {
-  margin: auto 1rem;
+  margin: auto 0.625rem;
 }

src/_tab.css

@@ -8,7 +8,7 @@
 
 .tabs > .dropdown > summary,
 .tabs > a {
-  padding: 1rem 2rem;
+  padding: 0.625rem 1.25rem;
   flex: 0 1 auto;
   color: var(--color-darkGrey);
   border-bottom: 2px solid var(--color-lightGrey);

src/_tag.css

@@ -3,21 +3,21 @@
   border: 1px solid var(--color-lightGrey);
   text-transform: uppercase;
   color: var(--color-grey);
-  padding: 0.5rem;
+  padding: 0.3125rem;
   line-height: 1;
   letter-spacing: 0.5px;
 }
 
 .tag.is-small {
-  padding: 0.4rem;
+  padding: 0.25rem;
   font-size: 0.75em;
 }
 
 .tag.is-large {
-  padding: 0.7rem;
+  padding: 0.4375rem;
   font-size: 1.125em;
 }
 
 .tag + .tag {
-  margin-left: 1rem;
+  margin-left: 0.625rem;
 }