diff options
author | Dave Gandy <dave@davegandy.com> | 2016-12-22 23:51:06 +0300 |
---|---|---|
committer | Dave Gandy <dave@davegandy.com> | 2016-12-22 23:51:06 +0300 |
commit | df78af2a0b0f732a3dc2034a597903dc5c73e776 (patch) | |
tree | ace6b901286fe4c5055241739059de8a019166ce | |
parent | 4b50462de7c3f59940cbcca327b0d0fe0207fe79 (diff) |
Updating navbar to point to pre-orders
-rw-r--r-- | src/_includes/navbar.html | 27 | ||||
-rw-r--r-- | src/assets/js/site.js | 32 | ||||
-rw-r--r-- | src/assets/less/site/banner-ad.less | 75 |
3 files changed, 80 insertions, 54 deletions
diff --git a/src/_includes/navbar.html b/src/_includes/navbar.html index 97f4dc789..3b4cc5561 100644 --- a/src/_includes/navbar.html +++ b/src/_includes/navbar.html @@ -5,37 +5,12 @@ <span id="rotating-message"></span> </div> <div class="action"> - <a id="rotating-url" class="btn btn-primary btn-lg btn-block" href=""></a> + <a id="rotating-url" class="btn btn-primary btn-lg btn-block" href="" target="_blank"></a> </div> </div> </div> </div> -<div class="navbar navbar-org navbar-static-top"> - <div class="container"> - <ul class="nav navbar-nav navbar-right"> - <li> - <a href="http://fortawesome.com/start?utm_source=font_awesome_navbar&utm_medium=display&utm_content=font_awesome_navbar&utm_campaign=promo_{{ site.fontawesome.minor_version }}_update" data-toggle="tooltip" data-container="body" data-placement="bottom" data-html="true" title="Take your front end game<br>to the next level!"> - <i class="fa fa-fort-awesome fa-lg valign-baseline"></i> - Fort Awesome - </a> - </li> - <li> - <a href="http://symbolset.com/?utm_source=font_awesome_navbar&utm_medium=display&utm_content=font_awesome_navbar&utm_campaign=promo_{{ site.fontawesome.minor_version }}_update" data-toggle="tooltip" data-container="body" data-placement="bottom" data-html="true" title="Get the perfect icon set!"> - <i class="fas fas-heart-ss"></i> - Symbolset - </a> - </li> - <li class="active"> - <a href="http://fontawesome.io/?utm_source=font_awesome_navbar&utm_medium=display&utm_content=font_awesome_navbar&utm_campaign=promo_{{ site.fontawesome.minor_version }}_update" data-toggle="tooltip" data-container="body" data-placement="bottom" data-html="true" title="The iconic font<br>& CSS toolkit"> - <i class="fa fa-font-awesome"></i> - Font Awesome</a> - </li> - </ul> - <div class="navbar-text navbar-right hide-xs">Build and serve a faster front end!</div> - </div> -</div> - <div class="navbar navbar-inverse navbar-static-top hidden-print"> <div class="container"> <div class="navbar-header"> diff --git a/src/assets/js/site.js b/src/assets/js/site.js index c51b29acc..d5c9d96e6 100644 --- a/src/assets/js/site.js +++ b/src/assets/js/site.js @@ -3,35 +3,11 @@ $(function () { 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: "Pre-order and get Font Awesome 5 Pro and <strong>ALL</strong> stretch goals for just $40!", + class: "fa5", + url: "http://five.fontawesome.com", + btn_text: "Pre-order FA Pro! <i class='fa fa-external-link'></i>", }, - { - 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: "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: "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!" - } ]; selectAd(); diff --git a/src/assets/less/site/banner-ad.less b/src/assets/less/site/banner-ad.less index dd12f4b51..c0a264dd0 100644 --- a/src/assets/less/site/banner-ad.less +++ b/src/assets/less/site/banner-ad.less @@ -210,4 +210,79 @@ } } } + + &.fa5 { + @fa5-bg: #489fdf; + background-color: @fa5-bg; + border-bottom: rgba(0,0,0,0.2); + .message-container { padding: 40px 0; } + .tagline { font-size: 24px; } + .fa-external-link { vertical-align: -10%; } + .time-left { + font-size: 18px; + color: mix(@fa5-bg, #fff, 20%); + } + @keyframes flash-duration { + from { + color: #fff; + } + to { + color: mix(@fa5-bg, #fff, 20%); + } + } + .duration { + font-weight: 600; + animation-name: flash-duration; + animation-duration: 1.0s; + } + a:not(.btn) { + text-decoration: underline; + color: #fff; + &:hover { color: rgba(255,255,255,.8); } + } + .btn-primary { + @color: @fa5-bg; + @background: #fff; + @border: mix(#000,@fa5-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; + } + } + } + } + } |