Merge pull request #345 from picturepan2/0.4.7v0.4.7

0.4.7

1 files changed, 26 insertions, 12 deletions

diff --git a/docs/components.html b/docs/components.html
index 6b5bb3c..a01e3d0 100644
--- a/docs/components.html
+++ b/docs/components.html
@@ -25,7 +25,7 @@
       <div class="docs-brand">
         <a href="index.html" class="docs-logo">
           <img src="img/spectre-logo.svg" alt="Spectre.css CSS Framework">
-          <h2>Spectre.css</h2>
+          <h2>SPECTRE</h2>
         </a>
       </div>
       <div class="docs-nav">
@@ -38,7 +38,7 @@
             <div class="accordion-body">
               <ul class="menu menu-nav">
                 <li class="menu-item">
-                  <a href="getting-started.html#introduction">Introduction</a>
+                  <a href="getting-started.html">Introduction</a>
                 </li>
                 <li class="menu-item">
                   <a href="getting-started.html#installation">Installation</a>
@@ -63,7 +63,7 @@
             <div class="accordion-body">
               <ul class="menu menu-nav">
                 <li class="menu-item">
-                  <a href="elements.html#typography">Typography</a>
+                  <a href="elements.html">Typography</a>
                 </li>
                 <li class="menu-item">
                   <a href="elements.html#tables">Tables</a>
@@ -97,7 +97,7 @@
             <div class="accordion-body">
               <ul class="menu menu-nav">
                 <li class="menu-item">
-                  <a href="layout.html#grid">Flexbox grid</a>
+                  <a href="layout.html">Flexbox grid</a>
                 </li>
                 <li class="menu-item">
                   <a href="layout.html#responsive">Responsive</a>
@@ -116,7 +116,7 @@
             <div class="accordion-body">
               <ul class="menu menu-nav">
                 <li class="menu-item">
-                  <a href="components.html#accordions">Accordions</a>
+                  <a href="components.html">Accordions</a>
                 </li>
                 <li class="menu-item">
                   <a href="components.html#autocomplete">Autocomplete</a>
@@ -186,7 +186,7 @@
             <div class="accordion-body">
               <ul class="menu menu-nav">
                 <li class="menu-item">
-                  <a href="utilities.html#colors">Colors</a>
+                  <a href="utilities.html">Colors</a>
                 </li>
                 <li class="menu-item">
                   <a href="utilities.html#cursors">Cursors</a>
@@ -220,7 +220,7 @@
             <div class="accordion-body">
               <ul class="menu menu-nav">
                 <li class="menu-item">
-                  <a href="experimentals.html#calendars">Calendars</a>
+                  <a href="experimentals.html">Calendars</a>
                 </li>
                 <li class="menu-item">
                   <a href="experimentals.html#carousels">Carousels</a>
@@ -444,6 +444,20 @@
 
       </div>
 
+      <div class="container">
+        <div class="docs-ad docs-ad-sidebar">
+          <script async src="//pagead2.googlesyndication.com/pagead/js/adsbygoogle.js"></script>
+          <!-- github-vertical-sm -->
+          <ins class="adsbygoogle"
+              style="display:inline-block;width:120px;height:240px"
+              data-ad-client="ca-pub-2225124559530218"
+              data-ad-slot="5087273059"></ins>
+          <script>
+          (adsbygoogle = window.adsbygoogle || []).push({});
+          </script>
+        </div>
+      </div>
+
       <div id="autocomplete" class="container">
         <h3 class="s-title"><a href="#autocomplete" class="anchor" aria-hidden="true">#</a>Autocomplete</h3>
         <div class="docs-note">
@@ -1418,11 +1432,11 @@
         </div>
 
 <!-- modals example -->
-<pre class="code" data-lang="HTML"><code>&lt;<span class="tag">div</span> <span class="atn">class</span>=<span class="atv">&quot;modal active&quot;</span>&gt;
-  &lt;<span class="tag">div</span> <span class="atn">class</span>=<span class="atv">&quot;modal-overlay&quot;</span>&gt;&lt;<span class="tag">/div</span>&gt;
+<pre class="code" data-lang="HTML"><code>&lt;<span class="tag">div</span> <span class="atn">class</span>=<span class="atv">&quot;modal active&quot;</span> <span class="atn">id</span>=<span class="atv">&quot;modal-id&quot;</span>&gt;
+  &lt;<span class="tag">a</span> <span class="atn">href</span>=<span class="atv">&quot;#close&quot;</span> <span class="atn">class</span>=<span class="atv">&quot;modal-overlay&quot;</span> <span class="atn">aria-label</span>=<span class="atv">&quot;Close&quot;</span>&gt;&lt;<span class="tag">/a</span>&gt;
   &lt;<span class="tag">div</span> <span class="atn">class</span>=<span class="atv">&quot;modal-container&quot;</span>&gt;
     &lt;<span class="tag">div</span> <span class="atn">class</span>=<span class="atv">&quot;modal-header&quot;</span>&gt;
-      &lt;<span class="tag">button</span> <span class="atn">class</span>=<span class="atv">&quot;btn btn-clear float-right&quot;</span>&gt;&lt;<span class="tag">/button</span>&gt;
+      &lt;<span class="tag">a</span> <span class="atn">href</span>=<span class="atv">&quot;#close&quot;</span> <span class="atn">class</span>=<span class="atv">&quot;btn btn-clear float-right&quot;</span> <span class="atn">aria-label</span>=<span class="atv">&quot;Close&quot;</span>&gt;&lt;<span class="tag">/a</span>&gt;
       &lt;<span class="tag">div</span> <span class="atn">class</span>=<span class="atv">&quot;modal-title h5&quot;</span>&gt;Modal title&lt;<span class="tag">/div</span>&gt;
     &lt;<span class="tag">/div</span>&gt;
     &lt;<span class="tag">div</span> <span class="atn">class</span>=<span class="atv">&quot;modal-body&quot;</span>&gt;
@@ -1518,7 +1532,7 @@
 
 <!-- modals -->
 <pre class="code" data-lang="HTML"><code>&lt;<span class="tag">div</span> <span class="atn">class</span>=<span class="atv">&quot;modal modal-sm&quot;</span>&gt;
-  &lt;<span class="tag">div</span> <span class="atn">class</span>=<span class="atv">&quot;modal-overlay&quot;</span>&gt;&lt;<span class="tag">/div</span>&gt;
+  &lt;<span class="tag">a</span> <span class="atn">href</span>=<span class="atv">&quot;#close&quot;</span> <span class="atn">class</span>=<span class="atv">&quot;modal-overlay&quot;</span> <span class="atn">aria-label</span>=<span class="atv">&quot;Close&quot;</span>&gt;&lt;<span class="tag">/a</span>&gt;
   &lt;<span class="tag">div</span> <span class="atn">class</span>=<span class="atv">&quot;modal-container&quot;</span>&gt;
     <span class="com">&lt;!-- modal structure here --&gt;</span>
   &lt;<span class="tag">/div</span>&gt;
@@ -2450,7 +2464,7 @@
 
       <footer class="docs-footer">
         <p><a href="https://github.com/picturepan2/spectre" target="_blank">GitHub</a> | <a href="https://twitter.com/spectrecss" target="_blank">Twitter</a> | <a href="https://www.paypal.me/picturepan2" target="_blank">PayPal Donate</a> | Version <span class="version"></span></p>
-        <p>Designed and built with ♥ by <a href="https://twitter.com/picturepan2" target="_blank">Yan Zhu</a>. Licensed under the <a href="https://github.com/picturepan2/spectre/blob/master/LICENSE" target="_blank">MIT License</a>.</p>
+        <p>Designed and built with <span class="text-error">♥</span> by <a href="https://twitter.com/picturepan2" target="_blank">Yan Zhu</a>. Licensed under the <a href="https://github.com/picturepan2/spectre/blob/master/LICENSE" target="_blank">MIT License</a>.</p>
       </footer>
 
     </div>