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

0.5.6

1 files changed, 21 insertions, 3 deletions

diff --git a/docs/elements/code.html b/docs/elements/code.html
index e6c88aa..fb4befa 100644
--- a/docs/elements/code.html
+++ b/docs/elements/code.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>
@@ -200,8 +204,13 @@
               </div>
             </div>
             <p>Code is used for styling inline and multiline code snippets.</p>
-            <p>For inline code, you can use the &lt;code&gt; element. 
-              For multiline code snippet blocks, you can use &lt;pre&gt; with the <code>code</code> class as a container, and add &lt;code&gt; inside it.
+            <h4 class="s-subtitle" id="code-inline">Inline code<a class="anchor" href="#code-inline" aria-hidden="true">#</a></h4>
+            <pre class="code" data-lang="HTML"><code><span class="hljs-comment">&lt;!-- inline code --&gt;</span>
+<span class="hljs-tag">&lt;<span class="hljs-name">code</span>&gt;</span>code<span class="hljs-tag">&lt;/<span class="hljs-name">code</span>&gt;</span>
+</code></pre>
+            <p>For inline code, you can use the &lt;code&gt; element. </p>
+            <h4 class="s-subtitle" id="code-snippet">Code snippet<a class="anchor" href="#code-snippet" aria-hidden="true">#</a></h4>
+            <p>For multiline code snippet blocks, you can use &lt;pre&gt; with the <code>code</code> class as a container, and add &lt;code&gt; inside it.
               The <code>data-lang</code> attribute is rendered as the language name in the top right.
             </p>
             <pre class="code" data-lang="HTML"><code><span class="hljs-comment">&lt;!-- code snippets --&gt;</span>
@@ -226,6 +235,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),