From 83e23c36dfa56ef1c25a3a0f69e6eeb9cb763da1 Mon Sep 17 00:00:00 2001
From: Dave Gandy <dave@davegandy.com>
Date: Wed, 16 Dec 2015 16:01:44 -0500
Subject: [PATCH] Updating site to include new fonticons org navbar

---
 src/_includes/navbar.html                     |  18 +--
 src/assets/js/site.js                         |   2 +-
 src/assets/less/site/bootstrap/navbar.less    | 147 +++++++++++++++++-
 src/assets/less/site/bootstrap/variables.less |   2 +-
 src/assets/less/site/jumbotron-carousel.less  |   2 +-
 .../less/site/responsive/screen-lg.less       |   2 +-
 .../less/site/responsive/screen-sm.less       |   2 +-
 .../less/site/responsive/screen-xs.less       |  18 ++-
 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>&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 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: '';