diff --git a/themes/vue/layout/icons/github-dark.ejs b/themes/vue/layout/icons/github-dark.ejs
new file mode 100644
index 000000000..eb71a11da
--- /dev/null
+++ b/themes/vue/layout/icons/github-dark.ejs
@@ -0,0 +1 @@
+
diff --git a/themes/vue/layout/icons/github.ejs b/themes/vue/layout/icons/github.ejs
index c31a43034..c39684631 100644
--- a/themes/vue/layout/icons/github.ejs
+++ b/themes/vue/layout/icons/github.ejs
@@ -1 +1 @@
-
+
diff --git a/themes/vue/layout/icons/medium.ejs b/themes/vue/layout/icons/medium.ejs
index 69830cd49..56ee7d82a 100644
--- a/themes/vue/layout/icons/medium.ejs
+++ b/themes/vue/layout/icons/medium.ejs
@@ -1 +1 @@
-
+
diff --git a/themes/vue/layout/icons/play.ejs b/themes/vue/layout/icons/play.ejs
new file mode 100644
index 000000000..b2500f89c
--- /dev/null
+++ b/themes/vue/layout/icons/play.ejs
@@ -0,0 +1 @@
+
diff --git a/themes/vue/layout/icons/twitter.ejs b/themes/vue/layout/icons/twitter.ejs
index e264029fe..24ac3ba4e 100644
--- a/themes/vue/layout/icons/twitter.ejs
+++ b/themes/vue/layout/icons/twitter.ejs
@@ -1 +1 @@
-
+
diff --git a/themes/vue/layout/index.ejs b/themes/vue/layout/index.ejs
index 829843580..24471ecfb 100644
--- a/themes/vue/layout/index.ejs
+++ b/themes/vue/layout/index.ejs
@@ -16,8 +16,13 @@
The Progressive
JavaScript Framework
- ">はじめる
- GITHUB
+
+ <%- partial('icons/play') %>
+ なぜ VUE.JS ?
+ ">はじめる
+
+ <%- partial('icons/github-dark') %>
+ GITHUB
@@ -78,6 +83,10 @@
Copyright © 2014-<%- new Date().getFullYear() %> Evan You
+
+
+
+
+
>
diff --git a/themes/vue/source/css/_common.styl b/themes/vue/source/css/_common.styl
index cdf771a95..8364b0923 100644
--- a/themes/vue/source/css/_common.styl
+++ b/themes/vue/source/css/_common.styl
@@ -57,9 +57,21 @@ a.button
transition: all .15s ease
box-sizing: border-box
border: 1px solid lighten($green, 8%)
+ &.has-icon
+ position: relative
+ text-indent: 1.4em;
+ > svg
+ position: absolute
+ left: 0.4em
+ top: 0.4em
+ width: 2em
&.white
background-color: #fff
color: $green
+ &.gray
+ background-color: #f6f6f6
+ color: $light
+ border-color: #f6f6f6
.highlight
overflow-x: auto
diff --git a/themes/vue/source/css/_modal.styl b/themes/vue/source/css/_modal.styl
new file mode 100644
index 000000000..74592ae44
--- /dev/null
+++ b/themes/vue/source/css/_modal.styl
@@ -0,0 +1,29 @@
+.modal
+ box-sizing: border-box
+ display: none
+ position: fixed
+ width: 80%
+ height: auto
+ padding: .5em
+ background-color: #f9f9f9
+ box-shadow: 0 0 10px rgba(0,0,0,.2)
+ z-index: 11
+ &.open
+ display: block
+ top: 50%
+ left: 50%
+ transform: translate(-50%, -50%)
+.overlay
+ position: fixed
+ top: 0
+ bottom: 0
+ left: 0
+ right: 0
+ background: rgba(0,0,0,.2)
+ z-index: 10
+.stop-scroll
+ overflow: hidden
+ height: 100%
+@media screen and (max-width: 400px)
+ .modal
+ width: 98%
diff --git a/themes/vue/source/css/index.styl b/themes/vue/source/css/index.styl
index ab71fc7d1..92ffa21f3 100644
--- a/themes/vue/source/css/index.styl
+++ b/themes/vue/source/css/index.styl
@@ -2,6 +2,7 @@
@import "_header"
@import "_sidebar"
@import "_sponsor"
+@import "_modal"
$width = 900px
$space = 40px
@@ -29,7 +30,7 @@ body
padding: $space 40px 30px
background-color: #fff
.inner
- max-width: $width
+ max-width: $width * 1.4
margin: 0 auto
.left, .right
display: inline-block
@@ -60,8 +61,8 @@ body
letter-spacing: .1em
min-width: 8em
text-align: center
- &:first-child
- margin-right: 1em
+ &:not(:last-child)
+ margin-right: 1%
.social-buttons
list-style-type: none
padding: 0
diff --git a/themes/vue/source/js/common.js b/themes/vue/source/js/common.js
index c777e09bc..ff1bac087 100644
--- a/themes/vue/source/js/common.js
+++ b/themes/vue/source/js/common.js
@@ -1,5 +1,6 @@
(function () {
initMobileMenu()
+ initVideoModal()
if (PAGE_TYPE) {
initVersionSelect()
initSubHeaders()
@@ -132,6 +133,37 @@
})
}
+ /**
+ * Modal Video Player
+ */
+ function initVideoModal () {
+ if (typeof Vimeo === 'undefined') return
+
+ var modalButton = document.getElementById('modal-player')
+ var videoModal = document.getElementById('video-modal')
+ var iframe = document.querySelector('iframe');
+ var player = new Vimeo.Player(iframe);
+ var overlay = document.createElement('div')
+ overlay.className = 'overlay'
+
+
+ modalButton.addEventListener('click', function() {
+ videoModal.classList.toggle('open')
+ document.body.classList.toggle('stop-scroll')
+ document.body.appendChild(overlay)
+ player.play()
+ })
+
+ document.body.addEventListener('click', function(e) {
+ if (e.target !== modalButton && !videoModal.contains(e.target)) {
+ videoModal.classList.remove('open')
+ document.body.classList.remove('stop-scroll')
+ document.body.removeChild(overlay)
+ player.unload()
+ }
+ })
+ }
+
/**
* Doc version select
*/