From 57fc700baa7e097e63a59574f68688f5e462bb88 Mon Sep 17 00:00:00 2001
From: Jason Costello <hello.costello@gmail.com>
Date: Tue, 4 Apr 2017 15:41:45 -0700
Subject: [PATCH] full-bleed responsive hero

---
 website/source/assets/stylesheets/_home.scss | 36 ++++++++++++++++++--
 website/source/index.html.erb                |  6 ++--
 2 files changed, 35 insertions(+), 7 deletions(-)

diff --git a/website/source/assets/stylesheets/_home.scss b/website/source/assets/stylesheets/_home.scss
index b148d1b76..1e9934e34 100644
--- a/website/source/assets/stylesheets/_home.scss
+++ b/website/source/assets/stylesheets/_home.scss
@@ -45,12 +45,42 @@ $baseline: 20px;
   }
 
   header {
-    .hero {
-      margin: 140px auto 160px auto;
+    display: flex;
+    flex-direction: row;
+    background: url('../images/hero-image.svg') no-repeat;
+
+    @media (max-width: 991px) {
+      align-items: flex-end;
+      padding-top: 60%;
+      background-size: 80%;
+      background-position: top right;
       text-align: center;
+    }
+
+    @media (min-width: 992px) {
+      height: 400px;
+      text-align: left;
+      align-items: center;
+      background-size: 50%;
+      background-position: right;
+    }
+
+    @media (min-width: 1280px) {
+      height: 700px;
+    }
+
+    @media (min-width: 1800px) {
+      background-size: 1054px 700px;
+    }
+
+    .hero {
+      h1 {
+        font-weight: $font-weight-bold;
+        color: $black;
+      }
 
       .button {
-        margin: 5px;
+        margin: 5px 5px 5px 2px;
 
         @media (max-width: 768px) {
           display: block;
diff --git a/website/source/index.html.erb b/website/source/index.html.erb
index 57056ef28..8f90761ac 100644
--- a/website/source/index.html.erb
+++ b/website/source/index.html.erb
@@ -8,7 +8,7 @@ description: |-
   <div class="container hero">
     <div class="row">
       <div class="col-md-6">
-        <%= inline_svg "logo-text.svg", height: 120, class: "logo" %>
+        <!-- <%= inline_svg "logo-text.svg", height: 120, class: "logo" %> -->
 
         <h1>
           Build Automated Machine Images
@@ -17,9 +17,7 @@ description: |-
         <a class="button primary" href="/intro/index.html">Get Started</a>
         <a class="button" href="/downloads.html">Download <%= latest_version %></a>
       </div>
-      <div class="col-md-6">
-        <%= inline_svg "hero-image.svg" %>
-      </div>
+
     </div>
   </div>
 </header>