New CSS grid layout

app/styles/_layout.scss

@@ -1,11 +1,36 @@
 #topbar {
+  height: 3rem;
+}
+
+main {
+  padding: 1rem;
+
+  &#index {
+    width: 100%;
+    display: grid;
+    grid-row-gap: 2rem;
+    grid-template-areas:
+      "people"
+      "contributions";
+  }
+}
+
+@media (min-width: 550px) {
+  main {
+    &#index {
+      grid-column-gap: 4rem;
+      grid-row-gap: 2rem;
+      grid-template-columns: 2fr 4fr;
+      grid-template-areas:
+      "people contributions"
+    }
+  }
 }
 
 main section {
-  @include outer-container;
   margin-bottom: 8rem;
   &:first-of-type {
-    margin-top: 6rem;
+    margin-top: 2rem;
   }
 
   @include media($mobile) {
@@ -16,19 +41,11 @@ main section {
   }
 
   header {
-    @include span-columns(12);
     padding-bottom: 3rem;
     text-align: center;
-    // background-color: purple;
 
     @include media($mobile) {
-      @include span-columns(10);
-      @include shift(1);
       padding-bottom: 2rem;
     }
-
-    div.content {
-      @include span-columns(12);
-    }
   }
 }

app/styles/app.scss

@@ -43,14 +43,11 @@ h1, h2, h3, h4, h5, input, button {
 
 section {
   h2 {
-    font-size: 2.8rem;
-    color: $primaryColor;
-    @include media($mobile) {
     font-size: 2rem;
-    }
+    color: $primaryColor;
   }
 
-  &#contributors {
+  &#people {
     .content {
       p.stats {
         padding-top: 3rem;

app/styles/settings/_neat.scss

@@ -2,4 +2,4 @@
 // $visual-grid-color: red;
 // $visual-grid-index: front;
 // $visual-grid-opacity: 0.5;
-$max-width: em(500, 12);
+$max-width: em(1200, 12);

app/templates/application.hbs

@@ -12,6 +12,5 @@
     {{/if}}
   </section>
 </header>
-<main id="content">
+
 {{outlet}}
-</main>

app/templates/index.hbs

@@ -1,6 +1,8 @@
-<section id="contributors">
+<main id="index">
+
+  <section id="people">
     <header>
-    <h2>Kosmos Contributors</h2>
+      <h2>Contributors</h2>
     </header>
     <div class="content">
       {{contributor-list contributors=contributorsSorted}}
@@ -12,10 +14,11 @@
     </div>
   </section>
 
+  <div id="contributions">
     {{#if proposalsOpen}}
       <section id="proposals-open">
         <header>
-      <h2>Open Proposals</h2>
+          <h2>Unconfirmed Contributions</h2>
         </header>
         <div class="content">
           {{!-- TODO: We need a better naming for kredits.hasAccounts --}}
@@ -35,7 +38,7 @@
 
     <section id="proposals-closed">
       <header>
-    <h2>Closed Proposals</h2>
+        <h2>Confirmed Contributions</h2>
       </header>
       <div class="content">
         {{proposal-list proposals=proposalsClosedSorted
@@ -49,6 +52,7 @@
         {{/if}}
       </div>
     </section>
+  </div>
 
   <section id="add-contributor">
     <header>
@@ -63,3 +67,5 @@
       {{/if}}
     </div>
   </section>
+
+</main>