adding fonticons header

This commit is contained in:
Dave Gandy 2015-01-21 11:51:10 -05:00
parent 0810752c86
commit a40ae6bea9
10 changed files with 106 additions and 22 deletions

Binary file not shown.

View File

@ -1,3 +1,17 @@
<div class="fonticons">
<div class="container">
<div class="message-container">
<div class="tagline">
<span id="rotating-message">Take your icon game to the next level.</span>
Check out <strong>Fonticons</strong>, from the maker of Font Awesome.
</div>
<div class="action">
<a id="rotating-url" class="btn btn-primary btn-block" href="https://fonticons.com/?utm_source=font_awesome_homepage&utm_medium=display&utm_content=ad_1_next_level&utm_campaign=promo_4.3_update">Gimme Some!</a>
</div>
</div>
</div>
</div>
<div class="navbar navbar-inverse navbar-static-top hidden-print"> <div class="navbar navbar-inverse navbar-static-top hidden-print">
<div class="container"> <div class="container">
<div class="navbar-header"> <div class="navbar-header">

View File

@ -1,4 +1,24 @@
$(function() { $(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 // start the icon carousel
$('#icon-carousel').carousel({ $('#icon-carousel').carousel({
interval: 5000 interval: 5000

View File

@ -20,7 +20,7 @@
@import "site/footer"; @import "site/footer";
@import "site/lazy"; @import "site/lazy";
@import "site/textured-bg"; @import "site/textured-bg";
@import "site/black-tie"; @import "site/fonticons";
@import "site/fusion-ad"; @import "site/fusion-ad";
@import "site/bsap-ad"; @import "site/bsap-ad";

View File

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

View File

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

View File

@ -49,9 +49,9 @@
line-height: 36px; line-height: 36px;
} }
.black-tie .tagline { .fonticons {
font-size: @font-size-h3; .tagline { }
line-height: 45px; .action { width: 18%; }
} }
.hide-lg { display: none; } .hide-lg { display: none; }

View File

@ -39,9 +39,8 @@
font-size: 19px; font-size: 19px;
} }
.black-tie .tagline { .fonticons {
font-size: 18px; .action { width: 33%; }
line-height: 22px;
} }
.sticky-footer(271px, 60px); .sticky-footer(271px, 60px);

View File

@ -65,11 +65,10 @@
} }
.fonticons {
.black-tie .tagline { padding: 15px 0;
font-size: 18px; .tagline, .action { display: block; }
line-height: 22px; .tagline { margin-bottom: 10px; }
margin-bottom: 15px;
} }