From fd05f6f764c879eca3d71df6538c9fb010c500d4 Mon Sep 17 00:00:00 2001
From: muflax <mail@muflax.com>
Date: Fri, 23 Dec 2011 12:33:28 +0100
Subject: [PATCH] made some progress with the design

---
 content/style.scss  | 108 +++++++++++++++++++++-----------
 layouts/default.erb | 149 ++++++++++++++++++++++----------------------
 lib/crumb.rb        |   2 +-
 3 files changed, 145 insertions(+), 114 deletions(-)

diff --git a/content/style.scss b/content/style.scss
index c0b93b5..18394cf 100644
--- a/content/style.scss
+++ b/content/style.scss
@@ -10,6 +10,11 @@ $hover: #057dff;
 $quote: #a6a542;
 $pre: #fff8d9;
 
+/* sizes */
+$left-col: 45em;
+$right-col: 25em;
+$margin: 1em;
+
 body {
   background: $bg;
   color: $fg;
@@ -20,16 +25,37 @@ body {
   text-align: justify;
 }
 
+div#body {
+  width: $left-col + $right-col;
+  margin: 0 auto;
+}
+
 div#main {
-  padding: 0;
-  width: 45em;
+  width: $left-col;
+  float: left;
+  margin-bottom: 3em;
 }
 
 div#title {
+  h1 {
+    background: $crumb-bg;
+    color: $crumb-fg;
+    line-height: 1.3em;
+    font-size: 1.7em;
+    font-weight: normal;
+    margin-top: 0;
+    text-align: center;
+  }
+}
+
+a:link.title, a:hover.title, a:visited.title, a:active.title {
   background: $crumb-bg;
   color: $crumb-fg;
-  line-height: 1.3;
-  text-align: center;
+}
+
+/* don't underline titles */
+a:link.title, a:visited.title, a:active.title {
+  text-decoration: none;
 }
 
 /* episteme header */
@@ -44,34 +70,40 @@ div#disqus {
 }
 
 div#nav {
-  float: right;
-  position: absolute;
-  right: 0;
-  top: 0;
+  float: left;
+  width: $right-col - $margin;
+  margin-left: $margin;
 }
 
 /* toc */
 div#toc {
+  h1 {
+    background: $crumb-bg;
+    color: $crumb-fg;
+    line-height: 1.3em;
+    font-size: 1.7em;
+    font-weight: normal;
+    margin-top: 0;
+  }
+  text-align: left;
 }
 
 div#crumb {
+  a {
+    line-height: 1.4em;
+    font-size: 1.3em;
+    text-decoration: none;
+  }
+  
   background: $crumb-bg;
   color: $crumb-fg;
-  line-height: 2em;
+  // line-height: 2em;
   text-align: center;
-  // width: 100%;
-  float: right;
-}
-
-
-a:link.title, a:hover.title, a:visited.title, a:active.title {
-  font-size: 1.7em;
-  color: $crumb-fg;
-}
-
-/* don't underline titles */
-a:link.title, a:visited.title, a:active.title {
-  text-decoration: none;
+  position: fixed;
+  bottom: 0;
+  left: auto;
+  width: $left-col + $right-col;
+  margin: 0 auto;
 }
 
 div.footnotes {
@@ -80,13 +112,13 @@ div.footnotes {
 
 sup {
   margin-left: 0.2em;
-  /* font-size: 1em; */
+  // font-size: 1em;
 }
 
 a:link.crumb, a:hover.crumb, a:visited.crumb, a:active.crumb {
   color: $crumb-fg;
-  font-size: 1.3em;
-  font-weight: bold;
+  // font-size: 1.3em;
+  // font-weight: bold;
 }
 
 a:hover {   
@@ -106,8 +138,8 @@ a.episteme:hover {
 
 /* move paragraphs a bit closer to the center, with list exceptions */
 p { 
-  margin-left: 1em;
-  margin-right: 1em;
+  margin-left: $margin;
+  margin-right: $margin;
 }
 
 ul p {
@@ -129,11 +161,11 @@ ol p {
 }
 
 ul.table .align_right {
-  margin-right: 1em;
+  margin-right: $margin;
 }
 
 ul.table li {
-  margin-left: -1em;
+  margin-left: -$margin;
 }
 
 /* general lists */
@@ -142,18 +174,18 @@ li {
 }
 
 ol {
-  margin-left: 2em;
+  margin-left: 2 * $margin;
   margin-top: 0;
   margin-bottom: 0;
-  padding-left: 1em;
+  padding-left: $margin;
 }
 
 ul {
   list-style-type: square;
-  margin-left: 2em;
+  margin-left: 2 * $margin;
   margin-top: 0;
   margin-bottom: 0;
-  padding-left: 1em;
+  padding-left: $margin;
 }
 
 em {
@@ -211,15 +243,15 @@ h3, h4, h5, h6 {
 blockquote {
   border-left: 10px solid $quote;
   border-right: 10px solid $quote;
-  margin-left: 1em;
-  margin-right: 1em;
+  margin-left: $margin;
+  margin-right: $margin;
   padding-left: 0;
 }
 
 /* fix indentation if blockquote is already indented */
 li blockquote {
-  padding-left: 1em;
-  margin-right: 2em;
+  padding-left: $margin;
+  margin-right: 2 * $margin;
 }
 
 pre { 
@@ -228,7 +260,7 @@ pre {
   font-family: monospace !important;
   line-height: 1.3em;
   overflow: auto;
-  padding: 0.5em 1em; 
+  padding: $margin/2 $margin; 
 }
 
 /* pygments code highlighting */
diff --git a/layouts/default.erb b/layouts/default.erb
index f03ed2f..e241b5e 100644
--- a/layouts/default.erb
+++ b/layouts/default.erb
@@ -21,88 +21,87 @@
     </script>
   </head>
   <body>
-    <!-- main part -->
-    <div id="main">
-      <!-- page title -->
-      <% if @item[:title] %>
-        <div id="title"><a class="title" href="/"><%= @item[:title] %></a></div>
-      <% end %>
+    <div id="body">
+      <!-- main part -->
+      <div id="main">
+        <!-- page title -->
+        <% if @item[:title] %>
+          <div id="title"><h1 class="title">
+              <a class="title" href="/"><%= @item[:title] %></a>
+            </h1></div>
+        <% end %>
 
-      <!-- epistemic and technical state -->
-      <div id="episteme">
-      <% if @item[:episteme] %>
-      <p><span class="align_left">
-          Last modified:
-          <a class='episteme' href='/changelog/'>
-            <%= @item[:date] %>
-          </a> (<%= techne @item[:techne] %>).
-        </span>
-        <span class="align_right">
-          Epistemic state:
-          <a class='episteme' href='/episteme/'>
-            <%= episteme @item[:episteme] %></a>.
-        </span>
-      </p>
-      <% end %>
+        <!-- epistemic and technical state -->
+        <div id="episteme">
+          <% if @item[:episteme] %>
+            <p><span class="align_left">
+                Last modified:
+                <a class='episteme' href='/changelog/'>
+                  <%= @item[:date] %>
+                </a> (<%= techne @item[:techne] %>).
+              </span>
+              <span class="align_right">
+                Epistemic state:
+                <a class='episteme' href='/episteme/'>
+                  <%= episteme @item[:episteme] %></a>.
+              </span>
+            </p>
+          <% end %>
+        </div>
+
+        <!-- actual content (not indented to protect markdown) -->
+        <div id="content">
+
+          <%= yield %>
+
+        </div>
+        
+        <!-- comments -->
+        <% unless @item[:no_comments] or @item[:is_category] %>
+          <div id="disqus">
+            <div id="disqus_thread"></div>
+            <script type="text/javascript">
+              var disqus_shortname = 'muflax';
+              var disqus_identifier = '<%= @item.identifier %>';
+              var disqus_url = 'http://muflax.com<%= @item.identifier %>';
+
+              (function() {
+              var dsq = document.createElement('script')
+              dsq.type = 'text/javascript'
+              dsq.async = true;
+              dsq.src = 'http://' + disqus_shortname + '.disqus.com/embed.js';
+              (document.getElementsByTagName('head')[0] || document.getElementsByTagName('body')[0]).appendChild(dsq);
+              })();
+            </script>
+            <noscript>Please enable JavaScript to view the
+              <a href="http://disqus.com/?ref_noscript">comments powered by Disqus.</a>
+            </noscript>
+            <a href="http://disqus.com" class="dsq-brlink">
+              blog comments powered by <span class="logo-disqus">Disqus</span>
+            </a>
+          </div>
+        <% end %>
       </div>
 
-      <!-- actual content (not indented to protect markdown) -->
-      <div id="content">
-
-<%= yield %>
-
+      <!-- navigation sidebar -->
+      <div id="nav">
+        <!-- table of contents -->
+        <% if @item[:toc] %>
+          <div id="toc">
+            <%= toc %>
+          </div>
+        <% end %>
+        
+        <!-- contact -->
+        <!-- TODO -->
       </div>
-      
-      <!-- comments -->
-      <% unless @item[:no_comments] or @item[:is_category] %>
-        <div id="disqus">
-          <div id="disqus_thread"></div>
-          <script type="text/javascript">
-            var disqus_shortname = 'muflax';
-            var disqus_identifier = '<%= @item.identifier %>';
-            var disqus_url = 'http://muflax.com<%= @item.identifier %>';
-
-            (function() {
-            var dsq = document.createElement('script')
-            dsq.type = 'text/javascript'
-            dsq.async = true;
-            dsq.src = 'http://' + disqus_shortname + '.disqus.com/embed.js';
-            (document.getElementsByTagName('head')[0] || document.getElementsByTagName('body')[0]).appendChild(dsq);
-            })();
-          </script>
-          <noscript>Please enable JavaScript to view the
-            <a href="http://disqus.com/?ref_noscript">comments powered by Disqus.</a>
-          </noscript>
-          <a href="http://disqus.com" class="dsq-brlink">
-            blog comments powered by <span class="logo-disqus">Disqus</span>
-          </a>
-        </div>
-      <% end %>
-    </div>
-
-    <!-- navigation sidebar -->
-    <div id="nav">
-      <!-- table of contents -->
-      <% if @item[:toc] %>
-        <div id="toc">
-          <%= toc %>
-        </div>
-      <% end %>
-    
       <!-- breadcrumb navigation -->
       <div id="crumb">
-        <ul id="crumb">
-          <% breadcrumbs.each do |crumb| %>
-            <li class="crumb">
-              <a class="crumb" href="<%= crumb[:link] %>"><%= crumb[:title] %></a>
-            </li>
-          <% end %>
-        </ul>
+        <%= breadcrumbs.map do |crumb|
+             "<a class='crumb' href='#{crumb[:link]}'>#{crumb[:title].downcase}</a>"
+           end.join(" » ") %>
       </div>
-
-      <!-- contact -->
-      <!-- TODO -->
     </div>
-    
+
   </body>
 </html>
diff --git a/lib/crumb.rb b/lib/crumb.rb
index 716d8c3..561a98d 100644
--- a/lib/crumb.rb
+++ b/lib/crumb.rb
@@ -5,7 +5,7 @@ def breadcrumbs
   breadcrumbs_for_identifier(@item.identifier).map do |crumb|
     {
       link: crumb.identifier,
-      title: crumb[:short_title] || crumb[:title] || crumb.name,
+      title: (crumb[:short_title] || crumb[:title] || crumb.name).to_s,
     }
   end
 end