diff options
author | Dave Gandy <dave@davegandy.com> | 2016-10-23 00:02:47 +0300 |
---|---|---|
committer | Dave Gandy <dave@davegandy.com> | 2016-10-23 00:02:47 +0300 |
commit | a09ba0d9ac7cc083e32a3cf722f7fa545a586078 (patch) | |
tree | d0a58edd07b6eb40622fa819c12359ac97c4821a | |
parent | 2c6f919a7384cfb9b55620297adf993705e70f81 (diff) |
Prepping Kickstarter modal and navbar
-rw-r--r-- | src/_includes/modals/kickstarter.html | 24 | ||||
-rw-r--r-- | src/_includes/navbar.html | 2 | ||||
-rw-r--r-- | src/_layouts/base.html | 1 | ||||
-rw-r--r-- | src/assets/js/site.js | 110 | ||||
-rw-r--r-- | src/assets/less/site.less | 1 | ||||
-rw-r--r-- | src/assets/less/site/banner-ad.less | 56 | ||||
-rw-r--r-- | src/assets/less/site/kickstarter.less | 3 | ||||
-rw-r--r-- | src/assets/less/site/responsive/screen-xs.less | 18 |
8 files changed, 140 insertions, 75 deletions
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 @@ +<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> 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 @@ <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> 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 }} </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> 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: "<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" + // 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: "<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>", + // 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_4_math&utm_campaign=promo_4.6_update", - // btn_text: "Check out 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: "Looking for other great icon sets? Check out <strong>Fort Awesome</strong>, from the maker of Font Awesome.", + // 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_4_more_icons&utm_campaign=promo_4.6_update", + // 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 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: "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: "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]; 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; } |