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

website/src/css/imports/base.css

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

website/src/css/imports/community.css

@@ -4,32 +4,35 @@
   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 {
-
-        @media screen and (min-width: $tablet) {
-          @neat-span-columns 8;
-        }
-
-        .contributor-list {
-          margin-top: $micro;
-          img {
-            width: 32px;
-            margin: 0 $micro $micro 0;
-            border-radius: 16px;
-          }
-        }
-
-      }
-
     }
   }
+
+  .contributors {
+    @neat-span-columns 10;
+    margin-top: $small;
+
+    @media screen and (min-width: $desktop) {
+      @neat-span-columns 5;
+      float: right;
+    }
+
+    .contributor-list {
+      margin-top: $micro;
+      img {
+        width: 32px;
+        margin: 0 $micro $micro 0;
+        border-radius: 16px;
+      }
+    }
+
+  }
 }

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) {
-      display: block;
-      margin: calc($micro * 0.5) 0 $small 0;
+    @media screen and (min-width: $desktop) {
+      font-size: 20px;
     }
   }
 
@@ -66,6 +67,7 @@
 
   h3 {
     color: $green;
+    font-size: 20px;
   }
 
   .hero-features {