Lots of big formatting changes

layouts/default.html

@@ -1,4 +1,4 @@
-<!DOCTYPE HTML>
+<!DOCTYPE HTML PUBLIC "-//W3C//DTD HTML 4.01//EN" "http://www.w3.org/TR/html4/strict.dtd">
 <html lang="en-US">
   <head>
     <meta charset="utf-8">
@@ -13,6 +13,7 @@
       MathJax.Hub.config.tex2jax.skipTags = ["script", "noscript", "style", "textarea", "annotation", "annotation-xml"];
     </script>
     <script type="text/javascript" src="https://cdn.mathjax.org/mathjax/latest/MathJax.js?config=TeX-AMS_HTML" async></script>
+    <script src="/js/main.js" type="text/javascript"></script>
     <script>
       (function(i,s,o,g,r,a,m){i['GoogleAnalyticsObject']=r;i[r]=i[r]||function(){
       (i[r].q=i[r].q||[]).push(arguments)},i[r].l=1*new Date();a=s.createElement(o),
@@ -25,27 +26,23 @@
 
     <meta name="generator" content="nanoc <%= Nanoc::VERSION %>">
     <meta http-equiv="Default-Style" content="colorful">
+    <meta name=viewport content="width=device-width, initial-scale=1">
   </head>
   <body>
 
     <div id="sidebar">
-      <%= @items["/toc/"].compiled_content(:snapshot => :last) %>
+      <div class="abs-hamburger"><div class="nav-toggle" onclick="javascript:sidebarClick();"><span></span></div></div>
+      <nav>
+        <%= @items["/toc/"].compiled_content(snapshot: :last) %>
+      </nav>
     </div>
 
-    <div id="main" class="hyphenate">
-
-      <h1 id="gh-buttons">
-        <a class="icon-fork" href="https://github.com/flaviut/nim-by-example/"></a>
-        <a class="icon-star" href="https://github.com/flaviut/nim-by-example/stargazers">
-          <div id="starcount"></div>
-        </a>
-      </h1>
-
+    <article>
       <%= yield %>
+    </article>
 
-    </div>
-
-    <script src="/js/main.js" type="text/javascript"></script>
-
+    <footer>
+      <%= @items["/footer/"].compiled_content(snapshot: :last) %>
+    </footer>
   </body>
 </html>