Merge pull request #551 from picturepan2/0.5.8 v0.5.8

0.5.8

1 files changed, 20 insertions, 9 deletions

diff --git a/docs/experimentals/viewer-360.html b/docs/experimentals/viewer-360.html
index 394db70..065bd36 100644
--- a/docs/experimentals/viewer-360.html
+++ b/docs/experimentals/viewer-360.html
@@ -31,7 +31,7 @@
       </div>
       <div class="docs-sidebar off-canvas-sidebar" id="sidebar">
         <div class="docs-brand"><a class="docs-logo" href="../index.html"><img src="../img/spectre-logo.svg" alt="Spectre.css CSS Framework">
-            <h2>SPECTRE</h2></a>
+            <h2>SPECTRE</h2><small class="label label-secondary text-bold">DOCS</small></a>
         </div>
         <div class="docs-nav">
           <div class="accordion-container">
@@ -64,7 +64,7 @@
                   </li>
                   <li class="menu-item"><a href="../elements/forms.html">Forms</a>
                   </li>
-                  <li class="menu-item"><a href="../elements/icons.html">Icons</a>
+                  <li class="menu-item"><a href="../elements/icons.html">Icons.css</a>
                   </li>
                   <li class="menu-item"><a href="../elements/labels.html">Labels</a>
                   </li>
@@ -200,7 +200,7 @@
         <div class="docs-content" id="content">
           <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-primary mr-2">CSS ONLY</small></p>
+            <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>
@@ -217,25 +217,36 @@
               <div class="column col-12">
                 <div class="viewer-360">
                   <input class="viewer-slider slider" type="range" min="1" max="36" value="1" oninput="this.setAttribute('value', this.value);">
-                  <figure class="viewer-image" style="background-image:url('https://i.loli.net/2018/11/25/5bfa45b4b3f27.jpg');"></figure>
+                  <figure class="viewer-image" style="background-image:url('https://i.loli.net/2018/11/25/5bfa45b4b3f27.jpg');padding-bottom:37.5%;width:100%;"></figure>
                 </div>
               </div>
             </div>
-            <p>
-               Photo credits: <a href="https://microsoft.msafflnk.net/c/1272791/433017/7593?u=https%3A%2F%2Fwww.microsoft.com%2Fen-us%2Fp%2Fsurface-pro-6%2F8zcnc665slq5" target="_blank">Microsoft Surface Pro 6</a></p>
-            <p>You will need to use your own product image sprite (all angle of photos in one image) and change the attribute <code>max</code> to use this component.</p>
-            <p>The default image number in CSS is <code>36</code>. You can change the image number by changing the variable <code>$image-number</code> in <code>_viewer-360.scss</code> and re-compiling the CSS.</p>
+            <p class="text-center">Photo credits: <a href="https://microsoft.msafflnk.net/c/1272791/433017/7593?u=https://www.microsoft.com/en-us/p/surface-pro-6/8zcnc665slq5" target="_blank">Microsoft Surface Pro 6</a></p>
+            <div class="docs-demo columns">
+              <div class="column col-12">
+                <div class="viewer-360">
+                  <input class="viewer-slider slider" type="range" min="1" max="36" value="1" oninput="this.setAttribute('value', this.value);">
+                  <figure class="viewer-image" style="background-image:url('https://i.loli.net/2018/11/26/5bfc0ab4a5a4f.jpg');padding-bottom:37.5%;width:100%;"></figure>
+                </div>
+              </div>
+            </div>
+            <p class="text-center">Photo credits: <a href="https://microsoft.msafflnk.net/c/1272791/433017/7593?u=https://www.microsoft.com/en-us/p/surface-studio-2/8SBJXM0M58T4" target="_blank">Microsoft Xbox One X</a></p>
+            <p>You will need to use your own product image sprite (all angle of photos in one image) and set the attribute <code>max</code> to the image numbers to use this component.</p>
             <pre class="code" data-lang="HTML"><code><span class="hljs-tag">&lt;<span class="hljs-name">div</span> <span class="hljs-attr">class</span>=<span class="hljs-string">"viewer-360"</span>&gt;</span>
   <span class="hljs-tag">&lt;<span class="hljs-name">input</span> <span class="hljs-attr">class</span>=<span class="hljs-string">"viewer-slider slider"</span> <span class="hljs-attr">type</span>=<span class="hljs-string">"range"</span> <span class="hljs-attr">min</span>=<span class="hljs-string">"1"</span> <span class="hljs-attr">max</span>=<span class="hljs-string">"36"</span> <span class="hljs-attr">value</span>=<span class="hljs-string">"1"</span> <span class="hljs-attr">oninput</span>=<span class="hljs-string">"this.setAttribute('value', this.value);"</span>&gt;</span>
   <span class="hljs-tag">&lt;<span class="hljs-name">figure</span> <span class="hljs-attr">class</span>=<span class="hljs-string">"viewer-image"</span> <span class="hljs-attr">style</span>=<span class="hljs-string">"background-image:url('...');"</span>&gt;</span><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>
+            <p>The default image numbers in CSS are <code>36</code>. You can copy the mixin and add more numbers in <code>_viewer-360.scss</code> and re-compiling the CSS.</p>
+            <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="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>
+            <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>
             <p>Designed and built with <span class="text-error">&hearts;</span> by <a href="https://twitter.com/picturepan2" target="_blank">Yan Zhu</a>. Licensed under the <a href="https://github.com/picturepan2/spectre/blob/master/LICENSE" target="_blank">MIT License</a>.</p>
           </div>
         </div>