much designs.new-navigation-1

2 files changed, 91 insertions, 15 deletions

diff --git a/source/stylesheets/_variables.scss b/source/stylesheets/_variables.scss
new file mode 100644
index 0000000..9093f23
--- /dev/null
+++ b/source/stylesheets/_variables.scss
@@ -0,0 +1,62 @@
+$gray-darker:            #222;
+$gray-dark:              #282828;
+$gray:                   #555;
+$gray-light:             #888;
+$gray-lighter:           #ADAFAE;
+
+$brand-primary:         #2A9FD6;
+$brand-success:         #77B300;
+$brand-info:            #9933CC;
+$brand-warning:         #FF8800;
+$brand-danger:          #CC0000;
+
+
+$body-bg:               #060606;
+$text-color:            $gray-light;
+$link-color:            $brand-primary;
+$link-hover-color:      $link-color;
+
+$headings-color:        #fff;
+
+$text-muted:            $gray-light;
+
+//** Global color for active items (e.g., navs or dropdowns).
+$component-active-color:    #fff;
+//** Global background color for active items (e.g., navs or dropdowns).
+$component-active-bg:       $brand-primary;
+
+//** Width of the `border` for generating carets that indicator dropdowns.
+$caret-width-base:          4px;
+//** Carets increase slightly in size for larger components.
+$caret-width-large:         5px;
+
+
+//** Background for the dropdown menu.
+$dropdown-bg:                    $gray-darker;
+//** Dropdown menu `border-color`.
+$dropdown-border:                rgba(255,255,255,0.1);
+//** Dropdown menu `border-color` **for IE8**.
+$dropdown-fallback-border:       #444;
+//** Divider color for between dropdown items.
+$dropdown-divider-bg:            rgba(255,255,255,0.1);
+
+//** Active dropdown menu item text color.
+$dropdown-link-active-color:     #fff;
+//** Active dropdown menu item background color.
+$dropdown-link-active-bg:        $component-active-bg;
+
+//** Dropdown link text color.
+$dropdown-link-color:            #fff;
+//** Hover color for dropdown links.
+$dropdown-link-hover-color:      #fff;
+//** Hover background for dropdown links.
+$dropdown-link-hover-bg:         $dropdown-link-active-bg;
+
+//** Disabled dropdown menu item background color.
+$dropdown-link-disabled-color:   $text-muted;
+
+//** Text color for headers within dropdown menus.
+$dropdown-header-color:          $text-muted;
+
+// Note: Deprecated $dropdown-caret-color as of v3.1.0
+$dropdown-caret-color:           #000;
diff --git a/source/stylesheets/base.css.scss b/source/stylesheets/base.css.scss
index 99db24d..fbcae5f 100644
--- a/source/stylesheets/base.css.scss
+++ b/source/stylesheets/base.css.scss
@@ -1,41 +1,55 @@
+@import "variables";
 @import "bootstrap";
 
 header {
   @extend .row;
 }
 
+div#logo {
+  @extend .col-sm-4;
+  @extend .col-sm-offset-2;
+}
+
 body {
-  @extend .container;
+  @extend .container-fluid;
+}
+
+#main {
+  @extend .col-sm-8;
+  @extend .col-sm-offset-2;
 }
 
 nav {
   @extend .row;
   @extend .navbar;
-  @extend .navbar-static;
+  @extend .navbar-static-top;
   @extend .navbar-inverse;
 }
 
 nav ul {
   @extend .nav;
   @extend .navbar-nav;
-  @extend .navbar-justified;
-
-  //@extend .collapse;
-  //@extend .navbar-collapse;
 }
 
-@media (min-width: 768px){
-  .navbar-nav{
+// center the main nav items on big screens
+@media (min-width: $screen-sm-min) {
+  div#nav-big {
+    width: 40%;
     margin: 0 auto;
-    display: table;
-    table-layout: fixed;
-    float:none;
   }
 }
 
+
+
 /*
-ul.nav li.dropdown:hover ul.dropdown-menu{
-  display: block;
-  margin-top:0px
+// open navigation dropdown on hover on non-mobile devices
+// FIXME dropdown stays open on click..
+
+@media (min-width: $screen-sm-min) {
+nav ul li.dropdown:hover ul.dropdown-menu {
+display: block;
+margin-top:0px
 }
-*/
+}
+
+ */