add new button style and tag to website 💄

docs/_includes/buttons.html

@@ -6,8 +6,10 @@
       <div class="buttons">
         <a href="#!" class="button">Default</a>
         <a href="#!" class="button primary">Primary</a>
+        <a href="#!" class="button secondary">Secondary</a>
         <a href="#!" class="button outline">Outline</a>
         <a href="#!" class="button outline primary">Primary outline</a>
+        <a href="#!" class="button outline secondary">Secondary outline</a>
         <a href="#!" class="button clear">Clear</a>
       </div>
     </div>
@@ -15,8 +17,10 @@
 {% highlight html %}
 <a class="button">Default</a>
 <a class="button primary">Primary</a>
+<a class="button secondary">Secondary</a>
 <a class="button outline">Outline</a>
 <a class="button outline primary">Primary outline</a>
+<a class="button outline secondary">Secondary outline</a>
 <a class="button clear">Clear</a>
 {% endhighlight %}
     </div>

docs/_includes/tag.html

@@ -0,0 +1,14 @@
+<section id="tag">
+  <h4>Tag</h4>
+  <p>Labels to insert anywhere! They come in 3 sizes — small, medium, large</p>
+  <p><span class="tag">One</span><span class="tag">Two</span><span class="tag">Three</span><span class="tag is-small">Small</span><span class="tag is-large">Large</span></p>
+{% highlight html %}
+<p>
+  <span class="tag">One</span>
+  <span class="tag">Two</span>
+  <span class="tag">Three</span>
+  <span class="tag is-small">Small</span>
+  <span class="tag is-large">Large</span>
+</p>
+{% endhighlight %}
+</section>

docs/index.html

@@ -18,7 +18,7 @@
     <div class="hero is-full-screen">
       <div class="logo is-center is-vertical-align">
         <img src="./logo.svg" alt="">
-        <h3>A <strong>small</strong> (3kb) CSS framework.</h3>
+        <h3>A <strong>small</strong> (<3kb) CSS framework.</h3>
       </div>
       <nav class="tabs is-center">
         <a href="#features">features</a>
@@ -78,6 +78,7 @@
 :root {
   --primary-color: #1a9f60;
   --lightGrey-color: #ddd;
+  --darkGrey-color: #888;
   --grid-maxWidth: 120rem;
   --grid-gutter: 1.5rem;
   --font-family: "Helvetica Neue", sans-serif;
@@ -104,10 +105,11 @@
         <div class="col is-right">
           <nav class="tabs">
             <a href="#grid">grid</a>
-          <a href="#buttons">buttons</a>
-          <a href="#nav">nav</a>
-          <a href="#card">card</a>
-          <a href="#utilities">utilities</a>
+            <a href="#buttons">buttons</a>
+            <a href="#nav">nav</a>
+            <a href="#card">card</a>
+            <a href="#tag">tag</a>
+            <a href="#utilities">utilities</a>
           </nav>
         </div>
       </div>
@@ -119,6 +121,8 @@
       <br>
       {% include card.html %}
       <br>
+      {% include tag.html %}
+      <br>
       {% include utilities.html %}
       <br>
       <p class="is-center">