info now comes from above; slightly fixed typography on single post view

app/assets/stylesheets/new_styles/_base.scss

@@ -168,6 +168,11 @@ article { //mood posts
 
   img {
     max-height: 70%;
+    border : 10px solid #fff;
+  }
+
+  .photo_viewer {
+    margin-bottom : 20px;
   }
 
   @include centered-frame();

app/assets/stylesheets/new_styles/_canvas.scss

@@ -46,7 +46,7 @@ body {
       @include box-shadow(0,1px,5px,rgba(0,0,0,0.5));
 
       .info {
-        bottom : 0;
+        top : 0;
       }
 
       cursor : pointer;
@@ -139,23 +139,23 @@ body {
     }
   }
 
-
   .info {
-    @include transition(bottom);
-    @include box-shadow(0,-1px,3px,rgba(0,0,0,0.3));
+    @include transition(top);
+    @include box-shadow(0,1px,3px,rgba(0,0,0,0.3));
+    @include opacity(0.8);
 
-    background-color : #fff;
+    background-color : rgba(255,255,255,0.8);
+    border-bottom : 1px solid #fff;
 
     position : absolute;
-    bottom : -30px;
+    top : -30px;
     right : 0;
     text-align : center;
     width : 100%;
 
     z-index : 30;
 
-    padding : 5px;
-    padding-right : 8px;
+    padding : 5px 0;
     i {
       margin-left:  3px;
     }
@@ -175,7 +175,6 @@ body {
     color : #000;
 
     text-shadow : 0 2px 0 rgba(#fff,0.6), 0 -1px 2px rgba(#555, 0.1);
-    font-weight : bold;
     font-size : 1.5em;
     line-height : 1.2em;
 
@@ -218,6 +217,7 @@ body {
         font-family : "Noteworthy", "Marker Felt", "Comic Sans";
         font-style : italic;
         text-align : center;
+        font-weight : bold;
         padding: 0 20px;
       }
     }
@@ -243,7 +243,7 @@ body {
       color : #222;
 
       p {
-        text-shadow : 0 1px 0 #ccc;
+        text-shadow : none;
 
         font-family : Palatino, Georgia, Times, serif;
         font-weight : normal;
@@ -254,10 +254,20 @@ body {
     }
   }
 
+  &:no-text {
+    img {
+      border : none;
+    }
+  }
+
   &.day:not(.sticky-note),
   &.has-text:not(.sticky-note):not(.wallpaper),
   &.night:not(.sticky-note),
   &.multi-photo:not(.sticky-note) {
+    img {
+      border-bottom : 1px solid #ddd;
+    }
+
     .text-content {
       padding : 10px 20px;
       font-size : 14px;
@@ -313,7 +323,6 @@ body {
       color: white;
       @include opacity(1);
       text-shadow : none;
-      font-weight: bold;
     }
   }
 }

app/assets/stylesheets/new_styles/_typography.scss

@@ -1,7 +1,7 @@
 /* Roboto */
 @font-face {
   font-family : Roboto;
-  src : image_url('fonts/Roboto-Regular.ttf')
+  src : image-url('fonts/Roboto-Regular.ttf')
 }
 
 body, p, h1, h2, h3, h4, h5, h6, textarea, input, * {

app/assets/templates/mood.jst.hbs

@@ -1,5 +1,5 @@
 <div class="container">
-    <header>{{{headline}}}</header>
     <section class="photo_viewer"></section>
+    <header>{{{headline}}}</header>
     <section class="body">{{{body}}}</section>
 </div>