mirror of
https://github.com/bigchaindb/site.git
synced 2024-12-24 02:16:10 +01:00
extend the branding
This commit is contained in:
parent
5b5771e2bb
commit
d8eb72702b
24
_src/_assets/images/icon-graph.svg
Normal file
24
_src/_assets/images/icon-graph.svg
Normal 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>
|
After Width: | Height: | Size: 1.1 KiB |
28
_src/_assets/images/icon-servers.svg
Normal file
28
_src/_assets/images/icon-servers.svg
Normal 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>
|
After Width: | Height: | Size: 1.3 KiB |
19
_src/_assets/images/icon-tree.svg
Normal file
19
_src/_assets/images/icon-tree.svg
Normal 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>
|
After Width: | Height: | Size: 961 B |
@ -19,8 +19,10 @@
|
||||
@import 'bigchain/_buttons';
|
||||
@import 'bigchain/_forms';
|
||||
@import 'bigchain/_logo';
|
||||
@import 'bigchain/_icons';
|
||||
@import 'bigchain/_grid';
|
||||
@import 'bigchain/_sections';
|
||||
@import 'bigchain/_footer';
|
||||
|
||||
// Content types
|
||||
//@import 'bigchain/content-page';
|
||||
|
@ -1,3 +1,52 @@
|
||||
|
||||
$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
|
||||
|
||||
//
|
||||
// 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);
|
||||
}
|
||||
}
|
||||
|
@ -14,7 +14,7 @@
|
||||
vertical-align: middle;
|
||||
cursor: pointer;
|
||||
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);
|
||||
transition: all .2s ease-in-out;
|
||||
|
||||
@ -30,7 +30,6 @@
|
||||
&.active {
|
||||
background-image: none;
|
||||
outline: 0;
|
||||
box-shadow: inset 0 3px 5px rgba(0,0,0,.125);
|
||||
}
|
||||
&.disabled,
|
||||
&:disabled {
|
||||
|
7
_src/_assets/styles/bigchain/_footer.scss
Normal file
7
_src/_assets/styles/bigchain/_footer.scss
Normal 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
11
_src/_assets/styles/bigchain/_icons.scss
Normal 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;
|
||||
}
|
@ -6,7 +6,7 @@
|
||||
|
||||
// default logo
|
||||
.logo {
|
||||
fill: $brand-main-black;
|
||||
fill: $brand-main-blue-dark;
|
||||
width: 300px;
|
||||
height: 30px;
|
||||
}
|
||||
|
@ -6,38 +6,24 @@
|
||||
$active-border: darken($border, 12%);
|
||||
color: $color !important;
|
||||
background-color: $background;
|
||||
border-color: $border;
|
||||
|
||||
&:hover,
|
||||
&:focus,
|
||||
&.focus {
|
||||
&:focus {
|
||||
color: $color !important;
|
||||
background-color: $active-background;
|
||||
border-color: $active-border;
|
||||
}
|
||||
&:active,
|
||||
&.active {
|
||||
&:active {
|
||||
color: $color !important;
|
||||
background-color: $active-background;
|
||||
border-color: $active-border;
|
||||
background-color: darken($background, 30%);
|
||||
transition: none;
|
||||
|
||||
// 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 {
|
||||
&:focus {
|
||||
background-color: $background;
|
||||
border-color: $border;
|
||||
}
|
||||
}
|
||||
}
|
||||
@ -45,22 +31,22 @@
|
||||
color: $color;
|
||||
background-image: none;
|
||||
background-color: transparent;
|
||||
border-color: $color;
|
||||
border: 1px solid $color;
|
||||
|
||||
&:hover,
|
||||
&:focus,
|
||||
&.focus,
|
||||
&:active,
|
||||
&.active {
|
||||
color: #fff;
|
||||
&:focus {
|
||||
background-color: $color;
|
||||
border-color: $color;
|
||||
}
|
||||
|
||||
&:active {
|
||||
background-color: darken($color, 10%);
|
||||
border-color: darken($color, 10%);
|
||||
}
|
||||
|
||||
&.disabled,
|
||||
&:disabled {
|
||||
&:focus,
|
||||
&.focus {
|
||||
&:focus {
|
||||
border-color: lighten($color, 20%);
|
||||
}
|
||||
}
|
||||
|
@ -2,7 +2,6 @@
|
||||
.section {
|
||||
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
|
||||
@ -11,19 +10,24 @@
|
||||
// vertically center everything
|
||||
display: flex;
|
||||
align-items: center;
|
||||
min-height: 420px;
|
||||
|
||||
.row { flex: 1 }
|
||||
.row { flex: 1; }
|
||||
|
||||
@media ($screen-sm) {
|
||||
padding-top: ($spacer * 3);
|
||||
padding-bottom: ($spacer * 3);
|
||||
padding-top: ($spacer * 4);
|
||||
padding-bottom: ($spacer * 4);
|
||||
}
|
||||
}
|
||||
|
||||
.section-header {
|
||||
margin-bottom: ($spacer * 4);
|
||||
}
|
||||
|
||||
.section-title,
|
||||
.section-description {
|
||||
text-align: center;
|
||||
|
||||
|
||||
@media ($screen-sm) {
|
||||
max-width: 100%;
|
||||
margin-left: auto;
|
||||
@ -34,7 +38,15 @@
|
||||
.section-title {
|
||||
font-size: $font-size-h3;
|
||||
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) {
|
||||
font-size: $font-size-h2;
|
||||
@ -65,19 +77,22 @@
|
||||
// Section backgrounds
|
||||
//
|
||||
.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 }
|
||||
}
|
||||
|
||||
.background--black {
|
||||
background: $brand-main-black;
|
||||
.background--dark {
|
||||
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 }
|
||||
}
|
||||
|
||||
.background--gray-dark {
|
||||
background: $gray-dark;
|
||||
.background--gray {
|
||||
background: $brand-main-gray; // fallback
|
||||
background: linear-gradient(to bottom right, $brand-main-gray 0%, lighten($brand-main-gray, 10%) 100%);
|
||||
|
||||
* { color: #fff }
|
||||
}
|
||||
|
@ -106,12 +106,12 @@ p {
|
||||
//
|
||||
small,
|
||||
.small {
|
||||
font-size: floor((100% * $font-size-sm / $font-size-base));
|
||||
font-size: $font-size-sm;
|
||||
font-weight: $font-weight-normal;
|
||||
}
|
||||
|
||||
.mini {
|
||||
font-size: floor((100% * $font-size-xs / $font-size-base));
|
||||
font-size: $font-size-xs;
|
||||
font-weight: $font-weight-normal;
|
||||
}
|
||||
|
||||
|
@ -7,12 +7,17 @@
|
||||
//
|
||||
// Colors
|
||||
//
|
||||
$brand-main-blue: #003C69;
|
||||
$brand-main-black: #000000;
|
||||
$brand-main-white: #FFFFFF;
|
||||
//$brand-main-blue: #003C69 !default;
|
||||
$brand-main-blue: #275B82 !default;
|
||||
$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: #55595c !default;
|
||||
$gray: $brand-main-gray !default;
|
||||
$gray-light: #818a91 !default;
|
||||
$gray-lighter: #eceeef !default;
|
||||
$gray-lightest: #f7f7f9 !default;
|
||||
@ -40,9 +45,9 @@ $font-weight-base: $font-weight-light !default;
|
||||
$font-size-root: 16px !default;
|
||||
|
||||
$font-size-base: 1rem !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-lg: 1.25rem !default;
|
||||
$font-size-sm: 0.875rem !default;
|
||||
$font-size-xs: 0.75rem !default;
|
||||
|
||||
$font-size-h1: 3rem !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-weight: $font-weight-light !default;
|
||||
$headings-line-height: 1.2 !default;
|
||||
$headings-color: $brand-main-blue !default;
|
||||
$headings-color: $brand-main-gray !default;
|
||||
|
||||
|
||||
//
|
||||
// Scaffolding
|
||||
//
|
||||
$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;
|
||||
|
||||
|
||||
|
@ -8,21 +8,42 @@
|
||||
text-align: center;
|
||||
overflow: hidden;
|
||||
position: relative;
|
||||
text-shadow: 0 1px 0 rgba(0,0,0,.3);
|
||||
|
||||
// background
|
||||
background: url('../img/photo2.jpg') no-repeat center center;
|
||||
background: url('../img/photo1.jpg') no-repeat center bottom;
|
||||
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) {
|
||||
height: 85vh;
|
||||
max-height: 680px;
|
||||
height: 100vh;
|
||||
}
|
||||
|
||||
.logo {
|
||||
fill-opacity: .7;
|
||||
fill-opacity: .6;
|
||||
margin: auto;
|
||||
margin-top: -($spacer * 6);
|
||||
margin-bottom: $spacer;
|
||||
margin-top: -($spacer * 8);
|
||||
margin-bottom: ($spacer * 2);
|
||||
max-width: 31em;
|
||||
}
|
||||
|
||||
@ -31,16 +52,40 @@
|
||||
font-size: $font-size-h1;
|
||||
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 {
|
||||
text-align: center;
|
||||
border-bottom: 1px solid lighten($brand-main-gray, 40%);
|
||||
|
||||
.icon {
|
||||
display: block;
|
||||
margin: auto;
|
||||
margin-bottom: $spacer;
|
||||
}
|
||||
}
|
||||
|
||||
|
||||
|
||||
.section-earlyaccess {
|
||||
|
||||
form {
|
||||
|
@ -0,0 +1,6 @@
|
||||
|
||||
<footer class="footer" role="contentinfo">
|
||||
<div class="row">
|
||||
<small>© {{ site.time | date: "%Y" }} Bigchain</small>
|
||||
</div>
|
||||
</footer>
|
@ -6,37 +6,61 @@ front_page: true
|
||||
|
||||
<header class="section hero">
|
||||
<div class="row">
|
||||
<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>
|
||||
<a href="#earlyaccess" class="btn btn-secondary-outline">Get Early Access</a>
|
||||
<div class="hero__content">
|
||||
<svg class="logo 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>
|
||||
<a href="#earlyaccess" class="btn btn-secondary-outline">Get Early Access</a>
|
||||
</div>
|
||||
</div>
|
||||
</header>
|
||||
|
||||
<section class="section section-benchmarks background--blue">
|
||||
<section class="section section-benchmarks">
|
||||
<div class="row">
|
||||
<header class="section-header">
|
||||
<h1 class="section-title">Key Features</h1>
|
||||
</header>
|
||||
<div class="section-description">
|
||||
<div class="grid grid--gutters">
|
||||
<p class="grid__col">100,000 transactions per second and climbing</p>
|
||||
<p class="grid__col">Petabyte Capacity</p>
|
||||
<p class="grid__col">Open Source</p>
|
||||
<p class="grid__col">
|
||||
<svg class="icon">
|
||||
<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>
|
||||
</section>
|
||||
|
||||
<section class="section">
|
||||
<section class="section section-whitepaper">
|
||||
<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>
|
||||
</div>
|
||||
</section>
|
||||
|
||||
<section id="earlyaccess" class="section section-earlyaccess background--black">
|
||||
<section id="earlyaccess" class="section section-earlyaccess background--gray">
|
||||
<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>
|
||||
|
||||
<form action="" id="form-earlyaccess" class="js-parsley">
|
||||
|
Loading…
Reference in New Issue
Block a user