Simplify and improve information about project.

_config.yml

@@ -0,0 +1,2 @@
+auto: true
+

index.html

@@ -11,10 +11,21 @@
 
   <div class="container">
     <h1>CSS3 buttons</h1>
-    <h2>Designed & built by <a href="http://hellohappy.org">Chad Mazzola</a> with inspiration from across the web.</h2>
-    <p class="intro">This is a collection of CSS3 buttons that use the simplest possible markup. They look best in WebKit-based browsers, almost as good in Firefox, with all other browsers falling back to a less-styled button.</p>
-    <p>These buttons are now implemented using Sass, with help from <a href="http://github.com/thoughtbot/bourbon">Bourbon</a>. The generated CSS for all the buttons is also available.</p>
-    <p class="where intro">The latest code is located at: <a href="http://github.com/ubuwaits/css3-buttons">http://github.com/ubuwaits/css3-buttons</a></p>
+
+    <div class="project-info">
+      <div class="description">
+        <p>This is a collection of CSS3 buttons that use the simplest possible markup. They look best in WebKit-based browsers, almost as good in Firefox, with all other browsers falling back to a less-styled button.</p>
+        <p>These buttons are now implemented using Sass, with help from <a href="http://github.com/thoughtbot/bourbon">Bourbon</a>. The generated CSS for all the buttons is also available.</p>
+      </div>
+
+      <div class="info">
+        <ul>
+          <li><a href="http://hellohappy.org">Maintained by Chad Mazzola</a>.</li>
+          <li><a href="http://twitter.com/ubuwaits">Follow me on Twitter</a></li>
+          <li><a href="http://github.com/ubuwaits/css3-buttons">Watch this repo on GitHub</a></li
+        </ul>
+      </div>
+    </div>
 
     <div class="button-collection">
       <div class="button-info">
@@ -81,7 +92,7 @@ <h2>WebKit experimental</h2>
       </ul>
     </div>
 
-    <p class="credit">Designed &amp; built by <a href="http://hellohappy.org/">Chad Mazzola</a> with inspiration from across the web.</p>
+    <p class="credit">Maintained by Chad Mazzola. <a href="http://twitter.com/ubuwaits">Follow me on Twitter</a> or <a href="http://github.com/ubuwaits/css3-buttons">Watch this repo on GitHub</a>.</p>
   </div>
 
 </body>

stylesheets/buttons.css

@@ -788,34 +788,57 @@ div.container {
   margin: 40px auto;
   width: 960px; }
 
-a {
-  color: #333;
-  font-weight: bold;
-  text-decoration: none; }
-
 h1 {
   color: #333;
-  font-size: 38px;
-  font-weight: 300;
+  font-size: 34px;
+  font-weight: 700;
   margin: 24px 0 12px 0; }
 
-h2 {
-  color: #666;
-  margin: 0 0 24px 0; }
+div.project-info div.description {
+  float: left;
+  width: 490px; }
+div.project-info div.info {
+  float: left;
+  margin: 0 0 0 30px;
+  width: 340px; }
+  div.project-info div.info ul {
+    position: relative;
+    top: 1px; }
+    div.project-info div.info ul li {
+      color: #444;
+      font-size: 11px;
+      font-weight: normal;
+      line-height: 18px;
+      text-transform: uppercase; }
+      div.project-info div.info ul li a:hover {
+        border-bottom: 1px solid #444; }
+      div.project-info div.info ul li:before {
+        content: "\00d7";
+        font-size: 15px;
+        font-weight: 700;
+        left: -2px;
+        position: relative;
+        top: 0px; }
+
+a {
+  color: #333;
+  font-weight: bold;
+  text-decoration: none; }
 
 p {
-  color: #555;
+  color: #444;
   font-size: 14px;
   font-weight: normal;
-  line-height: 140%;
+  line-height: 21px;
   margin: 0 0 12px 0; }
 
 p.credit {
   border-top: 1px solid #ccc;
   font-size: 14px;
   line-height: 140%;
   margin: 36px 0 12px 0;
-  padding: 6px 0 0 0; }
+  padding: 8px 0 0 0;
+  text-align: center; }
 
 p.where {
   margin: 0 0 12px 0; }
@@ -834,8 +857,6 @@ p.where {
     font-size: 22px;
     font-weight: normal;
     margin: 10px 0 6px 0; }
-  .button-info p {
-    font-size: 14px; }
 
 ul.column {
   float: left;
@@ -897,7 +918,8 @@ button.download-itunes {
 ------------------------------------------------------------------------------*/
 .column:after,
 .button-collection:after,
-.clearfix:after {
+.clearfix:after,
+div.project-info:after {
   clear: both;
   content: ' ';
   display: block;

stylesheets/scss/_screen.scss

@@ -63,29 +63,69 @@ div.container {
   width: 960px;
 }
 
-a {
-  color: #333;
-  font-weight: bold;
-  text-decoration: none;
-}
-
 h1 {
   color: #333;
-  font-size: 38px;
-  font-weight: 300;
+  font-size: 34px;
+  font-weight: 700;
   margin: 24px 0 12px 0;
 }
 
-h2 {
-  color: #666;
-  margin: 0 0 24px 0;
+div.project-info {
+  @extend .clearfix;
+
+  div.description {
+    float: left;
+    width: 490px;
+
+  }
+
+  div.info {
+    float: left;
+    margin: 0 0 0 30px;
+    width: 340px;
+
+    ul {
+      position: relative;
+      top: 1px;
+
+      li {
+        color: #444;
+        font-size: 11px;
+        font-weight: normal;
+        line-height: 18px;
+        text-transform: uppercase;
+
+        a {
+          &:hover {
+            border-bottom: 1px solid #444;
+          }
+        }
+
+        &:before {
+          content: "\00d7";
+          font-size: 15px;
+          font-weight: 700;
+          left: -2px;
+          position: relative;
+          top: 0px;
+        }
+
+      }
+    }
+  }
+}
+
+a {
+  color: #333;
+  font-weight: bold;
+  text-decoration: none;
 }
 
 p {
-  color: #555;
+  color: #444;
   font-size: 14px;
   font-weight: normal;
-  line-height: 140%;
+  line-height: 21px;
   margin: 0 0 12px 0;
 }
 
@@ -94,7 +134,8 @@ p.credit {
   font-size: 14px;
   line-height: 140%;
   margin: 36px 0 12px 0;
-  padding: 6px 0 0 0;
+  padding: 8px 0 0 0;
+  text-align: center;
 }
 
 p.where {
@@ -118,10 +159,6 @@ p.where {
     font-weight: normal;
     margin: 10px 0 6px 0;
   }
-
-  p {
-    font-size: 14px;
-  }
 }
 
 ul.column {