bigchaindb/site
1
0
Fork 0
mirror of https://github.com/bigchaindb/site.git synced 2025-02-14 21:10:28 +01:00
Code Releases Activity

unify server & drivers backgrounds

Browse Source
This commit is contained in:
Matthias Kretschmann 2017-06-27 01:02:54 +02:00
parent 0b47c644d8
commit b3be57a555
Signed by: m
GPG Key ID: 606EEEF3C479A91F
2 changed files with 78 additions and 73 deletions
Show Stats Download Patch File Download Diff File Expand all files Collapse all files

37
_src/_assets/styles/_page-getstarted.scss
View File

@ -38,7 +38,7 @@
height: 3rem; height: 3rem;
border-radius: 50%; border-radius: 50%;
font-size: $font-size-lg; font-size: $font-size-lg;
vertical-align: 0.4rem; vertical-align: .4rem;
background: $headings-color; background: $headings-color;
color: $gray; color: $gray;
font-weight: 400; font-weight: 400;
@ -69,6 +69,10 @@
// //
.section--server { .section--server {
padding-bottom: 0; padding-bottom: 0;
.btn {
margin-top: $spacer / 2;
}
} }
.starbase { .starbase {
@ -101,7 +105,7 @@
position: relative; position: relative;
z-index: 1; z-index: 1;
margin-bottom: -1.45%; margin-bottom: -1.45%;
opacity: 0.7; opacity: .7;
} }
// surface layer // surface layer
@ -112,24 +116,16 @@
left: -5%; left: -5%;
right: -5%; right: -5%;
bottom: 0; bottom: 0;
background: #5d6f82; background: lighten($gray, 8%);
height: 24%; height: 24%;
width: calc(100vw + 10%); width: calc(100vw + 10%);
} }
} }
.starbase--drivers { .starbase--drivers {
margin-bottom: $spacer * 2;
// horizon layer
&:before {
background: darken($gray, 3%);
}
.starbase__image { .starbase__image {
// surface layer // surface layer
&:before { &:before {
background: lighten($gray, 2%);
height: 37%; height: 37%;
} }
@ -140,15 +136,16 @@
} }
} }
.serverchoice { .choice {
background: #536476; background: lighten($gray, 3%);
padding-top: $spacer * 4; padding-top: $spacer * 4;
padding-bottom: $spacer * 4; padding-bottom: $spacer * 4;
} }
.serverchoice__title { .choice__title {
font-size: $font-size-h3; font-size: $font-size-h3;
margin-top: 0; margin-top: 0;
margin-bottom: $spacer * $line-height;
// the bottom line // the bottom line
&:after { &:after {
@ -156,7 +153,7 @@
height: 2px; height: 2px;
width: 3rem; width: 3rem;
display: block; display: block;
margin: ($spacer * 2) 0 0; margin: ($spacer * $line-height) 0 0;
background: $gray-light; background: $gray-light;
} }
} }
@ -169,6 +166,14 @@
} }
} }
.section--drivers {
padding-bottom: 0;
.choice__title {
margin-bottom: $spacer * 2;
}
}
.driver { .driver {
padding: $spacer; padding: $spacer;
background: rgba($brand-main-blue-light, .15); background: rgba($brand-main-blue-light, .15);
@ -231,7 +236,7 @@
} }
.driver__version { .driver__version {
opacity: 0.75; opacity: .75;
} }
.driver--community { .driver--community {

114
_src/start.html
View File

@ -97,7 +97,7 @@ redirect_from:
</header> </header>
</div> </div>
<aside class="starbase"> <aside class="starbase starbase--server">
<div class="row row--wide"> <div class="row row--wide">
<figure class="starbase__image"> <figure class="starbase__image">
<img class="img--responsive" src="/assets/img/starbase.svg" alt="Starbase" width="1071" height="328"> <img class="img--responsive" src="/assets/img/starbase.svg" alt="Starbase" width="1071" height="328">
@ -105,18 +105,18 @@ redirect_from:
</div> </div>
</aside> </aside>
<section class="serverchoice"> <section class="choice">
<div class="row row--wide"> <div class="row row--wide">
<div class="grid grid--full grid-small--half grid--gutters"> <div class="grid grid--full grid-small--half grid--gutters">
<div class="grid__col"> <div class="grid__col">
<span class="pretitle">Managed</span> <span class="pretitle">Managed</span>
<h2 class="serverchoice__title">IPDB: the public BigchainDB network</h2> <h2 class="choice__title">IPDB: the public BigchainDB network</h2>
<p>No need for any installation. Sign up and connect instantly, we handle running a BigchainDB production node for you.</p> <p>No need for any installation. Sign up and connect instantly, we handle running a BigchainDB production node for you.</p>
<a class="btn btn-primary" href="">Get IPDB</a> <a class="btn btn-primary" href="">Get IPDB</a>
</div> </div>
<div class="grid__col"> <div class="grid__col">
<span class="pretitle">Self-hosted</span> <span class="pretitle">Self-hosted</span>
<h2 class="serverchoice__title">BigchainDB Server</h2> <h2 class="choice__title">BigchainDB Server</h2>
<p>If you want to run your own BigchainDB instance you can either install on Linux or with Docker on any system.</p> <p>If you want to run your own BigchainDB instance you can either install on Linux or with Docker on any system.</p>
<a class="btn btn-secondary" href="">Install BigchainDB Server</a> <a class="btn btn-secondary" href="">Install BigchainDB Server</a>
</div> </div>
@ -126,7 +126,7 @@ redirect_from:
</section> </section>
<section class="section section--drivers" id="drivers"> <section class="section section--drivers background--darker" id="drivers">
<div class="row row--wide"> <div class="row row--wide">
<header class="section-header text-left"> <header class="section-header text-left">
<h1 class="section-title section-title--numbered"><span>2</span> Drivers &amp; Tools</h1> <h1 class="section-title section-title--numbered"><span>2</span> Drivers &amp; Tools</h1>
@ -142,81 +142,81 @@ redirect_from:
</div> </div>
</aside> </aside>
<div class="row row--wide"> <section class="choice">
<div class="row row--wide">
<div class="grid grid--full grid-small--half grid--gutters"> <div class="grid grid--full grid-small--half grid--gutters">
<div class="grid__col"> <div class="grid__col">
<h3>Official drivers</h3> <h3 class="choice__title">Official drivers</h3>
<div class="grid grid--full grid-small--half grid--gutters"> <div class="grid grid--full grid-small--half grid--gutters">
{% for driver in site.data.drivers.official %} {% for driver in site.data.drivers.official %}
<div class="grid__col"> <div class="grid__col">
<a class="driver" href="https://github.com/bigchaindb/{{ driver.repo }}"> <a class="driver" href="https://github.com/bigchaindb/{{ driver.repo }}">
<h2 class="driver__title">{{ driver.title }}</h2> <h2 class="driver__title">{{ driver.title }}</h2>
<svg class="driver__logo"> <svg class="driver__logo">
<use xlink:href="/assets/img/sprite.svg#{{ driver.icon }}"></use> <use xlink:href="/assets/img/sprite.svg#{{ driver.icon }}"></use>
</svg> </svg>
<p class="driver__meta">
<span class="driver__repo">{{ driver.repo }}</span>
<span class="driver__version">{{ driver.version }}</span>
</p>
</a>
</div>
{% endfor %}
<p class="driver__meta">
<span class="driver__repo">{{ driver.repo }}</span>
<span class="driver__version">{{ driver.version }}</span>
</p>
</a>
</div> </div>
{% endfor %}
</div> </div>
<div class="grid__col">
</div> <h3 class="choice__title">Official tools</h3>
<div class="grid__col"> <div class="grid grid--full grid-small--half grid--gutters">
<h3>Official tools</h3> {% for driver in site.data.drivers.tools %}
<div class="grid grid--full grid-small--half grid--gutters"> <div class="grid__col">
<a class="driver" href="https://github.com/bigchaindb/{{ driver.repo }}">
<h2 class="driver__title">{{ driver.title }}</h2>
{% for driver in site.data.drivers.tools %} <p class="driver__meta">
<div class="grid__col"> <span class="driver__repo">{{ driver.repo }}</span>
<a class="driver" href="https://github.com/bigchaindb/{{ driver.repo }}"> <span class="driver__version">{{ driver.version }}</span>
<h2 class="driver__title">{{ driver.title }}</h2> </p>
</a>
</div>
{% endfor %}
<p class="driver__meta">
<span class="driver__repo">{{ driver.repo }}</span>
<span class="driver__version">{{ driver.version }}</span>
</p>
</a>
</div> </div>
{% endfor %}
</div> </div>
</div> </div>
</div> </div>
<div class="row row--wide">
<h3 class="choice__title">Community drivers</h3>
<div class="grid grid--half grid-medium--fit grid--gutters">
</div> {% for driver in site.data.drivers.community %}
<div class="grid__col">
<a class="driver driver--community" href="{{ driver.link }}">
<svg class="driver__logo">
<use xlink:href="/assets/img/sprite.svg#{{ driver.icon }}"></use>
</svg>
<h2 class="driver__title">{{ driver.title }}</h2>
<div class="row row--wide"> <p class="driver__meta">
<h3>Community drivers</h3> <span class="driver__repo">{{ driver.repo }}</span>
<div class="grid grid--half grid-medium--fit grid--gutters"> </p>
</a>
</div>
{% endfor %}
{% for driver in site.data.drivers.community %}
<div class="grid__col">
<a class="driver driver--community" href="{{ driver.link }}">
<svg class="driver__logo">
<use xlink:href="/assets/img/sprite.svg#{{ driver.icon }}"></use>
</svg>
<h2 class="driver__title">{{ driver.title }}</h2>
<p class="driver__meta">
<span class="driver__repo">{{ driver.repo }}</span>
</p>
</a>
</div> </div>
{% endfor %}
</div> </div>
</div> </section>
</section> </section>
<section class="section section--docs background--light" id="docs"> <section class="section section--docs background--light" id="docs">