Prepping Kickstarter modal and navbar

8 files changed, 140 insertions, 75 deletions

diff --git a/src/_includes/modals/kickstarter.html b/src/_includes/modals/kickstarter.html
new file mode 100644
index 000000000..7f6f770eb
--- /dev/null
+++ b/src/_includes/modals/kickstarter.html
@@ -0,0 +1,24 @@
+<div class="modal fade" id="modal-kickstarter" tabindex="-1" role="dialog" aria-labelledby="modal-kickstarter-label"
+     xmlns="http://www.w3.org/1999/html">
+  <div class="modal-dialog modal-lg" role="document">
+    <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-kickstarter-label">
+          <i class="fa fa-youtube-play fa-lg" aria-hidden="true"></i>&nbsp; Font Awesome 5!
+        </h2>
+      </div>
+      <div class="modal-body">
+
+        <style>.embed-container { position: relative; padding-bottom: 56.25%; height: 0; overflow: hidden; max-width: 100%; } .embed-container iframe, .embed-container object, .embed-container embed { position: absolute; top: 0; left: 0; width: 100%; height: 100%; }</style>
+        <div class='embed-container'><iframe src='https://www.youtube.com/embed/CNoH3J7iSrA' frameborder='0' allowfullscreen></iframe></div>
+
+        <a class="btn btn-kickstarter btn-lg btn-block margin-top" href="http://five.fontawesome.io/?utm_source=font_awesome_homepage&utm_medium=display&utm_content=kickstarter_modal&utm_campaign=promo_4.7_update"
+           onClick="_gaq.push(['_trackEvent', 'Outbound Modal Link', 'Check out the Kickstarter']);">
+          <h3 class="margin text-sans-serif strong">Check out the <br class="hide-sm hide-md hide-lg">Kickstarter! &nbsp;<i class="fa fa-external-link-square" aria-hidden="true"></i></h3>
+        </a>
+
+      </div>
+    </div>
+  </div>
+</div>
diff --git a/src/_includes/navbar.html b/src/_includes/navbar.html
index 39eeb07ba..c9a969aec 100644
--- a/src/_includes/navbar.html
+++ b/src/_includes/navbar.html
@@ -5,7 +5,7 @@
         <span id="rotating-message"></span>
       </div>
       <div class="action">
-        <a id="rotating-url" class="btn btn-primary btn-block" href=""></a>
+        <a id="rotating-url" class="btn btn-primary btn-lg btn-block" href=""></a>
       </div>
     </div>
   </div>
diff --git a/src/_layouts/base.html b/src/_layouts/base.html
index 74c94d56f..2e0cf9ded 100644
--- a/src/_layouts/base.html
+++ b/src/_layouts/base.html
@@ -45,6 +45,7 @@
     {{ content }}
   </div>
   {% include footer.html %}
+  {% include modals/kickstarter.html %}
   <script src="https://platform.twitter.com/widgets.js"></script>
   <script src="https://ajax.googleapis.com/ajax/libs/jquery/{{ site.jquery.version }}/jquery.min.js"></script>
   <script src="https://ajax.aspnetcdn.com/ajax/jquery.validate/{{ site.jquery_validate.version }}/jquery.validate.min.js"></script>
diff --git a/src/assets/js/site.js b/src/assets/js/site.js
index c81f216cb..f92d2fa50 100644
--- a/src/assets/js/site.js
+++ b/src/assets/js/site.js
@@ -2,82 +2,48 @@ $(function () {
   $("#newsletter").validate();
 
   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.",
-      class: "symbolset",
-      url: "https://symbolset.com/?utm_source=font_awesome_homepage&utm_medium=display&utm_content=ad_1_best_icons&utm_campaign=promo_4.7_update",
-      btn_text: "Gimme Some!"
-    },
-    {
-      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: "Fort Awesome <a href='#'>acquires</a> Symbolset!",
+    //   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.",
     //   class: "symbolset",
-    //   url: "https://symbolset.com/?utm_source=font_awesome_homepage&utm_medium=display&utm_content=ad_3_acquires&utm_campaign=promo_4.6_update",
-    //   btn_text: "Check out Symbolset"
+    //   url: "https://symbolset.com/?utm_source=font_awesome_homepage&utm_medium=display&utm_content=ad_1_best_icons&utm_campaign=promo_4.7_update",
+    //   btn_text: "Gimme Some!"
     // },
     // {
-    //   quote: "<a href='#' class='no-underline'>Fort Awesome <i class='fa fa-plus fa-lg'></i> Symbolset = <i class='fa fa-heart fa-lg'></i></a>",
+    //   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_4_math&utm_campaign=promo_4.6_update",
-    //   btn_text: "Check out 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: "Looking for other great icon sets? Check out <strong>Fort Awesome</strong>, from the maker of Font Awesome.",
+    //   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_4_more_icons&utm_campaign=promo_4.6_update",
+    //   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: "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!"
-    },
-    //
-    //
-    // {
-    //   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: "http://blacktie.io/?utm_source=font_awesome_homepage&utm_medium=display&utm_content=ad_2_kickstarter&utm_campaign=promo_4.6_update",
-    //   btn_text: "Check it Out!"
-    // },
-    // {
-    //   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: "http://blacktie.io/?utm_source=font_awesome_homepage&utm_medium=display&utm_content=ad_5_clean_minimalist&utm_campaign=promo_4.6_update",
-    //   btn_text: "Check it Out!"
-    // },
     // {
-    //   quote: "Want a different icon look? Check out <strong>Black Tie</strong>, our new multi-weight icon set.",
-    //   class: "black-tie",
-    //   url: "http://blacktie.io/?utm_source=font_awesome_homepage&utm_medium=display&utm_content=ad_6_different_look&utm_campaign=promo_4.6_update",
-    //   btn_text: "Check it Out!"
+    //   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: "Check out <strong>Black Tie</strong>, our new multi-weight icon set!",
-    //   class: "black-tie",
-    //   url: "http://blacktie.io/?utm_source=font_awesome_homepage&utm_medium=display&utm_content=ad_7_our_new_multi_weight&utm_campaign=promo_4.6_update",
-    //   btn_text: "Check it Out!"
+    //   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!"
     // }
+    {
+      quote: "Font Awesome 5. The most awesome-est Font Awesome ever!",
+      class: "kickstarter",
+      url: "http://five.fontawesome.io/?utm_source=font_awesome_homepage&utm_medium=display&utm_content=ad_1_most_awesome-est&utm_campaign=promo_4.7_update",
+      btn_text: "Check out the Kickstarter",
+    },
+    {
+      quote: "Get 1,000+ more icons and SVG in Font Awesome 5 Pro!",
+      class: "kickstarter",
+      url: "http://five.fontawesome.io/?utm_source=font_awesome_homepage&utm_medium=display&utm_content=ad_2_svg_and_1000_more&utm_campaign=promo_4.7_update",
+      btn_text: "Check out the Kickstarter",
+    },
   ];
 
   selectAd();
@@ -89,7 +55,27 @@ $(function () {
 
   $('[data-toggle="tooltip"]').tooltip();
   $('[data-toggle="popover"]').popover();
+  if (storageAvailable('localStorage') && !localStorage.seenKickstarterModal) {
+    $('#modal-kickstarter').modal('toggle');
+  }
 
+  if (storageAvailable('localStorage')) {
+    localStorage.seenKickstarterModal = true;
+  	// Yippee! We can use localStorage awesomeness
+  }
+
+  function storageAvailable(type) {
+  	try {
+  		var storage = window[type],
+  			x = '__storage_test__';
+  		storage.setItem(x, x);
+  		storage.removeItem(x);
+  		return true;
+  	}
+  	catch(e) {
+  		return false;
+  	}
+  }
   function selectAd() {
     random_number = Math.floor(Math.random() * ads.length);
     random_ad = ads[random_number];
diff --git a/src/assets/less/site.less b/src/assets/less/site.less
index 1c5d1a300..a9e13f6ee 100644
--- a/src/assets/less/site.less
+++ b/src/assets/less/site.less
@@ -33,6 +33,7 @@
 @import "site/bsap-ad";
 @import "site/sumome";
 @import "site/algolia";
+@import "site/kickstarter";
 
 @import "site/views";
 @import "site/store";
diff --git a/src/assets/less/site/banner-ad.less b/src/assets/less/site/banner-ad.less
index 947c9c75b..e544ed0be 100644
--- a/src/assets/less/site/banner-ad.less
+++ b/src/assets/less/site/banner-ad.less
@@ -211,4 +211,60 @@
     }
   }
 
+  &.kickstarter {
+    @kickstarter-bg: #489fdf;
+    background-color: @kickstarter-bg;
+    border-bottom: rgba(0,0,0,0.2);
+    .message-container { padding: 40px 0; }
+    .tagline { font-size: 24px; }
+    a:not(.btn) {
+      text-decoration: underline;
+      color: #fff;
+      &:hover { color: rgba(255,255,255,.8); }
+    }
+    .btn-primary {
+      @color: @kickstarter-bg;
+      @background: #fff;
+      @border: mix(#000,@kickstarter-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;
+        }
+      }
+    }
+  }
+
 }
diff --git a/src/assets/less/site/kickstarter.less b/src/assets/less/site/kickstarter.less
new file mode 100644
index 000000000..689a8c04a
--- /dev/null
+++ b/src/assets/less/site/kickstarter.less
@@ -0,0 +1,3 @@
+.btn-kickstarter {
+  .button-variant(#fff, #489fdf, mix(#000,#489fdf,10%));
+}
diff --git a/src/assets/less/site/responsive/screen-xs.less b/src/assets/less/site/responsive/screen-xs.less
index 7943e2feb..156e5bc38 100644
--- a/src/assets/less/site/responsive/screen-xs.less
+++ b/src/assets/less/site/responsive/screen-xs.less
@@ -81,20 +81,14 @@
   }
 
 
-  .navbar-org {
+  .navbar-org { display: none; }
+  #banner {
     text-align: center;
-    .container { padding: 0; }
-    .navbar-nav {
-      margin: 0;
-      > li + li {
-        margin-left: 0;
-      }
-    }
-    .nav > li {
-      float: left;
-      width: 50%;
-    }
+    .message-container, .tagline, .action { display: block; }
+    .tagline { padding-right: 0; }
+    .btn-primary { margin-top: 10px; }
   }
+
   .signup-button .btn { white-space: normal; }
   .v-get-started .get-started-cdn { padding: 5px 22px 22px 22px; }