more fiddling with box model; added arrows

app/views/posts/show.html.haml

@@ -5,12 +5,11 @@
 - content_for :page_title do
   = post_page_title @post
 
+#post-author-header
+  = person_image_tag @post.author
+  = @post.author.name
 
-#main_stream
-%br
-%br
-%br
+#post-content
 
-#post-nav
-  = link_to 'prev', post_path(@post.id-1)
-  = link_to 'next', post_path(@post.id+1)
+= link_to image_tag('arrow-left.png'), post_path(@post.id-1), :class => 'nav-arrow left'
+= link_to image_tag('arrow-right.png'), post_path(@post.id+1), :class => 'nav-arrow right'

public/javascripts/app/router.js

@@ -47,7 +47,7 @@ app.Router = Backbone.Router.extend({
         templateName : templateName
       }).render();
 
-      $("#main_stream").html(view.el);
+      $("#post-content").html(view.el);
     }})
   }
 });

public/javascripts/app/templates/note.handlebars

@@ -1,3 +1,10 @@
-<div class="note">
-  {{text}}
+<div class="note offset5">
+  <h1>
+    A HEADING
+  </h1>
+  <br/>
+  <br/>
+  <p>
+    {{text}}
+  </p>
 </div>

public/javascripts/app/templates/status.handlebars

@@ -1,4 +1,4 @@
-<div class="status">
+<div class="status backdrop">
   <h1>
     {{text}}
   </h1>

public/stylesheets/sass/new-templates.scss

@@ -2,19 +2,19 @@
 
 
 /* mixins */
-@mixin center() {
+@mixin center($orient:vertical) {
   display: -webkit-box;
-  -webkit-box-orient: horizontal;
+  -webkit-box-orient: $orient;
   -webkit-box-pack: center;
   -webkit-box-align: center;
 
   display: -moz-box;
-  -moz-box-orient: horizontal;
+  -moz-box-orient: $orient;
   -moz-box-pack: center;
   -moz-box-align: center;
 
   display: box;
-  box-orient: horizontal;
+  box-orient: $orient;
   box-pack: center;
   box-align: center;
 }
@@ -37,9 +37,9 @@
 
 .multi-photo {
   .img-bounding-box {
-    @include center();
+    @include center(horizontal);
 
-    margin-left: 10px;
+    margin: 20px;
     height: 500px;
     width: 400px;
   }
@@ -53,7 +53,12 @@
 }
 
 .note {
-  width: 500px;
+  width: 550px;
+
+  p {
+    font-size: 20px;
+    line-height: 28px;
+  }
 }
 
 .status {
@@ -77,7 +82,7 @@
   left: 0;
   height: 100%;
   width: 100%;
-  background-color: rgba(0,0,0,0.3);
+  background-color: rgba(0,0,0,0.5);
 }
 
 .backdrop,
@@ -85,7 +90,7 @@
   @include center();
   @include background-cover();
 
-  position: fixed;
+  position: absolute;
 
   top: 0;
   left: 0;
@@ -97,7 +102,7 @@
 .photo-backdrop {
   h1 {
     color: #fff;
-    z-index: 100;
+    z-index: 2;
   }
 }
 
@@ -118,16 +123,38 @@
   }
 }
 
-/* temp */
-#post-nav {
+.nav-arrow {
+  -o-transition: opacity 0.3s;
+  -moz-transition: opacity 0.3s;
+  -webkit-transition: opacity 0.3s;
+  transition: opacity 0.3s;
+
   position: fixed;
-  bottom: 10px;
-  height: 50px;
+  z-index: 3;
+  opacity: 0.2;
 
-  z-index: 100;
-  background: rgba(255,255,255,0.8);
+  top: 45%;
 
-  a {
-    padding: 30px;
+  &.left { left: 0; }
+  &.right { right: 0; }
+
+  &:hover {
+    opacity: 0.6;
+  }
+}
+
+#post-author-header {
+  top: 20px;
+  left: 20px;
+  position: fixed;
+  z-index: 10;
+  font-size: 18px;
+  font-weight: bold;
+
+  img {
+    height: 50px;
+    width: 50px;
+    float: left;
+    margin-right: 10px;
   }
 }