<!DOCTYPE html>
-<html lang="en">
+<html lang="en-us">
{% include head.html %}
<body>
- <div class="container content">
- <header class="masthead">
- <h3 class="masthead-title">
- <a href="{{ site.baseurl }}/" title="Home">{{ site.title }}</a>
- <small>{{ site.tagline }}</small>
- </h3>
- </header>
+ {% include sidebar.html %}
- <main>
- {{ content }}
- </main>
+ <!-- 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">
+ <div class="container">
+ <h3 class="masthead-title">
+ <a href="{{ site.baseurl }}/" title="Home">{{ site.title }}</a>
+ <small>{{ site.tagline }}</small>
+ </h3>
+ </div>
+ </div>
- <footer class="footer">
- <small>
- © <time datetime="{{ site.time | date_to_xmlschema }}">{{ site.time | date: '%Y' }}</time>. All rights reserved.
- </small>
- </footer>
+ <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>
projects / blog / blobdiff