Updating nav and modals for FA5 launch

README.md

@@ -4,7 +4,7 @@
 Font Awesome is a full suite of 675 pictographic icons for easy scalable vector graphics on websites,
 created and maintained by [Dave Gandy](https://twitter.com/davegandy).
 Stay up to date with the latest release and announcements on Twitter:
-[@fontawesome](http://twitter.com/fontawesome).
+[@fontawesome](https://twitter.com/fontawesome).
 
 Get started at http://fontawesome.io!
 
@@ -14,7 +14,7 @@ Get started at http://fontawesome.io!
 - Font Awesome CSS, LESS, and Sass files are licensed under the MIT License:
   - https://opensource.org/licenses/mit-license.html
 - The Font Awesome documentation is licensed under the CC BY 3.0 License:
-  - http://creativecommons.org/licenses/by/3.0/
+  - https://creativecommons.org/licenses/by/3.0/
 - Attribution is no longer required as of Font Awesome 3.0, but much appreciated:
   - `Font Awesome by Dave Gandy - http://fontawesome.io`
 - Full details: http://fontawesome.io/license/

src/_includes/modals/download.html

@@ -10,22 +10,18 @@
         </h2>
       </div>
       <h3 class="bg-fa5 margin-none padding-lg text-center">
-        Get 2,000+ icons with Font Awesome Pro and <strong>ALL</strong> KS rewards for just $60!
+        Font Awesome 5 Released!
       </h3>
       <div class="modal-body">
-        <div class="text-lg margin-bottom-lg padding-bottom">
-          Before you download, check out <b>Font Awesome Pro&mdash;</b>
-        </div>
-
-        <div class="row margin-bottom-lg">
+        <div class="row margin-bottom-lg margin-top">
           <div class="col-md-2 col-sm-2 col-xs-2 text-right padding-right-sm">
             <i class="fas fas-trophy-alt fas-3x fas-fw text-muted hidden-xs"></i>
             <i class="fas fas-trophy-alt fas-2x fas-fw text-muted hidden-sm hidden-md hidden-lg"></i>
           </div>
           <div class="col-md-9 col-sm-9 col-xs-9">
-            <h4 class="page-header margin-top-none padding-bottom-sm margin-bottom-sm">Tons More Icons</h4>
+            <h4 class="page-header margin-top-none padding-bottom-sm margin-bottom-sm">More Icons</h4>
             <p>
-              Get 2,148 icons right now with Pro, plus another 2,000 from 46 icon category packs as we finish them!
+              Get 893 icons right now with FA Free, plus another 1,283 icons with Pro, which also gets you another 46 icon category packs as we finish them!
             </p>
           </div>
         </div>
@@ -35,29 +31,28 @@
             <i class="fas fas-flask fas-2x fas-fw text-muted hidden-sm hidden-md hidden-lg"></i>
           </div>
           <div class="col-md-9 col-sm-9 col-xs-9">
-            <h4 class="page-header margin-top-none padding-bottom-sm margin-bottom-sm">SVG Framework &amp; More</h4>
+            <h4 class="page-header margin-top-none padding-bottom-sm margin-bottom-sm">All-New SVG</h4>
             <p>
-              Get the latest tech upgrades, easy upgrades from v4, icons in 3 styles,
-              <a href="https://fontawesome.com/?utm_source=font_awesome_homepage&utm_medium=display&utm_campaign=two_thousand_60&utm_content=download_modal#schedule-info">&amp; tons more as we finish</a>.
+              Our all-new SVG with JavaScript gives you all the power of SVG without the usual hassle.
             </p>
           </div>
         </div>
         <div class="row margin-bottom-lg">
           <div class="col-md-2 col-sm-2 col-xs-2 text-right padding-right-sm">
-            <i class="fas fas-stopwatch fas-3x fas-fw text-muted hidden-xs"></i>
-            <i class="fas fas-stopwatch fas-2x fas-fw text-muted hidden-sm hidden-md hidden-lg"></i>
+            <i class="fas fas-rocket fas-3x fas-fw text-muted hidden-xs"></i>
+            <i class="fas fas-rocket fas-2x fas-fw text-muted hidden-sm hidden-md hidden-lg"></i>
           </div>
           <div class="col-md-9 col-sm-9 col-xs-10">
-            <h4 class="page-header margin-top-none padding-bottom-sm margin-bottom-sm">Early Access</h4>
+            <h4 class="page-header margin-top-none padding-bottom-sm margin-bottom-sm">Tons More</h4>
             <p>
-              Get early access and input into new icons, categories, and frameworks with our private GitHub repo!
+              Ligatures for easier desktop use, shim for quick upgrades from 4, and more styles, icons, and tools with FA Pro.
             </p>
           </div>
         </div>
 
-        <a href="https://fontawesome.com/?utm_source=font_awesome_homepage&utm_medium=display&utm_campaign=two_thousand_60&utm_content=download_modal" class="btn btn-fa5 btn-lg btn-block">
+        <a href="https://fontawesome.com/?utm_source=font_awesome_homepage&utm_medium=display&utm_campaign=fa5_released&utm_content=download_modal" class="btn btn-fa5 btn-lg btn-block">
           <h3 class="margin-top margin-bottom strong">
-            Check out <span class="hidden-xs">Font Awesome</span><span class="hidden-sm hidden-md hidden-lg">FA</span> Pro! &nbsp;<i class="fas fas-external-link" aria-hidden="true"></i>
+            Font Awesome 5 &nbsp;<i class="fas fas-external-link" aria-hidden="true"></i>
           </h3>
         </a>
         <div class="text-center margin-top margin-bottom">or</div>

src/_includes/modals/fa5.html

@@ -1,23 +1,51 @@
 <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-dialog" role="document">
     <div class="modal-content">
-      <div class="modal-header">
+      <div class="modal-header bg-fa5">
         <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>
-        <h3 class="modal-title" id="modal-fa5-label">Font Awesome Pro</h3>
+        <h3 class="modal-title" id="modal-fa5-label">Font Awesome 5 Released!</h3>
       </div>
-      <h3 class="bg-fa5 margin-none padding-lg text-center">
-        Get 2,000+ icons with Font Awesome Pro and <strong>ALL</strong> KS rewards for $60!
-      </h3>
       <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="fa5-iframe" src="https://www.kickstarter.com/projects/232193852/font-awesome-5/widget/video.html" frameborder="0" scrolling="no" allowfullscreen></iframe>
+        <div class="row margin-bottom-lg margin-top">
+          <div class="col-md-2 col-sm-2 col-xs-2 text-right padding-right-sm">
+            <i class="fas fas-trophy-alt fas-3x fas-fw text-muted hidden-xs"></i>
+            <i class="fas fas-trophy-alt fas-2x fas-fw text-muted hidden-sm hidden-md hidden-lg"></i>
+          </div>
+          <div class="col-md-9 col-sm-9 col-xs-9">
+            <h4 class="page-header margin-top-none padding-bottom-sm margin-bottom-sm">More Icons</h4>
+            <p>
+              Get 893 icons right now with FA Free, plus another 1,283 icons with Pro, which also gets you another 46 icon category packs as we finish them!
+            </p>
+          </div>
+        </div>
+        <div class="row margin-bottom-lg">
+          <div class="col-md-2 col-sm-2 col-xs-2 text-right padding-right-sm">
+            <i class="fas fas-flask fas-3x fas-fw text-muted hidden-xs"></i>
+            <i class="fas fas-flask fas-2x fas-fw text-muted hidden-sm hidden-md hidden-lg"></i>
+          </div>
+          <div class="col-md-9 col-sm-9 col-xs-9">
+            <h4 class="page-header margin-top-none padding-bottom-sm margin-bottom-sm">All-New SVG</h4>
+            <p>
+              Our all-new SVG with JavaScript gives you all the power of SVG without the usual hassle.
+            </p>
+          </div>
+        </div>
+        <div class="row margin-bottom-lg">
+          <div class="col-md-2 col-sm-2 col-xs-2 text-right padding-right-sm">
+            <i class="fas fas-rocket fas-3x fas-fw text-muted hidden-xs"></i>
+            <i class="fas fas-rocket fas-2x fas-fw text-muted hidden-sm hidden-md hidden-lg"></i>
+          </div>
+          <div class="col-md-9 col-sm-9 col-xs-10">
+            <h4 class="page-header margin-top-none padding-bottom-sm margin-bottom-sm">Tons More</h4>
+            <p>
+              Ligatures for easier desktop use, shim for quick upgrades from 4, and more styles, icons, and tools with FA Pro.
+            </p>
+          </div>
         </div>
 
-        <a class="btn btn-fa5 btn-lg btn-block padding-left-sm padding-right-sm margin-top-lg" href="https://fontawesome.com/?utm_source=font_awesome_homepage&utm_medium=display&utm_campaign=two_thousand_60&utm_content=kickstarter_modal" target="_blank"
-           onClick="_gaq.push(['_trackEvent', 'Outbound Modal Link', 'Pre-Order']);">
+        <a href="https://fontawesome.com/?utm_source=font_awesome_homepage&utm_medium=display&utm_campaign=fa5_released&utm_content=auto_modal" class="btn btn-fa5 btn-lg btn-block">
           <h3 class="margin-top margin-bottom strong">
-            Check out <span class="hidden-xs">Font Awesome</span><span class="hidden-sm hidden-md hidden-lg">FA</span> Pro! &nbsp;<i class="fas fas-external-link" aria-hidden="true"></i>
+            Font Awesome 5 &nbsp;<i class="fas fas-external-link" aria-hidden="true"></i>
           </h3>
         </a>
 

src/_includes/navbar.html

@@ -1,14 +1,13 @@
-<div class="collapse hidden-print" id="banner">
+<div class="hidden-print fa5" id="banner">
   <div class="container">
     <div class="message-container">
       <div class="tagline">
-        <span id="rotating-message"></span>
-          <div class="time-left">
-            <span id="time-left-message"></span>
-          </div>
+        <strong>Font Awesome 5 released!</strong> New icons, SVG, ligatures, &amp; tons more.
       </div>
       <div class="action">
-        <a id="rotating-url" class="btn btn-primary btn-lg btn-block" href="" target="_blank"></a>
+        <a id="rotating-url" class="btn btn-primary btn-lg btn-block" href="https://fontawesome.com/?utm_source=font_awesome_homepage&utm_medium=display&utm_campaign=fa5_released&utm_content=banner" target="_blank">
+          Font Awesome 5 &nbsp;<i class='fas fas-external-link'></i>
+        </a>
       </div>
     </div>
   </div>

src/assets/js/site.js

@@ -5,12 +5,12 @@ $(function () {
     {
       quote: "Get 2,000+ icons with Font Awesome Pro and <strong>ALL</strong> KS rewards for just $60!",
       class: "fa5",
-      url: "https://fontawesome.com/?utm_source=font_awesome_homepage&utm_medium=display&utm_campaign=two_thousand_60&utm_content=banner",
+      url: "https://fontawesome.com/?utm_source=font_awesome_homepage&utm_medium=display&utm_campaign=fa5_released&utm_content=banner",
       btn_text: "Check out FA Pro &nbsp;<i class='fas fas-external-link'></i>",
     },
   ];
 
-  selectAd();
+  // selectAd();
 
   // start the icon carousel
   $('#icon-carousel').carousel({
@@ -20,7 +20,7 @@ $(function () {
   $('[data-toggle="tooltip"]').tooltip();
   $('[data-toggle="popover"]').popover();
 
-  if (storageAvailable('localStorage') && !localStorage.seenFA5Modal3) {
+  if (storageAvailable('localStorage') && !localStorage.seenFA5ReleasedModal) {
     $('#modal-fa5')
       .modal('toggle')
       .on('hidden.bs.modal', function (e) {
@@ -30,7 +30,7 @@ $(function () {
   }
 
   if (storageAvailable('localStorage')) {
-    localStorage.seenFA5Modal3 = true;
+    localStorage.seenFA5ReleasedModal = true;
   	// Yippee! We can use localStorage awesomeness
   }
 

src/assets/less/site/fa5.less

@@ -14,3 +14,5 @@
   background-color: @fa5-color;
   color: #fff;
 }
+
+.modal-content { overflow: hidden; }