Merge pull request #534 from picturepan2/0.5.6 v0.5.6

0.5.6

1 files changed, 32 insertions, 3 deletions

diff --git a/docs/layout/responsive.html b/docs/layout/responsive.html
index b63d3c0..165dde5 100644
--- a/docs/layout/responsive.html
+++ b/docs/layout/responsive.html
@@ -19,7 +19,9 @@
   <body>
     <div class="docs-container off-canvas off-canvas-sidebar-show">
       <div class="docs-navbar"><a class="off-canvas-toggle btn btn-link btn-action" href="#sidebar"><i class="icon icon-menu"></i></a>
-        <div class="btns"><a class="btn btn-primary float-right" href="https://github.com/picturepan2/spectre" target="_blank">GitHub</a><a class="btn mr-1 float-right" href="https://www.paypal.me/picturepan2" target="_blank">Sponsor</a></div>
+        <div class="btns d-flex">
+          <input class="docs-search form-input" type="text" placeholder="Search Docs"><a class="btn ml-1" href="https://www.paypal.me/picturepan2" target="_blank">PayPal</a><a class="btn btn-primary ml-1" href="https://github.com/picturepan2/spectre" target="_blank">GitHub</a>
+        </div>
       </div>
       <div class="docs-sidebar off-canvas-sidebar" id="sidebar">
         <div class="docs-brand"><a class="docs-logo" href="../index.html"><img src="../img/spectre-logo.svg" alt="Spectre.css CSS Framework">
@@ -76,6 +78,8 @@
                   </li>
                   <li class="menu-item"><a href="../layout/responsive.html">Responsive</a>
                   </li>
+                  <li class="menu-item"><a href="../layout/hero.html">Hero</a>
+                  </li>
                   <li class="menu-item"><a href="../layout/navbar.html">Navbar</a>
                   </li>
                 </ul>
@@ -202,10 +206,26 @@
             <p>Spectre provides a neat responsive layout grid system and responsive visibility utilities.</p>
             <div class="docs-demo columns">
               <div class="column col-10 col-lg-8 col-md-6 col-sm-4">
-                <div class="bg-gray docs-block">col-10 <br> col-lg-8 <br> col-md-6 <br> col-sm-4</div>
+                <div class="bg-gray docs-block">
+                  <div class="text-primary">col-10</div>
+                  <div class="text-dark hide-lg">col-lg-8</div>
+                  <div class="text-primary show-lg">col-lg-8</div>
+                  <div class="text-dark hide-md">col-md-6</div>
+                  <div class="text-primary show-md">col-md-6</div>
+                  <div class="text-dark hide-sm">col-sm-4</div>
+                  <div class="text-primary show-sm">col-sm-4</div>
+                </div>
               </div>
               <div class="column col-2 col-lg-4 col-md-6 col-sm-8">
-                <div class="bg-gray docs-block">col-2 <br> col-lg-4 <br> col-md-6 <br> col-sm-8</div>
+                <div class="bg-gray docs-block">
+                  <div class="text-primary">col-2</div>
+                  <div class="text-dark hide-lg">col-lg-4</div>
+                  <div class="text-primary show-lg">col-lg-4</div>
+                  <div class="text-dark hide-md">col-md-6</div>
+                  <div class="text-primary show-md">col-md-6</div>
+                  <div class="text-dark hide-sm">col-sm-8</div>
+                  <div class="text-primary show-sm">col-sm-8</div>
+                </div>
               </div>
             </div>
             <p>There are <code>col-xs-<1-12></code>, <code>col-sm-<1-12></code>, <code>col-md-<1-12></code>, <code>col-lg-<1-12></code> and <code>col-xl-<1-12></code> available for flexible grid across mobile, tablet and desktop viewport usage.</p>
@@ -487,6 +507,15 @@
         </div>
       </div>
     </div>
+    <script type="text/javascript" src="https://cdn.jsdelivr.net/npm/docsearch.js@2/dist/cdn/docsearch.min.js"></script>
+    <script>
+      docsearch({ 
+      apiKey: 'bede06373c5a1fa3c1bbe8401e24c653', 
+      indexName: 'picturepan2_spectre', 
+      inputSelector: '.docs-search', 
+      debug: true
+      }); 
+    </script>
     <script>
       (function(i,s,o,g,r,a,m){i['GoogleAnalyticsObject']=r;i[r]=i[r]||function(){
             (i[r].q=i[r].q||[]).push(arguments)},i[r].l=1*new Date();a=s.createElement(o),