fixed some styling during the framing process [ci skip]

app/assets/stylesheets/new_styles/_composer.scss

@@ -17,6 +17,9 @@
 #framer {
   color : #fff;
   background-color : rgba(0,0,0,0.8);
+
+ background-image : image_url("texture/hatched-dark.png");
+
   z-index : 200;
 
   text-align : left;
@@ -45,7 +48,8 @@
 
   .template-picker {
     float : left;
-    margin-left : 20px;
+    margin-left : 10px;
+    margin-right : -100px; // prevent the picker from being bumped down under the frame.
 
     input {
       display : none;
@@ -100,6 +104,21 @@
   }
 
   .preview {
+    .canvas-frame {
+      margin-left : 0;
+
+      &:hover {
+        [contentEditable] {
+          @include box-shadow(0,0,5px,$link-blue);
+        }
+      }
+
+      [contentEditable]:focus {
+        @include box-shadow(0,0,0,rgba(0,0,0,0));
+        outline : none;
+      }
+    }
+
     .content {
       cursor : auto;
 

app/assets/templates/flow.jst.hbs

@@ -2,6 +2,13 @@
     <div class="container">
         <div class="row">
             <div class="span6 offset3">
+                <div class="row">
+                    <div class="span4 offset1">
+                        <h3>
+                            Make something!
+                        </h3>
+                    </div>
+                </div>
                 <div class="row">
                     <div class="flow-content"/>
                 </div>

app/assets/templates/framer-content.jst.hbs

@@ -1,4 +1,4 @@
-<div class="preview"> </div>
+<div class="preview offset1"> </div>
 
 <div class='template-picker'>
     {{#each templates}}

app/assets/templates/post-form.jst.hbs

@@ -1,7 +1,3 @@
-<h3>
-    Make something!
-</h3>
-
 <div class="new_picture"/>
 
 <form class="new-post">

app/assets/templates/small-frame/default.jst.hbs

@@ -22,6 +22,10 @@
             {{{text}}}
         </div>
         <div class="background-color"></div>
+    {{else}}
+        <div class="text-content">
+            <p></p>
+        </div>
     {{/if}}
 
     <!--Handlebars partial territory-->