diff --git a/fonts/FontAwesome.otf b/fonts/FontAwesome.otf index cf83fdbe6..186efd2b8 100644 Binary files a/fonts/FontAwesome.otf and b/fonts/FontAwesome.otf differ diff --git a/src/_includes/navbar.html b/src/_includes/navbar.html index bfa8498f2..fa163c0aa 100644 --- a/src/_includes/navbar.html +++ b/src/_includes/navbar.html @@ -1,3 +1,17 @@ +
+
+
+
+ Take your icon game to the next level. + Check out Fonticons, from the maker of Font Awesome. +
+
+ Gimme Some! +
+
+
+
+
diff --git a/src/assets/font-awesome/fonts/FontAwesome.otf b/src/assets/font-awesome/fonts/FontAwesome.otf index cf83fdbe6..186efd2b8 100644 Binary files a/src/assets/font-awesome/fonts/FontAwesome.otf and b/src/assets/font-awesome/fonts/FontAwesome.otf differ diff --git a/src/assets/js/site.js b/src/assets/js/site.js index 79793b2a7..3f1fbebba 100644 --- a/src/assets/js/site.js +++ b/src/assets/js/site.js @@ -1,4 +1,24 @@ $(function() { + var quotes = new Array( + "Take your icon game to the next level.", + "Subset your icons, add your own, and serve up from a CDN.", + "Make your icons load 10x faster!", + "Looking for other great icon sets?", + "Need a custom icon in Font Awesome?" + ); + var url_strings = new Array( + "ad_1_next_level", + "ad_2_all_value_add", + "ad_3_faster_loading", + "ad_4_more_icons", + "ad_5_custom_icons" + ); + random_number = Math.floor( Math.random() * quotes.length ); + random_quote = quotes[random_number]; + random_url_string = url_strings[random_number]; + $('#rotating-message').html(random_quote); + $('#rotating-url').attr("href", "https://fonticons.com/?utm_source=font_awesome_homepage&utm_medium=display&utm_content=" + random_url_string + "&utm_campaign=promo_4.3_update"); + // start the icon carousel $('#icon-carousel').carousel({ interval: 5000 diff --git a/src/assets/less/site.less b/src/assets/less/site.less index f6bb69bd7..626f4455f 100644 --- a/src/assets/less/site.less +++ b/src/assets/less/site.less @@ -20,7 +20,7 @@ @import "site/footer"; @import "site/lazy"; @import "site/textured-bg"; -@import "site/black-tie"; +@import "site/fonticons"; @import "site/fusion-ad"; @import "site/bsap-ad"; diff --git a/src/assets/less/site/black-tie.less b/src/assets/less/site/black-tie.less deleted file mode 100644 index ee8e40151..000000000 --- a/src/assets/less/site/black-tie.less +++ /dev/null @@ -1,10 +0,0 @@ -.black-tie { - background-color: @gray-darker; - color: #fff; - padding: 30px 0; - .tagline { - font-weight: 200; - font-size: 21px; - line-height: 45px; - } -} diff --git a/src/assets/less/site/fonticons.less b/src/assets/less/site/fonticons.less new file mode 100644 index 000000000..2caada1c3 --- /dev/null +++ b/src/assets/less/site/fonticons.less @@ -0,0 +1,62 @@ +.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/src/assets/less/site/responsive/screen-lg.less b/src/assets/less/site/responsive/screen-lg.less index 2e70fd464..049714d83 100644 --- a/src/assets/less/site/responsive/screen-lg.less +++ b/src/assets/less/site/responsive/screen-lg.less @@ -49,9 +49,9 @@ line-height: 36px; } - .black-tie .tagline { - font-size: @font-size-h3; - line-height: 45px; + .fonticons { + .tagline { } + .action { width: 18%; } } .hide-lg { display: none; } diff --git a/src/assets/less/site/responsive/screen-sm.less b/src/assets/less/site/responsive/screen-sm.less index 941fe1095..199894e9a 100644 --- a/src/assets/less/site/responsive/screen-sm.less +++ b/src/assets/less/site/responsive/screen-sm.less @@ -39,9 +39,8 @@ font-size: 19px; } - .black-tie .tagline { - font-size: 18px; - line-height: 22px; + .fonticons { + .action { width: 33%; } } .sticky-footer(271px, 60px); diff --git a/src/assets/less/site/responsive/screen-xs.less b/src/assets/less/site/responsive/screen-xs.less index 156720eda..b3a43593a 100644 --- a/src/assets/less/site/responsive/screen-xs.less +++ b/src/assets/less/site/responsive/screen-xs.less @@ -65,11 +65,10 @@ } - - .black-tie .tagline { - font-size: 18px; - line-height: 22px; - margin-bottom: 15px; + .fonticons { + padding: 15px 0; + .tagline, .action { display: block; } + .tagline { margin-bottom: 10px; } }