Merge pull request #10308 from FortAwesome/talbs/fa5-kick-starter-post

Updating Docs Site Post-Font Awesome 5 Kickstarter

css/font-awesome.css

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

src/_includes/jumbotron-carousel.html

@@ -1,7 +1,7 @@
 <div class="jumbotron jumbotron-carousel hidden-print">
   <div class="container">
     <div class="row">
-      <div class="col-md-9 col-sm-8 text-center">
+      <div class="col-md-8 col-sm-8 text-center">
         <h1>Font Awesome</h1>
         <p>The iconic font and CSS toolkit</p>
         <div class="actions">
@@ -20,11 +20,8 @@
           Created by <a href="http://twitter.com/{{ site.fontawesome.author.twitter }}">Dave Gandy</a>
         </div>
       </div>
-      <div class="col-md-3 col-sm-4">
+      <div class="col-md-4 col-sm-4">
-        <div id="kickstarter-widget" class="kickstarter-widget-index">
+        <div id="icon-carousel" class="carousel slide">
-          {% include kickstarter-widget.html %}
-        </div>
-        <!-- <div id="icon-carousel" class="carousel slide">
           <div class="carousel-inner">
             <div class="active item"><div><i class="fa fa-font-awesome" aria-hidden="true"></i><span class="sr-only">flag icon</span></div></div>
             <div class="item"><div><i class="fa fa-handshake-o" aria-hidden="true"></i><span class="sr-only">fort awesome icon</span></div></div>
@@ -42,6 +39,7 @@
             <div class="item"><div><i class="fa fa-thumbs-o-up" aria-hidden="true"></i><span class="sr-only">thumbs up icon</span></div></div>
             <div class="item"><div><i class="fa fa-pied-piper-alt" aria-hidden="true"></i><span class="sr-only">pied piper icon</span></div></div>
           </div>
+          <!-- Carousel nav -->
           <a class="carousel-control left" href="#icon-carousel" data-slide="prev"
              onClick="_gaq.push(['_trackEvent', 'iconCarousel', 'Prev']);">
             <i class="fa fa-arrow-circle-left" aria-hidden="true"></i>
@@ -52,7 +50,7 @@
             <i class="fa fa-arrow-circle-right" aria-hidden="true"></i>
             <span class="sr-only">Next</span>
           </a>
-        </div> -->
+        </div>
       </div>
     </div>
 

src/_includes/jumbotron.html

@@ -1,17 +1,17 @@
 <div class="jumbotron jumbotron-ad hidden-print">
   <div class="container">
-
+    {% if page.in_page_nav %}
-    <div class="jumbotron-kickstarter">
+    <div class="col-md-9">
-      <div class="jumbotron-text">
       <h1>{{ jumbotron_h1 }}</h1>
       <p>{{ jumbotron_p }}</p>
     </div>
-      <div class="jumbotron-ks-ad">
-        <div id="kickstarter-widget" class="kickstarter-widget-index">
-          {% include kickstarter-widget.html %}
-        </div>
-      </div>
-    </div>
 
+    <div class="col-md-3">
+      {{ jumbotron_nav }}
+    </div>
+    {% else %}
+    <h1>{{ jumbotron_h1 }}</h1>
+    <p>{{ jumbotron_p }}</p>
+    {% endif %}
   </div>
 </div>

src/_includes/kickstarter-widget.html

@@ -1 +0,0 @@
-<iframe frameborder="0" height="420" scrolling="no" src="https://www.kickstarter.com/projects/232193852/font-awesome-5/widget/card.html?v=2" width="220"></iframe>

src/_includes/modals/fa5.html

@@ -1,23 +1,23 @@
-<div class="modal" id="modal-kickstarter" tabindex="-1" role="dialog" aria-labelledby="modal-kickstarter-label">
+<div class="modal" id="modal-fa5" tabindex="-1" role="dialog" aria-labelledby="modal-fa5-label">
   <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">Font Awesome 5!</h2>
+        <h2 class="modal-title" id="modal-fa5-label">Font Awesome 5 is funded and coming!</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 id="kickstarter-iframe" src="https://www.kickstarter.com/projects/232193852/font-awesome-5/widget/video.html" frameborder="0" scrolling="no" allowfullscreen></iframe>
+          <iframe id="fa5-iframe" src="https://www.kickstarter.com/projects/232193852/font-awesome-5/widget/video.html" frameborder="0" scrolling="no" allowfullscreen></iframe>
         </div>
 
         <p class="lead text-center margin-top-lg margin-bottom-lg">
-          Early backer prices extended and tons of stretch goals already funded!
+          Thanks to all of our Kickstarter backers who helped make the project successful. More information and updates are to come.
         </p>
-        <a class="btn btn-kickstarter 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="https://www.kickstarter.com/projects/232193852/font-awesome-5?ref=1oakzw"
            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>
+          <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>
         </a>
 
       </div>

src/_includes/navbar.html

@@ -3,9 +3,6 @@
     <div class="message-container">
       <div class="tagline">
         <span id="rotating-message"></span>
-        <div class="time-left">
-          <span id="time-left-message"></span>
-        </div>
       </div>
       <div class="action">
         <a id="rotating-url" class="btn btn-primary btn-lg btn-block" href=""></a>
@@ -14,7 +11,7 @@
   </div>
 </div>
 
-<!-- <div class="navbar navbar-org navbar-static-top">
+<div class="navbar navbar-org navbar-static-top">
   <div class="container">
     <ul class="nav navbar-nav navbar-right">
       <li>
@@ -37,7 +34,7 @@
     </ul>
     <div class="navbar-text navbar-right hide-xs">Build and serve a faster front end!</div>
   </div>
-</div> -->
+</div>
 
 <div class="navbar navbar-inverse navbar-static-top hidden-print">
   <div class="container">

src/_layouts/base.html

@@ -45,7 +45,7 @@
     {{ content }}
   </div>
   {% include footer.html %}
-  {% include modals/kickstarter.html %}
+  {% include modals/fa5.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>
@@ -55,7 +55,6 @@
   <script src="https://cdn.jsdelivr.net/underscorejs/1.8.3/underscore-min.js" integrity="sha256-obZACiHd7gkOk9iIL/pimWMTJ4W/pBsKu+oZnSeBIek=" crossorigin="anonymous"></script>
   <script src="https://cdn.jsdelivr.net/backbonejs/1.2.2/backbone-min.js" integrity="sha256-p6bkfFqmxtebrKOS+wyGi+Qf3d111eWUQP67keyXJ6Q=" crossorigin="anonymous"></script>
   <script src="https://cdn.jsdelivr.net/jsdelivr-rum/1.5/jsdelivr-rum.min.js" integrity="sha256-HlY2rbkgbiHhtilMXmQ86rjL/EIxGDtdg9GU9/T2ZxE=" crossorigin="anonymous"></script>
-  <script src="https://cdn.jsdelivr.net/momentjs/2.15.1/moment.min.js" integrity="sha256-4PIvl58L9q7iwjT654TQJM+C/acEyoG738iL8B8nhXg=" crossorigin="anonymous"></script>
   <script src="{{ page.relative_path }}assets/js/site.js"></script>
   <script src="{{ page.relative_path }}assets/js/search.js"></script>
   <script src="{{ page.relative_path }}assets/js/monetization.js" type="text/javascript"></script>

src/assets/js/site.js

@@ -2,54 +2,36 @@ $(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: "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!"
-    // }
     {
-      quote: "Font Awesome 5. The most awesome-est Font Awesome ever!",
+      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: "kickstarter",
+      class: "symbolset",
-      url: "https://www.kickstarter.com/projects/232193852/font-awesome-5?ref=c92610",
+      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: "Check out the Kickstarter",
+      btn_text: "Gimme Some!"
     },
     {
-      quote: "Get 1,000+ more icons and SVG in Font Awesome 5 Pro!",
+      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: "kickstarter",
+      class: "symbolset",
-      url: "https://www.kickstarter.com/projects/232193852/font-awesome-5?ref=c92610",
+      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: "Check out the Kickstarter",
+      btn_text: "Gimme Some!"
     },
     {
-      quote: "Early backer prices extended and tons of stretch goals already funded!",
+      quote: "Take your icon game to the next level. Check out <strong>Fort Awesome</strong>, from the maker of Font Awesome.",
-      class: "kickstarter",
+      class: "fort-awesome",
-      url: "https://www.kickstarter.com/projects/232193852/font-awesome-5?ref=c92610",
+      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: "Font Awesome 5 Kickstarter",
+      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();
@@ -62,41 +44,20 @@ $(function () {
   $('[data-toggle="tooltip"]').tooltip();
   $('[data-toggle="popover"]').popover();
 
-  if (storageAvailable('localStorage') && !localStorage.seenKickstarterModal) {
+  if (storageAvailable('localStorage') && !localStorage.seenFA5Modal) {
-    $('#modal-kickstarter')
+    $('#modal-fa5')
       .modal('toggle')
       .on('hidden.bs.modal', function (e) {
-        $('#kickstarter-iframe').remove();
+        $('#fa5-iframe').remove();
       });
     ;
   }
 
   if (storageAvailable('localStorage')) {
-    localStorage.seenKickstarterModal = true;
+    localStorage.seenFA5Modal = true;
   	// Yippee! We can use localStorage awesomeness
   }
 
-  function timeLeft() {
-    var now, ksEndsAt, hoursLeft, minutesLeft, humanized;
-
-    try {
-      now = moment();
-      ksEndsAt = moment("2016-12-01 12:01:00-05");
-      hoursLeft = ksEndsAt.diff(now, "hours");
-      minutesLeft = ksEndsAt.diff(now, "minutes") - hoursLeft * 60;
-    } catch (e) {}
-
-    if (hoursLeft < 0 || minutesLeft < 0) {
-      return;
-    }
-
-    humanized = hoursLeft + " " + ((hoursLeft === 1) ? "hour" : "hours") + ", " + minutesLeft + " " + ((minutesLeft === 1) ? "minute" : "minutes");
-
-    $('#time-left-message').html('Just <span class="duration">' + humanized + '</span> left to support the Font Awesome 5 Kickstarter for $20');
-
-    setTimeout(timeLeft, 2000);
-  }
-
   function storageAvailable(type) {
   	try {
   		var storage = window[type],
@@ -114,8 +75,6 @@ $(function () {
     random_number = Math.floor(Math.random() * ads.length);
     random_ad = ads[random_number];
 
-    timeLeft();
-
     $('#banner').addClass(random_ad.class);
     $('#rotating-message').html(random_ad.quote);
     $('#rotating-url').attr("href", random_ad.url);

src/assets/less/site.less

@@ -33,7 +33,7 @@
 @import "site/bsap-ad";
 @import "site/sumome";
 @import "site/algolia";
-@import "site/kickstarter";
+@import "site/fa5";
 @import "site/newsletter";
 
 @import "site/views";

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

@@ -210,78 +210,4 @@
       }
     }
   }
-
-  &.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; }
-    .time-left {
-      font-size: 18px;
-      color: mix(@kickstarter-bg, #fff, 20%);
-    }
-    @keyframes flash-duration {
-      from {
-        color: #fff;
-      }
-      to {
-        color: mix(@kickstarter-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: @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;
-        }
-      }
-    }
-  }
-
 }

src/assets/less/site/fa5.less

@@ -1,12 +1,7 @@
-.btn-kickstarter {
+.btn-fa5 {
   .button-variant(#fff, #489fdf, mix(#000,#489fdf,10%));
 }
 
-#kickstarter-widget {
-  margin: -30px auto -70px;
-  width: 220px;
-}
-
 .jumbotron-ad .well {
   background-color: rgba(255,255,255,.3);
   border-color: rgba(255,255,255,.15);

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

@@ -55,11 +55,4 @@
   }
 
   .hide-lg { display: none; }
-
-  .jumbotron-ad #newsletter {
-    margin-top: 30px;
-    margin-right: 250px;
-    margin-bottom: -70px;
-  }
-
 }

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

@@ -14,13 +14,4 @@
       border-bottom-left-radius: 0;
     }
   }
-
-  .jumbotron-kickstarter {
-    display: flex;
-    flex-direction: row;
-    flex-wrap: wrap;
-    justify-content: space-between;
-    align-items: center;
-  }
-
 }

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

@@ -45,10 +45,4 @@
 
   .hide-sm { display: none; }
   .v-get-started .get-started-cdn { padding: 5px 22px 22px 22px; }
-
-
-  // .jumbotron-ks-ad { flex-basis: 25%; }
-  // .jumbotron-text { flex-basis: 75%; }
-  .jumbotron-ks-ad { width: 220px; }
-  .jumbotron-text { width: 500px; }
 }

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

@@ -91,13 +91,4 @@
 
   .signup-button .btn { white-space: normal; }
   .v-get-started .get-started-cdn { padding: 5px 22px 22px 22px; }
-
-  #kickstarter-widget {
-    margin: 0 auto -40px;
-  }
-  .jumbotron-carousel {
-    #kickstarter-widget {
-      margin-top: 20px;
-    }
-  }
 }