Separate presentation from content a bit in the recipe header.

jgaskins · jgaskins · commit aab856d8d58c · 2011-07-31T18:36:54.000+08:00
diff --git a/_layouts/recipe.html b/_layouts/recipe.html
@@ -5,12 +5,14 @@
     <link rel="stylesheet" href="/css/default.css" type="text/css">
   </head>
   <body>
-   <header>
+    <header>
       <h1><a href="/">CoffeeScript Cookbook</a></h1>
       <nav>
-        <a href="/">Home</a> &raquo;
-        <a href="/chapters/{{ page.chapter | replace: ' ', '_' | downcase }}">{{ page.chapter }}</a> &raquo;
-        {{ page.title }}
+        <ol class="breadcrumbs">
+          <li><a href="/">Home</a></li>
+          <li><a href="/chapters/{{ page.chapter | replace: ' ', '_' | downcase }}">{{ page.chapter }}</a></li>
+          <li>{{ page.title }}</li>
+        </ol>
       </nav>
     </header>
     <section class="content">
diff --git a/css/default.css b/css/default.css
@@ -75,6 +75,22 @@ nav ul li:first-child {
   border:none;
 }
 
+nav ol {
+  list-style:none;
+}
+
+nav ol li {
+  display:inline-block;
+}
+
+nav ol.breadcrumbs li:before {
+  content: '\000bb\000a0'; /* Insert &raquo;&nbsp; between list items. */
+}
+
+nav ol.breadcrumbs li:first-child:before {
+  content: '';
+}
+
 /* Typography */
 
 body {
