top nav for groups partially there.

app/views/layouts/application.html.haml

@@ -42,6 +42,28 @@
           - else
             = link_to "login", new_user_session_path
 
+        #group
+          %ul
+            %li.selected ACM
+            %li FAMILY
+            %li WORK
+            %li HIGH SCHOOL
+          #user_pictures
+            = link_to(person_image_tag(current_user), root_path)
+            = link_to(person_image_tag(current_user), root_path)
+            = link_to(person_image_tag(current_user), root_path)
+            = link_to(person_image_tag(current_user), root_path)
+            = link_to(person_image_tag(current_user), root_path)
+            = link_to(person_image_tag(current_user), root_path)
+            = link_to(person_image_tag(current_user), root_path)
+            = link_to(person_image_tag(current_user), root_path)
+            = link_to(person_image_tag(current_user), root_path)
+            = link_to(person_image_tag(current_user), root_path)
+            = link_to(person_image_tag(current_user), root_path)
+            = link_to(person_image_tag(current_user), root_path)
+            - for friend in @friends
+              = person_image_link(friend)
+
     .container
       - if user_signed_in?
         #user_name
@@ -63,12 +85,9 @@
 
     .container
       .span-24.last
-        .span-20.append-1.last
 
-          = yield
+        = yield
 
-        .span-3.last
-          = render 'people/sidebar' if user_signed_in?
 
-        .span-24.last
-          = render "posts/debug"
+      .span-24.last
+        = render "posts/debug"

public/stylesheets/application.css

@@ -67,24 +67,24 @@ header {
     margin-bottom: 30px;
   color: #555555;
   background-color: #2b2726;
+  background-color: black;
   border-bottom: 3px solid #333333;
   padding: 6px 0;
     padding-top: 0; }
   header #diaspora_text {
+    margin-bottom: 1em;
     font-family: "BrandonGrotesqueLightRegular";
-    font-size: 24px;
-    position: absolute;
+    font-size: 16px;
     border: none;
     color: white;
     text-shadow: 0 2px 0 black; }
     header #diaspora_text a {
       color: #666666; }
     header #diaspora_text span.sub_text {
-      color: black;
       text-shadow: none; }
   header #session_action {
     float: right;
-    margin-top: 9px;
+    top: 0;
     text-shadow: 0 1px 0 black;
     padding-right: 10px; }
     header #session_action a {
@@ -412,3 +412,19 @@ h1.big_text {
 
 .image_cycle img {
   display: none; }
+
+#group {
+  color: #333333; }
+  #group ul {
+    font-size: 18px;
+    margin: 0;
+    padding: 0; }
+    #group ul > li {
+      display: inline;
+      margin-right: 10px; }
+      #group ul > li.selected {
+        color: white;
+        font-weight: bold; }
+  #group #user_pictures img {
+    display: inline-block;
+    height: 40px; }

public/stylesheets/sass/application.sass

@@ -72,16 +72,18 @@ header
   :color #555
   :background
     :color #2B2726
+    :color #000
   :border
     :bottom 3px solid #333
   :padding 6px 0
     :top 0
 
   #diaspora_text
+    :margin
+      :bottom 1em
     :font
       :family 'BrandonGrotesqueLightRegular'
-      :size 24px
-    :position absolute
+      :size 16px
     :border none
     :color #fff
     :text
@@ -90,14 +92,12 @@ header
       :color #666
 
     span.sub_text
-      :color #000
       :text
         :shadow none
       
   #session_action
     :float right
-    :margin
-      :top 9px
+    :top 0
     :text-shadow 0 1px 0 #000
     a
       :color #777
@@ -513,3 +513,23 @@ h1.big_text
 .image_cycle
   img
     :display none
+
+#group
+  :color #333
+  ul
+    :font-size 18px
+    :margin 0
+    :padding 0
+    > li
+      :display inline
+      :margin
+        :right 10px
+      
+      &.selected
+        :color #fff
+        :font-weight bold
+
+  #user_pictures
+    img
+      :display inline-block
+      :height 40px