Merge pull request #282 from picturepan2/0.4.1 v0.4.1

0.4.1

1 files changed, 53 insertions, 53 deletions

diff --git a/docs/experimentals.html b/docs/experimentals.html
index 1a34fe8..8c16bfc 100644
--- a/docs/experimentals.html
+++ b/docs/experimentals.html
@@ -1,16 +1,16 @@
 <!DOCTYPE html>
 <html lang="en">
 <head>
-  <meta charset="utf-8" />
-  <meta name="robots" content="index, follow" />
-  <meta name="viewport" content="width=device-width, initial-scale=1.0, shrink-to-fit=no" />
-  <meta http-equiv="x-ua-compatible" content="ie=edge" />
-  <meta name="author" content="https://github.com/picturepan2/" />
+  <meta charset="utf-8">
+  <meta name="robots" content="index, follow">
+  <meta name="viewport" content="width=device-width, initial-scale=1.0, shrink-to-fit=no">
+  <meta http-equiv="x-ua-compatible" content="ie=edge">
+  <meta name="author" content="https://github.com/picturepan2/">
   <title>Experimentals - Spectre.css CSS Framework</title>
-  <link rel="stylesheet" href="dist/spectre.css" />
-  <link rel="stylesheet" href="dist/spectre-exp.css" />
-  <link rel="stylesheet" href="dist/spectre-icons.css" />
-  <link rel="stylesheet" href="css/docs.css" />
+  <link rel="stylesheet" href="dist/spectre.css">
+  <link rel="stylesheet" href="dist/spectre-exp.css">
+  <link rel="stylesheet" href="dist/spectre-icons.css">
+  <link rel="stylesheet" href="css/docs.css">
 </head>
 <body>
   <div class="s-container container">
@@ -18,14 +18,14 @@
       <div id="sidebar" class="s-sidebar">
         <div class="s-brand">
           <a href="index.html" class="s-logo">
-            <img src="img/spectre-logo.svg" alt="Spectre.css CSS Framework" />
+            <img src="img/spectre-logo.svg" alt="Spectre.css CSS Framework">
             <h2>Spectre.css</h2>
           </a>
         </div>
         <div class="s-nav">
-          <div class="accordion">
-            <div class="accordion-item">
-              <input type="checkbox" id="docs-accordion-1" name="docs-accordion-checkbox" hidden />
+          <div class="accordion-container">
+            <div class="accordion">
+              <input type="checkbox" id="docs-accordion-1" name="docs-accordion-checkbox" hidden>
               <label class="accordion-header c-hand" for="docs-accordion-1">
                 Getting started
               </label>
@@ -49,8 +49,8 @@
                 </ul>
               </div>
             </div>
-            <div class="accordion-item">
-              <input type="checkbox" id="docs-accordion-2" name="docs-accordion-checkbox" hidden />
+            <div class="accordion">
+              <input type="checkbox" id="docs-accordion-2" name="docs-accordion-checkbox" hidden>
               <label class="accordion-header c-hand" for="docs-accordion-2">
                 Elements
               </label>
@@ -83,8 +83,8 @@
                 </ul>
               </div>
             </div>
-            <div class="accordion-item">
-              <input type="checkbox" id="docs-accordion-3" name="docs-accordion-checkbox" hidden />
+            <div class="accordion">
+              <input type="checkbox" id="docs-accordion-3" name="docs-accordion-checkbox" hidden>
               <label class="accordion-header c-hand" for="docs-accordion-3">
                 Layout
               </label>
@@ -102,8 +102,8 @@
                 </ul>
               </div>
             </div>
-            <div class="accordion-item">
-              <input type="checkbox" id="docs-accordion-4" name="docs-accordion-checkbox" hidden />
+            <div class="accordion">
+              <input type="checkbox" id="docs-accordion-4" name="docs-accordion-checkbox" hidden>
               <label class="accordion-header c-hand" for="docs-accordion-4">
                 Components
               </label>
@@ -172,8 +172,8 @@
                 </ul>
               </div>
             </div>
-            <div class="accordion-item">
-              <input type="checkbox" id="docs-accordion-5" name="docs-accordion-checkbox" hidden />
+            <div class="accordion">
+              <input type="checkbox" id="docs-accordion-5" name="docs-accordion-checkbox" hidden>
               <label class="accordion-header c-hand" for="docs-accordion-5">
                 Utilities
               </label>
@@ -206,8 +206,8 @@
                 </ul>
               </div>
             </div>
-            <div class="accordion-item">
-              <input type="checkbox" id="docs-accordion-6" name="docs-accordion-checkbox" hidden checked />
+            <div class="accordion">
+              <input type="checkbox" id="docs-accordion-6" name="docs-accordion-checkbox" hidden checked>
               <label class="accordion-header c-hand" for="docs-accordion-6">
                 Experimentals
               </label>
@@ -252,7 +252,7 @@
           <a href="#sidebar" class="btn btn-link btn-action"><i class="icon icon-menu"></i></a>
         </div>
         <a href="index.html" class="s-logo">
-          <img src="img/spectre-logo.svg" alt="Spectre.css CSS Framework" />
+          <img src="img/spectre-logo.svg" alt="Spectre.css CSS Framework">
         </a>
         <div class="float-btn">
           <a href="https://github.com/picturepan2/spectre" target="_blank" class="btn btn-primary">GitHub</a>
@@ -438,10 +438,10 @@
           <div class="columns">
             <div class="column col-12">
               <div class="carousel">
-                <input type="radio" id="slide-1" name="carousel-radio" hidden class="carousel-locator" checked />
-                <input type="radio" id="slide-2" name="carousel-radio" hidden class="carousel-locator" />
-                <input type="radio" id="slide-3" name="carousel-radio" hidden class="carousel-locator" />
-                <input type="radio" id="slide-4" name="carousel-radio" hidden class="carousel-locator" />
+                <input type="radio" id="slide-1" name="carousel-radio" hidden class="carousel-locator" checked>
+                <input type="radio" id="slide-2" name="carousel-radio" hidden class="carousel-locator">
+                <input type="radio" id="slide-3" name="carousel-radio" hidden class="carousel-locator">
+                <input type="radio" id="slide-4" name="carousel-radio" hidden class="carousel-locator">
                 <div class="carousel-container">
                   <figure class="carousel-item">
                     <label class="item-prev btn btn-action btn-lg" for="slide-4">
@@ -450,7 +450,7 @@
                     <label class="item-next btn btn-action btn-lg" for="slide-2">
                       <i class="icon icon-arrow-right"></i>
                     </label>
-                    <img src="img/osx-yosemite.jpg" class="img-responsive rounded" alt="macOS Yosemite Wallpaper" />
+                    <img src="img/osx-yosemite.jpg" class="img-responsive rounded" alt="macOS Yosemite Wallpaper">
                   </figure>
 
                   <figure class="carousel-item">
@@ -460,7 +460,7 @@
                     <label class="item-next btn btn-action btn-lg" for="slide-3">
                       <i class="icon icon-arrow-right"></i>
                     </label>
-                    <img src="img/osx-yosemite-2.jpg" class="img-responsive rounded" alt="macOS Yosemite Wallpaper" />
+                    <img src="img/osx-yosemite-2.jpg" class="img-responsive rounded" alt="macOS Yosemite Wallpaper">
                   </figure>
 
                   <figure class="carousel-item">
@@ -470,7 +470,7 @@
                     <label class="item-next btn btn-action btn-lg" for="slide-4">
                       <i class="icon icon-arrow-right"></i>
                     </label>
-                    <img src="img/osx-el-capitan.jpg" class="img-responsive rounded" alt="macOS Yosemite Wallpaper" />
+                    <img src="img/osx-el-capitan.jpg" class="img-responsive rounded" alt="macOS Yosemite Wallpaper">
                   </figure>
 
                   <figure class="carousel-item">
@@ -480,7 +480,7 @@
                     <label class="item-next btn btn-action btn-lg" for="slide-1">
                       <i class="icon icon-arrow-right"></i>
                     </label>
-                    <img src="img/osx-el-capitan-2.jpg" class="img-responsive rounded" alt="macOS Yosemite Wallpaper" />
+                    <img src="img/osx-el-capitan-2.jpg" class="img-responsive rounded" alt="macOS Yosemite Wallpaper">
                   </figure>
                 </div>
                 <div class="carousel-nav">
@@ -504,11 +504,11 @@
             <div class="column col-12">
               <div class="comparison-slider">
                 <figure class="comparison-before">
-                  <img src="img/macos-sierra-2.jpg" class="rounded" alt="macOS Sierra Wallpaper" />
+                  <img src="img/macos-sierra-2.jpg" class="rounded" alt="macOS Sierra Wallpaper">
                   <div class="comparison-label">Before</div>
                 </figure>
                 <figure class="comparison-after">
-                  <img src="img/macos-sierra-2.jpg" class="filter-grayscale rounded" alt="macOS Sierra Wallpaper" />
+                  <img src="img/macos-sierra-2.jpg" class="filter-grayscale rounded" alt="macOS Sierra Wallpaper">
                   <div class="comparison-label">After</div>
                   <textarea class="comparison-resizer" readonly></textarea>
                 </figure>
@@ -516,7 +516,7 @@
             </div>
           </div>
 
-<!-- comparison sliders example -->
+<!-- comparison sliders -->
 <pre class="code" data-lang="HTML"><code>&lt;<span class="tag">div</span> <span class="atn">class</span>=<span class="atv">&quot;comparison-slider&quot;</span>&gt;
   &lt;<span class="tag">figure</span> <span class="atn">class</span>=<span class="atv">&quot;comparison-before&quot;</span>&gt;&lt;<span class="tag">/div</span>&gt;
     <span class="com">&lt;!-- image (before) --&gt;</span>
@@ -541,11 +541,11 @@
           <div class="columns">
             <div class="column col-12">
               <div class="filter">
-                <input type="radio" id="tag-all" class="filter-tag" name="filter-radio" hidden checked />
-                <input type="radio" id="tag-action" class="filter-tag" name="filter-radio" hidden />
-              	<input type="radio" id="tag-roleplaying" class="filter-tag" name="filter-radio" hidden />
-                <input type="radio" id="tag-shooter" class="filter-tag" name="filter-radio" hidden />
-              	<input type="radio" id="tag-sports" class="filter-tag" name="filter-radio" hidden />
+                <input type="radio" id="tag-all" class="filter-tag" name="filter-radio" hidden checked>
+                <input type="radio" id="tag-action" class="filter-tag" name="filter-radio" hidden>
+              	<input type="radio" id="tag-roleplaying" class="filter-tag" name="filter-radio" hidden>
+                <input type="radio" id="tag-shooter" class="filter-tag" name="filter-radio" hidden>
+              	<input type="radio" id="tag-sports" class="filter-tag" name="filter-radio" hidden>
 
                 <div class="filter-nav">
                   <label class="chip" for="tag-all">All</label>
@@ -656,11 +656,11 @@
             </div>
           </div>
 
-<!-- filters example -->
+<!-- filters -->
 <pre class="code" data-lang="HTML"><code>&lt;<span class="tag">div</span> <span class="atn">class</span>=<span class="atv">&quot;filter&quot;</span>&gt;
-  &lt;<span class="tag">input</span> <span class="atn">type</span>=<span class="atv">&quot;radio&quot;</span> <span class="atn">id</span>=<span class="atv">&quot;tag-all&quot;</span> <span class="atn">class</span>=<span class="atv">&quot;filter-tag&quot;</span> <span class="atn">name</span>=<span class="atv">&quot;filter-radio&quot;</span> <span class="atn">hidden</span> <span class="atn">checked</span> /&gt;
-  &lt;<span class="tag">input</span> <span class="atn">type</span>=<span class="atv">&quot;radio&quot;</span> <span class="atn">id</span>=<span class="atv">&quot;tag-action&quot;</span> <span class="atn">class</span>=<span class="atv">&quot;filter-tag&quot;</span> <span class="atn">name</span>=<span class="atv">&quot;filter-radio&quot;</span> <span class="atn">hidden</span> /&gt;
-  &lt;<span class="tag">input</span> <span class="atn">type</span>=<span class="atv">&quot;radio&quot;</span> <span class="atn">id</span>=<span class="atv">&quot;tag-roleplaying&quot;</span> <span class="atn">class</span>=<span class="atv">&quot;filter-tag&quot;</span> <span class="atn">name</span>=<span class="atv">&quot;filter-radio&quot;</span> <span class="atn">hidden</span> /&gt;
+  &lt;<span class="tag">input</span> <span class="atn">type</span>=<span class="atv">&quot;radio&quot;</span> <span class="atn">id</span>=<span class="atv">&quot;tag-all&quot;</span> <span class="atn">class</span>=<span class="atv">&quot;filter-tag&quot;</span> <span class="atn">name</span>=<span class="atv">&quot;filter-radio&quot;</span> <span class="atn">hidden</span> <span class="atn">checked</span>&gt;
+  &lt;<span class="tag">input</span> <span class="atn">type</span>=<span class="atv">&quot;radio&quot;</span> <span class="atn">id</span>=<span class="atv">&quot;tag-action&quot;</span> <span class="atn">class</span>=<span class="atv">&quot;filter-tag&quot;</span> <span class="atn">name</span>=<span class="atv">&quot;filter-radio&quot;</span> <span class="atn">hidden</span>&gt;
+  &lt;<span class="tag">input</span> <span class="atn">type</span>=<span class="atv">&quot;radio&quot;</span> <span class="atn">id</span>=<span class="atv">&quot;tag-roleplaying&quot;</span> <span class="atn">class</span>=<span class="atv">&quot;filter-tag&quot;</span> <span class="atn">name</span>=<span class="atv">&quot;filter-radio&quot;</span> <span class="atn">hidden</span>&gt;
 
   &lt;<span class="tag">div</span> <span class="atn">class</span>=<span class="atv">&quot;filter-nav&quot;</span>&gt;
     &lt;<span class="tag">label</span> <span class="atn">class</span>=<span class="atv">&quot;chip&quot;</span> <span class="atn">for</span>=<span class="atv">&quot;tag-all&quot;</span>&gt;All&lt;<span class="tag">/label</span>&gt;
@@ -705,7 +705,7 @@
             <p></p>
           </div>
 
-<!-- meters example -->
+<!-- meters -->
 <pre class="code" data-lang="HTML"><code><span class="com">&lt;!-- Meter is green when low &lt; value &lt; high --&gt;</span>
 &lt;<span class="tag">meter</span> <span class="atn">class</span>=<span class="atv">&quot;meter&quot;</span> <span class="atn">value</span>=<span class="atv">&quot;20&quot;</span> <span class="atn">min</span>=<span class="atv">&quot;0&quot;</span> <span class="atn">max</span>=<span class="atv">&quot;100&quot;</span>&gt;&lt;<span class="tag">/meter</span>&gt;
 &lt;<span class="tag">meter</span> <span class="atn">class</span>=<span class="atv">&quot;meter&quot;</span> <span class="atn">value</span>=<span class="atv">&quot;60&quot;</span> <span class="atn">min</span>=<span class="atv">&quot;0&quot;</span> <span class="atn">max</span>=<span class="atv">&quot;100&quot;</span> <span class="atn">low</span>=<span class="atv">&quot;30&quot;</span> <span class="atn">high</span>=<span class="atv">&quot;80&quot;</span>&gt;&lt;<span class="tag">/meter</span>&gt;
@@ -734,14 +734,14 @@
                     <h2>tvOS parallax demo</h2>
                   </div>
                   <div class="parallax-back">
-                    <img src="img/osx-yosemite-2.jpg" class="img-responsive rounded" alt="macOS Yosemite Wallpaper" />
+                    <img src="img/osx-yosemite-2.jpg" class="img-responsive rounded" alt="macOS Yosemite Wallpaper">
                   </div>
                 </div>
               </div>
             </div>
           </div>
 
-<!-- parallax example -->
+<!-- parallax -->
 <pre class="code" data-lang="HTML"><code>&lt;<span class="tag">div</span> <span class="atn">class</span>=<span class="atv">&quot;parallax&quot;</span>&gt;
   &lt;<span class="tag">div</span> <span class="atn">class</span>=<span class="atv">&quot;parallax-top-left&quot;</span>&gt;&lt;<span class="tag">/div</span>&gt;
   &lt;<span class="tag">div</span> <span class="atn">class</span>=<span class="atv">&quot;parallax-top-right&quot;</span>&gt;&lt;<span class="tag">/div</span>&gt;
@@ -752,7 +752,7 @@
       &lt;<span class="tag">h2</span>&gt;tvOS parallax demo&lt;<span class="tag">/h2</span>&gt;
     &lt;<span class="tag">/div</span>&gt;
     &lt;<span class="tag">div</span> <span class="atn">class</span>=<span class="atv">&quot;parallax-back&quot;</span>&gt;
-      &lt;<span class="tag">img</span> <span class="atn">src</span>=<span class="atv">&quot;img/osx-el-capitan.jpg&quot;</span> <span class="atn">class</span>=<span class="atv">&quot;img-responsive rounded&quot;</span> ... /&gt;
+      &lt;<span class="tag">img</span> <span class="atn">src</span>=<span class="atv">&quot;img/osx-el-capitan.jpg&quot;</span> <span class="atn">class</span>=<span class="atv">&quot;img-responsive rounded&quot;</span> ...&gt;
     &lt;<span class="tag">/div</span>&gt;
   &lt;<span class="tag">/div</span>&gt;
 &lt;<span class="tag">/div</span>&gt;
@@ -780,7 +780,7 @@
             </div>
           </div>
 
-<!-- progress example -->
+<!-- progress -->
 <pre class="code" data-lang="HTML"><code>&lt;<span class="tag">progress</span> <span class="atn">class</span>=<span class="atv">&quot;progress&quot;</span> <span class="atn">value</span>=<span class="atv">&quot;25&quot;</span> <span class="atn">max</span>=<span class="atv">&quot;100&quot;</span>&gt;&lt;<span class="tag">/progress</span>&gt;
 &lt;<span class="tag">progress</span> <span class="atn">class</span>=<span class="atv">&quot;progress&quot;</span> <span class="atn">max</span>=<span class="atv">&quot;100&quot;</span>&gt;&lt;<span class="tag">/progress</span>&gt;
 </code></pre>
@@ -794,14 +794,14 @@
           </div>
           <div class="columns">
             <div class="column col-6 col-xs-12">
-              <input class="slider tooltip" data-tooltip="50" type="range" min="0" max="100" value="50" />
+              <input class="slider tooltip" data-tooltip="50" type="range" min="0" max="100" value="50">
             </div>
             <div class="column col-6 col-xs-12">
-              <input class="slider" type="range" min="0" max="100" value="50" disabled />
+              <input class="slider" type="range" min="0" max="100" value="50" disabled>
             </div>
           </div>
 
-<!-- sliders example -->
+<!-- sliders -->
 <pre class="code" data-lang="HTML"><code>&lt;<span class="tag">input</span> <span class="atn">class</span>=<span class="atv">&quot;slider&quot;</span> <span class="atn">type</span>=<span class="atv">&quot;range&quot;</span> <span class="atn">min</span>=<span class="atv">&quot;0&quot;</span> <span class="atn">max</span>=<span class="atv">&quot;100&quot;</span> <span class="atn">value</span>=<span class="atv">&quot;50&quot;</span> <span class="tag">/</span>&gt;
 </code></pre>
 
@@ -874,7 +874,7 @@
             </div>
           </div>
 
-<!-- timelines example -->
+<!-- timelines -->
 <pre class="code" data-lang="HTML"><code>&lt;<span class="tag">div</span> <span class="atn">class</span>=<span class="atv">&quot;timeline&quot;</span>&gt;
   &lt;<span class="tag">div</span> <span class="atn">class</span>=<span class="atv">&quot;timeline-item&quot;</span> <span class="atn">id</span>=<span class="atv">&quot;timeline-example-1&quot;</span>&gt;
     &lt;<span class="tag">div</span> <span class="atn">class</span>=<span class="atv">&quot;timeline-left&quot;</span>&gt;