adding social media buttons

docs/assets/css/site.css

@@ -4525,20 +4525,14 @@ h6 {
   border-width: 3px;
   font-size: 17px;
   line-height: 28px;
-  left: 94.66666666666667px;
+  left: 100.66666666666667px;
 }
 #iconCarousel .carousel-control.right {
   left: auto;
-  right: 94.66666666666667px;
+  right: 100.66666666666667px;
-}
-a[href^='http://']:after {
-  font-family: FontAwesome;
-  content: "\0020 \f08e";
-}
-a[href^='http://']:after:hover {
-  text-decoration: none;
 }
 .hero-unit {
+  margin-bottom: 20px;
   -webkit-border-radius: 20px;
   -moz-border-radius: 20px;
   border-radius: 20px;
@@ -4674,6 +4668,52 @@ a[href^='http://']:after:hover {
   text-shadow: 0 -1px 0 rgba(255, 255, 255, 0.25);
   color: #333333;
 }
+#social-buttons {
+  margin-bottom: 25px;
+  text-align: center;
+}
+#social-buttons .btn {
+  font-family: museo-slab, "Helvetica Neue", Helvetica, Arial, sans-serif;
+  font-weight: bold;
+  font-size: 14px;
+  padding: 3px 10px 0;
+  line-height: 21px;
+}
+#social-buttons .count.btn {
+  font-family: proxima-nova, "Helvetica Neue", Helvetica, Arial, sans-serif;
+  font-weight: normal;
+  background-color: #ffffff;
+  background-image: -moz-linear-gradient(top, #ffffff, #ffffff);
+  background-image: -ms-linear-gradient(top, #ffffff, #ffffff);
+  background-image: -webkit-gradient(linear, 0 0, 0 100%, from(#ffffff), to(#ffffff));
+  background-image: -webkit-linear-gradient(top, #ffffff, #ffffff);
+  background-image: -o-linear-gradient(top, #ffffff, #ffffff);
+  background-image: linear-gradient(top, #ffffff, #ffffff);
+  background-repeat: repeat-x;
+  filter: progid:DXImageTransform.Microsoft.gradient(startColorstr='#ffffff', endColorstr='#ffffff', GradientType=0);
+  border-color: #ffffff #ffffff #d9d9d9;
+  border-color: rgba(0, 0, 0, 0.1) rgba(0, 0, 0, 0.1) rgba(0, 0, 0, 0.25);
+  *background-color: #ffffff;
+  /* Darken IE7 buttons by default so they stand out more given they won't have borders */
+
+  filter: progid:DXImageTransform.Microsoft.gradient(enabled = false);
+}
+#social-buttons .count.btn:hover,
+#social-buttons .count.btn:active,
+#social-buttons .count.btn.active,
+#social-buttons .count.btn.disabled,
+#social-buttons .count.btn[disabled] {
+  background-color: #ffffff;
+  *background-color: #f2f2f2;
+}
+#social-buttons .count.btn:active,
+#social-buttons .count.btn.active {
+  background-color: #e6e6e6 \9;
+}
+#social-buttons .watch,
+#social-buttons .fork {
+  margin-right: 30px;
+}
 .the-icons {
   list-style-type: none;
   margin-left: 0;
@@ -4846,6 +4886,10 @@ a[href^='http://']:after:hover {
 .modal .modal-body .icon1 > div.thumbnail > div i {
   font-size: 12px;
 }
+.label,
+.badge {
+  background-color: #eeeeee;
+}
 footer {
   color: #555555;
   border-top: 1px solid #eeeeee;

docs/assets/js/index/index.js

@@ -1,4 +1,34 @@
 $(function() {
+  // start the icon carousel
+  $('#iconCarousel').carousel({
+    interval: 5000
+  });
+
+  // make code pretty
+  window.prettyPrint && prettyPrint();
+
+  // inject twitter & github counts
+  $.ajax({
+    url: 'http://api.twitter.com/1/users/show.json',
+    data: {screen_name: 'fortaweso_me'},
+    dataType: 'jsonp',
+    success: function(data) {
+      $('#followers').html(data.followers_count);
+    }
+  });
+  $.ajax({
+    url: 'http://github.com/api/v2/json/repos/show/FortAwesome/Font-Awesome',
+    dataType: 'jsonp',
+    success: function(data) {
+      $('#watchers').html(data.repository.watchers);
+      $('#forks').html(data.repository.forks);
+    }
+  });
+
+
+
+
+
   var firstInHistory = true;
 
   var MainView = Backbone.View.extend({

docs/assets/less/site.less

@@ -38,25 +38,26 @@ h1, h2, h3, h4, h5, h6 { font-family: @serifFontFamily; }
     border-width: 3px;
     font-size: 17px;
     line-height: 28px;
-    left: @size / 3 + 3;
+    left: @size / 3 + 9;
     &.right {
       left: auto;
-      right: @size / 3 + 3;
+      right: @size / 3 + 9;
     }
   }
 }
 
-a[href^='http://'] {
+//a[href^='http://'] {
-  &:after {
+//  &:after {
-    font-family: FontAwesome;
+//    font-family: FontAwesome;
-    content: "\0020 \f08e";
+//    content: "\0020 \f08e";
-    &:hover {
+//    &:hover {
-      text-decoration: none;
+//      text-decoration: none;
-    }
+//    }
-  }
+//  }
-}
+//}
 
 .hero-unit {
+  margin-bottom: 20px;
   .border-radius(20px);
 //  #gradient > .radial( lighten(@red, 10%), @red);
   background-color: @red;
@@ -127,6 +128,27 @@ a[href^='http://'] {
   }
 }
 
+#social-buttons {
+  margin-bottom: 25px;
+  text-align: center;
+  .btn {
+    font-family: @serifFontFamily;
+    font-weight: bold;
+    font-size: @baseFontSize;
+    padding: 3px 10px 0;
+    line-height: @baseLineHeight;
+  }
+  .count.btn {
+    font-family: @sansFontFamily;
+    font-weight: normal;
+    .buttonBackground(@white, @white);
+  }
+  .watch, .fork {
+    margin-right: 30px;
+  }
+}
+
+
 .the-icons {
   list-style-type: none;
   margin-left: 0;
@@ -258,6 +280,12 @@ a[href^='http://'] {
   }
 }
 
+.label,
+.badge {
+  background-color: @grayLighter;
+}
+
+
 footer {
   color: @gray;
   border-top: 1px solid @grayLighter;

docs/index.html

@@ -58,9 +58,9 @@
       <div class="active item"><div><i class="icon-flag"></i></div></div>
       <div class="item"><div><i class="icon-magic"></i></div></div>
       <div class="item"><div><i class="icon-beaker"></i></div></div>
+      <div class="item"><div><i class="icon-briefcase"></i></div></div>
       <div class="item"><div><i class="icon-bullhorn"></i></div></div>
       <div class="item"><div><i class="icon-umbrella"></i></div></div>
-      <div class="item"><div><i class="icon-cut"></i></div></div>
       <div class="item"><div><i class="icon-star-empty"></i></div></div>
       <div class="item"><div><i class="icon-envelope"></i></div></div>
       <div class="item"><div><i class="icon-leaf"></i></div></div>
@@ -85,38 +85,53 @@
     <p>The iconic font designed for use with Twitter Bootstrap</p>
     <div class="actions">
       <a class="btn btn-primary btn-large" href="https://github.com/FortAwesome/Font-Awesome/zipball/master"><i class="icon-download"></i>Download Font<br>Awesome v2.0</a>
-      <a class="btn btn-large btn-github" href="https://github.com/FortAwesome/Font-Awesome"><i class="icon-github"></i>View Project<br>on GitHub</a>
+      <a class="btn btn-large btn-github" href="https://github.com/FortAwesome/Font-Awesome" target="_blank"><i class="icon-github"></i>View Project<br>on GitHub</a>
     </div>
   </div>
 </div>
 
+<section id="social-buttons">
+  <span class="watch">
+    <a class="btn" href="https://github.com/FortAwesome/Font-Awesome" target="_blank"><i class="icon-github"></i> Watch</a>
+    <a id="watchers" class="count btn" href="https://github.com/FortAwesome/Font-Awesome">3900+</a>
+  </span>
+  <span class="fork">
+    <a class="btn" href="https://github.com/FortAwesome/Font-Awesome" target="_blank"><i class="icon-github"></i> Fork</a>
+    <a id="forks" class="count btn" href="#">200+</a>
+  </span>
+  <span class="follow">
+    <a class="btn" href="http://twitter.com/fortaweso_me/" target="_blank"><i class="icon-twitter"></i> Follow @fortaweso_me</a>
+    <span class="arrow-right"></span><span id="followers" class="count btn">1000+</span>
+  </span>
+</section>
+
 <section id="why">
   <div class="row">
     <div class="span4">
-      <h3><i class="icon-bullhorn icon-large"></i> 70 New Icons in v2.0</h3>
+      <h3><i class="icon-bullhorn icon-large"></i> Desktop Font + Vectors</h3>
+      The full desktop font and a pdf of vectors are now included. Happy designing.
+    </div>
+    <div class="span4">
+      <h3><i class="icon-beaker icon-large"></i> 70 New Icons in v2.0</h3>
       All requested by our active community on the <a href="https://github.com/FortAwesome/Font-Awesome" target="_blank">Font Awesome GitHub project</a>.
     </div>
     <div class="span4">
       <h3><i class="icon-ok icon-large"></i> IE7 Support</h3>
       Font Awesome v2.0 now even supports IE7. If you need it, you have my condolences.
     </div>
+  </div>
+  <div class="row">
     <div class="span4">
       <h3><i class="icon-flag icon-large"></i> One font, 220 icons</h3>
       In a single collection, Font Awesome is a pictographic language of web-related actions.
     </div>
-  </div>
-  <div class="row">
     <div class="span4">
       <h3><i class="icon-gift icon-large"></i> Free for commercial use</h3>
       The Font Awesome webfont and CSS libraries are completely free for commercial use.
     </div>
     <div class="span4">
-      <h3><i class="icon-pencil icon-large"></i> CSS control</h3>
+      <h3><i class="icon-search icon-large"></i> Screen reader compatible</h3>
-      Easily style icon color, size, shadow, and anything that's possible with CSS.
+      Font Awesome won't trip up screen readers, unlike most icon fonts.
-    </div>
-    <div class="span4">
-      <h3><i class="icon-resize-full icon-large"></i> Infinite scalability</h3>
-      Scalable vector graphics means icons look awesome at any size.
     </div>
   </div>
   <div class="row">
@@ -125,12 +140,12 @@
       Designed from scratch to be fully backwards compatible with <a href="http://twitter.github.com/bootstrap/" target="_blank">Twitter Bootstrap 2.0</a>.
     </div>
     <div class="span4">
-      <h3><i class="icon-search icon-large"></i> Screen reader compatible</h3>
+      <h3><i class="icon-pencil icon-large"></i> CSS control</h3>
-      Font Awesome won't trip up screen readers, unlike most icon fonts.
+      Easily style icon color, size, shadow, and anything that's possible with CSS.
     </div>
     <div class="span4">
-      <h3><i class="icon-twitter icon-large"></i> Follow on Twitter</h3>
+      <h3><i class="icon-resize-full icon-large"></i> Infinite scalability</h3>
-      Follow <a href="http://twitter.com/fortaweso_me/" target="_blank">@fortaweso_me</a> on Twitter for icon updates and styling tricks.
+      Scalable vector graphics means icons look awesome at any size.
     </div>
   </div>
 </section>
@@ -1048,21 +1063,5 @@
 <script src="assets/js/tw-bs-201/bootstrap-typeahead.js"></script>
 <script src="assets/js/index/index.js"></script>
 
-<script type="text/javascript">
-  $(function(){
-    $('#iconCarousel').carousel({
-      interval: 5000
-    });
-
-    // tooltips
-    $('#why').tooltip({
-      selector: "a[rel=tooltip]",
-      placement: 'bottom'
-    })
-
-    // make code pretty
-    window.prettyPrint && prettyPrint();
-  });
-</script>
 </body>
 </html>