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;
+    font-size: 2rem;
     color: $primaryColor;
-    @include media($mobile) {
-      font-size: 2rem;
-    }
   }
 
-  &#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>
+
+{{outlet}}

app/templates/index.hbs

@@ -1,65 +1,71 @@
-<section id="contributors">
-  <header>
-    <h2>Kosmos Contributors</h2>
-  </header>
-  <div class="content">
-    {{contributor-list contributors=contributorsSorted}}
+<main id="index">
 
-    <p class="stats">
-      <span class="number">{{await kredits.totalSupply}}</span> kredits issued and distributed among
-      <span class="number">{{contributorsWithKredits.length}}</span> contributors.
-    </p>
-  </div>
-</section>
-
-{{#if proposalsOpen}}
-  <section id="proposals-open">
+  <section id="people">
     <header>
-      <h2>Open Proposals</h2>
+      <h2>Contributors</h2>
     </header>
     <div class="content">
-      {{!-- TODO: We need a better naming for kredits.hasAccounts --}}
-      {{proposal-list proposals=proposalsOpenSorted
-                      confirmProposal=(action "confirmProposal")
-                      contractInteractionEnabled=kredits.hasAccounts}}
+      {{contributor-list contributors=contributorsSorted}}
 
-      {{!-- TODO: We need a better naming --}}
-      {{#if kredits.hasAccounts}}
-        <p class="actions">
-          {{#link-to 'proposals.new'}}Create new proposal{{/link-to}}
-        </p>
+      <p class="stats">
+        <span class="number">{{await kredits.totalSupply}}</span> kredits issued and distributed among
+        <span class="number">{{contributorsWithKredits.length}}</span> contributors.
+      </p>
+    </div>
+  </section>
+
+  <div id="contributions">
+    {{#if proposalsOpen}}
+      <section id="proposals-open">
+        <header>
+          <h2>Unconfirmed Contributions</h2>
+        </header>
+        <div class="content">
+          {{!-- TODO: We need a better naming for kredits.hasAccounts --}}
+          {{proposal-list proposals=proposalsOpenSorted
+                          confirmProposal=(action "confirmProposal")
+                          contractInteractionEnabled=kredits.hasAccounts}}
+
+          {{!-- TODO: We need a better naming --}}
+          {{#if kredits.hasAccounts}}
+            <p class="actions">
+              {{#link-to 'proposals.new'}}Create new proposal{{/link-to}}
+            </p>
+          {{/if}}
+        </div>
+      </section>
+    {{/if}}
+
+    <section id="proposals-closed">
+      <header>
+        <h2>Confirmed Contributions</h2>
+      </header>
+      <div class="content">
+        {{proposal-list proposals=proposalsClosedSorted
+                        confirmProposal=(action "confirmProposal")}}
+
+        {{!-- TODO: We need a better naming --}}
+        {{#if kredits.hasAccounts}}
+          <p class="actions">
+            {{#link-to 'proposals.new'}}Create new proposal{{/link-to}}
+          </p>
+        {{/if}}
+      </div>
+    </section>
+  </div>
+
+  <section id="add-contributor">
+    <header>
+      <h2>Add Contributor</h2>
+    </header>
+
+    <div class="content">
+      {{#if kredits.currentUser.isCore}}
+        {{add-contributor contributors=contributors save=(action 'save')}}
+      {{else}}
+        Only core team members can add new contributors. Please ask someone to set you up.
       {{/if}}
     </div>
   </section>
-{{/if}}
 
-<section id="proposals-closed">
-  <header>
-    <h2>Closed Proposals</h2>
-  </header>
-  <div class="content">
-    {{proposal-list proposals=proposalsClosedSorted
-                    confirmProposal=(action "confirmProposal")}}
-
-    {{!-- TODO: We need a better naming --}}
-    {{#if kredits.hasAccounts}}
-      <p class="actions">
-        {{#link-to 'proposals.new'}}Create new proposal{{/link-to}}
-      </p>
-    {{/if}}
-  </div>
-</section>
-
-<section id="add-contributor">
-  <header>
-    <h2>Add Contributor</h2>
-  </header>
-
-  <div class="content">
-    {{#if kredits.currentUser.isCore}}
-      {{add-contributor contributors=contributors save=(action 'save')}}
-    {{else}}
-      Only core team members can add new contributors. Please ask someone to set you up.
-    {{/if}}
-  </div>
-</section>
+</main>