From 299cacdbef50a6ba4400cc4dafb4d37135caf1bd Mon Sep 17 00:00:00 2001
From: Adrian Schaedle <schaedles@gmail.com>
Date: Sat, 11 Oct 2014 21:34:50 -0700
Subject: [PATCH] Separate column contents from column definitions

---
 public/css/main.css | 13 +++++----
 public/index.html   | 65 ++++++++++++++++++++++++++-------------------
 2 files changed, 45 insertions(+), 33 deletions(-)

diff --git a/public/css/main.css b/public/css/main.css
index dc99945..10d7772 100644
--- a/public/css/main.css
+++ b/public/css/main.css
@@ -3,14 +3,13 @@
    ========================================================================== */
 
 .site-header {
-  margin: 2.5em -1.25em;
-  border-radius: 4px;
-  padding: 1em;
-  vertical-align: center;
+  margin: 40px 0;
 }
 
 .site-title {
-  margin: 0;
+  display: inline-block;
+  vertical-align: bottom;
+  margin: 0 0 0 0.2em;
   font-size: 5em;
   font-weight: normal;
   line-height: 75px;
@@ -69,3 +68,7 @@
 #footer {
   margin-bottom:10px;
 }
+
+.u-overflowRegion {
+  overflow: auto;
+}
diff --git a/public/index.html b/public/index.html
index b66712f..7ab6bba 100644
--- a/public/index.html
+++ b/public/index.html
@@ -18,14 +18,12 @@
 
       <div class="site-header" role="banner">
         <div class="row">
-          <div class="col-lg-1">
+          <div class="col-sm-6">
             <img src="img/flight-logo.png" width="75" height="75" alt="Twitter logo">
-          </div>
-          <div class="col-lg-2">
             <h1 class="site-title">Flight</h1>
           </div>
-          <div class="pull-right">
-            <h2 class="site-tagline">Discover <a href='http://flightjs.github.io/'>Flight</a> components.</h2>
+          <div class="col-sm-6">
+            <h2 class="site-tagline pull-right">Discover <a href='http://flightjs.github.io/'>Flight</a> components.</h2>
           </div>
         </div>
         <hr/>
@@ -37,32 +35,43 @@ <h2 class="site-tagline">Discover <a href='http://flightjs.github.io/'>Flight</a
 
       <div class='components-wrapper'>
         <div class="row">
-          <ul id='top-forks' class='top-list col-lg-4 nav nav-pills nav-stacked'>
-            <li class='header'>Most forked</li>
-          </ul>
-          <ul id='top-stars' class='top-list col-lg-4 nav nav-pills nav-stacked'>
-            <li class='header'>Most starred</li>
-          </ul>
-          <ul id='recently-created' class='top-list col-lg-4 nav nav-pills nav-stacked'>
-            <li class='header'>Recently created</li>
-          </ul>
+          <div class="col-md-4">
+            <ul id='top-forks' class='top-list nav nav-pills nav-stacked'>
+              <li class='header'>Most forked</li>
+            </ul>
+          </div>
+          <div class="col-md-4">
+            <ul id='top-stars' class='top-list nav nav-pills nav-stacked'>
+              <li class='header'>Most starred</li>
+            </ul>
+          </div>
+          <div class="col-md-4">
+            <ul id='recently-created' class='top-list nav nav-pills nav-stacked'>
+              <li class='header'>Recently created</li>
+            </ul>
+          </div>
         </div>
 
-        <div class="main-section row">
-          <div class="col-lg-4 col-lg-offset-4">
-            <input type='text' id='filter' class='form-control input-md' placeholder='Search for Flight components' />
+        <div class="main-section">
+          <div class="row">
+            <div class="col-md-4 col-md-offset-4 form-group">
+              <input type='text' id='filter' class='form-control input-md' placeholder='Search for Flight components' />
+            </div>
+          </div>
+
+          <div class="u-overflowRegion">
+            <table id="components" class="table table-hover">
+              <thead>
+                <tr>
+                  <th> Name </th>
+                  <th> Description </th>
+                  <th> Owner </th>
+                  <th> Forks </th>
+                  <th> Stars </th>
+                </tr>
+              </thead>
+            </table>
           </div>
-          <table id="components" class="table table-hover">
-            <thead>
-              <tr>
-                <th> Name </th>
-                <th> Description </th>
-                <th> Owner </th>
-                <th> Forks </th>
-                <th> Stars </th>
-              </tr>
-            </thead>
-          </table>
         </div>
       </div>