More subtle grid pattern, adding dropdown arrow, adding dropdown arrow styles to...

diff --git a/img/dropdown-arrow.gif b/img/dropdown-arrow.gif
new file mode 100644 (file)
index 0000000..2da9c1d
Binary files /dev/null and b/img/dropdown-arrow.gif differ

diff --git a/img/grid-20px.png b/img/grid-20px.png
index 00cdfaca33e2e8f20d383d91f239ad5c16af21d7..91b8bf38d549f84977a76baf033087651a440622 100644 (file)
Binary files a/img/grid-20px.png and b/img/grid-20px.png differ

diff --git a/index.html b/index.html
index 2b7694f743a46f80e91df2c66f9c891e2ae082f7..5876ac5e8f1939ed1adb7422399817271caf4739 100644 (file)
--- a/index.html
+++ b/index.html
@@ -1001,7 +1001,7 @@
       <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 @@
     </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
index f20b5c674c0255353f44a9aefb24ab0296bea2ae..3feb91a1048a63ce56247c9e72d5dfd53f05b9f1 100644 (file)
--- a/less/baseline.css
+++ b/less/baseline.css
@@ -150,8 +150,8 @@ table.zebra-striped th.headerSortUp.purple,table.zebra-striped th.headerSortDown
 div.topbar{background-color:#222222;background-repeat:no-repeat;background-image:-webkit-gradient(linear, left top, left bottom, from(#333333), to(#222222));background-image:-webkit-linear-gradient(#333333, #222222);background-image:-moz-linear-gradient(#333333, #222222);background-image:-o-linear-gradient(top, #333333, #222222);background-image:-khtml-gradient(linear, left top, left bottom, from(#333333), to(#222222));filter:progid:DXImageTransform.Microsoft.Gradient(StartColorStr='#333333', EndColorStr='#222222', GradientType=0);-ms-filter:"progid:DXImageTransform.Microsoft.gradient(startColorStr='#333333', EndColorStr='#222222', GradientType=0))";height:40px;position:fixed;top:0;left:0;right:0;z-index:100;overflow:visible;-webkit-box-shadow:0 1px 3px rgba(0, 0, 0, 0.25),inset 0 -1px 0 rgba(0, 0, 0, 0.1);-moz-box-shadow:0 1px 3px rgba(0, 0, 0, 0.25),inset 0 -1px 0 rgba(0, 0, 0, 0.1);box-shadow:0 1px 3px rgba(0, 0, 0, 0.25),inset 0 -1px 0 rgba(0, 0, 0, 0.1);}div.topbar a{color:#777777;text-shadow:0 -1px 0 rgba(0, 0, 0, 0.25);-webkit-transition:all linear 0.1s;-moz-transition:all linear 0.1s;transition:all linear 0.1s;}
 div.topbar ul li a:hover,div.topbar ul li.active a,div.topbar a.logo:hover{background-color:#333;background-color:rgba(255, 255, 255, 0.15);color:#ffffff;text-decoration:none;}
 div.topbar a.logo{float:left;display:block;padding:8px 20px 12px;margin-left:-20px;color:#ffffff;font-size:20px;font-weight:200;line-height:1;}div.topbar a.logo img{display:inline;float:left;margin-right:6px;}
-div.topbar form{float:left;margin:4px 0 0 0;opacity:1;position:relative;}div.topbar form input{background-color:#777777;background-color:rgba(255, 255, 255, 0.3);font-family:"Helvetica Neue",Helvetica,Arial,sans-serif;font-size:normal;font-weight:13px;line-height:1;width:220px;padding:4px 9px;color:#fff;color:rgba(255, 255, 255, 0.75);border:1px solid #111;-moz-border-radius:4px;border-radius:4px;-webkit-box-shadow:inset 0 1px 2px rgba(0, 0, 0, 0.1),0 1px 0px rgba(255, 255, 255, 0.25);-moz-box-shadow:inset 0 1px 2px rgba(0, 0, 0, 0.1),0 1px 0px rgba(255, 255, 255, 0.25);box-shadow:inset 0 1px 2px rgba(0, 0, 0, 0.1),0 1px 0px rgba(255, 255, 255, 0.25);-webkit-transition:none;-moz-transition:none;transition:none;}div.topbar form input:-moz-placeholder{color:#fff;}
-div.topbar form input::-webkit-input-placeholder{color:#fff;}
+div.topbar form{float:left;margin:4px 0 0 0;opacity:1;position:relative;}div.topbar form input{background-color:#777777;background-color:rgba(255, 255, 255, 0.3);font-family:"Helvetica Neue",Helvetica,Arial,sans-serif;font-size:normal;font-weight:13px;line-height:1;width:220px;padding:4px 9px;color:#fff;color:rgba(255, 255, 255, 0.75);border:1px solid #111;-moz-border-radius:4px;border-radius:4px;-webkit-box-shadow:inset 0 1px 2px rgba(0, 0, 0, 0.1),0 1px 0px rgba(255, 255, 255, 0.25);-moz-box-shadow:inset 0 1px 2px rgba(0, 0, 0, 0.1),0 1px 0px rgba(255, 255, 255, 0.25);box-shadow:inset 0 1px 2px rgba(0, 0, 0, 0.1),0 1px 0px rgba(255, 255, 255, 0.25);-webkit-transition:none;-moz-transition:none;transition:none;}div.topbar form input:-moz-placeholder{color:#cccccc;}
+div.topbar form input::-webkit-input-placeholder{color:#cccccc;}
 div.topbar form input:hover{background-color:#444;background-color:rgba(255, 255, 255, 0.5);color:#fff;}
 div.topbar form input:focus,div.topbar form input.focused{outline:none;background-color:#fff;color:#333333;text-shadow:0 1px 0 #fff;border:0;padding:5px 10px;-webkit-box-shadow:0 0 3px rgba(0, 0, 0, 0.15);-moz-box-shadow:0 0 3px rgba(0, 0, 0, 0.15);box-shadow:0 0 3px rgba(0, 0, 0, 0.15);}
 div.topbar ul{display:block;float:left;margin:0 10px 0 0;}div.topbar ul.secondary-nav{float:right;margin-left:10px;margin-right:0;}
@@ -160,8 +160,8 @@ div.topbar ul li.active a{background-color:#222;background-color:rgba(0, 0, 0, 0
 div.topbar ul li.vr{border-left:1px solid #008db8;border-right:1px solid #00a0d1;height:26px;margin:6px 3px 1px 3px;}
 div.topbar ul.primary-nav li ul{left:0;}
 div.topbar ul.secondary-nav li ul{right:0;}
-div.topbar ul li.menu{position:relative;}div.topbar ul li.menu 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;}
-div.topbar ul li.menu.open a.menu,div.topbar ul li.menu.open a:hover{background-color:#00b4eb;background-color:rgba(255, 255, 255, 0.1);}
+div.topbar ul li.menu{position:relative;}div.topbar ul li.menu a.menu:after{width:7px;height:7px;display:inline-block;background:transparent url(../img/dropdown-arrow.gif) no-repeat top center;content:"↓";text-indent:-99999px;vertical-align:top;margin-top:8px;margin-left:4px;opacity:.5;}
+div.topbar ul li.menu.open a.menu,div.topbar ul li.menu.open a:hover{background-color:#00b4eb;background-color:rgba(255, 255, 255, 0.1);color:#fff;}
 div.topbar ul li.menu.open ul{display:block;}div.topbar ul li.menu.open ul li a{background-color:transparent;font-weight:normal;}div.topbar ul li.menu.open ul li a:hover{background-color:rgba(255, 255, 255, 0.1);color:#fff;}
 div.topbar ul li.menu.open ul li.active a{background-color:rgba(255, 255, 255, 0.1);font-weight:bold;}
 div.topbar ul 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;-moz-border-radius:0 0 5px 5px;border-radius:0 0 5px 5px;-webkit-box-shadow:0 1px 2px rgba(0, 0, 0, 0.6);-moz-box-shadow:0 1px 2px rgba(0, 0, 0, 0.6);box-shadow:0 1px 2px rgba(0, 0, 0, 0.6);}div.topbar ul li ul li{float:none;clear:both;display:block;background:none;font-size:12px;}div.topbar ul li ul li a{display:block;padding:6px 15px;clear:both;font-weight:normal;line-height:19px;color:#bbb;}div.topbar ul li ul li a:hover{background-color:#333;background-color:rgba(255, 255, 255, 0.25);color:#fff;}
@@ -196,7 +196,7 @@ div.well{background:#f5f5f5;margin-bottom:20px;padding:19px;min-height:20px;bord
 body{background-color:#ffffff;background-repeat:no-repeat;background-image:-webkit-gradient(linear, 0 0, 0 100%, from(#eeeeee), color-stop(0.15, #ffffff), to(#ffffff));background-image:-webkit-linear-gradient(#eeeeee, color-stop(0.15, #ffffff), #ffffff);background-image:-moz-linear-gradient(#eeeeee, color-stop(#ffffff, 0.15), #ffffff);background-attachment:fixed;background-position:0 40px;position:relative;}
 header,section,footer,article,aside{display:block;}
 section{padding-top:80px;margin-bottom:-40px;}
-#masthead,#footer{background-color:#049cd9;background-repeat:no-repeat;background-image:-webkit-gradient(linear, left top, left bottom, from(#005cbd), to(#049cd9));background-image:-webkit-linear-gradient(#005cbd, #049cd9);background-image:-moz-linear-gradient(#005cbd, #049cd9);background-image:-o-linear-gradient(top, #005cbd, #049cd9);background-image:-khtml-gradient(linear, left top, left bottom, from(#005cbd), to(#049cd9));filter:progid:DXImageTransform.Microsoft.Gradient(StartColorStr='#005cbd', EndColorStr='#049cd9', GradientType=0);-ms-filter:"progid:DXImageTransform.Microsoft.gradient(startColorStr='#005cbd', EndColorStr='#049cd9', GradientType=0))";}#masthead div.inner,#footer div.inner{background:transparent url(../img/grid-20px.png) 0 -1px;padding:40px 0;-webkit-box-shadow:inset 0 10px 30px rgba(0, 0, 0, 0.25);-moz-box-shadow:inset 0 10px 30px rgba(0, 0, 0, 0.25);box-shadow:inset 0 10px 30px rgba(0, 0, 0, 0.25);}
+#masthead,#footer{background-color:#049cd9;background-repeat:no-repeat;background-image:-webkit-gradient(linear, left top, left bottom, from(#0056b0), to(#049cd9));background-image:-webkit-linear-gradient(#0056b0, #049cd9);background-image:-moz-linear-gradient(#0056b0, #049cd9);background-image:-o-linear-gradient(top, #0056b0, #049cd9);background-image:-khtml-gradient(linear, left top, left bottom, from(#0056b0), to(#049cd9));filter:progid:DXImageTransform.Microsoft.Gradient(StartColorStr='#0056b0', EndColorStr='#049cd9', GradientType=0);-ms-filter:"progid:DXImageTransform.Microsoft.gradient(startColorStr='#0056b0', EndColorStr='#049cd9', GradientType=0))";}#masthead div.inner,#footer div.inner{background:transparent url(../img/grid-20px.png) 0 -1px;padding:40px 0;-webkit-box-shadow:inset 0 10px 30px rgba(0, 0, 0, 0.25);-moz-box-shadow:inset 0 10px 30px rgba(0, 0, 0, 0.25);box-shadow:inset 0 10px 30px rgba(0, 0, 0, 0.25);}
 #masthead h1,#footer h1,#masthead p,#footer p,#masthead small,#footer small{color:#fff;text-shadow:0 2px 0 rgba(0, 0, 0, 0.25);}
 #masthead{margin-top:40px;margin-bottom:-40px;}#masthead h1{margin-bottom:0;}
 #masthead p.lead{font-size:20px;font-weight:300;line-height:30px;margin:5px 0;}

diff --git a/less/docs.less b/less/docs.less
index b5838c9341beb0ced42805147a25ca64e5f07771..b10eb29a086158582bf13c498588d80e932a6c72 100644 (file)
--- 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
index 1ff8bc9358b8d9d61212b591c3287d58277b91d2..7c5a902fac4534f460789de262ae6a9ea6c4276e 100644 (file)
--- 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:"↓";
+          background: transparent url(../img/dropdown-arrow.gif) no-repeat top center;
+          content: "↓";
           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;