updated cargokit colors

Author: nikoloza

cargokit/index.css

@@ -10,29 +10,5 @@
 :root {
   --hr-color: var(--secondary-lighten);
   --hr-opacity: 1;
-}
-
-/* demo */
-h1 {
-  border-bottom: 1px solid var(--secondary-lighten);
-  max-width: 260px;
-  padding: var(--gutter-tiny) 0;
-  margin: var(--gutter) 0;
-}
-
-h4 {
-
-}
-
-hr {
-  max-width: 260px;
-}
-
-section.demo {
-  margin: var(--gutter) 0 var(--gutter-large);
-
-  > * {
-    margin: 0 var(--gutter-small) 0 0;
-    vertical-align: top;
-  }
+  --hr-margin: var(--gutter-big) 0;
 }

index.css

@@ -3,4 +3,25 @@
 
 
 /* cargokit example */
-@import 'cargokit/index.css'
+@import 'cargokit/index.css';
+
+/* demo */
+body > h1 {
+  border-bottom: 1px solid var(--secondary-lighten);
+  padding: var(--gutter-tiny) 0;
+  margin: var(--gutter-large) 0 var(--gutter);
+}
+
+hr {
+  max-width: 260px;
+}
+
+section.demo {
+  margin: var(--gutter) 0 var(--gutter-large);
+
+  > .button,
+  > .field {
+    margin: 0 var(--gutter-small) 0 0;
+    vertical-align: top;
+  }
+}

index.html

@@ -50,7 +50,7 @@ <h4>Maybe switch something between colors:</h4>
 
   <hr>
 
-  <p>And the grayscale of course 💾:</p>
+  <h4>And the grayscale of course:</h4>
 
   <section class="demo">
     <button class="button white">Button white</span></button>
@@ -64,8 +64,6 @@ <h4>Maybe switch something between colors:</h4>
     <button class="button black">Button black</button>
   </section>
 
-  <hr>
-
   <h1>Input fields</h1>
 
   <section class="demo">
@@ -76,6 +74,26 @@ <h1>Input fields</h1>
     <input class="field large" placeholder="Input large">
   </section>
 
+  <h1>Font sizing</h1>
+
+  <section class="demo">
+    <h1>header 1</h1>
+    <h2>header 2</h2>
+    <h3>header 3</h3>
+    <h4>header 4</h4>
+    <h5>header 5</h5>
+    <h6>header 6</h6>
+  </section>
+
+  <hr>
+
+  <h4>Additional sizes if needed:</h4>
+  <p class="font-size-h7">header 7</p>
+  <p class="font-size-h8">header 8</p>
+  <p class="font-size-h9">header 9</p>
+  <p class="font-size-h10">header 10</p>
+
+
   <script type="text/javascript" src="bundle.js"></script>
 </body>
 </html>