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

0.5.8

6 files changed, 30 insertions, 13 deletions

diff --git a/docs/src/experimentals/carousels.pug b/docs/src/experimentals/carousels.pug
index f6fb774..5dfe359 100644
--- a/docs/src/experimentals/carousels.pug
+++ b/docs/src/experimentals/carousels.pug
@@ -9,7 +9,7 @@ block variables
 block docs-content
   +docs-heading('carousels', 'Carousels')
     p
-      small.label.label-primary.mr-2 CSS ONLY
+      small.label.label-secondary CSS ONLY
 
     include ../_layout/_ad-g.pug
 
diff --git a/docs/src/experimentals/comparison.pug b/docs/src/experimentals/comparison.pug
index 527abd9..3252dcb 100644
--- a/docs/src/experimentals/comparison.pug
+++ b/docs/src/experimentals/comparison.pug
@@ -9,7 +9,7 @@ block variables
 block docs-content
   +docs-heading('comparison', 'Comparison sliders')
     p
-      small.label.label-primary.mr-2 CSS ONLY
+      small.label.label-secondary CSS ONLY
 
     include ../_layout/_ad-g.pug
 
diff --git a/docs/src/experimentals/filters.pug b/docs/src/experimentals/filters.pug
index d505c33..f49f213 100644
--- a/docs/src/experimentals/filters.pug
+++ b/docs/src/experimentals/filters.pug
@@ -9,7 +9,7 @@ block variables
 block docs-content
   +docs-heading('filters', 'Filters')
     p
-      small.label.label-primary.mr-2 CSS ONLY
+      small.label.label-secondary CSS ONLY
 
     include ../_layout/_ad-g.pug
 
diff --git a/docs/src/experimentals/off-canvas.pug b/docs/src/experimentals/off-canvas.pug
index cd8cfba..8d18e0b 100644
--- a/docs/src/experimentals/off-canvas.pug
+++ b/docs/src/experimentals/off-canvas.pug
@@ -9,7 +9,7 @@ block variables
 block docs-content
   +docs-heading('off-canvas', 'Off-canvas')
     p
-      small.label.label-primary.mr-2 CSS ONLY
+      small.label.label-secondary CSS ONLY
 
     include ../_layout/_ad-g.pug
 
diff --git a/docs/src/experimentals/parallax.pug b/docs/src/experimentals/parallax.pug
index 8637281..c52bb68 100644
--- a/docs/src/experimentals/parallax.pug
+++ b/docs/src/experimentals/parallax.pug
@@ -9,7 +9,7 @@ block variables
 block docs-content
   +docs-heading('parallax', 'Parallax')
     p
-      small.label.label-primary.mr-2 CSS ONLY
+      small.label.label-secondary CSS ONLY
 
     include ../_layout/_ad-g.pug
 
diff --git a/docs/src/experimentals/viewer-360.pug b/docs/src/experimentals/viewer-360.pug
index f17b786..5ab0384 100644
--- a/docs/src/experimentals/viewer-360.pug
+++ b/docs/src/experimentals/viewer-360.pug
@@ -9,7 +9,7 @@ block variables
 block docs-content
   +docs-heading('viewer-360', '360-Degree Viewer')
     p
-      small.label.label-primary.mr-2 CSS ONLY
+      small.label.label-secondary CSS ONLY
 
     include ../_layout/_ad-g.pug
 
@@ -20,17 +20,25 @@ block docs-content
       .column.col-12
         .viewer-360
           input.viewer-slider.slider(type="range" min="1" max="36" value="1" oninput="this.setAttribute('value', this.value);")
-          figure.viewer-image(style="background-image:url('https://i.loli.net/2018/11/25/5bfa45b4b3f27.jpg');")
+          figure.viewer-image(style="background-image:url('https://i.loli.net/2018/11/25/5bfa45b4b3f27.jpg');padding-bottom:37.5%;width:100%;")
 
-    p 
+    p.text-center
       | 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(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
 
-    p
-      | You will need to use your own product image sprite (all angle of photos in one image) and change the attribute #[code max] to use this component.
-    p
-      | The default image number in CSS is #[code 36]. You can change the image number by changing the variable #[code $image-number] in #[code _viewer-360.scss] and re-compiling the CSS.
+    .docs-demo.columns
+      .column.col-12
+        .viewer-360
+          input.viewer-slider.slider(type="range" min="1" max="36" value="1" oninput="this.setAttribute('value', this.value);")
+          figure.viewer-image(style="background-image:url('https://i.loli.net/2018/11/26/5bfc0ab4a5a4f.jpg');padding-bottom:37.5%;width:100%;")
 
+    p.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
+
+    p
+      | You will need to use your own product image sprite (all angle of photos in one image) and set the attribute #[code max] to the image numbers to use this component.
+    
     pre.code(data-lang='HTML')
       code
         :highlight(lang="html")
@@ -39,6 +47,15 @@ block docs-content
             <figure class="viewer-image" style="background-image:url('...');"></figure>
           </div>
 
+    p
+      | The default image numbers in CSS are #[code 36]. You can copy the mixin and add more numbers in #[code _viewer-360.scss] and re-compiling the CSS.
+
+    pre.code(data-lang='SCSS')
+      code
+        :highlight(lang="scss")
+          @include viewer-slider-size(36);
+          @include viewer-slider-size(30);
+
     include ../_layout/_ad-c.pug
 
   include ../_layout/_footer.pug
\ No newline at end of file