Migrate netlify-cms-www site into this repo (#860)

* Add frontmatter to docs files (prep to move)

* Move docs into position for website migration

* Migrate website from netlify-cms-www

Some modifications, including most of the changes in https://github.com/netlify/netlify-cms-www/pull/58 (previously reverted).

Also updated the readme and added hugo-bin for quicker onboarding of new docs contributors.

* Remove netlify.toml

This allows separate build commands for cms-demo and netlifycms.org.

* Remove website/netlify.toml

May re-add later, but it's not doing anything for now.

* Remove unused content file

website/src/css/imports/base.css

@@ -0,0 +1,150 @@
+@import url(https://fonts.googleapis.com/css?family=Roboto:400,100,100italic,300,300italic,400italic,500,700,900|Roboto+Mono:400,700);
+
+body {
+  color: $grey;
+  font-family: $roboto;
+  margin: 0;
+  text-align: center;
+  -webkit-font-smoothing: antialiased;
+  display: flex;
+  flex-direction: column;
+  min-height: 100vh;
+
+  @media screen and (min-width: $tablet) {
+    text-align: left;
+  }
+}
+
+.page {
+  flex-grow: 1;
+}
+
+h1 {
+  font-weight: $light;
+  font-size: $small;
+  line-height: $medium;
+  margin: 0 0 -10px 0;
+
+  @media screen and (min-width: $tablet) {
+    font-size: 36px;
+    line-height: 48px;
+  }
+}
+
+h2 {
+  font-family: $roboto;
+  font-size: 18px;
+  font-weight: $bold;
+  margin: 0;
+
+  &.subhead {
+    font-weight: $regular;
+  }
+}
+
+h3 {
+  font-family: $roboto;
+  font-size: $small;
+  font-weight: $regular;
+  line-height: 32px;
+  margin: 0;
+}
+
+p, ul {
+  font-size: 14px;
+  line-height: $small;
+
+  @media screen and (min-width: $tablet) {
+    font-size: 18px;
+    line-height: 32px;
+  }
+}
+
+a {
+  color: $grey;
+  text-decoration: none;
+  font-weight: $bold;
+}
+
+ul {
+  margin: $tiny 0 $tiny $small;
+  padding: 0;
+}
+
+.contained {
+  margin: 0 auto;
+  max-width: $display;
+  padding: 0 $small;
+
+  @media screen and (min-width: $tablet) {
+    padding: 0 $medium;
+  }
+}
+
+*[class^="btn-"] {
+  border-radius: $borderRadius;
+  box-sizing: border-box;
+  display: inline-block;
+  font-family: $roboto;
+  font-size: $tiny;
+  font-weight: $bold;
+  margin: 0;
+  padding: $tiny $small;
+  position: relative;
+  overflow: hidden;
+
+  &:after {
+    content: "";
+    position: absolute;
+    top: -40%;
+    left: -210%;
+    width: 200%;
+    height: 200%;
+    opacity: 0;
+    transform: rotate(30deg);
+    background: rgba(255,255,255,0.2);
+    background: linear-gradient(
+      to right,
+      rgba(255, 255, 255, 0.2) 0%,
+      rgba(255, 255, 255, 0.2) 77%,
+      rgba(255, 255, 255, 0.6) 92%,
+      rgba(255, 255, 255, 0.0) 100%
+    );
+  }
+
+  &:hover:after {
+    opacity: 1;
+    left: 110%;
+    transition-property: left, opacity;
+    transition-duration: 0.6s, 0.1s;
+    transition-timing-function: ease;
+  }
+
+  &:active:after {
+    opacity: 0;
+  }
+
+  &.small {
+    padding: $micro $tiny;
+  }
+}
+
+.btn-primary {
+  background-image: linear-gradient(0deg, $lightGreen 14%, $green 94%);
+  color: $darkerGrey;
+}
+
+.btn-secondary {
+  border: 1px solid white;
+  color: white;
+}
+
+pre {
+  border-radius: $borderRadius;
+}
+
+.code,
+code {
+  font-family: 'Roboto Mono', monospace !important;
+  font-size: 14px;
+}

website/src/css/imports/collab.css

@@ -0,0 +1,54 @@
+.collab,
+.how-it-works {
+  margin: $medium $tiny;
+
+  @media screen and (min-width: $mobile) {
+    margin: $large auto;
+  }
+}
+
+.collab {
+  h1 {
+    margin-bottom: $small;
+    text-align: center;
+
+    @media screen and (min-width: $mobile) {
+      margin-bottom: $large;
+    }
+  }
+
+  .collab-graphic {
+    @media screen and (min-width: $mobile) {
+      @neat-span-columns 4;
+      @neat-shift 1;
+    }
+  }
+
+  p {
+    margin-top: $medium;
+
+    @media screen and (min-width: $mobile) {
+      margin-top: 0;
+      text-align: left;
+      @neat-span-columns 5;
+      @neat-shift 1;
+    }
+
+    @media screen and (min-width: $tablet) {
+      margin-top: $medium;
+    }
+  }
+}
+
+.how-it-works {
+  padding-bottom: $xl;
+  text-align: left;
+
+  .section-label:not(:first-child) {
+    margin-top: $large;
+  }
+
+  a {
+    color: $darkGreen;
+  }
+}

website/src/css/imports/docs.css

@@ -0,0 +1,222 @@
+.docs.page {
+  padding: 69px $tiny $xl;
+  text-align: left;
+  @media screen and (min-width: $mobile) {
+    padding: 157px $medium $xl;
+  }
+
+  .sidebar {
+    @media screen and (min-width: $tablet) {
+      @neat-span-columns 6 24;
+    }
+  }
+
+	.docs-nav {
+		display: none;
+
+    @media screen and (min-width: $tablet) {
+      display: block;
+    }
+
+    @media screen and (min-width: $desktop) {
+      position: fixed;
+    }
+
+    &.mobile {
+      display: block;
+      position: relative;
+
+      @media screen and (min-width: $tablet) {
+        display: none;
+      }
+
+      &:after {
+        content: " ";
+        position: absolute;
+        top: 7px;
+        right: 20px;
+        width: 0;
+        height: 0;
+        border-left: 5px solid transparent;
+        border-right: 5px solid transparent;
+        border-top: 5px solid $grey;
+        z-index: 3;
+      }
+
+      select {
+        border: none;
+        border-radius: $borderRadius !important;
+        cursor: pointer;
+        margin: -$medium auto $medium auto;
+        width: 100%;
+        position: relative;
+        padding: 14px 20px;
+        z-index: 2;
+        outline: none;
+        box-shadow: none;
+        -webkit-appearance: none;
+        -webkit-border-radius: 100px;
+      }
+    }
+
+    .nav-link,
+    .subnav-link {
+      display: block;
+      font-weight: $regular;
+      color: $grey;
+      line-height: 32px;
+      text-decoration: none;
+      text-transform: capitalize;
+      transition: color .2s ease;
+
+      &.active {
+        color: $darkGreen;
+        font-weight: $bold;
+      }
+
+      &:hover {
+        color: $darkGreen;
+      }
+    }
+  }
+
+  .nav-subsections {
+    margin: $tiny 0;
+    padding: 0 0 0 $tiny;
+    border-left: 2px solid $lightestGrey;
+    list-style-type: none;
+
+    li {
+      margin: 0;
+      padding: 0;
+    }
+
+    .subnav-link {
+      font-size: 14px;
+    }
+  }
+
+  .docs-content {
+    font-size: 18px;
+    line-height: 28px;
+    font-weight: $light;
+
+    .edit-this-page {
+      float: right;
+    }
+
+    #pencil {
+      fill: #7CA511;
+    }
+
+    @media screen and (min-width: $tablet) {
+      @neat-span-columns 17 24;
+      @neat-shift 1 24;
+    }
+
+    @media screen and (min-width: $desktop) {
+      @neat-shift 7 24;
+    }
+
+
+    h2:not(:first-child) {
+      margin-top: 86px;
+    }
+
+    a {
+			text-decoration: none;
+			color: $darkGreen;
+		}
+
+		iframe {
+			width: 100%;
+		}
+
+    img {
+ 			max-width: 100%;
+ 			height: auto;
+ 		}
+
+    table {
+      background: #f7f7f7;
+      border-radius: $borderRadius;
+    }
+
+    code {
+      background: $lightestGrey;
+      border-radius: 2px;
+      padding: 2px 6px;
+      white-space: nowrap;
+    }    
+    
+    pre > code {
+      background: initial;
+      padding: initial;
+      white-space: inherit;
+    }
+	}
+
+	h1,
+	h2 {
+		font-size: 36px;
+		line-height: 48px;
+
+		&.intro-headline {
+			padding: 0 $small;
+			margin-bottom: 86px;
+		}
+	}
+
+  h2 {
+    font-size: $small;
+  }
+
+	h3 {
+		color: $grey;
+		font-size: 12px;
+		font-weight: $semibold;
+		text-transform: uppercase;
+		letter-spacing: 1.5px;
+		margin-top: $medium;
+
+
+		&:after {
+			content: ' ';
+			width: $small;
+			height: 2px;
+			background: $darkGreen;
+		    display: block;
+		    margin-top: 5px;
+		}
+
+		&.inverse {
+			color: white;
+		}
+	}
+
+	table {
+		width: 100%;
+		text-align: left;
+		margin: 34px 0 $medium 0;
+
+		th,
+		td {
+			padding: $micro;
+		}
+
+		th {
+			font-size: 18px;
+			font-weight: $bold;
+		}
+
+		tbody tr {
+			&:nth-child(odd) {
+				background: #fdfdfd;
+			}
+		}
+
+		td {
+			font-size: 14px;
+		}
+	}
+}

website/src/css/imports/features.css

@@ -0,0 +1,81 @@
+.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

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

website/src/css/imports/header.css

@@ -0,0 +1,262 @@
+.notification {
+  background: #414344;
+  box-sizing: border-box;
+  color: white;
+  display: block;
+  padding: $tiny $small;
+  position: absolute;
+  text-align: center;
+  width: 100%;
+  z-index: 101;
+
+  @media screen and (min-width: $mobile) {
+    position: fixed;
+  }
+
+  em {
+    font-style: normal;
+    color: #8B8B8B;
+    padding: 0 8px;
+  }
+
+  sup,
+  sub {
+    font-size: initial;
+    vertical-align: initial;
+  }
+
+  .text-link {
+    text-decoration: underline;
+    color: $green;
+  }
+
+  &.notification-loud {
+    background-color: $green;
+    color: $darkerGrey;
+  }
+
+  + header {
+    margin-top: 100px;
+
+    @media screen and (min-width: 360px) {
+      margin-top: 74px;
+    }
+
+    @media screen and (min-width: 712px) {
+      margin-top: 50px;
+    }
+
+    + div:before,
+    + .hero:before {
+      content: '';
+      display: block;
+      height: 100px;
+      width: 100%;
+
+      @media screen and (min-width: 360px) {
+        height: 74px;
+      }
+
+      @media screen and (min-width: 712px) {
+        height: 50px;
+      }
+    }
+  }
+}
+
+header {
+  background: transparent;
+  box-shadow: none;
+  font-family: $roboto;
+  position: absolute;
+  padding: $medium 0;
+  text-align: center;
+  transition: background .2s ease, padding .2s ease, box-shadow .2s ease;
+  width: 100%;
+  z-index: 100;
+
+  @media screen and (min-width: $mobile) {
+    text-align: right;
+    position: fixed;
+  }
+
+  &.scrolled {
+    @media screen and (min-width: $mobile) {
+      background: $darkGrey;
+      padding: $small 0;
+    }
+  }
+
+  &.docs {
+    background: $darkGrey;
+    padding: $small 0;
+
+    @media screen and (max-width: $mobile) {
+      position: static;
+    }
+
+    .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 {
+      @media screen and (max-width: 767px) {
+        display: block;
+        height: $small;
+        margin: $tiny 0 0 0;
+      }
+
+      @media screen and (min-width: 487px) and (max-width: 767px) {
+        margin-top: 32px;
+      }
+    }
+  }
+
+  a {
+    color: white;
+    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;
+      }
+    }
+
+    &:hover {
+      color: $green;
+    }
+
+    &.github-btn {
+      margin-top: $tiny;
+      margin-left: $micro;
+
+      @media screen and (min-width: 688px) {
+        margin-top: 0;
+      }
+    }
+  }
+
+  img {
+    margin: 0;
+    padding: 0;
+  }
+
+  .algolia-search {
+    margin-top: 1px;
+    -webkit-margin-top: 0;
+    -webkit-display: inline-block;
+    vertical-align: baseline !important;
+  }
+  input.closed {
+    display: none;
+  }
+
+  input {
+    padding-left: 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;
+    max-width: 160px;
+    -webkit-appearance: none;
+    visibility: visible;
+
+    &:focus {
+      outline: none;
+      display: inline-block;
+
+      ~ .bar {
+        &::before,
+        &::after {
+          width: 50%;
+        }
+      }
+
+      ~ .button-submit {
+        margin-top: -35px;
+      }
+    }
+
+  }
+
+  .utility-input {
+    display: none;
+    padding: $micro;
+    width: auto;
+    border: 1px solid white;
+    border-radius: 4px;
+    background: none;
+    color: white;
+    margin: 0 $micro 0 10px;
+    padding-bottom: 9px;
+    text-align: left;
+    text-decoration: none;
+    font-weight: 600;
+    font-size: 16px;
+    line-height: 24px;
+    transition: all .2s ease-in-out;
+
+    @media screen and (min-width: 968px) {
+      display: inline;
+    }
+
+    &:focus,
+    &:active {
+      outline-style: none;
+    }
+
+    &::-webkit-input-placeholder,
+    &:-moz-placeholder,
+    &::-moz-placeholder,
+    &:-ms-input-placeholder  {
+      font-size: $tiny;
+      font-weight: $semibold;
+      text-align: left;
+      text-decoration: none;
+      line-height: $small;
+    }
+  }
+
+  .logo {
+    margin: 0 auto $tiny auto;
+    width: 100%;
+
+    @media screen and (min-width: $mobile) {
+      float: left;
+      margin: -$micro 0 -6px 0;
+      width: initial;
+    }
+  }
+}

website/src/css/imports/hero.css

@@ -0,0 +1,231 @@
+.hero {
+  @neat-row;
+  background: $darkerGrey;
+  background-image: linear-gradient(-17deg, $darkerGrey 17%, $darkGrey 94%);
+  color: white;
+  overflow: hidden;
+  padding: calc($xl * 2.25) 0 $large 0;
+  position: relative;
+
+  @media screen and (min-width: $mobile) {
+    padding-top: calc($xl * 1.5);
+  }
+
+  @media screen and (min-width: $tablet) {
+    padding-top: calc($large * 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;
+  }
+
+  .hero-copy {
+    @media screen and (min-width: $tablet) {
+      @neat-span-columns 6;
+    }
+  }
+
+  .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;
+      }
+    }
+  }
+
+  .subhead {
+    display: inline-block;
+    margin: $micro auto;
+    text-align: left;
+
+    @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;
+    }
+  }
+
+  strong {
+    display: block;
+  }
+
+  .mooseheads {
+    margin: $micro 0 0 0;
+
+    @media screen and (min-width: $mobile) {
+      text-align: left;
+    }
+
+    strong {
+      font-size: 12px;
+      opacity: .5;
+    }
+  }
+
+  .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;
+    }
+  }
+
+  .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;
+        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;
+      }
+    }
+  }
+
+  .thanks-devs {
+    line-height: 18px;
+    margin: $micro 0 0 0;
+    opacity: 0.5;
+    text-align: center;
+
+    @media screen and (min-width: $tablet) {
+      font-size: $tiny;
+      line-height: 21px;
+    }
+  }
+}

website/src/css/imports/inspiration.css

@@ -0,0 +1,41 @@
+.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/imports/utilities.css

@@ -0,0 +1,259 @@
+@keyframes fadeInUp {
+   0% {
+      opacity: 0;
+      transform: translateY(10px);
+   }
+   100% {
+      opacity: 1;
+      transform: translateY(0);
+   }
+}
+
+.centered-text {
+	text-align: center;
+}
+
+.container {
+	@neat-outer-container;
+}
+
+.half,
+.third,
+.quarter {
+	padding-bottom: $small;
+	@neat-span-columns 12;
+
+  @media screen and (min-width: $tablet) {
+		@neat-span-columns 6;
+		padding-bottom: 0;
+	}
+
+	&:nth-child(even) {
+		@media screen and (min-width: $mobile) and (max-width: 767px) {
+			margin-right: 0;
+		}
+	}
+}
+
+.third {
+	@media screen and (min-width: $tablet) {
+		@neat-span-columns 4;
+	}
+}
+
+.quarter {
+	@media screen and (min-width: $tablet) {
+		@neat-span-columns 3;
+	}
+}
+
+.clearfix {
+	&:after {
+		content: ' ';
+		width: 100%;
+		display: table;
+	}
+}
+
+.section-label {
+	color: $grey;
+	font-size: 12px;
+	font-weight: $semibold;
+  letter-spacing: 1.5px;
+  text-transform: uppercase;
+
+	&:after {
+    background: $darkGreen;
+    content: ' ';
+    display: block;
+    height: 2px;
+    margin-top: 5px;
+		width: $small;
+	}
+
+	&.inverse {
+		color: white;
+
+    &.mono:after {
+      background: $grey;
+    }
+	}
+
+  &.extended {
+    display: inline-block;
+    line-height: 1.15;
+
+    &:after {
+      position: relative;
+      height: 1px;
+      left: -10000%;
+      width: calc(10100%);
+      z-index: -1;
+    }
+  }
+}
+
+img.responsive {
+	width: 100%;
+	height: auto;
+}
+
+.img-bg-hero {
+	color: white;
+	background-size: 100% auto;
+	background-size: cover !important;
+
+	h1,
+	h2 {
+		color: white;
+		font-weight: $light;
+
+		@media screen and (min-width: $tablet) {
+			font-weight: $thin;
+		}
+	}
+}
+
+.pagination {
+	text-align: center;
+	margin: 0;
+	padding: 0;
+	list-style-type: none;
+
+	@media screen and (min-width: $tablet) {
+		@neat-span-columns 8;
+		@neat-shift 2;
+	}
+
+	li {
+		margin: 0;
+		padding: 0;
+		display: inline;
+
+		@media screen and (min-width: $tablet) {
+			display: inline-block;
+		}
+
+		&.active a,
+		a[aria-label] {
+			display: inline-block;
+		}
+	}
+
+	a {
+		text-decoration: none;
+		font-weight: $light;
+		color: $grey;
+		width: 18px;
+		font-size: $tiny;
+		padding: $micro;
+		border-radius: 99px;
+		display: none;
+
+		@media screen and (min-width: $tablet) {
+			display: inline-block;
+		}
+	}
+
+	.active a {
+		color: white;
+		background: $green;
+	}
+
+	.disabled a {
+		color: $lighterGrey;
+	}
+}
+
+.unordered-list ul {
+  margin: 0 0 $small 0;
+  padding: 0;
+  font-size: 16px;
+  line-height: 28px;
+  list-style-type: none;
+  list-style-position: inside;
+
+  &:last-child {
+    margin-bottom: 0;
+  }
+
+  li span {
+    position: relative;
+    padding-left: $small;
+    display: list-item;
+
+    &:before {
+      content: '\2192';
+      color: $green;
+      position: absolute;
+      left: 0;
+    }
+  }
+}
+
+.numbered-list ol {
+  list-style-type: decimal-leading-zero;
+  margin: 32px 0 0 0;
+  padding: 0 0 0 78px;
+
+  li {
+    margin-bottom: 33px;
+    font-size: 34px;
+    font-weight: $bold;
+    color: $grey;
+    position: relative;
+
+
+    &:before,
+    &:after {
+      position: absolute;
+      font-size: 12px;
+    }
+
+    &:before {
+      content: 'N';
+      top: 6px;
+      left: -78px;
+      padding-bottom: 2px;
+      border-bottom: 1px solid $green;
+      padding-right: 25px;
+    }
+
+    &:after {
+      content: 'ọ';
+      left: -69px;
+      top: 4px;
+    }
+
+    &:last-child {
+      margin-bottom: 0;
+    }
+  }
+
+  h2 {
+    font-size: 34px;
+    margin-bottom: $tiny;
+
+    @media screen and (min-width: $tablet) {
+      margin-bottom: 12px;
+    }
+
+    &:before {
+      content: ' ';
+      position: absolute;
+      background: white;
+      left: -19px;
+      height: 10px;
+      width: 10px;
+      top: $small;
+    }
+  }
+
+  p {
+    margin: 0;
+    font-size: 18px;
+    font-weight: $regular;
+    line-height: 28px;
+    color: $lightGrey;
+  }
+}

website/src/css/lib/prism.css

@@ -0,0 +1,178 @@
+/* http://prismjs.com/download.html?themes=prism&languages=markup+css+clike+javascript+bash+ruby+git+go+json+jsx+yaml&plugins=line-numbers */
+/**
+ * prism.js default theme for JavaScript, CSS and HTML
+ * Based on dabblet (http://dabblet.com)
+ * @author Lea Verou
+ */
+
+code[class*="language-"],
+pre[class*="language-"] {
+  color: black;
+  background: none;
+  font-family: Consolas, Monaco, 'Andale Mono', 'Ubuntu Mono', monospace;
+  text-align: left;
+  white-space: pre;
+  word-spacing: normal;
+  word-break: normal;
+  word-wrap: normal;
+  line-height: 1;
+
+  -moz-tab-size: 4;
+  -o-tab-size: 4;
+  tab-size: 4;
+
+  -webkit-hyphens: none;
+  -moz-hyphens: none;
+  -ms-hyphens: none;
+  hyphens: none;
+}
+
+pre[class*="language-"]::-moz-selection, pre[class*="language-"] ::-moz-selection,
+code[class*="language-"]::-moz-selection, code[class*="language-"] ::-moz-selection {
+  text-shadow: none;
+  background: #b3d4fc;
+}
+
+pre[class*="language-"]::selection, pre[class*="language-"] ::selection,
+code[class*="language-"]::selection, code[class*="language-"] ::selection {
+  text-shadow: none;
+  background: #b3d4fc;
+}
+
+@media print {
+  code[class*="language-"],
+  pre[class*="language-"] {
+    text-shadow: none;
+  }
+}
+
+/* Code blocks */
+pre[class*="language-"] {
+  padding: 1em;
+  margin: .5em 0;
+  overflow: auto;
+}
+
+:not(pre) > code[class*="language-"],
+pre[class*="language-"] {
+  background: #f5f2f0;
+}
+
+/* Inline code */
+:not(pre) > code[class*="language-"] {
+  padding: .1em;
+  border-radius: .3em;
+  white-space: normal;
+}
+
+.token.comment,
+.token.prolog,
+.token.doctype,
+.token.cdata {
+  color: slategray;
+}
+
+.token.punctuation {
+  color: #999;
+}
+
+.namespace {
+  opacity: .7;
+}
+
+.token.property,
+.token.tag,
+.token.boolean,
+.token.number,
+.token.constant,
+.token.symbol,
+.token.deleted {
+  color: #905;
+}
+
+.token.selector,
+.token.attr-name,
+.token.string,
+.token.char,
+.token.builtin,
+.token.inserted {
+  color: #690;
+}
+
+.token.operator,
+.token.entity,
+.token.url,
+.language-css .token.string,
+.style .token.string {
+  color: #a67f59;
+  background: hsla(0, 0%, 100%, .5);
+}
+
+.token.atrule,
+.token.attr-value,
+.token.keyword {
+  color: #07a;
+}
+
+.token.function {
+  color: #DD4A68;
+}
+
+.token.regex,
+.token.important,
+.token.variable {
+  color: #e90;
+}
+
+.token.important,
+.token.bold {
+  font-weight: bold;
+}
+.token.italic {
+  font-style: italic;
+}
+
+.token.entity {
+  cursor: help;
+}
+
+pre.line-numbers {
+  position: relative;
+  padding-left: 3.8em;
+  counter-reset: linenumber;
+}
+
+pre.line-numbers > code {
+  position: relative;
+}
+
+.line-numbers .line-numbers-rows {
+  position: absolute;
+  pointer-events: none;
+  top: 0;
+  font-size: 100%;
+  left: -3.8em;
+  width: 3em; /* works for line-numbers below 1000 lines */
+  letter-spacing: -1px;
+  border-right: 1px solid #999;
+
+  -webkit-user-select: none;
+  -moz-user-select: none;
+  -ms-user-select: none;
+  user-select: none;
+
+}
+
+  .line-numbers-rows > span {
+    pointer-events: none;
+    display: block;
+    counter-increment: linenumber;
+  }
+
+    .line-numbers-rows > span:before {
+      content: counter(linenumber);
+      color: #999;
+      display: block;
+      padding-right: 0.8em;
+      text-align: right;
+    }

website/src/css/main.css

@@ -0,0 +1,10 @@
+@import "imports/base.css";
+@import "imports/utilities.css";
+@import "imports/header.css";
+@import "imports/hero.css";
+@import "imports/collab.css";
+@import "imports/features.css";
+@import "imports/inspiration.css";
+@import "imports/docs.css";
+@import "imports/footer.css";
+