From b3d509144e291493412907062a477fd6de9a529f Mon Sep 17 00:00:00 2001
From: Mark Moser <markamoser@gmail.com>
Date: Mon, 21 Aug 2017 21:32:07 -0500
Subject: [PATCH] backend

---
 site/assets/scss/components/_fifty.scss |  2 +-
 site/assets/scss/elements/_layout.scss  | 40 ++++++++++++++++++++++---
 site/pages/index.hbs                    |  4 +--
 3 files changed, 39 insertions(+), 7 deletions(-)

diff --git a/site/assets/scss/components/_fifty.scss b/site/assets/scss/components/_fifty.scss
index 225d0d3..63f16e8 100644
--- a/site/assets/scss/components/_fifty.scss
+++ b/site/assets/scss/components/_fifty.scss
@@ -11,7 +11,7 @@
     flex-wrap: nowrap;
 
     > * {
-      margin: 0 $gutter;
+      margin: 0 $gutter 0 0;
     }
 
     &.fifty-reversed {
diff --git a/site/assets/scss/elements/_layout.scss b/site/assets/scss/elements/_layout.scss
index 675deb4..8366380 100644
--- a/site/assets/scss/elements/_layout.scss
+++ b/site/assets/scss/elements/_layout.scss
@@ -2,12 +2,16 @@ body {
   min-width: 300px;
 }
 
-header,
-footer {
+header {
   margin: 0;
   padding: 0;
 }
 
+footer {
+  margin: 0;
+  padding: 0 $gutter;
+}
+
 main {
   margin: 0 $gutter;
   padding: 0;
@@ -15,13 +19,28 @@ main {
 
 section {
   margin: ($gutter * 2) 0;
+
+  &:nth-of-type(even) {
+    margin-right: -$gutter;
+    margin-left: -$gutter;
+    background-color: $light-grey;
+    padding: $gutter;
+  }
 }
 
 @media screen and (min-width: 426px) {
-  footer,
   main {
     margin: 0 auto;
-    width: 425px;
+    width: 100%;
+  }
+
+  footer,
+  section {
+    padding: $gutter calc((100% - 425px) / 2);
+
+    &:nth-of-type(even) {
+      padding: $gutter calc(((100% - 425px) / 2) + #{$gutter});
+    }
   }
 }
 
@@ -32,8 +51,21 @@ section {
     max-width: 860px;
   }
 
+  footer {
+    margin: 0 auto;
+    padding: 0;
+  }
+
   section {
     margin: ($gutter * 4) 0;
+    padding: $gutter 0;
+    width: auto;
+
+    &:nth-of-type(even) {
+      margin-right: calc(-100% * 0.809 / 2);
+      margin-left: calc(-100% * 0.809 / 2);
+      padding: ($gutter * 2) calc(100% * 0.809 / 2);
+    }
   }
 
 }
diff --git a/site/pages/index.hbs b/site/pages/index.hbs
index 34a7549..10cde15 100644
--- a/site/pages/index.hbs
+++ b/site/pages/index.hbs
@@ -57,8 +57,8 @@
 
 <section class="fifty fifty-reversed">
   <div>
-    <h2>Back-End Proficiency's</h2>
-    <p>Nullam id dolor id nibh ultricies vehicula ut id elit. Aenean lacinia bibendum nulla sed consectetur. Vivamus sagittis lacus vel augue laoreet rutrum faucibus dolor auctor. Morbi leo risus, porta ac consectetur ac, vestibulum at eros. Cras mattis consectetur purus sit amet fermentum. Curabitur blandit tempus porttitor. Cum sociis natoque penatibus et magnis dis parturient montes, nascetur ridiculus mus.</p>
+    <h2>Server Side</h2>
+    <p>Clearly, I really like working in ruby. It is my go to language whenever I need to spin up a project. I usually go for rails after considering Sinatra noting the many great conveniences. That isn't all I work with though. Before I fell in love with ruby, I was quite skilled with PHP. I have created my share of WordPress themes, and even a handful of plugins for site special need.</p>
   </div>
   <div class="pie">
     <ul>