Merge pull request #3528 from mozilla-services/separate-banner-image

separate banner image

server/src/pages/homepage/view.js

@@ -99,16 +99,17 @@ class Body extends React.Component {
             </nav>
             <div className="banner-spacer" />
             <div className="banner">
-              <div className="container">
+              <div className="banner-image-back" />
+              <div className="banner-container">
                 <div className="banner-content">
                   <h1>Firefox Screenshots</h1>
                   <Localized id="gScreenshotsDescription">
                     <p>Screenshots made simple. Take, save, and share screenshots without leaving Firefox.</p>
                   </Localized>
                   { this.renderGetFirefox() }
                 </div>
+                <div className="banner-image-front" />
               </div>
-              <div className="banner-image" />
             </div>
           </header>
           <Localized id="homePageHowScreenshotsWorks">

static/css/home.scss

@@ -89,18 +89,34 @@ nav {
   align-items: center;
   background-color: #04d1e6;
   display: flex;
+  flex-direction: row-reverse;
   justify-content: flex-start;
   min-height: 587px;
   position: relative;
 }
 
-.banner .container {
-  z-index: 1;
+
+.banner-container {
+  @include flex-container(row, center, center);
+  max-width: 1160px;
+  min-width: 960px;
+  margin: 0 auto;
+  position: relative;
 }
 
-.banner-image {
-  background-image:   url("../img/landing-screenshots_banner.svg");
-  background-position: 75% center;
+.banner-image-front {
+  background-image: url("../img/banner-front.svg");
+  background-position: center center;
+  background-repeat: no-repeat;
+  background-size: 400px auto;
+  flex: 0 0 420px;
+  height: 440px;
+  z-index: 999;
+}
+
+.banner-image-back {
+  background-image: url("../img/banner-back.svg");
+  background-position: center 25%;
   background-repeat: no-repeat;
   position: absolute;
   top: 0;
@@ -111,8 +127,8 @@ nav {
 }
 
 .banner-content {
-  width: 50%;
-  min-width: 380px;
+  min-width: 430px;
+  padding: 10px;
 }
 
 .banner-content h1 {
@@ -125,10 +141,10 @@ nav {
 .banner-content p {
   color: #fff;
   font-size: 1.3em;
-  font-weight: 300;
+  font-weight: 400;
   line-height: 1.61;
   margin: 0;
-  padding-right: 80px;
+  padding-right: 30px;
 }
 
 h2 {
@@ -388,12 +404,25 @@ section .container {
     min-height: 500px;
   }
 
-  .banner-image {
-    top: 0;
+  .banner-container {
+    max-width: 750px;
+    min-width: 750px;
+  }
+
+  .banner-content {
+    min-width: 320px;
+    width: 350px;
+  }
+
+  .banner-image-front {
+    background-size: 360px auto;
+    flex: 0 0 400px;
+    height: 420px;
+  }
+
+  .banner-image-back {
     background-size: 90% auto;
-    left: 0;
-    bottom: 0;
-    right: -10%;
+    background-position: 300px center;
   }
 
   section {
@@ -427,19 +456,24 @@ section .container {
     height: 320px;
   }
 
-  .banner-image {
+  .banner-image-back,
+  .banner-image-front {
     display: none;
   }
 
   .banner-spacer {
     height: 60px;
   }
 
+  .banner-container {
+    min-width: 0;
+  }
+
   .banner-content {
+    margin-top: 80px;
     max-width: 500px;
+    min-width: 0;
     text-align: center;
-    width: 100%;
-    margin-top: 80px;
   }
 
   .banner-content p {

static/homepage/css/style.css

@@ -19,7 +19,7 @@ html {
   position: absolute;
   right: 5px;
   top: 5px;
-}
+}s
 
 .graphic {
   background-image: url('/static/img/onboarding-1.png');