Size and spacing improvements, killed secondary CTA, changed contributor layout, other fixes

website/site/data/landing.yaml

@@ -1,8 +1,7 @@
 ---
 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"
+  subhead: "Use Netlify CMS with any static site generator for a faster and more flexible web project"
-  devhook: "Built developer-first."
   devfeatures:
     - feature: "Static + content management = ♥"
       description: "Get the speed, security, and scalability of a static site, while still providing a convenient editing interface for content."
@@ -19,12 +18,10 @@ 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."
-  button: "[Get started →](/docs/start-with-a-template/)"
+  button: "[Get started](/docs/start-with-a-template/)"
-  secondary: "Or do you just want to add Netlify CMS to your existing site?"
-  secondarylink: "[Read the setup guide.](/docs/quick-start)"
 
 editors:
-  hook: "A CMS that developers and content editors can agree on."
+  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."
   features:
     - feature: "Editor-friendly user interface"
@@ -38,12 +35,12 @@ editors:
       imgpath: "/img/hero-graphic.jpg"
 
 community:
-  hook: "Supported by a growing community."
+  hook: "Supported by a growing&nbsp;community"
   features:
     - feature: "Support when you need it"
       description: "Get up and running with comprehensive [documentation](/docs) and templates or work through difficult problems with help from the community on [Gitter](https://gitter.im/netlify/NetlifyCMS)."
     - feature: "A community-driven project you can help evolve"
       description: "Netlify CMS is built by a community of 60+ contributors — and you can help. Join our [bi-weekly planning sessions](/community) or read the [contributing guide](/docs/contributor-guide) to join in."
-  contributors: "Thank you to our awesome contributors."
+  contributors: "Thank you to our awesome contributors"
 
 ---

website/site/layouts/index.html

@@ -9,7 +9,6 @@
         <span class="subhead">{{ .Site.Data.landing.hero.subhead | markdownify }}</span>
       </div>
       <div class="hero-features">
-        <h2>{{ .Site.Data.landing.hero.devhook | markdownify }}</h2>
         {{ range $index, $id := .Site.Data.landing.hero.devfeatures }}
           <div class="feature">
             <h3>{{ .feature | markdownify }}</h3>
@@ -28,7 +27,6 @@
     <div class="cta-primary">
       <p><span class="hook">{{ .Site.Data.landing.cta.primaryhook | markdownify }}</span>&nbsp;{{ .Site.Data.landing.cta.primary | markdownify }}</p>{{ .Site.Data.landing.cta.button | markdownify }}
     </div>
-    <p class="cta-secondary">{{ .Site.Data.landing.cta.secondary | markdownify }}&nbsp;{{ .Site.Data.landing.cta.secondarylink | markdownify }}</p>
   </section>
 
   <section class="editors">
@@ -57,6 +55,7 @@
           <p>{{ .description | markdownify }}</p>
         </div>
         {{ end }}
+      </div>
       <div class="contributors feature">
         <h3>{{ .Site.Data.landing.community.contributors | markdownify }}</h3>
         {{ range .Site.Data.contributors }}
@@ -68,7 +67,6 @@
         {{ end }}
       </div>
     </div>
-    </div>
   </section>
 
 {{ partial "footer" . }}

website/src/css/imports/base.css

@@ -21,20 +21,21 @@ body {
 
 h1 {
   font-weight: $bold;
-  font-size: $medium;
+  font-size: 36px;
-  line-height: $large;
+  line-height: 48px;
   margin: 0 0 $small 0;
 
   @media screen and (min-width: $tablet) {
-    font-size: 36px;
+    font-size: 42px;
-    line-height: 48px;
+    line-height: 60px;
   }
 }
 
 h2 {
   font-family: $roboto;
-  font-size: $small;
+  font-size: 32px;
-  font-weight: $regular;
+  font-weight: $bold;
+  color: $darkGrey;
   margin: 0 auto $tiny auto;
 
   &.subhead {
@@ -44,9 +45,9 @@ h2 {
 
 h3 {
   font-family: $roboto;
-  font-size: $tiny;
+  font-size: 18px;
-  font-weight: $bold;
+  font-weight: $semibold;
-  line-height: 32px;
+  line-height: 40px;
   margin: 0;
 }
 

website/src/css/imports/community.css

@@ -4,19 +4,25 @@
   padding: $xl 0 $large 0;
 
   .community-features {
+    @neat-span-columns 8;
 
+    @media screen and (min-width: $desktop) {
+      @neat-span-columns 6;
+    }
 
     .feature {
       margin-top: $small;
 
-      @media screen and (min-width: $tablet) {
+    }
-        @neat-span-columns 6;
   }
 
-      &.contributors {
+  .contributors {
+    @neat-span-columns 10;
+    margin-top: $small;
 
-        @media screen and (min-width: $tablet) {
+    @media screen and (min-width: $desktop) {
-          @neat-span-columns 8;
+      @neat-span-columns 5;
+      float: right;
     }
 
     .contributor-list {
@@ -29,7 +35,4 @@
     }
 
   }
-
-    }
-  }
 }

website/src/css/imports/cta.css

@@ -38,23 +38,27 @@
       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(68,74,87,0.10), 0 1px 3px 0 rgba(68,74,87,0.20);
       border-radius: $borderRadius;
       padding: 12px 18px 12px 18px;
       transition: .2s;
+      text-align: center;
 
       @media screen and (min-width: $desktop) {
-        min-width: 122px;
+        min-width: 120px;
         margin: 0 0 0 $small;
       }
 
       &:hover {
-        margin-right: -4px;
+        transform: scale(1.05);
+        box-shadow: 0 4px 12px 0 rgba(68,74,87,0.20), 0 1px 3px 0 rgba(68,74,87,0.40);
       }
       &:active {
-        transform: scale(0.9);
+        transform: scale(0.95);
+        box-shadow: none;
       }
     }
 

website/src/css/imports/editors.css

@@ -5,7 +5,7 @@
   text-align: center;
 
   h2, p {
-    max-width: 800px;
+    max-width: $desktop;
     margin-left: auto;
     margin-right: auto;
   }
@@ -21,7 +21,7 @@
     }
 
     .feature {
-      max-width: 320px;
+      max-width: 340px;
 
       img {
         max-width: 280px;

website/src/css/imports/hero.css

@@ -43,11 +43,12 @@
 
   .subhead {
     display: inline-block;
-    margin: $tiny auto;
+    margin: $micro auto;
+    font-size: 18px;
+    line-height: 26px;
 
-    @media screen and (min-width: $mobile) {
+    @media screen and (min-width: $desktop) {
-      display: block;
+      font-size: 20px;
-      margin: calc($micro * 0.5) 0 $small 0;
     }
   }
 
@@ -66,6 +67,7 @@
 
   h3 {
     color: $green;
+    font-size: 20px;
   }
 
   .hero-features {