refinements

Author: leebyron

site/_core/CodeLayout.js

@@ -16,7 +16,7 @@ var CodeLayout = React.createClass({
   render: function() {
     var page = this.props.page;
     var site = this.props.site;
-    var firstURL = '/graphql-js/getting-started/';
+    var firstURL = '/graphql-js/';
     var category = page.category;
     if (!category.match(/GraphQL/)) {
       category = 'GraphQL.js ' + category;

site/_core/DocsLayout.js

@@ -20,7 +20,6 @@ var DocsLayout = React.createClass({
     return (
       <Site section="docs" title={page.title}>
         <section className="content documentationContent">
-          <DocsSidebar site={site} page={page} />
           <div className="inner-content">
             <h1>{page.title}</h1>
             <Marked>{page.content}</Marked>
@@ -29,6 +28,7 @@ var DocsLayout = React.createClass({
               {page.next && <a className="docs-next" href={path.resolve(page.url, page.next)}>Next &rarr;</a>}
             </div>
           </div>
+          <DocsSidebar site={site} page={page} />
         </section>
       </Site>
     );

site/_core/DocsSidebar.js

@@ -16,6 +16,16 @@ function sidebarForCategory(thisPageID, category) {
     var target = page.url.match(/^https?:/) && '_blank';
     var marginLeft = page.indent ? 20 : 0;
 
+    // Sublinks to any page sub-parts
+    var sublinkUL = page.sublinks &&
+      <ul>{page.sublinks.split(',').map(sublink =>
+        <li key={sublink}>
+          <a target={target} href={page.url + '#' + sublink.toLowerCase()}>
+            {sublink}
+          </a>
+        </li>
+      )}</ul>;
+
     // Link for the main page overall
     listItems.push(
       <li key={page.permalink}>
@@ -26,29 +36,13 @@ function sidebarForCategory(thisPageID, category) {
           href={page.url}>
           {page.sidebarTitle || page.title}
         </a>
+        {sublinkUL}
       </li>
     );
-
-    // Sublinks to any page sub-parts
-    if (page.sublinks) {
-      var sublinks = page.sublinks.split(',').sort();
-      for (var sublink of sublinks) {
-        listItems.push(
-          <li key={page.permalink + '-' + sublink}>
-            <a
-              target={target}
-              style={{marginLeft: marginLeft + 20}}
-              href={page.url + '#' + sublink.toLowerCase()}>
-              {sublink}
-            </a>
-          </li>
-        );
-      }
-    }
   }
 
   return (
-    <div className="nav-docs-section" key={category.name}>
+    <div key={category.name}>
       <h3>{category.name}</h3>
       <ul>{listItems}</ul>
     </div>

site/_css/docs.less

@@ -0,0 +1,111 @@
+@import "variables.less";
+
+.documentationContent {
+  margin-bottom: 8em;
+  @media screen and (max-width: 1019px) {
+    margin-bottom: 4em;
+  }
+
+  &:after {
+    clear: both;
+    content: " ";
+    display: table;
+  }
+}
+
+.inner-content {
+  float: left;
+  max-width: 760px;
+  margin-right: 210px;
+  @media screen and (max-width: 740px) {
+    margin-right: 0;
+  }
+
+  & > h1:first-child {
+    margin-top: 1em;
+  }
+
+  blockquote {
+    padding: 0.5em 1em 0.5em 0.5em;
+    margin: 1em 0;
+    background-color: rgba(204, 122, 111, 0.05);
+    border-left: 5px solid rgba(191, 87, 73, 0.1);
+
+    h4 {
+      margin-top: 0;
+    }
+
+    p {
+      margin-bottom: 0;
+
+      &:first-child {
+        margin-top: 0;
+      }
+    }
+  }
+
+  img {
+    max-width: 100%;
+  }
+}
+
+.docs-prevnext {
+  padding-top: 40px;
+  padding-bottom: 40px;
+
+  .docs-prev {
+    float: left;
+  }
+
+  .docs-next {
+    float: right;
+  }
+}
+
+.nav-docs {
+  color: @text-color;
+  float: right;
+  font-size: 13px;
+  margin: 1em 0 4em;
+  width: 175px;
+  margin-left: -210px;
+
+  @media screen and (max-width: 740px) {
+    float: none;
+    width: auto;
+    margin-left: 0;
+  }
+
+  h3 {
+    .body-font(@size: 13px);
+    text-transform: uppercase;
+    margin: 3em 0 1.5em;
+  }
+
+  ul {
+    list-style: none;
+    margin: 0;
+
+    li {
+      margin: 0;
+
+      ul {
+        margin-bottom: 10px;
+
+        li {
+          line-height: 24px;
+        }
+      }
+    }
+  }
+
+  a {
+    color: #666;
+    display: block;
+
+    &:hover, &:focus, &.active {
+      text-decoration: none;
+      color: @rhodamine-color;
+    }
+  }
+}