don't show nsfw posts without a shield in the viewer

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

@@ -5,6 +5,17 @@
 </div>
 
 <div id="post-content"> </div>
+
+{{#if nsfw}}
+  <div id="nsfw-post-content">
+    <div id="nsfw-shield" class="post">
+      <h2>
+        This post is Not Safe For Work.
+      </h2>
+    </div>
+  </div>
+{{/if}}
+
 <div id="post-nav"> </div>
 <div id="post-interactions"> </div>
 

public/stylesheets/sass/new-templates.scss

@@ -3,6 +3,8 @@
 $light-grey: #999;
 $pane-width: 420px;
 
+$large-type: 40px;
+
 /* mixins */
 @mixin center($orient:vertical) {
   display: -webkit-box;
@@ -21,6 +23,13 @@ $pane-width: 420px;
   box-align: center;
 }
 
+@mixin rotate($orient) {
+  -o-transform: rotate($orient);
+  -moz-transform: rotate($orient);
+  -ms-transform: rotate($orient);
+  -webkit-transform: rotate($orient);
+}
+
 @mixin box-shadow($left, $top, $blur, $color) {
   -webkit-box-shadow: $left $top $blur $color;
   -moz-box-shadow: $left $top $blur $color;
@@ -186,7 +195,7 @@ $pane-width: 420px;
 {
   h1 {
     font-weight: bold;
-    font-size: 40px;
+    font-size: $large-type;
   }
 }
 
@@ -610,6 +619,7 @@ body.idle {
   }
 }
 
+#nsfw-post-content,
 #post-content {
   display: table;
 
@@ -647,3 +657,21 @@ body.idle {
   right: 8px;
   top: 8px;
 }
+
+#nsfw-post-content {
+  @include opacity(0.95);
+}
+
+#nsfw-shield {
+  height: 100%;
+  width: 100%;
+  background-image: url('../img/hatched-bg.jpg');
+  background-transparency: url('../img/hatched-bg.jpg');
+
+  h2 {
+    @include rotate(-15deg);
+
+    text-transform: uppercase;
+    color: #979893;
+  }
+}