Add intro video

docs/_includes/footer.html

@@ -111,6 +111,7 @@
 <script src="{{ site.url }}/lib/main.js"></script>
 
 {% if page.route == 'index' %}
+  <script src="https://player.vimeo.com/api/player.js"></script>
   <script type="text/javascript" src="{{ site.url }}/lib/index.js"></script>
 {% endif %}
 

docs/_javascript/index.js

@@ -2,11 +2,13 @@ document.addEventListener('DOMContentLoaded', () => {
 
   // Intro
 
-  const introVimeo = document.getElementById('introVimeo');
+  const introVideo = document.getElementById('introVideo');
+  const introIframe = document.getElementById('introIframe');
+  const introPlayer = new Vimeo.Player(introIframe);
   const npmClipboard = new Clipboard('#npmCopy');
 
-  introVimeo.addEventListener('load', () => {
-    introVimeo.parentNode.parentNode.classList.add('has-loaded');
+  introPlayer.ready().then(function() {
+    introVideo.classList.add('has-loaded');
   });
 
   npmClipboard.on('success', function(e) {

docs/_sass/index.sass

@@ -11,6 +11,8 @@
 
 .intro-ghbtns
   height: 30px
+  margin-bottom: 24px
+  // margin-bottom: 46px
 
 .intro-npm
   background: $black-ter
@@ -79,7 +81,7 @@
 
 .intro-spinner,
 .intro-shadow
-  animation-duration: 1000ms
+  animation-duration: 500ms
   animation-easing-function: ease-out
   animation-fill-mode: both
   transform-origin: center
@@ -107,8 +109,7 @@
 
 .intro-shadow
   +overlay
-  background-color: #43647b
-  background-image: url("/images/index/vimeo-placeholder.jpg")
+  background-color: #776e70
   background-position: center center
   background-repeat: no-repeat
   background-size: cover
@@ -118,6 +119,7 @@
 .intro-iframe
   opacity: 0
   padding-top: 52.8125%
+  // padding-top: 56.25%
   position: relative
   transition-duration: 500ms
   transition-property: opacity
@@ -128,6 +130,21 @@
     top: 0
     width: 100%
 
+.intro-author
+  color: $text-light
+  font-size: $size-small
+  margin-top: 1rem
+  text-align: center
+  a
+    color: $text-strong
+    &:hover
+      text-decoration: underline
+  span
+    opacity: 0.5
+    transition: 100ms opacity
+    &:hover
+      opacity: 1
+
 +mobile
   .intro-buttons
     .button

docs/lib/index.js

@@ -4,11 +4,13 @@ document.addEventListener('DOMContentLoaded', function () {
 
   // Intro
 
-  var introVimeo = document.getElementById('introVimeo');
+  var introVideo = document.getElementById('introVideo');
+  var introIframe = document.getElementById('introIframe');
+  var introPlayer = new Vimeo.Player(introIframe);
   var npmClipboard = new Clipboard('#npmCopy');
 
-  introVimeo.addEventListener('load', function () {
-    introVimeo.parentNode.parentNode.classList.add('has-loaded');
+  introPlayer.ready().then(function () {
+    introVideo.classList.add('has-loaded');
   });
 
   npmClipboard.on('success', function (e) {