nav should be collapsed into a filter list. comments are more clear.

app/views/comments/_comment.html.haml

 %li.comment
-  = comment.text
-  \---
-  = comment.person.real_name
\ No newline at end of file
+  %span.from
+    = link_to_person comment.person
+    = comment.text
+  %div.time
+    = "#{time_ago_in_words(comment.updated_at)} ago"

app/views/layouts/application.html.haml

@@ -24,9 +24,7 @@
 
     -  if user_signed_in?
       :javascript
-          $(document).ready(function(){
-          
-          
+        $(document).ready(function(){
           
           function debug(str){ $("#debug").append("<p>" +  str); };
 
@@ -41,7 +39,15 @@
           ws.onopen = function() {
           debug("connected...");
           };
+
+
+          $('#show_filters').hover( function() {
+            $("#stream_filters").fadeIn(80);
+          },
+          function() {
+            $("#stream_filters").fadeOut(100);
           });
+        });
   %body
   
     - flash.each do |name, msg|
@@ -60,15 +66,17 @@
           = link_to "login", new_user_session_path
           
     #header_below
-      
       - if user_signed_in?
         %h1#user_name
           = link_to User.first.real_name, root_url
           %span.description
             = my_latest_message
 
-        %nav
-          %ul.nav
+    #content
+      #main
+        #show_filters
+          = link_to "show all", "#"
+          %ul#stream_filters
             %a{ :href => root_path, :title => "Your network stream."}
               %li home
             %a{ :href => status_messages_path, :title => "Recent status messages."}
@@ -79,10 +87,6 @@
               %li blogs
             %a{ :href => friends_path, :title => "Your list of connections with other seeds."}
               %li friends
-
-
-    #content
-      #main
         = yield
         = render "posts/debug"
       #friends_list

app/views/status_messages/_status_message.html.haml

@@ -5,10 +5,10 @@
   %div.time
     = link_to "#{time_ago_in_words(post.updated_at)} ago", status_message_path(post)
   %div.comments
-    = render "comments/new_comment", :post => post
     %ul.comment_set
       - for comment in post.comments
         = render "comments/comment", :comment => comment
+      = render "comments/new_comment", :post => post
     
   - if mine?(post)
     = link_to 'Destroy', status_message_path(post), :confirm => 'Are you sure?', :method => :delete

public/stylesheets/application.css

@@ -79,26 +79,34 @@ header {
       color: #cccccc;
       border: none; }
 
-ul.nav {
+#show_filters {
+  z-index: 100;
   position: absolute;
+  left: 630px;
+  text-align: right; }
+
+#show_filters > a {
+  border: 1px solid #666666;
+  padding: 5px; }
+
+ul#stream_filters {
+  display: none;
   padding: 0;
   margin: 0;
-  width: 200px;
-  top: 100px;
-  font-size: 130%; }
-  ul.nav li {
+  background: white; }
+  ul#stream_filters li {
     display: block;
-    padding: 5px 10px;
-    background-color: #f2f8fc;
-    border: 1px solid white; }
-    ul.nav li:first-child {
+    padding: 5px 0; }
+    ul#stream_filters li:first-child {
       border-top-right-radius: 5px;
       border-top-left-radius: 5px; }
-    ul.nav li:last-child {
+    ul#stream_filters li:last-child {
       border-bottom-right-radius: 5px;
       border-bottom-left-radius: 5px; }
-  ul.nav a {
+  ul#stream_filters a {
     color: #b1cfe3; }
+  ul#stream_filters a:hover {
+    color: black; }
 
 #header_below {
   z-index: 5;
@@ -117,11 +125,11 @@ ul.nav {
 
 #content {
   position: absolute;
-  left: 250px;
   top: 94px;
-  width: 60%;
-  min-width: 500px;
-  max-width: 700px; }
+  width: 1000px; }
+
+#main {
+  width: 700px; }
 
 ul#stream {
   margin: 0;
@@ -146,9 +154,6 @@ li.message {
     color: #bababa;
     font-size: 70%; }
 
-.mine {
-  background-color: rgba(202, 237, 204, 0.5); }
-
 h1 {
   position: relative;
   font-size: 24px;
@@ -177,14 +182,9 @@ h3 {
   width: 100%;
   margin-bottom: 1em; }
 
-#main {
-  width: 70%;
-  min-width: 400px;
-  max-width: 700px;
-  float: left; }
-
 #friends_list {
-  float: right;
+  position: absolute;
+  left: 600px;
   width: 20%;
   min-width: 130px;
   padding-left: 10%; }
@@ -204,3 +204,27 @@ form {
     color: black; }
     #user_name a:hover {
       color: #cc1e14; }
+
+#comment_text {
+  font-size: 75%;
+  padding: 3px; }
+
+ul.comment_set {
+  margin: 0;
+    margin-top: 1em;
+  padding: 0;
+    padding-left: 1em;
+  list-style: none;
+  font-size: 80%;
+  width: 90%; }
+  ul.comment_set li.comment {
+    margin-bottom: 0.5em;
+    background-color: rgba(230, 239, 247, 0.4);
+    padding: 0.6em;
+    border-radius: 5px; }
+    ul.comment_set li.comment .from {
+      color: #666666;
+      font-weight: normal; }
+      ul.comment_set li.comment .from a {
+        color: #333333;
+        font-weight: bold; }

public/stylesheets/sass/application.sass

@@ -10,6 +10,8 @@ a
   &:hover
     :color #CC1E14
 
+
+
 #flash_notice,
 #flash_error,
 #flash_alert
@@ -92,34 +94,34 @@ header
       :color #ccc
       :border none
 
-
-ul.nav
+#show_filters
+  :z-index 100
   :position absolute
+  :left 630px
+  :text-align right
+
+#show_filters > a
+  :border 1px solid #666
+  :padding 5px
+
+ul#stream_filters
+  :display none
   :padding 0
   :margin 0
-  :width 200px
-  :top 100px
-  :font
-    :size 130%
-
   li
     :display block
-    :padding 5px 10px
-    :background 
-      :color #F2F8FC
-    :border 1px solid #fff
-  
-
+    :padding 5px 0
     &:first-child
       :border-top-right-radius 5px
       :border-top-left-radius 5px
-
     &:last-child
       :border-bottom-right-radius 5px
       :border-bottom-left-radius 5px
-
   a
     :color #B1CFE3
+  a:hover
+    :color #000
+  :background #fff
 
 #header_below
   :z-index 5 
@@ -140,11 +142,11 @@ ul.nav
 
 #content  
   :position absolute
-  :left 250px
   :top 94px
-  :width 60%
-  :min-width 500px
-  :max-width 700px
+  :width 1000px
+
+#main
+  :width 700px
 
 ul#stream
   :margin 0
@@ -177,7 +179,7 @@ li.message
     :color #bababa
     :font-size 70%
 .mine
-  :background-color rgba(202, 237, 204, 0.5)
+  //:background-color rgba(202, 237, 204, 0.5)
 
 h1
   :position relative
@@ -215,14 +217,9 @@ h3
     :margin
       :bottom 1em
       
-#main
-  :width 70%
-  :min-width 400px
-  :max-width 700px
-  :float left
-  
 #friends_list
-  :float right
+  :position absolute
+  :left 600px
   :width 20%
   :min-width 130px
   :padding-left 10%
@@ -247,3 +244,36 @@ form
   :background
     :color rgba( 255, 255, 255, 0.5)
     
+#comment_text
+  :font
+    :size 75%
+  :padding 3px
+
+ul.comment_set
+  :margin 0
+    :top 1em
+  :padding 0
+    :left 1em
+  :list-style none
+  :font
+    :size 80%
+  :width 90%
+
+  li.comment
+    :margin
+      :bottom 0.5em
+    :background
+      :color rgba( 230, 239, 247, 0.4)
+    :padding 0.6em
+    :border-radius 5px
+
+    .from
+      :color #666
+      :font
+        :weight normal
+      a
+        :color #333
+        :font
+          :weight bold
+
+