move author / abstract around

padmaTexts/static/css/jquery.tooltip.css

@@ -16,3 +16,8 @@
 }
 
 #tooltip h4, #tooltip div { margin: 0; }
+
+#tooltip img {
+  width: auto;
+  height: 120px;
+}

padmaTexts/static/css/text.css

@@ -15,9 +15,6 @@ body {
   padding: 4px;
 }
 
-#essay {
-  width: 60%;
-}
 
 .para {
   padding: 8px;

padmaTexts/static/js/views/sidebar.js

@@ -6,7 +6,7 @@ $(function() {
   $(window).resize(function() {
     var docWidth = $(document).width();
     var essayWidth = docWidth - 400;
-    $('#essay').css("width", essayWidth);
+    $('#leftWrapper').css("width", essayWidth);
   });
   $(window).trigger("resize");
 });

padmaTexts/templates/text_embed.html

@@ -88,25 +88,34 @@
 {% autoescape off %}
 <div id="loading"></div>
 <div id="wrapper">
+  <div id="leftWrapper">
     <h1>
       {{ text.title }}
     </h1>
+    <h4>
+      - <a href="#authorbio">{{ text.author }}</a>
+    </h4>
+    <div id="essayAbstract">
+      <h3>Abstract:</h3>
+      <p>
+      {{ text.abstract }}
+      </p>
+    </div>
     <div id="padmaSidebar">
       <div id="padmaSidebarWrapper"></div>
-    <div id="aboutTxt">
-      <h3>Author: </h3>
-      <span class="author_name">{{ text.author }}</span>
-      <div class="author_bio">{{ text.author_bio }}</div>
-      <div class="abstract">
-        <h4>Abstract: </h4>
-        <span class="abstract_text">{{ text.abstract }}</span>
-      </div>
-    </div>
     </div>
 
     <div id="essay">
       {{ text.html }}
     </div>
+    <div id="authorBio">
+      <a name="authorbio"></a>
+      <h3>About the Author:</h3>
+      <p>
+        {{ text.author_bio }}
+      </p>
+    </div>
+  </div>
 </div>
 {% endautoescape %}
 </body>