From 27c22e9c49bcb86373905b1aa99fd27cfb29f4b0 Mon Sep 17 00:00:00 2001
From: Joseph Damiba <joseph.damiba@plot.ly>
Date: Tue, 13 Aug 2019 11:54:14 -0400
Subject: [PATCH 1/2] changing hero styling

---
 _data/cache_bust_css.yml     |  2 +-
 _posts/2015-07-26-index.html |  6 ---
 all_static/css/main.css      | 90 ++++++++++++++++++++++++------------
 scss/_pages/_home.scss       | 54 ++++++++--------------
 4 files changed, 80 insertions(+), 72 deletions(-)

diff --git a/_data/cache_bust_css.yml b/_data/cache_bust_css.yml
index 7ea965143a62..ce400666e34e 100644
--- a/_data/cache_bust_css.yml
+++ b/_data/cache_bust_css.yml
@@ -1,2 +1,2 @@
-8b86aae596ebea1f9390d418020df20a  ../all_static/css/main.css
+7ce96b3003bafe7485b3c03ebccabac3  ../all_static/css/main.css
 a5765df8bc2358dd61c19edcc0cbef7d  ../all_static/css/normalize.css
diff --git a/_posts/2015-07-26-index.html b/_posts/2015-07-26-index.html
index b506ea33dde9..b1d9f59905d7 100755
--- a/_posts/2015-07-26-index.html
+++ b/_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>
diff --git a/all_static/css/main.css b/all_static/css/main.css
index a0aa69d7f012..0c05f97c45e7 100644
--- a/all_static/css/main.css
+++ b/all_static/css/main.css
@@ -141,6 +141,7 @@ h6 {
   margin-left: -80px;
   padding: 7px;
   width: 160px;
+  -webkit-border-radius: 3px;
   border-radius: 3px;
   background-color: #000;
   background-color: rgba(51, 51, 51, 0.9);
@@ -343,6 +344,7 @@ pre {
 
 .page404-bars {
   background-color: #447ADB;
+  -webkit-border-radius: 50%;
   border-radius: 50%;
   -webkit-box-sizing: border-box;
   box-sizing: border-box;
@@ -390,6 +392,7 @@ pre {
 
 .\--sidebar-fixed::-webkit-scrollbar-thumb {
   background: rgba(68, 123, 220, 0.8);
+  -webkit-border-radius: 0;
   border-radius: 0;
   width: 3px; }
 
@@ -427,6 +430,7 @@ body {
     color: #f4f4f8 !important; }
   .header-large--wrap .header--blue-bg {
     background-image: -webkit-gradient(linear, left bottom, left top, color-stop(-10%, rgba(29, 156, 252, 0.9)), to(#1e427d));
+    background-image: -webkit-linear-gradient(bottom, rgba(29, 156, 252, 0.9) -10%, #1e427d 100%);
     background-image: linear-gradient(0deg, rgba(29, 156, 252, 0.9) -10%, #1e427d 100%);
     width: 100%;
     height: 100%; }
@@ -486,6 +490,7 @@ body {
         text-align: center;
         font-size: 1.4rem;
         border: solid;
+        -webkit-border-radius: 8px;
         border-radius: 8px;
         border-width: .1em;
         padding: 30px;
@@ -494,6 +499,7 @@ body {
         text-decoration: none; }
       .header-large--wrap .header--blue-bg .header--meta-content .banner-button {
         border: solid;
+        -webkit-border-radius: 6px;
         border-radius: 6px;
         padding: 7px;
         background-color: #e569e3;
@@ -793,6 +799,7 @@ header.header-main {
       font-weight: 600;
       opacity: 1;
       background-color: #119dff;
+      -webkit-border-radius: 4px;
       border-radius: 4px;
       color: white; }
       header.header-main .\--wrap .button:hover {
@@ -1281,6 +1288,7 @@ aside.\--sidebar-container {
               margin-top: -9px;
               left: 20px;
               position: absolute;
+              -webkit-border-radius: 50%;
               border-radius: 50%;
               border: 1px solid #e7e7e7;
               border-color: #2391fe;
@@ -1447,6 +1455,7 @@ aside.\--sidebar-container {
             justify-content: center;
             background-color: white;
             border: 1px solid #e7e7e7;
+            -webkit-border-radius: 50%;
             border-radius: 50%;
             padding: 10px;
             -webkit-transition: 0.2s all ease-in-out;
@@ -1992,6 +2001,7 @@ div.output_subarea::-webkit-scrollbar {
 
 div.output_subarea::-webkit-scrollbar-thumb {
   background: rgba(68, 123, 220, 0.8);
+  -webkit-border-radius: 0;
   border-radius: 0;
   width: 3px; }
 
@@ -2310,6 +2320,7 @@ code {
 .fa-border {
   padding: .2em .25em .15em;
   border: solid .08em #eee;
+  -webkit-border-radius: .1em;
   border-radius: .1em; }
 
 .pull-right {
@@ -3988,6 +3999,7 @@ label {
   -webkit-box-sizing: border-box; }
 
 .corner-all {
+  -webkit-border-radius: 2px;
   border-radius: 2px; }
 
 .no-padding {
@@ -4403,6 +4415,7 @@ ul.breadcrumb span {
   margin-top: 4px;
   margin-bottom: 20px;
   border: 1px solid #ddd;
+  -webkit-border-radius: 2px;
   border-radius: 2px; }
 
 .list_container > div {
@@ -4646,6 +4659,7 @@ ul#new-menu {
   margin-top: 0;
   margin-bottom: 0;
   border: 0;
+  -webkit-border-radius: 0;
   border-radius: 0; }
 
 #running .panel-group .panel .panel-body .list_container .list_item {
@@ -4871,6 +4885,7 @@ div.cell {
   -webkit-align-items: stretch;
   -ms-flex-align: stretch;
   align-items: stretch;
+  -webkit-border-radius: 2px;
   border-radius: 2px;
   box-sizing: border-box;
   -moz-box-sizing: border-box;
@@ -4938,6 +4953,7 @@ div.inner_cell {
 
 div.input_area {
   border: 1px solid #cfcfcf;
+  -webkit-border-radius: 2px;
   border-radius: 2px;
   background: #f7f7f7;
   line-height: 1.21429em; }
@@ -4967,6 +4983,7 @@ div.unrecognized_cell {
   align-items: stretch; }
 
 div.unrecognized_cell .inner_cell {
+  -webkit-border-radius: 2px;
   border-radius: 2px;
   padding: 5px;
   font-weight: bold;
@@ -5066,12 +5083,15 @@ div.input_area > div.highlight > pre {
   padding: 0 8px 0 4px; }
 
 .CodeMirror-gutters {
+  -webkit-border-bottom-left-radius: 2px;
   border-bottom-left-radius: 2px;
+  -webkit-border-top-left-radius: 2px;
   border-top-left-radius: 2px; }
 
 .CodeMirror pre {
   padding: 0;
   border: 0;
+  -webkit-border-radius: 0;
   border-radius: 0; }
 
 .highlight-base {
@@ -5239,6 +5259,7 @@ div.output_scroll {
   height: 24em;
   width: 100%;
   overflow: auto;
+  -webkit-border-radius: 2px;
   border-radius: 2px;
   -webkit-box-shadow: inset 0 2px 8px rgba(0, 0, 0, 0.8);
   box-shadow: inset 0 2px 8px rgba(0, 0, 0, 0.8);
@@ -5269,6 +5290,7 @@ div.out_prompt_overlay {
   height: 100%;
   padding: 0 .4em;
   position: absolute;
+  -webkit-border-radius: 2px;
   border-radius: 2px; }
 
 div.out_prompt_overlay:hover {
@@ -5366,6 +5388,7 @@ div.output_area pre {
   vertical-align: baseline;
   color: black;
   background-color: transparent;
+  -webkit-border-radius: 0;
   border-radius: 0; }
 
 div.output_subarea {
@@ -5739,6 +5762,7 @@ h1:hover .anchor-link, section.section h2:hover .anchor-link, h2:hover .anchor-l
 .slide-track {
   border: 1px solid #ccc;
   background: #fff;
+  -webkit-border-radius: 2px;
   border-radius: 2px; }
 
 .widget-hslider {
@@ -5752,6 +5776,7 @@ h1:hover .anchor-link, section.section h2:hover .anchor-link, h2:hover .anchor-l
   margin-bottom: 10px;
   border: 1px solid #ccc;
   background: #fff;
+  -webkit-border-radius: 2px;
   border-radius: 2px;
   display: -webkit-box;
   -webkit-box-orient: horizontal;
@@ -5801,6 +5826,7 @@ h1:hover .anchor-link, section.section h2:hover .anchor-link, h2:hover .anchor-l
   width: 12px;
   height: 28px;
   margin-top: -8px;
+  -webkit-border-radius: 2px;
   border-radius: 2px; }
 
 .widget-hslider .ui-slider .ui-slider-range {
@@ -5817,6 +5843,7 @@ h1:hover .anchor-link, section.section h2:hover .anchor-link, h2:hover .anchor-l
   margin-left: 12px;
   border: 1px solid #ccc;
   background: #fff;
+  -webkit-border-radius: 2px;
   border-radius: 2px;
   display: -webkit-box;
   -webkit-box-orient: vertical;
@@ -5868,6 +5895,7 @@ h1:hover .anchor-link, section.section h2:hover .anchor-link, h2:hover .anchor-l
   width: 28px;
   height: 12px;
   margin-left: -9px;
+  -webkit-border-radius: 2px;
   border-radius: 2px; }
 
 .widget-vslider .ui-slider .ui-slider-range {
@@ -6056,6 +6084,7 @@ div.ui-widget-content {
 pre.dialog {
   background-color: #f7f7f7;
   border: 1px solid #ddd;
+  -webkit-border-radius: 2px;
   border-radius: 2px;
   padding: .4em;
   padding-left: 2em; }
@@ -6089,6 +6118,7 @@ p, section.section div.content-box {
   border: thin solid #cfcfcf;
   border-bottom: none;
   background: #eee;
+  -webkit-border-radius: 2px 2px 0 0;
   border-radius: 2px 2px 0 0;
   width: 100%;
   height: 29px;
@@ -6128,7 +6158,9 @@ p, section.section div.content-box {
   display: block; }
 
 .ctb_global_show .ctb_show + .input_area, .ctb_global_show .ctb_show + div.text_cell_input, .ctb_global_show .ctb_show ~ div.text_cell_render {
+  -webkit-border-top-right-radius: 0;
   border-top-right-radius: 0;
+  -webkit-border-top-left-radius: 0;
   border-top-left-radius: 0; }
 
 .ctb_global_show .ctb_show ~ div.text_cell_render {
@@ -6149,6 +6181,7 @@ p, section.section div.content-box {
   background-color: #fff;
   background-image: none;
   border: 1px solid #ccc;
+  -webkit-border-radius: 2px;
   border-radius: 2px;
   -webkit-box-shadow: inset 0 1px 1px rgba(0, 0, 0, 0.075);
   box-shadow: inset 0 1px 1px rgba(0, 0, 0, 0.075);
@@ -6161,6 +6194,7 @@ p, section.section div.content-box {
   padding: 5px 10px;
   font-size: 12px;
   line-height: 1.5;
+  -webkit-border-radius: 1px;
   border-radius: 1px;
   width: inherit;
   font-size: inherit;
@@ -6208,6 +6242,7 @@ textarea.celltoolbar select, select[multiple].celltoolbar select {
   z-index: 10;
   overflow: hidden;
   border: 1px solid #ababab;
+  -webkit-border-radius: 2px;
   border-radius: 2px;
   -webkit-box-shadow: 0 6px 10px -1px #adadad;
   box-shadow: 0 6px 10px -1px #adadad; }
@@ -6246,6 +6281,7 @@ textarea.celltoolbar select, select[multiple].celltoolbar select {
 
 #menubar .navbar {
   border-top: 1px;
+  -webkit-border-radius: 0 0 2px 2px;
   border-radius: 0 0 2px 2px;
   margin-bottom: 0; }
 
@@ -6696,6 +6732,7 @@ span.save_widget span.filename {
   margin-left: 16px;
   border: none;
   font-size: 146.5%;
+  -webkit-border-radius: 2px;
   border-radius: 2px; }
 
 span.save_widget span.filename:hover {
@@ -6824,6 +6861,7 @@ span.checkpoint_status, span.autosave_status {
   min-height: 50px;
   -webkit-box-shadow: 0 6px 10px -1px #adadad;
   box-shadow: 0 6px 10px -1px #adadad;
+  -webkit-border-radius: 2px;
   border-radius: 2px;
   position: absolute;
   z-index: 1000; }
@@ -6833,6 +6871,7 @@ span.checkpoint_status, span.autosave_status {
 
 .ipython_tooltip .tooltiptext pre {
   border: 0;
+  -webkit-border-radius: 0;
   border-radius: 0;
   font-size: 100%;
   background-color: #f7f7f7; }
@@ -6875,6 +6914,7 @@ span.checkpoint_status, span.autosave_status {
   color: white;
   background: black;
   padding: .4em;
+  -webkit-border-radius: 2px;
   border-radius: 2px;
   -webkit-box-shadow: 0 0 12px 1px rgba(87, 87, 87, 0.4);
   box-shadow: 0 0 12px 1px rgba(87, 87, 87, 0.4); }
@@ -7259,6 +7299,7 @@ div#notebook {
   padding: .25rem .5rem;
   border-color: #2391fe;
   width: 250px;
+  -webkit-border-radius: 4px;
   border-radius: 4px; }
 
 /* Search results container */
@@ -7296,6 +7337,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;
@@ -7318,31 +7363,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;
@@ -7362,16 +7384,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;
@@ -7387,7 +7413,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; }
 
@@ -8488,14 +8515,17 @@ pre, code, .hljs {
   display: block; }
   .\--tutorial-section.no-image .\--grid-list {
     -webkit-columns: 2;
+    -moz-columns: 2;
     columns: 2;
     border: 1px solid #e7e7e7;
     margin-top: 20px;
     -webkit-column-gap: 0;
+    -moz-column-gap: 0;
     column-gap: 0; }
     @media (max-width: 1023px) {
       .\--tutorial-section.no-image .\--grid-list {
         -webkit-columns: 1;
+        -moz-columns: 1;
         columns: 1; } }
   .\--tutorial-section.no-image .\--grid-item {
     background: white;
@@ -8504,6 +8534,7 @@ pre, code, .hljs {
     border: 0;
     -webkit-column-break-inside: avoid;
     /* Chrome, Safari */
+    page-break-inside: avoid;
     /* Theoretically FF 20+ */
     break-inside: avoid-column;
     /* IE 11 */
@@ -8590,6 +8621,7 @@ pre, code, .hljs {
   -ms-flex-direction: column;
   flex-direction: column;
   font-size: 1rem;
+  -webkit-border-radius: 5px;
   border-radius: 5px;
   max-width: 1120px;
   padding: 0;
diff --git a/scss/_pages/_home.scss b/scss/_pages/_home.scss
index 3c66837605af..c54a1e3f5e27 100644
--- a/scss/_pages/_home.scss
+++ b/scss/_pages/_home.scss
@@ -7,13 +7,19 @@
 
   &.\--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;
@@ -21,38 +27,7 @@
       //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;
         }

From 47e2d29598954272dd3a9d50a3dc6673963ba11c Mon Sep 17 00:00:00 2001
From: Joseph Damiba <joseph.damiba@plot.ly>
Date: Wed, 14 Aug 2019 10:38:31 -0400
Subject: [PATCH 2/2] adding Asap to head

---
 _includes/head.html | 2 ++
 1 file changed, 2 insertions(+)

diff --git a/_includes/head.html b/_includes/head.html
index 5c5c2aed9bd1..c3fc35940d1f 100644
--- a/_includes/head.html
+++ b/_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 -->