Merge pull request #10424 from FortAwesome/kickstarter-preorders

FA5 Pre-order links

css/font-awesome.css

@@ -61,7 +61,7 @@
 }
 .fa-border {
   padding: .2em .25em .15em;
-  border: solid 0.08em #eee;
+  border: solid 0.08em #eeeeee;
   border-radius: .1em;
 }
 .fa-pull-left {
@@ -176,7 +176,7 @@
   font-size: 2em;
 }
 .fa-inverse {
-  color: #fff;
+  color: #ffffff;
 }
 /* Font Awesome uses the Unicode Private Use Area (PUA) to ensure screen
    readers do not read off random characters that represent icons */

src/_includes/modals/fa5.html

@@ -3,7 +3,7 @@
     <div class="modal-content">
       <div class="modal-header">
         <button type="button" class="close" data-dismiss="modal" aria-label="Close"><i class="fa fa-times" aria-hidden="true"></i><span class="close"></span></button>
-        <h2 class="modal-title" id="modal-fa5-label">Font Awesome 5 is funded and coming!</h2>
+        <h2 class="modal-title" id="modal-fa5-label">Font Awesome 5 Pre-Orders Now Available!</h2>
       </div>
       <div class="modal-body">
 
@@ -13,11 +13,11 @@
         </div>
 
         <p class="lead text-center margin-top-lg margin-bottom-lg">
-          Thanks to all of our Kickstarter backers who helped make the project successful. More information and updates are to come.
+          Pre-order and get Font Awesome 5 Pro and <strong>ALL</strong> stretch goals for just $40!
         </p>
-        <a class="btn btn-fa5 btn-lg btn-block" href="https://www.kickstarter.com/projects/232193852/font-awesome-5?ref=1oakzw"
+        <a class="btn btn-fa5 btn-lg btn-block" href="http://five.fontawesome.com" target="_blank"
-           onClick="_gaq.push(['_trackEvent', 'Outbound Modal Link', 'Check out the Kickstarter']);">
+           onClick="_gaq.push(['_trackEvent', 'Outbound Modal Link', 'Pre-Order']);">
-          <h3 class="margin text-sans-serif strong">Check out the details on <br class="hide-sm hide-md hide-lg">Kickstarter &nbsp;<i class="fa fa-external-link-square" aria-hidden="true"></i></h3>
+          <h3 class="margin text-sans-serif strong">Pre-Order! &nbsp;<i class="fa fa-external-link-square" aria-hidden="true"></i></h3>
         </a>
 
       </div>

src/_includes/navbar.html

@@ -5,37 +5,12 @@
         <span id="rotating-message"></span>
       </div>
       <div class="action">
-        <a id="rotating-url" class="btn btn-primary btn-lg btn-block" href=""></a>
+        <a id="rotating-url" class="btn btn-primary btn-lg btn-block" href="" target="_blank"></a>
       </div>
     </div>
   </div>
 </div>
 
-<div class="navbar navbar-org navbar-static-top">
-  <div class="container">
-    <ul class="nav navbar-nav navbar-right">
-      <li>
-        <a href="http://fortawesome.com/start?utm_source=font_awesome_navbar&utm_medium=display&utm_content=font_awesome_navbar&utm_campaign=promo_{{ site.fontawesome.minor_version }}_update" data-toggle="tooltip" data-container="body" data-placement="bottom" data-html="true" title="Take your front end game<br>to the next level!">
-          <i class="fa fa-fort-awesome fa-lg valign-baseline"></i>&nbsp;
-          Fort Awesome
-        </a>
-      </li>
-      <li>
-        <a href="http://symbolset.com/?utm_source=font_awesome_navbar&utm_medium=display&utm_content=font_awesome_navbar&utm_campaign=promo_{{ site.fontawesome.minor_version }}_update" data-toggle="tooltip" data-container="body" data-placement="bottom" data-html="true" title="Get the perfect icon set!">
-          <i class="fas fas-heart-ss"></i>&nbsp;
-          Symbolset
-        </a>
-      </li>
-      <li class="active">
-        <a href="http://fontawesome.io/?utm_source=font_awesome_navbar&utm_medium=display&utm_content=font_awesome_navbar&utm_campaign=promo_{{ site.fontawesome.minor_version }}_update" data-toggle="tooltip" data-container="body" data-placement="bottom" data-html="true" title="The iconic font<br>&amp; CSS toolkit">
-          <i class="fa fa-font-awesome"></i>&nbsp;
-          Font Awesome</a>
-      </li>
-    </ul>
-    <div class="navbar-text navbar-right hide-xs">Build and serve a faster front end!</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

@@ -3,35 +3,11 @@ $(function () {
 
   var ads = [
     {
-      quote: "<i class='fas fas-perfect fas-2x valign-middle margin-right'></i>Looking for the best icon sets? Check out <strong>Symbolset</strong>, <a href='https://articles.fortawesome.com/fort-awesome-acquires-symbolset-72229dab2c13'>now</a> from the maker of Font Awesome.",
+      quote: "Pre-order and get Font Awesome 5 Pro and <strong>ALL</strong> stretch goals for just $40!",
-      class: "symbolset",
+      class: "fa5",
-      url: "https://symbolset.com/?utm_source=font_awesome_homepage&utm_medium=display&utm_content=ad_1_best_icons&utm_campaign=promo_4.7_update",
+      url: "http://five.fontawesome.com",
-      btn_text: "Gimme Some!"
+      btn_text: "Pre-order FA Pro! &nbsp;<i class='fa fa-external-link'></i>",
     },
-    {
-      quote: "<i class='fas fas-curate fas-2x valign-middle margin-right'></i>Need a different look for your icons? Check out <strong>Symbolset</strong>, <a href='https://articles.fortawesome.com/fort-awesome-acquires-symbolset-72229dab2c13'>now</a> from the maker of Font Awesome.",
-      class: "symbolset",
-      url: "https://symbolset.com/?utm_source=font_awesome_homepage&utm_medium=display&utm_content=ad_2_different_look&utm_campaign=promo_4.7_update",
-      btn_text: "Gimme Some!"
-    },
-    {
-      quote: "Take your icon game to the next level. Check out <strong>Fort Awesome</strong>, from the maker of Font Awesome.",
-      class: "fort-awesome",
-      url: "https://fortawesome.com/start?utm_source=font_awesome_homepage&utm_medium=display&utm_content=ad_1_next_level&utm_campaign=promo_4.7_update",
-      btn_text: "Gimme Some!"
-    },
-    {
-      quote: "Make your icons load 10x faster! Check out <strong>Fort Awesome</strong>, from the maker of Font Awesome.",
-      class: "fort-awesome",
-      url: "https://fortawesome.com/start?utm_source=font_awesome_homepage&utm_medium=display&utm_content=ad_3_faster_loading&utm_campaign=promo_4.7_update",
-      btn_text: "Gimme Some!"
-    },
-    {
-      quote: "Want to add your own icon? Check out <strong>Fort Awesome</strong>, from the maker of Font Awesome.",
-      class: "fort-awesome",
-      url: "https://fortawesome.com/start?utm_source=font_awesome_homepage&utm_medium=display&utm_content=ad_6_your_own_icon&utm_campaign=promo_4.7_update",
-      btn_text: "Gimme Some!"
-    }
   ];
 
   selectAd();
@@ -44,7 +20,7 @@ $(function () {
   $('[data-toggle="tooltip"]').tooltip();
   $('[data-toggle="popover"]').popover();
 
-  if (storageAvailable('localStorage') && !localStorage.seenFA5Modal) {
+  if (storageAvailable('localStorage') && !localStorage.seenFA5Modal2) {
     $('#modal-fa5')
       .modal('toggle')
       .on('hidden.bs.modal', function (e) {
@@ -54,7 +30,7 @@ $(function () {
   }
 
   if (storageAvailable('localStorage')) {
-    localStorage.seenFA5Modal = true;
+    localStorage.seenFA5Modal2 = true;
   	// Yippee! We can use localStorage awesomeness
   }
 

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

@@ -210,4 +210,79 @@
       }
     }
   }
+
+  &.fa5 {
+    @fa5-bg: #489fdf;
+    background-color: @fa5-bg;
+    border-bottom: rgba(0,0,0,0.2);
+    .message-container { padding: 40px 0; }
+    .tagline { font-size: 24px; }
+    .fa-external-link { vertical-align: -10%; }
+    .time-left {
+      font-size: 18px;
+      color: mix(@fa5-bg, #fff, 20%);
+    }
+    @keyframes flash-duration {
+      from {
+        color: #fff;
+      }
+      to {
+        color: mix(@fa5-bg, #fff, 20%);
+      }
+    }
+    .duration {
+      font-weight: 600;
+      animation-name: flash-duration;
+      animation-duration: 1.0s;
+    }
+    a:not(.btn) {
+      text-decoration: underline;
+      color: #fff;
+      &:hover { color: rgba(255,255,255,.8); }
+    }
+    .btn-primary {
+      @color: @fa5-bg;
+      @background: #fff;
+      @border: mix(#000,@fa5-bg,10%);
+      font-weight: 600;
+      font-size: 22px;
+      padding: 14px 28px;
+      border-radius: 30px;
+
+      color: @color;
+      background-color: @background;
+      border-color: @border;
+      border-bottom-width: 2px;
+      text-shadow: none;
+
+      &:hover,
+      &:focus,
+      &:active,
+      &.active,
+      .open > &.dropdown-toggle {
+        color: #fff;
+        background-color: rgba(0,0,0,0.2);
+        border-color: rgba(0,0,0,0.2);
+        border-bottom-color: rgba(0,0,0,0.2);
+      }
+      &:active,
+      &.active,
+      .open > &.dropdown-toggle {
+        background-image: none;
+      }
+      &.disabled,
+      &[disabled],
+      fieldset[disabled] & {
+        &,
+        &:hover,
+        &:focus,
+        &:active,
+        &.active {
+          background-color: @background;
+          border-color: @border;
+        }
+      }
+    }
+  }
+
 }