Add new intro

docs/_includes/index/intro.html

@@ -0,0 +1,51 @@
+<section class="hero is-medium intro">
+  <div class="hero-body">
+    <div class="container">
+      <div class="intro-columns">
+        <div class="intro-column is-content">
+          <div class="intro-content">
+            <h1 class="title intro-title">
+              <strong>Bulma</strong> is a free and open source <strong>CSS</strong> framework based on <strong>Flexbox</strong>.
+            </h1>
+
+            <div id="ghbtns" class="intro-ghbtns block">
+              <iframe src="https://ghbtns.com/github-btn.html?user=jgthms&repo=bulma&type=star&count=true&size=large" frameborder="0" scrolling="0" width="160px" height="30px"></iframe>
+              <iframe src="https://ghbtns.com/github-btn.html?user=jgthms&repo=bulma&type=fork&count=false&size=large" frameborder="0" scrolling="0" width="80px" height="30px"></iframe>
+            </div>
+
+            {% assign npmInstall = 'npm install bulma' %}
+
+            <pre id="npm" class="intro-npm"><code>{{ npmInstall }}</code><code id="npmCopy" class="intro-npm-copy" data-clipboard-text="{{ npmInstall }}">copy</code></pre>
+
+            <nav class="intro-buttons">
+              <a class="button is-primary is-large" href="{{ site.download }}">
+                <span>
+                  <strong>Download</strong>
+                  <small>v{{ site.version }}</small>
+                </span>
+              </a>
+              <a class="button is-light is-large" href="{{ site.documentation }}">
+                <span>
+                  <span>View</span>
+                  <strong>docs</strong>
+                </span>
+              </a>
+            </nav>
+          </div>
+        </div>
+
+        <div class="intro-column is-video">
+          <div class="intro-video">
+            <div class="intro-iframe">
+              <iframe src="https://player.vimeo.com/video/232485795?color=00d1b2" width="640" height="338" frameborder="0" webkitallowfullscreen mozallowfullscreen allowfullscreen></iframe>
+            </div>
+          </div>
+        </div>
+      </div>
+
+      <div class="intro-carbon">
+        {% include carbon.html %}
+      </div>
+    </div>
+  </div>
+</section>

docs/_javascript/main.js

@@ -158,6 +158,31 @@ 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

@@ -1,148 +1,112 @@
-@keyframes floatUp
+.intro-content
-  0%
+  margin-left: auto
-    box-shadow: 0 0 0 rgba($black, 0), 0 0 0 rgba($black, 0), 0 0 0 rgba($black, 0)
+  margin-right: auto
-    transform: scale(0.86)
+  max-width: 440px
-  67%
-    box-shadow: 0 0 0 rgba($black, 0), 0 5px 10px rgba($black, 0.1), 0 1px 1px rgba($black, 0.2)
-    transform: scale(1)
-  100%
-    box-shadow: 0 20px 60px rgba($black, 0.05), 0 5px 10px rgba($black, 0.1), 0 1px 1px rgba($black, 0.2)
-    transform: scale(1)
 
-@keyframes strokePath
+.intro-title
-  from
+  font-weight: $weight-normal
-    stroke-dashoffset: 880
+  line-height: 1.375
-  to
+  strong
-    stroke-dashoffset: 0
+    font-weight: $weight-semibold
 
-@keyframes fadeIn
+.intro-ghbtns
-  from
+  height: 30px
-    opacity: 0
-    transform: scale(0.86)
-  to
-    opacity: 1
-    transform: scale(1)
 
-@keyframes fadeOut
+.intro-npm
-  0%
+  background: $black-ter
-    opacity: 1
+  border-radius: $radius-large
-    transform: scale(0.86)
+  color: $white
-  67%
+  display: flex
-    opacity: 1
+  font-size: 15px
-    transform: scale(0.86)
+  justify-content: space-between
-  100%
+  line-height: 20px
-    opacity: 0
+  padding: 15px 25px
-    transform: scale(1)
-
-@keyframes slideDown
-  0%
-    opacity: 0
-    transform: translateY(-10px)
-  100%
-    opacity: 1
-    transform: translateY(0)
-
-@keyframes slideUp
-  0%
-    opacity: 0
-    transform: translateY(10px)
-  100%
-    opacity: 1
-    transform: translateY(0)
-
-$curve: cubic-bezier(0, 0.71, 0.29, 1)
-
-#b
-  // animation-delay: 1s
-  animation-duration: 1.5s
-  animation-fill-mode: both
-  animation-name: floatUp
-  animation-timing-function: $curve
-  border-radius: 24px
-  display: inline-block
-  height: 240px
-  margin-bottom: 40px
   position: relative
-  vertical-align: top
+  code
-  width: 240px
+    font-size: inherit
-  svg
+    -moz-osx-font-smoothing: grayscale
-    +overlay
+    -webkit-font-smoothing: antialiased
-    display: block
+  .intro-npm-copy
-    height: 240px
+    border-radius: $radius
-    width: 240px
+    color: $yellow
-    &:first-child
+    cursor: pointer
-      animation-duration: 1.5s
+    margin: -2px -7px -3px
-      animation-fill-mode: both
+    padding: 2px 7px 3px
-      animation-name: fadeOut
+    &:hover
-      animation-timing-function: $curve
+      background-color: $yellow
-      g
+      color: $black-ter
-        animation-duration: 1s
+    &.is-success,
-        animation-fill-mode: both
+    &.is-error
-        animation-name: strokePath
+      color: $white
-        animation-timing-function: $curve
+      pointer-events: none
-        fill: none
+      text-decoration: none
-        stroke: $turquoise
+    &.is-success
-        stroke-dasharray: 880
+      background-color: $green
-        stroke-width: 2px
+    &.is-error
-    &:last-child
+      background-color: $red
-      animation-delay: 1s
+  \::-moz-selection
-      animation-duration: 1s
+    background: $yellow
-      animation-fill-mode: both
+    color: $black-ter
-      animation-name: fadeIn
+  \::selection
-      animation-timing-function: $curve
+    background: $yellow
-      g
+    color: $black-ter
-        fill: $turquoise
+
+.intro-buttons
+  margin-top: 1.5rem
+  .button
+    padding-left: 1.375em
+    padding-right: 1.375em
+
+.intro-video
+  background-color: lavender
+  margin-left: auto
+  margin-right: auto
+  max-width: 640px
+  position: relative
+
+.intro-iframe
+  padding-top: 52.8125%
+  iframe
+    height: 100%
+    left: 0
+    position: absolute
+    top: 0
+    width: 100%
+
 +mobile
-    border-radius: 16px
+  .intro-buttons
-    height: 160px
+    .button
-    width: 160px
+      display: flex
+      width: 100%
+      &.is-light
+        margin-top: 0.5rem
 
-#bulma
++tablet
-  animation: slideDown 500ms both
+  .intro-title
-  // animation-delay: 1s
+    font-size: 2.25rem
-
+  .intro-buttons
-#modern-framework
-  animation: slideUp 500ms both
-  animation-delay: 0.2s
-
-#npm
     align-items: center
-  animation: fadeIn 500ms both
+    display: flex
-  animation-delay: 0.4s
+    justify-content: space-between
-  background: none
+
++touch
+  .intro-column.is-video,
+  .intro-carbon
+    margin-top: 1.5rem
+
++desktop
+  .intro-columns
     display: flex
     justify-content: center
-  margin: -10px 0 20px
+  .intro-column
-  code
+    width: calc(50% - 1.5rem)
-    background: $background
+    &.is-content
-    border-radius: $radius
+      margin-right: 1.5rem
-    color: $primary
+    &.is-video
-    display: inline-block
+      margin-left: 1.5rem
-    font-size: 16px
+  .intro-title
-    padding: 16px 32px
+    margin-top: -11px
-
+    &:not(:last-child)
-#ghbtns
+      margin-bottom: 20px
-  animation: slideDown 500ms both
+  .intro-carbon
-  animation-delay: 0.6s
+    margin-top: 3rem
-
-html.route-index #carbon
-  animation: slideUp 500ms both
-  animation-delay: 0.8s
-
-#download
-  animation: fadeIn 500ms both
-  animation-delay: 1s
-
-#grid
-  .notification
-    padding-left: 0
-    padding-right: 0
-
-#message
-  display: none
-
-#tweet
-  background: $white
-  border-radius: $radius-large
-  box-shadow: 0 2px 3px rgba($black, 0.1), 0 0 0 1px rgba($black, 0.1)
-  padding: 1.5rem

docs/_sass/override.sass

@@ -1,13 +1,3 @@
-.button
-  +tablet
-    small
-      color: $text
-      left: 0
-      margin-top: 10px
-      position: absolute
-      top: 100%
-      width: 100%
-
 .content
   .highlighter-rouge
     &:not(:last-child)

docs/index.html

@@ -7,40 +7,7 @@ route: index
   {% include navbar.html id="Index" transparent=true boxed=true %}
 </div>
 
-<section class="hero is-medium has-text-centered">
+{% include index/intro.html %}
-  <div class="hero-body">
-    <div class="container">
-      <p id="b">
-        {% include svg/bulma-icon.svg %}
-        {% include svg/bulma-icon.svg %}
-      </p>
-      <h1 id="bulma" class="title">
-        Bulma
-      </h1>
-      <h2 id="modern-framework" class="subtitle">
-        A <strong>modern</strong> CSS framework based on <strong>Flexbox</strong>
-      </h2>
-      <pre id="npm"><code>npm install bulma</code></pre>
-      <div id="ghbtns" class="block">
-        <iframe src="https://ghbtns.com/github-btn.html?user=jgthms&repo=bulma&type=star&count=true&size=large" frameborder="0" scrolling="0" width="160px" height="30px"></iframe>
-        <iframe src="https://ghbtns.com/github-btn.html?user=jgthms&repo=bulma&type=fork&count=false&size=large" frameborder="0" scrolling="0" width="80px" height="30px"></iframe>
-      </div>
-      {% include carbon.html %}
-      <p id="download" class="hero-buttons">
-        <a class="button is-primary is-large" href="{{ site.download }}">
-          <span class="icon">
-            <i class="fa fa-download"></i>
-          </span>
-          <span>Download</span>
-          <small>v{{ site.version }}</small>
-        </a>
-        <a class="button is-large" href="{{ site.documentation }}">
-          View docs
-        </a>
-      </p>
-    </div>
-  </div>
-</section>
 
 <section class="hero is-primary">
   <div class="hero-body">

docs/lib/main.js

@@ -160,6 +160,31 @@ 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) {