Update the Docs and label-variant

1 files changed, 13 insertions, 10 deletions

diff --git a/docs/index.html b/docs/index.html
index dea3840..e4dbf45 100644
--- a/docs/index.html
+++ b/docs/index.html
@@ -141,7 +141,7 @@
 <pre class="code"><code><span class="tag">$</span> npm install <span class="atv">spectre.css</span> --save
 </code></pre>
 
-          </seciton>
+          </section>
           <section class="notes">
             <h5>Install with Yarn</h5>
 
@@ -157,7 +157,7 @@
 <pre class="code"><code><span class="tag">$</span> bower install <span class="atv">spectre.css</span> --save
 </code></pre>
 
-          </seciton>
+          </section>
           <section class="notes">
             <p>And include <code>spectre.css</code> in your website or Web app &lt;head&gt;. If you want the <a href="experimentals.html">Spectre Experimentals</a> and <a href="elements.html#icons">Spectre Icons</a>, you can add <code>spectre-exp.css</code> and <code>spectre-icons.css</code> accordingly.</p>
 
@@ -176,7 +176,7 @@
             <p>Spectre uses <a href="http://gulpjs.com/" target="_blank">Gulp</a> for compiling CSS. You can customize your version of Spectre.css by editing LESS files in <code>/src</code> directory or removing unneeded components from <code>spectre.less</code>, <code>spectre-exp.less</code> and <code>spectre-icons.less</code>.</p>
             <p>Then, you can build the CSS file from the command line:</p>
             <ol>
-              <li>Navigate to the root directory of Spectre where you can find <code>package.json</code> file.</li>
+              <li>Navigate to the root directory of Spectre.</li>
               <li>Run <code>npm install</code>. NPM will install all dev dependencies as listed in package.json.</li>
               <li>When completed, run <code>gulp build</code> to compile LESS to CSS and minify files.</li>
               <li>You can find compiled CSS files in <code>/dist</code> directory.</li>
@@ -314,11 +314,11 @@
           <section class="notes">
             <p>Spectre uses <a href="https://github.com/postcss/autoprefixer" target="_blank">Autoprefixer</a> to make most styles compatible with earlier browsers and <a href="https://necolas.github.io/normalize.css/" target="_blank">Normalize.css</a> for CSS resets. Spectre is designed for modern browsers. For best compatibility, these browsers are recommended:</p>
             <ul>
-              <li>Chrome <span class="label label-success">Last 4</span></li>
-              <li>Microsoft Edge <span class="label label-success">Last 4</span></li>
-              <li>Firefox <span class="label label-success">Last 4</span></li>
-              <li>Safari <span class="label label-success">Last 4</span></li>
-              <li>Opera <span class="label label-success">Last 4</span></li>
+              <li>Chrome <span class="label label-secondary">Last 4</span></li>
+              <li>Microsoft Edge <span class="label label-secondary">Last 4</span></li>
+              <li>Firefox <span class="label label-secondary">Last 4</span></li>
+              <li>Safari <span class="label label-secondary">Last 4</span></li>
+              <li>Opera <span class="label label-secondary">Last 4</span></li>
               <li>Internet Explorer 10+</li>
             </ul>
           </section>
@@ -335,6 +335,9 @@
               <li>
                 <a href="experimentals.html#comparison">Comparison Sliders</a>: sliders for comparing two images <small class="label label-primary">NEW</small>
               </li>
+              <li>
+                <a href="experimentals.html#timelines">Timelines</a>: ordered sequences of activities <small class="label label-primary">NEW</small>
+              </li>
             </ul>
             <p><strong>March 2017</strong></p>
             <ul>
@@ -342,10 +345,10 @@
                 <a href="elements.html#icons">Icons</a>: single-element, responsive and pure CSS icons <small class="label label-primary">NEW</small>
               </li>
               <li>
-                <a href="components.html#popovers">Popovers</a>: small overlay content containers <small class="label label-primary">NEW</small>
+                <a href="components.html#popovers">Popovers</a>: small overlay content containers
               </li>
               <li>
-                <a href="layout.html#panels">Panels</a>: flexible view container layout with auto-expand content section <small class="label label-primary">NEW</small>
+                <a href="layout.html#panels">Panels</a>: flexible view container layout with auto-expand content section
               </li>
               <li>
                 <a href="experimentals.html#carousels">Carousels</a>: slideshows for cycling images