Remove fucking Carbon Ads

65 files changed, 688 insertions, 199 deletions

diff --git a/docs/components.html b/docs/components.html
index cbe8404..004d174 100644
--- a/docs/components.html
+++ b/docs/components.html
@@ -200,6 +200,17 @@
         <div class="docs-content" id="content">
           <div class="container" id="components">
             <h3 class="s-title">Components<a class="anchor" href="#components" aria-hidden="true">#</a></h3>
+            <div class="docs-ad">
+              <div class="hide-md text-center">
+                <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>
+              <div class="show-md text-center">
+                <!-- GitHub-sm--><ins class="adsbygoogle" style="display:inline-block;width:300px;height:250px" data-ad-client="ca-pub-2225124559530218" data-ad-slot="9278881734"></ins>
+                <script>(adsbygoogle = window.adsbygoogle || []).push({});</script>
+              </div>
+            </div>
             <p> <strong>Spectre.css </strong>is a lightweight, responsive and modern CSS framework for faster and extensible development.</p>
             <p>
                Spectre provides basic styles for typography and elements, flexbox based responsive layout system, pure CSS components and utilities with best practice coding and consistent design language.</p>
@@ -376,9 +387,6 @@
                 </div>
               </div>
             </div>
-            <div class="docs-ad docs-ad-sidebar text-center">
-              <script id="_carbonads_js" async="" type="text/javascript" src="https://cdn.carbonads.com/carbon.js?serve=CK7DTKQW&amp;placement=picturepan2githubio"></script>
-            </div>
           </div>
           <div class="docs-footer container grid-lg" id="copyright">
             <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> · <a href="https://www.patreon.com/spectrecss" target="_blank">Patreon Sponsor</a> · Version <span class="version"></span></p>
diff --git a/docs/components/accordions.html b/docs/components/accordions.html
index a4015a7..fc883c1 100644
--- a/docs/components/accordions.html
+++ b/docs/components/accordions.html
@@ -200,6 +200,17 @@
         <div class="docs-content" id="content">
           <div class="container" id="accordions">
             <h3 class="s-title">Accordions<a class="anchor" href="#accordions" aria-hidden="true">#</a></h3>
+            <div class="docs-ad">
+              <div class="hide-md text-center">
+                <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>
+              <div class="show-md text-center">
+                <!-- GitHub-sm--><ins class="adsbygoogle" style="display:inline-block;width:300px;height:250px" data-ad-client="ca-pub-2225124559530218" data-ad-slot="9278881734"></ins>
+                <script>(adsbygoogle = window.adsbygoogle || []).push({});</script>
+              </div>
+            </div>
             <p>Accordions are used to toggle sections of content.</p>
             <div class="docs-demo columns">
               <div class="column col-6 col-md-12">
@@ -305,9 +316,6 @@
   <span class="hljs-tag">&lt;/<span class="hljs-name">div</span>&gt;</span>
 <span class="hljs-tag">&lt;/<span class="hljs-name">details</span>&gt;</span>
 </code></pre>
-            <div class="docs-ad docs-ad-sidebar text-center">
-              <script id="_carbonads_js" async="" type="text/javascript" src="https://cdn.carbonads.com/carbon.js?serve=CK7DTKQW&amp;placement=picturepan2githubio"></script>
-            </div>
           </div>
           <div class="docs-footer container grid-lg" id="copyright">
             <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> · <a href="https://www.patreon.com/spectrecss" target="_blank">Patreon Sponsor</a> · Version <span class="version"></span></p>
diff --git a/docs/components/avatars.html b/docs/components/avatars.html
index f63eb84..f7a5749 100644
--- a/docs/components/avatars.html
+++ b/docs/components/avatars.html
@@ -200,6 +200,17 @@
         <div class="docs-content" id="content">
           <div class="container" id="avatars">
             <h3 class="s-title">Avatars<a class="anchor" href="#avatars" aria-hidden="true">#</a></h3>
+            <div class="docs-ad">
+              <div class="hide-md text-center">
+                <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>
+              <div class="show-md text-center">
+                <!-- GitHub-sm--><ins class="adsbygoogle" style="display:inline-block;width:300px;height:250px" data-ad-client="ca-pub-2225124559530218" data-ad-slot="9278881734"></ins>
+                <script>(adsbygoogle = window.adsbygoogle || []).push({});</script>
+              </div>
+            </div>
             <p>Avatars are user profile pictures. </p>
             <div class="docs-demo columns">
               <div class="column col-6 col-xs-12">
@@ -273,9 +284,6 @@
   <span class="hljs-tag">&lt;<span class="hljs-name">i</span> <span class="hljs-attr">class</span>=<span class="hljs-string">"avatar-presence online"</span>&gt;</span><span class="hljs-tag">&lt;/<span class="hljs-name">i</span>&gt;</span>
 <span class="hljs-tag">&lt;/<span class="hljs-name">figure</span>&gt;</span>
 </code></pre>
-            <div class="docs-ad docs-ad-sidebar text-center">
-              <script id="_carbonads_js" async="" type="text/javascript" src="https://cdn.carbonads.com/carbon.js?serve=CK7DTKQW&amp;placement=picturepan2githubio"></script>
-            </div>
           </div>
           <div class="docs-footer container grid-lg" id="copyright">
             <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> · <a href="https://www.patreon.com/spectrecss" target="_blank">Patreon Sponsor</a> · Version <span class="version"></span></p>
diff --git a/docs/components/badges.html b/docs/components/badges.html
index c5367d7..c21c678 100644
--- a/docs/components/badges.html
+++ b/docs/components/badges.html
@@ -200,6 +200,17 @@
         <div class="docs-content" id="content">
           <div class="container" id="badges">
             <h3 class="s-title">Badges<a class="anchor" href="#badges" aria-hidden="true">#</a></h3>
+            <div class="docs-ad">
+              <div class="hide-md text-center">
+                <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>
+              <div class="show-md text-center">
+                <!-- GitHub-sm--><ins class="adsbygoogle" style="display:inline-block;width:300px;height:250px" data-ad-client="ca-pub-2225124559530218" data-ad-slot="9278881734"></ins>
+                <script>(adsbygoogle = window.adsbygoogle || []).push({});</script>
+              </div>
+            </div>
             <p>Badges are often used as unread number indicators.</p>
             <div class="docs-demo columns">
               <div class="column col-3 col-xs-6"><span class="badge" data-badge="">Notifications</span></div>
@@ -244,9 +255,6 @@
   <span class="hljs-tag">&lt;<span class="hljs-name">img</span> <span class="hljs-attr">src</span>=<span class="hljs-string">"img/avatar-3.png"</span> <span class="hljs-attr">alt</span>=<span class="hljs-string">"YZ"</span>&gt;</span>
 <span class="hljs-tag">&lt;/<span class="hljs-name">figure</span>&gt;</span>
 </code></pre>
-            <div class="docs-ad docs-ad-sidebar text-center">
-              <script id="_carbonads_js" async="" type="text/javascript" src="https://cdn.carbonads.com/carbon.js?serve=CK7DTKQW&amp;placement=picturepan2githubio"></script>
-            </div>
           </div>
           <div class="docs-footer container grid-lg" id="copyright">
             <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> · <a href="https://www.patreon.com/spectrecss" target="_blank">Patreon Sponsor</a> · Version <span class="version"></span></p>
diff --git a/docs/components/bars.html b/docs/components/bars.html
index 2060161..6ed6a66 100644
--- a/docs/components/bars.html
+++ b/docs/components/bars.html
@@ -200,6 +200,17 @@
         <div class="docs-content" id="content">
           <div class="container" id="bars">
             <h3 class="s-title">Bars<a class="anchor" href="#bars" aria-hidden="true">#</a></h3>
+            <div class="docs-ad">
+              <div class="hide-md text-center">
+                <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>
+              <div class="show-md text-center">
+                <!-- GitHub-sm--><ins class="adsbygoogle" style="display:inline-block;width:300px;height:250px" data-ad-client="ca-pub-2225124559530218" data-ad-slot="9278881734"></ins>
+                <script>(adsbygoogle = window.adsbygoogle || []).push({});</script>
+              </div>
+            </div>
             <p>
               Bars represent the progress of a task or the value within the known range.
               Bars are custom components for displaying HTML5 &lt;progress&gt;, &lt;meter&gt; and input range elements.
@@ -284,9 +295,6 @@
   <span class="hljs-tag">&lt;/<span class="hljs-name">div</span>&gt;</span>
 <span class="hljs-tag">&lt;/<span class="hljs-name">div</span>&gt;</span>
 </code></pre>
-            <div class="docs-ad docs-ad-sidebar text-center">
-              <script id="_carbonads_js" async="" type="text/javascript" src="https://cdn.carbonads.com/carbon.js?serve=CK7DTKQW&amp;placement=picturepan2githubio"></script>
-            </div>
           </div>
           <div class="docs-footer container grid-lg" id="copyright">
             <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> · <a href="https://www.patreon.com/spectrecss" target="_blank">Patreon Sponsor</a> · Version <span class="version"></span></p>
diff --git a/docs/components/breadcrumbs.html b/docs/components/breadcrumbs.html
index b54a446..26630a1 100644
--- a/docs/components/breadcrumbs.html
+++ b/docs/components/breadcrumbs.html
@@ -200,6 +200,17 @@
         <div class="docs-content" id="content">
           <div class="container" id="breadcrumbs">
             <h3 class="s-title">Breadcrumbs<a class="anchor" href="#breadcrumbs" aria-hidden="true">#</a></h3>
+            <div class="docs-ad">
+              <div class="hide-md text-center">
+                <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>
+              <div class="show-md text-center">
+                <!-- GitHub-sm--><ins class="adsbygoogle" style="display:inline-block;width:300px;height:250px" data-ad-client="ca-pub-2225124559530218" data-ad-slot="9278881734"></ins>
+                <script>(adsbygoogle = window.adsbygoogle || []).push({});</script>
+              </div>
+            </div>
             <p>Breadcrumbs are used as navigational hierarchies to indicate current location.</p>
             <div class="docs-demo columns">
               <div class="column col-12">
@@ -238,9 +249,6 @@
   <span class="hljs-tag">&lt;/<span class="hljs-name">li</span>&gt;</span>
 <span class="hljs-tag">&lt;/<span class="hljs-name">ul</span>&gt;</span>
 </code></pre>
-            <div class="docs-ad docs-ad-sidebar text-center">
-              <script id="_carbonads_js" async="" type="text/javascript" src="https://cdn.carbonads.com/carbon.js?serve=CK7DTKQW&amp;placement=picturepan2githubio"></script>
-            </div>
           </div>
           <div class="docs-footer container grid-lg" id="copyright">
             <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> · <a href="https://www.patreon.com/spectrecss" target="_blank">Patreon Sponsor</a> · Version <span class="version"></span></p>
diff --git a/docs/components/cards.html b/docs/components/cards.html
index ff4527f..1e990cd 100644
--- a/docs/components/cards.html
+++ b/docs/components/cards.html
@@ -200,6 +200,17 @@
         <div class="docs-content" id="content">
           <div class="container" id="cards">
             <h3 class="s-title">Cards<a class="anchor" href="#cards" aria-hidden="true">#</a></h3>
+            <div class="docs-ad">
+              <div class="hide-md text-center">
+                <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>
+              <div class="show-md text-center">
+                <!-- GitHub-sm--><ins class="adsbygoogle" style="display:inline-block;width:300px;height:250px" data-ad-client="ca-pub-2225124559530218" data-ad-slot="9278881734"></ins>
+                <script>(adsbygoogle = window.adsbygoogle || []).push({});</script>
+              </div>
+            </div>
             <p>Cards are flexible content containers.</p>
             <div class="docs-demo columns">
               <div class="column col-6 col-xs-12">
@@ -290,9 +301,6 @@
   <span class="hljs-tag">&lt;/<span class="hljs-name">div</span>&gt;</span>
 <span class="hljs-tag">&lt;/<span class="hljs-name">div</span>&gt;</span>
 </code></pre>
-            <div class="docs-ad docs-ad-sidebar text-center">
-              <script id="_carbonads_js" async="" type="text/javascript" src="https://cdn.carbonads.com/carbon.js?serve=CK7DTKQW&amp;placement=picturepan2githubio"></script>
-            </div>
           </div>
           <div class="docs-footer container grid-lg" id="copyright">
             <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> · <a href="https://www.patreon.com/spectrecss" target="_blank">Patreon Sponsor</a> · Version <span class="version"></span></p>
diff --git a/docs/components/chips.html b/docs/components/chips.html
index 61088a1..507ac65 100644
--- a/docs/components/chips.html
+++ b/docs/components/chips.html
@@ -200,6 +200,17 @@
         <div class="docs-content" id="content">
           <div class="container" id="chips">
             <h3 class="s-title">Chips<a class="anchor" href="#chips" aria-hidden="true">#</a></h3>
+            <div class="docs-ad">
+              <div class="hide-md text-center">
+                <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>
+              <div class="show-md text-center">
+                <!-- GitHub-sm--><ins class="adsbygoogle" style="display:inline-block;width:300px;height:250px" data-ad-client="ca-pub-2225124559530218" data-ad-slot="9278881734"></ins>
+                <script>(adsbygoogle = window.adsbygoogle || []).push({});</script>
+              </div>
+            </div>
             <p>Chips are complex entities in small blocks.</p>
             <div class="docs-demo columns">
               <div class="column col-12"><span class="chip">Crime</span><span class="chip">Drama</span><span class="chip">Biography<a class="btn btn-clear" href="#" aria-label="Close" role="button"></a></span><span class="chip">Mystery<a class="btn btn-clear" href="#" aria-label="Close" role="button"></a></span></div>
@@ -227,9 +238,6 @@
   <span class="hljs-tag">&lt;<span class="hljs-name">a</span> <span class="hljs-attr">href</span>=<span class="hljs-string">"#"</span> <span class="hljs-attr">class</span>=<span class="hljs-string">"btn btn-clear"</span> <span class="hljs-attr">aria-label</span>=<span class="hljs-string">"Close"</span> <span class="hljs-attr">role</span>=<span class="hljs-string">"button"</span>&gt;</span><span class="hljs-tag">&lt;/<span class="hljs-name">a</span>&gt;</span>
 <span class="hljs-tag">&lt;/<span class="hljs-name">div</span>&gt;</span>
 </code></pre>
-            <div class="docs-ad docs-ad-sidebar text-center">
-              <script id="_carbonads_js" async="" type="text/javascript" src="https://cdn.carbonads.com/carbon.js?serve=CK7DTKQW&amp;placement=picturepan2githubio"></script>
-            </div>
           </div>
           <div class="docs-footer container grid-lg" id="copyright">
             <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> · <a href="https://www.patreon.com/spectrecss" target="_blank">Patreon Sponsor</a> · Version <span class="version"></span></p>
diff --git a/docs/components/empty.html b/docs/components/empty.html
index c10c7c9..766743c 100644
--- a/docs/components/empty.html
+++ b/docs/components/empty.html
@@ -200,6 +200,17 @@
         <div class="docs-content" id="content">
           <div class="container" id="empty">
             <h3 class="s-title">Empty states<a class="anchor" href="#empty" aria-hidden="true">#</a></h3>
+            <div class="docs-ad">
+              <div class="hide-md text-center">
+                <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>
+              <div class="show-md text-center">
+                <!-- GitHub-sm--><ins class="adsbygoogle" style="display:inline-block;width:300px;height:250px" data-ad-client="ca-pub-2225124559530218" data-ad-slot="9278881734"></ins>
+                <script>(adsbygoogle = window.adsbygoogle || []).push({});</script>
+              </div>
+            </div>
             <p>Empty states/blank slates are commonly used as placeholders for first time use, empty data and error screens.</p>
             <div class="docs-demo columns">
               <div class="column col-12">
@@ -253,9 +264,6 @@
   <span class="hljs-tag">&lt;/<span class="hljs-name">div</span>&gt;</span>
 <span class="hljs-tag">&lt;/<span class="hljs-name">div</span>&gt;</span>
 </code></pre>
-            <div class="docs-ad docs-ad-sidebar text-center">
-              <script id="_carbonads_js" async="" type="text/javascript" src="https://cdn.carbonads.com/carbon.js?serve=CK7DTKQW&amp;placement=picturepan2githubio"></script>
-            </div>
           </div>
           <div class="docs-footer container grid-lg" id="copyright">
             <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> · <a href="https://www.patreon.com/spectrecss" target="_blank">Patreon Sponsor</a> · Version <span class="version"></span></p>
diff --git a/docs/components/menu.html b/docs/components/menu.html
index 23ab5c2..85bc157 100644
--- a/docs/components/menu.html
+++ b/docs/components/menu.html
@@ -200,6 +200,17 @@
         <div class="docs-content" id="content">
           <div class="container" id="menu">
             <h3 class="s-title">Menu<a class="anchor" href="#menu" aria-hidden="true">#</a></h3>
+            <div class="docs-ad">
+              <div class="hide-md text-center">
+                <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>
+              <div class="show-md text-center">
+                <!-- GitHub-sm--><ins class="adsbygoogle" style="display:inline-block;width:300px;height:250px" data-ad-client="ca-pub-2225124559530218" data-ad-slot="9278881734"></ins>
+                <script>(adsbygoogle = window.adsbygoogle || []).push({});</script>
+              </div>
+            </div>
             <p>Menus are vertical list of links or buttons for actions and navigation.</p>
             <div class="docs-demo columns">
               <div class="column col-4 col-xs-12">
@@ -370,9 +381,6 @@
   <span class="hljs-tag">&lt;/<span class="hljs-name">div</span>&gt;</span>
 <span class="hljs-tag">&lt;/<span class="hljs-name">div</span>&gt;</span>
 </code></pre>
-            <div class="docs-ad docs-ad-sidebar text-center">
-              <script id="_carbonads_js" async="" type="text/javascript" src="https://cdn.carbonads.com/carbon.js?serve=CK7DTKQW&amp;placement=picturepan2githubio"></script>
-            </div>
           </div>
           <div class="docs-footer container grid-lg" id="copyright">
             <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> · <a href="https://www.patreon.com/spectrecss" target="_blank">Patreon Sponsor</a> · Version <span class="version"></span></p>
diff --git a/docs/components/modals.html b/docs/components/modals.html
index 4f913de..85853c2 100644
--- a/docs/components/modals.html
+++ b/docs/components/modals.html
@@ -200,6 +200,17 @@
         <div class="docs-content" id="content">
           <div class="container" id="modals">
             <h3 class="s-title">Modals<a class="anchor" href="#modals" aria-hidden="true">#</a></h3>
+            <div class="docs-ad">
+              <div class="hide-md text-center">
+                <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>
+              <div class="show-md text-center">
+                <!-- GitHub-sm--><ins class="adsbygoogle" style="display:inline-block;width:300px;height:250px" data-ad-client="ca-pub-2225124559530218" data-ad-slot="9278881734"></ins>
+                <script>(adsbygoogle = window.adsbygoogle || []).push({});</script>
+              </div>
+            </div>
             <p>Modals are flexible dialog prompts.</p>
             <div class="docs-demo columns">
               <div class="column"><a class="btn btn-primary" href="#example-modal-1">Open Modal</a>
@@ -330,9 +341,6 @@
   <span class="hljs-tag">&lt;/<span class="hljs-name">div</span>&gt;</span>
 <span class="hljs-tag">&lt;/<span class="hljs-name">div</span>&gt;</span>
 </code></pre>
-            <div class="docs-ad docs-ad-sidebar text-center">
-              <script id="_carbonads_js" async="" type="text/javascript" src="https://cdn.carbonads.com/carbon.js?serve=CK7DTKQW&amp;placement=picturepan2githubio"></script>
-            </div>
           </div>
           <div class="docs-footer container grid-lg" id="copyright">
             <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> · <a href="https://www.patreon.com/spectrecss" target="_blank">Patreon Sponsor</a> · Version <span class="version"></span></p>
diff --git a/docs/components/nav.html b/docs/components/nav.html
index ec0f5bb..7612289 100644
--- a/docs/components/nav.html
+++ b/docs/components/nav.html
@@ -200,6 +200,17 @@
         <div class="docs-content" id="content">
           <div class="container" id="nav">
             <h3 class="s-title">Nav<a class="anchor" href="#nav" aria-hidden="true">#</a></h3>
+            <div class="docs-ad">
+              <div class="hide-md text-center">
+                <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>
+              <div class="show-md text-center">
+                <!-- GitHub-sm--><ins class="adsbygoogle" style="display:inline-block;width:300px;height:250px" data-ad-client="ca-pub-2225124559530218" data-ad-slot="9278881734"></ins>
+                <script>(adsbygoogle = window.adsbygoogle || []).push({});</script>
+              </div>
+            </div>
             <div class="docs-demo columns">
               <div class="column col-6 col-xs-12">
                 <ul class="nav">
@@ -250,9 +261,6 @@
   <span class="hljs-tag">&lt;/<span class="hljs-name">li</span>&gt;</span>
 <span class="hljs-tag">&lt;/<span class="hljs-name">ul</span>&gt;</span>
 </code></pre>
-            <div class="docs-ad docs-ad-sidebar text-center">
-              <script id="_carbonads_js" async="" type="text/javascript" src="https://cdn.carbonads.com/carbon.js?serve=CK7DTKQW&amp;placement=picturepan2githubio"></script>
-            </div>
           </div>
           <div class="docs-footer container grid-lg" id="copyright">
             <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> · <a href="https://www.patreon.com/spectrecss" target="_blank">Patreon Sponsor</a> · Version <span class="version"></span></p>
diff --git a/docs/components/pagination.html b/docs/components/pagination.html
index 22017d5..5577162 100644
--- a/docs/components/pagination.html
+++ b/docs/components/pagination.html
@@ -200,6 +200,17 @@
         <div class="docs-content" id="content">
           <div class="container" id="pagination">
             <h3 class="s-title">Pagination<a class="anchor" href="#pagination" aria-hidden="true">#</a></h3>
+            <div class="docs-ad">
+              <div class="hide-md text-center">
+                <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>
+              <div class="show-md text-center">
+                <!-- GitHub-sm--><ins class="adsbygoogle" style="display:inline-block;width:300px;height:250px" data-ad-client="ca-pub-2225124559530218" data-ad-slot="9278881734"></ins>
+                <script>(adsbygoogle = window.adsbygoogle || []).push({});</script>
+              </div>
+            </div>
             <div class="docs-demo columns">
               <div class="column col-xs-12">
                 <ul class="pagination">
@@ -283,9 +294,6 @@
   <span class="hljs-tag">&lt;/<span class="hljs-name">li</span>&gt;</span>
 <span class="hljs-tag">&lt;/<span class="hljs-name">ul</span>&gt;</span>
 </code></pre>
-            <div class="docs-ad docs-ad-sidebar text-center">
-              <script id="_carbonads_js" async="" type="text/javascript" src="https://cdn.carbonads.com/carbon.js?serve=CK7DTKQW&amp;placement=picturepan2githubio"></script>
-            </div>
           </div>
           <div class="docs-footer container grid-lg" id="copyright">
             <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> · <a href="https://www.patreon.com/spectrecss" target="_blank">Patreon Sponsor</a> · Version <span class="version"></span></p>
diff --git a/docs/components/panels.html b/docs/components/panels.html
index 3c848b4..e510a91 100644
--- a/docs/components/panels.html
+++ b/docs/components/panels.html
@@ -200,6 +200,17 @@
         <div class="docs-content" id="content">
           <div class="container" id="panels">
             <h3 class="s-title">Panels<a class="anchor" href="#panels" aria-hidden="true">#</a></h3>
+            <div class="docs-ad">
+              <div class="hide-md text-center">
+                <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>
+              <div class="show-md text-center">
+                <!-- GitHub-sm--><ins class="adsbygoogle" style="display:inline-block;width:300px;height:250px" data-ad-client="ca-pub-2225124559530218" data-ad-slot="9278881734"></ins>
+                <script>(adsbygoogle = window.adsbygoogle || []).push({});</script>
+              </div>
+            </div>
             <p>Panels are flexible view container with auto-expand content section.</p>
             <div class="docs-demo columns">
               <div class="column col-6 col-xs-12">
@@ -330,9 +341,6 @@
   <span class="hljs-tag">&lt;/<span class="hljs-name">div</span>&gt;</span>
 <span class="hljs-tag">&lt;/<span class="hljs-name">div</span>&gt;</span>
 </code></pre>
-            <div class="docs-ad docs-ad-sidebar text-center">
-              <script id="_carbonads_js" async="" type="text/javascript" src="https://cdn.carbonads.com/carbon.js?serve=CK7DTKQW&amp;placement=picturepan2githubio"></script>
-            </div>
           </div>
           <div class="docs-footer container grid-lg" id="copyright">
             <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> · <a href="https://www.patreon.com/spectrecss" target="_blank">Patreon Sponsor</a> · Version <span class="version"></span></p>
diff --git a/docs/components/popovers.html b/docs/components/popovers.html
index ba6c234..1765ce8 100644
--- a/docs/components/popovers.html
+++ b/docs/components/popovers.html
@@ -200,6 +200,17 @@
         <div class="docs-content" id="content">
           <div class="container" id="popovers">
             <h3 class="s-title">Popovers<a class="anchor" href="#popovers" aria-hidden="true">#</a></h3>
+            <div class="docs-ad">
+              <div class="hide-md text-center">
+                <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>
+              <div class="show-md text-center">
+                <!-- GitHub-sm--><ins class="adsbygoogle" style="display:inline-block;width:300px;height:250px" data-ad-client="ca-pub-2225124559530218" data-ad-slot="9278881734"></ins>
+                <script>(adsbygoogle = window.adsbygoogle || []).push({});</script>
+              </div>
+            </div>
             <p>Popovers are small overlay content containers. Popovers component is built entirely in CSS.</p>
             <div class="docs-demo columns">
               <div class="column col-3 col-sm-6">
@@ -291,9 +302,6 @@
   <span class="hljs-tag">&lt;/<span class="hljs-name">div</span>&gt;</span>
 <span class="hljs-tag">&lt;/<span class="hljs-name">div</span>&gt;</span>
 </code></pre>
-            <div class="docs-ad docs-ad-sidebar text-center">
-              <script id="_carbonads_js" async="" type="text/javascript" src="https://cdn.carbonads.com/carbon.js?serve=CK7DTKQW&amp;placement=picturepan2githubio"></script>
-            </div>
           </div>
           <div class="docs-footer container grid-lg" id="copyright">
             <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> · <a href="https://www.patreon.com/spectrecss" target="_blank">Patreon Sponsor</a> · Version <span class="version"></span></p>
diff --git a/docs/components/steps.html b/docs/components/steps.html
index 089a880..869cd6d 100644
--- a/docs/components/steps.html
+++ b/docs/components/steps.html
@@ -200,6 +200,17 @@
         <div class="docs-content" id="content">
           <div class="container" id="steps">
             <h3 class="s-title">Steps<a class="anchor" href="#steps" aria-hidden="true">#</a></h3>
+            <div class="docs-ad">
+              <div class="hide-md text-center">
+                <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>
+              <div class="show-md text-center">
+                <!-- GitHub-sm--><ins class="adsbygoogle" style="display:inline-block;width:300px;height:250px" data-ad-client="ca-pub-2225124559530218" data-ad-slot="9278881734"></ins>
+                <script>(adsbygoogle = window.adsbygoogle || []).push({});</script>
+              </div>
+            </div>
             <p>Steps are progress indicators of a sequence of task steps.</p>
             <div class="docs-demo columns">
               <div class="column col-12">
@@ -238,9 +249,6 @@
   <span class="hljs-tag">&lt;/<span class="hljs-name">li</span>&gt;</span>
 <span class="hljs-tag">&lt;/<span class="hljs-name">ul</span>&gt;</span>
 </code></pre>
-            <div class="docs-ad docs-ad-sidebar text-center">
-              <script id="_carbonads_js" async="" type="text/javascript" src="https://cdn.carbonads.com/carbon.js?serve=CK7DTKQW&amp;placement=picturepan2githubio"></script>
-            </div>
           </div>
           <div class="docs-footer container grid-lg" id="copyright">
             <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> · <a href="https://www.patreon.com/spectrecss" target="_blank">Patreon Sponsor</a> · Version <span class="version"></span></p>
diff --git a/docs/components/tabs.html b/docs/components/tabs.html
index 0fdec09..e1b210f 100644
--- a/docs/components/tabs.html
+++ b/docs/components/tabs.html
@@ -200,6 +200,17 @@
         <div class="docs-content" id="content">
           <div class="container" id="tabs">
             <h3 class="s-title">Tabs<a class="anchor" href="#tabs" aria-hidden="true">#</a></h3>
+            <div class="docs-ad">
+              <div class="hide-md text-center">
+                <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>
+              <div class="show-md text-center">
+                <!-- GitHub-sm--><ins class="adsbygoogle" style="display:inline-block;width:300px;height:250px" data-ad-client="ca-pub-2225124559530218" data-ad-slot="9278881734"></ins>
+                <script>(adsbygoogle = window.adsbygoogle || []).push({});</script>
+              </div>
+            </div>
             <p>Tabs enable quick switch between different views.</p>
             <div class="docs-demo columns">
               <div class="column col-6 col-sm-12">
@@ -297,9 +308,6 @@
   <span class="hljs-tag">&lt;/<span class="hljs-name">li</span>&gt;</span>
 <span class="hljs-tag">&lt;/<span class="hljs-name">ul</span>&gt;</span>
 </code></pre>
-            <div class="docs-ad docs-ad-sidebar text-center">
-              <script id="_carbonads_js" async="" type="text/javascript" src="https://cdn.carbonads.com/carbon.js?serve=CK7DTKQW&amp;placement=picturepan2githubio"></script>
-            </div>
           </div>
           <div class="docs-footer container grid-lg" id="copyright">
             <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> · <a href="https://www.patreon.com/spectrecss" target="_blank">Patreon Sponsor</a> · Version <span class="version"></span></p>
diff --git a/docs/components/tiles.html b/docs/components/tiles.html
index 3cf6939..417c484 100644
--- a/docs/components/tiles.html
+++ b/docs/components/tiles.html
@@ -200,6 +200,17 @@
         <div class="docs-content" id="content">
           <div class="container" id="tiles">
             <h3 class="s-title">Tiles<a class="anchor" href="#tiles" aria-hidden="true">#</a></h3>
+            <div class="docs-ad">
+              <div class="hide-md text-center">
+                <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>
+              <div class="show-md text-center">
+                <!-- GitHub-sm--><ins class="adsbygoogle" style="display:inline-block;width:300px;height:250px" data-ad-client="ca-pub-2225124559530218" data-ad-slot="9278881734"></ins>
+                <script>(adsbygoogle = window.adsbygoogle || []).push({});</script>
+              </div>
+            </div>
             <p>Tiles are repeatable or embeddable information blocks.</p>
             <div class="docs-demo columns">
               <div class="column col-9 col-sm-12">
@@ -290,9 +301,6 @@
   <span class="hljs-tag">&lt;/<span class="hljs-name">div</span>&gt;</span>
 <span class="hljs-tag">&lt;/<span class="hljs-name">div</span>&gt;</span>
 </code></pre>
-            <div class="docs-ad docs-ad-sidebar text-center">
-              <script id="_carbonads_js" async="" type="text/javascript" src="https://cdn.carbonads.com/carbon.js?serve=CK7DTKQW&amp;placement=picturepan2githubio"></script>
-            </div>
           </div>
           <div class="docs-footer container grid-lg" id="copyright">
             <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> · <a href="https://www.patreon.com/spectrecss" target="_blank">Patreon Sponsor</a> · Version <span class="version"></span></p>
diff --git a/docs/components/toasts.html b/docs/components/toasts.html
index c53f728..b21de28 100644
--- a/docs/components/toasts.html
+++ b/docs/components/toasts.html
@@ -200,6 +200,17 @@
         <div class="docs-content" id="content">
           <div class="container" id="toasts">
             <h3 class="s-title">Toasts<a class="anchor" href="#toasts" aria-hidden="true">#</a></h3>
+            <div class="docs-ad">
+              <div class="hide-md text-center">
+                <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>
+              <div class="show-md text-center">
+                <!-- GitHub-sm--><ins class="adsbygoogle" style="display:inline-block;width:300px;height:250px" data-ad-client="ca-pub-2225124559530218" data-ad-slot="9278881734"></ins>
+                <script>(adsbygoogle = window.adsbygoogle || []).push({});</script>
+              </div>
+            </div>
             <p>Toasts are used to show alert or information to users.</p>
             <div class="docs-demo columns">
               <div class="column col-9 col-sm-12">
@@ -250,9 +261,6 @@
   Lorem ipsum dolor sit amet, consectetur adipiscing elit.
 <span class="hljs-tag">&lt;/<span class="hljs-name">div</span>&gt;</span>
 </code></pre>
-            <div class="docs-ad docs-ad-sidebar text-center">
-              <script id="_carbonads_js" async="" type="text/javascript" src="https://cdn.carbonads.com/carbon.js?serve=CK7DTKQW&amp;placement=picturepan2githubio"></script>
-            </div>
           </div>
           <div class="docs-footer container grid-lg" id="copyright">
             <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> · <a href="https://www.patreon.com/spectrecss" target="_blank">Patreon Sponsor</a> · Version <span class="version"></span></p>
diff --git a/docs/components/tooltips.html b/docs/components/tooltips.html
index f5be9b6..2fc9264 100644
--- a/docs/components/tooltips.html
+++ b/docs/components/tooltips.html
@@ -200,6 +200,17 @@
         <div class="docs-content" id="content">
           <div class="container" id="tooltips">
             <h3 class="s-title">Tooltips<a class="anchor" href="#tooltips" aria-hidden="true">#</a></h3>
+            <div class="docs-ad">
+              <div class="hide-md text-center">
+                <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>
+              <div class="show-md text-center">
+                <!-- GitHub-sm--><ins class="adsbygoogle" style="display:inline-block;width:300px;height:250px" data-ad-client="ca-pub-2225124559530218" data-ad-slot="9278881734"></ins>
+                <script>(adsbygoogle = window.adsbygoogle || []).push({});</script>
+              </div>
+            </div>
             <p>Tooltips provide context information labels that appear on hover and focus. Tooltips component is built entirely in CSS.</p>
             <div class="docs-demo columns text-center">
               <div class="column col-xs-12">
@@ -234,9 +245,6 @@ Multiline">left tooltip</button>
             <p>Add the <code>\n</code> string between any text for multiline tooltips.</p>
             <pre class="code" data-lang="HTML"><code><span class="hljs-tag">&lt;<span class="hljs-name">button</span> <span class="hljs-attr">class</span>=<span class="hljs-string">"btn tooltip"</span> <span class="hljs-attr">data-tooltip</span>=<span class="hljs-string">"First Line Tooltip Text \n Second Line Tooltip Text"</span>&gt;</span>multiline tooltip<span class="hljs-tag">&lt;/<span class="hljs-name">button</span>&gt;</span>
 </code></pre>
-            <div class="docs-ad docs-ad-sidebar text-center">
-              <script id="_carbonads_js" async="" type="text/javascript" src="https://cdn.carbonads.com/carbon.js?serve=CK7DTKQW&amp;placement=picturepan2githubio"></script>
-            </div>
           </div>
           <div class="docs-footer container grid-lg" id="copyright">
             <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> · <a href="https://www.patreon.com/spectrecss" target="_blank">Patreon Sponsor</a> · Version <span class="version"></span></p>
diff --git a/docs/elements.html b/docs/elements.html
index a283597..a6bc034 100644
--- a/docs/elements.html
+++ b/docs/elements.html
@@ -200,6 +200,17 @@
         <div class="docs-content" id="content">
           <div class="container" id="elements">
             <h3 class="s-title">Elements<a class="anchor" href="#elements" aria-hidden="true">#</a></h3>
+            <div class="docs-ad">
+              <div class="hide-md text-center">
+                <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>
+              <div class="show-md text-center">
+                <!-- GitHub-sm--><ins class="adsbygoogle" style="display:inline-block;width:300px;height:250px" data-ad-client="ca-pub-2225124559530218" data-ad-slot="9278881734"></ins>
+                <script>(adsbygoogle = window.adsbygoogle || []).push({});</script>
+              </div>
+            </div>
             <p> <strong>Spectre.css </strong>is a lightweight, responsive and modern CSS framework for faster and extensible development.</p>
             <p>
                Spectre provides basic styles for typography and elements, flexbox based responsive layout system, pure CSS components and utilities with best practice coding and consistent design language.</p>
@@ -277,9 +288,6 @@
                 </div>
               </div>
             </div>
-            <div class="docs-ad docs-ad-sidebar text-center">
-              <script id="_carbonads_js" async="" type="text/javascript" src="https://cdn.carbonads.com/carbon.js?serve=CK7DTKQW&amp;placement=picturepan2githubio"></script>
-            </div>
           </div>
           <div class="docs-footer container grid-lg" id="copyright">
             <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> · <a href="https://www.patreon.com/spectrecss" target="_blank">Patreon Sponsor</a> · Version <span class="version"></span></p>
diff --git a/docs/elements/buttons.html b/docs/elements/buttons.html
index 2ce43f0..242babf 100644
--- a/docs/elements/buttons.html
+++ b/docs/elements/buttons.html
@@ -200,6 +200,17 @@
         <div class="docs-content" id="content">
           <div class="container" id="buttons">
             <h3 class="s-title">Buttons<a class="anchor" href="#buttons" aria-hidden="true">#</a></h3>
+            <div class="docs-ad">
+              <div class="hide-md text-center">
+                <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>
+              <div class="show-md text-center">
+                <!-- GitHub-sm--><ins class="adsbygoogle" style="display:inline-block;width:300px;height:250px" data-ad-client="ca-pub-2225124559530218" data-ad-slot="9278881734"></ins>
+                <script>(adsbygoogle = window.adsbygoogle || []).push({});</script>
+              </div>
+            </div>
             <p>Buttons include simple button styles for actions in different types and sizes.</p>
             <div class="docs-demo columns">
               <div class="column col-12">
@@ -344,9 +355,6 @@
   <span class="hljs-tag">&lt;<span class="hljs-name">button</span> <span class="hljs-attr">class</span>=<span class="hljs-string">"btn"</span>&gt;</span>third button<span class="hljs-tag">&lt;/<span class="hljs-name">button</span>&gt;</span>
 <span class="hljs-tag">&lt;/<span class="hljs-name">div</span>&gt;</span> 
 </code></pre>
-            <div class="docs-ad docs-ad-sidebar text-center">
-              <script id="_carbonads_js" async="" type="text/javascript" src="https://cdn.carbonads.com/carbon.js?serve=CK7DTKQW&amp;placement=picturepan2githubio"></script>
-            </div>
           </div>
           <div class="docs-footer container grid-lg" id="copyright">
             <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> · <a href="https://www.patreon.com/spectrecss" target="_blank">Patreon Sponsor</a> · Version <span class="version"></span></p>
diff --git a/docs/elements/code.html b/docs/elements/code.html
index 7a5714c..f22096e 100644
--- a/docs/elements/code.html
+++ b/docs/elements/code.html
@@ -200,6 +200,17 @@
         <div class="docs-content" id="content">
           <div class="container" id="code">
             <h3 class="s-title">Code<a class="anchor" href="#code" aria-hidden="true">#</a></h3>
+            <div class="docs-ad">
+              <div class="hide-md text-center">
+                <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>
+              <div class="show-md text-center">
+                <!-- GitHub-sm--><ins class="adsbygoogle" style="display:inline-block;width:300px;height:250px" data-ad-client="ca-pub-2225124559530218" data-ad-slot="9278881734"></ins>
+                <script>(adsbygoogle = window.adsbygoogle || []).push({});</script>
+              </div>
+            </div>
             <p>Code is used for styling inline and multiline code snippets.</p>
             <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>
@@ -221,9 +232,6 @@
 &amp;lt;<span class="hljs-tag">&lt;<span class="hljs-name">span</span> <span class="hljs-attr">class</span>=<span class="hljs-string">"tag"</span>&gt;</span>/button<span class="hljs-tag">&lt;/<span class="hljs-name">span</span>&gt;</span>&amp;gt;
 <span class="hljs-tag">&lt;/<span class="hljs-name">code</span>&gt;</span><span class="hljs-tag">&lt;/<span class="hljs-name">pre</span>&gt;</span>
 </code></pre>
-            <div class="docs-ad docs-ad-sidebar text-center">
-              <script id="_carbonads_js" async="" type="text/javascript" src="https://cdn.carbonads.com/carbon.js?serve=CK7DTKQW&amp;placement=picturepan2githubio"></script>
-            </div>
           </div>
           <div class="docs-footer container grid-lg" id="copyright">
             <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> · <a href="https://www.patreon.com/spectrecss" target="_blank">Patreon Sponsor</a> · Version <span class="version"></span></p>
diff --git a/docs/elements/forms.html b/docs/elements/forms.html
index 950ab75..ce21c0d 100644
--- a/docs/elements/forms.html
+++ b/docs/elements/forms.html
@@ -200,6 +200,17 @@
         <div class="docs-content" id="content">
           <div class="container" id="forms">
             <h3 class="s-title">Forms<a class="anchor" href="#forms" aria-hidden="true">#</a></h3>
+            <div class="docs-ad">
+              <div class="hide-md text-center">
+                <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>
+              <div class="show-md text-center">
+                <!-- GitHub-sm--><ins class="adsbygoogle" style="display:inline-block;width:300px;height:250px" data-ad-client="ca-pub-2225124559530218" data-ad-slot="9278881734"></ins>
+                <script>(adsbygoogle = window.adsbygoogle || []).push({});</script>
+              </div>
+            </div>
             <p>Forms provide the most common control styles used in forms, including input, textarea, select, checkbox, radio and switch.</p>
             <h4 class="s-subtitle" id="forms-input">Form input<a class="anchor" href="#forms-input" aria-hidden="true">#</a></h4>
             <div class="docs-demo columns">
@@ -945,9 +956,6 @@
     <span class="hljs-tag">&lt;/<span class="hljs-name">div</span>&gt;</span>
   <span class="hljs-tag">&lt;/<span class="hljs-name">fieldset</span>&gt;</span>
 </code></pre>
-            <div class="docs-ad docs-ad-sidebar text-center">
-              <script id="_carbonads_js" async="" type="text/javascript" src="https://cdn.carbonads.com/carbon.js?serve=CK7DTKQW&amp;placement=picturepan2githubio"></script>
-            </div>
           </div>
           <div class="docs-footer container grid-lg" id="copyright">
             <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> · <a href="https://www.patreon.com/spectrecss" target="_blank">Patreon Sponsor</a> · Version <span class="version"></span></p>
diff --git a/docs/elements/icons.html b/docs/elements/icons.html
index b2e2667..0d92fd6 100644
--- a/docs/elements/icons.html
+++ b/docs/elements/icons.html
@@ -201,6 +201,17 @@
           <div class="container" id="icons">
             <h3 class="s-title">Icons.css<a class="anchor" href="#icons" aria-hidden="true">#</a></h3>
             <p><small class="label label-secondary">CSS ONLY</small></p>
+            <div class="docs-ad">
+              <div class="hide-md text-center">
+                <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>
+              <div class="show-md text-center">
+                <!-- GitHub-sm--><ins class="adsbygoogle" style="display:inline-block;width:300px;height:250px" data-ad-client="ca-pub-2225124559530218" data-ad-slot="9278881734"></ins>
+                <script>(adsbygoogle = window.adsbygoogle || []).push({});</script>
+              </div>
+            </div>
             <div class="docs-demo columns">
               <div class="column">
                 <div class="toast toast-primary">Spectre.css Icons will be moved to a new <a href="https://github.com/picturepan2/icons.css" target="_blank">GitHub Repo</a> while Spectre will only include basic icons.</div>
@@ -397,9 +408,6 @@
             </div>
             <pre class="code" data-lang="HTML"><code><span class="hljs-tag">&lt;<span class="hljs-name">i</span> <span class="hljs-attr">class</span>=<span class="hljs-string">"icon icon-2x icon-mail"</span>&gt;</span><span class="hljs-tag">&lt;/<span class="hljs-name">i</span>&gt;</span>
 </code></pre>
-            <div class="docs-ad docs-ad-sidebar text-center">
-              <script id="_carbonads_js" async="" type="text/javascript" src="https://cdn.carbonads.com/carbon.js?serve=CK7DTKQW&amp;placement=picturepan2githubio"></script>
-            </div>
           </div>
           <div class="docs-footer container grid-lg" id="copyright">
             <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> · <a href="https://www.patreon.com/spectrecss" target="_blank">Patreon Sponsor</a> · Version <span class="version"></span></p>
diff --git a/docs/elements/labels.html b/docs/elements/labels.html
index 6fc3956..ca2dc58 100644
--- a/docs/elements/labels.html
+++ b/docs/elements/labels.html
@@ -200,6 +200,17 @@
         <div class="docs-content" id="content">
           <div class="container" id="labels">
             <h3 class="s-title">Labels<a class="anchor" href="#labels" aria-hidden="true">#</a></h3>
+            <div class="docs-ad">
+              <div class="hide-md text-center">
+                <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>
+              <div class="show-md text-center">
+                <!-- GitHub-sm--><ins class="adsbygoogle" style="display:inline-block;width:300px;height:250px" data-ad-client="ca-pub-2225124559530218" data-ad-slot="9278881734"></ins>
+                <script>(adsbygoogle = window.adsbygoogle || []).push({});</script>
+              </div>
+            </div>
             <p>Labels are formatted text tags for highlighted, informative information.</p>
             <div class="docs-demo columns">
               <div class="column"><span class="label mr-1">default label</span><span class="label label-primary mr-1">primary label</span><span class="label label-secondary mr-1">secondary label</span><span class="label label-success mr-1">success label</span><span class="label label-warning mr-1">warning label</span><span class="label label-error">error label</span></div>
@@ -219,9 +230,6 @@
             <pre class="code" data-lang="HTML"><code><span class="hljs-comment">&lt;!-- rounded labels --&gt;</span>
 <span class="hljs-tag">&lt;<span class="hljs-name">span</span> <span class="hljs-attr">class</span>=<span class="hljs-string">"label label-rounded label-primary"</span>&gt;</span>primary label<span class="hljs-tag">&lt;/<span class="hljs-name">span</span>&gt;</span>
 </code></pre>
-            <div class="docs-ad docs-ad-sidebar text-center">
-              <script id="_carbonads_js" async="" type="text/javascript" src="https://cdn.carbonads.com/carbon.js?serve=CK7DTKQW&amp;placement=picturepan2githubio"></script>
-            </div>
           </div>
           <div class="docs-footer container grid-lg" id="copyright">
             <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> · <a href="https://www.patreon.com/spectrecss" target="_blank">Patreon Sponsor</a> · Version <span class="version"></span></p>
diff --git a/docs/elements/media.html b/docs/elements/media.html
index 98171e7..337aa38 100644
--- a/docs/elements/media.html
+++ b/docs/elements/media.html
@@ -200,6 +200,17 @@
         <div class="docs-content" id="content">
           <div class="container" id="media">
             <h3 class="s-title">Media<a class="anchor" href="#media" aria-hidden="true">#</a></h3>
+            <div class="docs-ad">
+              <div class="hide-md text-center">
+                <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>
+              <div class="show-md text-center">
+                <!-- GitHub-sm--><ins class="adsbygoogle" style="display:inline-block;width:300px;height:250px" data-ad-client="ca-pub-2225124559530218" data-ad-slot="9278881734"></ins>
+                <script>(adsbygoogle = window.adsbygoogle || []).push({});</script>
+              </div>
+            </div>
             <p>Media includes responsive images, figures and video classes.</p>
             <h4 class="s-subtitle" id="media-images">Images<a class="anchor" href="#media-images" aria-hidden="true">#</a></h4>
             <p>Add the <code>img-responsive</code> class to &lt;img&gt; elements. The images will scale with the parent sizes.</p>
@@ -265,9 +276,6 @@
 
 <span class="hljs-tag">&lt;<span class="hljs-name">video</span> <span class="hljs-attr">class</span>=<span class="hljs-string">"video-responsive"</span> <span class="hljs-attr">src</span>=<span class="hljs-string">"..."</span>&gt;</span>...<span class="hljs-tag">&lt;/<span class="hljs-name">video</span>&gt;</span>
 </code></pre>
-            <div class="docs-ad docs-ad-sidebar text-center">
-              <script id="_carbonads_js" async="" type="text/javascript" src="https://cdn.carbonads.com/carbon.js?serve=CK7DTKQW&amp;placement=picturepan2githubio"></script>
-            </div>
           </div>
           <div class="docs-footer container grid-lg" id="copyright">
             <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> · <a href="https://www.patreon.com/spectrecss" target="_blank">Patreon Sponsor</a> · Version <span class="version"></span></p>
diff --git a/docs/elements/tables.html b/docs/elements/tables.html
index 17855d0..806939d 100644
--- a/docs/elements/tables.html
+++ b/docs/elements/tables.html
@@ -200,6 +200,17 @@
         <div class="docs-content" id="content">
           <div class="container" id="tables">
             <h3 class="s-title">Tables<a class="anchor" href="#tables" aria-hidden="true">#</a></h3>
+            <div class="docs-ad">
+              <div class="hide-md text-center">
+                <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>
+              <div class="show-md text-center">
+                <!-- GitHub-sm--><ins class="adsbygoogle" style="display:inline-block;width:300px;height:250px" data-ad-client="ca-pub-2225124559530218" data-ad-slot="9278881734"></ins>
+                <script>(adsbygoogle = window.adsbygoogle || []).push({});</script>
+              </div>
+            </div>
             <p>Tables include default styles for tables and data sets.</p>
             <div class="docs-demo columns">
               <div class="column col-12">
@@ -369,9 +380,6 @@
   ...
 <span class="hljs-tag">&lt;/<span class="hljs-name">table</span>&gt;</span>
 </code></pre>
-            <div class="docs-ad docs-ad-sidebar text-center">
-              <script id="_carbonads_js" async="" type="text/javascript" src="https://cdn.carbonads.com/carbon.js?serve=CK7DTKQW&amp;placement=picturepan2githubio"></script>
-            </div>
           </div>
           <div class="docs-footer container grid-lg" id="copyright">
             <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> · <a href="https://www.patreon.com/spectrecss" target="_blank">Patreon Sponsor</a> · Version <span class="version"></span></p>
diff --git a/docs/elements/typography.html b/docs/elements/typography.html
index 6f055f9..c096735 100644
--- a/docs/elements/typography.html
+++ b/docs/elements/typography.html
@@ -200,6 +200,17 @@
         <div class="docs-content" id="content">
           <div class="container" id="typography">
             <h3 class="s-title">Typography<a class="anchor" href="#typography" aria-hidden="true">#</a></h3>
+            <div class="docs-ad">
+              <div class="hide-md text-center">
+                <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>
+              <div class="show-md text-center">
+                <!-- GitHub-sm--><ins class="adsbygoogle" style="display:inline-block;width:300px;height:250px" data-ad-client="ca-pub-2225124559530218" data-ad-slot="9278881734"></ins>
+                <script>(adsbygoogle = window.adsbygoogle || []).push({});</script>
+              </div>
+            </div>
             <p>Typography sets default styles for headings, paragraphs, semantic text, blockquote and lists elements.</p>
             <h4 class="s-subtitle" id="typography-headings">Headings<a class="anchor" href="#typography-headings" aria-hidden="true">#</a></h4>
             <div class="docs-demo columns">
@@ -395,9 +406,6 @@
   <span class="hljs-tag">&lt;<span class="hljs-name">dd</span>&gt;</span>description list description<span class="hljs-tag">&lt;/<span class="hljs-name">dd</span>&gt;</span>
 <span class="hljs-tag">&lt;/<span class="hljs-name">dl</span>&gt;</span>
 </code></pre>
-            <div class="docs-ad docs-ad-sidebar text-center">
-              <script id="_carbonads_js" async="" type="text/javascript" src="https://cdn.carbonads.com/carbon.js?serve=CK7DTKQW&amp;placement=picturepan2githubio"></script>
-            </div>
           </div>
           <div class="docs-footer container grid-lg" id="copyright">
             <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> · <a href="https://www.patreon.com/spectrecss" target="_blank">Patreon Sponsor</a> · Version <span class="version"></span></p>
diff --git a/docs/examples/starter.html b/docs/examples/starter.html
index 2b7c4ee..2fe3017 100644
--- a/docs/examples/starter.html
+++ b/docs/examples/starter.html
@@ -18,11 +18,7 @@
     <div class="section bg-gray">
       <H1>Starter Page Example</H1>
     </div>
-    <div class="section section-ads bg-gray">
-      <div class="docs-ad docs-ad-sidebar text-center">
-        <script id="_carbonads_js" async="" type="text/javascript" src="https://cdn.carbonads.com/carbon.js?serve=CK7DTKQW&amp;placement=picturepan2githubio"></script>
-      </div>
-    </div>
+    <div class="section section-ads bg-gray"></div>
     <footer class="section section-footer">
       <div class="docs-footer container grid-lg" id="copyright">
         <p><a href="getting-started.html" target="_blank">Documents</a> · <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>
diff --git a/docs/experimentals.html b/docs/experimentals.html
index fad4833..6820b57 100644
--- a/docs/experimentals.html
+++ b/docs/experimentals.html
@@ -200,6 +200,17 @@
         <div class="docs-content" id="content">
           <div class="container" id="experimentals">
             <h3 class="s-title">Experimentals<a class="anchor" href="#experimentals" aria-hidden="true">#</a></h3>
+            <div class="docs-ad">
+              <div class="hide-md text-center">
+                <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>
+              <div class="show-md text-center">
+                <!-- GitHub-sm--><ins class="adsbygoogle" style="display:inline-block;width:300px;height:250px" data-ad-client="ca-pub-2225124559530218" data-ad-slot="9278881734"></ins>
+                <script>(adsbygoogle = window.adsbygoogle || []).push({});</script>
+              </div>
+            </div>
             <p>
               The Experimentals include experimental elements and features, mostly are not yet ready for wide use.
               These elements and components are limited inside <code>spectre-exp.scss</code> before browsers fully support them.
@@ -315,9 +326,6 @@
                 </div>
               </div>
             </div>
-            <div class="docs-ad docs-ad-sidebar text-center">
-              <script id="_carbonads_js" async="" type="text/javascript" src="https://cdn.carbonads.com/carbon.js?serve=CK7DTKQW&amp;placement=picturepan2githubio"></script>
-            </div>
           </div>
           <div class="docs-footer container grid-lg" id="copyright">
             <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> · <a href="https://www.patreon.com/spectrecss" target="_blank">Patreon Sponsor</a> · Version <span class="version"></span></p>
diff --git a/docs/experimentals/autocomplete.html b/docs/experimentals/autocomplete.html
index 71f6ca6..d90502c 100644
--- a/docs/experimentals/autocomplete.html
+++ b/docs/experimentals/autocomplete.html
@@ -200,6 +200,17 @@
         <div class="docs-content" id="content">
           <div class="container" id="autocomplete">
             <h3 class="s-title">Autocomplete<a class="anchor" href="#autocomplete" aria-hidden="true">#</a></h3>
+            <div class="docs-ad">
+              <div class="hide-md text-center">
+                <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>
+              <div class="show-md text-center">
+                <!-- GitHub-sm--><ins class="adsbygoogle" style="display:inline-block;width:300px;height:250px" data-ad-client="ca-pub-2225124559530218" data-ad-slot="9278881734"></ins>
+                <script>(adsbygoogle = window.adsbygoogle || []).push({});</script>
+              </div>
+            </div>
             <p>Autocomplete form component provides suggestions while you type. It is often used for tags and contacts input.</p>
             <div class="docs-demo columns">
               <div class="column col-9 col-xs-12">
@@ -304,9 +315,6 @@
   <span class="hljs-tag">&lt;/<span class="hljs-name">ul</span>&gt;</span>
 <span class="hljs-tag">&lt;/<span class="hljs-name">div</span>&gt;</span>
 </code></pre>
-            <div class="docs-ad docs-ad-sidebar text-center">
-              <script id="_carbonads_js" async="" type="text/javascript" src="https://cdn.carbonads.com/carbon.js?serve=CK7DTKQW&amp;placement=picturepan2githubio"></script>
-            </div>
           </div>
           <div class="docs-footer container grid-lg" id="copyright">
             <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> · <a href="https://www.patreon.com/spectrecss" target="_blank">Patreon Sponsor</a> · Version <span class="version"></span></p>
diff --git a/docs/experimentals/calendars.html b/docs/experimentals/calendars.html
index 1687d29..27b9865 100644
--- a/docs/experimentals/calendars.html
+++ b/docs/experimentals/calendars.html
@@ -200,6 +200,17 @@
         <div class="docs-content" id="content">
           <div class="container" id="calendars">
             <h3 class="s-title">Calendars<a class="anchor" href="#calendars" aria-hidden="true">#</a></h3>
+            <div class="docs-ad">
+              <div class="hide-md text-center">
+                <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>
+              <div class="show-md text-center">
+                <!-- GitHub-sm--><ins class="adsbygoogle" style="display:inline-block;width:300px;height:250px" data-ad-client="ca-pub-2225124559530218" data-ad-slot="9278881734"></ins>
+                <script>(adsbygoogle = window.adsbygoogle || []).push({});</script>
+              </div>
+            </div>
             <p>Calendars are designed for date or date range picker and events display. It is made with flex layout.</p>
             <div class="docs-demo columns">
               <div class="column col-4 col-md-12">
@@ -562,9 +573,6 @@
   <span class="hljs-tag">&lt;/<span class="hljs-name">div</span>&gt;</span>
 <span class="hljs-tag">&lt;/<span class="hljs-name">div</span>&gt;</span>
 </code></pre>
-            <div class="docs-ad docs-ad-sidebar text-center">
-              <script id="_carbonads_js" async="" type="text/javascript" src="https://cdn.carbonads.com/carbon.js?serve=CK7DTKQW&amp;placement=picturepan2githubio"></script>
-            </div>
           </div>
           <div class="docs-footer container grid-lg" id="copyright">
             <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> · <a href="https://www.patreon.com/spectrecss" target="_blank">Patreon Sponsor</a> · Version <span class="version"></span></p>
diff --git a/docs/experimentals/carousels.html b/docs/experimentals/carousels.html
index ff7dff6..398875f 100644
--- a/docs/experimentals/carousels.html
+++ b/docs/experimentals/carousels.html
@@ -201,6 +201,17 @@
           <div class="container" id="carousels">
             <h3 class="s-title">Carousels<a class="anchor" href="#carousels" aria-hidden="true">#</a></h3>
             <p><small class="label label-secondary">CSS ONLY</small></p>
+            <div class="docs-ad">
+              <div class="hide-md text-center">
+                <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>
+              <div class="show-md text-center">
+                <!-- GitHub-sm--><ins class="adsbygoogle" style="display:inline-block;width:300px;height:250px" data-ad-client="ca-pub-2225124559530218" data-ad-slot="9278881734"></ins>
+                <script>(adsbygoogle = window.adsbygoogle || []).push({});</script>
+              </div>
+            </div>
             <p>Carousels are slideshows for cycling images. It is built in pure CSS.</p>
             <div class="docs-demo columns">
               <div class="column col-12">
@@ -277,9 +288,6 @@
   <span class="hljs-tag">&lt;/<span class="hljs-name">div</span>&gt;</span>
 <span class="hljs-tag">&lt;/<span class="hljs-name">div</span>&gt;</span>
 </code></pre>
-            <div class="docs-ad docs-ad-sidebar text-center">
-              <script id="_carbonads_js" async="" type="text/javascript" src="https://cdn.carbonads.com/carbon.js?serve=CK7DTKQW&amp;placement=picturepan2githubio"></script>
-            </div>
           </div>
           <div class="docs-footer container grid-lg" id="copyright">
             <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> · <a href="https://www.patreon.com/spectrecss" target="_blank">Patreon Sponsor</a> · Version <span class="version"></span></p>
diff --git a/docs/experimentals/comparison.html b/docs/experimentals/comparison.html
index 0ac3d53..6beac80 100644
--- a/docs/experimentals/comparison.html
+++ b/docs/experimentals/comparison.html
@@ -201,6 +201,17 @@
           <div class="container" id="comparison">
             <h3 class="s-title">Comparison sliders<a class="anchor" href="#comparison" aria-hidden="true">#</a></h3>
             <p><small class="label label-secondary">CSS ONLY</small></p>
+            <div class="docs-ad">
+              <div class="hide-md text-center">
+                <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>
+              <div class="show-md text-center">
+                <!-- GitHub-sm--><ins class="adsbygoogle" style="display:inline-block;width:300px;height:250px" data-ad-client="ca-pub-2225124559530218" data-ad-slot="9278881734"></ins>
+                <script>(adsbygoogle = window.adsbygoogle || []).push({});</script>
+              </div>
+            </div>
             <p>Comparison Sliders are sliders for comparing two images. It is built in pure CSS.</p>
             <div class="docs-demo columns">
               <div class="column col-12">
@@ -228,9 +239,6 @@
   <span class="hljs-tag">&lt;/<span class="hljs-name">figure</span>&gt;</span>
 <span class="hljs-tag">&lt;/<span class="hljs-name">div</span>&gt;</span>
 </code></pre>
-            <div class="docs-ad docs-ad-sidebar text-center">
-              <script id="_carbonads_js" async="" type="text/javascript" src="https://cdn.carbonads.com/carbon.js?serve=CK7DTKQW&amp;placement=picturepan2githubio"></script>
-            </div>
           </div>
           <div class="docs-footer container grid-lg" id="copyright">
             <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> · <a href="https://www.patreon.com/spectrecss" target="_blank">Patreon Sponsor</a> · Version <span class="version"></span></p>
diff --git a/docs/experimentals/filters.html b/docs/experimentals/filters.html
index 851d772..aa6d803 100644
--- a/docs/experimentals/filters.html
+++ b/docs/experimentals/filters.html
@@ -201,6 +201,17 @@
           <div class="container" id="filters">
             <h3 class="s-title">Filters<a class="anchor" href="#filters" aria-hidden="true">#</a></h3>
             <p><small class="label label-secondary">CSS ONLY</small></p>
+            <div class="docs-ad">
+              <div class="hide-md text-center">
+                <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>
+              <div class="show-md text-center">
+                <!-- GitHub-sm--><ins class="adsbygoogle" style="display:inline-block;width:300px;height:250px" data-ad-client="ca-pub-2225124559530218" data-ad-slot="9278881734"></ins>
+                <script>(adsbygoogle = window.adsbygoogle || []).push({});</script>
+              </div>
+            </div>
             <p>Filters are CSS only content filters.</p>
             <div class="docs-demo columns">
               <div class="column col-12">
@@ -344,9 +355,6 @@
   <span class="hljs-tag">&lt;/<span class="hljs-name">div</span>&gt;</span>
 <span class="hljs-tag">&lt;/<span class="hljs-name">div</span>&gt;</span>
 </code></pre>
-            <div class="docs-ad docs-ad-sidebar text-center">
-              <script id="_carbonads_js" async="" type="text/javascript" src="https://cdn.carbonads.com/carbon.js?serve=CK7DTKQW&amp;placement=picturepan2githubio"></script>
-            </div>
           </div>
           <div class="docs-footer container grid-lg" id="copyright">
             <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> · <a href="https://www.patreon.com/spectrecss" target="_blank">Patreon Sponsor</a> · Version <span class="version"></span></p>
diff --git a/docs/experimentals/meters.html b/docs/experimentals/meters.html
index 586e0f1..f98f7a2 100644
--- a/docs/experimentals/meters.html
+++ b/docs/experimentals/meters.html
@@ -200,6 +200,17 @@
         <div class="docs-content" id="content">
           <div class="container" id="meters">
             <h3 class="s-title">Meters<a class="anchor" href="#meters" aria-hidden="true">#</a></h3>
+            <div class="docs-ad">
+              <div class="hide-md text-center">
+                <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>
+              <div class="show-md text-center">
+                <!-- GitHub-sm--><ins class="adsbygoogle" style="display:inline-block;width:300px;height:250px" data-ad-client="ca-pub-2225124559530218" data-ad-slot="9278881734"></ins>
+                <script>(adsbygoogle = window.adsbygoogle || []).push({});</script>
+              </div>
+            </div>
             <p>Meters represent the value within the known range.</p>
             <div class="docs-demo columns">
               <div class="column col-3 col-xs-12">
@@ -223,9 +234,6 @@
 <span class="hljs-comment">&lt;!-- Meter is red when value &lt; low &lt; high &lt; optimum or optimum &lt; low &lt; high &lt; value --&gt;</span>
 <span class="hljs-tag">&lt;<span class="hljs-name">meter</span> <span class="hljs-attr">class</span>=<span class="hljs-string">"meter"</span> <span class="hljs-attr">value</span>=<span class="hljs-string">"20"</span> <span class="hljs-attr">optimum</span>=<span class="hljs-string">"90"</span> <span class="hljs-attr">min</span>=<span class="hljs-string">"0"</span> <span class="hljs-attr">max</span>=<span class="hljs-string">"100"</span> <span class="hljs-attr">low</span>=<span class="hljs-string">"30"</span> <span class="hljs-attr">high</span>=<span class="hljs-string">"80"</span>&gt;</span><span class="hljs-tag">&lt;/<span class="hljs-name">meter</span>&gt;</span>
 </code></pre>
-            <div class="docs-ad docs-ad-sidebar text-center">
-              <script id="_carbonads_js" async="" type="text/javascript" src="https://cdn.carbonads.com/carbon.js?serve=CK7DTKQW&amp;placement=picturepan2githubio"></script>
-            </div>
           </div>
           <div class="docs-footer container grid-lg" id="copyright">
             <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> · <a href="https://www.patreon.com/spectrecss" target="_blank">Patreon Sponsor</a> · Version <span class="version"></span></p>
diff --git a/docs/experimentals/off-canvas.html b/docs/experimentals/off-canvas.html
index 9dadd62..0654549 100644
--- a/docs/experimentals/off-canvas.html
+++ b/docs/experimentals/off-canvas.html
@@ -201,6 +201,17 @@
           <div class="container" id="off-canvas">
             <h3 class="s-title">Off-canvas<a class="anchor" href="#off-canvas" aria-hidden="true">#</a></h3>
             <p><small class="label label-secondary">CSS ONLY</small></p>
+            <div class="docs-ad">
+              <div class="hide-md text-center">
+                <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>
+              <div class="show-md text-center">
+                <!-- GitHub-sm--><ins class="adsbygoogle" style="display:inline-block;width:300px;height:250px" data-ad-client="ca-pub-2225124559530218" data-ad-slot="9278881734"></ins>
+                <script>(adsbygoogle = window.adsbygoogle || []).push({});</script>
+              </div>
+            </div>
             <p>The Off-canvas is a navigation layout that the sidebar can slide in and out of the viewport. It is built in pure CSS.</p>
             <p>
               By default, the off-canvas menu is collapsed whenever the window width is.
@@ -240,9 +251,6 @@
   <span class="hljs-tag">&lt;/<span class="hljs-name">div</span>&gt;</span>
 <span class="hljs-tag">&lt;/<span class="hljs-name">div</span>&gt;</span>
 </code></pre>
-            <div class="docs-ad docs-ad-sidebar text-center">
-              <script id="_carbonads_js" async="" type="text/javascript" src="https://cdn.carbonads.com/carbon.js?serve=CK7DTKQW&amp;placement=picturepan2githubio"></script>
-            </div>
           </div>
           <div class="docs-footer container grid-lg" id="copyright">
             <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> · <a href="https://www.patreon.com/spectrecss" target="_blank">Patreon Sponsor</a> · Version <span class="version"></span></p>
diff --git a/docs/experimentals/parallax.html b/docs/experimentals/parallax.html
index a6a048e..daf1966 100644
--- a/docs/experimentals/parallax.html
+++ b/docs/experimentals/parallax.html
@@ -201,6 +201,17 @@
           <div class="container" id="parallax">
             <h3 class="s-title">Parallax<a class="anchor" href="#parallax" aria-hidden="true">#</a></h3>
             <p><small class="label label-secondary">CSS ONLY</small></p>
+            <div class="docs-ad">
+              <div class="hide-md text-center">
+                <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>
+              <div class="show-md text-center">
+                <!-- GitHub-sm--><ins class="adsbygoogle" style="display:inline-block;width:300px;height:250px" data-ad-client="ca-pub-2225124559530218" data-ad-slot="9278881734"></ins>
+                <script>(adsbygoogle = window.adsbygoogle || []).push({});</script>
+              </div>
+            </div>
             <p>The Parallax acts like Apple TV/tvOS hover parallax effect. It is built in pure CSS.</p>
             <div class="docs-demo columns">
               <div class="column col-sm-12 col-8 col-mx-auto">
@@ -233,9 +244,6 @@
   <span class="hljs-tag">&lt;/<span class="hljs-name">div</span>&gt;</span>
 <span class="hljs-tag">&lt;/<span class="hljs-name">div</span>&gt;</span>
 </code></pre>
-            <div class="docs-ad docs-ad-sidebar text-center">
-              <script id="_carbonads_js" async="" type="text/javascript" src="https://cdn.carbonads.com/carbon.js?serve=CK7DTKQW&amp;placement=picturepan2githubio"></script>
-            </div>
           </div>
           <div class="docs-footer container grid-lg" id="copyright">
             <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> · <a href="https://www.patreon.com/spectrecss" target="_blank">Patreon Sponsor</a> · Version <span class="version"></span></p>
diff --git a/docs/experimentals/progress.html b/docs/experimentals/progress.html
index f48fe55..c6bede0 100644
--- a/docs/experimentals/progress.html
+++ b/docs/experimentals/progress.html
@@ -200,6 +200,17 @@
         <div class="docs-content" id="content">
           <div class="container" id="progress">
             <h3 class="s-title">Progress<a class="anchor" href="#progress" aria-hidden="true">#</a></h3>
+            <div class="docs-ad">
+              <div class="hide-md text-center">
+                <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>
+              <div class="show-md text-center">
+                <!-- GitHub-sm--><ins class="adsbygoogle" style="display:inline-block;width:300px;height:250px" data-ad-client="ca-pub-2225124559530218" data-ad-slot="9278881734"></ins>
+                <script>(adsbygoogle = window.adsbygoogle || []).push({});</script>
+              </div>
+            </div>
             <p>The Progress indicates the progress completion of a task.</p>
             <div class="docs-demo columns">
               <div class="column col-3 col-xs-12">
@@ -218,9 +229,6 @@
             <pre class="code" data-lang="HTML"><code><span class="hljs-tag">&lt;<span class="hljs-name">progress</span> <span class="hljs-attr">class</span>=<span class="hljs-string">"progress"</span> <span class="hljs-attr">value</span>=<span class="hljs-string">"25"</span> <span class="hljs-attr">max</span>=<span class="hljs-string">"100"</span>&gt;</span><span class="hljs-tag">&lt;/<span class="hljs-name">progress</span>&gt;</span>
 <span class="hljs-tag">&lt;<span class="hljs-name">progress</span> <span class="hljs-attr">class</span>=<span class="hljs-string">"progress"</span> <span class="hljs-attr">max</span>=<span class="hljs-string">"100"</span>&gt;</span><span class="hljs-tag">&lt;/<span class="hljs-name">progress</span>&gt;</span>
 </code></pre>
-            <div class="docs-ad docs-ad-sidebar text-center">
-              <script id="_carbonads_js" async="" type="text/javascript" src="https://cdn.carbonads.com/carbon.js?serve=CK7DTKQW&amp;placement=picturepan2githubio"></script>
-            </div>
           </div>
           <div class="docs-footer container grid-lg" id="copyright">
             <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> · <a href="https://www.patreon.com/spectrecss" target="_blank">Patreon Sponsor</a> · Version <span class="version"></span></p>
diff --git a/docs/experimentals/sliders.html b/docs/experimentals/sliders.html
index f007477..f8dbd58 100644
--- a/docs/experimentals/sliders.html
+++ b/docs/experimentals/sliders.html
@@ -200,6 +200,17 @@
         <div class="docs-content" id="content">
           <div class="container" id="sliders">
             <h3 class="s-title">Sliders<a class="anchor" href="#sliders" aria-hidden="true">#</a></h3>
+            <div class="docs-ad">
+              <div class="hide-md text-center">
+                <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>
+              <div class="show-md text-center">
+                <!-- GitHub-sm--><ins class="adsbygoogle" style="display:inline-block;width:300px;height:250px" data-ad-client="ca-pub-2225124559530218" data-ad-slot="9278881734"></ins>
+                <script>(adsbygoogle = window.adsbygoogle || []).push({});</script>
+              </div>
+            </div>
             <p>The Sliders are for selecting values from ranges.</p>
             <p>You can add the class <code>tooltip</code> to have tooltip labels.
               If no <code>data-tooltip</code> is set, the <code>value</code> will be used instead.
@@ -217,9 +228,6 @@
 <span class="hljs-comment">&lt;!-- Sliders with tooltips --&gt;</span>
 <span class="hljs-tag">&lt;<span class="hljs-name">input</span> <span class="hljs-attr">class</span>=<span class="hljs-string">"slider tooltip"</span> <span class="hljs-attr">type</span>=<span class="hljs-string">"range"</span> <span class="hljs-attr">min</span>=<span class="hljs-string">"0"</span> <span class="hljs-attr">max</span>=<span class="hljs-string">"100"</span> <span class="hljs-attr">value</span>=<span class="hljs-string">"50"</span> <span class="hljs-attr">oninput</span>=<span class="hljs-string">"this.setAttribute('value', this.value);"</span>&gt;</span>
 </code></pre>
-            <div class="docs-ad docs-ad-sidebar text-center">
-              <script id="_carbonads_js" async="" type="text/javascript" src="https://cdn.carbonads.com/carbon.js?serve=CK7DTKQW&amp;placement=picturepan2githubio"></script>
-            </div>
           </div>
           <div class="docs-footer container grid-lg" id="copyright">
             <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> · <a href="https://www.patreon.com/spectrecss" target="_blank">Patreon Sponsor</a> · Version <span class="version"></span></p>
diff --git a/docs/experimentals/timelines.html b/docs/experimentals/timelines.html
index 317bc75..a19401c 100644
--- a/docs/experimentals/timelines.html
+++ b/docs/experimentals/timelines.html
@@ -200,6 +200,17 @@
         <div class="docs-content" id="content">
           <div class="container" id="timelines">
             <h3 class="s-title">Timelines<a class="anchor" href="#timelines" aria-hidden="true">#</a></h3>
+            <div class="docs-ad">
+              <div class="hide-md text-center">
+                <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>
+              <div class="show-md text-center">
+                <!-- GitHub-sm--><ins class="adsbygoogle" style="display:inline-block;width:300px;height:250px" data-ad-client="ca-pub-2225124559530218" data-ad-slot="9278881734"></ins>
+                <script>(adsbygoogle = window.adsbygoogle || []).push({});</script>
+              </div>
+            </div>
             <p>The Timelines are ordered sequences of activities.</p>
             <div class="docs-demo columns">
               <div class="column col-9 col-sm-12">
@@ -275,9 +286,6 @@
   ...
 <span class="hljs-tag">&lt;/<span class="hljs-name">div</span>&gt;</span>
 </code></pre>
-            <div class="docs-ad docs-ad-sidebar text-center">
-              <script id="_carbonads_js" async="" type="text/javascript" src="https://cdn.carbonads.com/carbon.js?serve=CK7DTKQW&amp;placement=picturepan2githubio"></script>
-            </div>
           </div>
           <div class="docs-footer container grid-lg" id="copyright">
             <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> · <a href="https://www.patreon.com/spectrecss" target="_blank">Patreon Sponsor</a> · Version <span class="version"></span></p>
diff --git a/docs/experimentals/viewer-360.html b/docs/experimentals/viewer-360.html
index 8ee34c2..f508bcc 100644
--- a/docs/experimentals/viewer-360.html
+++ b/docs/experimentals/viewer-360.html
@@ -201,6 +201,17 @@
           <div class="container" id="viewer-360">
             <h3 class="s-title">360-Degree Viewer<a class="anchor" href="#viewer-360" aria-hidden="true">#</a></h3>
             <p><small class="label label-secondary">CSS ONLY</small></p>
+            <div class="docs-ad">
+              <div class="hide-md text-center">
+                <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>
+              <div class="show-md text-center">
+                <!-- GitHub-sm--><ins class="adsbygoogle" style="display:inline-block;width:300px;height:250px" data-ad-client="ca-pub-2225124559530218" data-ad-slot="9278881734"></ins>
+                <script>(adsbygoogle = window.adsbygoogle || []).push({});</script>
+              </div>
+            </div>
             <p>360-Degree Viewer is an interactive product photo viewer. It is built in pure CSS. </p>
             <div class="docs-demo columns">
               <div class="column col-12">
@@ -230,9 +241,6 @@
             <pre class="code" data-lang="SCSS"><code>@<span class="hljs-keyword">include</span> viewer-slider-size(<span class="hljs-number">36</span>);
 @<span class="hljs-keyword">include</span> viewer-slider-size(<span class="hljs-number">30</span>);
 </code></pre>
-            <div class="docs-ad docs-ad-sidebar text-center">
-              <script id="_carbonads_js" async="" type="text/javascript" src="https://cdn.carbonads.com/carbon.js?serve=CK7DTKQW&amp;placement=picturepan2githubio"></script>
-            </div>
           </div>
           <div class="docs-footer container grid-lg" id="copyright">
             <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> · <a href="https://www.patreon.com/spectrecss" target="_blank">Patreon Sponsor</a> · Version <span class="version"></span></p>
diff --git a/docs/getting-started.html b/docs/getting-started.html
index bc5c974..f65a657 100644
--- a/docs/getting-started.html
+++ b/docs/getting-started.html
@@ -200,6 +200,17 @@
         <div class="docs-content" id="content">
           <div class="container" id="getting-started">
             <h3 class="s-title">Getting started<a class="anchor" href="#getting-started" aria-hidden="true">#</a></h3>
+            <div class="docs-ad">
+              <div class="hide-md text-center">
+                <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>
+              <div class="show-md text-center">
+                <!-- GitHub-sm--><ins class="adsbygoogle" style="display:inline-block;width:300px;height:250px" data-ad-client="ca-pub-2225124559530218" data-ad-slot="9278881734"></ins>
+                <script>(adsbygoogle = window.adsbygoogle || []).push({});</script>
+              </div>
+            </div>
             <p> <strong>Spectre.css </strong>is a lightweight, responsive and modern CSS framework for faster and extensible development.</p>
             <p>
                Spectre provides basic styles for typography and elements, flexbox based responsive layout system, pure CSS components and utilities with best practice coding and consistent design language.</p>
@@ -249,9 +260,6 @@
                 </div>
               </div>
             </div>
-            <div class="docs-ad docs-ad-sidebar text-center">
-              <script id="_carbonads_js" async="" type="text/javascript" src="https://cdn.carbonads.com/carbon.js?serve=CK7DTKQW&amp;placement=picturepan2githubio"></script>
-            </div>
           </div>
           <div class="docs-footer container grid-lg" id="copyright">
             <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> · <a href="https://www.patreon.com/spectrecss" target="_blank">Patreon Sponsor</a> · Version <span class="version"></span></p>
diff --git a/docs/getting-started/browsers.html b/docs/getting-started/browsers.html
index 2c9595d..e106ae2 100644
--- a/docs/getting-started/browsers.html
+++ b/docs/getting-started/browsers.html
@@ -200,6 +200,17 @@
         <div class="docs-content" id="content">
           <div class="container" id="browsers">
             <h3 class="s-title">Browser support<a class="anchor" href="#browsers" aria-hidden="true">#</a></h3>
+            <div class="docs-ad">
+              <div class="hide-md text-center">
+                <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>
+              <div class="show-md text-center">
+                <!-- GitHub-sm--><ins class="adsbygoogle" style="display:inline-block;width:300px;height:250px" data-ad-client="ca-pub-2225124559530218" data-ad-slot="9278881734"></ins>
+                <script>(adsbygoogle = window.adsbygoogle || []).push({});</script>
+              </div>
+            </div>
             <p>Spectre uses <a href="https://github.com/postcss/autoprefixer" target="_blank">Autoprefixer</a> to make most styles compatible with earlier browsers and <a href="https://necolas.github.io/normalize.css/" target="_blank">Normalize.css</a> for CSS resets. Spectre is designed for modern browsers. For best compatibility, these browsers are recommended:</p>
             <ul>
               <li>Chrome <small class="label label-success">LAST 4</small></li>
@@ -210,9 +221,6 @@
               <li>Internet Explorer 10+</li>
             </ul>
             <p>Spectre supports Internet Explorer 10+, but some HTML5 and CSS3 features are not perfectly supported by Internet Explorer.</p>
-            <div class="docs-ad docs-ad-sidebar text-center">
-              <script id="_carbonads_js" async="" type="text/javascript" src="https://cdn.carbonads.com/carbon.js?serve=CK7DTKQW&amp;placement=picturepan2githubio"></script>
-            </div>
           </div>
           <div class="docs-footer container grid-lg" id="copyright">
             <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> · <a href="https://www.patreon.com/spectrecss" target="_blank">Patreon Sponsor</a> · Version <span class="version"></span></p>
diff --git a/docs/getting-started/custom.html b/docs/getting-started/custom.html
index 46980fd..8963c31 100644
--- a/docs/getting-started/custom.html
+++ b/docs/getting-started/custom.html
@@ -200,6 +200,17 @@
         <div class="docs-content" id="content">
           <div class="container" id="custom">
             <h3 class="s-title">Custom version<a class="anchor" href="#custom" aria-hidden="true">#</a></h3>
+            <div class="docs-ad">
+              <div class="hide-md text-center">
+                <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>
+              <div class="show-md text-center">
+                <!-- GitHub-sm--><ins class="adsbygoogle" style="display:inline-block;width:300px;height:250px" data-ad-client="ca-pub-2225124559530218" data-ad-slot="9278881734"></ins>
+                <script>(adsbygoogle = window.adsbygoogle || []).push({});</script>
+              </div>
+            </div>
             <p>You can customize your version of Spectre.css by editing Sass files in <code>/src</code> directory or removing unneeded components from <code>.scss</code> source files.</p>
             <p><a class="btn btn-primary" href="https://github.com/picturepan2/spectre/" target="_blank">Sass Source Code</a></p>
             <p>If you are looking for Less version of Spectre.css, please switch to <code>Less</code> branch.</p>
@@ -388,9 +399,6 @@ gulp.task(<span class="hljs-string">'prefix'</span>, <span class="hljs-function"
 });
 </code></pre>
             <p>After you compile your version of Spectre in the /dist, run <code>gulp prefix</code> in the directory of Spectre.</p>
-            <div class="docs-ad docs-ad-sidebar text-center">
-              <script id="_carbonads_js" async="" type="text/javascript" src="https://cdn.carbonads.com/carbon.js?serve=CK7DTKQW&amp;placement=picturepan2githubio"></script>
-            </div>
           </div>
           <div class="docs-footer container grid-lg" id="copyright">
             <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> · <a href="https://www.patreon.com/spectrecss" target="_blank">Patreon Sponsor</a> · Version <span class="version"></span></p>
diff --git a/docs/getting-started/installation.html b/docs/getting-started/installation.html
index 979b814..0142131 100644
--- a/docs/getting-started/installation.html
+++ b/docs/getting-started/installation.html
@@ -200,6 +200,17 @@
         <div class="docs-content" id="content">
           <div class="container" id="installation">
             <h3 class="s-title">Installation<a class="anchor" href="#installation" aria-hidden="true">#</a></h3>
+            <div class="docs-ad">
+              <div class="hide-md text-center">
+                <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>
+              <div class="show-md text-center">
+                <!-- GitHub-sm--><ins class="adsbygoogle" style="display:inline-block;width:300px;height:250px" data-ad-client="ca-pub-2225124559530218" data-ad-slot="9278881734"></ins>
+                <script>(adsbygoogle = window.adsbygoogle || []).push({});</script>
+              </div>
+            </div>
             <p>There are 5 ways to get started with Spectre CSS framework in your projects. You can either install manually, from CDN or use package managers.</p>
             <h4 class="s-subtitle" id="install-manually">Install manually<a class="anchor" href="#install-manually" aria-hidden="true">#</a></h4>
             <p>Download the compiled and minified <a href="https://github.com/picturepan2/spectre/releases" target="_blank">Spectre CSS file</a> (core ~10KB min+gzip):</p>
@@ -224,9 +235,6 @@
             <h4 class="s-subtitle" id="install-bower">Install from Bower<a class="anchor" href="#install-bower" aria-hidden="true">#</a></h4>
             <pre class="code c-select-all" data-lang="Bash"><code>bower install spectre.css --save
 </code></pre>
-            <div class="docs-ad docs-ad-sidebar text-center">
-              <script id="_carbonads_js" async="" type="text/javascript" src="https://cdn.carbonads.com/carbon.js?serve=CK7DTKQW&amp;placement=picturepan2githubio"></script>
-            </div>
           </div>
           <div class="docs-footer container grid-lg" id="copyright">
             <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> · <a href="https://www.patreon.com/spectrecss" target="_blank">Patreon Sponsor</a> · Version <span class="version"></span></p>
diff --git a/docs/getting-started/whatsnew.html b/docs/getting-started/whatsnew.html
index 049bf40..137fd11 100644
--- a/docs/getting-started/whatsnew.html
+++ b/docs/getting-started/whatsnew.html
@@ -199,7 +199,18 @@
       <div class="off-canvas-content">
         <div class="docs-content" id="content">
           <div class="container" id="whatsnew">
-            <h3 class="s-title">What's new<a class="anchor" href="#whatsnew" aria-hidden="true">#</a></h3><h4>Spectre.css Changelog</h4>
+            <h3 class="s-title">What's new<a class="anchor" href="#whatsnew" aria-hidden="true">#</a></h3>
+            <div class="docs-ad">
+              <div class="hide-md text-center">
+                <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>
+              <div class="show-md text-center">
+                <!-- GitHub-sm--><ins class="adsbygoogle" style="display:inline-block;width:300px;height:250px" data-ad-client="ca-pub-2225124559530218" data-ad-slot="9278881734"></ins>
+                <script>(adsbygoogle = window.adsbygoogle || []).push({});</script>
+              </div>
+            </div><h4>Spectre.css Changelog</h4>
 <h5>v0.5.8 <a href="https://github.com/picturepan2/spectre/releases/tag/v0.5.8">#</a></h5>
 <ul>
 <li>IMPORTANT: Moving</li>
@@ -494,9 +505,6 @@
 <p>Thank you. ♥</p>
 
             <p><a class="btn btn-primary" href="https://github.com/picturepan2/spectre/releases" target="_blank">Releases</a></p>
-            <div class="docs-ad docs-ad-sidebar text-center">
-              <script id="_carbonads_js" async="" type="text/javascript" src="https://cdn.carbonads.com/carbon.js?serve=CK7DTKQW&amp;placement=picturepan2githubio"></script>
-            </div>
           </div>
           <div class="docs-footer container grid-lg" id="copyright">
             <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> · <a href="https://www.patreon.com/spectrecss" target="_blank">Patreon Sponsor</a> · Version <span class="version"></span></p>
diff --git a/docs/index.html b/docs/index.html
index 21dc2af..de2f0a3 100644
--- a/docs/index.html
+++ b/docs/index.html
@@ -57,7 +57,19 @@
         </div>
       </div>
     </div>
-    <div class="section section-ads bg-gray"></div>
+    <div class="section section-ads bg-gray">
+      <div class="docs-ad">
+        <div class="hide-md text-center">
+          <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>
+        <div class="show-md text-center">
+          <!-- GitHub-sm--><ins class="adsbygoogle" style="display:inline-block;width:300px;height:250px" data-ad-client="ca-pub-2225124559530218" data-ad-slot="9278881734"></ins>
+          <script>(adsbygoogle = window.adsbygoogle || []).push({});</script>
+        </div>
+      </div>
+    </div>
     <div class="section section-features bg-primary text-light text-center">
       <div class="container grid-lg">
         <h2>Introduction</h2>
@@ -103,11 +115,7 @@
         </div>
       </div>
     </div>
-    <div class="section section-ads bg-gray">
-      <div class="docs-ad docs-ad-sidebar text-center">
-        <script id="_carbonads_js" async="" type="text/javascript" src="https://cdn.carbonads.com/carbon.js?serve=CK7DTKQW&amp;placement=picturepan2githubio"></script>
-      </div>
-    </div>
+    <div class="section section-ads bg-gray"></div>
     <footer class="section section-footer">
       <div class="docs-footer container grid-lg" id="copyright">
         <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> · <a href="https://www.patreon.com/spectrecss" target="_blank">Patreon Sponsor</a> · Version <span class="version"></span></p>
diff --git a/docs/layout.html b/docs/layout.html
index 1f01d2f..a0db1b8 100644
--- a/docs/layout.html
+++ b/docs/layout.html
@@ -200,6 +200,17 @@
         <div class="docs-content" id="content">
           <div class="container" id="layout">
             <h3 class="s-title">Layout<a class="anchor" href="#layout" aria-hidden="true">#</a></h3>
+            <div class="docs-ad">
+              <div class="hide-md text-center">
+                <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>
+              <div class="show-md text-center">
+                <!-- GitHub-sm--><ins class="adsbygoogle" style="display:inline-block;width:300px;height:250px" data-ad-client="ca-pub-2225124559530218" data-ad-slot="9278881734"></ins>
+                <script>(adsbygoogle = window.adsbygoogle || []).push({});</script>
+              </div>
+            </div>
             <p> <strong>Spectre.css </strong>is a lightweight, responsive and modern CSS framework for faster and extensible development.</p>
             <p>
                Spectre provides basic styles for typography and elements, flexbox based responsive layout system, pure CSS components and utilities with best practice coding and consistent design language.</p>
@@ -241,9 +252,6 @@
                 </div>
               </div>
             </div>
-            <div class="docs-ad docs-ad-sidebar text-center">
-              <script id="_carbonads_js" async="" type="text/javascript" src="https://cdn.carbonads.com/carbon.js?serve=CK7DTKQW&amp;placement=picturepan2githubio"></script>
-            </div>
           </div>
           <div class="docs-footer container grid-lg" id="copyright">
             <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> · <a href="https://www.patreon.com/spectrecss" target="_blank">Patreon Sponsor</a> · Version <span class="version"></span></p>
diff --git a/docs/layout/grid.html b/docs/layout/grid.html
index 8c452b8..2232913 100644
--- a/docs/layout/grid.html
+++ b/docs/layout/grid.html
@@ -200,6 +200,17 @@
         <div class="docs-content" id="content">
           <div class="container" id="grid">
             <h3 class="s-title">Flexbox grid<a class="anchor" href="#grid" aria-hidden="true">#</a></h3>
+            <div class="docs-ad">
+              <div class="hide-md text-center">
+                <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>
+              <div class="show-md text-center">
+                <!-- GitHub-sm--><ins class="adsbygoogle" style="display:inline-block;width:300px;height:250px" data-ad-client="ca-pub-2225124559530218" data-ad-slot="9278881734"></ins>
+                <script>(adsbygoogle = window.adsbygoogle || []).push({});</script>
+              </div>
+            </div>
             <p>Layout includes flexbox based responsive grid system with 12 columns.</p>
             <div class="docs-demo columns">
               <div class="column">
@@ -428,9 +439,6 @@
   <span class="hljs-tag">&lt;/<span class="hljs-name">div</span>&gt;</span>
 <span class="hljs-tag">&lt;/<span class="hljs-name">div</span>&gt;</span>
 </code></pre>
-            <div class="docs-ad docs-ad-sidebar text-center">
-              <script id="_carbonads_js" async="" type="text/javascript" src="https://cdn.carbonads.com/carbon.js?serve=CK7DTKQW&amp;placement=picturepan2githubio"></script>
-            </div>
           </div>
           <div class="docs-footer container grid-lg" id="copyright">
             <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> · <a href="https://www.patreon.com/spectrecss" target="_blank">Patreon Sponsor</a> · Version <span class="version"></span></p>
diff --git a/docs/layout/hero.html b/docs/layout/hero.html
index b8e9a8f..f25e0e8 100644
--- a/docs/layout/hero.html
+++ b/docs/layout/hero.html
@@ -200,6 +200,17 @@
         <div class="docs-content" id="content">
           <div class="container" id="hero">
             <h3 class="s-title">Hero<a class="anchor" href="#hero" aria-hidden="true">#</a></h3>
+            <div class="docs-ad">
+              <div class="hide-md text-center">
+                <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>
+              <div class="show-md text-center">
+                <!-- GitHub-sm--><ins class="adsbygoogle" style="display:inline-block;width:300px;height:250px" data-ad-client="ca-pub-2225124559530218" data-ad-slot="9278881734"></ins>
+                <script>(adsbygoogle = window.adsbygoogle || []).push({});</script>
+              </div>
+            </div>
             <p>The Hero container shows key featured content or information.</p>
             <div class="docs-demo columns">
               <div class="column">
@@ -233,9 +244,6 @@
                 </div>
               </div>
             </div>
-            <div class="docs-ad docs-ad-sidebar text-center">
-              <script id="_carbonads_js" async="" type="text/javascript" src="https://cdn.carbonads.com/carbon.js?serve=CK7DTKQW&amp;placement=picturepan2githubio"></script>
-            </div>
           </div>
           <div class="docs-footer container grid-lg" id="copyright">
             <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> · <a href="https://www.patreon.com/spectrecss" target="_blank">Patreon Sponsor</a> · Version <span class="version"></span></p>
diff --git a/docs/layout/navbar.html b/docs/layout/navbar.html
index 9ae06e3..5c15190 100644
--- a/docs/layout/navbar.html
+++ b/docs/layout/navbar.html
@@ -200,6 +200,17 @@
         <div class="docs-content" id="content">
           <div class="container" id="navbar">
             <h3 class="s-title">Navbar<a class="anchor" href="#navbar" aria-hidden="true">#</a></h3>
+            <div class="docs-ad">
+              <div class="hide-md text-center">
+                <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>
+              <div class="show-md text-center">
+                <!-- GitHub-sm--><ins class="adsbygoogle" style="display:inline-block;width:300px;height:250px" data-ad-client="ca-pub-2225124559530218" data-ad-slot="9278881734"></ins>
+                <script>(adsbygoogle = window.adsbygoogle || []).push({});</script>
+              </div>
+            </div>
             <p>Navbar is a layout container that appears in the header of apps and websites.</p>
             <div class="docs-demo columns">
               <div class="column">
@@ -256,9 +267,6 @@
   <span class="hljs-tag">&lt;/<span class="hljs-name">section</span>&gt;</span>
 <span class="hljs-tag">&lt;/<span class="hljs-name">header</span>&gt;</span>
 </code></pre>
-            <div class="docs-ad docs-ad-sidebar text-center">
-              <script id="_carbonads_js" async="" type="text/javascript" src="https://cdn.carbonads.com/carbon.js?serve=CK7DTKQW&amp;placement=picturepan2githubio"></script>
-            </div>
           </div>
           <div class="docs-footer container grid-lg" id="copyright">
             <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> · <a href="https://www.patreon.com/spectrecss" target="_blank">Patreon Sponsor</a> · Version <span class="version"></span></p>
diff --git a/docs/layout/responsive.html b/docs/layout/responsive.html
index 7aab520..0cb70c8 100644
--- a/docs/layout/responsive.html
+++ b/docs/layout/responsive.html
@@ -200,6 +200,17 @@
         <div class="docs-content" id="content">
           <div class="container" id="responsive">
             <h3 class="s-title">Responsive<a class="anchor" href="#responsive" aria-hidden="true">#</a></h3>
+            <div class="docs-ad">
+              <div class="hide-md text-center">
+                <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>
+              <div class="show-md text-center">
+                <!-- GitHub-sm--><ins class="adsbygoogle" style="display:inline-block;width:300px;height:250px" data-ad-client="ca-pub-2225124559530218" data-ad-slot="9278881734"></ins>
+                <script>(adsbygoogle = window.adsbygoogle || []).push({});</script>
+              </div>
+            </div>
             <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">
@@ -494,9 +505,6 @@
               You can clone the <a href="https://github.com/picturepan2/responsive-resizer" target="_blank">GitHub Repo</a> to use it locally or use it online.
             </p>
             <p><a class="btn btn-primary" href="https://picturepan2.github.io/responsive-resizer/" target="_blank">Responsive Resizer</a></p>
-            <div class="docs-ad docs-ad-sidebar text-center">
-              <script id="_carbonads_js" async="" type="text/javascript" src="https://cdn.carbonads.com/carbon.js?serve=CK7DTKQW&amp;placement=picturepan2githubio"></script>
-            </div>
           </div>
           <div class="docs-footer container grid-lg" id="copyright">
             <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> · <a href="https://www.patreon.com/spectrecss" target="_blank">Patreon Sponsor</a> · Version <span class="version"></span></p>
diff --git a/docs/src/_layout/_ad-c.pug b/docs/src/_layout/_ad-c.pug
index 79b3e2c..e69de29 100644
--- a/docs/src/_layout/_ad-c.pug
+++ b/docs/src/_layout/_ad-c.pug
@@ -1,3 +0,0 @@
-block ad-carbons
-  .docs-ad.docs-ad-sidebar.text-center
-    script#_carbonads_js(async="" type="text/javascript" src="https://cdn.carbonads.com/carbon.js?serve=CK7DTKQW&placement=picturepan2githubio")
\ No newline at end of file
diff --git a/docs/src/_layout/_ad-g.pug b/docs/src/_layout/_ad-g.pug
index ce866ac..c227ea8 100644
--- a/docs/src/_layout/_ad-g.pug
+++ b/docs/src/_layout/_ad-g.pug
@@ -1,4 +1,4 @@
-//-block ad-adsense
+block ad-adsense
   .docs-ad
     .hide-md.text-center
       script(async='', src='https://pagead2.googlesyndication.com/pagead/js/adsbygoogle.js')
diff --git a/docs/utilities.html b/docs/utilities.html
index 54f9692..a90e237 100644
--- a/docs/utilities.html
+++ b/docs/utilities.html
@@ -200,6 +200,17 @@
         <div class="docs-content" id="content">
           <div class="container" id="utilities">
             <h3 class="s-title">Utilities<a class="anchor" href="#utilities" aria-hidden="true">#</a></h3>
+            <div class="docs-ad">
+              <div class="hide-md text-center">
+                <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>
+              <div class="show-md text-center">
+                <!-- GitHub-sm--><ins class="adsbygoogle" style="display:inline-block;width:300px;height:250px" data-ad-client="ca-pub-2225124559530218" data-ad-slot="9278881734"></ins>
+                <script>(adsbygoogle = window.adsbygoogle || []).push({});</script>
+              </div>
+            </div>
             <p> <strong>Spectre.css </strong>is a lightweight, responsive and modern CSS framework for faster and extensible development.</p>
             <p>
                Spectre provides basic styles for typography and elements, flexbox based responsive layout system, pure CSS components and utilities with best practice coding and consistent design language.</p>
@@ -277,9 +288,6 @@
                 </div>
               </div>
             </div>
-            <div class="docs-ad docs-ad-sidebar text-center">
-              <script id="_carbonads_js" async="" type="text/javascript" src="https://cdn.carbonads.com/carbon.js?serve=CK7DTKQW&amp;placement=picturepan2githubio"></script>
-            </div>
           </div>
           <div class="docs-footer container grid-lg" id="copyright">
             <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> · <a href="https://www.patreon.com/spectrecss" target="_blank">Patreon Sponsor</a> · Version <span class="version"></span></p>
diff --git a/docs/utilities/colors.html b/docs/utilities/colors.html
index caeec7b..b3e2e8f 100644
--- a/docs/utilities/colors.html
+++ b/docs/utilities/colors.html
@@ -200,6 +200,17 @@
         <div class="docs-content" id="content">
           <div class="container" id="colors">
             <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="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>
+              <div class="show-md text-center">
+                <!-- GitHub-sm--><ins class="adsbygoogle" style="display:inline-block;width:300px;height:250px" data-ad-client="ca-pub-2225124559530218" data-ad-slot="9278881734"></ins>
+                <script>(adsbygoogle = window.adsbygoogle || []).push({});</script>
+              </div>
+            </div>
             <p>Color utilities are used for changing colors for text, link and background.</p>
             <h4 class="s-subtitle" id="colors-text">Text colors<a class="anchor" href="#colors-text" aria-hidden="true">#</a></h4>
             <div class="docs-demo columns">
@@ -264,9 +275,6 @@
 <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 class="docs-ad docs-ad-sidebar text-center">
-              <script id="_carbonads_js" async="" type="text/javascript" src="https://cdn.carbonads.com/carbon.js?serve=CK7DTKQW&amp;placement=picturepan2githubio"></script>
-            </div>
           </div>
           <div class="docs-footer container grid-lg" id="copyright">
             <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> · <a href="https://www.patreon.com/spectrecss" target="_blank">Patreon Sponsor</a> · Version <span class="version"></span></p>
diff --git a/docs/utilities/cursors.html b/docs/utilities/cursors.html
index a388eb0..80cb9dc 100644
--- a/docs/utilities/cursors.html
+++ b/docs/utilities/cursors.html
@@ -200,6 +200,17 @@
         <div class="docs-content" id="content">
           <div class="container" id="cursors">
             <h3 class="s-title">Cursor utilities<a class="anchor" href="#cursors" aria-hidden="true">#</a></h3>
+            <div class="docs-ad">
+              <div class="hide-md text-center">
+                <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>
+              <div class="show-md text-center">
+                <!-- GitHub-sm--><ins class="adsbygoogle" style="display:inline-block;width:300px;height:250px" data-ad-client="ca-pub-2225124559530218" data-ad-slot="9278881734"></ins>
+                <script>(adsbygoogle = window.adsbygoogle || []).push({});</script>
+              </div>
+            </div>
             <p>Cursor utilities specify which mouse cursor to display when mouseover.</p>
             <div class="docs-demo columns">
               <div class="column col-4">
@@ -234,9 +245,6 @@
 <span class="hljs-comment">&lt;!-- cursor: auto; --&gt;</span>
 <span class="hljs-tag">&lt;<span class="hljs-name">div</span> <span class="hljs-attr">class</span>=<span class="hljs-string">"c-auto"</span>&gt;</span><span class="hljs-tag">&lt;/<span class="hljs-name">div</span>&gt;</span>
 </code></pre>
-            <div class="docs-ad docs-ad-sidebar text-center">
-              <script id="_carbonads_js" async="" type="text/javascript" src="https://cdn.carbonads.com/carbon.js?serve=CK7DTKQW&amp;placement=picturepan2githubio"></script>
-            </div>
           </div>
           <div class="docs-footer container grid-lg" id="copyright">
             <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> · <a href="https://www.patreon.com/spectrecss" target="_blank">Patreon Sponsor</a> · Version <span class="version"></span></p>
diff --git a/docs/utilities/display.html b/docs/utilities/display.html
index 7d2ba59..e0d80cd 100644
--- a/docs/utilities/display.html
+++ b/docs/utilities/display.html
@@ -200,6 +200,17 @@
         <div class="docs-content" id="content">
           <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">
+              <div class="hide-md text-center">
+                <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>
+              <div class="show-md text-center">
+                <!-- GitHub-sm--><ins class="adsbygoogle" style="display:inline-block;width:300px;height:250px" data-ad-client="ca-pub-2225124559530218" data-ad-slot="9278881734"></ins>
+                <script>(adsbygoogle = window.adsbygoogle || []).push({});</script>
+              </div>
+            </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>
 <span class="hljs-tag">&lt;<span class="hljs-name">div</span> <span class="hljs-attr">class</span>=<span class="hljs-string">"d-block"</span>&gt;</span><span class="hljs-tag">&lt;/<span class="hljs-name">div</span>&gt;</span>
@@ -223,9 +234,6 @@
 <span class="hljs-comment">&lt;!-- assistive text for screen reader --&gt;</span>
 <span class="hljs-tag">&lt;<span class="hljs-name">div</span> <span class="hljs-attr">class</span>=<span class="hljs-string">"text-assistive"</span>&gt;</span><span class="hljs-tag">&lt;/<span class="hljs-name">div</span>&gt;</span>
 </code></pre>
-            <div class="docs-ad docs-ad-sidebar text-center">
-              <script id="_carbonads_js" async="" type="text/javascript" src="https://cdn.carbonads.com/carbon.js?serve=CK7DTKQW&amp;placement=picturepan2githubio"></script>
-            </div>
           </div>
           <div class="docs-footer container grid-lg" id="copyright">
             <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> · <a href="https://www.patreon.com/spectrecss" target="_blank">Patreon Sponsor</a> · Version <span class="version"></span></p>
diff --git a/docs/utilities/divider.html b/docs/utilities/divider.html
index 011053a..ae5d254 100644
--- a/docs/utilities/divider.html
+++ b/docs/utilities/divider.html
@@ -200,6 +200,17 @@
         <div class="docs-content" id="content">
           <div class="container" id="divider">
             <h3 class="s-title">Divider<a class="anchor" href="#divider" aria-hidden="true">#</a></h3>
+            <div class="docs-ad">
+              <div class="hide-md text-center">
+                <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>
+              <div class="show-md text-center">
+                <!-- GitHub-sm--><ins class="adsbygoogle" style="display:inline-block;width:300px;height:250px" data-ad-client="ca-pub-2225124559530218" data-ad-slot="9278881734"></ins>
+                <script>(adsbygoogle = window.adsbygoogle || []).push({});</script>
+              </div>
+            </div>
             <p>The Divider is used for separating elements.</p>
             <div class="docs-demo columns">
               <div class="column">
@@ -262,9 +273,6 @@
   <span class="hljs-tag">&lt;/<span class="hljs-name">div</span>&gt;</span>
 <span class="hljs-tag">&lt;/<span class="hljs-name">div</span>&gt;</span>
 </code></pre>
-            <div class="docs-ad docs-ad-sidebar text-center">
-              <script id="_carbonads_js" async="" type="text/javascript" src="https://cdn.carbonads.com/carbon.js?serve=CK7DTKQW&amp;placement=picturepan2githubio"></script>
-            </div>
           </div>
           <div class="docs-footer container grid-lg" id="copyright">
             <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> · <a href="https://www.patreon.com/spectrecss" target="_blank">Patreon Sponsor</a> · Version <span class="version"></span></p>
diff --git a/docs/utilities/loading.html b/docs/utilities/loading.html
index 550b2c0..d28304e 100644
--- a/docs/utilities/loading.html
+++ b/docs/utilities/loading.html
@@ -200,6 +200,17 @@
         <div class="docs-content" id="content">
           <div class="container" id="loading">
             <h3 class="s-title">Loading<a class="anchor" href="#loading" aria-hidden="true">#</a></h3>
+            <div class="docs-ad">
+              <div class="hide-md text-center">
+                <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>
+              <div class="show-md text-center">
+                <!-- GitHub-sm--><ins class="adsbygoogle" style="display:inline-block;width:300px;height:250px" data-ad-client="ca-pub-2225124559530218" data-ad-slot="9278881734"></ins>
+                <script>(adsbygoogle = window.adsbygoogle || []).push({});</script>
+              </div>
+            </div>
             <p>
               Loading indicator is used for loading or updating.
               You can add the <code>loading</code> class to a container for loading status.
@@ -219,9 +230,6 @@
 <span class="hljs-tag">&lt;<span class="hljs-name">div</span> <span class="hljs-attr">class</span>=<span class="hljs-string">"loading"</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">"loading loading-lg"</span>&gt;</span><span class="hljs-tag">&lt;/<span class="hljs-name">div</span>&gt;</span>
 </code></pre>
-            <div class="docs-ad docs-ad-sidebar text-center">
-              <script id="_carbonads_js" async="" type="text/javascript" src="https://cdn.carbonads.com/carbon.js?serve=CK7DTKQW&amp;placement=picturepan2githubio"></script>
-            </div>
           </div>
           <div class="docs-footer container grid-lg" id="copyright">
             <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> · <a href="https://www.patreon.com/spectrecss" target="_blank">Patreon Sponsor</a> · Version <span class="version"></span></p>
diff --git a/docs/utilities/position.html b/docs/utilities/position.html
index a89298e..ff9eb59 100644
--- a/docs/utilities/position.html
+++ b/docs/utilities/position.html
@@ -200,6 +200,17 @@
         <div class="docs-content" id="content">
           <div class="container" id="position">
             <h3 class="s-title">Position utilities<a class="anchor" href="#position" aria-hidden="true">#</a></h3>
+            <div class="docs-ad">
+              <div class="hide-md text-center">
+                <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>
+              <div class="show-md text-center">
+                <!-- GitHub-sm--><ins class="adsbygoogle" style="display:inline-block;width:300px;height:250px" data-ad-client="ca-pub-2225124559530218" data-ad-slot="9278881734"></ins>
+                <script>(adsbygoogle = window.adsbygoogle || []).push({});</script>
+              </div>
+            </div>
             <p>Position utilities are used for useful layout and position things, including clearfix, float, position and margin/padding utilities.</p>
             <pre class="code" data-lang="HTML"><code><span class="hljs-comment">&lt;!-- clear float --&gt;</span>
 <span class="hljs-tag">&lt;<span class="hljs-name">div</span> <span class="hljs-attr">class</span>=<span class="hljs-string">"clearfix"</span>&gt;</span><span class="hljs-tag">&lt;/<span class="hljs-name">div</span>&gt;</span>
@@ -237,9 +248,6 @@
 <span class="hljs-tag">&lt;<span class="hljs-name">div</span> <span class="hljs-attr">class</span>=<span class="hljs-string">"py-1"</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">"py-2"</span>&gt;</span><span class="hljs-tag">&lt;/<span class="hljs-name">div</span>&gt;</span>
 </code></pre>
-            <div class="docs-ad docs-ad-sidebar text-center">
-              <script id="_carbonads_js" async="" type="text/javascript" src="https://cdn.carbonads.com/carbon.js?serve=CK7DTKQW&amp;placement=picturepan2githubio"></script>
-            </div>
           </div>
           <div class="docs-footer container grid-lg" id="copyright">
             <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> · <a href="https://www.patreon.com/spectrecss" target="_blank">Patreon Sponsor</a> · Version <span class="version"></span></p>
diff --git a/docs/utilities/shapes.html b/docs/utilities/shapes.html
index 0cd178d..a9bccfe 100644
--- a/docs/utilities/shapes.html
+++ b/docs/utilities/shapes.html
@@ -200,6 +200,17 @@
         <div class="docs-content" id="content">
           <div class="container" id="shapes">
             <h3 class="s-title">Shape utilities<a class="anchor" href="#shapes" aria-hidden="true">#</a></h3>
+            <div class="docs-ad">
+              <div class="hide-md text-center">
+                <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>
+              <div class="show-md text-center">
+                <!-- GitHub-sm--><ins class="adsbygoogle" style="display:inline-block;width:300px;height:250px" data-ad-client="ca-pub-2225124559530218" data-ad-slot="9278881734"></ins>
+                <script>(adsbygoogle = window.adsbygoogle || []).push({});</script>
+              </div>
+            </div>
             <p>Shape utilities are used for changing element shapes.</p>
             <div class="docs-demo columns">
               <div class="column col-6 text-center">
@@ -214,9 +225,6 @@
 <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">"s-circle"</span>&gt;</span><span class="hljs-tag">&lt;/<span class="hljs-name">div</span>&gt;</span>
 </code></pre>
-            <div class="docs-ad docs-ad-sidebar text-center">
-              <script id="_carbonads_js" async="" type="text/javascript" src="https://cdn.carbonads.com/carbon.js?serve=CK7DTKQW&amp;placement=picturepan2githubio"></script>
-            </div>
           </div>
           <div class="docs-footer container grid-lg" id="copyright">
             <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> · <a href="https://www.patreon.com/spectrecss" target="_blank">Patreon Sponsor</a> · Version <span class="version"></span></p>
diff --git a/docs/utilities/text.html b/docs/utilities/text.html
index 42f930d..81d3575 100644
--- a/docs/utilities/text.html
+++ b/docs/utilities/text.html
@@ -200,6 +200,17 @@
         <div class="docs-content" id="content">
           <div class="container" id="text">
             <h3 class="s-title">Text utilities<a class="anchor" href="#text" aria-hidden="true">#</a></h3>
+            <div class="docs-ad">
+              <div class="hide-md text-center">
+                <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>
+              <div class="show-md text-center">
+                <!-- GitHub-sm--><ins class="adsbygoogle" style="display:inline-block;width:300px;height:250px" data-ad-client="ca-pub-2225124559530218" data-ad-slot="9278881734"></ins>
+                <script>(adsbygoogle = window.adsbygoogle || []).push({});</script>
+              </div>
+            </div>
             <p>Text utilities are used for text alignment, styles and overflow things.</p>
             <pre class="code" data-lang="HTML"><code><span class="hljs-comment">&lt;!-- left-aligned text --&gt;</span>
 <span class="hljs-tag">&lt;<span class="hljs-name">div</span> <span class="hljs-attr">class</span>=<span class="hljs-string">"text-left"</span>&gt;</span><span class="hljs-tag">&lt;/<span class="hljs-name">div</span>&gt;</span>
@@ -233,9 +244,6 @@
 <span class="hljs-comment">&lt;!-- Text may be broken at arbitrary points --&gt;</span>
 <span class="hljs-tag">&lt;<span class="hljs-name">div</span> <span class="hljs-attr">class</span>=<span class="hljs-string">"text-break"</span>&gt;</span><span class="hljs-tag">&lt;/<span class="hljs-name">div</span>&gt;</span>
 </code></pre>
-            <div class="docs-ad docs-ad-sidebar text-center">
-              <script id="_carbonads_js" async="" type="text/javascript" src="https://cdn.carbonads.com/carbon.js?serve=CK7DTKQW&amp;placement=picturepan2githubio"></script>
-            </div>
           </div>
           <div class="docs-footer container grid-lg" id="copyright">
             <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> · <a href="https://www.patreon.com/spectrecss" target="_blank">Patreon Sponsor</a> · Version <span class="version"></span></p>