test update

flatdoc/theme-dark/script.js

@@ -0,0 +1,264 @@
+(function($) {
+  var $window = $(window);
+  var $document = $(document);
+
+ /*
+  * Scrollspy.
+  */
+
+ $document.on('flatdoc:ready', function() {
+    $("h2, h3").scrollagent(function(cid, pid, currentElement, previousElement) {
+      if (pid) {
+       $("[href='#"+pid+"']").removeClass('active');
+      }
+      if (cid) {
+       $("[href='#"+cid+"']").addClass('active');
+      }
+    });
+  });
+
+ /*
+  * Anchor jump links.
+  */
+
+ $document.on('flatdoc:ready', function() {
+   $('.menu a').anchorjump();
+ });
+
+
+ /*
+  * Sintax highlight the codes.
+  */
+ $document.on('flatdoc:ready', function() {
+      $('pre code').each(function(i, block) {
+        hljs.highlightBlock(block);
+      });
+ });
+
+
+$(window).on('hashchange', function() {
+    var file  = window.location.hash.replace('#', "");    
+    // file   = file.match(/[a-zA-Z0-9]*\.md$/g);
+    if (file == null || file.length < 1) file = '../Readme.md'; else file = file;
+      
+    Flatdoc.run({
+      fetcher: Flatdoc.file(file)
+    });
+});
+
+ /*
+  * Title card.
+  */
+
+  $(function() {
+    var $card = $('.title-card');
+    if (!$card.length) return;
+
+    var $header = $('.header');
+    var headerHeight = $header.length ? $header.outerHeight() : 0;
+
+    $window
+      .on('resize.title-card', function() {
+        var windowWidth = $window.width();
+
+        if (windowWidth < 480) {
+          $card.css('height', '');
+        } else {
+          var height = $window.height();
+          $card.css('height', height - headerHeight);
+        }
+      })
+      .trigger('resize.title-card');
+  });
+
+  /*
+   * Sidebar stick.
+   */
+
+  $(function() {
+    var $sidebar = $('.menubar');
+    var elTop;
+
+    $window
+      .on('resize.sidestick', function() {
+        $sidebar.removeClass('fixed');
+        elTop = $sidebar.offset().top;
+        $window.trigger('scroll.sidestick');
+      })
+      .on('scroll.sidestick', function() {
+        var scrollY = $window.scrollTop();
+        $sidebar.toggleClass('fixed', (scrollY >= elTop));
+      })
+      .trigger('resize.sidestick');
+  });
+
+})(jQuery);
+/*! jQuery.scrollagent (c) 2012, Rico Sta. Cruz. MIT License.
+ *  https://github.com/rstacruz/jquery-stuff/tree/master/scrollagent */
+
+// Call $(...).scrollagent() with a callback function.
+//
+// The callback will be called everytime the focus changes.
+//
+// Example:
+//
+//      $("h2").scrollagent(function(cid, pid, currentElement, previousElement) {
+//        if (pid) {
+//          $("[href='#"+pid+"']").removeClass('active');
+//        }
+//        if (cid) {
+//          $("[href='#"+cid+"']").addClass('active');
+//        }
+//      });
+
+(function($) {
+
+  $.fn.scrollagent = function(options, callback) {
+    // Account for $.scrollspy(function)
+    if (typeof callback === 'undefined') {
+      callback = options;
+      options = {};
+    }
+
+    var $sections = $(this);
+    var $parent = options.parent || $(window);
+
+    // Find the top offsets of each section
+    var offsets = [];
+    $sections.each(function(i) {
+      var offset = $(this).attr('data-anchor-offset') ?
+        parseInt($(this).attr('data-anchor-offset'), 10) :
+        (options.offset || 0);
+
+      offsets.push({
+        id: $(this).attr('id'),
+        index: i,
+        el: this,
+        offset: offset
+      });
+    });
+
+    // State
+    var current = null;
+    var height = null;
+    var range = null;
+
+    // Save the height. Do this only whenever the window is resized so we don't
+    // recalculate often.
+    $(window).on('resize', function() {
+      height = $parent.height();
+      range = $(document).height();
+    });
+
+    // Find the current active section every scroll tick.
+    $parent.on('scroll', function() {
+      var y = $parent.scrollTop();
+      y += height * (0.3 + 0.7 * Math.pow(y/range, 2));
+
+      var latest = null;
+
+      for (var i in offsets) {
+        if (offsets.hasOwnProperty(i)) {
+          var offset = offsets[i];
+          if ($(offset.el).offset().top + offset.offset < y) latest = offset;
+        }
+      }
+
+      if (latest && (!current || (latest.index !== current.index))) {
+        callback.call($sections,
+          latest ? latest.id : null,
+          current ? current.id : null,
+          latest ? latest.el : null,
+          current ? current.el : null);
+        current = latest;
+      }
+    });
+
+    $(window).trigger('resize');
+    $parent.trigger('scroll');
+
+    return this;
+  };
+
+})(jQuery);
+/*! Anchorjump (c) 2012, Rico Sta. Cruz. MIT License.
+ *   http://github.com/rstacruz/jquery-stuff/tree/master/anchorjump */
+
+// Makes anchor jumps happen with smooth scrolling.
+//
+//    $("#menu a").anchorjump();
+//    $("#menu a").anchorjump({ offset: -30 });
+//
+//    // Via delegate:
+//    $("#menu").anchorjump({ for: 'a', offset: -30 });
+//
+// You may specify a parent. This makes it scroll down to the parent.
+// Great for tabbed views.
+//
+//     $('#menu a').anchorjump({ parent: '.anchor' });
+//
+// You can jump to a given area.
+//
+//     $.anchorjump('#bank-deposit', options);
+
+(function($) {
+  var defaults = {
+    'speed': 500,
+    'offset': 0,
+    'for': null,
+    'parent': null
+  };
+
+  $.fn.anchorjump = function(options) {
+    options = $.extend({}, defaults, options);
+
+    if (options['for']) {
+      this.on('click', options['for'], onClick);
+    } else {
+      this.on('click', onClick);
+    }
+
+    function onClick(e) {
+      var $a = $(e.target).closest('a');
+      if (e.ctrlKey || e.metaKey || e.altKey || $a.attr('target')) return;
+
+      e.preventDefault();
+      var href = $a.attr('href');
+
+      $.anchorjump(href, options);
+    }
+  };
+
+  // Jump to a given area.
+  $.anchorjump = function(href, options) {
+    options = $.extend({}, defaults, options);
+
+    var top = 0;
+
+    if (href != '#') {
+      var $area = $(href);
+      // Find the parent
+      if (options.parent) {
+        var $parent = $area.closest(options.parent);
+        if ($parent.length) { $area = $parent; }
+      }
+      if (!$area.length) { return; }
+
+      // Determine the pixel offset; use the default if not available
+      var offset =
+        $area.attr('data-anchor-offset') ?
+        parseInt($area.attr('data-anchor-offset'), 10) :
+        options.offset;
+
+      top = Math.max(0, $area.offset().top + offset);
+    }
+
+    $('html, body').animate({ scrollTop: top }, options.speed);
+    $('body').trigger('anchor', href);
+
+    // Add the location hash via pushState.
+    if (window.history.pushState) {
+      window.history.pushState({ href: href }, "", href);
+    }
+  };
+})(jQuery);

flatdoc/theme-dark/style.css

@@ -0,0 +1,926 @@
+/*
+
+Please don't edit this file directly.
+Instead, edit the stylus (.styl) files and compile it to CSS on your machine.
+
+*/
+/* ----------------------------------------------------------------------------
+ * Fonts
+ */
+@import url("//fonts.googleapis.com/css?family=Montserrat:700|Open+Sans:300");
+/* ----------------------------------------------------------------------------
+ * Base
+ */
+html,
+body,
+div,
+span,
+applet,
+object,
+iframe,
+h1,
+h2,
+h3,
+h4,
+h5,
+h6,
+p,
+blockquote,
+pre,
+a,
+abbr,
+acronym,
+address,
+big,
+cite,
+code,
+del,
+dfn,
+em,
+img,
+ins,
+kbd,
+q,
+s,
+samp,
+small,
+strike,
+strong,
+sub,
+sup,
+tt,
+var,
+dl,
+dt,
+dd,
+ol,
+ul,
+li,
+fieldset,
+form,
+label,
+legend,
+table,
+caption,
+tbody,
+tfoot,
+thead,
+tr,
+th,
+td {
+  margin: 0;
+  padding: 0;
+  border: 0;
+  outline: 0;
+  font-weight: inherit;
+  font-style: inherit;
+  font-family: inherit;
+  font-size: 100%;
+  vertical-align: baseline;
+}
+body {
+  line-height: 1;
+  color: #000;
+  background: #fff;
+}
+ol,
+ul {
+  list-style: none;
+}
+table {
+  border-collapse: separate;
+  border-spacing: 0;
+  vertical-align: middle;
+}
+caption,
+th,
+td {
+  text-align: left;
+  font-weight: normal;
+  vertical-align: middle;
+}
+a img {
+  border: none;
+}
+html,
+body {
+  height: 100%;
+}
+html {
+  overflow-x: hidden;
+}
+body,
+td,
+textarea,
+input {
+  font-family: Helvetica Neue, Open Sans, sans-serif;
+  line-height: 1.6;
+  font-size: 15px;
+  color: #272724;
+  background: #272724;
+}
+@media (max-width: 480px) {
+  body,
+  td,
+  textarea,
+  input {
+    font-size: 12px;
+  }
+}
+a {
+  color: #2badad;
+  text-decoration: none;
+}
+a:hover {
+  color: #228a8a;
+}
+/* ----------------------------------------------------------------------------
+ * Content styling
+ */
+.content p,
+.content ul,
+.content ol,
+.content h1,
+.content h2,
+.content h3,
+.content h4,
+.content h5,
+.content h6,
+.content pre,
+.content blockquote {
+  padding: 15px;
+  -webkit-box-sizing: border-box;
+  -moz-box-sizing: border-box;
+  box-sizing: border-box;
+}
+.content h1,
+.content h2,
+.content h3,
+.content h4,
+.content h5,
+.content h6 {
+  font-weight: bold;
+  -webkit-font-smoothing: antialiased;
+  text-rendering: optimizeLegibility;
+}
+.content pre {
+  font-family: Menlo, monospace;
+}
+.content ul > li {
+  list-style-type: disc;
+}
+.content ol > li {
+  list-style-type: decimal;
+}
+.content ul,
+.content ol {
+  margin-left: 20px;
+}
+.content ul > li {
+  list-style-type: none;
+  position: relative;
+}
+.content ul > li:before {
+  content: '';
+  display: block;
+  position: absolute;
+  left: -17px;
+  top: 7px;
+  width: 5px;
+  height: 5px;
+  -webkit-border-radius: 4px;
+  border-radius: 4px;
+  -webkit-box-sizing: border-box;
+  -moz-box-sizing: border-box;
+  box-sizing: border-box;
+  background: #fff;
+  border: solid 1px #9090aa;
+}
+.content li > :first-child {
+  padding-top: 0;
+}
+.content strong,
+.content b {
+  font-weight: bold;
+}
+.content i,
+.content em {
+  font-style: italic;
+  color: #9090aa;
+}
+.content code {
+  font-family: Menlo, monospace;
+  background: #2e2e2e;
+  color: #fff;
+  padding: 1px 3px;
+  font-size: 0.95em;
+}
+.content pre > code {
+  display: block;
+  /* background: transparent; */
+  font-size: 0.85em;
+  letter-spacing: 0px;
+  background: #2e2e2e;
+  /* border: solid 1px #dfe2e7; */
+  /* border-top: solid 1px #dbdde2; */
+  /* border-left: solid 1px #e2e5e9; */
+  display: block;
+  padding: 15px;
+  -webkit-border-radius: 2px;
+  border-radius: 2px;
+  overflow: auto;
+  line-height: 1.44;
+}
+.content blockquote :first-child {
+  padding-top: 0;
+}
+.content blockquote :last-child {
+  padding-bottom: 0;
+  /* padding-left: 40px; */
+  /* padding-right: 40px; */
+}
+.content table {
+  margin-top: 10px;
+  margin-bottom: 10px;
+  padding: 0;
+  border-collapse: collapse;
+  clear: both;
+  float: left;
+}
+.content table tr {
+  border-top: 1px solid #ccc;
+  background-color: #fff;
+  margin: 0;
+  padding: 0;
+}
+.content table tr :nth-child(2n) {
+  background-color: #f8f8f8;
+}
+.content table tr th {
+  text-align: auto;
+  font-weight: bold;
+  border: 1px solid #ccc;
+  margin: 0;
+  padding: 6px 13px;
+}
+.content table tr td {
+  text-align: auto;
+  border: 1px solid #ccc;
+  margin: 0;
+  padding: 6px 13px;
+}
+.content table tr th :first-child,
+.content table tr td :first-child {
+  margin-top: 0;
+}
+.content table tr th :last-child,
+.content table tr td :last-child {
+  margin-bottom: 0;
+}
+/* ----------------------------------------------------------------------------
+ * Content
+ */
+.content-root {
+  min-height: calc( 100% + 70px );
+  position: relative;
+}
+.content {
+  padding-top: 30px;
+  padding-bottom: 40px;
+  padding-left: 40px;
+  padding-right: 40px;
+  zoom: 1;
+  max-width: 66%;
+  background: #fff;
+}
+.content:before,
+.content:after {
+  content: "";
+  display: table;
+}
+.content:after {
+    content: "";
+    display: block;
+    position: absolute;
+    margin-left: 230px;
+    top: 0;
+    left: 0;
+    bottom: 0;
+    width: calc( 60% - 138px );
+    height: calc( 100% + 160px );
+    background-color: white;
+    z-index: -1;
+}
+.content:after {
+  clear: both;
+}
+.content blockquote {
+  color: #9090aa;
+  /* text-shadow: 0 1px 0 rgba(255,255,255,0.5); */
+}
+.content h1,
+.content h2,
+.content h3 {
+  -webkit-font-smoothing: antialiased;
+  text-rendering: optimizeLegibility;
+  font-family: montserrat;
+  padding-bottom: 0;
+}
+.content h1 + p,
+.content h2 + p,
+.content h3 + p,
+.content h1 ul,
+.content h2 ul,
+.content h3 ul,
+.content h1 ol,
+.content h2 ol,
+.content h3 ol {
+  padding-top: 10px;
+}
+.content h1,
+.content h2 {
+  text-transform: uppercase;
+  letter-spacing: 1px;
+  font-size: 1.7em;
+}
+.content h3 {
+  font-size: 1.2em;
+}
+.content h1,
+.content h2,
+.content .big-heading,
+body.big-h3 .content h3 {
+  padding-top: 80px;
+}
+.content h1:before,
+.content h2:before,
+.content .big-heading:before,
+body.big-h3 .content h3:before {
+  display: block;
+  content: '';
+  /* background: -webkit-linear-gradient(left, #dfe2e7 80%, rgba(223,226,231,0)); */
+  background: -moz-linear-gradient(left, #dfe2e7 80%, rgba(223,226,231,0));
+  background: -o-linear-gradient(left, #dfe2e7 80%, rgba(223,226,231,0));
+  background: -ms-linear-gradient(left, #dfe2e7 80%, rgba(223,226,231,0));
+  /* background: linear-gradient(to right, #dfe2e7 80%, rgba(223,226,231,0)); */
+  /* -webkit-box-shadow: 0 1px 0  #dfe2e7; */
+  border-bottom: 1px solid #dfe2e7;
+  /* box-shadow: 0 1px 0 rgba(255,255,255,0.4); */
+  height: 1px;
+  position: relative;
+  top: -40px;
+  left: -40px;
+  width: calc( 60% + 48px );
+}
+@media (max-width: 768px) {
+  .content h1,
+  .content h2,
+  .content .big-heading,
+body.big-h3 .content h3 {
+    padding-top: 40px;
+  }
+  .content h1:before,
+  .content h2:before,
+  .content .big-heading:before,
+body.big-h3 .content h3:before {
+    background: #dfe2e7;
+    left: -40px;
+    top: -20px;
+    width: 120%;
+  }
+}
+.content h4,
+.content h5,
+.content .small-heading,
+body:not(.big-h3) .content h3 {
+  border-bottom: solid 1px #dfe2e7;
+  color: #2e2e2e;
+  padding-top: 40px;
+  padding-bottom: 10px;
+}
+body:not(.big-h3) .content h3 {
+  font-size: 0.9em;
+}
+.content h1:first-child {
+  padding-top: 0;
+}
+.content h1:first-child,
+.content h1:first-child a,
+.content h1:first-child a:visited {
+  color: #505050;
+}
+.content h1:first-child:before {
+  display: none;
+}
+@media (max-width: 768px) {
+  .content h4,
+  .content h5,
+  .content .small-heading,
+  body:not(.big-h3) .content h3 {
+    padding-top: 20px;
+  }
+}
+@media (max-width: 480px) {
+  .content {
+    padding: 20px;
+    padding-top: 40px;
+  }
+  .content h4,
+  .content h5,
+  .content .small-heading,
+  body:not(.big-h3) .content h3 {
+    padding-top: 10px;
+  }
+}
+body.no-literate .content pre > code {
+  background: #2e2e2e;
+  border: solid 1px #dfe2e7;
+  /* border-top: solid 1px #dbdde2; */
+  /* border-left: solid 1px #e2e5e9; */
+  display: block;
+  padding: 10px;
+  -webkit-border-radius: 2px;
+  border-radius: 2px;
+  overflow: auto;
+}
+body.no-literate .content pre > code {
+  -webkit-overflow-scrolling: touch;
+}
+body.no-literate .content pre > code::-webkit-scrollbar {
+  width: 15px;
+  height: 15px;
+}
+body.no-literate .content pre > code::-webkit-scrollbar-thumb {
+  background: #ddd;
+  -webkit-border-radius: 8px;
+  border-radius: 8px;
+  border: solid 4px #f3f6fb;
+}
+body.no-literate .content pre > code:hover::-webkit-scrollbar-thumb {
+  background: #999;
+  -webkit-box-shadow: inset 2px 2px 3px rgba(0,0,0,0.2);
+  box-shadow: inset 2px 2px 3px rgba(0,0,0,0.2);
+}
+@media (max-width: 1180px) {
+  .content pre > code {
+    background: #f3f6fb;
+    border: solid 1px #e7eaee;
+    border-top: solid 1px #dbdde2;
+    border-left: solid 1px #e2e5e9;
+    display: block;
+    padding: 10px;
+    -webkit-border-radius: 2px;
+    border-radius: 2px;
+    overflow: auto;
+  }
+  .content pre > code {
+    -webkit-overflow-scrolling: touch;
+  }
+  .content pre > code::-webkit-scrollbar {
+    width: 15px;
+    height: 15px;
+  }
+  .content pre > code::-webkit-scrollbar-thumb {
+    background: #ddd;
+    -webkit-border-radius: 8px;
+    border-radius: 8px;
+    border: solid 4px #f3f6fb;
+  }
+  .content pre > code:hover::-webkit-scrollbar-thumb {
+    background: #999;
+    -webkit-box-shadow: inset 2px 2px 3px rgba(0,0,0,0.2);
+    box-shadow: inset 2px 2px 3px rgba(0,0,0,0.2);
+  }
+}
+.button {
+  -webkit-font-smoothing: antialiased;
+  text-rendering: optimizeLegibility;
+  font-family: montserrat, sans-serif;
+  letter-spacing: -1px;
+  font-weight: bold;
+  display: inline-block;
+  padding: 3px 25px;
+  border: solid 2px #2badad;
+  -webkit-border-radius: 20px;
+  border-radius: 20px;
+  margin-right: 15px;
+}
+.button,
+.button:visited {
+  background: #2badad;
+  color: #fff;
+  text-shadow: none;
+}
+.button:hover {
+  border-color: #111;
+  background: #111;
+  color: #fff;
+}
+.button.light,
+.button.light:visited {
+  background: transparent;
+  color: #9090aa;
+  border-color: #9090aa;
+  text-shadow: none;
+}
+.button.light:hover {
+  border-color: #9090aa;
+  background: #9090aa;
+  color: #fff;
+}
+.content .button + em {
+  color: #9090aa;
+}
+@media (min-width: 1180px) {
+  body:not(.no-literate) .content-root {
+    /* background-color: #2e2e2e; */
+    -webkit-box-shadow: inset calc(66%) 0 #fff, inset calc(66%) 0 #dfe2e7, inset calc(66%) 0 5px -10px rgba(0,0,0,0.1);
+    /* box-shadow: inset 780px 0 #fff, inset 781px 0 #dfe2e7, inset 790px 0 5px -10px rgba(0,0,0,0.1); */
+  }
+}
+@media (min-width: 1180px) {
+  body:not(.no-literate) .content {
+    padding-left: 0;
+    padding-right: 0;
+    width: calc( 100% );
+    max-width: none;
+    z-index: 1;
+    background: transparent;
+  }
+  body:not(.no-literate) .content > p,
+  body:not(.no-literate) .content > ul,
+  body:not(.no-literate) .content > ol,
+  body:not(.no-literate) .content > h1,
+  body:not(.no-literate) .content > h2,
+  body:not(.no-literate) .content > h3,
+  body:not(.no-literate) .content > h4,
+  body:not(.no-literate) .content > h5,
+  body:not(.no-literate) .content > h6,
+  body:not(.no-literate) .content > pre,
+  body:not(.no-literate) .content > blockquote {
+    width: calc( 60% - 40px );
+    -webkit-box-sizing: border-box;
+    -moz-box-sizing: border-box;
+    box-sizing: border-box;
+    padding-right: 40px;
+    padding-left: 40px;
+  }
+  body:not(.no-literate) .content > h1,
+  body:not(.no-literate) .content > h2,
+  body:not(.no-literate) .content > h3 {
+    clear: both;
+    width: 100%;
+  }
+  body:not(.no-literate) .content > pre,
+  body:not(.no-literate) .content > blockquote {
+    width: 40%;
+    padding-left: 15px;
+    padding-right: 0px;
+    float: right;
+    clear: right;
+    background: #2e2e2e;
+    /* border-left: 1px solid #eeeeee; */
+  }
+  body:not(.no-literate) .content > pre + p,
+  body:not(.no-literate) .content > blockquote + p,
+  body:not(.no-literate) .content > pre + ul,
+  body:not(.no-literate) .content > blockquote + ul,
+  body:not(.no-literate) .content > pre + ol,
+  body:not(.no-literate) .content > blockquote + ol,
+  body:not(.no-literate) .content > pre + h4,
+  body:not(.no-literate) .content > blockquote + h4,
+  body:not(.no-literate) .content > pre + h5,
+  body:not(.no-literate) .content > blockquote + h5,
+  body:not(.no-literate) .content > pre + h6,
+  body:not(.no-literate) .content > blockquote + h6 {
+    clear: both;
+  }
+  body:not(.no-literate) .content > p,
+  body:not(.no-literate) .content > ul,
+  body:not(.no-literate) .content > ol,
+  body:not(.no-literate) .content > h4,
+  body:not(.no-literate) .content > h5,
+  body:not(.no-literate) .content > h6 {
+    float: left;
+    clear: left;
+  }
+  body:not(.no-literate) .content > h4,
+  body:not(.no-literate) .content > h5,
+  body:not(.no-literate) .content > .small-heading,
+  body:not(.big-h3) body:not(.no-literate) .content > h3 {
+    margin-left: 40px;
+    width: calc( 60% - 40px );
+    margin-bottom: 0px;
+    padding-left: 0px;
+    padding-right: 0;
+  }
+  body:not(.no-literate) .content > table {
+    margin-left: 40px;
+    margin-right: 40px;
+    max-width: 470px;
+  }
+  body:not(.no-literate):not(.big-h3) .content > h3 {
+    margin-left: 40px;
+    width: 470px;
+    margin-bottom: 3px;
+    padding-left: 0;
+    padding-right: 0;
+  }
+}
+.header {
+  background: #ffffff;
+  text-shadow: 0 1px 0 rgba(255,255,255,0.5);
+  border-bottom: solid 1px #dfe2e7;
+  padding: 15px 15px 15px 30px;
+  zoom: 1;
+  line-height: 20px;
+  position: relative;
+}
+.header:before,
+.header:after {
+  content: "";
+  display: table;
+}
+.header:after {
+  clear: both;
+}
+.header .left {
+  float: left;
+}
+.header .right {
+  text-align: right;
+  position: absolute;
+  right: 15px;
+  top: 15px;
+}
+.header .right iframe {
+  display: inline-block;
+  vertical-align: middle;
+}
+.header h1 {
+  -webkit-font-smoothing: antialiased;
+  text-rendering: optimizeLegibility;
+  font-weight: bold;
+  font-family: montserrat, sans-serif;
+  font-size: 13px;
+}
+.header h1,
+.header h1 a,
+.header h1 a:visited {
+  color: #272724;
+}
+.header h1 a:hover {
+  color: #505050;
+}
+.header li a {
+  font-size: 0.88em;
+  color: #272724;
+  display: block;
+}
+.header li a:hover {
+  color: #3a3a44;
+}
+@media (min-width: 480px) {
+  .header h1 {
+    float: left;
+  }
+  .header ul,
+  .header li {
+    display: block;
+    float: left;
+  }
+  .header ul {
+    margin-left: -15px;
+  }
+  .header h1 + ul {
+    border-left: solid 1px #dfe2e7;
+    margin-left: 15px;
+  }
+  .header li {
+    border-left: solid 1px rgba(255,255,255,0.5);
+    border-right: solid 1px #dfe2e7;
+  }
+  .header li:last-child {
+    border-right: 0;
+  }
+  .header li a {
+    padding: 0 15px;
+  }
+}
+@media (max-width: 480px) {
+  .right {
+    display: none;
+  }
+}
+.menubar {
+  -webkit-font-smoothing: antialiased;
+  text-rendering: optimizeLegibility;
+}
+.menubar .section {
+  padding: 30px 30px;
+  -webkit-box-sizing: border-box;
+  -moz-box-sizing: border-box;
+  box-sizing: border-box;
+}
+.menubar .section + .section {
+  border-top: solid 1px #2e2e2e;
+}
+.menubar .section.no-line {
+  border-top: 0;
+  padding-top: 0;
+}
+a.big.button {
+  display: block;
+  -webkit-box-sizing: border-box;
+  -moz-box-sizing: border-box;
+  box-sizing: border-box;
+  width: 100%;
+  padding: 10px 20px;
+  text-align: center;
+  font-weight: bold;
+  font-size: 1.1em;
+  background: transparent;
+  border: solid 3px #2badad;
+  -webkit-border-radius: 30px;
+  border-radius: 30px;
+  font-family: montserrat, sans-serif;
+}
+a.big.button,
+a.big.button:visited {
+  color: #2badad;
+  text-decoration: none;
+}
+a.big.button:hover {
+  background: #2badad;
+}
+a.big.button:hover,
+a.big.button:hover:visited {
+  color: #fff;
+}
+@media (max-width: 480px) {
+  .menubar {
+    padding: 20px;
+    border-bottom: solid 1px #dfe2e7;
+  }
+}
+@media (max-width: 768px) {
+  .menubar {
+    display: none;
+  }
+}
+@media (min-width: 768px) {
+  .content-root {
+    padding-left: 230px;
+  }
+  .menubar {
+    position: absolute;
+    left: 0;
+    top: 0;
+    bottom: 0;
+    width: 230px;
+    /* border-right: solid 1px #dfe2e7; */
+  }
+  .menubar.fixed {
+    position: fixed;
+    overflow-y: auto;
+  }
+  .menubar.fixed {
+    -webkit-overflow-scrolling: touch;
+  }
+  .menubar.fixed::-webkit-scrollbar {
+    width: 15px;
+    height: 15px;
+  }
+  .menubar.fixed::-webkit-scrollbar-thumb {
+    background: rgba(255,255,255,0.25);
+    -webkit-border-radius: 8px;
+    border-radius:8px;
+    border: solid 5px #272724;
+  }
+  .menubar.fixed:hover::-webkit-scrollbar-thumb {
+    background: #999;
+    -webkit-box-shadow: inset 2px 2px 3px rgba(0,0,0,0.2);
+    box-shadow: inset 2px 2px 3px rgba(0,0,0,0.2);
+  }
+}
+.menubar {
+  font-size: 0.9em;
+  background: #272724;
+}
+.menu ul.level-1 > li + li {
+  margin-top: 20px;
+}
+.menu a {
+  -webkit-box-sizing: border-box;
+  -moz-box-sizing: border-box;
+  box-sizing: border-box;
+  position: relative;
+  display: block;
+  padding-top: 1px;
+  padding-bottom: 1px;
+  margin-right: -30px;
+}
+.menu a,
+.menu a:visited {
+  color: #2badad;
+}
+.menu a:hover {
+  color: #228a8a;
+}
+.menu a.level-1 {
+  font-family: montserrat, sans-serif;
+  text-transform: uppercase;
+  font-size: 0.9em;
+  font-weight: bold;
+}
+.menu a.level-1,
+.menu a.level-1:visited {
+  color: #ffffff;
+}
+.menu a.level-1:hover {
+  color: #565666;
+}
+.menu a.level-2 {
+  font-weight: normal;
+}
+.menu a.level-3 {
+  font-weight: normal;
+  font-size: 1em;
+  padding-left: 10px;
+}
+.menu a.active {
+  /* font-weight: bold !important; */
+}
+.menu a.active,
+.menu a.active:visited,
+.menu a.active:hover {
+  color: #dfe2e7 !important;
+}
+.menu a.active:after {
+  content: '';
+  display: block;
+  -webkit-box-sizing: border-box;
+  -moz-box-sizing: border-box;
+  box-sizing: border-box;
+  position: absolute;
+  top: 10px;
+  right: 30px;
+  width: 9px;
+  height: 3px;
+  -webkit-border-radius: 2px;
+  border-radius: 2px;
+  background: #2badad;
+}
+code .string,
+code .number {
+  color: #3ac;
+}
+code .init {
+  color: #383;
+}
+code .keyword {
+  font-weight: bold;
+}
+code .comment {
+  color: #adadcc;
+}
+.large-brief .content > h1:first-child + p,
+.content > p.brief {
+  font-size: 1.3em;
+  font-family: Open Sans, sans-serif;
+  font-weight: 300;
+}
+.title-card:before {
+  content: "";
+  display: block;
+  height: 100%;
+  background: rgba(23, 56, 56, 0.85);
+  background-position: center center;
+  background-size: cover;
+  color: #ccc;
+  text-align: center;
+  position: absolute;
+  z-index: 1;
+  width: 100%;
+  display: table;
+}
+.title-area {
+  min-height: 100px;
+  -webkit-box-sizing: border-box;
+  -moz-box-sizing: border-box;
+  box-sizing: border-box;
+  -webkit-font-smoothing: antialiased;
+  text-rendering: optimizeLegibility;
+  text-align: center;
+  border-bottom: solid 1px #dfe2e7;
+  overflow: hidden;
+}
+.title-area > img.bg {
+  z-index: 0;
+  position: absolute;
+  left: -9999px;
+}
+.title-area > div {
+  position: relative;
+  z-index: 1;
+}

index.html

@@ -13,8 +13,12 @@
   <script src='/flatdoc/flatdoc.js'></script>
 
   <!-- Flatdoc theme -->
-  <link  href='/flatdoc/theme-white/style.css' rel='stylesheet'>
+  <link  href='/flatdoc/theme-dark/style.css' rel='stylesheet'>
-  <script src='/flatdoc/theme-white/script.js'></script>
+  <script src='/flatdoc/theme-dark/script.js'></script>
+
+  <!-- Highlight.js --> 
+  <link rel="stylesheet" href="//cdnjs.cloudflare.com/ajax/libs/highlight.js/9.4.0/styles/monokai-sublime.min.css">
+  <script src="//cdnjs.cloudflare.com/ajax/libs/highlight.js/9.4.0/highlight.min.js"></script>
 
   <!-- Meta -->
   <meta content="Dark Water" property="og:title">
@@ -27,7 +31,17 @@
     });
   </script>
 </head>
-<body role='flatdoc'>
+<body role='flatdoc' class='large-brief'>
+
+  <div class='title-area title-card' style='background-image: url(https://unsplash.it/1920/1080/?image=403)'>
+    <div class='in'>
+      <div class='headline'>
+        <h1>Documentation is easy.</h1>
+        <p>Flatdoc is the fastest way to create a site for your open source project.</p>
+        <h5><span>Flatdoc - Dark Theme</span></h5>
+      </div>
+    </div>
+  </div>
 
   <div class='header'>
     <div class='left'>