Pimp up the repviews (thumbnails) a bit

app/assets/stylesheets/preview.sass

@@ -0,0 +1,57 @@
+.preview
+  margin-bottom: 30px
+
+  .thumbnail-link
+    display: block
+    position: relative
+
+    .play-button
+      display: none
+      z-index: 1
+      font-size: 80px
+
+    &:hover
+      .play-button
+        display: block
+
+    &:active
+      .play-button
+        font-size: 90px
+
+  .thumbnail
+    padding: 0
+    background-color: #000
+    padding: 8px
+    border: 0
+    border-radius: 3px
+    border-bottom-left-radius: 0
+    border-bottom-right-radius: 0
+
+  .info
+    background-color: #f7f7f7
+    padding: 10px
+    border-bottom-left-radius: 3px
+    border-bottom-right-radius: 3px
+    border: 1px solid #eee
+    border-bottom: 1px solid #ddd
+
+    .author-avatar
+      float: left
+      width: 20px
+      height: 20px
+
+    h2
+      margin: 0 0 6px 0
+      font-size: 20px
+
+      .duration
+        float: right
+        font-size: 14px
+
+    small
+      margin-left: 5px
+      font-size: 14px
+      color: #333
+
+      abbr
+        border-bottom: 0

app/assets/stylesheets/terminal.sass

@@ -0,0 +1,64 @@
+@import terminal-font
+
+pre.terminal
+  +terminal-font
+
+  box-sizing: content-box
+  -moz-box-sizing: content-box
+  -webkit-box-sizing: content-box
+  overflow: hidden
+  padding: 0
+  margin: 0px
+  display: block
+  white-space: pre
+  background-color: black
+  color: #ccc
+  border: 0
+  word-wrap: normal
+  word-break: normal
+
+  // bootstrap overrides
+  border-radius: 0
+
+  &.cursor-on
+    .line
+      .cursor.visible
+        background-color: #D3D7CF
+
+  .bright
+    font-weight: bold
+
+  .underline
+    text-decoration: underline
+
+  .italic
+    font-style: italic
+
+  .fg8, .fg9, .fg10, .fg11, .fg12, .fg13, .fg14, .fg15
+    font-weight: bold
+
+.medium-font
+  pre.terminal
+    +terminal-font-medium
+
+.big-font
+  pre.terminal
+    +terminal-font-big
+
+.play-button
+  position: absolute
+  left: 0
+  top: 0
+  right: 0
+  bottom: 0
+  text-align: center
+  color: white
+
+  .arrow
+    width: 100%
+    height: 100%
+    display: table
+
+    span
+      vertical-align: middle
+      display: table-cell

app/views/asciicasts/_preview.html.slim

@@ -1,17 +1,14 @@
-- cache ['thumbnail', asciicast] do
-  .presentation
-    = link_to asciicast, :class => 'preview-link' do
-      .play-button
-        .arrow
-          | ►
-      .thumbnail
-        = asciicast.thumbnail(30, 10)
+.preview
+  = link_to asciicast, class: 'thumbnail-link' do
+    .play-button
+      span.arrow
+        span.glyphicon.glyphicon-play
+    .thumbnail
+      = asciicast.thumbnail(60, 15)
 
-    .info
-      h3 = link_to asciicast.title, asciicast
-      p.date
-        span> = asciicast.formatted_duration
-        ' |
-        span> = asciicast.author_link
-        ' |
-        span = time_ago_tag asciicast.created_at
+  .info.clearfix
+    h2
+      = link_to asciicast.title, asciicast
+      span.duration = asciicast.formatted_duration
+    span.author-avatar = asciicast.author_img_link
+    small by #{asciicast.author_link} #{time_ago_tag asciicast.created_at}

app/views/asciicasts/_previews.html.erb

@@ -1,6 +0,0 @@
-<div class="presentations">
-  <% cache asciicasts do -%>
-    <%= render :partial => 'asciicasts/preview', :collection => asciicasts,
-               :as => :asciicast %>
-  <% end -%>
-</div>

app/views/asciicasts/_previews.html.slim

@@ -0,0 +1,5 @@
+- asciicasts.each_slice(per_row) do |slice|
+  .row
+    - slice.each do |asciicast|
+      div class="col-md-#{12/per_row}"
+        = render 'asciicasts/preview', asciicast: asciicast