From 0b6c0e4bf86cb0793ee56b25e81595613efb8266 Mon Sep 17 00:00:00 2001
From: Matthew Anderson <manderson@onehub.com>
Date: Sun, 29 Apr 2012 19:26:08 -0700
Subject: [PATCH] Overflowing text on small screens.

---
 public/stylesheets/screen.css | 16 ++++++++++++----
 stylesheets/screen.scss       | 25 +++++++++++--------------
 views/index.html.erb          |  4 ++--
 3 files changed, 25 insertions(+), 20 deletions(-)

diff --git a/public/stylesheets/screen.css b/public/stylesheets/screen.css
index 7e5d84b..4b7fd1b 100644
--- a/public/stylesheets/screen.css
+++ b/public/stylesheets/screen.css
@@ -184,25 +184,33 @@ nav a:hover {
   }
 
   .videos li {
-    border-bottom: 1px solid #000;
+    border-bottom: 1px solid #fff;
   }
   .videos a {
     display: table;
+    table-layout: fixed;
+    white-space: nowrap;
     width: 100%;
   }
   .videos div {
     display: table-cell;
-    width: 25%;
+    width: 30%;
   }
   .videos img {
     display: block;
-    width: 100%;
+    max-width: 100%;
   }
   .videos aside {
     display: table-cell;
+    overflow: hidden;
+    padding: 0 10px;
     text-align: left;
     vertical-align: middle;
-    width: 75%;
+    width: 70%;
+  }
+  .videos h4, .videos h5 {
+    overflow: hidden;
+    text-overflow: ellipsis;
   }
 }
 @media screen and (min-width: 769px) {
diff --git a/stylesheets/screen.scss b/stylesheets/screen.scss
index 922245c..3c4fda6 100644
--- a/stylesheets/screen.scss
+++ b/stylesheets/screen.scss
@@ -45,37 +45,34 @@ h6 { @extend .hidden; }
     background: $purple;
   }
   .videos {
-    // background: #fff;
     li {
-      border-bottom: 1px solid #000;
-      // display: table;
-      // width: 100%;
-      // @include row;
+      border-bottom: 1px solid #fff;
     }
     a {
       display: table;
+      table-layout: fixed;
+      white-space: nowrap;
       width: 100%;
     }
     div {
       display: table-cell;
-      width: 25%;
+      width: 30%;
     }
     img {
       display: block;
-      width: 100%;
+      max-width: 100%;
     }
     aside {
       display: table-cell;
+      overflow: hidden;
+      padding: 0 10px;
       text-align: left;
       vertical-align: middle;
-      // float: left;
-      // height: 100%;
-      width: 75%;
+      width: 70%;
     }
-    hgroup {
-      // display: table-cell;
-      // height: 100%;
-      // vertical-align: middle;
+    h4, h5 {
+      overflow: hidden;
+      text-overflow: ellipsis;
     }
   }
 }
diff --git a/views/index.html.erb b/views/index.html.erb
index a9cd799..4f34ef7 100644
--- a/views/index.html.erb
+++ b/views/index.html.erb
@@ -169,7 +169,7 @@
     </li>
     <li>
       <a class="video fancybox.iframe" data-fancybox-group="experimental" href="http://player.vimeo.com/video/40790396?title=0&amp;byline=0&amp;portrait=0&amp;autoplay=1">
-        <div class="thumbnail"><img src="/images/thumbnails/hansel-and-gretel-having-adolescent-desires.jpg" alt="Hansel and Gretel Having Adolescent Desires &bull; Fashion </div>Ball 2012" />
+        <div class="thumbnail"><img src="/images/thumbnails/hansel-and-gretel-having-adolescent-desires.jpg" alt="Hansel and Gretel Having Adolescent Desires &bull; Fashion Ball 2012" /></div>
         <aside>
           <hgroup>
             <h4>Hansel and Gretel Having Adolescent Desires</h4>
@@ -204,7 +204,7 @@
       </a>
     </li>
     <li>
-      <a class="video fancybox.iframe" data-fancybox-group="experimental" href="http://player.vimeo.com/video/11637946?title=0&amp;byline=0&amp;</div>portrait=0&amp;autoplay=1">
+      <a class="video fancybox.iframe" data-fancybox-group="experimental" href="http://player.vimeo.com/video/11637946?title=0&amp;byline=0&amp;portrait=0&amp;autoplay=1">
         <div class="thumbnail"><img src="/images/thumbnails/the-gaudy-side-of-town.jpg" alt="The Gaudy Side of Town &bull; Gayngs" /></div>
         <aside>
           <hgroup>