Update templates and css.

Author: orderedlist

_config.yml

@@ -10,6 +10,8 @@ other_nodegit_versions:
 
 # Build settings
 markdown: redcarpet
+redcarpet:
+  extensions: [tables, no_intra_emphasis, autolink]
 highlighter: pygments
 permalink: pretty
 exclude: ["node_modules","generate","package.json","README.md"]

_includes/header.html

@@ -23,10 +23,10 @@ <h1><a class="site-title" href="{{ site.baseurl }}/"><img src="/img/nodegit.svg"
     <nav>
       <ul>
         <li{% if page.menu_item == 'getting_started' %} class="active"{% endif %}><a href="{{ site.baseurl }}/{% if page.nodegit_version %}{{ page.nodegit_version }}/{% endif %}">Getting Started</a></li>
-        <li><a href="{{ site.baseurl }}/{% if page.nodegit_version %}{{ page.nodegit_version }}/{% endif %}guides/">Guides</a></li>
-        <li><a href="{{ site.baseurl }}/{% if page.nodegit_version %}{{ page.nodegit_version }}/{% endif %}api/">API Documentation</a></li>
+        <li{% if page.menu_item == 'guides' %} class="active"{% endif %}><a href="{{ site.baseurl }}/{% if page.nodegit_version %}{{ page.nodegit_version }}/{% endif %}guides/">Guides</a></li>
+        <li{% if page.menu_item == 'api' %} class="active"{% endif %}><a href="{{ site.baseurl }}/{% if page.nodegit_version %}{{ page.nodegit_version }}/{% endif %}api/">API Documentation</a></li>
         <li><a href="https://github.com/nodegit/nodegit/{% if page.nodegit_version %}tree/{{ page.nodegit_version }}/{% endif %}">Source</a></li>
-        <li><a href="{{ site.baseurl }}/blog/">Blog</a></li>
+        <li{% if page.menu_item == 'blog' %} class="active"{% endif %}><a href="{{ site.baseurl }}/blog/">Blog</a></li>
       </ul>
     </nav>
 

_layouts/default.html

@@ -10,6 +10,11 @@
     <div class="page-content">
       <div class="wrapper">
         <div class="outline">
+          {% if page.return_to %}
+          {% for section_hash in page.return_to %}
+          <h5><a href="{{section_hash[1]}}">{{section_hash[0]}}</a></h5>
+          {% endfor %}
+          {% endif %}
           <ul>
             {% for section_hash in page.sections %}
             <li><a href="{{section_hash[1]}}">{{section_hash[0]}}</a></li>

_sass/_layout.scss

@@ -3,13 +3,17 @@
 /**
  * Set `margin-bottom` to maintain vertical rhythm
  */
-h1, h2, h3, h4, h5, h6,
+h1, h2, h3,
 p, blockquote, pre,
 ul, ol, dl, figure, .highlight
 %vertical-rhythm {
     margin-bottom: $spacing-unit / 2;
 }
 
+html, body {
+  background:#fff;
+}
+
 body {
   padding:0 $spacing-unit $spacing-unit;
 }
@@ -25,6 +29,7 @@ body {
 
 header {
   display:block;
+  background:#fff;
   overflow:hidden;
 
   .site-info {
@@ -212,15 +217,103 @@ header {
 
   .outline {
     float:right;
-    width:180px;
+    width:220px;
     padding:0 0 0 $spacing-unit;
     font-size:$font-size * 0.9;
     display:block;
+
+    ul {
+      border:none;
+    }
   }
 
   .main {
     overflow:hidden;
     width:auto;
+
+    table {
+      a {
+        color:$text-color;
+        font-weight:500;
+
+        span {
+          font-weight:normal;
+        }
+
+        &:hover {
+          color:$headline-color;
+        }
+      }
+
+      .tags {
+        position:relative;
+        top:-2px;
+        right:-12px;
+
+        span {
+          padding-top:2px;
+          padding-bottom:2px;
+        }
+      }
+    }
+  }
+}
+
+span.tags {
+  margin:0 0 0 6px;
+  position:relative;
+  top:-0.23em;
+
+  span {
+    font-size:12px;
+    display:inline-block;
+    padding:6px 8px;
+    border-radius:3px;
+    text-transform:uppercase;
+    color:#fff;
+    margin:0 8px 0 0;
+    font-family:$font-family;
+    font-weight:500;
+
+    &.enum {
+      background:#92D4D3;
+    }
+
+    &.sync {
+      background:#FD8487;
+    }
+
+    &.async {
+      background:#77D971;
+    }
+
+    &.experimental {
+      background:#FFBB85;
+    }
+  }
+}
+
+table {
+  border-collapse:collapse;
+  width:100%;
+  margin:0 0 $spacing-unit/2;
+
+  th {
+    font-weight:500;
+    color:#aaa;
+  }
+
+  td {
+    border-top:1px solid #ededed;
+  }
+
+  th, td {
+    padding:8px $spacing-unit/2;
+    text-align:left;
+
+    span {
+      color:#aaa;
+    }
   }
 }
 

_sass/_type.scss

@@ -7,7 +7,7 @@ body {
   color:$text-color;
 }
 
-h1, h2, h3, h4, h5, nav, .version, .version-menu, .buttons {
+h1, h2, h3, nav, .version, .version-menu, .buttons {
   font-family: Bitter, $font-family;
   line-height:1;
 }
@@ -20,6 +20,10 @@ h2 {
   font-size:$font-size * 2;
   margin-top:$spacing-unit;
 
+  span {
+    color:#aaa;
+  }
+
   &:first-child {
     margin-top:0;
   }
@@ -29,16 +33,40 @@ h3 {
   font-size:$font-size * 1.2;
 }
 
+h4 {
+  font-weight:500;
+  color:#999;
+}
+
+h5 {
+  border-bottom:1px solid #ededed;
+  padding:0 0 $spacing-unit/4;
+  margin:0 0 $spacing-unit/3;
+}
+
 .version, .version-menu {
   font-size:$font-size*0.8;
 }
 
+strong {
+  font-weight:bold;
+  color:#222;
+}
+
 a {
   text-decoration:none;
   color:$key-color;
 
+  span {
+    color:#aaa;
+  }
+
   &:hover {
     color:darken($key-color, 20%);
+
+    span {
+      color:#727272;
+    }
   }
 }
 

css/main.scss

@@ -7,8 +7,8 @@ $font-family: "Helvetica Neue", "Segoe UI", Helvetica, Arial, sans-serif;
 $font-size: 16px;
 $line-height: 1.5;
 $spacing-unit: 30px;
-$headline-color: #444;
-$text-color: #727272;
+$headline-color: #222;
+$text-color: #555;
 $key-color: #F1595F;
 
 // Import partials from `sass_dir` (defaults to `_sass`)