Adding Black Tie banners

src/_includes/navbar.html

@@ -1,17 +1,17 @@
-<div class="fonticons">
+<div class="collapse" id="banner">
   <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.
+        <span id="rotating-message"></span>
       </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>
+        <a id="rotating-url" class="btn btn-primary btn-block" href=""></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,10 +1,68 @@
 $(function() {
   var ads = [
-    { quote: "Take your icon game to the next level.", content: "ad_1_next_level"},
-    { quote: "Subset your icons, add your own, and serve up from a CDN.", content: "ad_2_all_value_add"},
-    { quote: "Make your icons load 10x faster!", content: "ad_3_faster_loading"},
-    { quote: "Looking for other great icon sets?", content: "ad_4_more_icons"},
-    { quote: "Need a custom icon in Font Awesome?", content: "ad_5_custom_icons"}
+    {
+      quote: "Take your icon game to the next level. Check out <strong>Fonticons</strong>, from the maker of Font Awesome.",
+      class: "fonticons",
+      url: "https://fonticons.com/?utm_source=font_awesome_homepage&utm_medium=display&utm_content=ad_1_next_level&utm_campaign=promo_4.3_update",
+      btn_text: "Gimme Some!"
+    },
+    {
+      quote: "Subset your icons, add your own, and serve up from a CDN. Check out <strong>Fonticons</strong>, from the maker of Font Awesome.",
+      class: "fonticons",
+      url: "https://fonticons.com/?utm_source=font_awesome_homepage&utm_medium=display&utm_content=ad_2_all_value_add&utm_campaign=promo_4.3_update",
+      btn_text: "Gimme Some!"
+    },
+    {
+      quote: "Make your icons load 10x faster! Check out <strong>Fonticons</strong>, from the maker of Font Awesome.",
+      class: "fonticons",
+      url: "https://fonticons.com/?utm_source=font_awesome_homepage&utm_medium=display&utm_content=ad_3_faster_loading&utm_campaign=promo_4.3_update",
+      btn_text: "Gimme Some!"
+    },
+    {
+      quote: "Looking for other great icon sets? Check out <strong>Fonticons</strong>, from the maker of Font Awesome.",
+      class: "fonticons",
+      url: "https://fonticons.com/?utm_source=font_awesome_homepage&utm_medium=display&utm_content=ad_4_more_icons&utm_campaign=promo_4.3_update",
+      btn_text: "Gimme Some!"
+    },
+    {
+      quote: "Need a custom icon in Font Awesome? Check out <strong>Fonticons</strong>, from the maker of Font Awesome.",
+      class: "fonticons",
+      url: "https://fonticons.com/?utm_source=font_awesome_homepage&utm_medium=display&utm_content=ad_5_custom_icons&utm_campaign=promo_4.3_update",
+      btn_text: "Gimme Some!"
+    },
+
+
+
+    {
+      quote: "So hot right now: <strong>Black Tie</strong>, the new multi-weight icon font from the maker of Font Awesome.",
+      class: "black-tie",
+      url: "https://blacktie.io/?utm_source=font_awesome_homepage&utm_medium=display&utm_content=ad_1_so_hot&utm_campaign=promo_4.3_update",
+      btn_text: "Buy it Now!"
+    },
+    {
+      quote: "<strong>Black Tie</strong>, from the creator of Font Awesome. On sale at the Kickstarter price for a limited time.",
+      class: "black-tie",
+      url: "https://blacktie.io/?utm_source=font_awesome_homepage&utm_medium=display&utm_content=ad_2_kickstarter&utm_campaign=promo_4.3_update",
+      btn_text: "Buy it Now!"
+    },
+    {
+      quote: "Get more Awesome: <strong>Black Tie</strong>, the new multi-weight icon font from the maker of Font Awesome.",
+      class: "black-tie",
+      url: "https://blacktie.io/?utm_source=font_awesome_homepage&utm_medium=display&utm_content=ad_3_more_awesome&utm_campaign=promo_4.3_update",
+      btn_text: "Buy it Now!"
+    },
+    {
+      quote: "The new hotness from the maker of Font Awesome: <strong>Black Tie</strong>, the multi-weight icon font.",
+      class: "black-tie",
+      url: "https://blacktie.io/?utm_source=font_awesome_homepage&utm_medium=display&utm_content=ad_4_new_hotness&utm_campaign=promo_4.3_update",
+      btn_text: "Buy it Now!"
+    },
+    {
+      quote: "Want clean, minimalist icons? Check out <strong>Black Tie</strong>, the new multi-weight icon font from the maker of Font Awesome.",
+      class: "black-tie",
+      url: "https://blacktie.io/?utm_source=font_awesome_homepage&utm_medium=display&utm_content=ad_5_clean_minimalist&utm_campaign=promo_4.3_update",
+      btn_text: "Buy it Now!"
+    }
   ];
 
   selectFonticonsAd();
@@ -96,7 +154,10 @@ $(function() {
     random_number = Math.floor( Math.random() * ads.length );
     random_ad = ads[random_number];
 
+    $('#banner').addClass(random_ad.class);
     $('#rotating-message').html(random_ad.quote);
-    $('#rotating-url').attr("href", "https://fonticons.com/?utm_source=font_awesome_homepage&utm_medium=display&utm_content=" + random_ad.content + "&utm_campaign=promo_4.3_update");
+    $('#rotating-url').attr("href", random_ad.url);
+    $('#rotating-url').html(random_ad.btn_text);
+    $('#banner').collapse('show');
   }
 });

src/assets/less/site.less

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

src/assets/less/site/banner-ad.less

@@ -0,0 +1,112 @@
+#banner {
+  color: #fff;
+  .message-container {
+    display: table;
+    width: auto;
+    margin: 0 auto;
+    padding: 15px 0;
+  }
+  .tagline, .action {
+    display: table-cell;
+    vertical-align: middle;
+  }
+  .tagline {
+    font-weight: 200;
+    font-size: 16px;
+    padding-right: 20px;
+  }
+
+  &.black-tie {
+    @black-tie-bg: #222222;
+    background-color: @black-tie-bg;
+    border-bottom: solid 1px mix(@black-tie-bg, #fff, 95%);
+
+    .btn-primary {
+      @color: @black-tie-bg;
+      @background: mix(#fff,@black-tie-bg,90%);
+      @border: mix(#fff,@black-tie-bg,60%);
+      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;
+        }
+      }
+    }
+  }
+
+  &.fonticons {
+    @fonticons-bg: #1c1e29;
+    @fonticons-orange: desaturate(#ff7f3f, 5%);
+    background-color: @fonticons-orange;
+    border-bottom: solid 1px mix(@fonticons-bg, @fonticons-orange, 15%);
+    .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/fonticons.less

@@ -1,62 +0,0 @@
-.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;
-      }
-    }
-  }
-}