Add index JS

diff --git a/docs/_includes/index/intro.html b/docs/_includes/index/intro.html
index 92b00607181d48ea99021bc3b706ffcaeac3d6e7..fbf6d23ce147a7ae4721f2f58e88800c9bba2aaa 100644 (file)
--- a/docs/_includes/index/intro.html
+++ b/docs/_includes/index/intro.html
@@ -36,8 +36,10 @@
 
         <div class="intro-column is-video">
           <div class="intro-video">
+            <div class="intro-shadow"></div>
+            <div class="intro-spinner"></div>
             <div class="intro-iframe">
-              <iframe src="https://player.vimeo.com/video/232485795?color=00d1b2" width="640" height="338" frameborder="0" webkitallowfullscreen mozallowfullscreen allowfullscreen></iframe>
+              <iframe id="introVimeo" src="https://player.vimeo.com/video/232485795?color=00d1b2" width="640" height="338" frameborder="0" webkitallowfullscreen mozallowfullscreen allowfullscreen></iframe>
             </div>
           </div>
         </div>

diff --git a/docs/_javascript/index.js b/docs/_javascript/index.js
index b56710dc3cb34276ff46a1edf76a695e62c13630..77c4650cc0455f29cfaf1d48c1f7bd6de8b32101 100644 (file)
--- a/docs/_javascript/index.js
+++ b/docs/_javascript/index.js
@@ -1,5 +1,35 @@
 document.addEventListener('DOMContentLoaded', () => {
 
+  // Intro
+
+  const introVimeo = document.getElementById('introVimeo');
+  const npmClipboard = new Clipboard('#npmCopy');
+
+  introVimeo.addEventListener('load', () => {
+    introVimeo.parentNode.parentNode.classList.add('has-loaded');
+  });
+
+  npmClipboard.on('success', function(e) {
+    e.trigger.innerText = 'copied!';
+    e.trigger.classList.add('is-success');
+    setTimeout(() => {
+      e.trigger.innerText = 'copy';
+      e.trigger.classList.remove('is-success');
+    }, 500);
+    e.clearSelection();
+  });
+
+  npmClipboard.on('error', function(e) {
+    e.trigger.innerText = 'error!';
+    e.trigger.classList.add('is-error');
+    setTimeout(() => {
+      e.trigger.innerText = 'copy';
+      e.trigger.classList.remove('is-error');
+    }, 500);
+  });
+
+  // Grid
+
   const $grid = document.getElementById('grid');
   const $columns = Array.prototype.slice.call(document.querySelectorAll('#grid > .column'), 0);
   const $markup = document.querySelector('#markup code');

diff --git a/docs/_javascript/main.js b/docs/_javascript/main.js
index 5a23496dc04302a89711a4c6e8a795f46dcc4479..d0fb65d030bcc44593855c480e910a3bbccb5e60 100644 (file)
--- a/docs/_javascript/main.js
+++ b/docs/_javascript/main.js
@@ -158,31 +158,6 @@ document.addEventListener('DOMContentLoaded', () => {
     }
   });
 
-  var npmClipboard = new Clipboard('#npmCopy');
-
-  npmClipboard.on('onclick', function(e) {
-    console.log('CLICK');
-  });
-
-  npmClipboard.on('success', function(e) {
-    e.trigger.innerText = 'copied!';
-    e.trigger.classList.add('is-success');
-    setTimeout(() => {
-      e.trigger.innerText = 'copy';
-      e.trigger.classList.remove('is-success');
-    }, 500);
-    e.clearSelection();
-  });
-
-  npmClipboard.on('error', function(e) {
-    e.trigger.innerText = 'error!';
-    e.trigger.classList.add('is-error');
-    setTimeout(() => {
-      e.trigger.innerText = 'copy';
-      e.trigger.classList.remove('is-error');
-    }, 500);
-  });
-
   // Functions
 
   function getAll(selector) {

diff --git a/docs/_sass/index.sass b/docs/_sass/index.sass
index f433110b9f06f38648333481d7ec2b29d44e8f06..be84f3e90fcf4cc94d6a75b030ff85f0f77f80f2 100644 (file)
--- a/docs/_sass/index.sass
+++ b/docs/_sass/index.sass
@@ -58,14 +58,64 @@
     padding-right: 1.375em
 
 .intro-video
-  background-color: lavender
+  background-color: $white
   margin-left: auto
   margin-right: auto
   max-width: 640px
   position: relative
+  &.has-loaded
+    .intro-spinner
+      display: none
+    .intro-iframe
+      opacity: 1
+
+@keyframes introSpinner
+  from
+    opacity: 0
+    transform: scale(1.14)
+  to
+    opacity: 1
+    transform: scale(1)
+
+.intro-spinner,
+.intro-shadow
+  animation-duration: 1000ms
+  animation-easing-function: ease-out
+  animation-fill-mode: both
+  transform-origin: center
+
+.intro-spinner
+  +overlay
+  animation-name: introSpinner
+  &::before
+    +loader
+    border-bottom-color: $primary
+    border-left-color: $primary
+    height: 1.5em
+    left: calc(50% - 0.75em)
+    position: absolute
+    top: calc(50% - 0.75em)
+    width: 1.5em
+
+@keyframes introShadow
+  from
+    opacity: 0
+    transform: scale(0.86)
+  to
+    opacity: 1
+    transform: scale(1)
+
+.intro-shadow
+  +overlay
+  box-shadow: 0 1.5rem 3rem rgba(#000, 0.2)
+  animation-name: introShadow
 
 .intro-iframe
+  opacity: 0
   padding-top: 52.8125%
+  position: relative
+  transition-duration: 500ms
+  transition-property: opacity
   iframe
     height: 100%
     left: 0

diff --git a/docs/css/bulma-docs.css b/docs/css/bulma-docs.css
index 05d1d7e88288a5f57d631d4ed4589b409d743e97..95104ea70d13db1bade2bc4d8e9d47f518780352 100644 (file)
--- a/docs/css/bulma-docs.css
+++ b/docs/css/bulma-docs.css
@@ -9535,15 +9535,96 @@ svg {
 }
 
 .intro-video {
-  background-color: lavender;
+  background-color: white;
   margin-left: auto;
   margin-right: auto;
   max-width: 640px;
   position: relative;
 }
 
+.intro-video.has-loaded .intro-spinner {
+  display: none;
+}
+
+.intro-video.has-loaded .intro-iframe {
+  opacity: 1;
+}
+
+@keyframes introSpinner {
+  from {
+    opacity: 0;
+    transform: scale(1.14);
+  }
+  to {
+    opacity: 1;
+    transform: scale(1);
+  }
+}
+
+.intro-spinner,
+.intro-shadow {
+  animation-duration: 1000ms;
+  animation-easing-function: ease-out;
+  animation-fill-mode: both;
+  transform-origin: center;
+}
+
+.intro-spinner {
+  bottom: 0;
+  left: 0;
+  position: absolute;
+  right: 0;
+  top: 0;
+  animation-name: introSpinner;
+}
+
+.intro-spinner::before {
+  animation: spinAround 500ms infinite linear;
+  border: 2px solid #dbdbdb;
+  border-radius: 290486px;
+  border-right-color: transparent;
+  border-top-color: transparent;
+  content: "";
+  display: block;
+  height: 1em;
+  position: relative;
+  width: 1em;
+  border-bottom-color: #00d1b2;
+  border-left-color: #00d1b2;
+  height: 1.5em;
+  left: calc(50% - 0.75em);
+  position: absolute;
+  top: calc(50% - 0.75em);
+  width: 1.5em;
+}
+
+@keyframes introShadow {
+  from {
+    opacity: 0;
+    transform: scale(0.86);
+  }
+  to {
+    opacity: 1;
+    transform: scale(1);
+  }
+}
+
+.intro-shadow {
+  bottom: 0;
+  left: 0;
+  position: absolute;
+  right: 0;
+  top: 0;
+  box-shadow: 0 1.5rem 3rem rgba(0, 0, 0, 0.2);
+  animation-name: introShadow;
+}
+
 .intro-iframe {
+  opacity: 0;
   padding-top: 52.8125%;
+  position: relative;
+  transition-duration: 500ms;
+  transition-property: opacity;
 }
 
 .intro-iframe iframe {

diff --git a/docs/index.html b/docs/index.html
index 5ef6b6aa29ae853b9768b8ae3ed08bbceed1ae59..3ce22d32cf758f1aa5746f182ca1bd16d117dab5 100644 (file)
--- a/docs/index.html
+++ b/docs/index.html
@@ -23,7 +23,7 @@ route: index
           <span class="icon is-large" style="margin-right: 10px;">
             <i class="fa fa-3x fa-desktop"></i>
           </span>
-          <p class="title is-4" style="margin-top: 0.5em;"><strong>Responsive</strong></p>
+          <p class="title is-4" style="margin-top: 0.5em;"><strong>100% Responsive</strong></p>
           <p class="subtitle">Designed for <strong>mobile</strong> first</p>
         </a>
         <a class="column has-text-centered" href="{{ site.url }}/documentation/overview/modular/">

diff --git a/docs/lib/index.js b/docs/lib/index.js
index 2e659c1909d20ece35a667b0c1d420afcf860f20..2df84a6cb4abd45055c82ecbf51a14f23d0793f8 100644 (file)
--- a/docs/lib/index.js
+++ b/docs/lib/index.js
@@ -2,6 +2,36 @@
 
 document.addEventListener('DOMContentLoaded', function () {
 
+  // Intro
+
+  var introVimeo = document.getElementById('introVimeo');
+  var npmClipboard = new Clipboard('#npmCopy');
+
+  introVimeo.addEventListener('load', function () {
+    introVimeo.parentNode.parentNode.classList.add('has-loaded');
+  });
+
+  npmClipboard.on('success', function (e) {
+    e.trigger.innerText = 'copied!';
+    e.trigger.classList.add('is-success');
+    setTimeout(function () {
+      e.trigger.innerText = 'copy';
+      e.trigger.classList.remove('is-success');
+    }, 500);
+    e.clearSelection();
+  });
+
+  npmClipboard.on('error', function (e) {
+    e.trigger.innerText = 'error!';
+    e.trigger.classList.add('is-error');
+    setTimeout(function () {
+      e.trigger.innerText = 'copy';
+      e.trigger.classList.remove('is-error');
+    }, 500);
+  });
+
+  // Grid
+
   var $grid = document.getElementById('grid');
   var $columns = Array.prototype.slice.call(document.querySelectorAll('#grid > .column'), 0);
   var $markup = document.querySelector('#markup code');

diff --git a/docs/lib/main.js b/docs/lib/main.js
index 5f99148c7e4f9025deccb38ae60104b41e702f7b..a8969d1df39c2cadfb6794b9ad54f02a99db9cad 100644 (file)
--- a/docs/lib/main.js
+++ b/docs/lib/main.js
@@ -160,31 +160,6 @@ document.addEventListener('DOMContentLoaded', function () {
     }
   });
 
-  var npmClipboard = new Clipboard('#npmCopy');
-
-  npmClipboard.on('onclick', function (e) {
-    console.log('CLICK');
-  });
-
-  npmClipboard.on('success', function (e) {
-    e.trigger.innerText = 'copied!';
-    e.trigger.classList.add('is-success');
-    setTimeout(function () {
-      e.trigger.innerText = 'copy';
-      e.trigger.classList.remove('is-success');
-    }, 500);
-    e.clearSelection();
-  });
-
-  npmClipboard.on('error', function (e) {
-    e.trigger.innerText = 'error!';
-    e.trigger.classList.add('is-error');
-    setTimeout(function () {
-      e.trigger.innerText = 'copy';
-      e.trigger.classList.remove('is-error');
-    }, 500);
-  });
-
   // Functions
 
   function getAll(selector) {