docs/template.html

<!DOCTYPE html>
<html>
  <head>
    <style>
      /*! ADAPTED
    Typeplate : Starter Kit
    URL ........... http://typeplate.com
    Version ....... 3.0.2
    Github ........ https://github.com/typeplate/starter-kit
    Authors ....... Dennis Gaebel (@gryghostvisuals) & Zachary Kain (@zakkain)
    License ....... Creative Commmons Attribution 3.0
    License URL ... https://github.com/typeplate/starter-kit/blob/master/license.txt
    */

      h1,
      h2,
      h3,
      h4,
      h5,
      h6 {
        text-rendering: optimizeLegibility;
        line-height: 1;
        margin-top: 0;
        color: #222;
      }

      blockquote + figcaption cite {
        display: block;
        font-size: inherit;
        text-align: right;
      }

      body {
        word-wrap: break-word;
      }

      pre code {
        word-wrap: normal;
      }

      body {
        -webkit-hyphens: auto;
        -ms-hyphens: auto;
        hyphens: auto;
        color: #444;
      }

      h1 {
        font-size: 2em;
        /* 2*16 = 32 */
      }

      h2 {
        font-size: 1.5em;
        /* 1.5*16 = 24 */
      }

      h3 {
        font-size: 1.17em;
        /* 1.17*16 = 18.72 */
      }

      h4 {
        font-size: 1em;
        /* 1*16 = 16 */
      }

      h5 {
        font-size: 0.83em;
        /* 0.83*16 = 13.28 */
      }

      h6 {
        font-size: 0.75em;
        /* 0.75*16 = 12 */
      }

      h1 {
        margin: 2.42424rem 0 1.454544rem;
      }

      h2 {
        margin: 2.0202rem 0 1.21212rem;
      }

      h3 {
        margin: 1.61616rem 0 1rem;
      }

      h4 {
        margin: 1.21212rem 0 1;
      }

      h5 {
        margin: 0.80808rem 0;
      }

      h6 {
        margin: 0.70707rem 0;
      }

      p {
        margin: auto auto 1.5rem;
      }

      small {
        font-size: 65%;
      }

      input,
      abbr,
      acronym,
      blockquote,
      code,
      kbd,
      q,
      samp,
      var {
        -webkit-hyphens: none;
        -ms-hyphens: none;
        hyphens: none;
      }

      pre {
        white-space: pre;
      }

      pre code {
        white-space: -moz-pre-wrap;
        white-space: pre-wrap;
      }

      code {
        white-space: pre;
        font-family: SF Mono, Consolas, Dejavu Sans Mono, Menlo, monospace;
      }

      abbr {
        -webkit-font-variant: small-caps;
        -moz-font-variant: small-caps;
        -ms-font-variant: small-caps;
        font-variant: small-caps;
        font-weight: 600;
        text-transform: lowercase;
        color: gray;
      }

      abbr[title]:hover {
        cursor: help;
      }

      /* FROM http://purecss.io/layouts/side-menu/  adapted to remove pure classes*/

      body {
        font-family: -apple-system, BlinkMacSystemFont, "Segoe UI", Roboto,
          Helvetica, Arial, sans-serif, "Apple Color Emoji", "Segoe UI Emoji",
          "Segoe UI Symbol";
        color: #444;
      }

      img {
        max-width: 100%;
        height: auto;
        display: block;
        margin: auto;
      }

      code,
      pre {
        background-color: #f5f5f5;
        color: #444;
        border-radius: 2px;
        text-shadow: 0px 1px 0px white;
        box-shadow: 0 1px 1px rgba(0, 0, 0, 0.15);
      }

      pre code {
        border: none;
        box-shadow: none;
      }

      pre {
        padding: 0.5em;
      }

      code {
        display: inline-block;
        padding: 0 0.5em;
        line-height: 1.4;
        font-size: 0.9em;
      }

      table {
        border-spacing: 0;
        margin-bottom: 1.5rem;
      }

      table th,
      table td {
        padding: 0.3em 0.7em;
      }

      table th {
        background-color: #f4f4f4;
        border-bottom: 2px solid #444;
      }

      table td {
        border: 1px solid #f5f5f5;
      }

      /* Add transition to containers so they can push in and out. */

      #layout,
      #menu,
      .menu-link {
        -webkit-transition: all 0.2s ease-out;
        -moz-transition: all 0.2s ease-out;
        -ms-transition: all 0.2s ease-out;
        -o-transition: all 0.2s ease-out;
        transition: all 0.2s ease-out;
      }

      /* This is the parent `<div>` that contains the menu and the content area. */

      #layout {
        position: relative;
        padding-left: 0;
      }

      #layout.active #menu {
        left: 250px;
        width: 250px;
      }

      #layout.active .menu-link {
        left: 250px;
      }

      /* The content `<div>` is where all your content goes. */

      .content {
        margin: 50px auto;
        padding: 0 2em;
        max-width: 80ex;
        line-height: 1.6em;
      }

      /*
      The `#menu` `<div>` is the parent `<div>` that contains the menu that
      appears on the left side of the page.
      */

      #menu {
        margin-left: -250px;
        /* "#menu" width */
        width: 250px;
        position: fixed;
        top: 0;
        left: 0;
        bottom: 0;
        z-index: 1000;
        /* so the menu or its navicon stays above all content */
        background: #f4f4f4;
        overflow-y: auto;
        -webkit-overflow-scrolling: touch;
        font-size: 0.9em;
      }

      @media print {
        #menu,
        .menu-link {
          display: none !important;
        }
      }

      a,
      a * {
        text-decoration: none;
        color: #2483cc;
      }

      a:visited {
        text-decoration: none;
        color: #2483cc;
      }

      /* All anchors inside the menu should be styled like this. */

      #menu a {
        display: block;
        padding: 0.5em 0.5em;
      }

      #menu a:first-letter {
        text-transform: capitalize;
      }

      #menu ul {
        list-style-type: none;
        padding: 0;
        margin: 1em 0.5em;
      }

      #menu ul ul {
        margin-top: 0.5em;
        margin-left: 0.5em;
        border-left: 4px solid rgba(255, 255, 255, 0.5);
      }

      /* Change color of the anchor links on hover/focus. */

      #menu li a:hover,
      #menu li a:focus {
        background: rgba(255, 255, 255, 0.4);
      }

      /* This styles the selected menu item `<li>`. */

      #menu li a.active {
        background: rgba(0, 0, 0, 0.05);
      }

      /* This styles a link within a selected menu item `<li>`. */

      #menu li a.active {
        color: #222;
      }

      /* This styles the menu heading. */

      #menu li.heading {
        font-size: 0.9em;
        text-transform: uppercase;
        color: #000;
      }

      #menu li.heading > * {
        padding: 0.5em;
        display: block;
      }

      #menu li.heading a {
        color: #0c68af;
      }

      /* -- Dynamic Button For Responsive Menu -------------------------------------*/

      /*
      `.menu-link` represents the responsive menu toggle that shows/hides on
      small screens.
      */

      .menu-link {
        position: fixed;
        display: block;
        /* show this only on small screens */
        top: 0;
        left: 0;
        /* "#menu width" */
        font-size: 10px;
        /* change this value to increase/decrease button size */
        z-index: 10;
        width: 2em;
        height: auto;
        padding: 1.6em 1.2em;
        border-radius: 0 2px 2px 0;
      }

      .menu-link:hover {
        background: #f4f4f4;
      }

      .menu-link span {
        position: relative;
        display: block;
      }

      .menu-link span,
      .menu-link span:before,
      .menu-link span:after {
        background-color: #555;
        width: 100%;
        height: 0.2em;
        border-radius: 1em;
      }

      .menu-link span:before,
      .menu-link span:after {
        position: absolute;
        margin-top: -0.6em;
        content: " ";
      }

      .menu-link span:after {
        margin-top: 0.6em;
      }

      /* Hides the menu at `48em`, but modify this based on your app's needs. */

      @media (min-width: 48em) {
        .header,
        .content {
          padding-left: 2em;
          padding-right: 2em;
        }

        #layout {
          padding-left: 250px;
          /* left col width "#menu" */
          left: 0;
        }
        #menu {
          left: 250px;
        }

        .menu-link {
          position: fixed;
          left: 250px;
          display: none;
        }

        #layout.active .menu-link {
          left: 250px;
        }
      }

      @media (max-width: 48em) {
        /* Only apply this when the window is small. Otherwise, the following case results in extra padding on the left:
         * Make the window small.
         * Tap the menu to trigger the active state.
         * Make the window large again.
         */
        #layout.active {
          position: relative;
          left: 250px;
        }
      }

      /* Heading anchors and permalinks */
      h1[id],
      h2[id],
      h3[id],
      h4[id],
      h5[id],
      h6[id] {
        position: relative;
      }
      .heading-anchor-permalink {
        /* Position the permalink to the left of the title */
        position: absolute;
        right: 100%;
        /* Add some spacing as padding to not lose the hover */
        padding-right: 0.6rem;
        /* Make it only visible on heading hover, see below */
        opacity: 0;
      }
      h1[id]:hover .heading-anchor-permalink,
      h2[id]:hover .heading-anchor-permalink,
      h3[id]:hover .heading-anchor-permalink,
      h4[id]:hover .heading-anchor-permalink,
      h5[id]:hover .heading-anchor-permalink,
      h6[id]:hover .heading-anchor-permalink {
        opacity: 0.5;
      }
    </style>
    <meta name="viewport" content="width=device-width, initial-scale=1.0" />
    <meta charset="utf-8" />
  </head>

  <body>
    <div id="layout">
      <!-- Menu toggle -->
      <a href="#menu" id="menuLink" class="menu-link">
        <!-- Hamburger icon -->
        <span></span>
      </a>
      <nav id="menu">
        <!--NAV-->
      </nav>
      <article id="main" class="content">
        <!--CONTENT-->
      </article>
    </div>
    <script>
      // Load contents.json if you need it
    </script>
    <script>
      // FROM http://purecss.io/js/ui.js
      (function(window, document) {
        var layout = document.getElementById("layout"),
          menu = document.getElementById("menu"),
          menuLink = document.getElementById("menuLink");

        function toggleClass(element, className) {
          var classes = element.className.split(/\s+/),
            length = classes.length,
            i = 0;

          for (; i < length; i++) {
            if (classes[i] === className) {
              classes.splice(i, 1);
              break;
            }
          }
          // The className is not found
          if (length === classes.length) {
            classes.push(className);
          }

          element.className = classes.join(" ");
        }

        menuLink.onclick = function(e) {
          var active = "active";

          e.preventDefault();
          toggleClass(layout, active);
          toggleClass(menu, active);
          toggleClass(menuLink, active);
        };
      })(this, this.document);
    </script>
  </body>
</html>