added responsive layout

assests/jquery.fittext.js

@@ -0,0 +1,43 @@
+/*global jQuery */
+/*!	
+* FitText.js 1.1
+*
+* Copyright 2011, Dave Rupert http://daverupert.com
+* Released under the WTFPL license 
+* http://sam.zoy.org/wtfpl/
+*
+* Date: Thu May 05 14:23:00 2011 -0600
+*/
+
+(function( $ ){
+
+  $.fn.fitText = function( kompressor, options ) {
+
+    // Setup options
+    var compressor = kompressor || 1,
+        settings = $.extend({
+          'minFontSize' : Number.NEGATIVE_INFINITY,
+          'maxFontSize' : Number.POSITIVE_INFINITY
+        }, options);
+
+    return this.each(function(){
+
+      // Store the object
+      var $this = $(this); 
+
+      // Resizer() resizes items based on the object width divided by the compressor * 10
+      var resizer = function () {
+        $this.css('font-size', Math.max(Math.min($this.width() / (compressor*10), parseFloat(settings.maxFontSize)), parseFloat(settings.minFontSize)));
+      };
+
+      // Call once to set.
+      resizer();
+
+      // Call on resize. Opera debounces their resize by default. 
+      $(window).on('resize', resizer);
+
+    });
+
+  };
+
+})( jQuery );

assests/style.css

@@ -299,10 +299,17 @@ a:hover {
 .grid-pad {
   padding: 20px 0 20px 20px;
 }
+
 .grid-pad [class*='col-']:last-of-type {
   padding-right: 20px;
 }
 
+@media (max-width: 767px) {
+	[class*='col-'] {
+		width: 100%;
+	}
+}
+
 /* FORM
 *********/
 

index.html

@@ -56,17 +56,17 @@ <h2>Playground</h2>
                 <div class="col-1-1 viewport">
                     <div class="tlt">Grumpy wizards make toxic brew for the evil Queen and Jack.</div>
                 </div>
-                <div class="col-1-1 controls">
+                <div class="col-1-1 controls" style="padding-right: 0">
                   <form class="grid grid-pad">
                     <div class="control col-1-2">
                       <label>In Animation</label>
-                      <select class="col-1-2" data-key="effect" data-type="in"></select>
+                      <select data-key="effect" data-type="in" style="width: 50%"></select>
                       <label class="inline checkbox"><input type="checkbox" data-key="sync" data-type="in" /> Sync</label> 
                       <label class="inline checkbox"><input type="checkbox" data-key="shuffle" data-type="in" /> Shuffle</label>
                     </div>
                     <div class="control col-1-2">
                       <label>Out Animation</label>
-                      <select class="col-1-2" data-key="effect" data-type="out"></select>
+                      <select data-key="effect" data-type="out" style="width: 50%"></select>
                       <label class="inline checkbox"><input type="checkbox" data-key="sync" data-type="out" /> Sync</label>
                       <label class="inline checkbox"><input type="checkbox" data-key="shuffle" data-type="out" checked="checked" /> Shuffle</label>
                     </div>
@@ -94,6 +94,7 @@ <h2>Dependencies</h2>
 </html>
 
 <script src="http://ajax.googleapis.com/ajax/libs/jquery/1.9.0/jquery.min.js"></script>
+<script src="assests/jquery.fitText.js"></script>
 <script src="assests/jquery.lettering.js"></script>
 <script src="jquery.textillate.js"></script>
 <script>
@@ -136,8 +137,13 @@ <h2>Dependencies</h2>
     $form.find('[data-key="effect"][data-type="in"]').val('fadeInLeftBig');
     $form.find('[data-key="effect"][data-type="out"]').val('hinge');
 
-    $('.jumbotron h1').textillate({ in: { effect: 'flipInY' }});
-    $('.jumbotron p').textillate({ initialDelay: 1000, in: { delay: 2, delayScale: 1, shuffle: true } });
+    $('.jumbotron h1')
+      .fitText(0.5)
+      .textillate({ in: { effect: 'flipInY' }});
+
+    $('.jumbotron p')
+      .fitText(5, { minFontSize: 14 })
+      .textillate({ initialDelay: 1000, in: { delay: 2, delayScale: 1, shuffle: true } });
 
     setTimeout(function () {
         $('.fade').addClass('in');