basic sections styling

_src/_assets/scss/_sections.scss

@@ -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;
+}

_src/_assets/scss/ipdb.scss

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

_src/index.html

@@ -15,6 +15,7 @@ for the decentralized stack</h1>
 
 
 <section class="section section--intro">
+    <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>
@@ -24,10 +25,12 @@ for the decentralized stack</h1>
 
         <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">
+    <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>
@@ -38,10 +41,12 @@ for the decentralized stack</h1>
         </div>
 
         <a href="/foundation/" class="button button--primary">Learn about IPDB Foundation and its caretakers</a>
+    </div>
 </section>
 
 
 <section class="section section--roadmap">
+    <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>
@@ -50,18 +55,22 @@ for the decentralized stack</h1>
         <div class="roadmap">
 
         </div>
+    </div>
 </section>
 
 
 <section class="section section--getstarted">
+    <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">
+    <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>
@@ -79,5 +88,5 @@ for the decentralized stack</h1>
         <div class="connect connect--social">
             <h2 class="connect__title">Follow</h2>
         </div>
-
+    </div>
 </section>