Add index JS

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>

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');

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) {

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

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 {

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/">

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');

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) {