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

Updating Docs Site Post-Font Awesome 5 Kickstarter
This commit is contained in:
Brian Talbot 2016-12-02 11:50:39 -05:00 committed by GitHub
commit d445932937
16 changed files with 58 additions and 216 deletions

View File

@ -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 */

File diff suppressed because one or more lines are too long

View File

@ -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 id="kickstarter-widget" class="kickstarter-widget-index">
{% include kickstarter-widget.html %}
</div>
<!-- <div id="icon-carousel" class="carousel slide">
<div class="col-md-4 col-sm-4">
<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>

View File

@ -1,17 +1,17 @@
<div class="jumbotron jumbotron-ad hidden-print">
<div class="container">
<div class="jumbotron-kickstarter">
<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>
{% if page.in_page_nav %}
<div class="col-md-9">
<h1>{{ jumbotron_h1 }}</h1>
<p>{{ jumbotron_p }}</p>
</div>
<div class="col-md-3">
{{ jumbotron_nav }}
</div>
{% else %}
<h1>{{ jumbotron_h1 }}</h1>
<p>{{ jumbotron_p }}</p>
{% endif %}
</div>
</div>

View File

@ -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>

View File

@ -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>

View File

@ -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">

View File

@ -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>

View File

@ -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!",
class: "kickstarter",
url: "https://www.kickstarter.com/projects/232193852/font-awesome-5?ref=c92610",
btn_text: "Check out the Kickstarter",
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: "Get 1,000+ more icons and SVG in Font Awesome 5 Pro!",
class: "kickstarter",
url: "https://www.kickstarter.com/projects/232193852/font-awesome-5?ref=c92610",
btn_text: "Check out the Kickstarter",
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: "Early backer prices extended and tons of stretch goals already funded!",
class: "kickstarter",
url: "https://www.kickstarter.com/projects/232193852/font-awesome-5?ref=c92610",
btn_text: "Font Awesome 5 Kickstarter",
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!"
}
];
selectAd();
@ -62,41 +44,20 @@ $(function () {
$('[data-toggle="tooltip"]').tooltip();
$('[data-toggle="popover"]').popover();
if (storageAvailable('localStorage') && !localStorage.seenKickstarterModal) {
$('#modal-kickstarter')
if (storageAvailable('localStorage') && !localStorage.seenFA5Modal) {
$('#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);

View File

@ -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";

View File

@ -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;
}
}
}
}
}

View File

@ -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);

View File

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

View File

@ -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;
}
}

View File

@ -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; }
}

View File

@ -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;
}
}
}