]> git.bitcoin.ninja Git - blog/commitdiff
Update layouts
authorMatt Corallo <git@bluematt.me>
Fri, 15 Jan 2016 19:41:37 +0000 (11:41 -0800)
committerMatt Corallo <git@bluematt.me>
Fri, 15 Jan 2016 19:41:37 +0000 (11:41 -0800)
_layouts/default.html
_layouts/page.html
_layouts/post.html

index d68e8981e055a4424562e6c673b59461dcdf0f26..e1ad606e16c98b8485f00179c0f84940d66067a2 100644 (file)
@@ -1,28 +1,47 @@
 <!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>
-          &copy; <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>
index 960f76780ca93aae8a2943ab9ba51aa5d31dd29c..4e0d4ebf09ee2756cfc8c0087e0a3d73be00cc2f 100644 (file)
@@ -2,7 +2,7 @@
 layout: default
 ---
 
-<article class="page">
+<div class="page">
   <h1 class="page-title">{{ page.title }}</h1>
   {{ content }}
-</article>
+</div>
index ec63afc10d770bfaf47daee2c3d2231ce39c8c05..c027477605b3b1ddaafaa876cc5efbea8044ef55 100644 (file)
@@ -2,14 +2,13 @@
 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 %}
@@ -17,11 +16,10 @@ layout: default
         <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>