Make the UI usable and polish up some stuff

app/assets/javascripts/feeds.js.coffee

@@ -1,11 +1,15 @@
 $(document).ready ->
   $("#feed_list > li > a").on("ajax:success", (event, data) ->
     $("#feed_content").html(data)
+    false
 
   )
   $("#feed_content").on("ajax:success", ".item > a", (event, data) ->
     item = $(this).parent()
     $("article", item).html(data)
+      .addClass("expanded")
+      .append($('<br class="clearing">'))
     $("a", item).live()
+    false
   )
 

app/assets/stylesheets/application.css

@@ -9,5 +9,6 @@
  * compiled file, but it's generally better to create a new file per style scope.
  *
  *= require_self
+ *= require config
  *= require_tree .
 */

app/assets/stylesheets/config.css.scss

@@ -0,0 +1,7 @@
+
+// http://www.colourlovers.com/palette/126030/Cruel_Water_at_Night
+$main_color1: #030C22;
+$main_color2: #20293F;
+$main_color3: #404749;
+$main_color4: #A9B0B3;
+

app/assets/stylesheets/items.css.scss

@@ -1,3 +1,24 @@
-// Place all the styles related to the items controller here.
+@import "config";
-// They will automatically be included in application.css.
+
-// You can use Sass (SCSS) here: http://sass-lang.com/
+li.item {
+  overflow: auto;
+
+  em.date_published, em.author {
+    font-size: 0.8em;
+  }
+
+  em.author {
+    font-weight: bold;
+  }
+
+  article {
+    // TODO: Some more default stuff for incomming HTML
+    p {
+      margin: 0;
+      padding: 0;
+    }
+  }
+  article.expanded {
+    padding: 10px 5px 10px 20px;
+  }
+}

app/assets/stylesheets/layout.css.scss

@@ -0,0 +1,27 @@
+@import "config";
+
+aside {
+  width: 250px;
+  float: left;
+
+  ul {
+    list-style-type: none;
+    padding: 0 5px;
+    //background-color: $main_color4;
+  }
+}
+
+section#feed_content {
+  float: left;
+  max-width: 750px;
+
+  ul {
+    list-style-type: none;
+    padding: 0 10px;
+  }
+}
+
+.clearing {
+  clear: both;
+}
+

app/views/feeds/index.html.erb

@@ -7,5 +7,6 @@
   <%= render :partial => "navigation" %>
 </aside>
 
-<div id="feed_content">
+<section id="feed_content">
-</div>
+</section>
+

app/views/feeds/show.html.erb

@@ -2,7 +2,7 @@
 <% @items.each do |item| %>
 <li class="item">
   <%= link_to raw(item.title), item_path(item), :remote => true %>
-  <span class="data_published"><%= time_ago_in_words(item.published_at) %></span> <span class="author">by <%= item.author %></span>
+  <em class="date_published"><%= time_ago_in_words(item.published_at) %></em> <em class="author">by <%= item.author %></em>
   <article></article>
 </li>
 <% end %>