Doc tweaks.

doc/_layouts/page.html

@@ -31,7 +31,7 @@
 
     <!-- MAIN CONTENT -->
     <div id="main_content_wrap" class="outer">
-      <section id="menu">
+      <section id="menu" class="desktop">
         <ul>
           <li><a href="index.html">Introduction</a></li>
           <li><a href="install.html">Installation</a></li>
@@ -54,17 +54,49 @@
           }
 
           var menu = document.getElementById("menu");
+          var setMenuLayout = function() {
+            if (window.innerWidth < 1150) {
+              menu.className = "mobile";
+              menu.style.position = "relative";
+            } else if (window.innerHeight < 900) {
+              menu.className = "desktop";
+              menu.style.position = "absolute";
+            } else {
+              menu.className = "desktop";
+              menu.style.position = "fixed";
+            }
+          };
+          setMenuLayout();
+          window.onresize = setMenuLayout;
+
           var items = menu.getElementsByTagName("li");
           for (var i = 0; i < items.length; i++) {
-            var href = items[i].getElementsByTagName("a")[0].href;
+            var link = items[i].getElementsByTagName("a")[0];
+            var href = link.href;
             if (href.lastIndexOf(filename) >= 0) {
+              var parent = link.parentNode;
+              parent.removeChild(link);
+              var p = document.createElement("p");
+              p.appendChild(document.createTextNode(link.innerText || link.textContent));
+              p.onclick = (function(url) {
+                return function(event) {
+                  window.location.href = url;
+                  event.stopPropagation();
+                }
+              })(href);
+              parent.appendChild(p);
               items[i].className = "selected";
+              var toc = document.createElement("ul");
+              toc.id = "toc";
+              items[i].appendChild(toc);
+            } else {
+              items[i].onclick = (function(url) {
+                return function(event) {
+                  window.location.href = url;
+                  event.stopPropagation();
+                }
+              })(href);
             }
-            items[i].onclick = (function(url) {
-              return function() {
-                window.location.href = url;
-              }
-            })(href);
           }
         })();
       </script>
@@ -82,16 +114,65 @@
       </footer>
     </div>
 
-              <script type="text/javascript">
-            var gaJsHost = (("https:" == document.location.protocol) ? "https://ssl." : "http://www.");
-            document.write(unescape("%3Cscript src='" + gaJsHost + "google-analytics.com/ga.js' type='text/javascript'%3E%3C/script%3E"));
-          </script>
-          <script type="text/javascript">
-            try {
-              var pageTracker = _gat._getTracker("UA-39711112-1");
-            pageTracker._trackPageview();
-            } catch(err) {}
-          </script>
+    <script type="text/javascript">
+      (function() {
+        var toc = document.getElementById("toc");
+        if (toc) {
+          var content = document.getElementById("main_content").childNodes;
+          var headings = [];
+
+          for (var i = 0; i < content.length; i++) {
+            if (content[i].tagName == "H2" ||
+                content[i].tagName == "H3" ||
+                content[i].tagName == "H4") {
+              headings.push(content[i]);
+            }
+          }
+
+          var levels = [toc];
+          for (var i in headings) {
+            var hl = headings[i].tagName.slice(1) - 1;
+            while (hl > levels.length) {
+              var parent = levels[levels.length - 1];
+              var item = parent.childNodes[parent.childNodes.length - 1];
+              var sublist = document.createElement("ul");
+              item.appendChild(sublist);
+              levels.push(sublist);
+            }
+            while (hl < levels.length) {
+              levels.pop();
+            }
+
+            var parent = levels[levels.length - 1];
+            var item = document.createElement("li");
+            var p = document.createElement("p");
+            var link = document.createElement("a");
+            link.appendChild(document.createTextNode(headings[i].innerText || headings[i].textContent));
+            link.href = "#" + headings[i].id;
+            p.appendChild(link);
+            p.onclick = (function(url) {
+              return function(event) {
+                window.location.href = url;
+                event.stopPropagation();
+              }
+            })(link.href);
+            item.appendChild(p);
+            parent.appendChild(item);
+          }
+        }
+      })()
+    </script>
+
+    <script type="text/javascript">
+      var gaJsHost = (("https:" == document.location.protocol) ? "https://ssl." : "http://www.");
+      document.write(unescape("%3Cscript src='" + gaJsHost + "google-analytics.com/ga.js' type='text/javascript'%3E%3C/script%3E"));
+    </script>
+    <script type="text/javascript">
+      try {
+        var pageTracker = _gat._getTracker("UA-39711112-1");
+        pageTracker._trackPageview();
+      } catch(err) {}
+    </script>
 
 
   </body>

doc/cxx.md

@@ -44,7 +44,7 @@ void writeAddressBook(int fd) {
   Person::Builder bob = people[1];
   bob.setId(456);
   bob.setName("Bob");
-  bob.setEmail("alice@example.com");
+  bob.setEmail("bob@example.com");
 
   writePackedMessageToFd(fd, message);
 }

doc/index.md

@@ -10,14 +10,14 @@ Cap'n Proto is an insanely fast data interchange format and capability-based RPC
 JSON, except binary. Or think [Protocol Buffers](http://protobuf.googlecode.com), except faster.
 In fact, in benchmarks, Cap'n Proto is INFINITY TIMES faster than Protocol Buffers.
 
-This benchmark is, of course, silly. It is only measuring the time to encode and decode a message
+This benchmark is, of course, unfair. It is only measuring the time to encode and decode a message
 in memory. Cap'n Proto gets a perfect score because _there is no encoding/decoding step_. The Cap'n
 Proto encoding is appropriate both as a data interchange format and an in-memory representation, so
 once your structure is built, you can simply write the bytes straight out to disk!
 
 **_But doesn't that mean the encoding is platform-specific?_**
 
-NO! The encoding is defined byte-for-byte independently of any platform. However, it is designed to
+NO! The encoding is defined byte-for-byte independent of any platform. However, it is designed to
 be efficiently manipulated on common modern CPUs. Data is arranged like a compiler would arrange a
 struct -- with fixed widths, fixed offsets, and proper alignment. Variable-sized elements are
 embedded as pointers. Pointers are offset-based rather than absolute so that messages are

doc/install.md

@@ -4,7 +4,7 @@ layout: page
 
 # Installation
 
-## Cap'n Proto is not ready yet
+<p style="font-size: 125%; font-weight: bold;">Note: Cap'n Proto is not ready yet</p>
 
 <a class="prominent_link" style="color: #fff"
 href="https://groups.google.com/group/capnproto-announce">Sign Up for Updates</a>

doc/stylesheets/stylesheet.css

@@ -208,6 +208,31 @@ ul li {
   list-style: outside;
 }
 
+/*
+#toc {
+  background-color: #fff;
+  padding: 10px;
+  border-radius: 2px;
+  -moz-border-radius: 2px;
+  -webkit-border-radius: 2px;
+
+  box-shadow: 0 0 5px #ebebeb;
+  -webkit-box-shadow: 0 0 5px #ebebeb;
+  -moz-box-shadow: 0 0 5px #ebebeb;
+  -o-box-shadow: 0 0 5px #ebebeb;
+  -ms-box-shadow: 0 0 5px #ebebeb;
+}
+
+#toc li {
+	list-style: none
+}
+
+#toc ul {
+	padding-bottom: 0;
+	margin-bottom: 0;
+}
+*/
+
 ol li {
   list-style: decimal outside;
 }
@@ -463,23 +488,35 @@ Small Device Styles
 
 
 /*******************************************************************************
-Sidbar style borrowed from cldoc by jessevdk, because I thought it looked good.
-I modified it a little bit to make the links more clickable.
+Sidbar style based on cldoc by jessevdk, because I thought it looked good.
+I modified it heavily, though.
 *******************************************************************************/
 
-div.maruku_toc {
-  position: absolute;
-  left: 0;
+#menu.desktop {
+	position: fixed;
+	left: 0px;
+	top: 230px;
+	width: 250px;
+	z-index: 10;
+}
+
+#menu.mobile {
+  position: relative;
+  max-width: 640px;
+  padding: 100px 10px 20px 10px;
+  margin: 0 auto;
 }
 
-#menu {
-  float: left;
+@media screen and (max-width: 480px) {
+  #menu.mobile {
+    min-width: 320px;
+    max-width: 480px;
+  }
 }
 
 #menu ul {
   padding: 0;
   margin: 0;
-  margin-top: 30px;
 }
 
 #menu li {
@@ -489,31 +526,79 @@ div.maruku_toc {
   background-color: #212121;
 }
 
-#menu li:first-child {
+#menu.desktop>ul>li:first-child {
   border-radius: 0px 10px 0px 0px;
 }
 
-#menu li:last-child {
+#menu.desktop>ul>li:last-child {
   border-radius: 0px 0px 10px 0px;
 }
 
+#menu.mobile>ul>li:first-child {
+  border-radius: 10px 10px 0px 0px;
+}
+
+#menu.mobile>ul>li:last-child {
+  border-radius: 0px 0px 10px 10px;
+}
+
 #menu a {
   color: #aaa;
 }
 
 #menu li.selected {
   background-color: #2a2a2a;
+  color: #fff;
 }
 
 #menu li.selected a {
   color: #fff;
 }
 
-#menu li:hover {
+#menu>ul>li:hover {
   background-color: #2a2a2a;
   cursor: pointer;
 }
 
-#menu li:hover a {
+#menu>ul>li.selected:hover {
+  background-color: #2a2a2a;
+  cursor: auto;
+}
+
+#menu>ul>li.selected:hover {
+  cursor: auto;
+}
+
+#menu>ul>li:hover a {
   color: #eee;
 }
+
+#menu>ul>li.selected:hover a {
+  color: #fff;
+}
+
+ul#toc {
+  background-color: #2a2a2a;
+  margin: 0;
+  font-size: 80%;
+}
+
+#toc ul {
+  margin: 0;
+  padding: 0;
+}
+
+#toc li {
+  padding: 0 0 0 15px;
+  background-color: #2a2a2a;
+}
+
+#menu p {
+  padding: 2px 0 2px 15px;
+  margin: 0;
+  text-indent: -15px;
+}
+#menu p:hover {
+  background-color: #313131;
+  cursor: pointer;
+}