More subtle grid pattern, adding dropdown arrow, adding dropdown arro…

…w styles to the topbar
alefteris · Apr 29, 2011 · bb8ebe2 · bb8ebe2
1 parent d61317d
commit bb8ebe2
Show file tree

Hide file tree

Showing 6 changed files with 22 additions and 14 deletions.
diff --git a/img/dropdown-arrow.gif b/img/dropdown-arrow.gif
diff --git a/img/grid-20px.png b/img/grid-20px.png
diff --git a/index.html b/index.html
@@ -1001,7 +1001,7 @@ <h2>Fixed topbar</h2>
       <div class="container fixed">
         <h3><a class="logo" href="">Project Name</a></h3>
         <ul>
-          <li><a href="">Home</a></li>
+          <li class="active"><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>
@@ -1024,11 +1024,17 @@ <h3><a class="logo" href="">Project Name</a></h3>
     </div>
   </div> <!-- topbar-wrapper -->
   <div class="row">
-    <div class="span6 columns">
+    <div class="span5 columns">
+      <h4>What is it</h4>
       <p>Our topbar is a fixed bar that houses a website's logo or name, primary navigation, and search form.</p>
     </div>
+    <div class="span5 columns">
+      <h4>Customizable</h4>
+      <p>All elements within, and the entire topbar as well, are optional. You can choose to include a logo/name, nav, search, and a secondary nav&mdash;or any combination of that.</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>
+      <h4>Dropdowns included</h4>
+      <p>As part of the main navigation, we've included the ability for you to add dropdowns to your nav. Check out the secondary nav above (right aligned) to see how it's done.</p>
     </div>
   </div>
 

diff --git a/less/baseline.css b/less/baseline.css
diff --git a/less/docs.less b/less/docs.less
@@ -33,7 +33,7 @@ section {
 // Blueprint-style header and footer
 #masthead,
 #footer {
-  #gradient > .vertical(darken(@blue-dark, 5%), darken(@blue, 7.5%));
+  #gradient > .vertical(darken(@blue-dark, 7.5%), darken(@blue, 7.5%));
   div.inner {
     background: transparent url(../img/grid-20px.png) 0 -1px;
     padding: 40px 0;

diff --git a/less/patterns.less b/less/patterns.less
@@ -125,11 +125,12 @@ div.topbar {
       @shadow: inset 0 1px 2px rgba(0,0,0,.1), 0 1px 0px rgba(255,255,255,.25);
       .box-shadow(@shadow);
       .transition(none);
+      // Placeholder text gets special styles; can't be bundled together though for some reason
       &:-moz-placeholder {
-        color: #fff;
+        color: @gray-lighter;
       }
       &::-webkit-input-placeholder {
-        color: #fff;
+        color: @gray-lighter;
       }
       &:hover {
         background-color: #444;
@@ -196,12 +197,12 @@ div.topbar {
     li.menu {
       position: relative;
       a.menu {
-        span.menu-label:after {
+        &:after {
           width: 7px;
           height: 7px;
           display: inline-block;
-          background: transparent url(/images/sprite-icons.png) no-repeat scroll -79px -100px;
-          content:"&darr;";
+          background: transparent url(../img/dropdown-arrow.gif) no-repeat top center;
+          content: "&darr;";
           text-indent: -99999px;
           vertical-align: top;
           margin-top: 8px;
@@ -214,6 +215,7 @@ div.topbar {
         a:hover {
           background-color: lighten(#00a0d1,5);
           background-color: rgba(255,255,255,.1);
+          color: #fff;
         }
         ul {
           display: block;