mirror of
https://github.com/FortAwesome/Font-Awesome.git
synced 2024-11-20 11:14:28 +00:00
Merge pull request #10308 from FortAwesome/talbs/fa5-kick-starter-post
Updating Docs Site Post-Font Awesome 5 Kickstarter
This commit is contained in:
commit
d445932937
4
css/font-awesome.css
vendored
4
css/font-awesome.css
vendored
@ -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 */
|
||||
|
@ -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>
|
||||
|
||||
|
@ -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>
|
||||
|
@ -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>
|
@ -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! <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 <i class="fa fa-external-link-square" aria-hidden="true"></i></h3>
|
||||
</a>
|
||||
|
||||
</div>
|
@ -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">
|
||||
|
@ -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>
|
||||
|
@ -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);
|
||||
|
@ -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";
|
||||
|
@ -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;
|
||||
}
|
||||
}
|
||||
}
|
||||
}
|
||||
|
||||
}
|
||||
|
@ -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);
|
@ -55,11 +55,4 @@
|
||||
}
|
||||
|
||||
.hide-lg { display: none; }
|
||||
|
||||
.jumbotron-ad #newsletter {
|
||||
margin-top: 30px;
|
||||
margin-right: 250px;
|
||||
margin-bottom: -70px;
|
||||
}
|
||||
|
||||
}
|
||||
|
@ -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;
|
||||
}
|
||||
|
||||
}
|
||||
|
@ -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; }
|
||||
}
|
||||
|
@ -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;
|
||||
}
|
||||
}
|
||||
}
|
||||
|
Loading…
Reference in New Issue
Block a user