more shuffling

app/views/dashboard/index.html.haml

@@ -6,24 +6,36 @@
 /= link_to "glimpse", "#"
 /of what all your friends are doing.
 
-.span-16.append-2.last
+.span-15.append-2.last
+
+  %div.small_text
+    what's crackalackin', daniel?
+  %div#publish
+    - form_for 'StatusMessage' do |f|
+      = f.text_field :thought
 
   %div.big_text
     recent activity
+    %div.filters
+      = link_to "displaying all", "#"
 
-  /%div#publish
-  /- form_for 'StatusMessage' do |f|
-  /= f.text_field :thought
 
   %ul#stream
     - for post in @posts
       = render "status_messages/pane", :post => post
 
-.span-6.last
-  %div.big_text
-    requests
+.span-7.last
 
-  %div.big_text
-    %div.big_number= link_to "30", "#"
-    new requests
+  %div.info_pane
+    %img{:src => "/images/mocks/bp.jpeg", :width => '100%', :class => "profile_image"}
+    %div.big_text
+      daniel grippi
+
+  %div.info_pane
+    %div.big_text
+      requests
+
+    %div.big_text
+      %div.big_number= link_to "30", "#"
+      new requests
 

app/views/devise/sessions/new.html.haml

-%h2 Sign in
-= form_for(resource, :as => resource_name, :url => session_path(resource_name)) do |f|
-  %p
-    = f.label :email
-    %br/
+%div.centered
+  %div.big_text
+    sign in
+
+  = form_for(resource, :as => resource_name, :url => session_path(resource_name)) do |f|
     = f.text_field :email
-  %p
-    = f.label :password
-    %br/
+    %br
     = f.password_field :password
-  - if devise_mapping.rememberable?
     %p
-      = f.check_box :remember_me
-      = f.label :remember_me
-  %p= f.submit "Sign in"
-= render :partial => "devise/shared/links"
+      - if devise_mapping.rememberable?
+        = f.check_box :remember_me
+        = f.label :remember_me
+        %br
+      = f.submit "Sign in"
+  = render :partial => "devise/shared/links"

app/views/layouts/application.html.haml

@@ -19,7 +19,7 @@
       .container
         #huge_star *
         %a#diaspora_text{:href => root_path}
-          /%img{:src => '/images/diaspora_white.png'}
+          %img{:src => '/images/diaspora_white.png'}
 
         #session_action
           - if user_signed_in?
@@ -29,12 +29,9 @@
             
     #header_below
       .container
-        %div.big_text#info_top
-          daniel grippi posted a new update
-          %p.description
-            let's take this into overdrive.
         %ul.nav
           %li= link_to "home", root_path
+          %li= link_to "status messages", status_messages_path 
           %li= link_to "friends", friends_path
 
     .container

app/views/status_messages/_pane.html.haml

 %li
-  .span-2.last
-    %img{:src => "/images/mocks/user_pic.jpeg", :height => "35px", :class => "avatar"}
-  .span-13.last
-    %sp.message
-      %sp.from= post.owner
-      = post.message
-      %br
-      %sp.time= "#{time_ago_in_words(post.updated_at)} ago"
+  %img{:src => "/images/mocks/user_pic.jpeg", :class => "avatar"}
+  %sp.message
+    %sp.from= link_to post.owner, "#"
+    /%sp.from Daniel Grippi
+    = post.message
+    %br
+    %sp.time= "#{time_ago_in_words(post.updated_at)} ago"
 

public/stylesheets/application.css

@@ -3,8 +3,7 @@ body {
 
 a {
   color: #cc1e14;
-  text-decoration: none;
-  border-bottom: dotted 1px #999999; }
+  text-decoration: none; }
 
 h1,
 h2,
@@ -56,15 +55,18 @@ h4 {
   color: white;
   font-size: 110%;
   background-color: #1a1a21;
-  border-bottom: 1px solid white;
+  border-bottom: 2px solid white;
   padding-top: 5px; }
   #header #huge_star {
+    display: none;
     position: absolute;
     font-family: "helvetica neue", "helvetica", "arial", "sans-serif";
     font-size: 60px;
     top: -15px; }
   #header #diaspora_text {
-    border: none; }
+    position: absolute;
+    border: none;
+    top: 8px; }
   #header #session_action {
     float: right;
     font-size: 110%;
@@ -76,20 +78,22 @@ h4 {
         color: white; }
 
 ul.nav {
+  position: absolute;
   padding: 0;
   margin: 0;
   font-size: 130%;
-  position: absolute;
-  margin-top: -62px; }
+  bottom: 2px; }
   ul.nav li {
     display: inline;
-    margin-right: 1em;
+    margin-right: 0.5em;
     padding: 5px 10px;
     background: #f2f8fc;
     border: 1px solid white;
     border-bottom: none; }
   ul.nav li:first-child {
     background: white; }
+    ul.nav li:first-child a {
+      color: #1a1a21; }
   ul.nav li:last-child {
     margin: 0; }
   ul.nav a {
@@ -99,8 +103,11 @@ ul.nav {
       color: #cccccc; }
 
 #header_below {
+  position: relative;
   background-color: #e6eff7;
-  text-align: right; }
+  text-align: right;
+  height: 70px;
+  margin-bottom: 40px; }
 
 #left_pane {
   background-color: #e6eff7;
@@ -113,26 +120,32 @@ ul#stream {
   color: #666666; }
   ul#stream > li {
     list-style: none;
-    padding: 2em;
-    -webkit-box-shadow: 0 4px 5px -5px #999999;
-    min-height: 40px; }
+    padding: 1em;
+    border-bottom: 1px solid #f1f1f1; }
     ul#stream > li img.avatar {
-      background: white;
-      padding: 2px;
-      border: 1px solid #eaeaea;
-      border-radius: 3px; }
+      width: 45px;
+      background: white; }
 
 sp.message {
+  position: absolute;
+  float: left;
+  margin-left: 10px;
+  margin-top: -2px;
+  line-height: 17px;
   font-size: 120%;
-  color: #999999;
-  text-shadow: none; }
+  font-family: "Lucida Grande";
+  color: #666666;
+  text-shadow: none;
+  width: 480px; }
   sp.message sp.from {
-    color: black; }
+    color: black;
+    font-weight: bold; }
   sp.message sp.time {
-    color: #cccccc;
-    font-size: 80%; }
+    color: #bababa;
+    font-size: 70%; }
 
 div.big_text {
+  position: relative;
   font-size: 24px;
   font-weight: bold;
   line-height: 36px; }
@@ -142,20 +155,42 @@ div.big_text {
   div.big_text .big_number {
     font-size: 300%;
     line-height: 100%; }
-    div.big_text .big_number a {
-      border: none; }
+  div.big_text .filters {
+    position: absolute;
+    right: 0;
+    display: inline;
+    font-size: 12px;
+    font-weight: normal; }
+
+div.small_text {
+  position: relative;
+  font-size: 18px;
+  font-weight: bold; }
 
 #publish input {
   font-size: 30px;
   padding: 7px;
   border-radius: 5px;
-  width: 90%; }
+  width: 100%;
+  margin-bottom: 1em; }
 
 #profile_image {
+  display: inline block;
   margin-top: 0;
   width: 100px;
   border: 2px solid #eaeaea; }
 
-.yellow {
-  background: #fffdb8;
-  border: 1px solid #e3e08d; }
+form {
+  font-size: 130%; }
+  form input {
+    font-size: 150%;
+    padding: 0.2em; }
+
+.centered {
+  text-align: center; }
+
+.info_pane {
+  padding: 1em;
+  background-color: #1a1a21;
+  color: #f5fafd;
+  margin-bottom: 1em; }

public/stylesheets/sass/application.sass

@@ -6,8 +6,6 @@ a
   :color #CC1E14
   :text
     :decoration none
-  :border
-    :bottom dotted 1px #999
 
 h1,
 h2,
@@ -65,12 +63,13 @@ h4
   :background
     :color #1A1A21
   :border
-    :bottom 1px solid #fff
+    :bottom 2px solid #fff
   :padding
     :top 5px
 
 
   #huge_star
+    :display none
     :position absolute
     :font
       :family 'helvetica neue', 'helvetica', 'arial', 'sans-serif'
@@ -80,7 +79,9 @@ h4
     :top -15px
 
   #diaspora_text
+    :position absolute
     :border none
+    :top 8px
     
 
   #session_action
@@ -95,17 +96,17 @@ h4
 
 
 ul.nav
+  :position absolute
   :padding 0
   :margin 0
   :font
     :size 130%
-  :position absolute
-  :margin-top -62px
+  :bottom 2px
 
   li
     :display inline
     :margin
-      :right 1em
+      :right 0.5em
     :padding 5px 10px
     :background #F2F8FC
     :border 1px solid #fff
@@ -113,6 +114,8 @@ ul.nav
 
   li:first-child
     :background #fff
+    a
+      :color #1A1A21
 
   li:last-child
     :margin 0
@@ -125,13 +128,15 @@ ul.nav
       :color #ccc
 
 
-
-
-
 #header_below
+  :position relative
   :background
     :color #e6eff7
   :text-align right
+  :height 70px
+  :margin
+    :bottom 40px
+    
 
 #left_pane
   :background
@@ -146,32 +151,42 @@ ul#stream
   :color #666
   > li
     :list-style none
-    :padding 2em
-    :-webkit-box-shadow 0 4px 5px -5px #999
-    :min-height 40px
+    :padding 1em
+    //:-webkit-box-shadow 0 4px 5px -5px #999
+    :border
+      :bottom 1px solid #f1f1f1
 
     img.avatar
+      :width 45px
       background: #fff
-      padding: 2px
-      :border 1px solid #eaeaea
-      :border-radius 3px
 
 
 sp.message
+  :position absolute
+  :float left
+  :margin
+    :left 10px
+    :top -2px
+  :line-height 17px
   :font
     :size 120%
-  :color #999
+    :family 'Lucida Grande'
+  :color #666
   :text-shadow none
+  :width 480px 
 
   sp.from
     :color #000
+    :font
+      :weight bold
 
   sp.time
-    :color #ccc
-    :font-size 80%
+    :color #bababa
+    :font-size 70%
 
 
 div.big_text
+  :position relative
   :font
     :size 24px
     :weight bold
@@ -186,8 +201,21 @@ div.big_text
     :font
       :size 300%
     :line-height 100%
-    a
-      :border none
+
+  .filters
+    :position absolute
+    :right 0
+    :display inline
+    :font
+      :size 12px
+      :weight normal
+
+div.small_text
+  :position relative
+  :font
+    :size 18px 
+    :weight bold
+
   
 
 #publish
@@ -196,16 +224,35 @@ div.big_text
       :size 30px
     :padding 7px
     :border-radius 5px
-    :width 90%
+    :width 100%
+    :margin
+      :bottom 1em
 
 
 #profile_image
+  :display inline block
   :margin
     :top 0
   :width 100px
-
   :border 2px solid #eaeaea
 
-.yellow
-  :background #FFFDB8
-  :border 1px solid #E3E08D
+
+form
+  :font
+    :size 130%
+
+  input
+    :font
+      :size 150%
+    :padding 0.2em
+
+.centered
+  :text-align center
+
+.info_pane
+  :padding 1em
+  :background
+    :color #1A1A21
+  :color #f5fafd
+  :margin
+    :bottom 1em