Added basic navigation

index.less

@@ -120,9 +120,18 @@ a.self-referencing {
 
 .pronunciation {
   font-size: .type['font-size'] * #title[@font-size-adjustment];
-  /* Why doesn’t this work? */
+  /* FIXME: Why doesn’t this work? */
   /*font-family: 'Hiragino Mincho Pro', .serif['font-family'];*/
   font-family: 'Hiragino Mincho Pro', serif;
 
   :before, :after { content: "|" }
 }
+
+#title > nav {
+  font-size: .type['font-size'];
+  text-align: right;
+
+  :before { color: .defaults[@lighter]; }
+  :hover { :before { color: .defaults[@darkest] } }
+  :before { content: '«'; }
+}

index.xhtml

@@ -17,6 +17,9 @@
       <header id="title">
         <dt>taupe</dt>
         <aside class="pronunciation">tōp</aside>
+        <nav>
+          <a href="/why.xhtml">why?</a>
+        </nav>
       </header>
       <section>
         <dd>

why.xhtml

@@ -16,6 +16,9 @@
     <dl>
       <header id="title">
         <h1>why?</h1>
+        <nav>
+          <a href="/">home</a>
+        </nav>
       </header>
       <section>
         <p>The situations in which you use a taupe link in your tweets are those in which you wish to reference another tweet: it’s equivalent to saying “see this tweet.” Sometimes, you want to reply to somebody’s tweet… and sometimes, you want to quote it. But sometimes, you don’t want to do either (for instance, you want your tweet to show up to <em>all</em> of your followers, but still semantically link it to another tweet; you can’t use the Twitter reply feature, as it will only show up to people who also follow the author of the other tweet); for those situations, a taupe is ideal.</p>