rudimentary truncation and click for more

h/js/src/hypothesis.coffee

@@ -377,8 +377,18 @@ class Hypothesis extends Annotator
           .classed('hyp-excerpt', true)
         .append('blockquote')
       excerpts.exit().remove()
-      excerpts.select('blockquote').text (d) =>
-        d.message.annotation.quote.replace(/\u00a0/g, ' ')  # replace  
+      excerpts
+        .select('blockquote').html (d) =>
+          d.message.annotation.quote
+            .replace(/\u00a0/g, ' ')  # replace  
+            .substring(0, 180).split(" ").slice(0, -1).join(" ") + "...<a id='clickForMore'>more</a>" # truncate
+
+      $('#clickForMore').click =>
+        excerpts
+          .select('blockquote').html (d) =>
+            d.message.annotation.quote
+              .replace(/\u00a0/g, ' ')  # replace &nbsp;
+
 
       highlights = []
       excerpts.each (d) =>

h/sass/common.scss

@@ -26,7 +26,7 @@ p {
 em { font-style: italic; }
 
 html {
-  font-size: $baseFontSize / 16 * 1em;
+  font-size: $baseFontSize / 18 * 1em;
 }
 
 h1, h2, h3, h4, h5, h6 {
@@ -261,9 +261,10 @@ label {
   margin: 1em 0;
 
   blockquote {
+    @include pie-clearfix;
     color: $gray;
     font-family: "Merriweather";
-    font-size: 1.1em;
+    font-size: 1em;
     margin: 0;
     padding: 0 1em;
   }
@@ -287,6 +288,15 @@ label {
     right: -.15em;
     bottom: -.1em;
   }
+
+  #clickForMore {
+    font-size: .9em;
+    font-family: $sansFontFamily;
+    float: right;
+    display: block;
+    text-decoration: underline;
+  }
+
 }
 
 //DROPDOWNS