diff options
| -rw-r--r-- | amber/layouts/_masthead.html.haml | 2 | ||||
| -rw-r--r-- | pages/assets/_leap.scss | 82 | ||||
| -rw-r--r-- | pages/assets/_new.scss | 62 | ||||
| -rw-r--r-- | pages/assets/style.scss | 53 |
4 files changed, 63 insertions, 136 deletions
diff --git a/amber/layouts/_masthead.html.haml b/amber/layouts/_masthead.html.haml index 18f746e..af86d84 100644 --- a/amber/layouts/_masthead.html.haml +++ b/amber/layouts/_masthead.html.haml @@ -5,4 +5,4 @@ %h1 LEAP Encryption Access Project %nav.nav-menu{:role => "navigation"} - top_navigation_items(include_home:true) do |item| - %a.nav-item{:href => item[:href]}= item[:label] + %a.nav-item{:href => item[:href], :class => item[:class]}= item[:label] diff --git a/pages/assets/_leap.scss b/pages/assets/_leap.scss index 7b961fe..866d79c 100644 --- a/pages/assets/_leap.scss +++ b/pages/assets/_leap.scss @@ -6,61 +6,44 @@ a:visited { // MASTHEAD // -#masthead { - width: 100%; - margin: 0; - background-color: $masthead-bg-color; - border-bottom: $masthead-border; - - @include gradient-vertical(lighten($masthead-bg-color,8%),$masthead-bg-color); - box-shadow: inset 0 0 8px 1px darken($masthead-bg-color, 8%); - box-shadow-top: 0; - - .masthead-inner { - height: $masthead-height; - @include cutout-menu( - $ul-id: top-menu, - $active-bg: $cutout-color, - $left-indent: $masthead-text-left-margin, - $small-left-indent: $masthead-small-text-left-margin, - $small-screen: $small-screen); - @media (max-width: $small-screen) { - height: $masthead-small-height; +header { + grid-area: header; + padding: $header-padding; + background-color: $header-bg-color; + text-align: center; + + @include gradient-vertical(lighten($header-bg-color,8%),$header-bg-color); + box-shadow: inset 0 0 8px 1px darken($header-bg-color, 8%); + box-shadow-top: 0; + + > h1 { + color: $header-color; + font-weight: bold; + margin: $header-title-margin; } - } - - .logo { - background: $masthead-bg; - @media (max-width: $small-screen) { - background: $masthead-small-bg; - } - } - - h1 { - font-weight: bold; - white-space: nowrap; - margin: 0; - color: $masthead-color; +} - line-height: $masthead-height; - font-size: $masthead-text-size; - padding-left: $masthead-text-left-margin - 2px; +.nav-menu { + display: flex; + flex-wrap: wrap; + justify-content: center; @media (max-width: $small-screen) { - line-height: $masthead-small-height; - font-size: $masthead-small-text-size; - padding-left: $masthead-small-text-left-margin - 2px; + flex-direction: $nav-small-direction; } - } +} - #top-menu a.tab { +// If we don't add the "a" here, on hover styles won't be affected +a.nav-item { + font-size: $nav-item-size; + padding: $nav-item-padding; + color: $nav-color; + background-color: $nav-bg-color; font-weight: bold; - color: white; - background: rgba(0,0,0,0.5); - &.active { - color: black; - } - } +} +a.active { + background-color: $nav-color; + color: $nav-bg-color; } // @@ -256,4 +239,5 @@ article.page-summary { img.left { float:left; margin: 7px 14px 0px 0px; -}
\ No newline at end of file +} + diff --git a/pages/assets/_new.scss b/pages/assets/_new.scss deleted file mode 100644 index 7add150..0000000 --- a/pages/assets/_new.scss +++ /dev/null @@ -1,62 +0,0 @@ -// Variables - -$main-v-spacing: 1rem; - -// Header variables - -// Free one line at the top of the page -$header-padding: $main-v-spacing 0 0 0; -$header-bg-color: #555; -$header-color: #fff; -$header-title-margin: 1rem 0; -$header-title-size: inherit; - -// Navigation menu variables - -$nav-color: $header-color; -$nav-bg-color: $header-bg-color; -$nav-item-size: 1.5rem; -$nav-item-padding: 0.6rem 1.2rem; -// On smaller screen, choose between horizontal (row) and vertical (column) menu -$nav-small-direction: column; - -// Nav menu - -header { - grid-area: header; - padding: $header-padding; - background-color: $header-bg-color; - text-align: center; - - @include gradient-vertical(lighten($header-bg-color,8%),$header-bg-color); - box-shadow: inset 0 0 8px 1px darken($header-bg-color, 8%); - box-shadow-top: 0; - - > h1 { - color: $header-color; - font-weight: bold; - margin: $header-title-margin; - } -} - -.nav-menu { - display: flex; - flex-wrap: wrap; - justify-content: center; - @media (max-width: $small-screen) { - flex-direction: $nav-small-direction; - } -} - -// If we don't add the "a" here, on hover styles won't be affected -a.nav-item { - font-size: $nav-item-size; - padding: $nav-item-padding; - color: $nav-color; - background-color: $nav-bg-color; - font-weight: bold; - &:first-child { - background-color: $nav-color; - color: $nav-bg-color; - } -} diff --git a/pages/assets/style.scss b/pages/assets/style.scss index cce3fd9..1e398a8 100644 --- a/pages/assets/style.scss +++ b/pages/assets/style.scss @@ -21,25 +21,34 @@ $link-visited-color: darken($link-color, 15%); $background-color: #fff; -$masthead-border-color: black; -$masthead-border: 1px solid $masthead-border-color; -$masthead-bg-color: #555; -$masthead-color: #fff; - -$masthead-height: 128px; -$masthead-bg: url(/img/leap180.png) 0px 50% no-repeat; -$masthead-text-left-margin: 175px; -$masthead-text-top-margin: 45px; -$masthead-text-size: 36px; - -$masthead-small-height: 96px; -$masthead-small-bg: url(/img/leap128.png) 0px 50% no-repeat; -$masthead-small-text-left-margin: 96px; -$masthead-small-text-top-margin: 20px; -$masthead-small-text-size: 24px; - -//$tabs-small-size: -//$tabs-small-padding: +// Used for spacing between blocks +$main-v-spacing: 1rem; + +// +// HEADER VARIABLES +// + +// Free one line at the top of the page +$header-padding: $main-v-spacing 0 0 0; +$header-bg-color: #555; +$header-color: #fff; +$header-title-margin: 1rem 0; +$header-title-size: inherit; + +// +// NAVIGATION MENU VARIABLES +// + +$nav-color: $header-color; +$nav-bg-color: $header-bg-color; +$nav-item-size: 1.5rem; +$nav-item-padding: 0.6rem 1.2rem; +// On smaller screen, choose between horizontal (row) and vertical (column) menu +$nav-small-direction: column; + +// +// OTHER VARIABLES +// $cutout-color: darken($background-color,11%); $background-color-start: darken($background-color,17%); @@ -47,7 +56,7 @@ $background-color-start: darken($background-color,17%); $side-column-bg-color: #d0d0d0; // rgba(0,0,0,0.05); // #e3e3e3 $side-column-border-color: #aaa; // rgba(0,0,0,0.2); $side-column-active-bg-color: #000; -$side-column-active-color: $masthead_color; +$side-column-active-color: $header-color; $side-column-text-color: #000; $side-column-indent: 15px; @@ -56,7 +65,3 @@ $well-border-color: #555; @import "mixins"; @import "leap"; - -// Trying not to break stuff, we just add things for now -// Then we'll merge _new.scss into _leap.scss -@import "new"; |