Update Docs experience

1 files changed, 52 insertions, 53 deletions

diff --git a/docs/layout.html b/docs/layout.html
index 6d238e6..160f054 100644
--- a/docs/layout.html
+++ b/docs/layout.html
@@ -12,13 +12,12 @@
   <link rel="stylesheet" href="css/docs.css" />
 </head>
 <body>
-  <section class="section section-header bg-gray">
+  <section class="section section-header bg-secondary">
     <section class="grid-header container grid-960">
       <nav class="navbar">
         <section class="navbar-section">
           <a href="#sidebar" class="btn btn-lg btn-link btn-action show-sm"><i class="icon icon-menu"></i></a>
-          <a href="index.html" class="navbar-brand mr-10">Spectre.css</a>
-          <a href="index.html" class="btn btn-link">Docs</a>
+          <a href="index.html" class="navbar-brand">Spectre.css Docs</a>
         </section>
         <section class="navbar-section">
           <a href="https://github.com/picturepan2/spectre" target="_blank" class="btn btn-primary">GitHub</a>
@@ -261,61 +260,61 @@
           </section>
           <div class="columns">
             <div class="column">
-              <div class="bg-gray docs-block"></div>
+              <div class="bg-primary text-secondary docs-block"></div>
             </div>
             <div class="column">
-              <div class="bg-gray docs-block"></div>
+              <div class="bg-primary text-secondary docs-block"></div>
             </div>
             <div class="column">
-              <div class="bg-gray docs-block"></div>
+              <div class="bg-primary text-secondary docs-block"></div>
             </div>
             <div class="column">
-              <div class="bg-gray docs-block"></div>
+              <div class="bg-primary text-secondary docs-block"></div>
             </div>
             <div class="column">
-              <div class="bg-gray docs-block"></div>
+              <div class="bg-primary text-secondary docs-block"></div>
             </div>
             <div class="column">
-              <div class="bg-gray docs-block"></div>
+              <div class="bg-primary text-secondary docs-block"></div>
             </div>
             <div class="column">
-              <div class="bg-gray docs-block"></div>
+              <div class="bg-primary text-secondary docs-block"></div>
             </div>
             <div class="column">
-              <div class="bg-gray docs-block"></div>
+              <div class="bg-primary text-secondary docs-block"></div>
             </div>
             <div class="column">
-              <div class="bg-gray docs-block"></div>
+              <div class="bg-primary text-secondary docs-block"></div>
             </div>
             <div class="column">
-              <div class="bg-gray docs-block"></div>
+              <div class="bg-primary text-secondary docs-block"></div>
             </div>
             <div class="column">
-              <div class="bg-gray docs-block"></div>
+              <div class="bg-primary text-secondary docs-block"></div>
             </div>
             <div class="column">
-              <div class="bg-gray docs-block"></div>
+              <div class="bg-primary text-secondary docs-block"></div>
             </div>
           </div>
 
           <div class="columns">
             <div class="column col-12">
-              <div class="bg-gray docs-block">col-12 (100%)</div>
+              <div class="bg-secondary text-primary docs-block">col-12 (100%)</div>
             </div>
           </div>
           <div class="columns">
             <div class="column col-9">
-              <div class="bg-gray docs-block">col-9 (75%)</div>
+              <div class="bg-secondary text-primary docs-block">col-9 (75%)</div>
             </div>
           </div>
           <div class="columns">
             <div class="column col-6">
-              <div class="bg-gray docs-block">col-6 (50%)</div>
+              <div class="bg-secondary text-primary docs-block">col-6 (50%)</div>
             </div>
           </div>
           <div class="columns">
             <div class="column col-3">
-              <div class="bg-gray docs-block">col-3 (25%)</div>
+              <div class="bg-secondary text-primary docs-block">col-3 (25%)</div>
             </div>
           </div>
 
@@ -326,10 +325,10 @@
 
           <div class="columns col-gapless">
             <div class="column col-6">
-              <div class="bg-gray docs-block">col-6 (gapless)</div>
+              <div class="bg-secondary text-primary docs-block">col-6 (gapless)</div>
             </div>
             <div class="column col-6">
-              <div class="bg-gray docs-block">col-6 (gapless)</div>
+              <div class="bg-secondary text-primary docs-block">col-6 (gapless)</div>
             </div>
           </div>
 
@@ -339,10 +338,10 @@
 
           <div class="columns col-oneline">
             <div class="column col-8">
-              <div class="bg-gray docs-block">col-8</div>
+              <div class="bg-secondary text-primary docs-block">col-8</div>
             </div>
             <div class="column col-8">
-              <div class="bg-gray docs-block">col-8</div>
+              <div class="bg-secondary text-primary docs-block">col-8</div>
             </div>
           </div>
 
@@ -371,22 +370,22 @@
           </div>
           <div class="columns">
             <div class="column col-lg-6">
-              <div class="bg-gray docs-block">col-lg-6</div>
+              <div class="bg-secondary text-primary docs-block">col-lg-6</div>
             </div>
           </div>
           <div class="columns">
             <div class="column col-md-6">
-              <div class="bg-gray docs-block">col-md-6</div>
+              <div class="bg-secondary text-primary docs-block">col-md-6</div>
             </div>
           </div>
           <div class="columns">
             <div class="column col-sm-6">
-              <div class="bg-gray docs-block">col-sm-6</div>
+              <div class="bg-secondary text-primary docs-block">col-sm-6</div>
             </div>
           </div>
           <div class="columns">
             <div class="column col-xs-6">
-              <div class="bg-gray docs-block">col-xs-6</div>
+              <div class="bg-secondary text-primary docs-block">col-xs-6</div>
             </div>
           </div>
 
@@ -442,7 +441,7 @@
             <tbody>
               <tr>
                 <td class="text-left">hide-xs</td>
-                <td><div class="bg-gray docs-dot"></div></td>
+                <td><div class="bg-secondary docs-dot"></div></td>
                 <td><div class="bg-primary docs-dot"></div></td>
                 <td><div class="bg-primary docs-dot"></div></td>
                 <td><div class="bg-primary docs-dot"></div></td>
@@ -450,35 +449,35 @@
               </tr>
               <tr>
                 <td class="text-left">hide-sm</td>
-                <td><div class="bg-gray docs-dot"></div></td>
-                <td><div class="bg-gray docs-dot"></div></td>
+                <td><div class="bg-secondary docs-dot"></div></td>
+                <td><div class="bg-secondary docs-dot"></div></td>
                 <td><div class="bg-primary docs-dot"></div></td>
                 <td><div class="bg-primary docs-dot"></div></td>
                 <td><div class="bg-primary docs-dot"></div></td>
               </tr>
               <tr>
                 <td class="text-left">hide-md</td>
-                <td><div class="bg-gray docs-dot"></div></td>
-                <td><div class="bg-gray docs-dot"></div></td>
-                <td><div class="bg-gray docs-dot"></div></td>
+                <td><div class="bg-secondary docs-dot"></div></td>
+                <td><div class="bg-secondary docs-dot"></div></td>
+                <td><div class="bg-secondary docs-dot"></div></td>
                 <td><div class="bg-primary docs-dot"></div></td>
                 <td><div class="bg-primary docs-dot"></div></td>
               </tr>
               <tr>
                 <td class="text-left">hide-lg</td>
-                <td><div class="bg-gray docs-dot"></div></td>
-                <td><div class="bg-gray docs-dot"></div></td>
-                <td><div class="bg-gray docs-dot"></div></td>
-                <td><div class="bg-gray docs-dot"></div></td>
+                <td><div class="bg-secondary docs-dot"></div></td>
+                <td><div class="bg-secondary docs-dot"></div></td>
+                <td><div class="bg-secondary docs-dot"></div></td>
+                <td><div class="bg-secondary docs-dot"></div></td>
                 <td><div class="bg-primary docs-dot"></div></td>
               </tr>
               <tr>
                 <td class="text-left">hide-xl</td>
-                <td><div class="bg-gray docs-dot"></div></td>
-                <td><div class="bg-gray docs-dot"></div></td>
-                <td><div class="bg-gray docs-dot"></div></td>
-                <td><div class="bg-gray docs-dot"></div></td>
-                <td><div class="bg-gray docs-dot"></div></td>
+                <td><div class="bg-secondary docs-dot"></div></td>
+                <td><div class="bg-secondary docs-dot"></div></td>
+                <td><div class="bg-secondary docs-dot"></div></td>
+                <td><div class="bg-secondary docs-dot"></div></td>
+                <td><div class="bg-secondary docs-dot"></div></td>
               </tr>
             </tbody>
           </table>
@@ -509,26 +508,26 @@
               <tr>
                 <td class="text-left">show-xs</td>
                 <td><div class="bg-primary docs-dot"></div></td>
-                <td><div class="bg-gray docs-dot"></div></td>
-                <td><div class="bg-gray docs-dot"></div></td>
-                <td><div class="bg-gray docs-dot"></div></td>
-                <td><div class="bg-gray docs-dot"></div></td>
+                <td><div class="bg-secondary docs-dot"></div></td>
+                <td><div class="bg-secondary docs-dot"></div></td>
+                <td><div class="bg-secondary docs-dot"></div></td>
+                <td><div class="bg-secondary docs-dot"></div></td>
               </tr>
               <tr>
                 <td class="text-left">show-sm</td>
                 <td><div class="bg-primary docs-dot"></div></td>
                 <td><div class="bg-primary docs-dot"></div></td>
-                <td><div class="bg-gray docs-dot"></div></td>
-                <td><div class="bg-gray docs-dot"></div></td>
-                <td><div class="bg-gray docs-dot"></div></td>
+                <td><div class="bg-secondary docs-dot"></div></td>
+                <td><div class="bg-secondary docs-dot"></div></td>
+                <td><div class="bg-secondary docs-dot"></div></td>
               </tr>
               <tr>
                 <td class="text-left">show-md</td>
                 <td><div class="bg-primary docs-dot"></div></td>
                 <td><div class="bg-primary docs-dot"></div></td>
                 <td><div class="bg-primary docs-dot"></div></td>
-                <td><div class="bg-gray docs-dot"></div></td>
-                <td><div class="bg-gray docs-dot"></div></td>
+                <td><div class="bg-secondary docs-dot"></div></td>
+                <td><div class="bg-secondary docs-dot"></div></td>
               </tr>
               <tr>
                 <td class="text-left">show-lg</td>
@@ -536,7 +535,7 @@
                 <td><div class="bg-primary docs-dot"></div></td>
                 <td><div class="bg-primary docs-dot"></div></td>
                 <td><div class="bg-primary docs-dot"></div></td>
-                <td><div class="bg-gray docs-dot"></div></td>
+                <td><div class="bg-secondary docs-dot"></div></td>
               </tr>
               <tr>
                 <td class="text-left">show-xl</td>
@@ -893,7 +892,7 @@
     </section>
   </section>
 
-  <footer class="section section-footer bg-gray">
+  <footer class="section section-footer bg-secondary">
     <section id="copyright" class="grid-footer container grid-960">
       <p>
         <a href="index.html#introduction" target="_blank">Documents</a> | <a href="https://github.com/picturepan2/spectre" target="_blank">GitHub Repo</a> | <a href="https://twitter.com/spectrecss" target="_blank">Twitter</a> | Version <span class="version"></span>