Changing document structure to allow for better, responsive description placards

src/jade/mixins/thumbnail.jade

@@ -10,6 +10,6 @@ mixin thumbnail(ex)
             img(src="#{ex.path}/thumbnail.png")
             .caption
                 h3.title #{ex.title}
-                if ex.about
-                    .description
-                        p #{ex.about}
+        if ex.about
+            .description
+                p #{ex.about}

src/js/index.js

@@ -28,14 +28,14 @@ $(function () {
         // Set up a function to fade in the description on mouseover.
         fadeIn = function () {
             $(this)
-                .find(".caption .description")
+                .find(".description")
                 .fadeIn(250);
         };
 
         // Set up the inverse function to fade the description out on mouseout.
         fadeOut = function () {
             $(this)
-                .find(".caption .description")
+                .find(".description")
                 .fadeOut(250);
         };
 

src/stylus/index.styl

@@ -11,12 +11,15 @@
 .pager li > a.orange:focus
     background-color chocolate
 
-.thumbnail .caption .description
+.thumbnail
+    position inherit
+
+.thumbnail .description
     position absolute
-    top 5px
-    left 20px
+    top 4px
+    left 4px
+    right 4px
     background rgba(50, 50, 50, 0.8)
-    width 252.5px
     padding 2%
     display none
     color white