1
0
mirror of https://github.com/ipdb/website.git synced 2024-11-14 09:14:48 +01:00

more minimal Get Started section

This commit is contained in:
Matthias Kretschmann 2017-09-05 11:58:40 +02:00
parent ea5d9bbb5e
commit 688a878124
Signed by: m
GPG Key ID: 606EEEF3C479A91F
3 changed files with 29 additions and 30 deletions

View File

@ -51,7 +51,7 @@
text-align: center; text-align: center;
margin-top: $spacer * 3; margin-top: $spacer * 3;
padding-top: $spacer * 2; padding-top: $spacer * 2;
border-top: 1px solid darken($brand-05, 8%); border-top: .1rem solid darken($brand-05, 8%);
.button + .button { .button + .button {
margin-left: $spacer * 2; margin-left: $spacer * 2;

View File

@ -186,7 +186,11 @@
.getstarted-bigchaindb { .getstarted-bigchaindb {
padding-top: $spacer * 3; padding-top: $spacer * 3;
margin-top: $spacer * 3; margin-top: $spacer * 3;
border-top: 1px solid darken($brand-05, 8%); border-top: .1rem solid darken($brand-05, 8%);
.grid {
margin-bottom: 0;
}
} }
.getstarted { .getstarted {
@ -194,44 +198,38 @@
flex-wrap: wrap; flex-wrap: wrap;
align-items: flex-start; align-items: flex-start;
height: 100%; height: 100%;
padding: $spacer; color: $text-color;
color: $brand-05;
background: $link-color;
cursor: pointer;
counter-increment: getstarted-steps; counter-increment: getstarted-steps;
padding-left: $spacer * 2;
padding-right: $spacer * 2;
.grid__col:first-child & { .grid__col:first-child & {
border-top-left-radius: $border-radius; border-right: .1rem solid darken($brand-05, 8%);
border-bottom-left-radius: $border-radius; padding-left: 0;
border-right: .2rem solid $brand-05;
} }
.grid__col:last-child & { .grid__col:last-child & {
border-top-right-radius: $border-radius; border-left: .1rem solid darken($brand-05, 8%);
border-bottom-right-radius: $border-radius; padding-right: 0;
border-left: .2rem solid $brand-05;
}
&:hover,
&:focus {
background: darken($link-color, 10%);
color: $brand-05;
}
code {
color: inherit;
} }
} }
.getstarted__title { .getstarted__title {
font-size: $font-size-h3; font-size: $font-size-h4;
color: #fff; margin-bottom: $spacer / 4;
margin-bottom: $spacer / 3;
a & {
color: $link-color;
&:after {
content: '';
}
}
&:before { &:before {
content: counter(getstarted-steps); content: counter(getstarted-steps);
display: block; display: block;
background: rgba($brand-05, .3); background: rgba($brand-02, .3);
width: 1.75rem; width: 1.75rem;
height: 1.75rem; height: 1.75rem;
border-radius: 50%; border-radius: 50%;
@ -240,6 +238,7 @@
font-size: $font-size-base; font-size: $font-size-base;
font-weight: $font-weight-bold; font-weight: $font-weight-bold;
margin-bottom: $spacer / 1.5; margin-bottom: $spacer / 1.5;
color: $text-color;
} }
} }

View File

@ -188,10 +188,10 @@ css: page-front
</a> </a>
</div> </div>
<div class="grid__col"> <div class="grid__col">
<a class="getstarted" href=""> <div class="getstarted">
<h2 class="getstarted__title">Add your app</h2> <h2 class="getstarted__title">Get your API credentials</h2>
<p class="getstarted__text">Add your app and receive your <code>app_id</code> &amp; <code>app_key</code>.</p> <p class="getstarted__text">After signing up, you will receive your <code>app_id</code> &amp; <code>app_key</code>.</p>
</a> </div>
</div> </div>
<div class="grid__col"> <div class="grid__col">
<a class="getstarted" href="https://www.bigchaindb.com/getstarted/#drivers"> <a class="getstarted" href="https://www.bigchaindb.com/getstarted/#drivers">