Add new intro

This commit is contained in:
Jeremy Thomas 2017-10-10 17:24:19 +01:00
parent 220ef99718
commit be06c297dc
7 changed files with 888 additions and 2196 deletions

View File

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

View File

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

View File

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

View File

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

File diff suppressed because it is too large Load Diff

View File

@ -7,40 +7,7 @@ route: index
{% include navbar.html id="Index" transparent=true boxed=true %}
</div>
<section class="hero is-medium has-text-centered">
<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>
{% include index/intro.html %}
<section class="hero is-primary">
<div class="hero-body">

View File

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