diff --git a/docs/_includes/index/intro.html b/docs/_includes/index/intro.html
index 92b00607..fbf6d23c 100644
--- a/docs/_includes/index/intro.html
+++ b/docs/_includes/index/intro.html
@@ -36,8 +36,10 @@
diff --git a/docs/_javascript/index.js b/docs/_javascript/index.js
index b56710dc..77c4650c 100644
--- 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 5a23496d..d0fb65d0 100644
--- 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 f433110b..be84f3e9 100644
--- 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 05d1d7e8..95104ea7 100644
--- 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 5ef6b6aa..3ce22d32 100644
--- a/docs/index.html
+++ b/docs/index.html
@@ -23,7 +23,7 @@ route: index
- Responsive
+ 100% Responsive
Designed for mobile first
diff --git a/docs/lib/index.js b/docs/lib/index.js
index 2e659c19..2df84a6c 100644
--- 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 5f99148c..a8969d1d 100644
--- 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) {