FlandreScarle7/Font-Awesome
1
0
Fork 0
mirror of https://github.com/FortAwesome/Font-Awesome.git synced 2024-12-26 13:31:30 +08:00
Code Issues Actions Packages Projects Releases Wiki Activity

Updating site to include new fonticons org navbar

Browse Source
This commit is contained in:
Dave Gandy 2015-12-16 16:01:44 -05:00
parent 97d0b9491d
commit 83e23c36df
9 changed files with 175 additions and 20 deletions
Show Stats Download Patch File Download Diff File Expand all files Collapse all files

18
src/_includes/navbar.html
View File

@ -1,16 +1,12 @@
<div class="collapse hidden-print" id="banner">
<div class="navbar navbar-org navbar-static-top">
<div class="container">
<div class="message-container">
<div class="tagline">
<span id="rotating-message"></span>
</div>
<div class="action">
<a id="rotating-url" class="btn btn-primary btn-block" href=""></a>
<ul class="nav navbar-nav navbar-right">
<li><a href="http://fonticons.com/?ref=font-awesome-org-navbar"><i class="fas fas-star-logo"></i>&nbsp; Fonticons</a></li>
<li class="active"><a href="http://fontawesome.io/?ref=font-awesome-org-navbar"><i class="fas fas-flag-logo"></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>
</div>
<div class="navbar navbar-inverse navbar-static-top hidden-print">
<div class="container">
@ -19,7 +15,7 @@
<span class="sr-only">Toggle navigation</span>
<i class="fa fa-bars fa-lg"></i>
</button>
<a class="navbar-brand" href="{{ page.relative_path }}"><i class="fas fas-logo"></i></a>
<a class="navbar-brand" href="{{ page.relative_path }}"><i class="fas fas-flag-logo fas-lg"></i> Font Awesome</a>
</div>
<div class="navbar-collapse collapse">

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

@ -54,7 +54,7 @@ $(function () {
}
];
selectFonticonsAd();
//selectFonticonsAd();
// start the icon carousel
$('#icon-carousel').carousel({

145
src/assets/less/site/bootstrap/navbar.less
View File

@ -6,7 +6,10 @@
font-family: @font-family-serif;
font-weight: 300;
font-size: 20px;
.fa-flag { padding-right: 3px; }
.fas-flag-logo {
padding-right: 3px;
vertical-align: baseline;
}
}
.navbar-nav > li > a { padding: 11px 10px 9px; }
@ -33,3 +36,143 @@
}
.navbar-nav.navbar-right:last-child { margin-right: -10px; }
//
// FONTICONS ORG NAVBAR
// --------------------
//
.navbar-org {
background-color: @navbar-inverse-link-active-bg;
border-color: mix(#000, @fa-green, 20%);
padding: 0;
.ficon-logo-flag, .ficon-log-fort { vertical-align: baseline; }
.navbar-text {
color: mix(#fff, @fa-green, 60%);
margin-top: 12px;
margin-right: 30px;
}
.navbar-nav {
margin-right: -10px;
> li + li { margin-left: 15px; }
> li > a {
color: mix(#fff, @navbar-inverse-bg, 75%);
&:hover,
&:focus {
color: mix(#fff, @fa-green, 100%);
background-color: transparent;
border-bottom: solid 2px mix(#fff, @fa-green, 90%);
}
}
> .active > a {
&,
&:hover,
&:focus {
color: mix(#fff, @navbar-inverse-bg, 75%);
background-color: transparent;
border-radius: 0;
border-bottom: solid 2px mix(#fff, @navbar-inverse-bg, 65%);
}
}
> .disabled > a {
&,
&:hover,
&:focus {
color: @navbar-inverse-link-disabled-color;
background-color: @navbar-inverse-link-disabled-bg;
}
}
}
// Darken the responsive nav toggle
.navbar-toggle {
border-color: @navbar-inverse-toggle-border-color;
&:hover,
&:focus {
background-color: @navbar-inverse-toggle-hover-bg;
}
.icon-bar {
background-color: @navbar-inverse-toggle-icon-bar-bg;
}
}
.navbar-collapse,
.navbar-form {
border-color: darken(@navbar-inverse-bg, 7%);
}
// Dropdowns
.navbar-nav {
> .open > a {
&,
&:hover,
&:focus {
background-color: @navbar-inverse-link-active-bg;
color: @navbar-inverse-link-active-color;
}
}
@media (max-width: @grid-float-breakpoint-max) {
// Dropdowns get custom display
.open .dropdown-menu {
> .dropdown-header {
border-color: @navbar-inverse-border;
}
.divider {
background-color: @navbar-inverse-border;
}
> li > a {
color: @navbar-inverse-link-color;
&:hover,
&:focus {
color: @navbar-inverse-link-hover-color;
background-color: @navbar-inverse-link-hover-bg;
}
}
> .active > a {
&,
&:hover,
&:focus {
color: @navbar-inverse-link-active-color;
background-color: @navbar-inverse-link-active-bg;
}
}
> .disabled > a {
&,
&:hover,
&:focus {
color: @navbar-inverse-link-disabled-color;
background-color: @navbar-inverse-link-disabled-bg;
}
}
}
}
}
.navbar-link {
color: @navbar-inverse-link-color;
&:hover {
color: @navbar-inverse-link-hover-color;
}
}
.btn-link {
color: @navbar-inverse-link-color;
&:hover,
&:focus {
color: @navbar-inverse-link-hover-color;
}
&[disabled],
fieldset[disabled] & {
&:hover,
&:focus {
color: @navbar-inverse-link-disabled-color;
}
}
}
}

2
src/assets/less/site/jumbotron-carousel.less
View File

@ -3,7 +3,7 @@
margin-top: @buffer-sm;
font-size: @size;
text-align: center;
line-height: @size + 20;
line-height: @size + 30;
text-shadow: 0 2px 0 rgba(0,0,0,0.15);
}
.carousel-control {

2
src/assets/less/site/responsive/screen-lg.less
View File

@ -2,7 +2,7 @@
#icon-carousel {
@size: 240px;
font-size: @size;
line-height: @size + 20;
line-height: @size + 35;
margin-top: @buffer-lg;
}

2
src/assets/less/site/responsive/screen-sm.less
View File

@ -2,7 +2,7 @@
#icon-carousel {
@size: 200px;
font-size: @size;
line-height: @size + 20;
line-height: @size + 30;
}
.carousel-control {
top: @size - 10px;

18
src/assets/less/site/responsive/screen-xs.less
View File

@ -2,7 +2,7 @@
#icon-carousel {
@size: 180px;
font-size: @size;
line-height: @size + 20;
line-height: @size + 30;
width: 280px;
margin: 30px auto 0;
}
@ -79,4 +79,20 @@
margin-left: 0;
margin-top: 10px;
}
.navbar-org {
text-align: center;
.container { padding: 0; }
.navbar-nav {
margin: 0;
> li + li {
margin-left: 0;
}
}
.nav > li {
float: left;
width: 50%;
}
}
}

2
src/assets/less/site/textured-bg.less
View File

@ -1,4 +1,4 @@
.jumbotron, .navbar-inverse, #footer {
.jumbotron, .navbar-inverse, .navbar-inverse .navbar-nav > li.active > a, .navbar-org, #footer {
position: relative;
&:after {
content: '';