Added main topbar and shit.

index.html

@@ -12,12 +12,38 @@
     <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>
     <script type="text/javascript" src="js/jquery/chili/recipes.js"></script>
     <script id="setup" type="text/javascript">
-    	ChiliBook.lineNumbers = true; 
+    	ChiliBook.lineNumbers = true;
     </script>
 
     <!-- Debug line-height -->
@@ -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>
@@ -385,11 +411,11 @@
     <h3>h3. Heading 3</h3>
     <h4>h4. Heading 4</h4>
     <h5>h5. Heading 5</h5>
-    <h6>h6. Heading 6</h6>    
+    <h6>h6. Heading 6</h6>
   </div>
   <div class="span6 columns">
     <h3>Example paragraph (body text)</h3>
-    <p>Nullam quis risus eget urna mollis ornare vel eu leo. Cum sociis natoque penatibus et magnis dis parturient montes, nascetur ridiculus mus. Nullam id dolor id nibh ultricies vehicula ut id elit.</p>    
+    <p>Nullam quis risus eget urna mollis ornare vel eu leo. Cum sociis natoque penatibus et magnis dis parturient montes, nascetur ridiculus mus. Nullam id dolor id nibh ultricies vehicula ut id elit.</p>
   </div>
 </div>
 
@@ -966,13 +992,51 @@
 
 
 <section id="navigation">
-<div class="page-header">
-  <h1>Navigation</h1>
-</div>
+  <div class="page-header">
+    <h1>Navigation</h1>
+  </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">
@@ -1139,7 +1203,7 @@
 
 
 
-      
+
     </div> <!-- /container -->
 
     <div id="footer">

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 {
-    font-weight: normal;
-    padding-top: 0;
+  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
 -------------------------------------------------- */