mirror of
https://github.com/ForkAwesome/Fork-Awesome
synced 2024-05-18 06:16:33 +02:00
Prepping Kickstarter modal and navbar
This commit is contained in:
Dave Gandy
parent
2c6f919a73
commit
a09ba0d9ac
24
src/_includes/modals/kickstarter.html
Normal file
24
src/_includes/modals/kickstarter.html
Normal file
|
|
@ -0,0 +1,24 @@
|
|||
<div class="modal fade" id="modal-kickstarter" tabindex="-1" role="dialog" aria-labelledby="modal-kickstarter-label"
|
||||
xmlns="http://www.w3.org/1999/html">
|
||||
<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">
|
||||
<i class="fa fa-youtube-play fa-lg" aria-hidden="true"></i> Font Awesome 5!
|
||||
</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 src='https://www.youtube.com/embed/CNoH3J7iSrA' frameborder='0' allowfullscreen></iframe></div>
|
||||
|
||||
<a class="btn btn-kickstarter btn-lg btn-block margin-top" href="http://five.fontawesome.io/?utm_source=font_awesome_homepage&utm_medium=display&utm_content=kickstarter_modal&utm_campaign=promo_4.7_update"
|
||||
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>
|
||||
</a>
|
||||
|
||||
</div>
|
||||
</div>
|
||||
</div>
|
||||
</div>
|
||||
|
|
@ -5,7 +5,7 @@
|
|||
<span id="rotating-message"></span>
|
||||
</div>
|
||||
<div class="action">
|
||||
<a id="rotating-url" class="btn btn-primary btn-block" href=""></a>
|
||||
<a id="rotating-url" class="btn btn-primary btn-lg btn-block" href=""></a>
|
||||
</div>
|
||||
</div>
|
||||
</div>
|
||||
|
|
|
|||
|
|
@ -45,6 +45,7 @@
|
|||
{{ content }}
|
||||
</div>
|
||||
{% include footer.html %}
|
||||
{% include modals/kickstarter.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>
|
||||
|
|
|
|||
|
|
@ -2,82 +2,48 @@ $(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: "Fort Awesome <a href='#'>acquires</a> Symbolset!",
|
||||
// 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_3_acquires&utm_campaign=promo_4.6_update",
|
||||
// btn_text: "Check out Symbolset"
|
||||
// },
|
||||
// {
|
||||
// quote: "<a href='#' class='no-underline'>Fort Awesome <i class='fa fa-plus fa-lg'></i> Symbolset = <i class='fa fa-heart fa-lg'></i></a>",
|
||||
// class: "symbolset",
|
||||
// url: "https://symbolset.com/?utm_source=font_awesome_homepage&utm_medium=display&utm_content=ad_4_math&utm_campaign=promo_4.6_update",
|
||||
// btn_text: "Check out Symbolset"
|
||||
// },
|
||||
|
||||
|
||||
{
|
||||
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: "Looking for other great icon sets? 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_4_more_icons&utm_campaign=promo_4.6_update",
|
||||
// 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: "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: "<strong>Black Tie</strong>, from the creator of Font Awesome. On sale at the Kickstarter price for a limited time.",
|
||||
// class: "black-tie",
|
||||
// url: "http://blacktie.io/?utm_source=font_awesome_homepage&utm_medium=display&utm_content=ad_2_kickstarter&utm_campaign=promo_4.6_update",
|
||||
// btn_text: "Check it Out!"
|
||||
// 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: "Want clean, minimalist icons? Check out <strong>Black Tie</strong>, the new multi-weight icon font from the maker of Font Awesome.",
|
||||
// class: "black-tie",
|
||||
// url: "http://blacktie.io/?utm_source=font_awesome_homepage&utm_medium=display&utm_content=ad_5_clean_minimalist&utm_campaign=promo_4.6_update",
|
||||
// btn_text: "Check it Out!"
|
||||
// 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: "Want a different icon look? Check out <strong>Black Tie</strong>, our new multi-weight icon set.",
|
||||
// class: "black-tie",
|
||||
// url: "http://blacktie.io/?utm_source=font_awesome_homepage&utm_medium=display&utm_content=ad_6_different_look&utm_campaign=promo_4.6_update",
|
||||
// btn_text: "Check it Out!"
|
||||
// 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: "Check out <strong>Black Tie</strong>, our new multi-weight icon set!",
|
||||
// class: "black-tie",
|
||||
// url: "http://blacktie.io/?utm_source=font_awesome_homepage&utm_medium=display&utm_content=ad_7_our_new_multi_weight&utm_campaign=promo_4.6_update",
|
||||
// btn_text: "Check it Out!"
|
||||
// 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: "http://five.fontawesome.io/?utm_source=font_awesome_homepage&utm_medium=display&utm_content=ad_1_most_awesome-est&utm_campaign=promo_4.7_update",
|
||||
btn_text: "Check out the Kickstarter",
|
||||
},
|
||||
{
|
||||
quote: "Get 1,000+ more icons and SVG in Font Awesome 5 Pro!",
|
||||
class: "kickstarter",
|
||||
url: "http://five.fontawesome.io/?utm_source=font_awesome_homepage&utm_medium=display&utm_content=ad_2_svg_and_1000_more&utm_campaign=promo_4.7_update",
|
||||
btn_text: "Check out the Kickstarter",
|
||||
},
|
||||
];
|
||||
|
||||
selectAd();
|
||||
|
|
@ -89,7 +55,27 @@ $(function () {
|
|||
|
||||
$('[data-toggle="tooltip"]').tooltip();
|
||||
$('[data-toggle="popover"]').popover();
|
||||
if (storageAvailable('localStorage') && !localStorage.seenKickstarterModal) {
|
||||
$('#modal-kickstarter').modal('toggle');
|
||||
}
|
||||
|
||||
if (storageAvailable('localStorage')) {
|
||||
localStorage.seenKickstarterModal = true;
|
||||
// Yippee! We can use localStorage awesomeness
|
||||
}
|
||||
|
||||
function storageAvailable(type) {
|
||||
try {
|
||||
var storage = window[type],
|
||||
x = '__storage_test__';
|
||||
storage.setItem(x, x);
|
||||
storage.removeItem(x);
|
||||
return true;
|
||||
}
|
||||
catch(e) {
|
||||
return false;
|
||||
}
|
||||
}
|
||||
function selectAd() {
|
||||
random_number = Math.floor(Math.random() * ads.length);
|
||||
random_ad = ads[random_number];
|
||||
|
|
|
|||
|
|
@ -33,6 +33,7 @@
|
|||
@import "site/bsap-ad";
|
||||
@import "site/sumome";
|
||||
@import "site/algolia";
|
||||
@import "site/kickstarter";
|
||||
|
||||
@import "site/views";
|
||||
@import "site/store";
|
||||
|
|
|
|||
|
|
@ -211,4 +211,60 @@
|
|||
}
|
||||
}
|
||||
|
||||
&.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; }
|
||||
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;
|
||||
}
|
||||
}
|
||||
}
|
||||
}
|
||||
|
||||
}
|
||||
|
|
|
|||
3
src/assets/less/site/kickstarter.less
Normal file
3
src/assets/less/site/kickstarter.less
Normal file
|
|
@ -0,0 +1,3 @@
|
|||
.btn-kickstarter {
|
||||
.button-variant(#fff, #489fdf, mix(#000,#489fdf,10%));
|
||||
}
|
||||
|
|
@ -81,20 +81,14 @@
|
|||
}
|
||||
|
||||
|
||||
.navbar-org {
|
||||
.navbar-org { display: none; }
|
||||
#banner {
|
||||
text-align: center;
|
||||
.container { padding: 0; }
|
||||
.navbar-nav {
|
||||
margin: 0;
|
||||
> li + li {
|
||||
margin-left: 0;
|
||||
}
|
||||
}
|
||||
.nav > li {
|
||||
float: left;
|
||||
width: 50%;
|
||||
}
|
||||
.message-container, .tagline, .action { display: block; }
|
||||
.tagline { padding-right: 0; }
|
||||
.btn-primary { margin-top: 10px; }
|
||||
}
|
||||
|
||||
.signup-button .btn { white-space: normal; }
|
||||
.v-get-started .get-started-cdn { padding: 5px 22px 22px 22px; }
|
||||
|
||||
|
|
|
|||
Loading…
Reference in a new issue