post viewer styling cleanup

public/javascripts/app/helpers/text_formatter.js

@@ -3,11 +3,11 @@
     var text = model.get("text");
     var mentions = model.get("mentioned_people");
 
-    return $(textFormatter.mentionify(
+    return textFormatter.mentionify(
       textFormatter.hashtagify(
         textFormatter.markdownify(text)
         ), mentions
-      )).html()
+      )
   };
 
   textFormatter.markdownify = function markdownify(text){

public/javascripts/app/templates/post-viewer/content/multi-photo.handlebars

@@ -1,6 +1,4 @@
-<h3>
 {{{text}}}
-</h3>
 
 <div class="photoset">
   {{#each photos}}

public/javascripts/app/templates/post-viewer/content/note.handlebars

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

public/javascripts/app/templates/post-viewer/content/photo-backdrop.handlebars

@@ -1,4 +1,4 @@
 {{#each photos}}
-  <div class="photo-fill" style="background-image: url({{sizes.large}})">
+  <div class="photo-fill" style="background-image: url({{sizes.large}})"> </div>
-  </div>
+  <img src="{{sizes.large}}" />
 {{/each}}

public/javascripts/app/templates/post-viewer/content/rich-media.handlebars

@@ -5,7 +5,5 @@
   <br>
   <br>
 
-  <h3>
   {{{text}}}
-  </h3>
 </div>

public/javascripts/app/templates/post-viewer/content/status-with-photo-backdrop.handlebars

@@ -2,9 +2,7 @@
   <div class="photo-fill" style="background-image: url({{sizes.large}})">
     <div class="darken">
       <div class="darken-content">
-        <h1>
         {{{../text}}}
-        </h1>
       </div>
     </div>
   </div>

public/javascripts/app/templates/post-viewer/content/status.handlebars

@@ -1,3 +1 @@
-<h1>
 {{{text}}}
-</h1>

public/stylesheets/sass/new-templates.scss

@@ -87,6 +87,10 @@ $pane-width: 420px;
   background-image: url("../images/hatched-bg-dark.png");
 }
 
+@mixin photo-shadow() {
+  @include box-shadow(0, 3px, 15px, #999);
+}
+
 /* keyframes */
 
 @-webkit-keyframes bump-left {
@@ -153,7 +157,7 @@ $pane-width: 420px;
   }
 
   img {
-    @include box-shadow(0, 3px, 15px, #999);
+    @include photo-shadow();
 
     max-width: 100%;
     max-height: 100%;
@@ -175,26 +179,40 @@ $pane-width: 420px;
   p {
     font-size: 20px;
     line-height: 28px;
-  }
+    font-family: georgia, times, serif;
-
-  h1 {
-    margin-bottom: 1em;
   }
 }
 
 .status,
 .status-with-photo-backdrop
 {
-  h1 {
+  p {
     font-weight: bold;
     font-size: 40px;
+    line-height: 45px;
+    padding-bottom: 0;
+    margin-bottom: 0;
   }
 }
 
 .status-with-photo-backdrop {
-  h1 {
+  p {
-    font-size: 100px;
     color: #fff;
+
+    a {
+      @include transition(background-color, 0.3s);
+
+      color: #000;
+      background-color: #fff;
+      background-color: rgba(255,255,255,0.7);
+      padding: 0 5px;
+
+      &:hover {
+        text-decoration: none;
+        background-color: #fff;
+        background-color: rgba(255,255,255,1);
+      }
+    }
   }
 }
 
@@ -213,6 +231,8 @@ $pane-width: 420px;
     vertical-align: middle;
     text-align: center;
 
+    padding: 70px 10%;
+
     height: 100%;
     width: 100%;
   }
@@ -235,10 +255,18 @@ $pane-width: 420px;
 }
 
 .photo-backdrop {
-  h1 {
+  p {
     color: #fff;
     z-index: 2;
   }
+
+  img {
+    position: relative;
+  }
+
+  .photo-fill {
+    @include opacity(0.2)
+  }
 }
 
 .rich-media {
@@ -381,6 +409,7 @@ body.idle {
   bottom: 0;
   left: 0;
   text-align: center;
+  z-index: 100;
 }
 
 #post-reactions {
@@ -639,9 +668,15 @@ body.idle {
 #post-content {
   display: table;
 
+  padding: 70px 10%;
+
   position: absolute;
   height: 100%;
   width: 100%;
+
+  img {
+    @include photo-shadow();
+  }
 }
 
 #post-feedback {