library-mirrors/bulma
1
0
Fork 0
mirror of https://github.com/jgthms/bulma.git synced 2024-10-17 09:04:18 +00:00
Code Issues Actions Packages Projects Releases Wiki Activity

Add intro video

Browse Source
This commit is contained in:
Jeremy Thomas 2017-10-11 17:25:33 +01:00
parent 512b97cf53
commit 1210e65f83
8 changed files with 1832 additions and 583 deletions
Show Stats Download Patch File Download Diff File Expand all files Collapse all files

1
docs/_includes/footer.html
View File

@ -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 %}

13
docs/_includes/index/intro.html
View File

File diff suppressed because one or more lines are too long

8
docs/_javascript/index.js
View File

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

23
docs/_sass/index.sass
View File

@ -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

2362
docs/css/bulma-docs.css
View File

File diff suppressed because it is too large Load Diff

BIN
docs/images/index/vimeo-placeholder-bis.jpg Normal file
View File

Binary file not shown.
Side by Side

After

Width:  |  Height:  |  Size: 5.6 KiB

BIN
docs/images/index/vimeo-placeholder.jpg
View File

Binary file not shown.
Side by Side Swipe Overlay

Before

Width:  |  Height:  |  Size: 4.9 KiB

After

Width:  |  Height:  |  Size: 5.8 KiB

8
docs/lib/index.js
View File

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