adding fonticons header

src/_includes/navbar.html

@@ -1,3 +1,17 @@
+<div class="fonticons">
+  <div class="container">
+    <div class="message-container">
+      <div class="tagline">
+        <span id="rotating-message">Take your icon game to the next level.</span>
+        Check out <strong>Fonticons</strong>, from the maker of Font Awesome.
+      </div>
+      <div class="action">
+        <a id="rotating-url" class="btn btn-primary btn-block" href="https://fonticons.com/?utm_source=font_awesome_homepage&utm_medium=display&utm_content=ad_1_next_level&utm_campaign=promo_4.3_update">Gimme Some!</a>
+      </div>
+    </div>
+  </div>
+</div>
+
 <div class="navbar navbar-inverse navbar-static-top hidden-print">
   <div class="container">
     <div class="navbar-header">

src/assets/js/site.js

@@ -1,4 +1,24 @@
 $(function() {
+  var quotes = new Array(
+      "Take your icon game to the next level.",
+      "Subset your icons, add your own, and serve up from a CDN.",
+      "Make your icons load 10x faster!",
+      "Looking for other great icon sets?",
+      "Need a custom icon in Font Awesome?"
+    );
+  var url_strings = new Array(
+    "ad_1_next_level",
+    "ad_2_all_value_add",
+    "ad_3_faster_loading",
+    "ad_4_more_icons",
+    "ad_5_custom_icons"
+  );
+  random_number = Math.floor( Math.random() * quotes.length );
+  random_quote = quotes[random_number];
+  random_url_string = url_strings[random_number];
+  $('#rotating-message').html(random_quote);
+  $('#rotating-url').attr("href", "https://fonticons.com/?utm_source=font_awesome_homepage&utm_medium=display&utm_content=" + random_url_string + "&utm_campaign=promo_4.3_update");
+
   // start the icon carousel
   $('#icon-carousel').carousel({
     interval: 5000

src/assets/less/site.less

@@ -20,7 +20,7 @@
 @import "site/footer";
 @import "site/lazy";
 @import "site/textured-bg";
-@import "site/black-tie";
+@import "site/fonticons";
 @import "site/fusion-ad";
 @import "site/bsap-ad";
 

src/assets/less/site/black-tie.less

@@ -1,10 +0,0 @@
-.black-tie {
-  background-color: @gray-darker;
-  color: #fff;
-  padding: 30px 0;
-  .tagline {
-    font-weight: 200;
-    font-size: 21px;
-    line-height: 45px;
-  }
-}

src/assets/less/site/fonticons.less

@@ -0,0 +1,62 @@
+.fonticons {
+  @fonticons-bg: #1c1e29;
+  @fonticons-orange: desaturate(#ff7f3f, 5%);
+  background-color: @fonticons-orange;
+  color: #fff;
+  padding: 10px 0;
+  border-bottom: solid 1px mix(@fonticons-bg, @fonticons-orange, 15%);
+  .message-container {
+    display: table;
+    width: auto;
+    margin: 0 auto;
+  }
+  .tagline, .action {
+    display: table-cell;
+    vertical-align: middle;
+  }
+  .tagline {
+    font-weight: 200;
+    font-size: 16px;
+    padding-right: 20px;
+  }
+  .btn-primary {
+    @color: #fff;
+    @background: mix(#fff,@fonticons-bg,10%);
+    @border: @fonticons-bg;
+    font-weight: bold;
+    color: @color;
+    background-color: @background;
+    border-color: @border;
+    border-bottom-width: 2px;
+    text-shadow: none;
+    border-radius: 4px;
+
+    &:hover,
+    &:focus,
+    &:active,
+    &.active,
+    .open > &.dropdown-toggle {
+      color: #fff;
+      background-color: darken(@border, 3%);
+      border-color: darken(@border, 12%);
+      border-bottom-color: darken(@border, 18%);
+    }
+    &:active,
+    &.active,
+    .open > &.dropdown-toggle {
+      background-image: none;
+    }
+    &.disabled,
+    &[disabled],
+    fieldset[disabled] & {
+      &,
+      &:hover,
+      &:focus,
+      &:active,
+      &.active {
+        background-color: @background;
+        border-color: @border;
+      }
+    }
+  }
+}

src/assets/less/site/responsive/screen-lg.less

@@ -49,9 +49,9 @@
     line-height: 36px;
   }
 
-  .black-tie .tagline {
+  .fonticons {
-    font-size: @font-size-h3;
+    .tagline {  }
-    line-height: 45px;
+    .action { width: 18%; }
   }
 
   .hide-lg { display: none; }

src/assets/less/site/responsive/screen-sm.less

@@ -39,9 +39,8 @@
     font-size: 19px;
   }
 
-  .black-tie .tagline {
+  .fonticons {
-    font-size: 18px;
+    .action { width: 33%; }
-    line-height: 22px;
   }
 
   .sticky-footer(271px, 60px);

src/assets/less/site/responsive/screen-xs.less

@@ -65,11 +65,10 @@
   }
 
 
-
+  .fonticons {
-  .black-tie .tagline {
+    padding: 15px 0;
-    font-size: 18px;
+    .tagline, .action { display: block; }
-    line-height: 22px;
+    .tagline { margin-bottom: 10px; }
-    margin-bottom: 15px;
   }