diff options
author | Dave Gandy <dave@davegandy.com> | 2017-12-07 20:07:36 +0300 |
---|---|---|
committer | Dave Gandy <dave@davegandy.com> | 2017-12-07 20:07:36 +0300 |
commit | b05de6e79c7a1abcf97bb4e6f24c531074852ff8 (patch) | |
tree | cf6376a18174383f9acca1ff2a1db72a15f10988 | |
parent | 7d567844c8e28adfaa4f81d5e0a85ea31c1a1563 (diff) |
Updating nav and modals for FA5 launch
-rw-r--r-- | README.md | 4 | ||||
-rw-r--r-- | src/_includes/modals/download.html | 29 | ||||
-rw-r--r-- | src/_includes/modals/fa5.html | 52 | ||||
-rw-r--r-- | src/_includes/navbar.html | 11 | ||||
-rw-r--r-- | src/assets/js/site.js | 8 | ||||
-rw-r--r-- | src/assets/less/site/fa5.less | 2 |
6 files changed, 65 insertions, 41 deletions
@@ -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/ diff --git a/src/_includes/modals/download.html b/src/_includes/modals/download.html index 439b2a67c..fb0f02205 100644 --- a/src/_includes/modals/download.html +++ b/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—</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 & 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">& 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! <i class="fas fas-external-link" aria-hidden="true"></i> + Font Awesome 5 <i class="fas fas-external-link" aria-hidden="true"></i> </h3> </a> <div class="text-center margin-top margin-bottom">or</div> diff --git a/src/_includes/modals/fa5.html b/src/_includes/modals/fa5.html index 8d5fcb617..93b662482 100644 --- a/src/_includes/modals/fa5.html +++ b/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! <i class="fas fas-external-link" aria-hidden="true"></i> + Font Awesome 5 <i class="fas fas-external-link" aria-hidden="true"></i> </h3> </a> diff --git a/src/_includes/navbar.html b/src/_includes/navbar.html index c5fdcef5f..2ba605509 100644 --- a/src/_includes/navbar.html +++ b/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, & 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 <i class='fas fas-external-link'></i> + </a> </div> </div> </div> diff --git a/src/assets/js/site.js b/src/assets/js/site.js index f3c4be82e..c6592a648 100644 --- a/src/assets/js/site.js +++ b/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 <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 } diff --git a/src/assets/less/site/fa5.less b/src/assets/less/site/fa5.less index 0fb42cd2a..57ea2a96a 100644 --- a/src/assets/less/site/fa5.less +++ b/src/assets/less/site/fa5.less @@ -14,3 +14,5 @@ background-color: @fa5-color; color: #fff; } + +.modal-content { overflow: hidden; }
\ No newline at end of file |