<!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>
layout: default
---
-<article class="post">
+<div class="post">
<h1 class="post-title">{{ page.title }}</h1>
- <time datetime="{{ page.date | date_to_xmlschema }}" class="post-date">{{ page.date | date_to_string }}</time>
+ <span class="post-date">{{ page.date | date_to_string }}</span>
{{ content }}
-</article>
+</div>
-{% if site.related_posts != empty %}
-<aside class="related">
+<div class="related">
<h2>Related Posts</h2>
<ul class="related-posts">
{% for post in site.related_posts limit:3 %}
<h3>
<a href="{{ site.baseurl }}{{ post.url }}">
{{ post.title }}
- <small><time datetime="{{ post.date | date_to_xmlschema }}">{{ post.date | date_to_string }}</time></small>
+ <small>{{ post.date | date_to_string }}</small>
</a>
</h3>
</li>
{% endfor %}
</ul>
-</aside>
-{% endif %}
+</div>
projects / blog / commitdiff