docs/_layouts/default.html

   1 <!DOCTYPE html>
   2 <html lang="en-us">
   3
   4   {% include head.html %}
   5
   6   <body>
   7
   8     {% include sidebar.html %}
   9
  10     <!-- Wrap is the content to shift when toggling the sidebar. We wrap the
  11          content to avoid any CSS collisions with our real content. -->
  12     <div class="wrap">
  13       <div class="masthead">
  14         <div class="container">
  15           <h3 class="masthead-title">
  16             <a href="{{ site.baseurl }}/" title="Home">{{ site.title }}</a>
  17             <small>{{ site.tagline }}</small>
  18           </h3>
  19         </div>
  20       </div>
  21
  22       <div class="container content">
  23         {{ content }}
  24       </div>
  25     </div>
  26
  27     <label for="sidebar-checkbox" class="sidebar-toggle"></label>
  28
  29     <script>
  30       (function(document) {
  31         var toggle = document.querySelector('.sidebar-toggle');
  32         var sidebar = document.querySelector('#sidebar');
  33         var checkbox = document.querySelector('#sidebar-checkbox');
  34
  35         document.addEventListener('click', function(e) {
  36           var target = e.target;
  37
  38           if(!checkbox.checked ||
  39              sidebar.contains(target) ||
  40              (target === checkbox || target === toggle)) return;
  41
  42           checkbox.checked = false;
  43         }, false);
  44       })(document);
  45     </script>
  46   </body>
  47 </html>