More updates to the docs

Author: Swastik

tests/dummy/app/styles/app.css

@@ -13,47 +13,86 @@ pre {
   float: left;
   width: 100%;
   background-color: white;
-  border: 1px solid #eee;
   border-radius: 5px;
   margin-bottom: 10px;
+  border: 1px solid #f1efef;
+  box-shadow: 0 0 15px 2px #f9f6f6;
 }
 
 .code-card-header,
 .example-card-header {
   float: left;
   width: 100%;
   padding: 3px 10px;
-  border-bottom: 1px solid #eee;
-  background-color: #f8f8f8;
+  border-bottom: 1px solid #f1efef;
+}
+
+.code-card-header > h6,
+.example-card-header > h6 {
+  color: black;
 }
 
 .code-card-body {
   float: left;
   width: 100%;
   padding: 10px;
+  background: #fffdfd;
 }
 
 .hljs {
-  background: white;
+  background: #fffdfd;
   padding: 0;
 }
 
-.nav-links {
-  padding: 2rem;
-  text-align: right
+.container {
+  display: flex;
+  height: 100vh;
+  letter-spacing: -.15px;
+  -webkit-font-smoothing: antialiased;
+}
+
+aside {
+  flex: 1;
+  height: 100%;
+  background-color: #e1563f;
+  border-right: thin solid #e1563f;
+}
+
+nav {
+  text-align: right;
 }
 
-.nav-links a {
+nav a {
+  position: relative;
   display: block;
   padding: 1em;
-  color: #777;
+  color: #fbd0c9;
   text-decoration: none;
   text-decoration-skip: ink
 }
 
-.nav-links a.active,
-.nav-links a:hover {
-  font-weight: 500;
-  color: navy;
+nav a.active,
+nav a:hover {
+  font-weight: 600;
+  color: white;
   text-decoration: underline
 }
+
+nav a.active:after {
+  position: absolute;
+  content: '';
+  right: -10px;
+  top: 17.5px;
+  width: 0;
+  height: 0;
+  border-top: 10px solid transparent;
+  border-bottom: 10px solid transparent;
+  border-right: 10px solid white;
+}
+
+.content {
+  flex: 3;
+  height: 100%;
+  overflow: scroll;
+  padding-left: 2em
+}

tests/dummy/app/templates/application.hbs

@@ -1,6 +1,6 @@
-<div class="fl w-100 sans-serif">
-  <div class="fl w-30 pa-2">
-    <div class="fl w-100 mt6 nav-links">
+<div class="fl w-100 sans-serif container">
+  <aside class="fl w-20 pa2">
+    <nav class="fl w-100 mt6">
       {{#link-to "index"}}
         Basic Usage
       {{/link-to}}
@@ -20,18 +20,18 @@
       {{#link-to "appearance"}}
         Customization
       {{/link-to}}
-    </div>
-  </div>
+    </nav>
+  </aside>
 
-  <div class="fl w-50 pa-2">
-    <div class="lh-copy">
-      <h1>ember-inline-edit</h1>
+  <div class="fl w-50 pa2 content">
+    <h1 class="mt4 ma0 fw9">ember-inline-edit</h1>
 
-      <div class="p gray f4">
-        ember-inline-edit is a simple component that provides inline editing for your ember.js
-        apps. It also has basic keyboard support.
-      </div>
+    <div class="p gray f4 fw5 mt3 measure lh-copy explanation">
+      ember-inline-edit is a simple component that provides inline editing for your ember.js
+      apps. It also has basic keyboard support.
+    </div>
 
+    <div class="lh-copy">
       {{outlet}}
     </div>
   </div>