updating FA5 info, algolia logo, removing newsletter signup from icons page

This commit is contained in:
Dave Gandy 2017-09-06 16:14:36 -04:00
parent cef4f1ef8c
commit 976f659c9c
6 changed files with 39 additions and 40 deletions

View File

@ -14,18 +14,6 @@
Before you download, check out <b>Font Awesome Pro&mdash;</b> Before you download, check out <b>Font Awesome Pro&mdash;</b>
</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-money fas-3x fas-fw text-muted hidden-xs"></i>
<i class="fas fas-money 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">Super Low Price</h4>
<p>
For a limited time, get Pro, all 46 icon packs ($460 value), &amp; ALL Kickstarter stretch goals!
</p>
</div>
</div>
<div class="row margin-bottom-lg"> <div class="row margin-bottom-lg">
<div class="col-md-2 col-sm-2 col-xs-2 text-right padding-right-sm"> <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-3x fas-fw text-muted hidden-xs"></i>
@ -34,7 +22,7 @@
<div class="col-md-9 col-sm-9 col-xs-9"> <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">Tons More Icons</h4>
<p> <p>
With Pro, get the newest look and thousands more icons than Font Awesome 4! Get 2,148 icons right now with Pro, plus another 2,000 from 46 icon category packs as we finish them!
</p> </p>
</div> </div>
</div> </div>
@ -44,14 +32,27 @@
<i class="fas fas-flask fas-2x fas-fw text-muted hidden-sm hidden-md hidden-lg"></i> <i class="fas fas-flask fas-2x fas-fw text-muted hidden-sm hidden-md hidden-lg"></i>
</div> </div>
<div class="col-md-9 col-sm-9 col-xs-9"> <div class="col-md-9 col-sm-9 col-xs-9">
<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">SVG Framework &amp; More</h4>
<p> <p>
Get early access and input into new icons and frameworks with our private GitHub repo! Get the latest tech upgrades, easy upgrades from v4, early access to the betas, icons in 3 styles,
<a href="https://fontawesome.com/?utm_source=font_awesome_homepage&utm_medium=display&utm_campaign=september_last_chance&utm_content=download_modal#schedule-info">&amp; tons more as we finish</a>.
</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>
</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">Limited-Time Price</h4>
<p>
September is the last chance to get Pro, all 46 icon packs ($460 value), &amp; ALL Kickstarter rewards for just $40!
</p> </p>
</div> </div>
</div> </div>
<a href="https://fontawesome.com/?utm_source=font_awesome_homepage&utm_medium=display&utm_content=download_modal&utm_campaign=promo_{{ site.fontawesome.minor_version }}_update" class="btn btn-success btn-lg btn-block"> <a href="https://fontawesome.com/?utm_source=font_awesome_homepage&utm_medium=display&utm_campaign=september_last_chance&utm_content=download_modal" class="btn btn-success btn-lg btn-block">
<div>Pre-order now &amp; save big!</div> <div>Pre-order now &amp; save big!</div>
<h2 class="margin-top-sm text-sans-serif margin-bottom-sm hidden-xs"><i class="fas fas-logo-o"></i>&nbsp; Font Awesome Pro</h2> <h2 class="margin-top-sm text-sans-serif margin-bottom-sm hidden-xs"><i class="fas fas-logo-o"></i>&nbsp; Font Awesome Pro</h2>
<h3 class="margin-top-sm text-sans-serif margin-bottom-sm visible-xs"><i class="fas fas-logo-o"></i>&nbsp; Font Awesome Pro</h3> <h3 class="margin-top-sm text-sans-serif margin-bottom-sm visible-xs"><i class="fas fas-logo-o"></i>&nbsp; Font Awesome Pro</h3>

View File

@ -3,21 +3,23 @@
<div class="modal-content"> <div class="modal-content">
<div class="modal-header"> <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> <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 Pre-Orders Now Available!</h2> <h3 class="modal-title" id="modal-fa5-label">Font Awesome Pro!</h3>
</div> </div>
<div class="modal-body"> <div class="modal-body">
<p class="lead">
September is your last chance to get FA Pro and <strong>ALL</strong> KS rewards for just $40!
</p>
<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> <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'> <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> <iframe id="fa5-iframe" src="https://www.kickstarter.com/projects/232193852/font-awesome-5/widget/video.html" frameborder="0" scrolling="no" allowfullscreen></iframe>
</div> </div>
<p class="lead text-center margin-top-lg margin-bottom-lg"> <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=september_last_chance&utm_content=kickstarter_modal" target="_blank"
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="http://five.fontawesome.com" target="_blank"
onClick="_gaq.push(['_trackEvent', 'Outbound Modal Link', 'Pre-Order']);"> onClick="_gaq.push(['_trackEvent', 'Outbound Modal Link', 'Pre-Order']);">
<h3 class="margin text-sans-serif strong">Pre-Order! &nbsp;<i class="fa fa-external-link-square" aria-hidden="true"></i></h3> <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>
</h3>
</a> </a>
</div> </div>

View File

@ -3,10 +3,10 @@ $(function () {
var ads = [ var ads = [
{ {
quote: "Pre-order and get Font Awesome 5 Pro and <strong>ALL</strong> stretch goals for just $40!", quote: "September is your last chance to get FA Pro and <strong>ALL</strong> KS rewards for just $40!",
class: "fa5", class: "fa5",
url: "https://fontawesome.com/?utm_source=font_awesome_homepage&utm_medium=display&utm_content=banner&utm_campaign=promo_4.7_update", url: "https://fontawesome.com/?utm_source=font_awesome_homepage&utm_medium=display&utm_campaign=september_last_chance&utm_content=banner",
btn_text: "Pre-order FA Pro! &nbsp;<i class='fa fa-external-link'></i>", btn_text: "Pre-order FA Pro! &nbsp;<i class='fas fas-external-link'></i>",
}, },
]; ];
@ -20,7 +20,7 @@ $(function () {
$('[data-toggle="tooltip"]').tooltip(); $('[data-toggle="tooltip"]').tooltip();
$('[data-toggle="popover"]').popover(); $('[data-toggle="popover"]').popover();
if (storageAvailable('localStorage') && !localStorage.seenFA5Modal2) { if (storageAvailable('localStorage') && !localStorage.seenFA5Modal3) {
$('#modal-fa5') $('#modal-fa5')
.modal('toggle') .modal('toggle')
.on('hidden.bs.modal', function (e) { .on('hidden.bs.modal', function (e) {
@ -30,7 +30,7 @@ $(function () {
} }
if (storageAvailable('localStorage')) { if (storageAvailable('localStorage')) {
localStorage.seenFA5Modal2 = true; localStorage.seenFA5Modal3 = true;
// Yippee! We can use localStorage awesomeness // Yippee! We can use localStorage awesomeness
} }

View File

@ -1,12 +1,8 @@
.algolia { .algolia {
margin-top: -20px; padding-top: 10px;
padding-top: 49px;
a { a {
i { color: @text-muted; }
color: @text-color; color: @text-color;
&:hover { color: @link-hover-color; } &:hover, &:hover i { color: @link-hover-color; }
}
.fas-algolia {
font-size: 32px;
vertical-align: middle;
} }
} }

View File

@ -1,5 +1,6 @@
.btn-fa5 { .btn-fa5 {
.button-variant(#fff, #489fdf, mix(#000,#489fdf,10%)); .button-variant(#fff, #489fdf, mix(#000,#489fdf,10%));
font-size: 21px;
} }
.jumbotron-ad .well { .jumbotron-ad .well {

View File

@ -8,7 +8,6 @@ relative_path: ../
{% capture jumbotron_p %}The complete set of {{ icons | size }} icons in Font Awesome {{ site.fontawesome.version }}{% endcapture %} {% capture jumbotron_p %}The complete set of {{ icons | size }} icons in Font Awesome {{ site.fontawesome.version }}{% endcapture %}
{% include jumbotron.html %} {% include jumbotron.html %}
{% include stripe-social.html %}
<div class="container" data-view="search"> <div class="container" data-view="search">
{% capture stripe_ad_content %} {% capture stripe_ad_content %}
@ -22,16 +21,16 @@ relative_path: ../
{% include stripe-ad.html %} {% include stripe-ad.html %}
<div class="row"> <div class="row">
<div class="col-md-10 col-sm-9"> <div class="col-sm-10">
<section id="search"> <section id="search">
<label for="search-input"><i class="fa fa-search" aria-hidden="true"></i><span class="sr-only">Search icons</span></label> <label for="search-input"><i class="fa fa-search" aria-hidden="true"></i><span class="sr-only">Search icons</span></label>
<input id="search-input" class="form-control input-lg" placeholder="Search icons" autocomplete="off" spellcheck="false" autocorrect="off" tabindex="1"> <input id="search-input" class="form-control input-lg" placeholder="Search icons" autocomplete="off" spellcheck="false" autocorrect="off" tabindex="1">
<a id="search-clear" href="#" class="fa fa-times-circle hide" aria-hidden="true"><span class="sr-only">Clear search</span></a> <a id="search-clear" href="#" class="fa fa-times-circle hide" aria-hidden="true"><span class="sr-only">Clear search</span></a>
</section> </section>
</div> </div>
<div class="col-md-2 col-sm-3 padding-left-none hidden-xs"> <div class="col-sm-2 padding-left-none hidden-xs">
<div class="algolia"> <div class="algolia text-center">
by <a href="https://algolia.com"><i class="fas fas-algolia" aria-hidden="true"></i><span class="sr-only">Algolia</span></a> <a href="https://algolia.com"><i class="fas fas-algolia-new fas-4x" aria-hidden="true"></i><div>by Algolia</div></a>
</div> </div>
</div> </div>
</div> </div>