Summary Files Commits Branches @commit @diff @stats
path: root / docs / experimentals
diff options
context:
space:
mode:
Commit32a122385b3e78c532e770ff669798a2c8d36f66 (patch)
Author
 Yan Zhu <picturepan2@hotmail.com>
2019-05-01 12:30:46 +0800
Committer
 Yan Zhu <picturepan2@hotmail.com>
2019-05-01 12:30:46 +0800
Filesfb1667dab4fbb14a9b1a278baf0a3b5d4ae0c6be /docs/experimentals
Spectre-Dark-Gruvbox-32a122385b3e78c532e770ff669798a2c8d36f66.tar
Spectre-Dark-Gruvbox-32a122385b3e78c532e770ff669798a2c8d36f66.tar.gz
Spectre-Dark-Gruvbox-32a122385b3e78c532e770ff669798a2c8d36f66.zip
Parentc19a27e40d2a7050345824f6568516351d2b9730 (diff)
Remove fucking Carbon Ads
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>