Add top bar from Foundation marketing site

diff --git a/docs/assets/scss/_topbar.scss b/docs/assets/scss/_topbar.scss
index 6898531dd68c86f6317d141f3860438b28b3c4e4..7b1b9277210bf4a98da332b52f6a57ff072fa9cb 100644 (file)
--- a/docs/assets/scss/_topbar.scss
+++ b/docs/assets/scss/_topbar.scss
@@ -1,23 +1,44 @@
-.docs-topbar {
-  background: #333;
+$topbar-background: #121212;
+$topbar-hover-color: darken($topbar-background, 20%);
+
+.marketing-topbar {
+  background: $topbar-background;
   font-size: rem-calc(13);
   font-weight: bold;
 
+  @include clearfix;
+
+  ul:first-child { float: left; }
+  ul:last-child  { float: right; }
+
   .menu a {
     height: 45px;
     line-height: 45px;
-    color: white;
+    color: $light-gray;
     padding-top: 0;
     padding-bottom: 0;
 
-    &:hover,
+    &:hover:not(.button),
     &:focus {
-      background: #222;
+      background: darken($topbar-background, 20%);
+    }
+
+    &.button {
+      border-radius: 0;
+      box-shadow: 0 0 0 rgba(0, 0, 0, 0);
     }
   }
 
+  .title {
+    color: $dark-gray;
+    padding: 10px;
+    padding-left: 15px;
+    font-size: 0.8em;
+    background: lighten($topbar-background, 10%);
+  }
+
   .is-active a {
-    background: #222;
+    background: darken($topbar-background, 20%);
   }
 
   // ZURB logo
@@ -40,7 +61,91 @@
     }
   }
 
-  .docs-menu-title {
-    margin: 0;
+  .dropdown.menu .submenu {
+    border: 0;
+  }
+
+  .is-down-arrow a::after {
+    margin-top: 20px !important;
+    border-top-color: white !important;
+  }
+}
+
+.mobile-ofc {
+  background: $topbar-background;
+  font-size: rem-calc(13);
+  font-weight: bold;
+
+  .menu a {
+    height: 45px;
+    line-height: 45px;
+    color: $light-gray;
+    padding-top: 0;
+    padding-bottom: 0;
+
+    &:hover:not(.button),
+    &:focus {
+      background: darken($topbar-background, 20%);
+    }
+
+    &.button {
+      border-radius: 0;
+      box-shadow: 0 0 0 rgba(0, 0, 0, 0);
+    }
+  }
+
+  .title {
+    color: $dark-gray;
+    padding: 10px;
+    padding-left: 15px;
+    font-size: 0.8em;
+    background: lighten($topbar-background, 10%);
   }
 }
+
+// .docs-topbar {
+//   background: #333;
+//   font-size: rem-calc(13);
+//   font-weight: bold;
+
+//   .menu a {
+//     height: 45px;
+//     line-height: 45px;
+//     color: white;
+//     padding-top: 0;
+//     padding-bottom: 0;
+
+//     &:hover,
+//     &:focus {
+//       background: #222;
+//     }
+//   }
+
+//   .is-active a {
+//     background: #222;
+//   }
+
+//   // ZURB logo
+//   .menu img {
+//     position: relative;
+//     top: -2px;
+//   }
+
+//   .menu:first-child {
+//     border-right: 1px solid #4e4e4e;
+//   }
+
+//   .menu:last-child {
+//     border-left: 1px solid #4e4e4e;
+//   }
+
+//   .menu {
+//     li:not(:last-child) {
+//       border-right: 1px solid #4e4e4e;
+//     }
+//   }
+
+//   .docs-menu-title {
+//     margin: 0;
+//   }
+// }

diff --git a/docs/layout/default.html b/docs/layout/default.html
index 6331a7d4cdd6cf977c798b083cff05f55bd57ce2..9f516cb8e6a0adcf80f301da1e8cc7949469a5d2 100644 (file)
--- a/docs/layout/default.html
+++ b/docs/layout/default.html
@@ -19,18 +19,8 @@
     {{> off-canvi}}
 
     <div class="off-canvas-content" data-off-canvas-content>
-      <div class="menu-group docs-topbar">
-        <ul class="menu">
-          <li class="docs-topbar-title"><a href="#" data-open="body"><img src="assets/img/zurb-logo.svg" alt="ZURB"> Foundation</a></li>
-        </ul>
-        <ul class="menu">
-          <li><a href="#">Learn</a></li>
-          <li><a href="#">Develop</a></li>
-          <li><a href="#">Support</a></li>
-          <li><a href="#">Business</a></li>
-          <li class="is-active"><a href="#">Docs</a></li>
-        </ul>
-      </div>
+      {{> navigation}}
+      {{> mobile-navigation}}
 
       <input type="text" class="docs-search" data-docs-search placeholder="Find a page, component, variable, mixin, function...">
 

diff --git a/docs/partials/off-canvi.html b/docs/partials/off-canvi.html
index 965895f62429f820c22a3efb7bcf0f38decaf961..ee96e46e5aff9a22e29a5419a272ef9bbad89689 100644 (file)
--- a/docs/partials/off-canvi.html
+++ b/docs/partials/off-canvi.html
@@ -2,13 +2,59 @@
   <button class="close-button" aria-label="Close menu" type="button" data-close>
     <span aria-hidden="true">&times;</span>
   </button>
-  <ul class="vertical menu">
-    <li><a href="#">Foundation</a></li>
-    <li><a href="#">Dot</a></li>
-    <li><a href="#">ZURB</a></li>
-    <li><a href="#">Com</a></li>
-    <li><a href="#">Slash</a></li>
-    <li><a href="#">Sites</a></li>
+  <ul class="mobile-ofc vertical menu">
+    
+    <li>
+      <a href="{{root}}learn/about.html">Learn</a>
+      <ul class="submenu menu vertical" data-submenu>
+        <li><a href="{{root}}learn/about.html">About Foundation</a></li> 
+        <li><a href="{{root}}learn/tutorials.html">Tutorials</a></li>
+        <li><a href="{{root}}learn/classes.html">Classes</a></li>
+        <li><a href="{{root}}learn/case-studies.html">Case Studies</a></li>
+        <li><a href="{{root}}learn/brands.html">Brands</a></li>  
+      </ul>
+    </li>
+    
+    <li>
+      <a href="develop/getting-started.html">Develop</a>
+      <ul class="submenu menu vertical" data-submenu>
+        <li class="title">Frameworks</li>
+        <li><a href="{{root}}sites.html">Foundation for Sites</a></li>
+        <li><a href="{{root}}emails.html">Foundation for Email</a></li>
+        <li><a href="{{root}}apps.html">Foundation for Apps</a></li>
+        <li class="divider"></li>
+        <li class="title">Develop</li>
+        <li><a href="{{root}}templates.html">HTML Templates</a></li>
+        <li><a href="{{root}}sites/resources.html">Resources</a></li>
+        <li><a href="{{root}}develop/building-blocks.html">Building Blocks</a></li>
+        <li><a href="{{root}}develop/yeti-launch.html">Yeti Launch</a></li>
+        <li><a href="{{root}}develop/contribute.html">Contribute</a></li>
+      </ul>
+    </li>
+
+    <li><a href="{{root}}upload.html">Upload</a></li>
+    
+    <li>
+      <a href="{{root}}support/support.html">Support</a>
+      <ul class="submenu menu vertical" data-submenu>
+        <li><a href="{{root}}support/support.html">Support Channels</a></li>
+        <li><a href="{{root}}support/premium-support.html">Premium Support</a></li>
+        <li><a href="http://foundation.zurb.com/forum/sort/unanswered">Foundation Forum</a></li>
+        <li><a href="{{root}}support/faq.html">FAQs</a></li>
+      </ul>
+    </li>
+    
+    <li>
+      <a href="{{root}}frameworks-docs.html">Docs</a>
+      <ul class="submenu menu vertical" data-submenu>
+        <li><a href="http://foundation.zurb.com/docs/" target="_blank">Sites Docs</a></li>
+        <li><a href="http://foundation.zurb.com/apps/docs/#!/" target="_blank">Apps Docs</a></li>
+        <li><a href="http://foundation.zurb.com/emails/docs/" target="_blank">Email Docs</a></li>
+      </ul>
+    </li>
+    
+    <li><a href="{{root}}develop/getting-started.html" class="button">Getting Started</a></li>
+
   </ul>
 </div>