layout changes

site/assets/scss/components/_fifty.scss

@@ -1,13 +1,14 @@
 .fifty {
   display: flex;
   flex-wrap: wrap;
+  align-items: center;
 
   > * {
     flex: 1 1 auto;
     margin: $gutter 0;
   }
 
-  @media screen and (min-width: 768px) {
+  @media screen and (min-width: 650px) {
     flex-wrap: nowrap;
 
     > * {

site/assets/scss/components/_hero.scss

@@ -4,18 +4,15 @@
   align-content: center;
   align-items: center;
   justify-content: center;
-  margin: 0 0 ($gutter * 2);
   background-repeat: no-repeat;
   background-position: center center;
   background-size: cover;
-  padding: 0;
   height: 250px;
 
   h1 {
     flex: 1 1 auto;
     background-color: rgba($blue, 0.75);
     padding: $gutter;
-    width: auto;
     text-align: center;
     color: $copy-light;
   }
@@ -42,20 +39,10 @@
   }
 }
 
-@media screen and (min-width: 426px) {
+@media screen and (min-width: 900px) {
   .hero {
     h1 {
-      flex: 0 0 auto;
+      padding: $gutter calc((100% - 850px) / 2);
-      width: 425px;
-    }
-  }
-}
-
-@media screen and (min-width: 768px) {
-  .hero {
-    h1 {
-      width: calc(100% * 0.809);
-      max-width: 860px;
       text-align: inherit;
     }
   }

site/assets/scss/elements/_layout.scss

@@ -2,70 +2,36 @@ body {
   min-width: 300px;
 }
 
-header {
+header,
+main {
   margin: 0;
   padding: 0;
 }
 
+section {
+  margin-bottom: $gutter;
+  padding: $gutter;
+
+  &:nth-of-type(even) {
+    background-color: $light-grey;
+  }
+}
+
 footer {
   margin: 0;
   padding: 0 $gutter;
 }
 
-main {
+@media screen and (min-width: 900px) {
-  margin: 0 $gutter;
-  padding: 0;
-}
 
   section {
-  margin: ($gutter * 2) 0;
+    padding: ($gutter * 2) calc((100% - 850px) / 2);
-
+    width: 850px;
-  &:nth-of-type(even) {
-    margin-right: -$gutter;
-    margin-left: -$gutter;
-    background-color: $light-grey;
-    padding: $gutter;
-  }
-}
-
-@media screen and (min-width: 426px) {
-  main {
-    margin: 0 auto;
-    width: 100%;
-  }
-
-  footer,
-  section {
-    padding: $gutter calc((100% - 425px) / 2);
-
-    &:nth-of-type(even) {
-      padding: $gutter calc(((100% - 425px) / 2) + #{$gutter});
-    }
-  }
-}
-
-@media screen and (min-width: 768px) {
-  footer,
-  main {
-    width: calc(100% * 0.809);
-    max-width: 860px;
   }
 
   footer {
-    margin: 0 auto;
+    padding: 0 calc((100% - 850px) / 2);
-    padding: 0;
+    width: 850px;
-  }
-
-  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);
-    }
   }
 
 }

site/assets/scss/elements/_typography.scss

@@ -10,7 +10,6 @@ h1 {
   @include font-roboto;
   margin: 0 0 ($gutter / 2);
   padding: 8px 0;
-  width: 100%;
   font-size: 40px;
   font-weight: 300;
 }

site/pages/styleguide.hbs

@@ -6,6 +6,8 @@
     theme: orange
 ---
 
+<section>
+
   <h1>Looking at styling for an h1</h1>
   <p>Cum sociis natoque penatibus et magnis <a href="#sample-anchor">dis parturient montes</a>, nascetur ridiculus mus. Donec sed odio dui. Lorem ipsum dolor sit amet, <strong>consectetur adipiscing elit</strong>. Duis mollis, est non <i>commodo luctus</i>, nisi erat porttitor ligula, eget lacinia odio sem nec elit. Donec sed odio dui. Sed posuere consectetur est at lobortis. Praesent commodo cursus magna, vel scelerisque nisl consectetur et.</p>
   <h2>Looking at styling for an h2</h2>
@@ -56,3 +58,4 @@
     }
   </code>
 
+</section>