Merge pull request #880 from ziburski/netlifycmsorg-new

Shipping Netlify CMS website 1.0

website/src/css/imports/base.css

@@ -1,10 +1,10 @@
 @import url(https://fonts.googleapis.com/css?family=Roboto:400,100,100italic,300,300italic,400italic,500,700,900|Roboto+Mono:400,700);
 
 body {
+  background-color: $shadeBlue;
   color: $grey;
   font-family: $roboto;
   margin: 0;
-  text-align: center;
   -webkit-font-smoothing: antialiased;
   display: flex;
   flex-direction: column;
@@ -20,22 +20,23 @@ body {
 }
 
 h1 {
-  font-weight: $light;
-  font-size: $small;
-  line-height: $medium;
-  margin: 0 0 -10px 0;
+  font-weight: $bold;
+  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: 18px;
+  font-size: 32px;
   font-weight: $bold;
-  margin: 0;
+  color: $darkGrey;
+  margin: 0 auto $tiny auto;
 
   &.subhead {
     font-weight: $regular;
@@ -44,24 +45,24 @@ h2 {
 
 h3 {
   font-family: $roboto;
-  font-size: $small;
-  font-weight: $regular;
-  line-height: 32px;
+  font-size: 18px;
+  font-weight: $semibold;
+  line-height: 30px;
+  padding-bottom: $micro;
   margin: 0;
 }
 
-p, ul {
-  font-size: 14px;
-  line-height: $small;
+h3 > p {
+}
 
-  @media screen and (min-width: $tablet) {
-    font-size: 18px;
-    line-height: 32px;
-  }
+p, ul {
+  font-size: $tiny;
+  line-height: 26px;
+  margin: 0;
 }
 
 a {
-  color: $grey;
+  color: $darkGreen;
   text-decoration: none;
   font-weight: $bold;
 }

website/src/css/imports/community.css

@@ -0,0 +1,51 @@
+.communitysupport {
+  @neat-row;
+  background-color: white;
+  padding: $xl 0 $large 0;
+
+  @media screen and (min-width: $desktop) {
+    h2 {
+      text-align: center;
+      margin-bottom: $medium;
+    }
+  }
+
+  .community-features {
+    @neat-span-columns 12;
+
+    @media screen and (min-width: $tablet) {
+      @neat-span-columns 8;
+    }
+    @media screen and (min-width: $desktop) {
+      @neat-span-columns 6;
+    }
+
+    .feature {
+      margin-top: $small;
+
+    }
+  }
+
+  .contributors {
+    @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;
+    }
+
+    .contributor-list {
+      margin-top: 4px;
+      img {
+        width: 32px;
+        margin: 0 $micro $micro 0;
+        border-radius: 16px;
+      }
+    }
+
+  }
+}

website/src/css/imports/cta.css

@@ -0,0 +1,70 @@
+.cta {
+
+  @media screen and (min-width: $desktop) {
+    position: relative;
+    top: -50px;
+    width: 880px;
+    margin: auto;
+  }
+
+  .cta-primary {
+    background-color: white;
+    padding: $medium $small $medium $small;
+
+    @media screen and (min-width: $tablet) {
+      padding: $medium;
+    }
+
+    @media screen and (min-width: $desktop) {
+      padding: $small $medium $small $medium;
+      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;
+    }
+
+    p {
+      font-size: 18px;
+      line-height: 25px;
+      color: $lightishGrey;
+
+      .hook {
+        font-weight: $bold;
+        color: $darkGrey;
+      }
+    }
+
+    a {
+      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;
+      display: inline-block;
+      margin-top: $tiny;
+
+
+      @media screen and (min-width: $desktop) {
+        flex-shrink: 0;
+        margin: 0 0 0 $small;
+      }
+
+      &:hover {
+        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.95);
+        box-shadow: none;
+      }
+    }
+
+  }
+
+}

website/src/css/imports/docs.css

@@ -99,7 +99,6 @@
   .docs-content {
     font-size: 18px;
     line-height: 28px;
-    font-weight: $light;
 
     .edit-this-page {
       float: right;
@@ -120,7 +119,7 @@
 
 
     h2:not(:first-child) {
-      margin-top: 86px;
+      margin-top: $large;
     }
 
     a {
@@ -147,8 +146,8 @@
       border-radius: 2px;
       padding: 2px 6px;
       white-space: nowrap;
-    }    
-    
+    }
+
     pre > code {
       background: initial;
       padding: initial;
@@ -178,6 +177,7 @@
 		text-transform: uppercase;
 		letter-spacing: 1.5px;
 		margin-top: $medium;
+    margin-bottom: $small;
 
 
 		&:after {

website/src/css/imports/editors.css

@@ -0,0 +1,51 @@
+.editors {
+  @neat-row;
+  margin-top: calc($large * 1.5);
+  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;
+    justify-content: space-evenly;
+    margin-top: $large;
+
+    @media screen and (max-width: $desktop) {
+      justify-content: flex-start;
+      flex-wrap: wrap;
+      margin-top: $small;
+    }
+
+    .feature {
+      max-width: 340px;
+
+      img {
+        max-width: 280px;
+        margin-bottom: $tiny;
+        border-radius: $borderRadius;
+        box-shadow: 0 4px 12px 0 rgba(68,74,87,0.10), 0 1px 3px 0 rgba(68,74,87,0.20);
+      }
+
+      @media screen and (max-width: $desktop) {
+        margin-top: $large;
+        margin-right: $medium;
+      }
+
+    }
+  }
+}

website/src/css/imports/features.css

@@ -1,81 +0,0 @@
-.features {
-  @neat-row;
-  overflow: hidden;
-  padding-top: $large;
-  position: relative;
-  margin: 0 auto $medium auto;
-
-  @media screen and (min-width: $mobile) {
-    margin: 0 auto $large auto;
-    padding-top: calc($xl * 1.2);
-  }
-
-  @media screen and (min-width: $tablet) {
-    margin-bottom: $medium;
-  }
-
-  &:before {
-    background: url('/img/wavy-divider.svg') no-repeat top center;
-    background-size: contain;
-    top: 0;
-    content: '';
-    height: $xl;
-    left: -$xl;
-    position: absolute;
-    right: -$xl;
-    width: calc(100% + ($xl * 2));
-  }
-
-  h1 {
-    text-align: center;
-    margin-bottom: calc($large * .9);
-    padding: 0 $small;
-
-    @media screen and (min-width: $tablet) {
-      padding: 0;
-    }
-
-    + .features-column .feature {
-      @media screen and (min-width: $desktop) {
-        text-align: right;
-      }
-    }
-  }
-
-  .features-column {
-    @media screen and (min-width: $mobile) {
-      @neat-span-columns 6;
-    }
-
-    @media screen and (min-width: $desktop) {
-      @neat-span-columns 4;
-    }
-  }
-
-  .feature {
-    margin-bottom: $small;
-    padding: 0 $small;
-    text-align: left;
-
-    @media screen and (min-width: $desktop) {
-      margin-bottom: calc($large * 1.37);
-      padding: 0;
-    }
-
-    p {
-      font-size: 14px;
-      line-height: 26px;
-    }
-  }
-
-  .features-graphic {
-    display: none;
-    padding-top: $tiny;
-
-
-    @media screen and (min-width: $desktop) {
-      display: inline-block;
-      @neat-span-columns 4;
-    }
-  }
-}

website/src/css/imports/footer.css

@@ -1,12 +1,14 @@
 footer {
-  background: $lighterGrey;
-  padding: $small 0;
+  background: white;
+  padding: $medium 0;
 
   p {
     color: $grey;
     font-family: $roboto;
     font-size: 12px;
     opacity: .5;
-    text-align: center;
   }
-}
+  a {
+    color: $grey;
+  }
+}

website/src/css/imports/header.css

@@ -1,5 +1,5 @@
 .notification {
-  background: #414344;
+  background-color: $darkerGrey;
   box-sizing: border-box;
   color: white;
   display: block;
@@ -75,39 +75,34 @@ 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) {
-      background: $darkGrey;
+    @media screen and (min-width: $tablet) {
+      background: $darkerGrey;
       padding: $small 0;
     }
   }
 
   &.docs {
-    background: $darkGrey;
+    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,42 +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: $micro;
-    }
-
-    &.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;
-      }
-    }
+    margin-left: $tiny;
 
     &:hover {
       color: $green;
     }
 
-    &.github-btn {
-      margin-top: $tiny;
-      margin-left: $micro;
-
-      @media screen and (min-width: 688px) {
-        margin-top: 0;
-      }
-    }
   }
 
   img {
@@ -215,11 +180,10 @@ header {
     display: none;
     padding: $micro;
     width: auto;
-    border: 1px solid white;
     border-radius: 4px;
-    background: none;
+    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;
@@ -253,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: -$micro 0 -6px 0;
+      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

@@ -1,10 +1,10 @@
 .hero {
   @neat-row;
   background: $darkerGrey;
-  background-image: linear-gradient(-17deg, $darkerGrey 17%, $darkGrey 94%);
-  color: white;
+  background-image: linear-gradient(-180deg, #323B3B 0%, $darkerGrey 20%);
+  color: $blueGrey;
   overflow: hidden;
-  padding: calc($xl * 2.25) 0 $large 0;
+  padding: calc($xl * 2.25) 0 0 0;
   position: relative;
 
   @media screen and (min-width: $mobile) {
@@ -12,87 +12,31 @@
   }
 
   @media screen and (min-width: $tablet) {
-    padding-top: calc($large * 1.5);
+    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));
-  }
-
-  @media screen and (min-width: $tablet) {
-    background-position: center;
-    padding: calc($xl * 1.5) 0 $xl 0;
+  &.landing {
+    @media screen and (min-width: $tablet) {
+      padding-bottom: $xxl;
+    }
   }
 
   .hero-copy {
-    @media screen and (min-width: $tablet) {
-      @neat-span-columns 6;
-    }
-  }
+    margin: $medium auto $xl auto;
 
-  .headline {
-    margin-top: -12px;
-    max-width: 400px;
-
-    @media screen and (min-width: $mobile) {
-      text-align: left;
-    }
-
-    span {
-      display: none;
-
-      @media screen and (min-width: $tablet) {
-        display: initial;
-      }
+    @media screen and (min-width: $desktop) {
+      text-align: center;
     }
   }
 
   .subhead {
     display: inline-block;
     margin: $micro auto;
-    text-align: left;
+    font-size: 18px;
+    line-height: 26px;
 
-    @media screen and (min-width: $mobile) {
-      display: block;
-      margin: $medium 0 $small 0;
-    }
-  }
-
-  .ctas {
-    margin-bottom: $small;
-
-    @media screen and (min-width: $mobile) {
-      text-align: left;
-    }
-
-    ul {
-      list-style-type: none;
-      margin: 0;
-      padding: 0;
-    }
-
-    a {
-      color: $green;
-      font-weight: $semibold;
-    }
-  }
-
-  .btn-secondary {
-    display: none;
-    padding-top: 14px;
-    max-height: 53px;
-    margin: 0 0 0 calc($micro / 2);
-
-    @media screen and (min-width: $tablet) {
-      display: inline-block;
+    @media screen and (min-width: $desktop) {
+      font-size: 20px;
     }
   }
 
@@ -100,132 +44,147 @@
     display: block;
   }
 
-  .mooseheads {
-    margin: $micro 0 0 0;
-
-    @media screen and (min-width: $mobile) {
-      text-align: left;
-    }
-
-    strong {
-      font-size: 12px;
-      opacity: .5;
-    }
+  h1 {
+    color: white;
+    margin-bottom: 0;
   }
 
-  .hero-graphic {
-    @neat-span-columns 6;
-    display: none;
-
-    @media screen and (min-width: $tablet) {
-      display: initial;
-    }
-
-    &: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: 0 0 $largeBorderRadius $largeBorderRadius;
-      box-sizing: border-box;
-      overflow: hidden;
-      width: 100%;
-      height: auto;
-    }
+  h2 {
+    color: white;
   }
 
-  .calendar-cta {
-    text-align: center;
-    background: $darkerGrey;
-    background-image: linear-gradient(-17deg, $darkerGrey 17%, $darkGrey 94%);
-    border-radius: $largeBorderRadius;
-    box-shadow: 0 $micro $small rgba(0,0,0,0.1);
-    padding: $medium;
-    box-sizing: border-box;
+  h3 {
+    color: $green;
+    font-size: 20px;
+  }
 
-    @media screen and (min-width: $tablet) {
-      max-width: 446px;
-    }
+  .hero-features {
 
     @media screen and (min-width: $tablet) {
       @neat-span-columns 5;
-      @neat-shift 1;
-      display: inline-block;
-      position: fixed;
-      right: $medium;
     }
 
-    @media screen and (min-width: 1280px) {
-      right: initial;
-      left: calc(50% - $large);
+    .feature {
+      margin-top: $medium;
     }
 
-    .calendar {
+  }
+
+  .hero-graphic {
+    margin: $large auto $large auto;
+
+    @media screen and (min-width: $tablet) {
+      @neat-span-columns 6;
+      float: right;
+      margin-bottom: 0;
+    }
+
+    img {
       border-radius: $largeBorderRadius;
-      overflow: hidden;
-      box-shadow: 0 $micro $small rgba(0,0,0,0.5);
-      margin: $small auto;
-      max-width: 250px;
-
-      .month {
-        background: $green;
-        color: $grey;
-        font-weight: $black;
-        text-transform: uppercase;
-        letter-spacing: 4px;
-        font-size: $tiny;
-        padding: $tiny;
-      }
-
-      .day {
-        font-size: $xl;
-        font-weight: $black;
-        color: white;
-        border: 1px solid $grey;
-        border-top: none;
-        border-bottom-left-radius: $largeBorderRadius;
-        border-bottom-right-radius: $largeBorderRadius;
-      }
-    }
-
-    strong {
-      display: inline-block;
-    }
-
-    h2:not(:first-child) {
-      font-weight: $light;
-    }
-
-    .cal-cta {
-      margin-top: $micro;
-
-      a {
-        color: $green;
-      }
+      box-shadow: 0 10px 30px 0 rgba(0,0,0,0.15), 0 3px 9px 0 rgba(0,0,0,0.30);
     }
   }
 
-  .thanks-devs {
-    line-height: 18px;
-    margin: $micro 0 0 0;
-    opacity: 0.5;
-    text-align: center;
+ /*COMMUNITY PAGE*/
 
-    @media screen and (min-width: $tablet) {
+ &.community {
+   .hero-copy {
+     text-align: left;
+     @media screen and (min-width: $tablet) {
+       @neat-span-columns 5;
+     }
+   }
+ }
+
+ .ctas {
+  margin-bottom: $small;
+
+  @media screen and (min-width: $mobile) {
+    text-align: left;
+  }
+
+  ul {
+    list-style-type: none;
+    margin: 0;
+    padding: 0;
+  }
+
+  a {
+    color: $green;
+    font-weight: $semibold;
+  }
+}
+
+.calendar-cta {
+  text-align: center;
+  background: $darkerGrey;
+  background-image: linear-gradient(-17deg, $darkerGrey 17%, $darkGrey 94%);
+  border-radius: $largeBorderRadius;
+  box-shadow: 0 $micro $small rgba(0,0,0,0.1);
+  padding: $medium;
+  box-sizing: border-box;
+
+  @media screen and (min-width: $tablet) {
+    max-width: 446px;
+  }
+
+  @media screen and (min-width: $tablet) {
+    @neat-span-columns 5;
+    @neat-shift 1;
+    display: inline-block;
+    position: fixed;
+    right: $medium;
+  }
+
+  @media screen and (min-width: 1280px) {
+    right: initial;
+    left: calc(50% - $large);
+  }
+
+  .calendar {
+    border-radius: $largeBorderRadius;
+    overflow: hidden;
+    box-shadow: 0 $micro $small rgba(0,0,0,0.5);
+    margin: $small auto;
+    max-width: 250px;
+
+    .month {
+      background: $green;
+      color: $grey;
+      font-weight: $black;
+      text-transform: uppercase;
+      letter-spacing: 4px;
       font-size: $tiny;
-      line-height: 21px;
+      padding: $tiny;
+    }
+
+    .day {
+      font-size: $xl;
+      font-weight: $black;
+      color: white;
+      border: 1px solid $grey;
+      border-top: none;
+      border-bottom-left-radius: $largeBorderRadius;
+      border-bottom-right-radius: $largeBorderRadius;
+    }
+  }
+
+  strong {
+    display: inline-block;
+  }
+
+  h2:not(:first-child) {
+    font-weight: $light;
+  }
+
+  .cal-cta {
+    margin-top: $micro;
+
+    a {
+      color: $green;
     }
   }
 }
+
+
+}

website/src/css/imports/inspiration.css

@@ -1,41 +0,0 @@
-.inspiration {
-  margin: $small $small $large $small;
-  text-align: center;
-
-  @media screen and (min-width: $tablet) {
-    margin: $xl $small;
-  }
-
-  h1 {
-    margin-bottom: $small;
-
-    @media screen and (min-width: $tablet) {
-      margin-bottom: 44px;
-    }
-  }
-
-  p {
-    box-sizing: border-box;
-    display: inline-block;
-    padding: 0;
-    margin: 0 auto $small auto;
-    max-width: 700px;
-    text-align: left;
-    width: 100%;
-
-    &:nth-child(2) {
-      font-size: $tiny;
-      line-height: $small;
-      font-weight: $bold;
-
-      @media screen and (min-width: $tablet) {
-        font-size: $small;
-        line-height: $medium;
-      }
-    }
-  }
-
-  a {
-    color: $darkGreen;
-  }
-}

website/src/css/main.css

@@ -2,9 +2,9 @@
 @import "imports/utilities.css";
 @import "imports/header.css";
 @import "imports/hero.css";
+@import "imports/cta.css";
+@import "imports/editors.css";
+@import "imports/community.css";
 @import "imports/collab.css";
-@import "imports/features.css";
-@import "imports/inspiration.css";
 @import "imports/docs.css";
 @import "imports/footer.css";
-