Example usage snippits on landing page

_includes/example-usage.html

@@ -0,0 +1,63 @@
+<section class="layout layout--light">
+  <section class="content content--small">
+    <h1>Example Usage</h1>
+
+    <p>
+      First, specify in your controller that you don't want to render the layout
+      (since EmberCLI's index.html is a fully-formed HTML document):
+    </p>
+
+    <div class="code">
+      <div class="code__header">
+        app/controllers/application.rb
+      </div>
+      <pre class="code__body">
+        <code>
+class ApplicationController < ActionController::Base
+  def index
+    render layout: false
+  end
+end</code>
+      </pre>
+    </div>
+
+    <p>
+      To render the EmberCLI generated index.html into the view, use the
+      include_ember_index_html helper:
+    </p>
+
+    <div class="code ERB">
+      <div class="code__header">
+        app/views/application/index.html.erb
+      </div>
+      <pre class="code__body">
+        <code class="ERB">
+<span class="tag"><%=</span> include_ember_index_html :frontend <span class="tag">%></span></code>
+      </pre>
+    </div>
+
+    <p>
+      To inject markup into page, pass in a block that accepts the head, and
+      (optionally) the body:
+    </p>
+
+    <div class="code ERB">
+      <div class="code__header">
+        app/views/application/index.html.erb
+      </div>
+      <pre class="code__body">
+        <code>
+<span class="tag"><%=</span> include_ember_index_html :frontend do |head| <span class="tag">%></span>
+  <span class="tag"><%</span> head.append do <span class="tag">%></span>
+    <span class="tag"><%=</span> csrf_meta_tags <span class="tag">%></span>
+  <span class="tag"><%</span> end <span class="tag">%></span>
+<span class="tag"><%</span> end <span class="tag">%></span></code>
+      </pre>
+    </div>
+    <footer class="content__footer">
+      <a class="button" href="https://github.com/thoughtbot/ember-cli-rails">
+        Full Documentation
+      </a>
+    </footer>
+  </section>
+</section>

_sass/_code.scss

@@ -0,0 +1,24 @@
+.code {
+  border: solid 1px $code-border-color;
+  background-color: $code-background-color;
+  border-radius: $base-border-radius;
+  font-size: $base-font-size * 1.1;
+  margin-bottom: 2.5rem;
+
+  @media (min-width: $medium-screen) {
+    margin-bottom: 4rem;
+  }
+}
+
+.code__header {
+  background-color: $code-header-background-color;
+  color: darken($code-header-background-color, 40%);
+  padding: 0.75rem 1rem 1rem;
+  overflow-x: scroll;
+}
+
+.code__body {
+  margin: 0;
+  padding: 0 1rem;
+  overflow-x: scroll;
+}

_sass/_content.scss

@@ -40,6 +40,7 @@
 
 .content__footer {
   @include margin(1rem null);
+  text-align: center;
   width: 100%;
 
   @media (min-width: $medium-screen) {

_sass/_github.scss

@@ -0,0 +1,282 @@
+.hljs {
+  display: block;
+  overflow-x: auto;
+  padding: 0.5em;
+  color: $mine-shaft;
+}
+
+.hljs-attribute {
+  color: $teal;
+}
+
+.hljs-addition {
+  background: $snowy-mint;
+}
+
+.hljs-comment {
+  color: $lemon-grass;
+  font-style: italic;
+}
+
+.hljs-chunk {
+  color: $silver-chalice;
+}
+
+.hljs-doctag {
+  color: $crimson;
+}
+
+.hljs-doctype {
+  color: $mountain-mist;
+  font-weight: bold;
+}
+
+.hljs-hexcolor {
+  color: $teal;
+}
+
+.hljs-id {
+  color: $red-berry;
+  font-weight: bold;
+}
+
+.hljs-inheritance {
+  color:$royal-blue;
+}
+
+.hljs-keyword {
+  color: $ember-orange;
+  font-weight: bold;
+
+  .hljs-list & {
+    font-weight: normal;
+  }
+}
+
+.hljs-number {
+  color: $teal;
+}
+
+.hljs-request {
+  color: $mine-shaft;
+  font-weight: bold;
+}
+
+.hljs-subst {
+  color: $mine-shaft;
+  font-weight: bold;
+  font-weight: normal;
+}
+
+.hljs-status {
+  color: $mine-shaft;
+  font-weight: bold;
+}
+
+.hljs-string {
+  color: $crimson;
+}
+
+.hljs-winutils {
+  color: $mine-shaft;
+  font-weight: bold;
+}
+
+.hljs-tag {
+  color: $navy-blue;
+
+  font-weight: normal;
+
+  .hljs-value {
+    color: $crimson;
+  }
+
+  .hljs-title {
+    color: $royal-blue;
+    font-weight: normal;
+  }
+}
+
+.hljs-title {
+  color: $royal-blue;
+  font-weight: bold;
+
+  .hljs-class & {
+    font-weight: bold;
+  }
+}
+
+.hljs-type {
+  color: $east-bay;
+  font-weight: bold;
+}
+
+.hljs-variable {
+  color: $teal;
+}
+
+.hljs-name {
+  color: $teal;
+}
+
+.hljs-regexp {
+  color: $forest-green;
+}
+
+.hljs-symbol {
+  color: $navy-blue;
+}
+
+.hljs-prompt {
+  color: $flirt;
+}
+
+.hljs-built-in {
+  color: $bondi-blue;
+}
+
+.hljs-preprocessor {
+  color: $mountain-mist;
+  font-weight: bold;
+}
+
+.hljs-pragma {
+  color: $mountain-mist;
+  font-weight: bold;
+}
+
+.hljs-pi {
+  color: $mountain-mist;
+  font-weight: bold;
+}
+
+.hljs-cdata {
+  color: $mountain-mist;
+  font-weight: bold;
+}
+
+.hljs-deletion {
+  background: $pippin;
+}
+
+.hljs-rule {
+  .hljs-property {
+    color: $navy-blue;
+    font-weight: normal;
+  }
+}
+
+.hljs-shebang {
+  color: $mountain-mist;
+  font-weight: bold;
+}
+
+.tex {
+  .hljs-formula {
+    color: $crimson;
+  }
+
+  .hljs-command {
+    color: $east-bay;
+    font-weight: bold;
+  }
+
+  .hljs-special {
+    color: $flirt;
+  }
+}
+
+.lisp {
+  .hljs-body {
+    color: $teal;
+  }
+
+  .hljs-keyword {
+    color: $flirt;
+  }
+}
+
+.clojure {
+  .hljs-keyword {
+    color: $flirt;
+  }
+}
+
+.css {
+  .rule {
+    .hljs-keyword {
+      color: $mine-shaft;
+      font-weight: bold;
+    }
+  }
+}
+
+.diff {
+  .hljs-header {
+    color: $lemon-grass;
+    font-style: italic;
+  }
+
+  .hljs-change {
+    background: $bondi-blue;
+  }
+}
+
+.django {
+  .hljs-tag {
+    .hljs-keyword {
+      color: $navy-blue;
+      font-weight: normal;
+    }
+  }
+}
+
+.nginx {
+  .hljs-title {
+    color: $mine-shaft;
+    font-weight: bold;
+  }
+}
+
+.ruby {
+  .tag {
+    color: $ember-orange;
+  }
+
+  .hljs-constant {
+    color: $teal;
+  }
+
+  .hljs-symbol {
+    .hljs-string {
+      color: $flirt;
+    }
+  }
+}
+
+.ERB {
+  .hljs-keyword {
+    color: $gold;
+  }
+}
+
+
+.scss {
+  .hljs-preprocessor {
+    color: $red-berry;
+    font-weight: bold;
+  }
+}
+
+.scheme {
+  .hljs-keyword {
+    color: $flirt;
+  }
+}
+
+.vhdl {
+  .hljs-literal {
+    color: $east-bay;
+    font-weight: bold;
+  }
+}

_sass/_hero.scss

@@ -1,11 +1,12 @@
 .hero {
-  @include size(100vw 100vh);
+  @include size(100vw 50vh);
   align-items: center;
   background-position: center center;
   background-size: cover;
   display: flex;
   flex-direction: column;
   justify-content: center;
+  min-height: 320px;
   position: relative;
 
   &::after {