Add colors page

docs/_includes/color/black-bis.html

@@ -1,2 +1,2 @@
 <span class="color" style="background: hsl(0, 0%, 7%);"></span>
-hsl(0, 0%, 7%)
+<code>hsl(0, 0%, 7%)</code>

docs/_includes/color/black-ter.html

@@ -1,2 +1,2 @@
 <span class="color" style="background: hsl(0, 0%, 14%);"></span>
-hsl(0, 0%, 14%)
+<code>hsl(0, 0%, 14%)</code>

docs/_includes/color/black.html

@@ -1,2 +1,2 @@
 <span class="color" style="background: hsl(0, 0%, 4%);"></span>
-hsl(0, 0%, 4%)
+<code>hsl(0, 0%, 4%)</code>

docs/_includes/color/blue.html

@@ -1,2 +1,2 @@
 <span class="color" style="background: hsl(217, 71%,  53%);"></span>
-hsl(217, 71%,  53%)
+<code>hsl(217, 71%,  53%)</code>

docs/_includes/color/green.html

@@ -1,2 +1,2 @@
 <span class="color" style="background: hsl(141, 71%,  48%);"></span>
-hsl(141, 71%,  48%)
+<code>hsl(141, 71%,  48%)</code>

docs/_includes/color/grey-dark.html

@@ -1,2 +1,2 @@
 <span class="color" style="background: hsl(0, 0%, 29%);"></span>
-hsl(0, 0%, 29%)
+<code>hsl(0, 0%, 29%)</code>

docs/_includes/color/grey-darker.html

@@ -1,2 +1,2 @@
 <span class="color" style="background:  hsl(0, 0%, 21%);"></span>
- hsl(0, 0%, 21%)
+<code>hsl(0, 0%, 21%)</code>

docs/_includes/color/grey-light.html

@@ -1,2 +1,2 @@
 <span class="color" style="background: hsl(0, 0%, 71%);"></span>
-hsl(0, 0%, 71%)
+<code>hsl(0, 0%, 71%)</code>

docs/_includes/color/grey-lighter.html

@@ -1,2 +1,2 @@
 <span class="color" style="background: hsl(0, 0%, 86%);"></span>
-hsl(0, 0%, 86%)
+<code>hsl(0, 0%, 86%)</code>

docs/_includes/color/grey.html

@@ -1,2 +1,2 @@
 <span class="color" style="background: hsl(0, 0%, 48%);"></span>
-hsl(0, 0%, 48%)
+<code>hsl(0, 0%, 48%)</code>

docs/_includes/color/orange.html

@@ -1,2 +1,2 @@
 <span class="color" style="background: hsl(14,  100%, 53%);"></span>
-hsl(14,  100%, 53%)
+<code>hsl(14,  100%, 53%)</code>

docs/_includes/color/purple.html

@@ -1,2 +1,2 @@
 <span class="color" style="background: hsl(271, 100%, 71%);"></span>
-hsl(271, 100%, 71%)
+<code>hsl(271, 100%, 71%)</code>

docs/_includes/color/red.html

@@ -1,2 +1,2 @@
 <span class="color" style="background: hsl(348, 100%, 61%);"></span>
-hsl(348, 100%, 61%)
+<code>hsl(348, 100%, 61%)</code>

docs/_includes/color/turquoise.html

@@ -1,2 +1,2 @@
 <span class="color" style="background: hsl(171, 100%, 41%);"></span>
-hsl(171, 100%, 41%)
+<code>hsl(171, 100%, 41%)</code>

docs/_includes/color/white-bis.html

@@ -1,2 +1,2 @@
 <span class="color" style="background: hsl(0, 0%, 98%);"></span>
-hsl(0, 0%, 98%)
+<code>hsl(0, 0%, 98%)</code>

docs/_includes/color/white-ter.html

@@ -1,2 +1,2 @@
 <span class="color" style="background: hsl(0, 0%, 96%);"></span>
-hsl(0, 0%, 96%)
+<code>hsl(0, 0%, 96%)</code>

docs/_includes/color/white.html

@@ -1,2 +1,2 @@
 <span class="color" style="background: hsl(0, 0%, 100%);"></span>
-hsl(0, 0%, 100%)
+<code>hsl(0, 0%, 100%)</code>

docs/_includes/color/yellow.html

@@ -1,2 +1,2 @@
 <span class="color" style="background: hsl(48,  100%, 67%);"></span>
-hsl(48,  100%, 67%)
+<code>hsl(48,  100%, 67%)</code>

docs/_includes/navbar.html

@@ -63,7 +63,9 @@
           <hr class="navbar-divider">
           <div class="navbar-item">
             <div>
-              <p class="has-text-info is-size-6-desktop"><strong>{{ site.version }}</strong></p>
+              <p class="is-size-6-desktop">
+                <strong class="has-text-info">{{ site.version }}</strong>
+              </p>
               {{#unless site.deprecated}}
                 <small>
                   <a class="view-all-versions" href="/versions">View all versions</a>

docs/_includes/subnav-overview.html

@@ -16,12 +16,15 @@
       <a class="navbar-item is-tab {% if page.doc-subtab == 'responsiveness' %}is-active{% endif %}" href="{{ site.url }}/documentation/overview/responsiveness/">
         Responsiveness
       </a>
-      <a class="navbar-item is-tab {% if page.doc-subtab == 'functions' %}is-active{% endif %}" href="{{ site.url }}/documentation/overview/functions/">
-        Functions
-      </a>
       <a class="navbar-item is-tab {% if page.doc-subtab == 'variables' %}is-active{% endif %}" href="{{ site.url }}/documentation/overview/variables/">
         Variables
       </a>
+      <a class="navbar-item is-tab {% if page.doc-subtab == 'colors' %}is-active{% endif %}" href="{{ site.url }}/documentation/overview/colors/">
+        Colors
+      </a>
+      <a class="navbar-item is-tab {% if page.doc-subtab == 'functions' %}is-active{% endif %}" href="{{ site.url }}/documentation/overview/functions/">
+        Functions
+      </a>
       <a class="navbar-item is-tab {% if page.doc-subtab == 'mixins' %}is-active{% endif %}" href="{{ site.url }}/documentation/overview/mixins/">
         Mixins
       </a>