diff --git a/src/_includes/modals/kickstarter.html b/src/_includes/modals/kickstarter.html
new file mode 100644
index 000000000..7f6f770eb
--- /dev/null
+++ b/src/_includes/modals/kickstarter.html
@@ -0,0 +1,24 @@
+
diff --git a/src/_includes/navbar.html b/src/_includes/navbar.html
index 39eeb07ba..c9a969aec 100644
--- a/src/_includes/navbar.html
+++ b/src/_includes/navbar.html
@@ -5,7 +5,7 @@
diff --git a/src/_layouts/base.html b/src/_layouts/base.html
index 74c94d56f..2e0cf9ded 100644
--- a/src/_layouts/base.html
+++ b/src/_layouts/base.html
@@ -45,6 +45,7 @@
{{ content }}
{% include footer.html %}
+ {% include modals/kickstarter.html %}
diff --git a/src/assets/js/site.js b/src/assets/js/site.js
index c81f216cb..f92d2fa50 100644
--- a/src/assets/js/site.js
+++ b/src/assets/js/site.js
@@ -2,82 +2,48 @@ $(function () {
$("#newsletter").validate();
var ads = [
- {
- quote: "Looking for the best icon sets? Check out Symbolset, now 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: "Need a different look for your icons? Check out Symbolset, now 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 acquires Symbolset!",
+ // quote: "Looking for the best icon sets? Check out Symbolset, now 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: "Fort Awesome Symbolset = ",
- // 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 Fort Awesome, 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 Fort Awesome, 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 Fort Awesome, 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 Fort Awesome, 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: "Black Tie, 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: "Need a different look for your icons? Check out Symbolset, now 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 Black Tie, 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 Fort Awesome, 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 Black Tie, 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 Fort Awesome, 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 Black Tie, 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 Fort Awesome, 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];
diff --git a/src/assets/less/site.less b/src/assets/less/site.less
index 1c5d1a300..a9e13f6ee 100644
--- a/src/assets/less/site.less
+++ b/src/assets/less/site.less
@@ -33,6 +33,7 @@
@import "site/bsap-ad";
@import "site/sumome";
@import "site/algolia";
+@import "site/kickstarter";
@import "site/views";
@import "site/store";
diff --git a/src/assets/less/site/banner-ad.less b/src/assets/less/site/banner-ad.less
index 947c9c75b..e544ed0be 100644
--- a/src/assets/less/site/banner-ad.less
+++ b/src/assets/less/site/banner-ad.less
@@ -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;
+ }
+ }
+ }
+ }
+
}
diff --git a/src/assets/less/site/kickstarter.less b/src/assets/less/site/kickstarter.less
new file mode 100644
index 000000000..689a8c04a
--- /dev/null
+++ b/src/assets/less/site/kickstarter.less
@@ -0,0 +1,3 @@
+.btn-kickstarter {
+ .button-variant(#fff, #489fdf, mix(#000,#489fdf,10%));
+}
diff --git a/src/assets/less/site/responsive/screen-xs.less b/src/assets/less/site/responsive/screen-xs.less
index 7943e2feb..156e5bc38 100644
--- a/src/assets/less/site/responsive/screen-xs.less
+++ b/src/assets/less/site/responsive/screen-xs.less
@@ -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; }