Improved responsiveness, CTA in header, various fixes

website/site/data/landing.yaml

@@ -17,12 +17,12 @@ productvideo:
 
 cta:
   primaryhook: "Getting started is simple and free."
-  primary: "Choose a template that’s pre-configured with a static site generator and deploys to a global CDN in one click."
+  primary: "Choose a template that’s pre-configured with a static site generator and deploys to a global CDN in one click."
   button: "[Get started](/docs/start-with-a-template/)"
 
 editors:
   hook: "A CMS that developers and content editors can agree on"
-  intro: "You get to implement modern front end tools to deliver a faster, safer, and more scalable site.<br />Editors get a friendly UI and intuitive workflow that meets their content management requirements."
+  intro: "You get to implement modern front end tools to deliver a faster, safer, and more scalable site. Editors get a friendly UI and intuitive workflow that meets their content management requirements."
   features:
     - feature: "Editor-friendly user interface"
       description: "The web-based app includes rich-text editing, real-time preview, and drag-and-drop media uploads."
@@ -30,7 +30,7 @@ editors:
     - feature: "Intuitive workflow for content teams"
       description: "Writers and editors can easily manage content from draft to review to publish across any number of custom content types."
       imgpath: "/img/hero-graphic.jpg"
-    - feature: "Instant access, without a GitHub account"
+    - feature: "Instant access, without a GitHub&nbsp;account"
       description: "With [Git Gateway](/docs/authentication-backends/#git-gateway-with-netlify-identity), you can add CMS access for any team member — even if they don’t have a GitHub account. "
       imgpath: "/img/hero-graphic.jpg"
 

website/site/layouts/index.html

@@ -32,7 +32,7 @@
   <section class="editors">
     <div class="contained">
       <h2>{{ .Site.Data.landing.editors.hook | markdownify }}</h2>
-      <p>{{ .Site.Data.landing.editors.intro | markdownify }}</p>
+      <p id="editor-intro">{{ .Site.Data.landing.editors.intro | markdownify }}</p>
       <div class="editors-features">
         {{ range $index, $id := .Site.Data.landing.editors.features }}
         <div class="feature">

website/site/layouts/partials/header.html

@@ -35,6 +35,6 @@
           <img src="/img/search.svg" />
           <input type="search" placeholder="Search the docs" class="algolia-search"/>
         </a>
-        <a href="https://github.com/netlify/netlify-cms" class="btn-secondary small github-btn "><img src="/img/github.svg"/> Fork me on GitHub</a>
+        <span class="cta-header">{{ .Site.Data.landing.cta.button | markdownify }}</span>
       </div>
     </header>

website/src/css/imports/base.css

@@ -47,10 +47,14 @@ h3 {
   font-family: $roboto;
   font-size: 18px;
   font-weight: $semibold;
-  line-height: 40px;
+  line-height: 30px;
+  padding-bottom: $micro;
   margin: 0;
 }
 
+h3 > p {
+}
+
 p, ul {
   font-size: $tiny;
   line-height: 26px;

website/src/css/imports/community.css

@@ -4,8 +4,11 @@
   padding: $xl 0 $large 0;
 
   .community-features {
-    @neat-span-columns 8;
+    @neat-span-columns 12;
 
+    @media screen and (min-width: $tablet) {
+      @neat-span-columns 8;
+    }
     @media screen and (min-width: $desktop) {
       @neat-span-columns 6;
     }
@@ -17,9 +20,12 @@
   }
 
   .contributors {
-    @neat-span-columns 10;
+    @neat-span-columns 12;
     margin-top: $small;
 
+    @media screen and (min-width: $tablet) {
+      @neat-span-columns 10;
+    }
     @media screen and (min-width: $desktop) {
       @neat-span-columns 5;
       float: right;

website/src/css/imports/cta.css

@@ -9,11 +9,16 @@
 
   .cta-primary {
     background-color: white;
-    padding: $small $medium $small $medium;
+    padding: $medium $small $medium $small;
+
+    @media screen and (min-width: $tablet) {
+      padding: $medium;
+    }
 
     @media screen and (min-width: $desktop) {
       display: flex;
       align-items: center;
+      justify-content: space-between;
       box-shadow: 0 10px 30px 0 rgba(28,30,30,0.10), 0 3px 9px 0 rgba(28,30,30,0.15);
       border-radius: $largeBorderRadius;
     }
@@ -23,9 +28,6 @@
       line-height: 25px;
       color: $lightishGrey;
 
-      @media screen and (min-width: $desktop) {
-      }
-
       .hook {
         font-weight: $bold;
         color: $darkGrey;
@@ -33,8 +35,6 @@
     }
 
     a {
-      display: inline-block;
-      margin-top: $tiny;
       color: white;
       text-transform: uppercase;
       font-size: $tiny;
@@ -45,10 +45,12 @@
       border-radius: $borderRadius;
       padding: 12px 18px 12px 18px;
       transition: .2s;
-      text-align: center;
+      display: inline-block;
+      margin-top: $tiny;
+
 
       @media screen and (min-width: $desktop) {
-        min-width: 120px;
+        flex-shrink: 0;
         margin: 0 0 0 $small;
       }
 
@@ -64,13 +66,4 @@
 
   }
 
-  .cta-secondary {
-    font-size: 15px;
-    text-align: center;
-    width: 100%;
-    display: inline-block;
-    margin-top: $tiny;
-    color: $lightishGrey;
-  }
-
 }

website/src/css/imports/docs.css

@@ -119,7 +119,7 @@
 
 
     h2:not(:first-child) {
-      margin-top: 86px;
+      margin-top: $large;
     }
 
     a {

website/src/css/imports/editors.css

@@ -2,13 +2,23 @@
   @neat-row;
   margin-top: $xl;
   margin-bottom: $xxl;
+
+  @media screen and (min-width: $desktop) {
     text-align: center;
+  }
 
   h2, p {
     max-width: $desktop;
+
+    @media screen and (min-width: $desktop) {
       margin-left: auto;
       margin-right: auto;
     }
+  }
+
+  p#editor-intro {
+    max-width: 710px;
+  }
 
   .editors-features {
     display: flex;
@@ -16,8 +26,8 @@
     margin-top: $large;
 
     @media screen and (max-width: $desktop) {
-      align-items: center;
+      justify-content: flex-start;
-      flex-direction: column;
+      flex-wrap: wrap;
     }
 
     .feature {
@@ -31,7 +41,8 @@
       }
 
       @media screen and (max-width: $desktop) {
-        margin-top: $medium;
+        margin-top: $large;
+        margin-right: $medium;
       }
 
     }

website/src/css/imports/header.css

@@ -75,13 +75,13 @@ header {
   width: 100%;
   z-index: 100;
 
-  @media screen and (min-width: $mobile) {
+  @media screen and (min-width: $tablet) {
     text-align: right;
     position: fixed;
   }
 
   &.scrolled {
-    @media screen and (min-width: $mobile) {
+    @media screen and (min-width: $tablet) {
       background: $darkerGrey;
       padding: $small 0;
     }
@@ -91,23 +91,18 @@ header {
     background: $darkerGrey;
     padding: $small 0;
 
-    @media screen and (max-width: $mobile) {
+    @media screen and (max-width: $tablet) {
       position: static;
     }
 
-    .nav-link {
+    /*.nav-link {
       @media screen and (min-width: 487px) and (max-width: 767px) {
         margin-top: $micro;
       }
-    }
+    }*/
 
-    .github-btn {
-      @media screen and (max-width: 767px) {
-        display: none;
-      }
-    }
 
-    .utility-input {
+    /*.utility-input {
       @media screen and (max-width: 767px) {
         display: block;
         height: $small;
@@ -117,7 +112,7 @@ header {
       @media screen and (min-width: 487px) and (max-width: 767px) {
         margin-top: 32px;
       }
-    }
+    }*/
   }
 
   a {
@@ -125,46 +120,12 @@ header {
     display: inline-block;
     vertical-align: middle;
     -webkit-vertical-align: middle !important;
-    margin-left: $micro;
-
-    @media screen and (min-width: $mobile) {
-      margin-left: 4px;
-    }
-
-    @media screen and (min-width: $tablet) {
     margin-left: $tiny;
-    }
-
-    &.nav-link:nth-child(4) {
-      margin-right: $tiny;
-    }
-
-    /*&.nav-link:not(:nth-child(2)):before {
-      content: '•';
-      padding-right: $tiny;
-      color: $green;
-
-      @media screen and (min-width: $mobile) {
-        padding-right: $micro;
-      }
-
-      @media screen and (min-width: $tablet) {
-        padding-right: $tiny;
-      }
-    }*/
 
     &:hover {
       color: $green;
     }
 
-    &.github-btn {
-      margin-top: $tiny;
-      margin-left: $micro;
-
-      @media screen and (min-width: 688px) {
-        margin-top: 0;
-      }
-    }
   }
 
   img {
@@ -222,7 +183,7 @@ header {
     border-radius: 4px;
     background-color: rgba(255,255,255,0.1);
     color: white;
-    margin: 0 $micro 0 10px;
+    margin: 0 $micro 0 $tiny;
     padding-bottom: 9px;
     text-align: left;
     text-decoration: none;
@@ -256,10 +217,36 @@ header {
     margin: 0 auto $tiny auto;
     width: 100%;
 
-    @media screen and (min-width: $mobile) {
+    @media screen and (min-width: $tablet) {
       float: left;
       margin: -4px 0 -6px 0;
       width: initial;
     }
   }
+  .cta-header a {
+    /*display: none;*/
+    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

@@ -15,18 +15,6 @@
     padding-top: calc($xl * 1.5);
   }
 
-  /*&:before {
-    background: url('/img/bow.svg') no-repeat bottom center;
-    background-size: contain;
-    bottom: -1px;
-    content: '';
-    height: $xl;
-    left: -$xl;
-    position: absolute;
-    right: -$xl;
-    width: calc(100% + ($xl * 2));
-  }*/
-
   &.landing {
     @media screen and (min-width: $tablet) {
       padding-bottom: $xxl;
@@ -36,7 +24,7 @@
   .hero-copy {
     margin: $medium auto $xl auto;
 
-    @media screen and (min-width: $tablet) {
+    @media screen and (min-width: $desktop) {
       text-align: center;
     }
   }
@@ -91,28 +79,9 @@
       margin-bottom: 0;
     }
 
-    &:before {
-      border: 1px solid white;
-      border-bottom: none;
-      border-radius: $largeBorderRadius $largeBorderRadius 0 0;
-      box-sizing: border-box;
-      content: '•••';
-      display: block;
-      font-size: $small;
-      height: $small;
-      line-height: 22px;
-      padding-left: 6px;
-      text-align: left;
-      width: 100%;
-    }
-
     img {
-      border: 1px solid white;
+      border-radius: $largeBorderRadius;
-      border-radius: 0 0 $largeBorderRadius $largeBorderRadius;
+      box-shadow: 0 10px 30px 0 rgba(0,0,0,0.15), 0 3px 9px 0 rgba(0,0,0,0.30);
-      box-sizing: border-box;
-      overflow: hidden;
-      width: 100%;
-      height: auto;
     }
   }