Merge pull request #456 from picturepan2/0.5.3 v0.5.3

0.5.3

1 files changed, 13 insertions, 9 deletions

diff --git a/docs/utilities.html b/docs/utilities.html
index cebd4c2..a2d5e3f 100644
--- a/docs/utilities.html
+++ b/docs/utilities.html
@@ -18,7 +18,7 @@
     <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><a class="btn btn-primary" href="https://github.com/picturepan2/spectre" target="_blank">GitHub</a></div>
       <div class="docs-sidebar off-canvas-sidebar" id="sidebar">
-        <div class="docs-brand"><a class="docs-logo" href="/"><img src="img/spectre-logo.svg" alt="Spectre.css CSS Framework">
+        <div class="docs-brand"><a class="docs-logo" href="index.html"><img src="img/spectre-logo.svg" alt="Spectre.css CSS Framework">
             <h2>SPECTRE</h2></a></div>
         <div class="docs-nav">
           <div class="accordion-container">
@@ -133,7 +133,7 @@
             <h3 class="s-title">Color utilities<a class="anchor" href="#colors" aria-hidden="true">#</a></h3>
             <div class="docs-ad">
               <div class="hide-md text-center">
-                <script async="" src="//pagead2.googlesyndication.com/pagead/js/adsbygoogle.js"></script>
+                <script async="" src="https://pagead2.googlesyndication.com/pagead/js/adsbygoogle.js"></script>
                 <!-- GitHub-lg--><ins class="adsbygoogle mx-auto" style="display:inline-block;width:728px;height:90px" data-ad-client="ca-pub-2225124559530218" data-ad-slot="9894180784"></ins>
                 <script>(adsbygoogle = window.adsbygoogle || []).push({});</script>
               </div>
@@ -148,6 +148,7 @@
               <div class="column col-12">
                 <p><span class="text-primary">primary color</span></p>
                 <p><span class="text-secondary">secondary color</span></p>
+                <p><span class="text-dark">dark color</span></p>
                 <p><span class="text-gray">gray color</span></p>
                 <p><span class="text-light bg-dark p-1 rounded">light color</span></p>
                 <p><span class="text-success">success color</span></p>
@@ -157,6 +158,7 @@
             </div>
             <pre class="code" data-lang="HTML"><code><span class="hljs-tag">&lt;<span class="hljs-name">span</span> <span class="hljs-attr">class</span>=<span class="hljs-string">"text-primary"</span>&gt;</span>primary color<span class="hljs-tag">&lt;/<span class="hljs-name">span</span>&gt;</span>
 <span class="hljs-tag">&lt;<span class="hljs-name">span</span> <span class="hljs-attr">class</span>=<span class="hljs-string">"text-secondary"</span>&gt;</span>secondary color<span class="hljs-tag">&lt;/<span class="hljs-name">span</span>&gt;</span>
+<span class="hljs-tag">&lt;<span class="hljs-name">span</span> <span class="hljs-attr">class</span>=<span class="hljs-string">"text-dark"</span>&gt;</span>dark color<span class="hljs-tag">&lt;/<span class="hljs-name">span</span>&gt;</span>
 <span class="hljs-tag">&lt;<span class="hljs-name">span</span> <span class="hljs-attr">class</span>=<span class="hljs-string">"text-gray"</span>&gt;</span>gray color<span class="hljs-tag">&lt;/<span class="hljs-name">span</span>&gt;</span>
 <span class="hljs-tag">&lt;<span class="hljs-name">span</span> <span class="hljs-attr">class</span>=<span class="hljs-string">"text-light"</span>&gt;</span>light color<span class="hljs-tag">&lt;/<span class="hljs-name">span</span>&gt;</span>
 <span class="hljs-tag">&lt;<span class="hljs-name">span</span> <span class="hljs-attr">class</span>=<span class="hljs-string">"text-success"</span>&gt;</span>success color<span class="hljs-tag">&lt;/<span class="hljs-name">span</span>&gt;</span>
@@ -167,6 +169,7 @@
               <div class="column col-12">
                 <p><a class="text-primary p-1" href="#colors">primary link</a></p>
                 <p><a class="text-secondary p-1" href="#colors">secondary link</a></p>
+                <p><a class="text-dark p-1" href="#colors">dark link</a></p>
                 <p><a class="text-gray p-1" href="#colors">gray link</a></p>
                 <p><a class="text-light bg-dark p-1 rounded" href="#colors">light link</a></p>
                 <p><a class="text-success p-1" href="#colors">success link</a></p>
@@ -176,6 +179,7 @@
             </div>
             <pre class="code" data-lang="HTML"><code><span class="hljs-tag">&lt;<span class="hljs-name">a</span> <span class="hljs-attr">class</span>=<span class="hljs-string">"text-primary"</span> <span class="hljs-attr">href</span>=<span class="hljs-string">"#"</span>&gt;</span>primary color<span class="hljs-tag">&lt;/<span class="hljs-name">a</span>&gt;</span>
 <span class="hljs-tag">&lt;<span class="hljs-name">a</span> <span class="hljs-attr">class</span>=<span class="hljs-string">"text-secondary"</span> <span class="hljs-attr">href</span>=<span class="hljs-string">"#"</span>&gt;</span>secondary color<span class="hljs-tag">&lt;/<span class="hljs-name">a</span>&gt;</span>
+<span class="hljs-tag">&lt;<span class="hljs-name">a</span> <span class="hljs-attr">class</span>=<span class="hljs-string">"text-dark"</span> <span class="hljs-attr">href</span>=<span class="hljs-string">"#"</span>&gt;</span>dark color<span class="hljs-tag">&lt;/<span class="hljs-name">a</span>&gt;</span>
 <span class="hljs-tag">&lt;<span class="hljs-name">a</span> <span class="hljs-attr">class</span>=<span class="hljs-string">"text-gray"</span> <span class="hljs-attr">href</span>=<span class="hljs-string">"#"</span>&gt;</span>gray color<span class="hljs-tag">&lt;/<span class="hljs-name">a</span>&gt;</span>
 <span class="hljs-tag">&lt;<span class="hljs-name">a</span> <span class="hljs-attr">class</span>=<span class="hljs-string">"text-light"</span> <span class="hljs-attr">href</span>=<span class="hljs-string">"#"</span>&gt;</span>light color<span class="hljs-tag">&lt;/<span class="hljs-name">a</span>&gt;</span>
 <span class="hljs-tag">&lt;<span class="hljs-name">a</span> <span class="hljs-attr">class</span>=<span class="hljs-string">"text-success"</span> <span class="hljs-attr">href</span>=<span class="hljs-string">"#"</span>&gt;</span>success color<span class="hljs-tag">&lt;/<span class="hljs-name">a</span>&gt;</span>
@@ -202,8 +206,8 @@
 <span class="hljs-tag">&lt;<span class="hljs-name">div</span> <span class="hljs-attr">class</span>=<span class="hljs-string">"bg-warning"</span>&gt;</span>warning bg<span class="hljs-tag">&lt;/<span class="hljs-name">div</span>&gt;</span>
 <span class="hljs-tag">&lt;<span class="hljs-name">div</span> <span class="hljs-attr">class</span>=<span class="hljs-string">"bg-error"</span>&gt;</span>error bg<span class="hljs-tag">&lt;/<span class="hljs-name">div</span>&gt;</span></code></pre>
           </div>
-          <div class="container" id="cursor">
-            <h3 class="s-title">Cursor utilities<a class="anchor" href="#cursor" aria-hidden="true">#</a></h3>
+          <div class="container" id="cursors">
+            <h3 class="s-title">Cursor utilities<a class="anchor" href="#cursors" aria-hidden="true">#</a></h3>
             <p>Cursor utilities specify which mouse cursor to display when mouseover.</p>
             <div class="docs-demo columns">
               <div class="column col-4">
@@ -241,7 +245,7 @@
           <div class="container" id="display">
             <h3 class="s-title">Display utilities<a class="anchor" href="#display" aria-hidden="true">#</a></h3>
             <div class="docs-ad docs-ad-sidebar text-center">
-              <script id="_carbonads_js" async="" type="text/javascript" src="//cdn.carbonads.com/carbon.js?serve=CK7DTKQW&amp;placement=picturepan2githubio"></script>
+              <script id="_carbonads_js" async="" type="text/javascript" src="https://cdn.carbonads.com/carbon.js?serve=CK7DTKQW&amp;placement=picturepan2githubio"></script>
             </div>
             <p>Display utilities are used for display and hidden things.</p>
             <pre class="code" data-lang="HTML"><code><span class="hljs-comment">&lt;!-- display: block; --&gt;</span>
@@ -394,16 +398,16 @@
             <p>Shape utilities are used for change element shapes.</p>
             <div class="docs-demo columns">
               <div class="column col-6 text-center">
-                <div class="bg-primary text-light docs-shape rounded centered">rounded</div>
+                <div class="bg-primary text-light docs-shape s-rounded centered">s-rounded</div>
               </div>
               <div class="column col-6 text-center">
-                <div class="bg-primary text-light docs-shape circle centered">circle</div>
+                <div class="bg-primary text-light docs-shape s-circle centered">s-circle</div>
               </div>
             </div>
             <pre class="code" data-lang="HTML"><code><span class="hljs-comment">&lt;!-- rounded element --&gt;</span>
-<span class="hljs-tag">&lt;<span class="hljs-name">div</span> <span class="hljs-attr">class</span>=<span class="hljs-string">"rounded"</span>&gt;</span><span class="hljs-tag">&lt;/<span class="hljs-name">div</span>&gt;</span>
+<span class="hljs-tag">&lt;<span class="hljs-name">div</span> <span class="hljs-attr">class</span>=<span class="hljs-string">"s-rounded"</span>&gt;</span><span class="hljs-tag">&lt;/<span class="hljs-name">div</span>&gt;</span>
 <span class="hljs-comment">&lt;!-- circle element --&gt;</span>
-<span class="hljs-tag">&lt;<span class="hljs-name">div</span> <span class="hljs-attr">class</span>=<span class="hljs-string">"circle"</span>&gt;</span><span class="hljs-tag">&lt;/<span class="hljs-name">div</span>&gt;</span></code></pre>
+<span class="hljs-tag">&lt;<span class="hljs-name">div</span> <span class="hljs-attr">class</span>=<span class="hljs-string">"s-circle"</span>&gt;</span><span class="hljs-tag">&lt;/<span class="hljs-name">div</span>&gt;</span></code></pre>
           </div>
           <div class="container" id="text">
             <h3 class="s-title">Text utilities<a class="anchor" href="#text" aria-hidden="true">#</a></h3>