hero updates and general layout work

site/assets/scss/components/_hero.scss

@@ -1,9 +1,62 @@
 .hero {
+  display: flex;
   position: relative;
-  margin: 0;
+  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;
+  }
+
+  .blue {
+    background-color: rgba($blue, 0.75);
+  }
+
+  .dark-blue {
+    background-color: rgba($dark-blue, 0.75);
+  }
+
+  .yellow {
+    background-color: rgba($yellow, 0.75);
+    color: $copy-dark;
+  }
+
+  .orange {
+    background-color: rgba($orange, 0.75);
+  }
+
+  .red {
+    background-color: rgba($red, 0.75);
+  }
+}
+
+@media screen and (min-width: 426px) {
+  .hero {
+    h1 {
+      flex: 0 0 auto;
+      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

@@ -1,5 +1,30 @@
+body {
+  min-width: 300px;
+}
+
 header,
-main,
 footer {
+  margin: 0;
   padding: 0;
 }
+
+main {
+  margin: 0 $gutter;
+  padding: 0;
+}
+
+@media screen and (min-width: 426px) {
+  footer,
+  main {
+    margin: 0 auto;
+    width: 425px;
+  }
+}
+
+@media screen and (min-width: 768px) {
+  footer,
+  main {
+    width: calc(100% * 0.809);
+    max-width: 860px;
+  }
+}

site/assets/scss/elements/_typography.scss

@@ -2,14 +2,13 @@ html,
 body {
   @include font-default;
   background-color: $light;
-  color: $black;
+  color: $copy-dark;
 }
 
 .h1,
 h1 {
   @include font-roboto;
   margin: 0 0 ($gutter / 2);
-  background-color: $light-grey;
   padding: 8px 0;
   width: 100%;
   font-size: 40px;
@@ -71,7 +70,8 @@ a {
 
   &:hover,
   &:active {
-    text-decoration: underline;
+    background-color: $white;
+    text-decoration: none;
     color: $dark-blue;
   }
 }

site/assets/scss/settings/_colors.scss

@@ -9,3 +9,6 @@ $orange:     rgba(233, 114, 76,  1);
 $red:        rgba(197, 40,  61,  1);
 $blue:       rgba(37,  95,  133, 1);
 $dark-blue:  rgba(24,  48,  89,  1);
+
+$copy-light: $white;
+$copy-dark: $black;

site/pages/index.hbs

@@ -1,40 +1,62 @@
 ---
-  hero: stock/lake.png
+  heading:
+    img: stock/lake.png
+    copy: I build web things
+    theme: blue
 ---
 
-<h1>I build web things.</h1>
+<section>
+  <h2>I'm Mark Moser</h2>
 
-<p>
+  <p>
-  A well-seasoned web developer with an affinity for clean code,
+    A well-seasoned web developer with an affinity for clean code, workflow
-  workflow optimization, and ruby. I have experiences ranging from
+    optimization, and ruby. I have experiences ranging from HTML prototyping
-  HTML prototyping through designing and executing API architectures.
+    through designing and executing complex API architectures.
-</p>
+  </p>
 
-<p>
+  <p>
-  I highly value quality craftsmanship and want to do great work,
+    I highly value quality craftsmanship and want to do great work,
-  with people who also do great work. I love to explore and learn
+    with people who also do great work. I love to explore and learn
-  about my world. I enjoy being challenged. I take pleasure in
+    about my world. I enjoy being challenged. I take pleasure in
-  providing creative solutions to specific needs, always keeping
+    providing creative solutions to specific needs, always keeping
-  the bigger picture in mind.
+    the bigger picture in mind.
-</p>
+  </p>
+</section>
 
-<h2>Proficiency's</h2>
+<section>
+  <h2>General Proficiency's</h2>
 
-<p>
+  <div class="fifty">
-  Well versed in many web development tool chains, my strengths
+    <p>
-  include Ruby, JavaScript, SCSS, SQL, and PHP.
+      Well versed in many web development tool chains, my strengths
-</p>
+      include Ruby, JavaScript, SCSS, SQL, and PHP.
+    </p>
 
-<ul>
+    <div class="pie">
-  <li>5/5 HTML Prototyping</li>
+      <ul>
-  <li>5/5 Ruby on Rails</li>
+        <li>Ruby</li>
-  <li>4/5 Linux Server Administration</li>
+        <li>JavaScript</li>
-  <li>4/5 Front-End Dev Tool chains</li>
+        <li>CSS</li>
-  <li>4/5 PHP Development</li>
+        <li>SQL</li>
-  <li>4/5 Information Architecture</li>
+        <li>PHP</li>
-  <li>3/5 UX Consulting</li>
+      </ul>
-  <li>5/5 CSS (and SCSS)</li>
+    </div>
-  <li>4/5 JavaScript</li>
+  </div>
-  <li>5/5 SQL</li>
+</section>
-  <li>5/5 Ruby</li>
+
-</ul>
+<section>
+  <h2>Back-end Proficiency's</h2>
+  <ul>
+    <li>5/5 HTML Prototyping</li>
+    <li>5/5 Ruby on Rails</li>
+    <li>4/5 Linux Server Administration</li>
+    <li>4/5 Front-End Dev Tool chains</li>
+    <li>4/5 PHP Development</li>
+    <li>4/5 Information Architecture</li>
+    <li>3/5 UX Consulting</li>
+    <li>5/5 CSS (and SCSS)</li>
+    <li>4/5 JavaScript</li>
+    <li>5/5 SQL</li>
+    <li>5/5 Ruby</li>
+  </ul>
+</section>

site/pages/styleguide.hbs

@@ -1,6 +1,9 @@
 ---
-  title: site style guide
+  title: Style guide
-  hero: stock/star_nasa.jpg
+  heading:
+    img: stock/star_nasa.jpg
+    copy: Style guide
+    theme: orange
 ---
 
 <h1>Looking at styling for an h1</h1>

site/partials/hero.hbs

@@ -1,2 +1,3 @@
-<div class="hero" style="background-image: url('{{assets}}/img/{{hero}}');">
+<div class="hero" style="background-image: url('{{assets}}/img/{{heading.img}}');">
+  <h1 class="{{heading.theme}}">{{heading.copy}}</h1>
 </div>

site/partials/nav-foot.hbs

@@ -1,5 +1,6 @@
 <nav class="nav-foot">
   <ul>
+    <li><a href="index.html">home</a></li>
     <li><a href="styleguide.html">styleguide</a></li>
     <li><a href="video.html">video</a></li>
     <li><a href="misc.html">misc</a></li>