[PYT-277] Update Hero styles (jumbotrons) on main pages (pytorch#91)

brsoff · JoelMarcey · commit 0e6dc9336c5e · 2018-10-01T10:39:55.000-07:00
also [PYT-279] Change navbar color to white
diff --git a/_includes/footer_scripts.html b/_includes/footer_scripts.html
@@ -13,7 +13,7 @@
 
   scrollToAnchor.bind();
 
-  var hasStaticHeader = $(".blog-header, .blog-detail-header, .resources-header").length > 0;
+  var hasStaticHeader = $(".blog-header, .blog-detail-header, .resources-header, .get-started-header, .features-header, .ecosystem-header").length > 0;
 
   if (!hasStaticHeader) {
     $(window).on("scroll", function() {
diff --git a/_layouts/blog.html b/_layouts/blog.html
@@ -13,7 +13,7 @@
   {% assign post_categories = site.posts | map: 'categories' | join: ',' | split: ',' | uniq | sort %}
 
   <div class="jumbotron jumbotron-fluid">
-    <div class="container">
+    <div class="container blog-page-container">
       {% for post in posts limit:1 %}
       <p class="blog-date">Featured Post</p>
       <h1>
diff --git a/_layouts/get_started.html b/_layouts/get_started.html
@@ -10,7 +10,7 @@
 
     <div class="jumbotron jumbotron-fluid on-dark-background">
       <div class="container">
-        <h1>Get<br />&nbsp;&nbsp;&nbsp;&nbsp;&nbsp;&nbsp;&nbsp;Started</h1>
+        <h1>Get Started</h1>
 
         <p class="lead">Select preferences and run the command to install PyTorch locally, or get started quickly with one of the supported cloud platforms.</p>
       </div>
@@ -41,7 +41,7 @@ <h1>Get<br />&nbsp;&nbsp;&nbsp;&nbsp;&nbsp;&nbsp;&nbsp;Started</h1>
           </div>
         </div>
       </div>
-    </div>   
+    </div>
 
     {% include footer.html %}
   </body>
diff --git a/_sass/blog.scss b/_sass/blog.scss
@@ -35,6 +35,7 @@
       margin-top: 30px;
     }
     @include desktop {
+      margin-top: 380px + $desktop_header_height;
       .row.blog-index
         [class*="col-"]:not(:first-child):not(:last-child):not(:nth-child(3n)) {
         padding-right: rem(35px);
@@ -83,12 +84,17 @@
 
   .jumbotron {
     @include desktop {
-      height: 550px;
+      height: 380px;
     }
 
     .container {
+      padding-top: rem(90px);
       @include desktop {
         padding-bottom: rem(45px);
+        padding-top: 0;
+      }
+      @include small-desktop {
+        padding-top: rem(90px);
       }
     }
 
@@ -113,7 +119,7 @@
       }
     }
     .blog-detail-container {
-      padding-top: rem(344px);
+      padding-top: rem(174px);
     }
 
     p {
@@ -127,12 +133,26 @@
       margin-top: rem(12px);
       padding-top: rem(9px);
     }
+
+    .blog-page-container {
+      p.blog-date {
+        padding-top: rem(10px);
+      }
+      .btn {
+        margin-bottom: rem(10px);
+      }
+    }
   }
 
   p.blog-date {
     font-size: rem(18px);
     letter-spacing: 0;
     line-height: rem(24px);
+    margin-bottom: rem(10px);
+  }
+
+  p.featured-blog-preview {
+    margin-bottom: rem(12px);
   }
 
   #blogPostFilter {
diff --git a/_sass/ecosystem.scss b/_sass/ecosystem.scss
@@ -1,7 +1,7 @@
 .ecosystem .jumbotron {
   height: 170px;
   @include desktop {
-    height: 330px;
+    height: 320px;
   }
 
   h1 {
@@ -21,15 +21,15 @@
   height: 275px;
 
   @include desktop {
-    height: 480px;
+    height: 470px;
   }
 }
 
 .ecosystem .main-content-wrapper {
   background-color: $light_grey;
 
   @include desktop {
-    margin-top: 390px + $desktop_header_height;
+    margin-top: 380px + $desktop_header_height;
   }
   margin-top: 275px;
 }
diff --git a/_sass/features.scss b/_sass/features.scss
@@ -6,6 +6,12 @@
   .nav-logo {
     background-image: url($baseurl + "/assets/images/logo-dark.svg");
   }
+
+  .main-background {
+    @include desktop {
+      height: 540px;
+    }
+  }
 }
 
 .features-row {
@@ -104,8 +110,7 @@
       color: #D92F4C;
     }
 
-    .feature-content-holder {
-      border-bottom: 2px solid #D92F4C;
+    .feature-content-holder { border-bottom: 2px solid #D92F4C;
     }
   }
 
@@ -141,10 +146,21 @@
 
 .features .jumbotron {
   height: 195px;
+  h1 {
+    padding-top: rem(30px);
+  }
   @include desktop {
-    height: 490px;
+    height: 395px;
+    h1 {
+      padding-top: 0;
+    }
   }
   h1, p {
     color: $white;
   }
+  .btn {
+    @include desktop {
+      margin-top: rem(6px);
+    }
+  }
 }
diff --git a/_sass/get-started.scss b/_sass/get-started.scss
@@ -13,21 +13,21 @@
   height: 275px;
 
   @include desktop {
-    height: 480px;
+    height: 380px;
   }
 }
 
 .get-started .main-content-wrapper {
+  margin-top: 275px;
   @include desktop {
-    margin-top: 350px + $desktop_header_height;
+    margin-top: 260px + $desktop_header_height;
   }
-  margin-top: 275px;
 }
 
 .get-started .jumbotron {
   height: 190px;
   @include desktop {
-    height: 360px;
+    height: 260px;
   }
 }
 
@@ -99,7 +99,7 @@
 .get-started .main-content {
   padding-top: 0;
   @include desktop {
-    padding-top: 2.53rem;
+    padding-top: 1.9rem;
   }
 }
 
@@ -192,4 +192,4 @@
       margin-bottom: 0;
     }
   }
-}
+}
diff --git a/_sass/homepage.scss b/_sass/homepage.scss
@@ -28,7 +28,16 @@
   .jumbotron {
     height: 195px;
     @include desktop {
-    height: 490px;
+    height: 395px;
+    }
+    .btn {
+      margin-top: rem(6px);
+    }
+  }
+
+  .main-background {
+    @include desktop {
+      height: 540px;
     }
   }
 
diff --git a/_sass/jumbotron.scss b/_sass/jumbotron.scss
@@ -24,9 +24,10 @@
   h1 {
     font-size: rem(40px);
     text-transform: uppercase;
-    font-weight: 300;
+    font-weight: lighter;
     letter-spacing: 1.08px;
-    margin-bottom: rem(20px);
+    margin-bottom: rem(10px);
+    line-height: 1.05;
 
     @include desktop {
       font-size: rem(72px);
@@ -50,7 +51,7 @@
   .btn {
     padding-top: rem(9px);
     @include desktop {
-      margin-top: rem(20px);
+      margin-top: rem(10px);
     }
   }
 }
diff --git a/_sass/main-content.scss b/_sass/main-content.scss
@@ -2,7 +2,7 @@
   margin-top: 300px;
 
   @include desktop {
-    margin-top: 550px + $desktop_header_height;
+    margin-top: 450px + $desktop_header_height;
     min-height: 400px;
   }
 }
diff --git a/_sass/navigation.scss b/_sass/navigation.scss
@@ -18,7 +18,10 @@
 
   &.blog-header,
   &.blog-detail-header,
-  &.resources-header {
+  &.resources-header,
+  &.get-started-header,
+  &.features-header,
+  &.ecosystem-header {
     background-color: $white;
     border-bottom: 1px solid #e2e2e2;
   }
@@ -198,7 +201,10 @@
 
 .blog-header,
 .blog-detail-header,
-.resources-header {
+.resources-header,
+.get-started-header,
+.features-header,
+.ecosystem-header {
   .header-logo {
     background-image: url($baseurl + "/assets/images/logo-dark.svg");
   }
diff --git a/features.html b/features.html
@@ -8,9 +8,9 @@
 
 <div class="jumbotron jumbotron-fluid">
     <div class="container">
-        <h1>&nbsp;&nbsp;&nbsp;&nbsp;&nbsp;&nbsp;&nbsp;&nbsp;&nbsp;End-to-end
+        <h1>&nbsp;&nbsp;&nbsp;&nbsp;&nbsp;&nbsp;&nbsp;End-to-end
             <br/>Deep Learning
-            <br/> &nbsp;&nbsp;&nbsp;&nbsp;&nbsp;&nbsp;&nbsp;&nbsp;&nbsp;&nbsp;&nbsp;&nbsp;&nbsp;&nbsp;&nbsp;Platform
+            <br/> &nbsp;&nbsp;&nbsp;&nbsp;&nbsp;&nbsp;&nbsp;&nbsp;&nbsp;&nbsp;&nbsp;&nbsp;&nbsp;&nbsp;Platform
         </h1>
 
         <p class="lead">PyTorch enables fast, flexible experimentation and efficient production through a hybrid front-end, distributed training, and ecosystem of tools and libraries.
diff --git a/index.html b/index.html
@@ -6,7 +6,7 @@
 
 <div class="jumbotron jumbotron-fluid on-dark-background">
   <div class="container">
-    <h1>&nbsp;&nbsp;&nbsp;&nbsp;&nbsp;&nbsp;&nbsp;From<br />&nbsp;&nbsp;&nbsp;&nbsp;&nbsp;&nbsp;&nbsp;&nbsp;&nbsp;&nbsp;&nbsp;&nbsp;&nbsp;Research<br />To Production</h1>
+    <h1>From<br />&nbsp;&nbsp;&nbsp;&nbsp;&nbsp;&nbsp;&nbsp;Research To<br />Production</h1>
 
     <p class="lead">An open source deep learning platform that provides a seamless path from research prototyping to production deployment.</p>
 

Original file line number	Diff line number	Diff line change
`@@ -35,6 +35,7 @@`
`35`	`35`	`margin-top: 30px;`
`36`	`36`	`}`
`37`	`37`	`@include desktop {`
	`38`	`+ margin-top: 380px + $desktop_header_height;`
`38`	`39`	`.row.blog-index`
`39`	`40`	`[class*="col-"]:not(:first-child):not(:last-child):not(:nth-child(3n)) {`
`40`	`41`	`padding-right: rem(35px);`
`@@ -83,12 +84,17 @@`
`83`	`84`
`84`	`85`	`.jumbotron {`
`85`	`86`	`@include desktop {`
`86`		`- height: 550px;`
	`87`	`+ height: 380px;`
`87`	`88`	`}`
`88`	`89`
`89`	`90`	`.container {`
	`91`	`+ padding-top: rem(90px);`
`90`	`92`	`@include desktop {`
`91`	`93`	`padding-bottom: rem(45px);`
	`94`	`+ padding-top: 0;`
	`95`	`+ }`
	`96`	`+ @include small-desktop {`
	`97`	`+ padding-top: rem(90px);`
`92`	`98`	`}`
`93`	`99`	`}`
`94`	`100`
`@@ -113,7 +119,7 @@`
`113`	`119`	`}`
`114`	`120`	`}`
`115`	`121`	`.blog-detail-container {`
`116`		`- padding-top: rem(344px);`
	`122`	`+ padding-top: rem(174px);`
`117`	`123`	`}`
`118`	`124`
`119`	`125`	`p {`
`@@ -127,12 +133,26 @@`
`127`	`133`	`margin-top: rem(12px);`
`128`	`134`	`padding-top: rem(9px);`
`129`	`135`	`}`
	`136`	`+`
	`137`	`+ .blog-page-container {`
	`138`	`+ p.blog-date {`
	`139`	`+ padding-top: rem(10px);`
	`140`	`+ }`
	`141`	`+ .btn {`
	`142`	`+ margin-bottom: rem(10px);`
	`143`	`+ }`
	`144`	`+ }`
`130`	`145`	`}`
`131`	`146`
`132`	`147`	`p.blog-date {`
`133`	`148`	`font-size: rem(18px);`
`134`	`149`	`letter-spacing: 0;`
`135`	`150`	`line-height: rem(24px);`
	`151`	`+ margin-bottom: rem(10px);`
	`152`	`+ }`
	`153`	`+`
	`154`	`+ p.featured-blog-preview {`
	`155`	`+ margin-bottom: rem(12px);`
`136`	`156`	`}`
`137`	`157`
`138`	`158`	`#blogPostFilter {`
Original file line number	Diff line number	Diff line change
`@@ -1,7 +1,7 @@`
`1`	`1`	`.ecosystem .jumbotron {`
`2`	`2`	`height: 170px;`
`3`	`3`	`@include desktop {`
`4`		`- height: 330px;`
	`4`	`+ height: 320px;`
`5`	`5`	`}`
`6`	`6`
`7`	`7`	`h1 {`
`@@ -21,15 +21,15 @@`
`21`	`21`	`height: 275px;`
`22`	`22`
`23`	`23`	`@include desktop {`
`24`		`- height: 480px;`
	`24`	`+ height: 470px;`
`25`	`25`	`}`
`26`	`26`	`}`
`27`	`27`
`28`	`28`	`.ecosystem .main-content-wrapper {`
`29`	`29`	`background-color: $light_grey;`
`30`	`30`
`31`	`31`	`@include desktop {`
`32`		`- margin-top: 390px + $desktop_header_height;`
	`32`	`+ margin-top: 380px + $desktop_header_height;`
`33`	`33`	`}`
`34`	`34`	`margin-top: 275px;`
`35`	`35`	`}`
Original file line number	Diff line number	Diff line change
`@@ -6,6 +6,12 @@`
`6`	`6`	`.nav-logo {`
`7`	`7`	`background-image: url($baseurl + "/assets/images/logo-dark.svg");`
`8`	`8`	`}`
	`9`	`+`
	`10`	`+ .main-background {`
	`11`	`+ @include desktop {`
	`12`	`+ height: 540px;`
	`13`	`+ }`
	`14`	`+ }`
`9`	`15`	`}`
`10`	`16`
`11`	`17`	`.features-row {`
`@@ -104,8 +110,7 @@`
`104`	`110`	`color: #D92F4C;`
`105`	`111`	`}`
`106`	`112`
`107`		`- .feature-content-holder {`
`108`		`- border-bottom: 2px solid #D92F4C;`
	`113`	`+ .feature-content-holder { border-bottom: 2px solid #D92F4C;`
`109`	`114`	`}`
`110`	`115`	`}`
`111`	`116`
`@@ -141,10 +146,21 @@`
`141`	`146`
`142`	`147`	`.features .jumbotron {`
`143`	`148`	`height: 195px;`
	`149`	`+ h1 {`
	`150`	`+ padding-top: rem(30px);`
	`151`	`+ }`
`144`	`152`	`@include desktop {`
`145`		`- height: 490px;`
	`153`	`+ height: 395px;`
	`154`	`+ h1 {`
	`155`	`+ padding-top: 0;`
	`156`	`+ }`
`146`	`157`	`}`
`147`	`158`	`h1, p {`
`148`	`159`	`color: $white;`
`149`	`160`	`}`
	`161`	`+ .btn {`
	`162`	`+ @include desktop {`
	`163`	`+ margin-top: rem(6px);`
	`164`	`+ }`
	`165`	`+ }`
`150`	`166`	`}`
Original file line number	Diff line number	Diff line change
`@@ -13,21 +13,21 @@`
`13`	`13`	`height: 275px;`
`14`	`14`
`15`	`15`	`@include desktop {`
`16`		`- height: 480px;`
	`16`	`+ height: 380px;`
`17`	`17`	`}`
`18`	`18`	`}`
`19`	`19`
`20`	`20`	`.get-started .main-content-wrapper {`
	`21`	`+ margin-top: 275px;`
`21`	`22`	`@include desktop {`
`22`		`- margin-top: 350px + $desktop_header_height;`
	`23`	`+ margin-top: 260px + $desktop_header_height;`
`23`	`24`	`}`
`24`		`- margin-top: 275px;`
`25`	`25`	`}`
`26`	`26`
`27`	`27`	`.get-started .jumbotron {`
`28`	`28`	`height: 190px;`
`29`	`29`	`@include desktop {`
`30`		`- height: 360px;`
	`30`	`+ height: 260px;`
`31`	`31`	`}`
`32`	`32`	`}`
`33`	`33`
`@@ -99,7 +99,7 @@`
`99`	`99`	`.get-started .main-content {`
`100`	`100`	`padding-top: 0;`
`101`	`101`	`@include desktop {`
`102`		`- padding-top: 2.53rem;`
	`102`	`+ padding-top: 1.9rem;`
`103`	`103`	`}`
`104`	`104`	`}`
`105`	`105`
`@@ -192,4 +192,4 @@`
`192`	`192`	`margin-bottom: 0;`
`193`	`193`	`}`
`194`	`194`	`}`
`195`		`-}`
	`195`	`+}`
Original file line number	Diff line number	Diff line change
`@@ -2,7 +2,7 @@`
`2`	`2`	`margin-top: 300px;`
`3`	`3`
`4`	`4`	`@include desktop {`
`5`		`- margin-top: 550px + $desktop_header_height;`
	`5`	`+ margin-top: 450px + $desktop_header_height;`
`6`	`6`	`min-height: 400px;`
`7`	`7`	`}`
`8`	`8`	`}`