mirror of
https://github.com/jgthms/bulma.git
synced 2024-11-14 11:14:24 +00:00
Add new intro
This commit is contained in:
Jeremy Thomas
parent
220ef99718
commit
be06c297dc
51
docs/_includes/index/intro.html
Normal file
51
docs/_includes/index/intro.html
Normal 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>
|
||||
@ -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) {
|
||||
|
||||
@ -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
|
||||
.intro-npm
|
||||
background: $black-ter
|
||||
border-radius: $radius-large
|
||||
color: $white
|
||||
display: flex
|
||||
font-size: 15px
|
||||
justify-content: space-between
|
||||
line-height: 20px
|
||||
padding: 15px 25px
|
||||
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
|
||||
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
|
||||
border-radius: 16px
|
||||
height: 160px
|
||||
width: 160px
|
||||
.intro-buttons
|
||||
.button
|
||||
display: flex
|
||||
width: 100%
|
||||
&.is-light
|
||||
margin-top: 0.5rem
|
||||
|
||||
#bulma
|
||||
animation: slideDown 500ms both
|
||||
// animation-delay: 1s
|
||||
|
||||
#modern-framework
|
||||
animation: slideUp 500ms both
|
||||
animation-delay: 0.2s
|
||||
|
||||
#npm
|
||||
+tablet
|
||||
.intro-title
|
||||
font-size: 2.25rem
|
||||
.intro-buttons
|
||||
align-items: center
|
||||
animation: fadeIn 500ms both
|
||||
animation-delay: 0.4s
|
||||
background: none
|
||||
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
|
||||
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
|
||||
border-radius: $radius-large
|
||||
box-shadow: 0 2px 3px rgba($black, 0.1), 0 0 0 1px rgba($black, 0.1)
|
||||
padding: 1.5rem
|
||||
.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
|
||||
@ -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
@ -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">
|
||||
|
||||
@ -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) {
|
||||
|
||||
Loading…
Reference in New Issue
Block a user