[gnome-devel-docs/gnome3-hig] global gnome.org navigation.

[Jakub Steiner <jimmac src gnome org>]

commit bb2b98835a380ce39054f519fc095afab63a2030
Author: Jakub Steiner <jimmac gmail com>
Date:   Thu Jan 31 17:55:13 2013 +0100

    global gnome.org navigation.

 hig3/site/images/top_bar-bg.png        |  Bin 0 -> 185 bytes
 hig3/site/images/top_bar-item-bg.png   |  Bin 0 -> 190 bytes
 hig3/site/images/top_bar-item-home.png |  Bin 0 -> 427 bytes
 hig3/site/images/wgo-search-icon.png   |  Bin 0 -> 395 bytes
 hig3/src/layouts/default.haml          |    1 +
 hig3/src/layouts/landing.haml          |    1 +
 hig3/src/pages/_top-bar.haml           |   18 ++++++
 hig3/src/stylesheets/hig.scss          |  105 +++++++++++++++++++++++++++++++-
 8 files changed, 124 insertions(+), 1 deletions(-)
---
diff --git a/hig3/site/images/top_bar-bg.png b/hig3/site/images/top_bar-bg.png
new file mode 100644
index 0000000..567188c
Binary files /dev/null and b/hig3/site/images/top_bar-bg.png differ
diff --git a/hig3/site/images/top_bar-item-bg.png b/hig3/site/images/top_bar-item-bg.png
new file mode 100644
index 0000000..fbd50fe
Binary files /dev/null and b/hig3/site/images/top_bar-item-bg.png differ
diff --git a/hig3/site/images/top_bar-item-home.png b/hig3/site/images/top_bar-item-home.png
new file mode 100644
index 0000000..1e5a591
Binary files /dev/null and b/hig3/site/images/top_bar-item-home.png differ
diff --git a/hig3/site/images/wgo-search-icon.png b/hig3/site/images/wgo-search-icon.png
new file mode 100644
index 0000000..90e8d2c
Binary files /dev/null and b/hig3/site/images/wgo-search-icon.png differ
diff --git a/hig3/src/layouts/default.haml b/hig3/src/layouts/default.haml
index be66a2f..4cf171c 100644
--- a/hig3/src/layouts/default.haml
+++ b/hig3/src/layouts/default.haml
@@ -18,6 +18,7 @@
         .menu
           = partial('menu')
       %article.main
+        =partial('top-bar')
         =typography do
           = yield
     #footerpositioner
diff --git a/hig3/src/layouts/landing.haml b/hig3/src/layouts/landing.haml
index 16216fb..8eb8fc3 100644
--- a/hig3/src/layouts/landing.haml
+++ b/hig3/src/layouts/landing.haml
@@ -17,6 +17,7 @@
         .menu
           = partial('menu')
       %article.main
+        =partial('top-bar')
         = yield
     #footerpositioner
       %hr.footerart
diff --git a/hig3/src/pages/_top-bar.haml b/hig3/src/pages/_top-bar.haml
new file mode 100644
index 0000000..cba356c
--- /dev/null
+++ b/hig3/src/pages/_top-bar.haml
@@ -0,0 +1,18 @@
+#top_bar
+  .left
+    .menu-globalnav-container
+      %ul#menu-globalnav
+        %li
+          =link "Tutorials", "/tutorials/"
+        %li
+          =link "API Reference", "/api/"
+        %li.current-menu-item
+          =link "Design", "http://library.gnome.org/design/";
+        %li
+          =link "Community", "/community/"
+  .right
+    %form{"role" => "search", "method" => "get", "id" => "searchform", "action" => "/search"}
+      %div
+        %label{"class" => "hidden", "for" => "q"}
+          Search:
+        %input{ "type"=>"text", "value"=>"", "name"=>"q", "id" => "s", "placeholder"=>"Search"}
diff --git a/hig3/src/stylesheets/hig.scss b/hig3/src/stylesheets/hig.scss
index 518b044..761aab1 100644
--- a/hig3/src/stylesheets/hig.scss
+++ b/hig3/src/stylesheets/hig.scss
@@ -69,6 +69,10 @@ table {
   }
 }
 
+.left {  float: left; }
+.right { float: right; }
+.hidden { display: none; }
+
 .shortcut {
   display: inline-block;
   min-width: 4em;
@@ -162,7 +166,7 @@ table {
 
 .contain {
 	width: 960px;
-	margin: 4em auto 0;
+	margin: 53px auto 0;
 	overflow: hidden;
 	.sidebar {
 	  @include column(5,16);
@@ -258,6 +262,73 @@ table {
   .main {  @include column(11,16);}
 }
 
+#top_bar {
+  background: url("../images/top_bar-bg.png") repeat-x scroll center top #2E3436;
+  @include border-radius(6px);
+  @include box-shadow(0,2px,4px,rgba(0, 0, 0, 0.2));
+  font-size: 13px;
+  line-height: normal;
+  padding: 8px 0;
+  overflow: hidden;
+  margin-bottom: 2em;
+  input {
+    background: url("../images/wgo-search-icon.png") no-repeat scroll 8px center transparent;
+    border: none;
+    border-left: 1px solid rgba(255, 255, 255, 0.3);
+    color: #FFFFFF;
+    font: inherit;
+    margin: -8px 0 -8px -8px;
+    outline: medium none;
+    padding: 8px 8px 8px 28px;
+    width: 150px;
+  }
+  input:focus {
+    background-color: rgba(255, 255, 255, 0.1);
+    border-bottom-right-radius: 6px;
+    border-top-right-radius: 6px;
+  }
+  input.placeholder {
+    color: #CCCCCC;
+  }
+  ul {
+    list-style: none outside none;
+    margin: 0;
+    padding: 0 5px;
+  }
+  ul li {
+    display: inline;
+    margin: 0 5px 0 0;
+  }
+  a {
+    border-radius: 4px;
+    color: #FFFFFF;
+    outline: 0 none;
+    padding: 4px 8px;
+    text-decoration: none;
+    text-shadow: 0 1px 0 #000000;
+    transition: background 100ms linear 0s;
+}
+  a:hover {
+    background-color: rgba(255, 255, 255, 0.2);
+  }
+  a:focus {
+    background-color: rgba(255, 255, 255, 0.15);
+  }
+  a:active, li.current-menu-item a, li.current-page-ancestor a {
+    background: url("../images/top_bar-item-bg.png") repeat-x scroll center top #1C2021;
+    box-shadow: 0 -1px 0 rgba(255, 255, 255, 0.4) inset, 0 1px 3px rgba(0, 0, 0, 0.4) inset;
+  }
+  li.selected a {
+    font-weight: bold;
+  }
+  li a span.home {
+    background: url("../images/top_bar-item-home.png") no-repeat scroll 0 0 transparent;
+    padding-left: 18px;
+  }
+  #main_search {
+    text-align: right;
+  }
+}
 
 .columns {
   @include row(11);
@@ -535,6 +606,38 @@ hr.footerart {
       margin-bottom: 2em;
     }
   }
+
+  .left, .right {
+    float: none;
+  }
+
+  #top_bar {
+    margin-top: 10px;
+      .menu-globalnav-container,
+      ul li,
+      ul li a  {
+        display: block;
+        width: 100%;
+      }
+      input,
+      ul li a,
+      form {
+        display: block;
+        width: 100%;
+        box-sizing: border-box;
+        -moz-box-sizing: border-box;
+        -webkit-box-sizing: border-box;
+      }
+      ul li a {
+        padding: 1em 0.5em;
+      }
+      form {
+        margin: 10px 0;
+      }
+      input {
+        margin: 0;
+      }
+  }
 }