bigchaindb
/
site
mirror of https://github.com/bigchaindb/site.git
1
0
Fork 0
Code Releases Activity

typographic tweaks, learn more secondary cta, whitepaper section

This commit is contained in:
Matthias Kretschmann 2015-12-20 20:16:49 +01:00
parent 99a9d6289f
commit 2312390cdb
7 changed files with 94 additions and 12 deletions
Show Stats Download Patch File Download Diff File Expand all files Collapse all files

14
_src/_assets/images/icon-caret.svg Normal file
View File

@ -0,0 +1,14 @@
<!-- 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="42.3px" height="22.2px" viewBox="0 0 42.3 22.2" style="enable-background:new 0 0 42.3 22.2;"
xml:space="preserve">
<style type="text/css">
.st0{fill:none;stroke:#231F20;stroke-width:2;stroke-linecap:round;stroke-linejoin:round;stroke-miterlimit:10;}
</style>
<defs>
</defs>
<g>
<polyline class="st0" points="41.3,1 21.2,21.2 1,1 "/>
</g>
</svg>
Side by Side

After

Width:  |  Height:  |  Size: 600 B

21
_src/_assets/images/icon-documents.svg Normal file
View File

@ -0,0 +1,21 @@
<!-- 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="44px" height="60px" viewBox="0 0 44 60" style="enable-background:new 0 0 44 60;" xml:space="preserve">
<style type="text/css">
.st0{fill:none;stroke:#231F20;stroke-width:2;stroke-linecap:round;stroke-linejoin:round;stroke-miterlimit:10;}
.st1{fill:none;stroke:#231F20;stroke-width:2;stroke-linejoin:round;stroke-miterlimit:10;}
.st2{fill:none;stroke:#231F20;stroke-width:2;stroke-linecap:round;stroke-miterlimit:10;}
</style>
<defs>
</defs>
<g>
<polygon class="st0" points="43,59 1,59 1,1 29,1 43,15 "/>
<polyline class="st1" points="29,1 29,15 43,15 "/>
<line class="st2" x1="11.2" y1="19" x2="22.6" y2="19"/>
<line class="st2" x1="11.2" y1="27" x2="33.9" y2="27"/>
<line class="st2" x1="11.2" y1="35" x2="33.9" y2="35"/>
<line class="st2" x1="11.2" y1="43" x2="33.9" y2="43"/>
<line class="st2" x1="11.2" y1="51" x2="33.9" y2="51"/>
</g>
</svg>
Side by Side

After

Width:  |  Height:  |  Size: 1.1 KiB

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

@ -14,7 +14,7 @@
vertical-align: middle;
cursor: pointer;
user-select: none;
border: 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;

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

@ -6,6 +6,7 @@
$active-border: darken($border, 12%);
color: $color !important;
background: $background;
border-color: $border;
&:hover,
&:focus {

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

@ -33,16 +33,16 @@ $brand-danger: #d9534f !default;
// Typography
//
$font-family-fira: 'Fira Sans', sans-serif !default;
$font-family-avenir: 'Avenir', 'Helvetica Neue', 'Arial', sans-serif !default;
$font-family-avenir: 'Avenir Next', 'Helvetica Neue', 'Arial', sans-serif !default;
$font-family-monospace: Menlo, Monaco, Consolas, "Courier New", monospace !default;
$font-family-base: $font-family-avenir !default;
$font-weight-light: 300 !default;
$font-weight-normal: 400 !default;
$font-weight-bold: 600 !default;
$font-weight-base: $font-weight-light !default;
$font-weight-base: $font-weight-normal !default;
$font-size-root: 16px !default;
$font-size-root: 18px !default;
$font-size-base: 1rem !default;
$font-size-lg: 1.25rem !default;
@ -112,7 +112,7 @@ $component-active-bg: $brand-primary !default;
//
$btn-padding-x: 1.5rem !default;
$btn-padding-y: .375rem !default;
$btn-font-weight: $font-weight-light !default;
$btn-font-weight: $font-weight-normal !default;
$btn-primary-color: #fff !default;
$btn-primary-bg: $brand-primary !default;
@ -169,4 +169,4 @@ $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;
$input-font-weight: $font-weight-normal !default;

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

@ -8,7 +8,7 @@
text-align: center;
overflow: hidden;
position: relative;
text-shadow: 0 1px 0 rgba(0,0,0,.3);
text-shadow: 0 1px 0 rgba(0,0,0,.1);
// background
background: url('../img/photo1.jpg') no-repeat center bottom;
@ -55,6 +55,24 @@
&:after { display: none }
}
.btn-link {
color: #fff;
margin-top: ($spacer * 3);
opacity: .7;
&:hover,
&:focus { opacity: 1; }
// the caret
.icon {
width: 12px;
height: 12px;
stroke: #fff;
display: block;
margin: auto;
}
}
.btn {
&:hover,
&:focus,
@ -64,16 +82,21 @@
}
// intro animation
.logo {
.logo,
.section-title,
.btn {
@extend .animation-slide-in-from-bottom;
animation-duration: 1s;
animation-fill-mode: backwards;
}
.logo {
animation-timing-function: $timing-default;
}
.section-title,
.btn {
@extend .animation-slide-in-from-bottom;
animation-fill-mode: backwards;
animation-play-state: paused;
}
@ -102,6 +125,19 @@
}
}
.section-whitepaper {
.icon {
stroke: $brand-main-gray;
stroke-dasharray: 4,4;
opacity: .3;
display: block;
margin: auto;
margin-bottom: $spacer;
}
}
.section-earlyaccess {
form {

16
_src/index.html
View File

@ -12,12 +12,17 @@ front_page: true
<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>
<p>
<a href="#earlyaccess" class="btn btn-secondary-outline">Get Early Access</a>
</p>
<a href="#benchmarks" class="btn btn-link btn-sm">Learn More <svg class="icon">
<use xlink:href="/assets/img/sprite.svg#icon-caret"></use>
</svg></a>
</div>
</div>
</header>
<section class="section section-benchmarks">
<section id="benchmarks" class="section section-benchmarks">
<div class="row">
<header class="section-header">
<h1 class="section-title">Key Features</h1>
@ -52,7 +57,12 @@ front_page: true
<header class="section-header">
<h1 class="section-title">Whitepaper</h1>
</header>
<p class="section-description">Coming soon</p>
<p class="section-description">
<svg class="icon">
<use xlink:href="/assets/img/sprite.svg#icon-documents"></use>
</svg>
Coming soon
</p>
</div>
</section>