comment nav

components/Navigation.jsx

@@ -22,7 +22,8 @@ var Navigation = React.createClass({
       <div ref="navigation">
         <navigation className={ this.props.compact ? "compact" : null }>
           <ul className="navigation">
-          { sectionPages.map(this.generateNavItem) }
+            { sectionPages.map(this.generateNavItem) }
+            <li><a href="#comments">Comments and questions</a></li>
           </ul>
         </navigation>
       </div>

index.html

@@ -67,8 +67,22 @@
         <script>var n=document.querySelector(".enabling");n.parentNode.removeChild(n);(function update(el,str){str=(str.length===3)?'':str+'.';el.textContent=str;setTimeout(function(){update(el,str);},333);}(document.querySelector("#loader"),"..."));</script>
       </div>
     </article>
-    
-    <div id="disqus_thread"></div>
+
+    <section id="comments">
+      <style>
+      #comments {
+          margin-top: 0px;
+          width: calc(960px + 2em);
+          border-top: 1px solid rgba(255, 0, 0, 0.5);
+          padding-top: 3em;
+      }
+      </style>
+      <h2>Comments and questions</h2>
+      <div id="disqus_thread"></div>
+    </section>
+
+    <!-- Disqus commenting -->
+    <script src="lib/site/disqus.js" async></script>
 
     <!-- referral tracking, because I like knowing who's linking to my book -->
     <script src="lib/site/referrer.js" async></script>

stylesheets/navigation.less

@@ -14,9 +14,12 @@ navigation {
     padding: 0.5em 1em;
 
     li {
-      &:nth-child(n+2):before {
+      &:nth-child(n+2)[data-number]:before {
        content: "§" attr(data-number) ". "
       }
+      &:nth-child(n+2):not([data-number]) {
+       margin: 5px 0;
+      }
     }
   }
 

stylesheets/style.css

@@ -75,9 +75,12 @@ navigation ul {
   margin: 0;
   padding: 0.5em 1em;
 }
-navigation ul li:nth-child(n+2):before {
+navigation ul li:nth-child(n+2)[data-number]:before {
   content: "§" attr(data-number) ". ";
 }
+navigation ul li:nth-child(n+2):not([data-number]) {
+  margin: 5px 0;
+}
 navigation.compact {
   width: 100%;
   border: none;