From 0b269fb063fa2c9d4f3b7cff98fd1da87cfb7cdb Mon Sep 17 00:00:00 2001 From: Lars Henrik Mai Date: Sat, 3 May 2014 15:48:44 +0200 Subject: much designs. --- source/stylesheets/_variables.scss | 62 ++++++++++++++++++++++++++++++++++++++ source/stylesheets/base.css.scss | 44 ++++++++++++++++++--------- 2 files changed, 91 insertions(+), 15 deletions(-) create mode 100644 source/stylesheets/_variables.scss (limited to 'source/stylesheets') 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 } -*/ +} + + */ -- cgit v1.2.1