use ellipsis if text overflows and urlify username

fixes #103 and #113

src/components/thumbnail/thumbnail.jsx

@@ -26,21 +26,31 @@ var Thumbnail = React.createClass({
         );
         var extra = [];
         if (this.props.creator) {
-            extra.push(<div key="creator" className="thumbnail-creator">by {this.props.creator}</div>);
+            extra.push(
+                <div key="creator" className="thumbnail-creator">
+                    by <a href={'/users/' + this.props.creator + '/'}>{this.props.creator}</a>
+                </div>
+            );
         }
         if (this.props.loves && this.props.showLoves) {
             extra.push(
-                <div key="loves" className="thumbnail-loves"
-                     title={this.props.loves + ' loves'}>
-                        {this.props.loves}
+                <div
+                    key="loves"
+                    className="thumbnail-loves"
+                    title={this.props.loves + ' loves'}>
+                    
+                    {this.props.loves}
                 </div>
             );
         }
         if (this.props.remixes && this.props.showRemixes) {
             extra.push(
-                <div key="remixes" className="thumbnail-remixes"
-                     title={this.props.remixes + ' remixes'}>
-                        {this.props.remixes}
+                <div
+                    key="remixes"
+                    className="thumbnail-remixes"
+                    title={this.props.remixes + ' remixes'}>
+                    
+                    {this.props.remixes}
                 </div>
             );
         }
@@ -49,7 +59,9 @@ var Thumbnail = React.createClass({
                 <a className="thumbnail-image" href={this.props.href}>
                     <img src={this.props.src} />
                 </a>
-                <div className="thumbnail-title"><a href={this.props.href}>{this.props.title}</a></div>
+                <div className="thumbnail-title">
+                    <a href={this.props.href}>{this.props.title}</a>
+                </div>
                 {extra}
             </div>
         );

src/components/thumbnail/thumbnail.scss

@@ -16,12 +16,6 @@
     #{$extras} {
         line-height: normal;
         word-wrap: break-word;
-    }
-
-    .thumbnail-title {
-        margin-bottom: 1px;
-        font-size: .9230em;
-        font-weight: 800;
 
         a {
             display: block;
@@ -31,6 +25,12 @@
         }
     }
 
+    .thumbnail-title {
+        margin-bottom: 1px;
+        font-size: .9230em;
+        font-weight: 800;
+    }
+
     #{$extras} {
         color: $type-gray;
         font-size: .8462em;