diff --git a/assets/css/site.css b/assets/css/site.css index 843d7b040..bc34dd22c 100644 --- a/assets/css/site.css +++ b/assets/css/site.css @@ -6738,28 +6738,76 @@ body { .jumbotron-icon:after { opacity: .1; } -.fonticons { - background-color: #fa8144; +#banner { color: #fff; - padding: 10px 0; - border-bottom: solid 1px #d97240; } -.fonticons .message-container { +#banner .message-container { display: table; width: auto; margin: 0 auto; + padding: 15px 0; } -.fonticons .tagline, -.fonticons .action { +#banner .tagline, +#banner .action { display: table-cell; vertical-align: middle; } -.fonticons .tagline { +#banner .tagline { font-weight: 200; font-size: 16px; padding-right: 20px; } -.fonticons .btn-primary { +#banner.black-tie { + background-color: #222222; + border-bottom: solid 1px #2d2d2d; +} +#banner.black-tie .btn-primary { + font-weight: bold; + color: #222222; + background-color: #e9e9e9; + border-color: #a7a7a7; + border-bottom-width: 2px; + text-shadow: none; + border-radius: 4px; +} +#banner.black-tie .btn-primary:hover, +#banner.black-tie .btn-primary:focus, +#banner.black-tie .btn-primary:active, +#banner.black-tie .btn-primary.active, +.open > #banner.black-tie .btn-primary.dropdown-toggle { + color: #fff; + background-color: #9f9f9f; + border-color: #888888; + border-bottom-color: #797979; +} +#banner.black-tie .btn-primary:active, +#banner.black-tie .btn-primary.active, +.open > #banner.black-tie .btn-primary.dropdown-toggle { + background-image: none; +} +#banner.black-tie .btn-primary.disabled, +#banner.black-tie .btn-primary[disabled], +fieldset[disabled] #banner.black-tie .btn-primary, +#banner.black-tie .btn-primary.disabled:hover, +#banner.black-tie .btn-primary[disabled]:hover, +fieldset[disabled] #banner.black-tie .btn-primary:hover, +#banner.black-tie .btn-primary.disabled:focus, +#banner.black-tie .btn-primary[disabled]:focus, +fieldset[disabled] #banner.black-tie .btn-primary:focus, +#banner.black-tie .btn-primary.disabled:active, +#banner.black-tie .btn-primary[disabled]:active, +fieldset[disabled] #banner.black-tie .btn-primary:active, +#banner.black-tie .btn-primary.disabled.active, +#banner.black-tie .btn-primary[disabled].active, +fieldset[disabled] #banner.black-tie .btn-primary.active { + background-color: #e9e9e9; + border-color: #a7a7a7; +} +#banner.fonticons { + background-color: #fa8144; + border-bottom: solid 1px #d97240; +} +#banner.fonticons .btn-primary { font-weight: bold; color: #ffffff; background-color: #33343e; @@ -6768,36 +6816,36 @@ body { text-shadow: none; border-radius: 4px; } -.fonticons .btn-primary:hover, -.fonticons .btn-primary:focus, -.fonticons .btn-primary:active, -.fonticons .btn-primary.active, -.open > .fonticons .btn-primary.dropdown-toggle { +#banner.fonticons .btn-primary:hover, +#banner.fonticons .btn-primary:focus, +#banner.fonticons .btn-primary:active, +#banner.fonticons .btn-primary.active, +.open > #banner.fonticons .btn-primary.dropdown-toggle { color: #fff; background-color: #161720; border-color: #030305; border-bottom-color: #000000; } -.fonticons .btn-primary:active, -.fonticons .btn-primary.active, -.open > .fonticons .btn-primary.dropdown-toggle { +#banner.fonticons .btn-primary:active, +#banner.fonticons .btn-primary.active, +.open > #banner.fonticons .btn-primary.dropdown-toggle { background-image: none; } -.fonticons .btn-primary.disabled, -.fonticons .btn-primary[disabled], -fieldset[disabled] .fonticons .btn-primary, -.fonticons .btn-primary.disabled:hover, -.fonticons .btn-primary[disabled]:hover, -fieldset[disabled] .fonticons .btn-primary:hover, -.fonticons .btn-primary.disabled:focus, -.fonticons .btn-primary[disabled]:focus, -fieldset[disabled] .fonticons .btn-primary:focus, -.fonticons .btn-primary.disabled:active, -.fonticons .btn-primary[disabled]:active, -fieldset[disabled] .fonticons .btn-primary:active, -.fonticons .btn-primary.disabled.active, -.fonticons .btn-primary[disabled].active, -fieldset[disabled] .fonticons .btn-primary.active { +#banner.fonticons .btn-primary.disabled, +#banner.fonticons .btn-primary[disabled], +fieldset[disabled] #banner.fonticons .btn-primary, +#banner.fonticons .btn-primary.disabled:hover, +#banner.fonticons .btn-primary[disabled]:hover, +fieldset[disabled] #banner.fonticons .btn-primary:hover, +#banner.fonticons .btn-primary.disabled:focus, +#banner.fonticons .btn-primary[disabled]:focus, +fieldset[disabled] #banner.fonticons .btn-primary:focus, +#banner.fonticons .btn-primary.disabled:active, +#banner.fonticons .btn-primary[disabled]:active, +fieldset[disabled] #banner.fonticons .btn-primary:active, +#banner.fonticons .btn-primary.disabled.active, +#banner.fonticons .btn-primary[disabled].active, +fieldset[disabled] #banner.fonticons .btn-primary.active { background-color: #33343e; border-color: #1c1e29; } diff --git a/assets/font-awesome-4.3.0.zip b/assets/font-awesome-4.3.0.zip index 23e2f59f4..f947ffd9d 100644 Binary files a/assets/font-awesome-4.3.0.zip and b/assets/font-awesome-4.3.0.zip differ diff --git a/assets/js/site.js b/assets/js/site.js index 04776b425..ca5bd52f6 100644 --- a/assets/js/site.js +++ b/assets/js/site.js @@ -1,10 +1,68 @@ $(function() { var ads = [ - { quote: "Take your icon game to the next level.", content: "ad_1_next_level"}, - { quote: "Subset your icons, add your own, and serve up from a CDN.", content: "ad_2_all_value_add"}, - { quote: "Make your icons load 10x faster!", content: "ad_3_faster_loading"}, - { quote: "Looking for other great icon sets?", content: "ad_4_more_icons"}, - { quote: "Need a custom icon in Font Awesome?", content: "ad_5_custom_icons"} + { + quote: "Take your icon game to the next level. Check out Fonticons, from the maker of Font Awesome.", + class: "fonticons", + url: "https://fonticons.com/?utm_source=font_awesome_homepage&utm_medium=display&utm_content=ad_1_next_level&utm_campaign=promo_4.3_update", + btn_text: "Gimme Some!" + }, + { + quote: "Subset your icons, add your own, and serve up from a CDN. Check out Fonticons, from the maker of Font Awesome.", + class: "fonticons", + url: "https://fonticons.com/?utm_source=font_awesome_homepage&utm_medium=display&utm_content=ad_2_all_value_add&utm_campaign=promo_4.3_update", + btn_text: "Gimme Some!" + }, + { + quote: "Make your icons load 10x faster! Check out Fonticons, from the maker of Font Awesome.", + class: "fonticons", + url: "https://fonticons.com/?utm_source=font_awesome_homepage&utm_medium=display&utm_content=ad_3_faster_loading&utm_campaign=promo_4.3_update", + btn_text: "Gimme Some!" + }, + { + quote: "Looking for other great icon sets? Check out Fonticons, from the maker of Font Awesome.", + class: "fonticons", + url: "https://fonticons.com/?utm_source=font_awesome_homepage&utm_medium=display&utm_content=ad_4_more_icons&utm_campaign=promo_4.3_update", + btn_text: "Gimme Some!" + }, + { + quote: "Need a custom icon in Font Awesome? Check out Fonticons, from the maker of Font Awesome.", + class: "fonticons", + url: "https://fonticons.com/?utm_source=font_awesome_homepage&utm_medium=display&utm_content=ad_5_custom_icons&utm_campaign=promo_4.3_update", + btn_text: "Gimme Some!" + }, + + + + { + quote: "So hot right now: Black Tie, the new multi-weight icon font from the maker of Font Awesome.", + class: "black-tie", + url: "https://blacktie.io/?utm_source=font_awesome_homepage&utm_medium=display&utm_content=ad_1_so_hot&utm_campaign=promo_4.3_update", + btn_text: "Buy it Now!" + }, + { + quote: "Black Tie, from the creator of Font Awesome. On sale at the Kickstarter price for a limited time.", + class: "black-tie", + url: "https://blacktie.io/?utm_source=font_awesome_homepage&utm_medium=display&utm_content=ad_2_kickstarter&utm_campaign=promo_4.3_update", + btn_text: "Buy it Now!" + }, + { + quote: "Get more Awesome: Black Tie, the new multi-weight icon font from the maker of Font Awesome.", + class: "black-tie", + url: "https://blacktie.io/?utm_source=font_awesome_homepage&utm_medium=display&utm_content=ad_3_more_awesome&utm_campaign=promo_4.3_update", + btn_text: "Buy it Now!" + }, + { + quote: "The new hotness from the maker of Font Awesome: Black Tie, the multi-weight icon font.", + class: "black-tie", + url: "https://blacktie.io/?utm_source=font_awesome_homepage&utm_medium=display&utm_content=ad_4_new_hotness&utm_campaign=promo_4.3_update", + btn_text: "Buy it Now!" + }, + { + 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: "https://blacktie.io/?utm_source=font_awesome_homepage&utm_medium=display&utm_content=ad_5_clean_minimalist&utm_campaign=promo_4.3_update", + btn_text: "Buy it Now!" + } ]; selectFonticonsAd(); @@ -96,7 +154,10 @@ $(function() { random_number = Math.floor( Math.random() * ads.length ); random_ad = ads[random_number]; + $('#banner').addClass(random_ad.class); $('#rotating-message').html(random_ad.quote); - $('#rotating-url').attr("href", "https://fonticons.com/?utm_source=font_awesome_homepage&utm_medium=display&utm_content=" + random_ad.content + "&utm_campaign=promo_4.3_update"); + $('#rotating-url').attr("href", random_ad.url); + $('#rotating-url').html(random_ad.btn_text); + $('#banner').collapse('show'); } }); diff --git a/assets/less/site.less b/assets/less/site.less index d9431553e..3c1c799a4 100644 --- a/assets/less/site.less +++ b/assets/less/site.less @@ -18,7 +18,7 @@ @import "site/footer"; @import "site/lazy"; @import "site/textured-bg"; -@import "site/fonticons"; +@import "site/banner-ad"; @import "site/fusion-ad"; @import "site/bsap-ad"; diff --git a/assets/less/site/banner-ad.less b/assets/less/site/banner-ad.less new file mode 100644 index 000000000..df478c049 --- /dev/null +++ b/assets/less/site/banner-ad.less @@ -0,0 +1,112 @@ +#banner { + color: #fff; + .message-container { + display: table; + width: auto; + margin: 0 auto; + padding: 15px 0; + } + .tagline, .action { + display: table-cell; + vertical-align: middle; + } + .tagline { + font-weight: 200; + font-size: 16px; + padding-right: 20px; + } + + &.black-tie { + @black-tie-bg: #222222; + background-color: @black-tie-bg; + border-bottom: solid 1px mix(@black-tie-bg, #fff, 95%); + + .btn-primary { + @color: @black-tie-bg; + @background: mix(#fff,@black-tie-bg,90%); + @border: mix(#fff,@black-tie-bg,60%); + font-weight: bold; + color: @color; + background-color: @background; + border-color: @border; + border-bottom-width: 2px; + text-shadow: none; + border-radius: 4px; + + &:hover, + &:focus, + &:active, + &.active, + .open > &.dropdown-toggle { + color: #fff; + background-color: darken(@border, 3%); + border-color: darken(@border, 12%); + border-bottom-color: darken(@border, 18%); + } + &:active, + &.active, + .open > &.dropdown-toggle { + background-image: none; + } + &.disabled, + &[disabled], + fieldset[disabled] & { + &, + &:hover, + &:focus, + &:active, + &.active { + background-color: @background; + border-color: @border; + } + } + } + } + + &.fonticons { + @fonticons-bg: #1c1e29; + @fonticons-orange: desaturate(#ff7f3f, 5%); + background-color: @fonticons-orange; + border-bottom: solid 1px mix(@fonticons-bg, @fonticons-orange, 15%); + .btn-primary { + @color: #fff; + @background: mix(#fff,@fonticons-bg,10%); + @border: @fonticons-bg; + font-weight: bold; + color: @color; + background-color: @background; + border-color: @border; + border-bottom-width: 2px; + text-shadow: none; + border-radius: 4px; + + &:hover, + &:focus, + &:active, + &.active, + .open > &.dropdown-toggle { + color: #fff; + background-color: darken(@border, 3%); + border-color: darken(@border, 12%); + border-bottom-color: darken(@border, 18%); + } + &: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/assets/less/site/fonticons.less b/assets/less/site/fonticons.less deleted file mode 100644 index 2caada1c3..000000000 --- a/assets/less/site/fonticons.less +++ /dev/null @@ -1,62 +0,0 @@ -.fonticons { - @fonticons-bg: #1c1e29; - @fonticons-orange: desaturate(#ff7f3f, 5%); - background-color: @fonticons-orange; - color: #fff; - padding: 10px 0; - border-bottom: solid 1px mix(@fonticons-bg, @fonticons-orange, 15%); - .message-container { - display: table; - width: auto; - margin: 0 auto; - } - .tagline, .action { - display: table-cell; - vertical-align: middle; - } - .tagline { - font-weight: 200; - font-size: 16px; - padding-right: 20px; - } - .btn-primary { - @color: #fff; - @background: mix(#fff,@fonticons-bg,10%); - @border: @fonticons-bg; - font-weight: bold; - color: @color; - background-color: @background; - border-color: @border; - border-bottom-width: 2px; - text-shadow: none; - border-radius: 4px; - - &:hover, - &:focus, - &:active, - &.active, - .open > &.dropdown-toggle { - color: #fff; - background-color: darken(@border, 3%); - border-color: darken(@border, 12%); - border-bottom-color: darken(@border, 18%); - } - &: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/cheatsheet/index.html b/cheatsheet/index.html index 4889aead7..4a5e3b6a0 100644 --- a/cheatsheet/index.html +++ b/cheatsheet/index.html @@ -49,20 +49,20 @@ })();