Merge pull request #1455 from plotly/hero-bg-image

Replace Hero BG Image

Author: Joseph Damiba

_data/cache_bust_css.yml

@@ -1,2 +1,2 @@
-9739c634dee855183734aa6d8b6b0866  ../all_static/css/main.css
+7ce96b3003bafe7485b3c03ebccabac3  ../all_static/css/main.css
 a5765df8bc2358dd61c19edcc0cbef7d  ../all_static/css/normalize.css

_includes/head.html

@@ -18,6 +18,8 @@
       <!-- Fonts -->
       <link href="//fonts.googleapis.com/css?family=Open+Sans:600,400,300,200|Inconsolata|Ubuntu+Mono:400,700"
             rel="stylesheet" type="text/css"/>
+            <link href="https://fonts.googleapis.com/css?family=Asap&display=swap" rel="stylesheet"/>
+
       <link rel="stylesheet" href="//maxcdn.bootstrapcdn.com/font-awesome/4.3.0/css/font-awesome.min.css">
 
       <!-- code highlighting -->

_posts/2015-07-26-index.html

@@ -16,12 +16,6 @@
 <main class="page --home --api">
     <div class="--wrap-top">
         <section class="hero">
-            <div class="hero-bg">
-                <img src="https://s3-us-west-1.amazonaws.com/plotly-tutorials/assets/api/images/api-home-bg.jpg" data-depth="0.3" alt=""
-                     class="layer">
-                <img src="https://s3-us-west-1.amazonaws.com/plotly-tutorials/assets/api/images/api-home-front.png" data-depth="0.1" alt=""
-                     class="layer">
-            </div>
             <div class="--wrap-inner">
                 <div class="--welcome layer"><span class="meta">Welcome to the</span>
                     <h2>Plotly Open Source Graphing Libraries</h2>

all_static/css/main.css

@@ -7339,6 +7339,10 @@ div#notebook {
   margin-top: 80px; }
 
 .page.\--home .hero {
+  background-position: center;
+  background-repeat: no-repeat;
+  background-size: 110% 110%;
+  background-image: url(https://plotly-tutorials.s3-us-west-1.amazonaws.com/assets/api/images/api-bg-img.png);
   width: 100%;
   height: 400px;
   max-height: 500px;
@@ -7361,31 +7365,8 @@ div#notebook {
   overflow: hidden; }
   @media (max-width: 584px) {
     .page.\--home .hero {
-      height: 100vh; } }
-  .page.\--home .hero .hero-bg {
-    height: 400px;
-    left: 50% !important;
-    margin-left: -1665px;
-    top: -50px !important;
-    width: 3330px;
-    position: absolute;
-    z-index: 1; }
-    @media (max-width: 584px) {
-      .page.\--home .hero .hero-bg {
-        height: 100vh;
-        left: 50% !important;
-        margin-left: -1200px;
-        top: -169px !important;
-        width: 2400px;
-        position: absolute;
-        z-index: 1;
-        -webkit-transform: scale(0.65) !important;
-        -ms-transform: scale(0.65) !important;
-        transform: scale(0.65) !important; } }
-    .page.\--home .hero .hero-bg img {
-      position: absolute;
-      top: 0;
-      left: 0; }
+      height: 100vh;
+      background-size: cover; } }
   .page.\--home .hero .\--welcome {
     position: relative;
     z-index: 2;
@@ -7405,16 +7386,20 @@ div#notebook {
     -webkit-flex-wrap: wrap;
     -ms-flex-wrap: wrap;
     flex-wrap: wrap;
-    color: #626262;
+    color: #fff;
     margin-top: 120px;
-    max-width: 580px;
+    max-width: 700px;
     text-align: center; }
     @media (max-width: 584px) {
       .page.\--home .hero .\--welcome {
         margin-top: 110px; } }
+    .page.\--home .hero .\--welcome h2 {
+      font-size: 28pt;
+      font-family: "Asap", sans-serif;
+      margin-bottom: 0;
+      margin-top: 20px; }
     .page.\--home .hero .\--welcome h1, .page.\--home .hero .\--welcome section.section h2, section.section .page.\--home .hero .\--welcome h2 {
       width: 100%;
-      font-size: 5rem;
       margin: 0;
       font-weight: 100;
       color: #2391fe;
@@ -7430,7 +7415,8 @@ div#notebook {
       .page.\--home .hero .\--welcome p, .page.\--home .hero .\--welcome section.section div.content-box, section.section .page.\--home .hero .\--welcome div.content-box {
         padding: 0 40px; } }
     .page.\--home .hero .\--welcome span {
-      color: white;
+      color: #fff;
+      font-size: 14pt;
       text-transform: uppercase;
       letter-spacing: 2px; }
 

scss/_pages/_home.scss

@@ -7,52 +7,27 @@
 
   &.\--home {
     .hero {
+      background-position: center;
+      background-repeat: no-repeat;
+      background-size: 110% 110%;;
+      background-image: url(https://plotly-tutorials.s3-us-west-1.amazonaws.com/assets/api/images/api-bg-img.png);
       width: 100%;
-
       height: 400px;
       max-height:500px;
       @include handheld {
         height: 100vh;
+        background-size: cover;
+
       }
+
       display: flex;
       align-items: flex-start;
       justify-content: center;
       flex-wrap: wrap;
       //border-bottom:$border;
       position: relative;
       overflow: hidden;
-      .hero-bg {
-        $hero-w: 3330px;
-        $hero-h: 1250px;
-        //background: url(/all_static/images/api-home.jpg) 50% 50% !important;
-        //height: 45vh;
-        height:400px;
-        left: 50% !important;
-        margin-left: $hero-w*-0.5;
-        top: -50px !important;
-        width:$hero-w;
-        position: absolute;
-        z-index: 1;
-        //transform: scale(0.45) !important;
 
-        @include handheld {
-          height: 100vh;
-          left: 50% !important;
-          margin-left: -1200px;
-          top: -169px !important;
-          width: 2400px;
-          position: absolute;
-          z-index: 1;
-          transform: scale(0.65) !important;
-        }
-        img {
-          //left: -1200px !important;
-          //top:-300px !important;
-          position: absolute;
-          top:0;
-          left: 0;
-        }
-      }
       .\--welcome {
         position: relative;
         z-index: 2;
@@ -61,16 +36,22 @@
         align-items: center;
         justify-content: center;
         flex-wrap: wrap;
-        color: $grey;
+        color: #fff;
         margin-top: 120px;
-        max-width: 580px;
+        max-width: 700px;
         text-align: center;
         @include handheld {
           margin-top:$unit*11;
         }
+        h2{
+          font-size: 28pt;
+          font-family: "Asap", sans-serif;
+          margin-bottom: 0;
+          margin-top: 20px;
+        }
         h1 {
           width: 100%;
-          font-size: 5rem;
+
           @include handheld {
             font-size: 3rem;
             padding: $unit $unit*4;
@@ -90,7 +71,8 @@
           }
         }
         span {
-          color: lighten($grey, 100%);
+          color: #fff;
+          font-size: 14pt;
           text-transform: uppercase;
           letter-spacing: 2px;
         }