Added main topbar and shit.

index.html

@@ -12,6 +12,32 @@
     <script type="text/javascript" src="http://code.jquery.com/jquery-1.5.2.min.js"></script>
     <script type="text/javascript" src="http://tablesorter.com/jquery.tablesorter.min.js"></script>
     <script type="text/javascript" src="js/jquery/hashgrid.js"></script>
+    <script type="text/javascript">
+      // Javascript to toggle the dropdowns
+      $(document).ready(function(){
+        // Dropdowns
+        $("body").bind("click", function(e) {
+          $("ul.menu-dropdown").hide();
+          $('a.menu').parent("li").removeClass("open").children("ul.menu-dropdown").hide();
+        });
+        $("a.menu").click(function(e) {
+          var $target = $(this);
+          var $parent = $target.parent("li");
+          var $siblings = $target.siblings("ul.menu-dropdown");
+          var $parentSiblings = $parent.siblings("li");
+          if ($parent.hasClass("open")) {
+            $parent.removeClass("open");
+            $siblings.hide();
+          } else {
+            $parent.addClass("open");
+            $siblings.show();
+          }
+          $parentSiblings.children("ul.menu-dropdown").hide();
+          $parentSiblings.removeClass("open");
+          return false;
+        });
+      });
+    </script>
 
     <!-- Code Highlighting -->
     <script type="text/javascript" src="js/jquery/chili/jquery.chili-2.2.js"></script>
@@ -37,7 +63,7 @@
 
     <div class="topbar">
       <div class="container fixed">
-        <h3><a id="logo" href="index.html">
+        <h3><a class="logo" href="index.html">
           <img src="img/twitter-logo-no-bird.png" alt="Twitter" /> <span>baseline</span>
         </a></h3>
         <ul>
@@ -966,13 +992,51 @@
 
 
 <section id="navigation">
-<div class="page-header">
+  <div class="page-header">
     <h1>Navigation</h1>
-</div>
+  </div>
+  <h2>Fixed topbar</h2>
+  <div class="topbar-wrapper">
+    <div class="topbar">
+      <div class="container fixed">
+        <h3><a class="logo" href="">Project Name</a></h3>
+        <ul>
+          <li><a href="">Home</a></li>
+          <li><a href="">Profile</a></li>
+          <li><a href="">Messages</a></li>
+          <li><a href="">Who to Follow</a></li>
+        </ul>
+        <form action="">
+          <input type="text" placeholder="Search" />
+        </form>
+        <ul class="nav secondary-nav">
+          <li class="menu">
+            <a href="#" class="menu">Username</a>
+            <ul class="menu-dropdown">
+              <li><a href="">Secondary link</a></li>
+              <li><a href="">Something else here</a></li>
+              <li class="divider"></li>
+              <li><a href="">Sign Out</a></li>
+            </ul>
+          </li>
+        </ul>
+      </div>
+    </div>
+  </div> <!-- topbar-wrapper -->
+  <div class="row">
+    <div class="span6 columns">
+      <p>Our topbar is a fixed bar that houses a website's logo or name, primary navigation, and search form.</p>
+    </div>
+    <div class="span6 columns">
+      <p>All elements are optional in the topbar, as is the entire topbar. Contents are configurable in that you can have a logo, nav, search, and a secondary nav&mdash;or any combination of that.</p>
+    </div>
+  </div>
+
+  <br />
 
 <div class="row">
   <div class="span4 columns">
-    <h3>Tabs or pills?</h3>
+    <h2>Tabs and pills</h2>
     <p>Create simple secondary navigation with a <code>ul</code>. Swap between tabs or pills by adding the appropriate class.</p>
     <p>Great for sub-sections of content like our account settings pages and user timelines for toggling between pages of like content. Available in tabbed or pill styles.</p>
   </div>
@@ -1014,7 +1078,7 @@
 
 <div class="row">
   <div class="span4 columns">
-    <h3>Pagination</h3>
+    <h2>Pagination</h2>
     <p>Ultra simplistic and minimally styled pagination inspired by Rdio. The large block is hard to miss, easily scalable, and provides large click areas.</p>
   </div>
   <div class="span12 columns">

less/docs.less

@@ -179,3 +179,21 @@ div.mini-layout {
     }
   }
 }
+
+
+
+/* Topbar special styles
+-------------------------------------------------- */
+
+div.topbar-wrapper {
+  position: relative;
+  height: 40px;
+  margin: 5px 0 15px;
+  div.topbar {
+    position: absolute;
+    margin: 0 -20px;
+    padding-left: 20px;
+    padding-right: 20px;
+    .border-radius(4px);
+  }
+}

less/forms.less

@@ -64,11 +64,9 @@ form {
     border: 1px solid #bbb;
     .border-radius(3px);
   }
-  select {
-    height: @baseline * 1.5;
-    line-height: @baseline * 1.5;
-  }
+  select,
   input[type=file] {
+    height: @baseline * 1.5;
     line-height: @baseline * 1.5;
   }
   textarea {
@@ -317,7 +315,7 @@ form.form-stacked {
     font-weight: bold;
     text-align: left;
     line-height: 20px;
-    padding-top: 1px;
+    padding-top: 0;
   }
   div.clearfix {
     margin-bottom: @baseline / 2;
@@ -325,8 +323,14 @@ form.form-stacked {
       margin-left: 0;
     }
   }
-  ul.inputs-list li label {
+  ul.inputs-list {
+    margin-bottom: 0;
+    li {
+      padding-top: 0;
+      label {
         font-weight: normal;
         padding-top: 0;
       }
+    }
+  }
 }

less/patterns.less

@@ -7,6 +7,7 @@
 /* Top bar
 -------------------------------------------------- */
 
+/*
 div.topbar {
   #gradient > .vertical(#333, #222);
   position: fixed;
@@ -19,12 +20,12 @@ div.topbar {
   a {
     color: #999;
     &:hover {
-      color: #fff;
+      color: @white;
       text-decoration: none;
       background-color: rgba(255,255,255,.05);
     }
   }
-  a#logo,
+  a.logo,
   ul li a {
     float: left;
     padding: 0 10px;
@@ -32,7 +33,7 @@ div.topbar {
     text-shadow: 0 -1px 0 rgba(0,0,0,.25);
   }
   // Logo
-  a#logo {
+  a.logo {
     margin-left: -10px;
     margin-right: 10px;
     color: @gray-light;
@@ -43,7 +44,8 @@ div.topbar {
       margin-top: 9px;
       margin-right: 6px;
     }
-    span {
+    &:hover {
+      color: @white;
     }
   }
   // Nav items
@@ -59,6 +61,237 @@ div.topbar {
     }
   }
 }
+*/
+
+// Topbar for Branding and Nav
+div.topbar {
+  #gradient > .vertical(#333, #222);
+  height: 40px;
+  position: fixed;
+  top: 0;
+  left: 0;
+  right: 0;
+  z-index: 100;
+  overflow: visible;
+  @shadow: 0 1px 3px rgba(0,0,0,.25), inset 0 -1px 0 rgba(0,0,0,.1);
+  .box-shadow(@shadow);
+  // Links get text shadow
+  a {
+    color: @gray-light;
+    text-shadow: 0 -1px 0 rgba(0,0,0,.25);
+    .transition(all linear .1s);
+  }
+  // Hover and active states for links
+  ul li a:hover,
+  ul li.active a,
+  a.logo:hover {
+    background-color: #333;
+    background-color: rgba(255,255,255,.15);
+    color: @white;
+    text-decoration: none;
+  }
+  // Logo
+  a.logo {
+    float: left;
+    display: block;
+    padding: 8px 20px 12px;
+    margin-left: -20px;
+    color: @white;
+    font-size: 20px;
+    font-weight: 200;
+    line-height: 1;
+    img {
+      display: inline;
+      float: left;
+      margin-right: 6px;
+    }
+  }
+  // Search Form
+  form {
+    float: left;
+    margin: 4px 0 0 0;
+    opacity: 1;
+    position: relative;
+    input {
+      background-color: @gray-light;
+      background-color: rgba(255,255,255,.3);
+      .sans-serif(13px, normal, 1);
+      width: 220px;
+      padding: 4px 9px;
+      color: #fff;
+      color: rgba(255,255,255,.75);
+      border: 1px solid #111;
+      .border-radius(4px);
+      @shadow: inset 0 1px 2px rgba(0,0,0,.1), 0 1px 0px rgba(255,255,255,.25);
+      .box-shadow(@shadow);
+      .transition(none);
+      &:-moz-placeholder {
+        color: #fff;
+      }
+      &::-webkit-input-placeholder {
+        color: #fff;
+      }
+      &:hover {
+        background-color: #444;
+        background-color: rgba(255,255,255,.5);
+        color: #fff;
+      }
+      &:focus,
+      &.focused {
+        outline: none;
+        background-color: #fff;
+        color: @gray-dark;
+        text-shadow: 0 1px 0 #fff;
+        border: 0;
+        padding: 5px 10px;
+        .box-shadow(0 0 3px rgba(0,0,0,.15));
+      }
+    }
+  }
+  // Navigation
+  ul {
+    display: block;
+    float: left;
+    margin: 0 10px 0 0;
+    &.secondary-nav {
+      float: right;
+      margin-left: 10px;
+      margin-right: 0;
+    }
+    li {
+      display: block;
+      float: left;
+      font-size: 13px;
+      a {
+        display: block;
+        float: none;
+        padding: 10px 10px 11px;
+        line-height: 19px;
+        text-decoration: none;
+        &:hover {
+          color: #fff;
+          text-decoration: none;
+        }
+      }
+      &.active a {
+        background-color: #222;
+        background-color: rgba(0,0,0,.5);
+        font-weight: bold;
+      }
+      // Vertical rule
+      &.vr {
+        border-left: 1px solid #008db8;
+        border-right: 1px solid #00a0d1;
+        height: 26px;
+        margin: 6px 3px 1px 3px;
+      }
+    }
+    // Dropdowns
+    &.primary-nav li ul {
+      left: 0;
+    }
+    &.secondary-nav li ul {
+      right: 0;
+    }
+    li.menu {
+      position: relative;
+      a.menu {
+        span.menu-label:after {
+          width: 7px;
+          height: 7px;
+          display: inline-block;
+          background: transparent url(/images/sprite-icons.png) no-repeat scroll -79px -100px;
+          content:"↓";
+          text-indent: -99999px;
+          vertical-align: top;
+          margin-top: 8px;
+          margin-left: 4px;
+          opacity: .5;
+        }
+      }
+      &.open {
+        a.menu,
+        a:hover {
+          background-color: lighten(#00a0d1,5);
+          background-color: rgba(255,255,255,.1);
+        }
+        ul {
+          display: block;
+          li {
+            a {
+              background-color: transparent;
+              font-weight: normal;
+              &:hover {
+                background-color: rgba(255,255,255,.1);
+                color: #fff;
+              }
+            }
+            &.active a {
+              background-color: rgba(255,255,255,.1);
+              font-weight: bold;
+            }
+          }
+        }
+      }
+    }
+    li ul {
+      background-color: #333;
+      float: left;
+      display: none;
+      position: absolute;
+      top: 40px;
+      min-width: 160px;
+      max-width: 220px;
+      _width: 160px;
+      margin-left: 0;
+      margin-right: 0;
+      padding: 0;
+      text-align: left;
+      border: 0;
+      zoom: 1;
+      .border-radius(0 0 5px 5px);
+      .box-shadow(0 1px 2px rgba(0,0,0,0.6));
+      li {
+        float: none;
+        clear: both;
+        display: block;
+        background: none;
+        font-size: 12px;
+        a {
+          display: block;
+          padding: 6px 15px;
+          clear: both;
+          font-weight: normal;
+          line-height: 19px;
+          color: #bbb;
+          &:hover {
+            background-color: #333;
+            background-color: rgba(255,255,255,.25);
+            color: #fff;
+          }
+        }
+        // Dividers (basically an hr)
+        &.divider {
+          height: 1px;
+          overflow: hidden;
+          background: rgba(0,0,0,.2);
+          border-bottom: 1px solid rgba(255,255,255,.1);
+          margin: 5px 0;
+        }
+        // Section separaters
+        span {
+          clear: both;
+          display: block;
+          background: rgba(0,0,0,.2);
+          padding: 6px 15px;
+          cursor: default;
+          color: #666;
+          border-top: 1px solid rgba(0,0,0,.2);
+        }
+      }
+    }
+  }
+}
 
 /* Page Headers
 -------------------------------------------------- */