diff options
| author | Lars Henrik Mai <lars.mai@kontinui.de> | 2014-05-03 15:48:44 +0200 |
|---|---|---|
| committer | Lars Henrik Mai <lars.mai@kontinui.de> | 2014-05-03 20:06:40 +0200 |
| commit | 0b269fb063fa2c9d4f3b7cff98fd1da87cfb7cdb (patch) | |
| tree | 8575f506c0c786a0b73fa3c6f3aff88a636a901a | |
| parent | 1182b56a2e98cc5fbbbbe2bc30a0248f087ffd49 (diff) | |
much designs.new-navigation-1
| -rw-r--r-- | source/_navigation.html.erb | 4 | ||||
| -rw-r--r-- | source/images/background.png | bin | 2726 -> 0 bytes | |||
| -rw-r--r-- | source/images/middleman.png | bin | 25282 -> 0 bytes | |||
| -rw-r--r-- | source/images/sublab-logo.png | bin | 0 -> 20608 bytes | |||
| -rw-r--r-- | source/layouts/layout.erb | 32 | ||||
| -rw-r--r-- | source/stylesheets/_variables.scss | 62 | ||||
| -rw-r--r-- | source/stylesheets/base.css.scss | 44 |
7 files changed, 109 insertions, 33 deletions
diff --git a/source/_navigation.html.erb b/source/_navigation.html.erb index c0e3148..61a72ea 100644 --- a/source/_navigation.html.erb +++ b/source/_navigation.html.erb @@ -46,10 +46,6 @@ <div class="collapse navbar-collapse" id="nav-big"> <ul> - <li class="dropdown"> - <%= link_to "Home", "/" %> - </li> - <% @navigation.each do |key, value| %> <li class="dropdown"> <a data-toggle="dropdown" class="dropdown-toggle" href=<%= key.last %>> diff --git a/source/images/background.png b/source/images/background.png Binary files differdeleted file mode 100644 index 8681d44..0000000 --- a/source/images/background.png +++ /dev/null diff --git a/source/images/middleman.png b/source/images/middleman.png Binary files differdeleted file mode 100644 index c685e56..0000000 --- a/source/images/middleman.png +++ /dev/null diff --git a/source/images/sublab-logo.png b/source/images/sublab-logo.png Binary files differnew file mode 100644 index 0000000..b7a8fd9 --- /dev/null +++ b/source/images/sublab-logo.png diff --git a/source/layouts/layout.erb b/source/layouts/layout.erb index 544621a..b2835f2 100644 --- a/source/layouts/layout.erb +++ b/source/layouts/layout.erb @@ -20,20 +20,24 @@ <body class="<%= page_classes %>"> - <!-- header --> - <header> - <h1>sublab</h1> - </header> - - <!-- main navigation --> - <nav> - <%= partial "navigation" %> - </nav> - - <!-- content --> - <section id="main"> - <%= yield %> - </section> + <!-- header --> + <header> + <div id="logo"> + <% link_to '/' do %> + <%= image_tag 'sublab-logo.png', class: "img-responsive" %> + <% end %> + </div> + </header> + + <!-- main navigation --> + <nav> + <%= partial "navigation" %> + </nav> + + <!-- content --> + <section id="main"> + <%= yield %> + </section> </body> </html> 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 } -*/ +} + + */ |
