[2375] Add markup for the masthead

ckan · May 10, 2012 · 582eae1 · 582eae1
1 parent b9fd8b5
commit 582eae1
Show file tree

Hide file tree

Showing 4 changed files with 79 additions and 5 deletions.
diff --git a/ckan/public/base/less/ckan.less b/ckan/public/base/less/ckan.less
@@ -2,7 +2,4 @@
 @import "module.less";
 @import "nav.less";
 @import "dataset.less";
-
-body {
-  background: @layout-background-color;
-}
+@import "masthead.less";
diff --git a/ckan/public/base/less/masthead.less b/ckan/public/base/less/masthead.less
@@ -0,0 +1,56 @@
+.masthead {
+  .clearfix();
+  #gradient > .vertical(@masthead-background-color-start, @masthead-background-color-end);
+  color: @masthead-text-color;
+  padding: 20px;
+}
+
+.masthead a {
+  color: @masthead-link-color;
+}
+
+.masthead hgroup,
+.masthead nav {
+  float: left;
+}
+
+.masthead hgroup h1,
+.masthead hgroup p {
+  font-size: 34px;
+  line-height: 1.2;
+  display: inline;
+}
+
+.masthead hgroup p {
+  margin-left: 0.3em;
+  font-style: italic;
+}
+
+.masthead nav {
+  display: inline-block;
+  float: right;
+  line-height: 40px;
+}
+
+.masthead nav ul {
+  margin: 0;
+}
+
+.masthead nav > ul > li {
+  display: inline-block;
+}
+
+.masthead nav > ul > li > a {
+  display: block;
+  font-size: 14px;
+  font-weight: bold;
+  padding: 4px 10px;
+}
+
+.masthead nav > ul > li > a.active {
+  @inset-box-shadow: inset 0 1px 0 rgba(0, 0, 0, 0.3);
+  .border-radius(15px);
+  .box-shadow(@inset-box-shadow);
+  box-shadow: @inset-box-shadow, 0 1px 0 rgba(255, 255, 255, 0.3);
+  background-color: rgba(255, 255, 255, 0.15);
+}
diff --git a/ckan/public/base/less/variables.less b/ckan/public/base/less/variables.less
@@ -15,6 +15,11 @@
 
 @nav-link-color: #333;
 
+@masthead-text-color: #fff;
+@masthead-link-color: @masthead-text-color;
+@masthead-background-color-start: #005d7a;
+@masthead-background-color-end: #005d7a;
+
 // Twitter Bootstrap Overrides
 @bodyBackground: @layout-background-color;
 @baseFontFamily: @layout-font-family;

diff --git a/ckan/public/base/test/primer/index.html b/ckan/public/base/test/primer/index.html
@@ -564,7 +564,7 @@ <h2 class="heading"><a href="#">Counselling in London Central, Camden</a></h2>
       </section>
       <section class="module dataset-filters">
         <p class="content">
-          <strong class="results">4 datasets found for &quot;London&quot;</span>
+          <strong class="results">4 datasets found for &quot;London&quot;</strong>
           +
           <span>Tags:</span>
           <span class="filtered"><a href="#">camden</a> <a href="#">[remove]</a></span>
@@ -579,6 +579,22 @@ <h2 class="heading"><a href="#">Counselling in London Central, Camden</a></h2>
           <button>Search</button>
         </form>
       </section>
+      <h1 id="masthead" class="primer-heading">Masthead (Site Header)</h1>
+      <header class="masthead">
+        <hgroup>
+          <h1><a href="">My Site Title</a></h1>
+          <p>My Site Tagline</p>
+        </hgroup>
+        <nav>
+          <ul class="unstyled">
+            <li><a href="#">Find</a></li>
+            <li><a class="active" href="#">Groups</a></li>
+            <li><a href="#">Share</a></li>
+            <li><a href="#">About</a></li>
+            <li class="section"><a href="#">Login</a></li>
+          </ul>
+        </nav>
+      </header>
     </div>
   </body>
 </html>