library-mirrors/Font-Awesome
1
0
Fork 0
mirror of https://github.com/FortAwesome/Font-Awesome.git synced 2024-11-20 11:14:28 +00:00
Code Issues Actions Packages Projects Releases Wiki Activity

Updating navbar to point to pre-orders

Browse Source
This commit is contained in:
Dave Gandy 2016-12-22 15:51:06 -05:00
parent 4b50462de7
commit df78af2a0b
3 changed files with 80 additions and 54 deletions
Show Stats Download Patch File Download Diff File Expand all files Collapse all files

27
src/_includes/navbar.html
View File

@ -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>&nbsp;
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>&nbsp;
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>&amp; CSS toolkit">
<i class="fa fa-font-awesome"></i>&nbsp;
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">

32
src/assets/js/site.js
View File

@ -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! &nbsp;<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();

75
src/assets/less/site/banner-ad.less
View File

@ -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;
}
}
}
}
}