diff options
author | Dave Gandy <dave@davegandy.com> | 2015-12-17 00:01:44 +0300 |
---|---|---|
committer | Dave Gandy <dave@davegandy.com> | 2015-12-17 00:01:44 +0300 |
commit | 83e23c36dfa56ef1c25a3a0f69e6eeb9cb763da1 (patch) | |
tree | da09b4259f0b1676b9eddb4db53acb0415587ee6 | |
parent | 97d0b9491d189612ac88146da680032948d9384e (diff) |
Updating site to include new fonticons org navbar
-rw-r--r-- | src/_includes/navbar.html | 18 | ||||
-rw-r--r-- | src/assets/js/site.js | 2 | ||||
-rw-r--r-- | src/assets/less/site/bootstrap/navbar.less | 147 | ||||
-rw-r--r-- | src/assets/less/site/bootstrap/variables.less | 2 | ||||
-rw-r--r-- | src/assets/less/site/jumbotron-carousel.less | 2 | ||||
-rw-r--r-- | src/assets/less/site/responsive/screen-lg.less | 2 | ||||
-rw-r--r-- | src/assets/less/site/responsive/screen-sm.less | 2 | ||||
-rw-r--r-- | src/assets/less/site/responsive/screen-xs.less | 18 | ||||
-rw-r--r-- | src/assets/less/site/textured-bg.less | 2 |
9 files changed, 175 insertions, 20 deletions
diff --git a/src/_includes/navbar.html b/src/_includes/navbar.html index 034a5ffc5..5223f6e69 100644 --- a/src/_includes/navbar.html +++ b/src/_includes/navbar.html @@ -1,17 +1,13 @@ -<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> - </div> - </div> + <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> Fonticons</a></li> + <li class="active"><a href="http://fontawesome.io/?ref=font-awesome-org-navbar"><i class="fas fas-flag-logo"></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"> @@ -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"> diff --git a/src/assets/js/site.js b/src/assets/js/site.js index 75a7c7158..1d62c1682 100644 --- a/src/assets/js/site.js +++ b/src/assets/js/site.js @@ -54,7 +54,7 @@ $(function () { } ]; - selectFonticonsAd(); + //selectFonticonsAd(); // start the icon carousel $('#icon-carousel').carousel({ diff --git a/src/assets/less/site/bootstrap/navbar.less b/src/assets/less/site/bootstrap/navbar.less index e09699ac3..ccdaff3c3 100644 --- a/src/assets/less/site/bootstrap/navbar.less +++ b/src/assets/less/site/bootstrap/navbar.less @@ -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; } @@ -32,4 +35,144 @@ } } -.navbar-nav.navbar-right:last-child { margin-right: -10px; }
\ No newline at end of file +.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; + } + } + } +} diff --git a/src/assets/less/site/bootstrap/variables.less b/src/assets/less/site/bootstrap/variables.less index 655866484..f70c12873 100644 --- a/src/assets/less/site/bootstrap/variables.less +++ b/src/assets/less/site/bootstrap/variables.less @@ -107,7 +107,7 @@ @state-info-bg: @blue-lighter; @state-info-border: darken(spin(@state-info-bg, -10), 7%); -@state-danger-text: @brand-danger; + @state-danger-text: @brand-danger; @state-danger-bg: mix(@state-danger-text,#fff,10%); @state-danger-border: darken(spin(@state-danger-bg, -10), 5%); diff --git a/src/assets/less/site/jumbotron-carousel.less b/src/assets/less/site/jumbotron-carousel.less index 1dce202cd..014b0af8c 100644 --- a/src/assets/less/site/jumbotron-carousel.less +++ b/src/assets/less/site/jumbotron-carousel.less @@ -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 { diff --git a/src/assets/less/site/responsive/screen-lg.less b/src/assets/less/site/responsive/screen-lg.less index 049714d83..04a3586bc 100644 --- a/src/assets/less/site/responsive/screen-lg.less +++ b/src/assets/less/site/responsive/screen-lg.less @@ -2,7 +2,7 @@ #icon-carousel { @size: 240px; font-size: @size; - line-height: @size + 20; + line-height: @size + 35; margin-top: @buffer-lg; } diff --git a/src/assets/less/site/responsive/screen-sm.less b/src/assets/less/site/responsive/screen-sm.less index 083d35f1d..ef3f33423 100644 --- a/src/assets/less/site/responsive/screen-sm.less +++ b/src/assets/less/site/responsive/screen-sm.less @@ -2,7 +2,7 @@ #icon-carousel { @size: 200px; font-size: @size; - line-height: @size + 20; + line-height: @size + 30; } .carousel-control { top: @size - 10px; diff --git a/src/assets/less/site/responsive/screen-xs.less b/src/assets/less/site/responsive/screen-xs.less index 052638c28..3ba01b153 100644 --- a/src/assets/less/site/responsive/screen-xs.less +++ b/src/assets/less/site/responsive/screen-xs.less @@ -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%; + } + } } diff --git a/src/assets/less/site/textured-bg.less b/src/assets/less/site/textured-bg.less index 2f2d1d9db..65690b59d 100644 --- a/src/assets/less/site/textured-bg.less +++ b/src/assets/less/site/textured-bg.less @@ -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: ''; |