basic sections styling

This commit is contained in:
Matthias Kretschmann 2017-08-24 12:02:34 +02:00
parent a1da29e17b
commit 60f9873f69
Signed by: m
GPG Key ID: 606EEEF3C479A91F
3 changed files with 78 additions and 40 deletions

View File

@ -0,0 +1,28 @@
.section {
padding-top: $spacer * 2;
padding-bottom: $spacer * 2;
// handling long text, like URLs
overflow-wrap: break-word;
word-wrap: break-word;
word-break: break-word;
text-rendering: optimizeLegibility;
p:last-child {
margin-bottom: 0;
}
}
.section__header {
margin-bottom: $spacer;
}
.section__title {
font-size: $font-size-h2;
margin: 0;
}
.section__description {
font-size: $font-size-large;
margin-bottom: 0;
}

View File

@ -3,4 +3,5 @@
// Components
@import 'grid';
@import 'sections';
@import 'hero';

View File

@ -15,69 +15,78 @@ for the decentralized stack</h1>
<section class="section section--intro">
<header class="section__header">
<h1 class="section__title">A planetary-scale blockchain database</h1>
<p class="section__description">The distributed, permanent web is evolving and needs a decentralized database. We are that database.</p>
</header>
<div class="row">
<header class="section__header">
<h1 class="section__title">A planetary-scale blockchain database</h1>
<p class="section__description">The distributed, permanent web is evolving and needs a decentralized database. We are that database.</p>
</header>
<p>IPDB is a planetary-scale blockchain database built on BigchainDB. Its a ready-to-use public network with a focus on strong governance. It shares all the features of BigchainDB to make developers lives easier.</p>
<p>IPDB is a planetary-scale blockchain database built on BigchainDB. Its a ready-to-use public network with a focus on strong governance. It shares all the features of BigchainDB to make developers lives easier.</p>
<a href="" class="button button--primary">Sign up for free (testnet)</a>
<a href="" class="button button--primary">Read IPDB Documentation</a>
<a href="" class="button button--primary">Sign up for free (testnet)</a>
<a href="" class="button button--primary">Read IPDB Documentation</a>
</div>
</section>
<section class="section section--foundation">
<header class="section__header">
<h1 class="section__title">IPDB Foundation: human-scale governance</h1>
<p class="section__description">IPDB relies on caretakers to run the BigchainDB nodes that store and validate transactions. The IPDB Caretakers are the members of the IPDB Foundation and … summarize Jurisdictional diversity & Not for profit</p>
</header>
<div class="row">
<header class="section__header">
<h1 class="section__title">IPDB Foundation: human-scale governance</h1>
<p class="section__description">IPDB relies on caretakers to run the BigchainDB nodes that store and validate transactions. The IPDB Caretakers are the members of the IPDB Foundation and … summarize Jurisdictional diversity & Not for profit</p>
</header>
<div class="cartakers">
<h2 class="cartakers__title">Current Caretakers</h2>
<div class="cartakers">
<h2 class="cartakers__title">Current Caretakers</h2>
</div>
<a href="/foundation/" class="button button--primary">Learn about IPDB Foundation and its caretakers</a>
</div>
<a href="/foundation/" class="button button--primary">Learn about IPDB Foundation and its caretakers</a>
</section>
<section class="section section--roadmap">
<header class="section__header">
<h1 class="section__title">Roadmap</h1>
<p class="section__description">The IPDB rollout plan follows six steps. First, a test network for demos, then for invited users, and then for the general public. When the test phase is complete, a production network will be launched in the same sequence.</p>
</header>
<div class="row">
<header class="section__header">
<h1 class="section__title">Roadmap</h1>
<p class="section__description">The IPDB rollout plan follows six steps. First, a test network for demos, then for invited users, and then for the general public. When the test phase is complete, a production network will be launched in the same sequence.</p>
</header>
<div class="roadmap">
<div class="roadmap">
</div>
</div>
</section>
<section class="section section--getstarted">
<header class="section__header">
<h1 class="section__title">Get started</h1>
<p class="section__description">GET https://test.ipdb.io/api/</p>
</header>
<div class="row">
<header class="section__header">
<h1 class="section__title">Get started</h1>
<p class="section__description">GET https://test.ipdb.io/api/</p>
</header>
</div>
</section>
<section class="section section--connect">
<header class="section__header">
<h1 class="section__title">Stay connected</h1>
<p class="section__description">Stalk us like there's no tomorrow.</p>
</header>
<div class="row">
<header class="section__header">
<h1 class="section__title">Stay connected</h1>
<p class="section__description">Stalk us like there's no tomorrow.</p>
</header>
<div class="connect connect--blog">
<h2 class="connect__title">From the blog</h2>
<a href="https://blog.ipdb.io" class="button button--primary">IPDB Blog</a>
<div class="connect connect--blog">
<h2 class="connect__title">From the blog</h2>
<a href="https://blog.ipdb.io" class="button button--primary">IPDB Blog</a>
</div>
<div class="connect connect--newsletter">
<h2 class="connect__title">Newsletter</h2>
</div>
<div class="connect connect--social">
<h2 class="connect__title">Follow</h2>
</div>
</div>
<div class="connect connect--newsletter">
<h2 class="connect__title">Newsletter</h2>
</div>
<div class="connect connect--social">
<h2 class="connect__title">Follow</h2>
</div>
</section>