mirror of https://github.com/bigchaindb/site.git
add existing content, all new components
This commit is contained in:
parent
e27d0a6bed
commit
5b5771e2bb
Binary file not shown.
|
After Width: | Height: | Size: 1.3 MiB |
Binary file not shown.
|
After Width: | Height: | Size: 1.1 MiB |
|
|
@ -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();
|
||||
|
||||
});
|
||||
|
|
|
|||
|
|
@ -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)
|
||||
|
|
@ -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);
|
||||
|
|
@ -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';
|
||||
|
|
|
|||
|
|
@ -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
|
||||
|
|
@ -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%;
|
||||
}
|
||||
}
|
||||
|
|
@ -1,3 +1,10 @@
|
|||
//
|
||||
// Fonts
|
||||
// ---
|
||||
// bigchain.io
|
||||
//
|
||||
|
||||
|
||||
@font-face{
|
||||
font-family: 'Fira Sans';
|
||||
src: local('Fira Sans Light'),
|
||||
|
|
|
|||
|
|
@ -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); }
|
||||
}
|
||||
|
|
@ -3,3 +3,5 @@
|
|||
// ---
|
||||
// bigchain.io
|
||||
//
|
||||
|
||||
@import "_mixins/_buttons";
|
||||
|
|
|
|||
|
|
@ -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;
|
||||
}
|
||||
|
|
@ -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;
|
||||
|
|
|
|||
|
|
@ -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;
|
||||
}
|
||||
|
||||
|
||||
|
|
|
|||
|
|
@ -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;
|
||||
|
|
|
|||
|
|
@ -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;
|
||||
}
|
||||
}
|
||||
|
|
|
|||
|
|
@ -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>
|
||||
|
|
|
|||
Loading…
Reference in New Issue