Secondary navigation

jboss-jdf · May 22, 2012 · 05f152d · 05f152d
1 parent 3dd0fa0
commit 05f152d
Show file tree

Hide file tree

Showing 5 changed files with 101 additions and 40 deletions.
diff --git a/_layouts/base.html.haml b/_layouts/base.html.haml
@@ -34,22 +34,39 @@
             %a{:href=>"/"}
               %img{:id=>"jdf logo", :src=>"/images/jdflogo_secondarypage.png", :width=>"240", :height=>"70"}
           .span3.offset5
-            #secondary-vertnav-wrapper.vertnav-wrapper
-              %ul#secondary-vert-nav
-                %li Quickstarts
-                %li 
-                  %a{:href=>"examples"} Examples
-                %li Migration 
-                %li 
-                  %a{:href=>"about"}About
-              .sharethispadding-secondary
-                %span.st_sharethis
-                %span.st_facebook
-                %span.st_googleplus
-                %span.st_twitter
-                %script{:type=>"text/javascript", :src=>"http://w.sharethis.com/button/buttons.js"}
-                :javascript
-                  stLight.options({ publisher:'0c0850b9-23f0-4286-b05a-7593cc190675' });
+            .sharethispadding-secondary
+              %span.st_sharethis_large
+              %span.st_facebook_large
+              %span.st_googleplus_large
+              %span.st_twitter_large
+              %script{:type=>"text/javascript", :src=>"http://w.sharethis.com/button/buttons.js"}
+              :javascript
+                stLight.options({ publisher:'0c0850b9-23f0-4286-b05a-7593cc190675' });
+        .row#secondary-nav-wrapper
+          .span6.offset4
+            %ul#secondary-nav
+              %li
+                %a{:href=>"/quickstarts", :class=>"tab #{'active' if page.relative_source_path =~ /^\/quickstarts/}"} Quickstarts
+              %li
+                %a{:href=>"/examples", :class=>"tab #{'active' if page.relative_source_path =~ /^\/examples/}"} Examples
+              %li
+                %a{:href=>"/migration", :class=>"tab #{'active' if page.relative_source_path =~ /^\/migration/}"} Migration
+              %li
+                %a{:href=>"/about", :class=>"tab #{'active' if page.relative_source_path =~ /^\/about/}"}About
+    .sub-sub-nav
+      .container
+        .row
+          .span10.offset1
+            -# These should be in ifs for each section, unless someone has a better way of doing this, it's late, brain not working well
+            %ul
+              %li
+                %a{:href=>"#"} Testing
+              %li
+                %a{:href=>"#"} Testing
+              %li
+                %a{:href=>"#"} Testing
+              %li
+                %a.last{:href=>"#"} Testing
     .container
       ~ content
       %hr

diff --git a/images/jdflogo_frontpage.png b/images/jdflogo_frontpage.png
diff --git a/images/jdflogo_secondarypage.png b/images/jdflogo_secondarypage.png
diff --git a/images/watermark_secondarypage.png b/images/watermark_secondarypage.png
diff --git a/stylesheets/styles.scss b/stylesheets/styles.scss
@@ -2,7 +2,7 @@
 @import "partials/vimeo";
 @import "partials/addons";
 
-// Main landing page
+/** Main landing page **/
 #frontpage-header-wrapper {
   background-image:url(../images/gradientbkg_frontpage.png);
   background-repeat: repeat-x;
@@ -12,11 +12,10 @@
   background-image:url(../images/watermark_frontpage.png);
   background-repeat:no-repeat;
   background-position-y: 50px;
-//  height: 380px;
   overflow: hidden;
 }
 
-/** Latest News */
+/* Latest News */
 .section-heading, .news-post {
   h1, h2 {
     font-weight: bold;
@@ -58,23 +57,13 @@
     }
   }
 }
-/* **************************** Vertical Navigation  ********************** */
-#secondary-vertnav-wrapper {
-  text-align: right;
-}
 #vertnav-wrapper, .vertnav-wrapper {
   width: 230px;
   float: left;
   .sharethispadding {
     float:left;
     margin-top: 10px;
   }
-  #secondary-vert-nav {
-    margin: .25em 0px 0px 0px;
-    padding: 0;
-    border: 0;
-    font-size: 70%;
-  }
   #main-vert-nav {
     margin: 100px 0px 0px 0px;
     padding: 0;
@@ -99,29 +88,84 @@
     }
   }
 }
-
-// TODO: will probably need this later
-#secondary_container #vertnav-wrapper ul#vert-nav {
-  margin: 30px 0px 0px 0px;
-  padding: 0;
-  border: 0;
-  font-size: 160%;
-} 
 /** End landing page */
 
 /** Secondary pages */
 .secondary-header-wrapper {
-  background-image:url(../images/gradientbkg_secondarypage.png);
+  @include background-image(linear-gradient(#afb1b3, #e6e7e8 45%));
+  $experimental-support-for-svg: true;
   background-repeat: repeat-x;
-  height: 100px;
   .secondary-header {
     background-image:url(../images/watermark_secondarypage.png);
     background-repeat:no-repeat;
-    height: 100px;
+    //height: 100px;
     padding-top: 15px;
   }
 }
 
+.sharethispadding-secondary {
+  margin-top: 2em;
+}
+.sub-sub-nav {
+  margin-top: .5em;
+  margin-bottom: .5em;
+  ul {
+    list-style-image: none;
+    list-style-type: none;
+    white-space: nowrap;
+    text-transform: uppercase;
+    li {
+      display: inline;
+      a {
+        color: #4a5d75;
+        text-decoration: none;
+        float: left;
+        font-size: 110%;
+        font-weight: bold;
+        margin-right: 1em;
+        &:hover {
+          text-decoration: underline;
+        }
+        &:not(.last) {
+          padding-right: 1em;
+          border-right: #233345 thin solid;
+        }
+      }
+    }
+  }
+}
+#secondary-nav-wrapper {
+  position: relative;
+  float: right;
+  margin-right: 2em;
+  ul#secondary-nav {
+    list-style-image: none;
+    list-style-type: none;
+    white-space: nowrap;
+    text-transform: uppercase;
+    li {
+      display: inline;
+      a {
+        color: #4a5d75;
+        text-decoration: none;
+        float: left;
+        font-size: 130%;
+        font-weight: bold;
+        &:hover {
+          text-decoration: underline;
+        }
+        &.tab {
+          padding: 1em;
+        }
+        &.active {
+          background-color: white;
+          @include border-top-radius(5px);
+        }
+      }
+    }
+  }
+}
+
 /** End Secondary Page **/
 
 #toTop {