Nice css checkboxes

content/stylesheets/main.css

@@ -139,6 +139,11 @@ a:hover {
   line-height: 20px;
 }
 
-#sidebar a:visited {
-  color: #AE6B1B;
+#sidebar a.visited:before { /* selected with JS */
+  content: "";
+  font-family: "FontAwesome";
+  position: absolute;
+  left: -3em;
+  color: #EEE;
+  text-shadow: -1px 0 #2B2B2B, 0 1px #2B2B2B, 1px 0 #2B2B2B, 0 -1px #2B2B2B
 }

layouts/default.html

@@ -5,7 +5,6 @@
     <title>Nimrod by Example - <%= @item[:title] %></title>
     <link rel="stylesheet" href="<%= @items['/stylesheets/main/'].path %>">
     <link rel="stylesheet" href="<%= @items['/stylesheets/syntax/'].path %>">
-
     <meta name="generator" content="nanoc <%= Nanoc::VERSION %>">
   </head>
   <body>
@@ -15,5 +14,14 @@
     <div id="sidebar">
 			<%= @items["/toc/"].compiled_content(:snapshot => :last) %>
 		</div>
+		<script>
+      localStorage.setItem(window.location.pathname, true);
+      var tocLinks = document.querySelectorAll("#sidebar a:link, a:visited");
+      for(var i = 0; i < tocLinks.length; i++){
+        if(localStorage.getItem(tocLinks[i].getAttribute("href")) != null){
+          tocLinks[i].classList.add("visited");
+        }
+      }
+    </script>
   </body>
 </html>