1
0
mirror of https://github.com/bigchaindb/site.git synced 2024-12-24 02:16:10 +01:00

add existing content, all new components

This commit is contained in:
Matthias Kretschmann 2015-12-20 18:03:44 +01:00
parent e27d0a6bed
commit 5b5771e2bb
17 changed files with 722 additions and 43 deletions

Binary file not shown.

After

Width:  |  Height:  |  Size: 1.3 MiB

Binary file not shown.

After

Width:  |  Height:  |  Size: 1.1 MiB

View File

@ -3,6 +3,8 @@
//=include ../../../node_modules/jquery/dist/jquery.js
//=include bigchain/analytics.js
//=include bigchain/forms.js
//=include bigchain/smoothscroll.js
jQuery(function($) {
@ -10,5 +12,7 @@ jQuery(function($) {
// init modules
//
GoogleAnalytics.init();
Forms.init();
SmoothScroll.init();
});

View File

@ -0,0 +1,55 @@
//=include ../../../../node_modules/parsleyjs/dist/parsley.js
var Forms = (function(w, d) {
'use strict'
var app, _private, _config
// workaround for blog
var $ = jQuery
_config = {
form: $('form'),
parsleyForm: $('form.js-parsley')
}
_private = {
formValidation: function() {
// kick in Parsley.js but only if its js is present
// and form has `js-parsley` class
if ( window.Parsley && _config.form.hasClass('js-parsley') ) {
_config.parsleyForm.parsley({
trigger: 'change'
})
}
},
formEmptyValidation: function() {
_config.form.find('.form-control').each(function() {
if ($(this).val() == '') {
$(this).addClass('is-empty')
}
$(this).blur(function() {
if ($(this).val() == '') {
$(this).addClass('is-empty')
} else {
$(this).removeClass('is-empty')
}
})
})
}
}
app = {
init: function() {
_private.formValidation()
_private.formEmptyValidation()
}
}
return app
})(window, document)

View File

@ -0,0 +1,81 @@
var SmoothScroll = (function(w, d) {
'use strict';
var app, _private, _config;
// workaround for blog
var $ = jQuery;
_config = {
win: $(window)
},
_private = {
scrollToTarget: function() {
// Check window width helper
function isWide() {
return _config.win.width() >= _config.minWidth;
}
$('a[href*=#]:not([href=#]):not(.nav-tabs a[href*=#])').click(function(e) {
if (location.pathname.replace(/^\//,'') == this.pathname.replace(/^\//,'') && location.hostname == this.hostname) {
var target = $(this.hash);
target = target.length ? target : $('[name=' + this.hash.slice(1) +']');
if (target.length) {
e.preventDefault();
if (typeof document.body.style.transitionProperty === 'string') {
var avail = $(document).height() - _config.win.height();
scroll = target.offset().top;
if (scroll > avail) {
scroll = avail;
}
$('html').css({
'transform': 'translate3d(0, ' + ( _config.win.scrollTop() - scroll ) + 'px, 0)',
'transition' : '.6s ease-in-out'
}).data('transitioning', true);
}
else {
// fallback for dumb browsers
$('html, body').animate({
scrollTop: target.offset().top
}, 600);
}
}
}
});
},
//
// remove styles after transition has finished
//
removeStyles: function() {
$('html').on('transitionend webkitTransitionEnd msTransitionEnd oTransitionEnd', function (e) {
if (e.target == e.currentTarget && $(this).data('transitioning') === true) {
$(this).removeAttr('style').data('transitioning', false);
$('html, body').scrollTop(scroll);
return;
}
});
}
};
app = {
init: function() {
_private.scrollToTarget();
_private.removeStyles();
}
};
return app;
})(window, document);

View File

@ -15,6 +15,9 @@
// Components
@import 'bigchain/_fonts';
@import 'bigchain/_typography';
@import 'bigchain/_animations';
@import 'bigchain/_buttons';
@import 'bigchain/_forms';
@import 'bigchain/_logo';
@import 'bigchain/_grid';
@import 'bigchain/_sections';

View File

@ -0,0 +1,3 @@
$timing-default: ease-out;
$timing-bounce: cubic-bezier(0,1.02,.32,1.34); // easeOutBack, modified: http://cubic-bezier.com/#0,1.02,.32,1.34

View File

@ -0,0 +1,149 @@
//
// Buttons
// ---
// bigchain.io
//
.btn {
display: inline-block;
font-weight: $btn-font-weight;
text-transform: uppercase;
font-family: $input-font;
text-align: center;
white-space: nowrap;
vertical-align: middle;
cursor: pointer;
user-select: none;
border: 1px solid transparent;
@include button-size($btn-padding-y, $btn-padding-x, $font-size-base, $line-height, $btn-border-radius);
transition: all .2s ease-in-out;
&,
&:active,
&.active {
&:focus,
&.focus {
}
}
&:active,
&.active {
background-image: none;
outline: 0;
box-shadow: inset 0 3px 5px rgba(0,0,0,.125);
}
&.disabled,
&:disabled {
cursor: disabled;
opacity: 0.65;
box-shadow: none;
}
}
// Future-proof disabling of clicks on `<a>` elements
a.btn.disabled,
fieldset[disabled] a.btn {
pointer-events: none;
}
//
// Alternate buttons
//
.btn-primary {
@include button-variant($btn-primary-color, $btn-primary-bg, $btn-primary-border);
}
.btn-secondary {
@include button-variant($btn-secondary-color, $btn-secondary-bg, $btn-secondary-border);
}
.btn-info {
@include button-variant($btn-info-color, $btn-info-bg, $btn-info-border);
}
.btn-success {
@include button-variant($btn-success-color, $btn-success-bg, $btn-success-border);
}
.btn-warning {
@include button-variant($btn-warning-color, $btn-warning-bg, $btn-warning-border);
}
.btn-danger {
@include button-variant($btn-danger-color, $btn-danger-bg, $btn-danger-border);
}
// Remove all backgrounds
.btn-primary-outline {
@include button-outline-variant($btn-primary-bg);
}
.btn-secondary-outline {
@include button-outline-variant($btn-secondary-border);
}
.btn-info-outline {
@include button-outline-variant($btn-info-bg);
}
.btn-success-outline {
@include button-outline-variant($btn-success-bg);
}
.btn-warning-outline {
@include button-outline-variant($btn-warning-bg);
}
.btn-danger-outline {
@include button-outline-variant($btn-danger-bg);
}
//
// Link buttons
//
// Make a button look and behave like a link
.btn-link {
font-weight: normal;
color: $link-color;
border-radius: 0;
&,
&:active,
&.active,
&:disabled {
background-color: transparent;
box-shadow: none;
}
&,
&:focus,
&:active {
border-color: transparent;
}
&:disabled {
}
}
//
// Button Sizes
//
.btn-lg {
// line-height: ensure even-numbered height of button next to large input
@include button-size($btn-padding-y-lg, $btn-padding-x-lg, $font-size-lg, $line-height-lg, $btn-border-radius-lg);
}
.btn-sm {
// line-height: ensure proper height of button next to small input
@include button-size($btn-padding-y-sm, $btn-padding-x-sm, $font-size-sm, $line-height-sm, $btn-border-radius-sm);
}
//
// Block button
//
.btn-block {
display: block;
width: 100%;
}
// Vertically space out multiple block buttons
.btn-block + .btn-block {
margin-top: 5px;
}
// Specificity overrides
input[type="submit"],
input[type="reset"],
input[type="button"] {
&.btn-block {
width: 100%;
}
}

View File

@ -1,3 +1,10 @@
//
// Fonts
// ---
// bigchain.io
//
@font-face{
font-family: 'Fira Sans';
src: local('Fira Sans Light'),

View File

@ -0,0 +1,144 @@
//
// Forms
// ---
// bigchain.io
//
.form-control {
display: block;
width: 100%;
appearance: none;
padding: $input-padding-x $input-padding-y;
font-family: $input-font;
font-size: $font-size-base;
line-height: $line-height;
color: $input-color;
background: none;
border: none;
border-bottom: 2px solid $input-border-color;
border-radius: 0;
transition: border-color ease-in-out .15s;
&:focus {
outline: 0;
border-color: #fff;
}
// Placeholder
&::placeholder {
color: $input-color-placeholder;
// Override Firefox's unusual default opacity; see https://github.com/twbs/bootstrap/pull/11526.
opacity: 1;
}
// Disabled and read-only inputs
//
// HTML5 says that controls under a fieldset > legend:first-child won't be
// disabled if the fieldset is disabled. Due to implementation difficulty, we
// don't honor that edge case; we style them as disabled anyway.
&:disabled,
&[readonly] {
background-color: $input-bg-disabled;
// iOS fix for unreadable disabled content; see https://github.com/twbs/bootstrap/issues/11655.
opacity: 1;
}
&:disabled {
cursor: disabled;
}
}
//
// Floating placeholder labels
//
.form-label {
position: absolute;
top: $input-padding-x;
left: $input-padding-y;
transition: .15s ease-out;
user-select: none;
// style like placeholder
font-family: $input-font;
font-weight: $input-font-weight;
font-size: $font-size-base;
line-height: $line-height;
color: $input-color-placeholder;
}
.form-control {
// the active state
&:focus ~ .form-label,
&:valid:not(.is-empty) ~ .form-label,
&:invalid:not(.is-empty) ~ .form-label,
&.parsley-error ~ .form-label,
&.parsley-success ~ .form-label {
transform: translate3d(0, -1.5rem, 0) scale(.75);
transform-origin: left top;
}
}
//
// Form groups
//
.form-group {
margin-bottom: ($spacer * 2);
position: relative;
// make room for floating labels
margin-top: $spacer;
}
//
// Form Validation States
//
.form-control {
// Success style
&:valid:not(.is-empty),
&.parsley-success {
&,
&:focus {
border-color: $brand-success;
}
}
// Error style
&:invalid:not(.is-empty),
&.parsley-error {
&,
&:focus {
border-color: $brand-danger;
color: $brand-danger;
}
}
}
//
// Error messages
//
.form-group,
.input-group { position: relative; }
.parsley-errors-list {
@extend .list-unstyled;
position: absolute;
left: 0;
bottom: 0;
font-size: $font-size-sm;
color: $brand-danger;
z-index: -1;
&.filled {
animation: errors-list-show .2s $timing-bounce forwards;
}
}
@keyframes errors-list-show {
from { transform: translate3d(0,0,0); }
to { transform: translate3d(0,( $font-size-sm + ($spacer / 4)),0); }
}

View File

@ -3,3 +3,5 @@
// ---
// bigchain.io
//
@import "_mixins/_buttons";

View File

@ -0,0 +1,75 @@
//
// Button variants
//
@mixin button-variant($color, $background, $border) {
$active-background: darken($background, 5%);
$active-border: darken($border, 12%);
color: $color !important;
background-color: $background;
border-color: $border;
&:hover,
&:focus,
&.focus {
color: $color !important;
background-color: $active-background;
border-color: $active-border;
}
&:active,
&.active {
color: $color !important;
background-color: $active-background;
border-color: $active-border;
// Remove the gradient for the pressed/active state
background-image: none;
&:hover,
&:focus,
&.focus {
color: $color !important;
background-color: darken($background, 17%);
border-color: darken($border, 25%);
}
}
&.disabled,
&:disabled {
&:focus,
&.focus {
background-color: $background;
border-color: $border;
}
}
}
@mixin button-outline-variant($color) {
color: $color;
background-image: none;
background-color: transparent;
border-color: $color;
&:hover,
&:focus,
&.focus,
&:active,
&.active {
color: #fff;
background-color: $color;
border-color: $color;
}
&.disabled,
&:disabled {
&:focus,
&.focus {
border-color: lighten($color, 20%);
}
}
}
// Button sizes
@mixin button-size($padding-y, $padding-x, $font-size, $line-height, $border-radius) {
padding: $padding-y $padding-x;
font-size: $font-size;
line-height: $line-height;
border-radius: $border-radius;
}

View File

@ -1,20 +1,29 @@
.section {
padding-top: ($line-height-computed * 2);
padding-bottom: ($line-height-computed * 2);
padding-top: ($spacer * 2);
padding-bottom: ($spacer * 2);
min-height: 420px;
// use this so animated elements coming in from outside of screen
// don't affect layout
overflow: hidden;
// vertically center everything
display: flex;
align-items: center;
.row { flex: 1 }
@media ($screen-sm) {
padding-top: ($line-height-computed * 3);
padding-bottom: ($line-height-computed * 3);
padding-top: ($spacer * 3);
padding-bottom: ($spacer * 3);
}
}
.section-title,
.section-description {
text-align: center;
@media ($screen-sm) {
max-width: 100%;
margin-left: auto;
@ -25,7 +34,7 @@
.section-title {
font-size: $font-size-h3;
margin-top: 0;
margin-bottom: $line-height-computed;
margin-bottom: $spacer;
@media ($screen-sm) {
font-size: $font-size-h2;
@ -37,12 +46,12 @@
margin-bottom: 0;
+ .section-description {
margin-top: $line-height-computed;
margin-top: $spacer;
}
}
.section-actions {
margin-top: $line-height-computed;
margin-top: $spacer;
.btn {
margin-left: 5px;

View File

@ -14,7 +14,7 @@ body {
font-family: $font-family-base;
font-size: $font-size-base;
font-weight: $font-weight-base;
line-height: $line-height-base;
line-height: $line-height;
color: $text-color;
background-color: $body-bg;
@ -49,7 +49,6 @@ a {
&:hover,
&:focus {
color: $link-hover-color;
text-decoration: underline;
}
&:active {}
@ -74,16 +73,16 @@ h1, h2, h3, h4, h5, h6,
h1, .h1,
h2, .h2,
h3, .h3 {
margin-top: ($line-height-computed * 2);
margin-bottom: $line-height-computed;
margin-top: ($spacer * 2);
margin-bottom: $spacer;
}
h4, .h4,
h5, .h5,
h6, .h6 {
color: $gray;
margin-top: $line-height-computed;
margin-bottom: ($line-height-computed / 2);
margin-top: $spacer;
margin-bottom: ($spacer / 2);
}
h1, .h1 { font-size: $font-size-h1; }
@ -98,7 +97,7 @@ h6, .h6 { font-size: $font-size-h6; }
// Body text
//
p {
margin: 0 0 ($line-height-computed / 2);
margin: 0 0 ($spacer / 2);
}
@ -107,17 +106,17 @@ p {
//
small,
.small {
font-size: floor((100% * $font-size-small / $font-size-base));
font-size: floor((100% * $font-size-sm / $font-size-base));
font-weight: $font-weight-normal;
}
.mini {
font-size: floor((100% * $font-size-mini / $font-size-base));
font-size: floor((100% * $font-size-xs / $font-size-base));
font-weight: $font-weight-normal;
}
.large {
font-size: floor((100% * $font-size-large / $font-size-base));
font-size: floor((100% * $font-size-lg / $font-size-base));
}
strong,
@ -144,13 +143,13 @@ strong,
// Unordered and Ordered lists
ul,
ol {
margin-top: $line-height-computed;
margin-bottom: $line-height-computed;
padding-left: ($line-height-computed * 2);
margin-top: $spacer;
margin-bottom: $spacer;
padding-left: ($spacer * 2);
li {
margin-bottom: ($line-height-computed / 2);
padding-left: ($line-height-computed / 2);
margin-bottom: ($spacer / 2);
padding-left: ($spacer / 2);
}
ul,
ol {
@ -198,9 +197,9 @@ ul {
blockquote {
border-left: 3px solid $gray-lighter;
margin-left: 0;
margin-top: $line-height-computed;
margin-bottom: $line-height-computed;
padding: ($line-height-computed/2) $line-height-computed;
margin-top: $spacer;
margin-bottom: $spacer;
padding: ($spacer/2) $spacer;
color: $gray;
font-style: italic;
@ -220,9 +219,9 @@ cite {
// Addresses
address {
margin-bottom: $line-height-computed;
margin-bottom: $spacer;
font-style: normal;
line-height: $line-height-base;
line-height: $line-height;
}

View File

@ -40,19 +40,18 @@ $font-weight-base: $font-weight-light !default;
$font-size-root: 16px !default;
$font-size-base: 1rem !default;
$font-size-large: ceil(($font-size-base * 1.25)) !default;
$font-size-small: ceil(($font-size-base * 0.875)) !default;
$font-size-mini: ceil(($font-size-base * 0.75)) !default;
$font-size-lg: ceil(($font-size-base * 1.25)) !default;
$font-size-sm: ceil(($font-size-base * 0.875)) !default;
$font-size-xs: ceil(($font-size-base * 0.75)) !default;
$font-size-h1: floor(($font-size-base * 2.6)) !default;
$font-size-h2: floor(($font-size-base * 2.25)) !default;
$font-size-h3: ceil(($font-size-base * 1.7)) !default;
$font-size-h4: ceil(($font-size-base * 1.25)) !default;
$font-size-h1: 3rem !default;
$font-size-h2: 2.5rem !default;
$font-size-h3: 2rem !default;
$font-size-h4: 1.5rem !default;
$font-size-h5: $font-size-base !default;
$font-size-h6: ceil(($font-size-base * 0.85)) !default;
$font-size-h6: 0.85rem !default;
$line-height-base: 1.4 !default;
$line-height-computed: floor(($font-size-base * $line-height-base)) !default;
$line-height: 1.5 !default;
$headings-font-family: $font-family-fira !default;
$headings-font-weight: $font-weight-light !default;
@ -73,7 +72,7 @@ $link-hover-color: darken($link-color, 15%) !default;
//
// Grid
//
$gutter-space: 4% !default;
$gutter-space: 2rem !default;
//
@ -86,3 +85,83 @@ $screen-lg-min: 87.500em !default;
$screen-sm: 'min-width: #{$screen-sm-min}';
$screen-md: 'min-width: #{$screen-md-min}';
$screen-lg: 'min-width: #{$screen-lg-min}';
//
// Components
//
$spacer: 1rem !default;
$line-height-lg: (4 / 3) !default;
$line-height-sm: 1.5 !default;
$border-radius: .15rem !default;
$border-radius-lg: .2rem !default;
$border-radius-sm: .1rem !default;
$component-active-color: #fff !default;
$component-active-bg: $brand-primary !default;
//
// Buttons
//
$btn-padding-x: 1.5rem !default;
$btn-padding-y: .375rem !default;
$btn-font-weight: $font-weight-light !default;
$btn-primary-color: #fff !default;
$btn-primary-bg: $brand-primary !default;
$btn-primary-border: $btn-primary-bg !default;
$btn-secondary-color: $gray-dark !default;
$btn-secondary-bg: #fff !default;
$btn-secondary-border: #fff !default;
$btn-info-color: #fff !default;
$btn-info-bg: $brand-info !default;
$btn-info-border: $btn-info-bg !default;
$btn-success-color: #fff !default;
$btn-success-bg: $brand-success !default;
$btn-success-border: $btn-success-bg !default;
$btn-warning-color: #fff !default;
$btn-warning-bg: $brand-warning !default;
$btn-warning-border: $btn-warning-bg !default;
$btn-danger-color: #fff !default;
$btn-danger-bg: $brand-danger !default;
$btn-danger-border: $btn-danger-bg !default;
$btn-link-disabled-color: $gray-light !default;
$btn-padding-x-sm: .75rem !default;
$btn-padding-y-sm: .25rem !default;
$btn-padding-x-lg: 1.25rem !default;
$btn-padding-y-lg: .75rem !default;
// Allows for customizing button radius independently from global border radius
$btn-border-radius: $border-radius !default;
$btn-border-radius-lg: $border-radius-lg !default;
$btn-border-radius-sm: $border-radius-sm !default;
//
// Forms
//
$input-padding-x: .5rem !default;
$input-padding-y: 0 !default;
$input-bg: rgba(255,255,255,.1) !default;
$input-bg-disabled: $gray-lighter !default;
$input-color: $gray !default;
$input-border-color: #ccc !default;
$input-border-focus: #66afe9 !default;
$input-box-shadow-focus: rgba(102,175,233,.6) !default;
$input-color-placeholder: #999 !default;
$input-font: $font-family-avenir !default;
$input-font-weight: $font-weight-light !default;

View File

@ -3,3 +3,48 @@
// ---
// bigchain.io
//
.hero {
text-align: center;
overflow: hidden;
position: relative;
// background
background: url('../img/photo2.jpg') no-repeat center center;
background-size: cover;
@media ($screen-sm) {
height: 85vh;
max-height: 680px;
}
.logo {
fill-opacity: .7;
margin: auto;
margin-top: -($spacer * 6);
margin-bottom: $spacer;
max-width: 31em;
}
.section-title {
color: #fff;
font-size: $font-size-h1;
margin-bottom: ($spacer * 3);
}
}
.section-benchmarks {
text-align: center;
}
.section-earlyaccess {
form {
max-width: $screen-sm-min;
margin: auto;
}
}

View File

@ -4,13 +4,19 @@ layout: base
front_page: true
---
<section class="section">
<header class="section hero">
<div class="row">
<svg class="logo logo--blue logo--full" aria-labelledby="title">
<svg class="logo logo--black logo--full" aria-labelledby="title">
<title>Logo</title>
<use xlink:href="/assets/img/sprite.svg#logo"></use>
</svg>
<h1 class="section-title">Bigchain is coming</h1>
<h1 class="section-title">Bigchain is coming.</h1>
<a href="#earlyaccess" class="btn btn-secondary-outline">Get Early Access</a>
</div>
</header>
<section class="section section-benchmarks background--blue">
<div class="row">
<div class="section-description">
<div class="grid grid--gutters">
<p class="grid__col">100,000 transactions per second and climbing</p>
@ -21,16 +27,34 @@ front_page: true
</div>
</section>
<section class="section background--black">
<section class="section">
<div class="row">
<h1 class="section-title">Whitepaper</h1>
<p class="section-description">Coming soon</p>
</div>
</section>
<section class="section background--blue">
<section id="earlyaccess" class="section section-earlyaccess background--black">
<div class="row">
<h1 class="section-title">Early Access</h1>
<p class="section-description">For early access and inquiries, enter your contact information below</p>
<form action="" id="form-earlyaccess" class="js-parsley">
<p class="form-group">
<input class="form-control" type="text" id="name" name="name">
<label class="form-label" for="name">Your Name</label>
</p>
<p class="form-group">
<input class="form-control" type="email" id="email" name="email">
<label class="form-label" for="email">Your Email</label>
</p>
<p class="form-group">
<textarea class="form-control" id="comment" name="comment" rows="1"></textarea>
<label class="form-label" for="comment">Your Comment (optional)</label>
</p>
<p class="form-group">
<input class="btn btn-secondary" type="submit" value="Send">
</p>
</form>
</div>
</section>