Tweaked header and hero area

website/site/data/landing.yaml

@@ -1,6 +1,6 @@
 ---
 hero:
-  headline: "Open source content management for your Git workflow"
+  headline: "Open source content management for your Git workflow"
   subhead: "Use Netlify CMS with any static site generator for a faster and more flexible web project"
   devfeatures:
     - feature: "Static + content management = ♥"

website/site/layouts/index.html

@@ -7,6 +7,7 @@
       <div class="hero-copy">
         <h1 class="headline">{{ .Site.Data.landing.hero.headline | markdownify }}</h1>
         <span class="subhead">{{ .Site.Data.landing.hero.subhead | markdownify }}</span>
+        <span class="cta-header">{{ .Site.Data.landing.cta.button | markdownify }}</span>
       </div>
       <div class="hero-features">
         {{ range $index, $id := .Site.Data.landing.hero.devfeatures }}
@@ -16,9 +17,9 @@
           </div>
         {{ end }}
       </div>
-      <a href="#" class="hero-graphic">
+      <a class="hero-graphic">
         <img src="/img/screenshot-editor.jpg" class="responsive"/>
-        <span class="hero-videolink">&#x25b6; Watch how to get started in just over 2 minutes</span>
+        <div class="hero-videolink">&#x25b6;</div>
       </a>
 
     </div>

website/site/layouts/partials/header.html

@@ -29,15 +29,18 @@
       <div class="contained">
         <div class="logo-container">
           <a href="/" class="logo"><img src="/img/netlify-cms-logo.svg"/></a>
-          <a class="github-button" href="https://github.com/netlify/netlify-cms" data-icon="octicon-star" data-show-count="true" aria-label="Star netlify/netlify-cms on GitHub">Star</a>
+          {{ if or (eq .Section "docs") (eq .Title "Docs") }}
+          <a class="utility-input">
+            <img src="/img/search.svg" />
+            <input type="search" placeholder="Search the docs" class="algolia-search"/>
+          </a>
+          {{ end }}
+        </div>
+        <div class="nav-container">
+          <a class="nav-link docs-link" href="/docs">Docs</a>
+          <a class="nav-link contributing-link" href="/docs/contributor-guide">Contributing</a>
+          <a class="nav-link" href="/community">Community</a>
+          <a id="ghstars" class="github-button" href="https://github.com/netlify/netlify-cms" data-icon="octicon-star" data-show-count="true" aria-label="Star netlify/netlify-cms on GitHub">Star</a>
         </div>
-        <a class="nav-link docs-link" href="/docs">Docs</a>
-        <a class="nav-link contributing-link" href="/docs/contributor-guide">Contributing</a>
-        <a class="nav-link" href="/community">Community</a>
-        <a class="utility-input">
-          <img src="/img/search.svg" />
-          <input type="search" placeholder="Search the docs" class="algolia-search"/>
-        </a>
-        <span class="cta-header">{{ .Site.Data.landing.cta.button | markdownify }}</span>
       </div>
     </header>

website/src/css/imports/base.css

@@ -26,8 +26,8 @@ h1 {
   margin: 0 0 $small 0;
 
   @media screen and (min-width: $tablet) {
-    font-size: 46px;
+    font-size: 42px;
-    line-height: 64px;
+    line-height: 56px;
   }
 }
 

website/src/css/imports/docs.css

@@ -18,14 +18,6 @@
       display: block;
     }
 
-    @media screen and (min-width: $desktop) {
-      position: fixed;
-      top: 158px;
-      bottom: 0;
-      overflow-y: auto;
-      padding-right: 1em;
-    }
-
     &.mobile {
       display: block;
       position: relative;
@@ -117,11 +109,6 @@
       @neat-shift 1 24;
     }
 
-    @media screen and (min-width: $desktop) {
-      @neat-shift 7 24;
-    }
-
-
     h2:not(:first-child) {
       margin-top: $large;
     }

website/src/css/imports/header.css

@@ -115,17 +115,28 @@ header {
     }*/
   }
 
-  .nav-link {
+  .nav-container {
-    color: white;
+    padding-top: $micro;
-    display: inline-block;
-    vertical-align: middle;
-    -webkit-vertical-align: middle !important;
-    margin-left: $tiny;
 
-    &:hover {
+    .nav-link {
-      color: $green;
+      color: white;
+      display: inline-block;
+      vertical-align: middle;
+      -webkit-vertical-align: middle !important;
+      margin-left: $tiny;
+
+      &:hover {
+        color: $green;
+      }
     }
 
+    .nav-link + iframe  {
+      margin-left: $small;
+      vertical-align: middle;
+      @media screen and (max-width: $mobile) {
+        margin-top: $tiny;
+      }
+    }
   }
 
   img {
@@ -144,13 +155,12 @@ header {
   }
 
   input {
-    padding-left: 0;
+    padding: -5px 0 0 0;
     border: none;
     border-radius: 0;
     appearance: none;
     background: none;
     color: $lightGrey;
-    padding: 2px $micro $micro 0;
     display: inline-block;
     font-size: $tiny;
     font-weight: $regular;
@@ -179,11 +189,14 @@ header {
   .utility-input {
     display: none;
     padding: $micro;
+    position: relative;
+    top: -4px;
     width: auto;
     border-radius: 4px;
     background-color: rgba(255,255,255,0.1);
     color: white;
     margin: 0 0 0 $tiny;
+    padding-top: -5px;
     padding-bottom: 9px;
     text-align: left;
     text-decoration: none;
@@ -228,41 +241,5 @@ header {
         float: left;
       }
     }
-    iframe {
-      @media screen and (max-width: 820px) {
-        display: none;
-        opacity: 0;
-      }
-    }
-  }
-
-  .cta-header {
-    margin-left: $tiny;
-  }
-  .cta-header a {
-    display: inline-block;
-    color: white;
-    text-transform: uppercase;
-    font-size: $tiny;
-    letter-spacing: 0.5px;
-    background-color: $blue;
-    background-image: linear-gradient(-180deg, #4A7FDD 0%, #3A69C7 100%);
-    box-shadow: 0 4px 12px 0 rgba(0,0,0,0.3), 0 1px 3px 0 rgba(0,0,0,0.6);
-    border-radius: $borderRadius;
-    padding: 10px 14px 8px 14px;
-    transition: .2s;
-
-    @media screen and (max-width: $mobile) {
-      margin-top: $tiny;
-    }
-
-    &:hover {
-      transform: scale(1.05);
-      box-shadow: 0 4px 12px 0 rgba(0,0,0,0.5), 0 1px 3px 0 rgba(0,0,0,1);
-    }
-    &:active {
-      transform: scale(0.95);
-      box-shadow: none;
-    }
   }
 }

website/src/css/imports/hero.css

@@ -44,7 +44,6 @@
   h1 {
     color: $green;
     margin-bottom: 0;
-    max-width: 800px;
   }
 
   h2 {
@@ -55,6 +54,33 @@
     color: white;
   }
 
+  .cta-header {
+    display: block;
+    margin-top: $small;
+  }
+  .cta-header a {
+    display: inline-block;
+    color: white;
+    text-transform: uppercase;
+    font-size: $tiny;
+    letter-spacing: 0.5px;
+    background-color: $blue;
+    background-image: linear-gradient(-180deg, #4A7FDD 0%, #3A69C7 100%);
+    box-shadow: 0 4px 12px 0 rgba(0,0,0,0.3), 0 1px 3px 0 rgba(0,0,0,0.6);
+    border-radius: $borderRadius;
+    padding: 10px 14px 8px 14px;
+    transition: .2s;
+
+    &:hover {
+      transform: scale(1.05);
+      box-shadow: 0 4px 12px 0 rgba(0,0,0,0.5), 0 1px 3px 0 rgba(0,0,0,1);
+    }
+    &:active {
+      transform: scale(0.95);
+      box-shadow: none;
+    }
+  }
+
   .hero-features {
 
     @media screen and (min-width: $tablet) {
@@ -68,6 +94,10 @@
   }
 
   .hero-graphic {
+    @neat-span-columns 12;
+    position: relative;
+    cursor: pointer;
+
     @media screen and (min-width: $tablet) {
       @neat-span-columns 6;
       float: right;
@@ -81,27 +111,38 @@
     }
 
     .hero-videolink {
-      display: block;
+      position: absolute;
-      text-align: center;
+      margin: auto;
-      margin-top: $micro;
+      padding: 10px 0 0 10px;
-      padding: $micro 0 $micro 0;
+      top: 0;
-      font-size: 14px;
+      bottom: 0;
+      left: 0;
+      right: 0;
+      width: 90px;
+      height: 90px;
+      font-size: 64px;
       font-weight: $semibold;
-      color: white;
+      text-align: center;
-      background-color: rgba(255,255,255,0.1);
+      color: $blue;
-      border-radius: $borderRadius;
+      background-color: rgba(255,255,255,0.85);
+      box-shadow: 0 3px 9px 0 rgba(0,0,0,0.05), 0 1px 3px 0 rgba(0,0,0,0.15);
+      border-radius: 100px;
       transition: 0.1s;
     }
-  }
+
-  .hero-graphic:hover {
+    &:hover {
-    .hero-videolink {
+      .hero-videolink {
-      background-color: rgba(255,255,255,0.2);
+        color: white;
-      transform: scale(1.03);
+        background-color: $blue;
+        box-shadow: 0 6px 18px 0 rgba(0,0,0,0.15), 0 2px 6px 0 rgba(0,0,0,0.30);
+        transform: scale(1.1);
+      }
     }
-  }
+
-  .hero-graphic:active {
+    &:active {
-    .hero-videolink {
+      .hero-videolink {
-      background-color: rgba(255,255,255,0.4);
+        transform: scale(0.9);
+      }
     }
   }