<!DOCTYPE html>
-<html xmlns="http://www.w3.org/1999/xhtml" xml:lang="en" lang="en-us">
+<html lang="en-us">
{% include head.html %}
<body>
- <div class="container content">
+ {% include sidebar.html %}
+
+ <!-- Wrap is the content to shift when toggling the sidebar. We wrap the
+ content to avoid any CSS collisions with our real content. -->
+ <div class="wrap">
<div class="masthead">
- <h3 class="masthead-title">
- <a href="/" title="Home">{{ site.title }}</a>
- <small>{{ site.tagline }}</small>
- </h3>
+ <div class="container">
+ <h3 class="masthead-title">
+ <a href="{{ site.baseurl }}/" title="Home">{{ site.title }}</a>
+ <small>{{ site.tagline }}</small>
+ </h3>
+ </div>
</div>
- {{ content }}
-
- <div class="footer">
- <p>
- © {{ site.time | date: '%Y' }}. All rights reserved.
- </p>
+ <div class="container content">
+ {{ content }}
</div>
</div>
+ <label for="sidebar-checkbox" class="sidebar-toggle"></label>
+
+ <script>
+ (function(document) {
+ var toggle = document.querySelector('.sidebar-toggle');
+ var sidebar = document.querySelector('#sidebar');
+ var checkbox = document.querySelector('#sidebar-checkbox');
+
+ document.addEventListener('click', function(e) {
+ var target = e.target;
+
+ if(!checkbox.checked ||
+ sidebar.contains(target) ||
+ (target === checkbox || target === toggle)) return;
+
+ checkbox.checked = false;
+ }, false);
+ })(document);
+ </script>
</body>
</html>