Skip to content

Commit

Permalink
Merge pull request FortAwesome#10308 from FortAwesome/talbs/fa5-kick-…
Browse files Browse the repository at this point in the history 
…starter-post

Updating Docs Site Post-Font Awesome 5 Kickstarter
  • Loading branch information
@talbs
talbs committed Dec 2, 2016
2 parents 2fde871 + 1d401c6 commit d445932
Show file tree
Hide file tree
Showing 16 changed files with 58 additions and 216 deletions.
4 changes: 2 additions & 2 deletions css/font-awesome.css
View file
Original file line number Diff line number Diff line change
Expand Up @@ -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 {
Expand Down Expand Up @@ -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 */
Expand Down
2 changes: 1 addition & 1 deletion css/font-awesome.min.css
View file

Large diffs are not rendered by default.

12 changes: 5 additions & 7 deletions src/_includes/jumbotron-carousel.html
View file
Original file line number Diff line number Diff line change
@@ -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">
Expand All @@ -20,11 +20,8 @@ <h1>Font Awesome</h1>
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>
Expand All @@ -42,6 +39,7 @@ <h1>Font Awesome</h1>
<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>
Expand All @@ -52,7 +50,7 @@ <h1>Font Awesome</h1>
<i class="fa fa-arrow-circle-right" aria-hidden="true"></i>
<span class="sr-only">Next</span>
</a>
</div> -->
</div>
</div>
</div>

Expand Down
22 changes: 11 additions & 11 deletions src/_includes/jumbotron.html
View file
Original file line number Diff line number Diff line change
@@ -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 change: 0 additions & 1 deletion src/_includes/kickstarter-widget.html
View file

This file was deleted.

12 changes: 6 additions & 6 deletions src/_includes/modals/kickstarter.html → src/_includes/modals/fa5.html
View file
Original file line number Diff line number Diff line change
@@ -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>
Expand Down
7 changes: 2 additions & 5 deletions src/_includes/navbar.html
View file
Original file line number Diff line number Diff line change
Expand Up @@ -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>
Expand All @@ -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>
Expand All @@ -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">
Expand Down
3 changes: 1 addition & 2 deletions src/_layouts/base.html
View file
Original file line number Diff line number Diff line change
Expand Up @@ -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>
Expand All @@ -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>
Expand Down
97 changes: 28 additions & 69 deletions src/assets/js/site.js
View file
Original file line number Diff line number Diff line change
Expand Up @@ -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();
Expand All @@ -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],
Expand All @@ -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);
Expand Down
2 changes: 1 addition & 1 deletion src/assets/less/site.less
View file
Original file line number Diff line number Diff line change
Expand Up @@ -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";
Expand Down
74 changes: 0 additions & 74 deletions src/assets/less/site/banner-ad.less
View file
Original file line number Diff line number Diff line change
Expand Up @@ -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;
}
}
}
}

}
7 changes: 1 addition & 6 deletions src/assets/less/site/kickstarter.less → src/assets/less/site/fa5.less
View file
Original file line number Diff line number Diff line change
@@ -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);
Expand Down
Loading

0 comments on commit d445932

Please sign in to comment.