updates to home and nav per issue #9

Gemfile

@@ -12,6 +12,7 @@ gem 'sass-rails', '~> 4.0.0'
 gem 'compass-rails', '~> 2.0.alpha.0'
 gem "susy", "2.0.0.alpha.4"
 gem "breakpoint"
+gem 'font-awesome-sass'
 
 # Use Uglifier as compressor for JavaScript assets
 gem 'uglifier', '>= 1.3.0'

Gemfile.lock

@@ -67,6 +67,8 @@ GEM
     execjs (2.0.2)
     faraday (0.8.8)
       multipart-post (~> 1.2.0)
+    font-awesome-sass (4.0.1)
+      sass-rails (>= 3.1.1)
     fssm (0.2.10)
     hashie (2.0.5)
     hike (1.2.3)
@@ -192,6 +194,7 @@ DEPENDENCIES
   coffee-rails (~> 4.0.0)
   compass-rails (~> 2.0.alpha.0)
   devise (~> 3.1.1)
+  font-awesome-sass
   jbuilder (~> 1.2)
   jquery-rails
   octokit (~> 2.0)

app/assets/stylesheets/application.scss

@@ -1,8 +1,7 @@
-@import url(http://fonts.googleapis.com/css?family=Source+Sans+Pro:400,300|Source+Code+Pro);
-
 @import "compass";
 @import "susy";
 @import "breakpoint";
+@import "font-awesome";
 
 // Utility modules
 @import "modules/all";

app/assets/stylesheets/modules/_typography.scss

@@ -1,4 +1,4 @@
-$font-family-text: "Source Sans Pro","Helvetica Neue",Helvetica,Arial,sans-serif !default;
+$font-family-text: "source-sans-pro","Helvetica Neue",Helvetica,Arial,sans-serif !default;
 $font-family-display: "chaparral-pro",Georgia,"Times New Roman",Times,serif;
-$font-family-code: "Source Code Pro",Monaco,Menlo,Consolas,"Courier New",monospace !default;
+$font-family-code: "source-code-pro",Monaco,Menlo,Consolas,"Courier New",monospace !default;
 $base-font-size: 14px !default;

app/assets/stylesheets/partials/_authors.scss

@@ -72,4 +72,69 @@ table.index#authors {
       color: #666666;
     }
   }
+}
+.actions {width: 100%; float: left; padding-top: 2em;}
+.section {@include clearfix; margin-bottom: 2em; border-bottom: 2px dotted $iron; padding-bottom: 2em; text-align: center;}
+.authors { 
+  width: 60%;
+  margin: 0 auto;
+}
+.author {
+  position: relative;
+  float: left;
+}
+.author-avatar {
+  width: 88px;
+  img {
+    border: 4px solid #f0f0f0;
+    vertical-align: -8%;
+    border-radius: 100%;
+  }
+}
+.author-details {
+  width: 150px;
+  height: auto;
+  line-height: 20px;
+  padding: 10px;
+  margin-left: -64px;
+  color: #719DAB;
+  left: 25%;
+  text-shadow: 1px 1px 1px rgba(0, 0, 0, 0.1);
+  text-align: center;
+  border: 4px solid #fff;
+  background: $white;
+  text-indent: 0px;
+  border-radius: 5px;
+  position: absolute;
+  pointer-events: none;
+  opacity: 0;
+  z-index: 2000;
+  box-shadow: 0px 0px 2px rgba(0,0,0,0.1);
+  -webkit-transition: all 0.3s ease-in-out;
+  -moz-transition: all 0.3s ease-in-out;
+  -o-transition: all 0.3s ease-in-out;
+  -ms-transition: all 0.3s ease-in-out;
+  transition: all 0.3s ease-in-out;
+}
+.author-details:before,
+.author-details:after{
+  content: '';
+  position: absolute;
+  bottom: -15px;
+  left: 50%;
+  margin-left: -9px;
+  width: 0;
+  height: 0;
+  border-left: 10px solid transparent;
+  border-right: 10px solid transparent;
+  border-top: 10px solid rgba(0,0,0,0.1);
+}
+.author-details:after{
+  bottom: -14px;
+  margin-left: -10px;
+  border-top: 10px solid #fff;
+}
+.author:hover .author-details {
+  opacity: 0.9;
+  bottom: 70px;
 }

app/assets/stylesheets/partials/_extensions.scss

@@ -92,4 +92,22 @@ table.index#extensions {
     margin-left: 312px;
     top: 44px;
   }
+}
+
+.extensions {
+  float: left;
+  clear: both;
+  text-align: center;
+}
+
+.extension {
+  border: 1px solid $iron;
+  padding: 2em;
+  float: left;
+  width: 25%;
+  height: 5em;
+  text-align: left;
+  margin-right: 1em;
+  margin-bottom: 1em;
+  &:nth-child(3n+3) {margin-right: 0;}
 }

app/assets/stylesheets/partials/_navigation.scss

@@ -85,6 +85,7 @@
       float:left;
       margin-right:2.12766%;
     };
+    list-style-type: none;
     margin-bottom:0.75em;
     @include breakpoint($large) {
       float:none;
@@ -114,7 +115,7 @@
     display:block;
     background:#ecedef;
     &:hover,&:focus {
-      background:#dadbdf;
+      background:$iron;
       @include breakpoint($large) {
         background:none;
       }
@@ -123,4 +124,4 @@
       background:none;
     }
   }
-}
+}

app/controllers/home_controller.rb

@@ -1,6 +1,6 @@
 class HomeController < ApplicationController
   def index
-    @extensions = Extension.order("created_at DESC").limit(4)
-    @authors = User.authors.order("random()").limit(5)
+    @extensions = Extension.order("created_at DESC").limit(6)
+    @authors = User.authors.order("random()").limit(10)
   end
 end

app/views/extensions/_extension.html.erb

@@ -1,21 +1,18 @@
-<tr>
+<div class="extension">
   <% unless defined? hide_screenshot && hide_screenshot %>
-    <td class="screenshot">
+    <div class="extension-image">
       <%= image_tag extension.screenshot.url(:thumb), :width=>120 %>
-    </td>
+    </div>
+  <% end %>
+  <%= link_to extension.name, extension, :class=>"extension-name"%>
+  <% unless defined? hide_edit && hide_edit %>
+    <%= link_to "Edit", edit_extension_path(extension), :class=>"action" if can_edit?(extension) %>
   <% end %>
-  <td class="info">
-    <div class="name">
-      <%= link_to extension.name, extension %>
-      <% unless defined? hide_edit && hide_edit %>
-        <%= link_to "Edit", edit_extension_path(extension), :class=>"action" if can_edit?(extension) %>
-      <% end %>
+  <div class="extension-text"><%= short_description(extension.description) %></div>
+  <% unless defined? hide_author && hide_author %>
+    <div class="authored">
+      by <%= link_to_author extension.author, :class=>"extension-author" %>
+      <%= @extension.updated_at.to_date.to_s(:long) %>
     </div>
-    <div class="description"><%= short_description(extension.description) %></div>
-    <% unless defined? hide_author && hide_author %>
-      <div class="authored">
-        by <%= link_to_author extension.author %>
-      </div>
-    <% end %>
-  </td>
-</tr>
+  <% end %>
+</div>

app/views/extensions/index.html.erb

@@ -18,10 +18,8 @@
 
 <%= pagination_for @extensions %>
 
-<table id="extensions" class="index" style="clear: both">
-  <tbody>
+  <div class="extensions">
     <%= render partial: "extension", collection: @extensions %>
-  </tbody>
-</table>
+  </div>
 
 <%= pagination_for @extensions %>

app/views/extensions/show.html.erb

@@ -5,6 +5,8 @@
 <%- @h1 = h1 %>
 <%- @selected = :extensions %>
 
+<i class="fa fa-arrow-circle-left"></i> <%= link_to "Back to Browse", extensions_path %>
+
 <h2><%= @h1 || @title %></h2>
 
 <div style="width: 75%">

app/views/home/index.html.erb

@@ -15,53 +15,34 @@
   <% end %>
 <% end %>
 
-<% content_for :hero do %>
-  <div class="hero-lockup">
-    <div class="hero-image">
-      <%=image_tag("illustrations/plug.png", :alt => "Sass Extensions")%>
-      <p class="introduction">
-        Sass extensions for almost every need.
-        Sass is the most mature, stable, and powerful professional grade CSS extension language in the world.
-      </p>
-    </div>
-  </div>
-<% end %>
+<section class="section">
+<h2>Recent Extensions</h2>
 
-<aside class="secondary-info">
-<h3>New Extensions</h3>
-
-<table id="extensions" class="index mini">
-  <tbody>
+  <div class="extensions">
     <%= render :partial => "extensions/extension", :collection => @extensions, :locals => { :hide_author => true } %>
-  </tbody>
-</table>
-
-<%= link_to "More Extensions", extensions_path, :class=>"button" %>
-</aside>
+  </div>
 
-<aside class="secondary-info">
-  <h3>Extension Authors</h3>
-
-  <table id="authors" class="index mini" border="0" cellpadding="0" cellspacing="0">
-    <tbody>
-      <% for author in @authors %>
-        <tr>
-          <td class="avatar"><%= image_tag gravatar_url(author.email), :width=>64, :height=>64, :alt=>"" %></td>
-          <td class="info">
-            <div class="name">
-              <%= link_to_author author %>
-              <% unless defined? hide_edit && hide_edit %>
-                <%= link_to "Edit", edit_author_path(author), :class=>"action" if can_edit?(author) %>
-              <% end %>
-            </div>
-            <div class="extensions_count">
-              <%= pluralize(author.extensions_count, "extension") %>
-            </div>
-          </td>
-        </tr>
-      <% end %>
-    </tbody>
-  </table>
+  <div class="actions">
+    <i class="fa fa-arrow-circle-right"></i> <%= link_to "Browse all Extensions", extensions_path %>
+    <i class="fa fa-plus-circle"></i> <%= link_to "Add your extensions", import_extension_path %>
+  </div>
+</section>
+
+<section class="section">
+  <h2>Extension Authors</h2>
+  <div class="authors">
+    <% for author in @authors %>
+      <div class="author">
+        <div class="author-avatar"><%= link_to(image_tag gravatar_url(author.email), :width=>64, :height=>64, :alt=>"")%></div>
+        <div class="author-details">
+          <%= link_to_author author %><br/>
+          <%= pluralize(author.extensions_count, "extension") %>
+        </div>
+      </div>
+    <% end %>
+  </div>
 
-  <%= link_to "More Authors", authors_path, :class=>"button" %>
-</aside>
+  <div class="actions">
+    <p><i class="fa fa-arrow-circle-right"></i> <%= link_to "Browse all Extension Authors", authors_path %></p>
+  </div>
+</section>

app/views/layouts/application.html.erb

@@ -1,6 +1,7 @@
 <!DOCTYPE html>
 <html>
 <head>
+  <%= favicon_link_tag 'favicon.ico' %>
   <title><%= @title %></title>
   <%= stylesheet_link_tag    "application", media: "all", "data-turbolinks-track" => true %>
   <%= javascript_include_tag "application", "data-turbolinks-track" => true %>