bigchaindb/site
1
0
Fork 0
mirror of https://github.com/bigchaindb/site.git synced 2024-11-22 01:36:55 +01:00
Code Releases Activity

extend the branding

Browse Source
This commit is contained in:
Matthias Kretschmann 2015-12-20 19:31:36 +01:00
parent 5b5771e2bb
commit d8eb72702b
16 changed files with 295 additions and 75 deletions
Show Stats Download Patch File Download Diff File Expand all files Collapse all files

24
_src/_assets/images/icon-graph.svg Normal file
View File

@ -0,0 +1,24 @@
<!-- Generator: Adobe Illustrator 19.2.0, SVG Export Plug-In -->
<svg version="1.1"
xmlns="http://www.w3.org/2000/svg" xmlns:xlink="http://www.w3.org/1999/xlink" xmlns:a="http://ns.adobe.com/AdobeSVGViewerExtensions/3.0/"
x="0px" y="0px" width="60px" height="60px" viewBox="0 0 60 60" style="enable-background:new 0 0 60 60;" xml:space="preserve">
<style type="text/css">
.st0{fill:none;stroke:#000000;stroke-width:2;stroke-linecap:round;stroke-linejoin:round;stroke-miterlimit:10;}
</style>
<defs>
</defs>
<g>
<line class="st0" x1="1" y1="59" x2="59" y2="59"/>
<rect x="5" y="47" class="st0" width="8" height="12"/>
<rect x="19" y="33" class="st0" width="8" height="26"/>
<rect x="33" y="39" class="st0" width="8" height="20"/>
<rect x="47" y="21" class="st0" width="8" height="38"/>
<circle class="st0" cx="53" cy="4" r="3"/>
<circle class="st0" cx="38" cy="22" r="3"/>
<circle class="st0" cx="23" cy="16" r="3"/>
<circle class="st0" cx="8" cy="29" r="3"/>
<line class="st0" x1="10.3" y1="27" x2="20.7" y2="18"/>
<line class="st0" x1="25.8" y1="17.1" x2="35.2" y2="20.9"/>
<line class="st0" x1="39.9" y1="19.7" x2="51.1" y2="6.3"/>
</g>
</svg>
Side by Side

After

Width:  |  Height:  |  Size: 1.1 KiB

28
_src/_assets/images/icon-servers.svg Normal file
View File

@ -0,0 +1,28 @@
<!-- Generator: Adobe Illustrator 19.2.0, SVG Export Plug-In -->
<svg version="1.1"
xmlns="http://www.w3.org/2000/svg" xmlns:xlink="http://www.w3.org/1999/xlink" xmlns:a="http://ns.adobe.com/AdobeSVGViewerExtensions/3.0/"
x="0px" y="0px" width="60px" height="60px" viewBox="0 0 60 60" style="enable-background:new 0 0 60 60;" xml:space="preserve">
<style type="text/css">
.st0{fill:none;stroke:#000000;stroke-width:2;stroke-linecap:round;stroke-linejoin:round;stroke-miterlimit:10;}
</style>
<defs>
</defs>
<g>
<rect x="1" y="11" class="st0" width="58" height="16"/>
<polyline class="st0" points="1,11 11,1 49,1 59,11 "/>
<path class="st0" d="M1,43v11c0,2.8,2.2,5,5,5h48c2.8,0,5-2.2,5-5V43"/>
<circle class="st0" cx="9" cy="19" r="4"/>
<circle class="st0" cx="35" cy="19" r="2"/>
<circle class="st0" cx="43" cy="19" r="2"/>
<circle class="st0" cx="51" cy="19" r="2"/>
<polyline class="st0" points="59,27 59,43 1,43 1,27 "/>
<circle class="st0" cx="9" cy="35" r="4"/>
<circle class="st0" cx="35" cy="35" r="2"/>
<circle class="st0" cx="43" cy="35" r="2"/>
<circle class="st0" cx="51" cy="35" r="2"/>
<circle class="st0" cx="35" cy="51" r="2"/>
<circle class="st0" cx="43" cy="51" r="2"/>
<circle class="st0" cx="51" cy="51" r="2"/>
<circle class="st0" cx="9" cy="51" r="4"/>
</g>
</svg>
Side by Side

After

Width:  |  Height:  |  Size: 1.3 KiB

19
_src/_assets/images/icon-tree.svg Normal file
View File

@ -0,0 +1,19 @@
<!-- Generator: Adobe Illustrator 19.2.0, SVG Export Plug-In -->
<svg version="1.1"
xmlns="http://www.w3.org/2000/svg" xmlns:xlink="http://www.w3.org/1999/xlink" xmlns:a="http://ns.adobe.com/AdobeSVGViewerExtensions/3.0/"
x="0px" y="0px" width="58px" height="60px" viewBox="0 0 58 60" style="enable-background:new 0 0 58 60;" xml:space="preserve">
<style type="text/css">
.st0{fill:none;stroke:#000000;stroke-width:2;stroke-miterlimit:10;}
.st1{fill:none;stroke:#000000;stroke-width:2;stroke-linejoin:round;stroke-miterlimit:10;}
</style>
<defs>
</defs>
<g>
<path class="st0" d="M51,27c3.8,0,6-2.2,6-6c0-3.8-3.5-6-6-6h-3c0,0-3-6-8-6c0,0-3.4-8-11-8c-7.6,0-11,8-11,8c-5,0-8,6-8,6H7
c-2.5,0-6,2.2-6,6c0,3.8,2.2,6,6,6H51z"/>
<line class="st0" x1="29" y1="27" x2="29" y2="43"/>
<line class="st0" x1="39" y1="27" x2="29" y2="37"/>
<line class="st0" x1="19" y1="27" x2="29" y2="37"/>
<polygon class="st1" points="35,59 23,59 17,43 41,43 "/>
</g>
</svg>
Side by Side

After

Width:  |  Height:  |  Size: 961 B

2
_src/_assets/styles/bigchain.scss
View File

@ -19,8 +19,10 @@
@import 'bigchain/_buttons'; @import 'bigchain/_buttons';
@import 'bigchain/_forms'; @import 'bigchain/_forms';
@import 'bigchain/_logo'; @import 'bigchain/_logo';
@import 'bigchain/_icons';
@import 'bigchain/_grid'; @import 'bigchain/_grid';
@import 'bigchain/_sections'; @import 'bigchain/_sections';
@import 'bigchain/_footer';
// Content types // Content types
//@import 'bigchain/content-page'; //@import 'bigchain/content-page';

49
_src/_assets/styles/bigchain/_animations.scss
View File

@ -1,3 +1,52 @@
$timing-default: ease-out; $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 $timing-bounce: cubic-bezier(0,1.02,.32,1.34); // easeOutBack, modified: http://cubic-bezier.com/#0,1.02,.32,1.34
//
// Transitions
//
@mixin transition {
transition: all .2s ease-in-out;
}
.transition {
@include transition;
}
.fade {
@include transition;
opacity: 0;
&.in {
opacity: 1;
}
}
//
// Custom animations
//
// smooooothly slide in from bottom
@mixin animation-slide-in-from-bottom {
animation: slide-in-from-bottom .7s $timing-bounce;
}
.animation-slide-in-from-bottom {
@include animation-slide-in-from-bottom;
&.paused {
animation-play-state: paused;
}
}
@keyframes slide-in-from-bottom {
0% {
opacity: 0;
transform: translateY(100px);
}
100% {
opacity: 1;
transform: translateY(0);
}
}

3
_src/_assets/styles/bigchain/_buttons.scss
View File

@ -14,7 +14,7 @@
vertical-align: middle; vertical-align: middle;
cursor: pointer; cursor: pointer;
user-select: none; user-select: none;
border: 1px solid transparent; border: none;
@include button-size($btn-padding-y, $btn-padding-x, $font-size-base, $line-height, $btn-border-radius); @include button-size($btn-padding-y, $btn-padding-x, $font-size-base, $line-height, $btn-border-radius);
transition: all .2s ease-in-out; transition: all .2s ease-in-out;
@ -30,7 +30,6 @@
&.active { &.active {
background-image: none; background-image: none;
outline: 0; outline: 0;
box-shadow: inset 0 3px 5px rgba(0,0,0,.125);
} }
&.disabled, &.disabled,
&:disabled { &:disabled {

7
_src/_assets/styles/bigchain/_footer.scss Normal file
View File

@ -0,0 +1,7 @@
.footer {
padding-top: $spacer;
padding-bottom: $spacer;
text-align: center;
color: $gray-light;
}

11
_src/_assets/styles/bigchain/_icons.scss Normal file
View File

@ -0,0 +1,11 @@
.icon {
fill: none;
stroke: $brand-main-brown;
stroke-width: 2;
stroke-linecap: round;
stroke-linejoin: round;
stroke-miterlimit: 10;
width: 60px;
height: 60px;
}

2
_src/_assets/styles/bigchain/_logo.scss
View File

@ -6,7 +6,7 @@
// default logo // default logo
.logo { .logo {
fill: $brand-main-black; fill: $brand-main-blue-dark;
width: 300px; width: 300px;
height: 30px; height: 30px;
} }

40
_src/_assets/styles/bigchain/_mixins/_buttons.scss
View File

@ -6,38 +6,24 @@
$active-border: darken($border, 12%); $active-border: darken($border, 12%);
color: $color !important; color: $color !important;
background-color: $background; background-color: $background;
border-color: $border;
&:hover, &:hover,
&:focus, &:focus {
&.focus {
color: $color !important; color: $color !important;
background-color: $active-background; background-color: $active-background;
border-color: $active-border;
} }
&:active, &:active {
&.active {
color: $color !important; color: $color !important;
background-color: $active-background; background-color: darken($background, 30%);
border-color: $active-border; transition: none;
// Remove the gradient for the pressed/active state // Remove the gradient for the pressed/active state
background-image: none; background-image: none;
&:hover,
&:focus,
&.focus {
color: $color !important;
background-color: darken($background, 17%);
border-color: darken($border, 25%);
}
} }
&.disabled, &.disabled,
&:disabled { &:disabled {
&:focus, &:focus {
&.focus {
background-color: $background; background-color: $background;
border-color: $border;
} }
} }
} }
@ -45,22 +31,22 @@
color: $color; color: $color;
background-image: none; background-image: none;
background-color: transparent; background-color: transparent;
border-color: $color; border: 1px solid $color;
&:hover, &:hover,
&:focus, &:focus {
&.focus,
&:active,
&.active {
color: #fff;
background-color: $color; background-color: $color;
border-color: $color; border-color: $color;
} }
&:active {
background-color: darken($color, 10%);
border-color: darken($color, 10%);
}
&.disabled, &.disabled,
&:disabled { &:disabled {
&:focus, &:focus {
&.focus {
border-color: lighten($color, 20%); border-color: lighten($color, 20%);
} }
} }

37
_src/_assets/styles/bigchain/_sections.scss
View File

@ -2,7 +2,6 @@
.section { .section {
padding-top: ($spacer * 2); padding-top: ($spacer * 2);
padding-bottom: ($spacer * 2); padding-bottom: ($spacer * 2);
min-height: 420px;
// use this so animated elements coming in from outside of screen // use this so animated elements coming in from outside of screen
// don't affect layout // don't affect layout
@ -11,19 +10,24 @@
// vertically center everything // vertically center everything
display: flex; display: flex;
align-items: center; align-items: center;
min-height: 420px;
.row { flex: 1 } .row { flex: 1; }
@media ($screen-sm) { @media ($screen-sm) {
padding-top: ($spacer * 3); padding-top: ($spacer * 4);
padding-bottom: ($spacer * 3); padding-bottom: ($spacer * 4);
} }
} }
.section-header {
margin-bottom: ($spacer * 4);
}
.section-title, .section-title,
.section-description { .section-description {
text-align: center; text-align: center;
@media ($screen-sm) { @media ($screen-sm) {
max-width: 100%; max-width: 100%;
margin-left: auto; margin-left: auto;
@ -34,7 +38,15 @@
.section-title { .section-title {
font-size: $font-size-h3; font-size: $font-size-h3;
margin-top: 0; margin-top: 0;
margin-bottom: $spacer;
&:after {
content: "";
height: 2px;
width: 5rem;
display: block;
margin: ($spacer * 2) auto 0 auto;
background: lighten($brand-main-gray, 30%);
}
@media ($screen-sm) { @media ($screen-sm) {
font-size: $font-size-h2; font-size: $font-size-h2;
@ -65,19 +77,22 @@
// Section backgrounds // Section backgrounds
// //
.background--blue { .background--blue {
background: $brand-main-blue; background: $brand-main-blue; // fallback
background: linear-gradient(to bottom right, $brand-main-blue 0%, lighten($brand-main-blue, 10%) 100%);
* { color: #fff } * { color: #fff }
} }
.background--black { .background--dark {
background: $brand-main-black; background: $brand-main-blue-dark; // fallback
background: linear-gradient(to bottom right, $brand-main-blue-dark 0%, lighten($brand-main-blue-dark, 10%) 100%);
* { color: #fff } * { color: #fff }
} }
.background--gray-dark { .background--gray {
background: $gray-dark; background: $brand-main-gray; // fallback
background: linear-gradient(to bottom right, $brand-main-gray 0%, lighten($brand-main-gray, 10%) 100%);
* { color: #fff } * { color: #fff }
} }

4
_src/_assets/styles/bigchain/_typography.scss
View File

@ -106,12 +106,12 @@ p {
// //
small, small,
.small { .small {
font-size: floor((100% * $font-size-sm / $font-size-base)); font-size: $font-size-sm;
font-weight: $font-weight-normal; font-weight: $font-weight-normal;
} }
.mini { .mini {
font-size: floor((100% * $font-size-xs / $font-size-base)); font-size: $font-size-xs;
font-weight: $font-weight-normal; font-weight: $font-weight-normal;
} }

25
_src/_assets/styles/bigchain/_variables.scss
View File

@ -7,12 +7,17 @@
// //
// Colors // Colors
// //
$brand-main-blue: #003C69; //$brand-main-blue: #003C69 !default;
$brand-main-black: #000000; $brand-main-blue: #275B82 !default;
$brand-main-white: #FFFFFF; $brand-main-blue-dark: #101A25 !default;
$brand-main-gray: #70859B !default;
$brand-main-brown: #B56D00 !default;
$brand-main-light: #FFFFFF !default;
$gray-dark: #373a3c !default; $gray-dark: #373a3c !default;
$gray: #55595c !default; $gray: $brand-main-gray !default;
$gray-light: #818a91 !default; $gray-light: #818a91 !default;
$gray-lighter: #eceeef !default; $gray-lighter: #eceeef !default;
$gray-lightest: #f7f7f9 !default; $gray-lightest: #f7f7f9 !default;
@ -40,9 +45,9 @@ $font-weight-base: $font-weight-light !default;
$font-size-root: 16px !default; $font-size-root: 16px !default;
$font-size-base: 1rem !default; $font-size-base: 1rem !default;
$font-size-lg: ceil(($font-size-base * 1.25)) !default; $font-size-lg: 1.25rem !default;
$font-size-sm: ceil(($font-size-base * 0.875)) !default; $font-size-sm: 0.875rem !default;
$font-size-xs: ceil(($font-size-base * 0.75)) !default; $font-size-xs: 0.75rem !default;
$font-size-h1: 3rem !default; $font-size-h1: 3rem !default;
$font-size-h2: 2.5rem !default; $font-size-h2: 2.5rem !default;
@ -56,16 +61,16 @@ $line-height: 1.5 !default;
$headings-font-family: $font-family-fira !default; $headings-font-family: $font-family-fira !default;
$headings-font-weight: $font-weight-light !default; $headings-font-weight: $font-weight-light !default;
$headings-line-height: 1.2 !default; $headings-line-height: 1.2 !default;
$headings-color: $brand-main-blue !default; $headings-color: $brand-main-gray !default;
// //
// Scaffolding // Scaffolding
// //
$body-bg: #fff !default; $body-bg: #fff !default;
$text-color: $brand-main-black !default; $text-color: $brand-main-blue-dark !default;
$link-color: $brand-main-blue !default; $link-color: $brand-main-brown !default;
$link-hover-color: darken($link-color, 15%) !default; $link-hover-color: darken($link-color, 15%) !default;

61
_src/_assets/styles/page-front.scss
View File

@ -8,21 +8,42 @@
text-align: center; text-align: center;
overflow: hidden; overflow: hidden;
position: relative; position: relative;
text-shadow: 0 1px 0 rgba(0,0,0,.3);
// background // background
background: url('../img/photo2.jpg') no-repeat center center; background: url('../img/photo1.jpg') no-repeat center bottom;
background-size: cover; background-size: cover;
// color overlay
&:before {
content: "";
width: 100%;
height: 100%;
position: absolute;
left: 0;
top: 0;
bottom: 0;
right: 0;
//background: $brand-main-brown;
background: linear-gradient(to top left, $brand-main-blue 0%, $brand-main-brown 100%);
opacity: .7;
z-index: 0;
}
.hero__content {
position: relative;
z-index: 1;
}
@media ($screen-sm) { @media ($screen-sm) {
height: 85vh; height: 100vh;
max-height: 680px;
} }
.logo { .logo {
fill-opacity: .7; fill-opacity: .6;
margin: auto; margin: auto;
margin-top: -($spacer * 6); margin-top: -($spacer * 8);
margin-bottom: $spacer; margin-bottom: ($spacer * 2);
max-width: 31em; max-width: 31em;
} }
@ -31,16 +52,40 @@
font-size: $font-size-h1; font-size: $font-size-h1;
margin-bottom: ($spacer * 3); margin-bottom: ($spacer * 3);
} }
.btn {
&:hover,
&:focus,
&:active {
text-shadow: none;
}
}
// intro animation
.logo,
.section-title,
.btn {
@extend .animation-slide-in-from-bottom;
animation-fill-mode: backwards;
}
.section-title { animation-delay: .2s; }
.btn { animation-delay: .4s; }
} }
.section-benchmarks { .section-benchmarks {
text-align: center; text-align: center;
border-bottom: 1px solid lighten($brand-main-gray, 40%);
.icon {
display: block;
margin: auto;
margin-bottom: $spacer;
}
} }
.section-earlyaccess { .section-earlyaccess {
form { form {

6
_src/_includes/footer.html
View File

@ -0,0 +1,6 @@
<footer class="footer" role="contentinfo">
<div class="row">
<small>&copy; {{ site.time | date: "%Y" }} Bigchain</small>
</div>
</footer>

52
_src/index.html
View File

@ -6,37 +6,61 @@ front_page: true
<header class="section hero"> <header class="section hero">
<div class="row"> <div class="row">
<svg class="logo logo--black logo--full" aria-labelledby="title"> <div class="hero__content">
<title>Logo</title> <svg class="logo logo--full" aria-labelledby="title">
<use xlink:href="/assets/img/sprite.svg#logo"></use> <title>Logo</title>
</svg> <use xlink:href="/assets/img/sprite.svg#logo"></use>
<h1 class="section-title">Bigchain is coming.</h1> </svg>
<a href="#earlyaccess" class="btn btn-secondary-outline">Get Early Access</a> <h1 class="section-title">Bigchain is coming.</h1>
<a href="#earlyaccess" class="btn btn-secondary-outline">Get Early Access</a>
</div>
</div> </div>
</header> </header>
<section class="section section-benchmarks background--blue"> <section class="section section-benchmarks">
<div class="row"> <div class="row">
<header class="section-header">
<h1 class="section-title">Key Features</h1>
</header>
<div class="section-description"> <div class="section-description">
<div class="grid grid--gutters"> <div class="grid grid--gutters">
<p class="grid__col">100,000 transactions per second and climbing</p> <p class="grid__col">
<p class="grid__col">Petabyte Capacity</p> <svg class="icon">
<p class="grid__col">Open Source</p> <use xlink:href="/assets/img/sprite.svg#icon-graph"></use>
</svg>
100,000 transactions per second and climbing
</p>
<p class="grid__col">
<svg class="icon">
<use xlink:href="/assets/img/sprite.svg#icon-servers"></use>
</svg>
Petabyte Capacity
</p>
<p class="grid__col">
<svg class="icon">
<use xlink:href="/assets/img/sprite.svg#icon-tree"></use>
</svg>
Open Source
</p>
</div> </div>
</div> </div>
</div> </div>
</section> </section>
<section class="section"> <section class="section section-whitepaper">
<div class="row"> <div class="row">
<h1 class="section-title">Whitepaper</h1> <header class="section-header">
<h1 class="section-title">Whitepaper</h1>
</header>
<p class="section-description">Coming soon</p> <p class="section-description">Coming soon</p>
</div> </div>
</section> </section>
<section id="earlyaccess" class="section section-earlyaccess background--black"> <section id="earlyaccess" class="section section-earlyaccess background--gray">
<div class="row"> <div class="row">
<h1 class="section-title">Early Access</h1> <header class="section-header">
<h1 class="section-title">Early Access</h1>
</header>
<p class="section-description">For early access and inquiries, enter your contact information below</p> <p class="section-description">For early access and inquiries, enter your contact information below</p>
<form action="" id="form-earlyaccess" class="js-parsley"> <form action="" id="form-earlyaccess" class="js-parsley">