diff options
| author | Matthew Somerville <matthew-github@dracos.co.uk> | 2017-06-08 13:40:15 +0100 |
|---|---|---|
| committer | Matthew Somerville <matthew-github@dracos.co.uk> | 2017-06-08 13:40:15 +0100 |
| commit | f627c81918879773fee623506aa8e60d037b4e20 (patch) | |
| tree | 587d520a39254a035ad9593ff750a0aa030cbf46 /web | |
| parent | e23017fecb171dbc2ebf2bcf82a687d91822282c (diff) | |
| parent | 33a7bf9e0238a6513268ceb44816edf40458834c (diff) | |
Merge branch 'csssss'
Diffstat (limited to 'web')
45 files changed, 602 insertions, 1104 deletions
diff --git a/web/cobrands/angus/_colours.scss b/web/cobrands/angus/_colours.scss index 564c78348..31974efa0 100644 --- a/web/cobrands/angus/_colours.scss +++ b/web/cobrands/angus/_colours.scss @@ -18,6 +18,8 @@ $primary_text: #222222; $base_bg: #fff; $base_fg: #000; +$header-top-border: false; + $map_nav_bg: $angus_green; $nav_fg: #fff; $nav_fg_hover: transparent; @@ -29,3 +31,5 @@ $col_click_map_dark: darken($col_click_map, 10%); $col_fixed_label: $angus_green; $col_fixed_label_dark: darken($col_click_map, 10%); + +$container-max-width: 1200px; diff --git a/web/cobrands/angus/base.scss b/web/cobrands/angus/base.scss index 0d44ed205..c8792fd51 100644 --- a/web/cobrands/angus/base.scss +++ b/web/cobrands/angus/base.scss @@ -5,20 +5,14 @@ @import "../sass/base"; -body.frontpage #site-logo, -#site-logo -{ - background: url("/cobrands/angus/third_party/css_img/angus-logo-header.png") 0 0 no-repeat; +#site-logo { + background: url("/cobrands/angus/third_party/css_img/angus-logo-header.png") 0 50% no-repeat; background-size: contain; width: 82px; - height: 40px; - top: 8px; - left: 4px; + height: 50px; } #site-header { - background: $angus_green; - form.form__search { display: none; } @@ -39,7 +33,3 @@ label[for=pc] { .angus_nav, .wrapper__main_menu { display: none; } - -.nav-menu--breadcrumb { - display: none; -} diff --git a/web/cobrands/angus/layout.scss b/web/cobrands/angus/layout.scss index 7b819185a..9429913b4 100644 --- a/web/cobrands/angus/layout.scss +++ b/web/cobrands/angus/layout.scss @@ -2,38 +2,20 @@ @import "_fonts"; @import "../sass/layout"; -$max_page_width: 1200px; - -#site-logo, -body.frontpage #site-logo, -body.twothirdswidthpage #site-logo -{ - position: relative; - top: 13px; - left: 20px; - margin: 0; - padding: 0; - background: url("/cobrands/angus/third_party/css_img/angus-logo-header.png") 0 0 no-repeat; - background-size: contain; - width: 165px; - height: 66px; - display: inline-block; +#site-logo { + width: 165px; + height: 66px; + padding: 0.75em 0; } #site-header { - background-color: $angus_green; border-bottom: solid 8px $angus_dark_green; box-shadow: 0 5px 5px rgba(0, 0, 0, .075); - .container { - position: relative; - min-height: 5em; - } - form.form__search { display: block; clear: right; - margin: .65em 0 .25em; + margin-bottom: 25px; // 90x - 2.5em / 2 padding: 0; text-align: right; width: 75%; @@ -42,7 +24,7 @@ body.twothirdswidthpage #site-logo box-sizing: border-box; position: absolute; bottom: 0; - right: 0; + right: 1em; .field { min-width: 13em; @@ -124,52 +106,38 @@ body.twothirdswidthpage #site-logo } } -body.fullwidthpage, body.twothirdswidthpage, body.authpage, body.frontpage { - #site-header { - height: 91px; - } -} - #front-main { background: transparent; #front-main-container { background-color: $angus_light_grey; - width: 100%; - max-width: $max_page_width; + max-width: $container-max-width; padding-top: 1em; padding-bottom: 1em; } } -body.fullwidthpage, body.twothirdswidthpage, body.authpage { - .container { - max-width: $max_page_width; - width: 100%; - - .content { - background: $angus_light_grey; - background-color: $angus_light_grey; - - } +body.fullwidthpage, +body.twothirdswidthpage, +body.authpage { + .content { + background: $angus_light_grey; + background-color: $angus_light_grey; } } body.frontpage { - .container { - .content { - background: $base_bg; - background-color: $base_bg; - } + .content { + background: $base_bg; + background-color: $base_bg; } } body.twothirdswidthpage .content .sticky-sidebar { - z-index: 0; - left: 43em; + padding-left: 1em; aside { - top: 15em; + top: 198px; } } @@ -289,9 +257,11 @@ footer p.social a:active,footer p.social a:focus,footer p.social a:hover display: none; } +.wrapper__main_menu { + display: block; +} .nav-menu--breadcrumb { - display: block; font-size: 0.75em; float: left; @@ -335,10 +305,9 @@ body.mappage { } #site-logo { - height: 54px; + height: 58px; width: 111px; - top: 7px; - left: 7px; + padding: 0; } #site-header { @@ -365,7 +334,7 @@ body.mappage { footer { font-size: 0.8em; - max-width: $max_page_width; + max-width: $container-max-width; margin: 0 auto; padding-top: 3em; padding-left: 3em; diff --git a/web/cobrands/bristol/_colours.scss b/web/cobrands/bristol/_colours.scss index 82837b976..02764ab43 100644 --- a/web/cobrands/bristol/_colours.scss +++ b/web/cobrands/bristol/_colours.scss @@ -23,9 +23,11 @@ $base_bg: white; $base_fg: $g1; $map_nav_bg: $g1; -$nav_fg: $b4; +$nav_fg: #fff; $nav_fg_hover: $primary; +$header-top-border: false; + $col_click_map: $g1; $col_click_map_dark: darken($g1, 10%); diff --git a/web/cobrands/bristol/base.scss b/web/cobrands/bristol/base.scss index c92b46ec3..8f61d2a5b 100644 --- a/web/cobrands/bristol/base.scss +++ b/web/cobrands/bristol/base.scss @@ -10,21 +10,19 @@ #site-logo { @extend %bold-font; - background: url(/cobrands/bristol/img/bcclogo.png) 0 0 no-repeat; + height: auto; + background: url(/cobrands/bristol/img/bcclogo.png) 0 50% no-repeat; background-size: 37px; text-indent: 47px; line-height: 37px; font-size: 24px; - padding: 0; + padding: 0.5em 0; margin: 0; color: white; } #site-header { - height: 3.5em; border-bottom: solid 5px $bcc_red; - border-top-color: $g1; - background: $g1; // Can't use background-color as it's ignored in favour of existing background } // Style the Bristol footer correctly diff --git a/web/cobrands/bristol/layout.scss b/web/cobrands/bristol/layout.scss index 3b9dfa1b6..7000e8277 100644 --- a/web/cobrands/bristol/layout.scss +++ b/web/cobrands/bristol/layout.scss @@ -3,14 +3,11 @@ @import "../sass/layout"; #site-header { - background-color: $g1; - background: $g1; border-bottom: none; } -// Don't display a border atop the page -.nav-wrapper .nav-wrapper-2 { - border-top: none; +#main-nav { + float: none; } body.frontpage, body.twothirdswidthpage, body.fullwidthpage, body.authpage { @@ -20,20 +17,14 @@ body.frontpage, body.twothirdswidthpage, body.fullwidthpage, body.authpage { background-size: 81px 81px; text-indent: 122px; height: 111px; + width: 11em; line-height: 111px; font-size: 30px; - // Getting rid of absolute positioning allows us to style the BCC nav below nicely - position: static; + padding: 0; } - // Make sure the header is only as tall as it needs to be + // White "nav bar" with red border-top, below the logo #site-header { - height: auto; - - .container { - min-height: 0; - } - &:after { content: " "; height: 3.5em; @@ -74,8 +65,6 @@ body.frontpage, body.twothirdswidthpage, body.fullwidthpage, body.authpage { .nav-menu { // Put the main FMS navigation below the Bristol header - float: left; - width: 100%; margin-top: 7.25em; a, span { @@ -101,57 +90,44 @@ body.frontpage, body.twothirdswidthpage, body.fullwidthpage, body.authpage { background-color: transparent; } - // Stop .nav-wrapper from preventing the logo being clicked - .nav-wrapper .nav-wrapper-2 { - height: 0; - min-height: 0; - } - // Put FAQ side nav at correct vertical position .content .sticky-sidebar aside { - top: 14.5em; + top: 12.5em; } } body.mappage { - // Stop the header being too tall + // Add a red border-bottom *inside* the header #site-header { - min-height: 79px; - - .container { - min-height: 0; + @include box-sizing(border-box); + border-bottom: solid 5px $bcc_red; + } - #site-logo { - top: 0.5em; - line-height: 44px; - } - } + // Reinstate the floated nav bar on map pages + #main-nav { + float: right; } + // A few changes to the nav items now they're on a black background .nav-menu { a, span { - text-decoration: none; color: white; font-size: 1.1em; - padding: 1em 0.75em 0.95em; } + a:hover { background: transparent; text-decoration: underline; } + a.report-a-problem-btn { color: white; - margin: 0.5em 0.25em 0.45em; + padding-left: 0.5em; + padding-right: 0.5em; + &:hover { background-color: lighten($bcc_red, 5%); - }; - } - } - - // Haven't quite figured out why this can't go on #site-header - .nav-wrapper { - .nav-wrapper-2 { - border-bottom: solid 5px $bcc_red; + } } } diff --git a/web/cobrands/bromley/_colours.scss b/web/cobrands/bromley/_colours.scss index c36182ff8..53dfcfc8a 100644 --- a/web/cobrands/bromley/_colours.scss +++ b/web/cobrands/bromley/_colours.scss @@ -20,3 +20,8 @@ $nav_fg_hover: #444; $col_click_map: $bromley_blue; $col_fixed_label: $bromley_blue; $col_fixed_label_dark: darken($bromley_blue, 10%); + +$header-top-border-width: 4px; + +// Override the container width to match Bromley' site, which is wider +$container-max-width: 1200px; diff --git a/web/cobrands/bromley/base.scss b/web/cobrands/bromley/base.scss index 0d028d190..e6c29bed2 100644 --- a/web/cobrands/bromley/base.scss +++ b/web/cobrands/bromley/base.scss @@ -7,37 +7,18 @@ @import "../sass/report_list_pins"; // Override the site logo -#site-logo{ - display: block; +#site-logo { width: 80px; height: 44px; - top: 0.4em; - left: 0.5em; background: url('/cobrands/bromley/bromley-logo.s.png') 0 0 no-repeat; text-indent: -999999px; - position: absolute; z-index:2; } -// Change the colour and size of the site header to suit -#site-header { - background: $base_bg; -} -// We don't want a fixed height header on any page except the map page because -// it includes lots of other stuff there, including a dynamic drop-down menu -// that changes height -body.fullwidthpage, -body.twothirdswidthpage { - #site-header { - height: auto; - } -} - -// On the map page, we need slightly more space for our logo -body.mappage { - #site-header { - height: 3.5em; - } +#nav-link { + top: 7px; + right: 0.5em; + transform: none; } // Reset form placeholders so that they match Bromley's @@ -81,16 +62,9 @@ body.frontpage.fullwidthpage { .bromley-header { // These are from Bromley's styles, applied here because it's the closest // analog to their site header. - padding: 0 10px; padding-top: 1em; } -// Add a border to this to approximate Bromley's border between the breadcrumb -// and A-Z menu -.main-menu-container { - border-top: 1px solid #e2e2e2; -} - // Override the links to match Bromley's a { text-decoration:none; @@ -145,11 +119,11 @@ h1,h2,h3,h4,h5 { // Bromley's styles for the .top-links nav .top-links { - margin-top: 44px; // Needed to push it below FMS' mobile menu bar + // Needed to push it below FMS' mobile menu bar + margin: 0 0 13px; display: block; width: 100%; text-align: center; - margin-bottom:13px; li { display: inline-block; padding: 0 10px; @@ -213,6 +187,7 @@ h1,h2,h3,h4,h5 { height: 42px; line-height: 0; padding: 1.3em 1em; + margin: 0 0 0 -3px; border: 1px solid #647890; width: 20%; opacity: 1; @@ -222,7 +197,6 @@ h1,h2,h3,h4,h5 { background: #647890 url("search-icon.png") no-repeat center center !important; text-indent: -10000px; border-radius: 0 5px 5px 0; - margin-left: -3px; } } @@ -273,10 +247,13 @@ input.field, input.text, } // Bromley's silly A-Z menu +// Add a border to this to approximate Bromley's border between the breadcrumb +// and A-Z menu .a-z-container { - margin-bottom: 15px; - padding: 0 10px; + padding-bottom: 15px; + border-bottom: 1px solid #e2e2e2; } + .main-a-z { padding: 10px 5px; margin: 0 auto; diff --git a/web/cobrands/bromley/layout.scss b/web/cobrands/bromley/layout.scss index 2e23d1755..d308daa4b 100644 --- a/web/cobrands/bromley/layout.scss +++ b/web/cobrands/bromley/layout.scss @@ -3,31 +3,19 @@ // Alter the logo and the header on every page *but* the map page. On the map // page it stays small like in base.css -body.fullwidthpage, -body.twothirdswidthpage { - #site-header { - // Increase the height of the site-header to suit the taller logo image - height: auto; - } - // Override the logo +body.fullwidthpage, body.twothirdswidthpage, body.authpage { #site-logo { width: 159px; height: 114px; background: url(/cobrands/bromley/bromley-logo.png) 0 0 no-repeat; + float: left; } } -// On the map page, we want the header to be much smaller, otherwise it pushes -// the sidebar down too much body.mappage { - #site-header { - height: 5em; - } - - // Make the report button match the rest of the nav - .nav-menu--main a.report-a-problem-btn { - padding: 1.4em 0.75em 1.35em; - margin: 0; + .bromley-header { + margin-bottom: 0; + padding-top: 0.5em; } } @@ -35,10 +23,6 @@ body.mappage { .iel8 { body.fullwidthpage, body.twothirdswidthpage { - #site-header { - // Increase the height of the site-header to suit the taller logo image - height: auto; - } #site-logo { width: 159px; height: 114px; @@ -46,10 +30,10 @@ body.mappage { } } -// Override the container width to match Bromley' site, which is wider -.container { - width: 100%; - max-width: 1200px; +#main-nav { + display: block; // remove flex so nav touches top of parent + min-height: 0; // no vertical align, so no need for a height + margin-top: 0; // don't bother overlapping the border } // Override the FMS main menu to give it a background colour @@ -116,29 +100,17 @@ body.fullwidthpage .container .content footer .tablewrapper { // Bromley desktop styles ////////////////////////////////////////////////////////////////////////////// -// Bromley's logo is bigger on big screens so that it appears to have some -// left padding -#site-logo, -body.frontpage #site-logo { - float: left; - width: 239px; - clear: left; - margin-bottom: 20px; - // Bromley uses an image element inside a link, so it can be centered using - // text-align. We use a background image, so this approximates that. - background-position: 50% 0%; -} - // Bromley's .top-links section floats to the right on bigger screens .top-links { float: right; width: auto; + margin-top: 3em; } // Bromley's search form floats to the right too .main-search { width: 35%; - margin: 10px 0 0 0; + margin: 0; float: right; min-width: 287px; clear: right; diff --git a/web/cobrands/eastherts/_colours.scss b/web/cobrands/eastherts/_colours.scss index f4a1142ac..dc5531627 100644 --- a/web/cobrands/eastherts/_colours.scss +++ b/web/cobrands/eastherts/_colours.scss @@ -14,10 +14,12 @@ $primary_text: #222222; $base_bg: white; $base_fg: $eh_dark_grey; -$map_nav_bg: $eh_green; +$map_nav_bg: $eh_blue; $nav_fg: #000; $nav_fg_hover: $primary; +$header-top-border: false; + // Colour used for front page 'how to report a problem' steps $col_big_numbers: #ccc; @@ -29,4 +31,4 @@ $col_fixed_label_dark: #4B8304; $body-font: Verdana,Arial,Helvetica,Geneva,sans-serif; $meta-font: $body-font; -$heading-font: $body-font;
\ No newline at end of file +$heading-font: $body-font; diff --git a/web/cobrands/eastherts/base.scss b/web/cobrands/eastherts/base.scss index 1c8f9795b..83350bdfa 100644 --- a/web/cobrands/eastherts/base.scss +++ b/web/cobrands/eastherts/base.scss @@ -8,18 +8,11 @@ display: none; } -#site-header { - border-top: none; - background: $eh_blue; -} - #site-logo { background: url(img/toplogo.gif); background-size: 51px 48px; height: 48px; width: 51px; - top: 0px; - left: 2px; } h1, h2, h3, h4 { @@ -53,4 +46,4 @@ footer { } } } -}
\ No newline at end of file +} diff --git a/web/cobrands/eastherts/layout.scss b/web/cobrands/eastherts/layout.scss index 9623f33de..a11f7ef72 100644 --- a/web/cobrands/eastherts/layout.scss +++ b/web/cobrands/eastherts/layout.scss @@ -2,15 +2,7 @@ @import "../sass/layout"; #site-header { - // default layout.scss sets this, so we need it here as well as base.scss - background: $eh_blue; - background-image: url(img/header_mid.jpg); - background-repeat: repeat-x; -} - -// Get rid of the top border -.nav-wrapper .nav-wrapper-2 { - border-top: none; + background: $base_bg url(img/header_mid.jpg) 0 0 repeat-x; } body.fullwidthpage, body.twothirdswidthpage, body.authpage, body.frontpage { @@ -19,13 +11,8 @@ body.fullwidthpage, body.twothirdswidthpage, body.authpage, body.frontpage { $fms-nav-height: 43px; #site-header { - background-color: $base_bg; height: $logo-height + $eh-nav-height + $fms-nav-height; - .container { - height: auto; - } - .container:first-child { height: $logo-height; } @@ -125,6 +112,7 @@ body.fullwidthpage, body.twothirdswidthpage, body.authpage, body.frontpage { #site-logo { $img-height: 184px; $img-width: 399px; + position: absolute; top: $logo-height - $img-height; width: $img-width; height: $img-height; @@ -135,25 +123,27 @@ body.fullwidthpage, body.twothirdswidthpage, body.authpage, body.frontpage { background-size: $img-width $img-height; } - .nav-menu { + #main-nav { position: absolute; top: $logo-height + $eh-nav-height; - height: $fms-nav-height; - margin: 0 auto; - width: 60em; - padding: 0; - text-align: center; + width: 100%; + float: none; + min-height: 0; + } + + .nav-menu { float: none; + width: 100%; + text-align: center; + li { float: none; display: inline-block; } - } - // Make elements beneath clickable - .nav-wrapper .nav-wrapper-2 { - min-height: 0; - height: 0; + .nav-menu__item--privacy { + display: none; + } } } @@ -171,13 +161,6 @@ body.twothirdswidthpage .content .sticky-sidebar aside { } body.mappage { - .nav-wrapper .nav-wrapper-2 { - background-color: $eh_blue; - background-image: url(img/header_mid.jpg); - background-repeat: repeat-x; - background-position: top; - } - #site-logo { top: 8px; } @@ -213,17 +196,3 @@ footer ul { } } } - -// Stop the FMS nav being too wide and off to the right off the page -// at this break point. -@media only screen and (min-width: 48em) and (max-width: 61em) { - #main-nav { - float: $left; - padding-#{$left}: 0; - } - body.fullwidthpage, body.twothirdswidthpage, body.authpage, body.frontpage { - .nav-menu { - width: 100%; - } - } -}
\ No newline at end of file diff --git a/web/cobrands/fiksgatami/layout.scss b/web/cobrands/fiksgatami/layout.scss index c3c36fa12..99cd73ad8 100644 --- a/web/cobrands/fiksgatami/layout.scss +++ b/web/cobrands/fiksgatami/layout.scss @@ -1,6 +1,12 @@ @import "_colours"; @import "../sass/layout"; +#main-nav { + display: block; // remove flex so nav touches top of parent + min-height: 0; // no vertical align, so no need for a height + margin-top: 0; // don't bother overlapping the border +} + .nav-menu--mysoc { padding: 0em 0.5em; margin-#{$left}: 0.25em; @@ -21,7 +27,7 @@ body.frontpage { #site-logo { - top: 3em; + margin: 2em 0; width: 300px; height: 60px; background: url($image-sprite) -2px -108px no-repeat; diff --git a/web/cobrands/fixamingata/_colours.scss b/web/cobrands/fixamingata/_colours.scss index 7be050a23..84132f804 100644 --- a/web/cobrands/fixamingata/_colours.scss +++ b/web/cobrands/fixamingata/_colours.scss @@ -14,6 +14,8 @@ $map_nav_bg: #eee; $nav_fg: $primary_text; $nav_fg_hover: #444; +$header-top-border: false; + $col_click_map: #00BD08; $col_fixed_label: #00BD08; $col_fixed_label_dark: #4B8304; diff --git a/web/cobrands/fixamingata/base.scss b/web/cobrands/fixamingata/base.scss index af7a56cef..52c4b50da 100644 --- a/web/cobrands/fixamingata/base.scss +++ b/web/cobrands/fixamingata/base.scss @@ -12,18 +12,17 @@ #site-header { @include linear-gradient(#000, #ccc 10%, #ccc 90%, #000); + padding: 0.5em 0; } #site-logo { width: 185px; - margin-top: 8px; - margin-left: 10px; - background: url('images/fms-logo.png') no-repeat; + height: 38px; + background: url('images/fms-logo.png') 0 50% no-repeat; } #report-cta { font-size: 0.8em; - margin-top: -0.25em; border-color: #999; color: #000; padding-bottom: 0.2em; diff --git a/web/cobrands/fixamingata/layout.scss b/web/cobrands/fixamingata/layout.scss index 555e2641b..549d29540 100644 --- a/web/cobrands/fixamingata/layout.scss +++ b/web/cobrands/fixamingata/layout.scss @@ -67,10 +67,9 @@ h3, h4, @import "_colours"; @import "../sass/layout"; -.nav-wrapper { - .nav-wrapper-2 { - border-top: 0; - } +#site-header { + background: $map_nav_bg; + padding: 1em 0; } body.frontpage { @@ -79,6 +78,17 @@ body.frontpage { height: 55px; background: url($image-sprite) -2px -115px no-repeat; } + + #main-nav { + height: 55px + 16px + 16px; + margin-left: 300px; + } +} + +body.mappage { + #site-logo { + margin-top: -5px; + } } #front-main { @@ -122,7 +132,3 @@ body.frontpage { #postcodeForm { margin-left: -1em !important; margin-right: -1em !important; } body.fullwidthpage .container .content footer .tablewrapper { background: #fff; } - -body.frontpage #site-header { height: 85px; } - -body.frontpage #user-meta { margin-top: 1.2em; } diff --git a/web/cobrands/fixmystreet.com/base.scss b/web/cobrands/fixmystreet.com/base.scss index c43f9d687..4f2a7b1de 100644 --- a/web/cobrands/fixmystreet.com/base.scss +++ b/web/cobrands/fixmystreet.com/base.scss @@ -10,10 +10,10 @@ @import "../sass/top-banner"; #site-logo { - background: url('data:image/png;base64,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') no-repeat; + background: url('data:image/png;base64,iVBORw0KGgoAAAANSUhEUgAAAK8AAAAoCAYAAACIJ6oVAAAACW9GRnMAAAADAAAAAwB3k5ejAAAACXBIWXMAAABIAAAASABGyWs+AAAACXZwQWcAAAF5AAAQZgCwCYXlAAAABmJLR0QA/wD/AP+gvaeTAAAag0lEQVR42u1cB1RWx7YeBBW7YAOViL0bNSomdsWADVsQbEHFiAUUMYmiokEUWzQiiQ0VNSC2gFiJmthbiF1jwxaNGr0pKra8t1be3r/frLc99/zwo7nv3rzFWWuv/z9zZs6ZM/PtPd/eM3OUyj1yj9wj98g9co/cI/fIPXKP3MPaYQfJY6Po/LlH7vFvBa09ST6SIiROJM7ZiBPy5kPZXBDnHv8W0OYHGCuSeJB4kniReFsRL+TxQBkngDhPbpPmHv8XRx4AjoFXiaQFSUDXrl2XxMfHp585c+b2nyZHZmbmM742b968gx4eHvO5DElzkgokhXKtcO7xrz7sAbQKAF7AoEGDEk+ePPnznzk8tm3bdhUg7kFSE5QiJ1bY7jXkrxyB/pX5/4o2yD0EcKuQdHdzc5t14MCBm3++5rFy5cqjdL9AKMMbJAWzAbB0DLlODlmIPeSvdBrNnFNr97LmyL4OsOQ97bNoA/nuf1eA/yX1zCOA69uxY8eEhw8f/mEGxrt37z5OS0vLWLZs2QmS4yzr168/d/Xq1V+sAfjKlSu/kjLMpHv7AMD5TCprJ7h2XvDtAqgXS2EhOq0g8jgiv5Z8ooNtbRj5fAfcI5+VexkBlhf5XvXZRsXVz3fEOxrbQL+7I/LlNVFio2Lb/YeBNqt62uXkRvlAFboDuP9lQgOudenSZRmsqI+Js+bj6en58erVq/cT/31uLH/p0qUHAHALUAj7LJzEQuDcpUlcScqRlBfC52VJypCUElEOluIkRdG5OYl4GJ9fVNyrENKlpcsD0DgiulIczy+G/DmNtkjFLYj7lCRxsfL+Lnh3JwC6gEGBHYVS531FZfpXWVppoMzqabOy2aMBmjNHNVrcCxcuPPL29l4D0LYkqQzQlICUhJSB5W5ZtWrV4KNHj14xs8C4T010cB4rIbkycBbrkLyF6EVTIU1IGpHUJ6lFUg31qowoR3nUqbCNIJLALQqleQP3egPnRXHdwQAyZ4CpEp5fAfmLCMDb2QjcfKgzg9Id79YQ7/82yTv49UC71EWblxdALo46lUT/FLeifLZSjFelIXZZjFTaQBQX+HFGGxdA22YLYDvciBs+4NSpUy85ZhcvXnxUtmzZhXTNTzhdjrh5ATxMx3eLocNKIK9fbGzsXiOAU1JSTsKJqyDogx1AUQgdX33RRDX84EqV8G2cWrdzkfpqx0KVzML/dy5WX1H6+n3LVdKsUPUR5W/DFn3BeBV8ap2KS5hmUZBK6NBC2TSGUXHY0tc4s0EtObFWLW3R0HLvGkgvIqhBQbwrP6dB0gwVfixJLY+brIYivwuAmF1H2IkITxGU4/LvvPnmm73IZ1hAo9axe/fu3dBtyP8vX76cnpSUFPPWW291pbyNAXStwNXQBzWggC7oH0dh3ewNw7Y138HeRPKYgNnOCl+3N3B3R9TFBW3H9ayNOruhTQvZAmBtdVtOnz59i9HiAri+JFVFRxhjv+1I2nIHwmLqYZTL+JoBGFGI5riPvei8orB0jffHq9V/nlR/2iLV3dUQKtNrz1K1ls/TE9UKWGU3aLcjGi6PlUbOJxWHFUHfmxUEI051XC8M4DrBOjauV035PU9XmSJ/M1jEElByBxM+Z2diccsAhG0GDx4c/vTp0yfZOcTPnj17PGnSpEjE2LmeLVJTU2fytT/++OPR2rVrxwIc5dAWBcVQbSb5BdfXfkdBIVnxbAcDHSggRPP34qhL7QEDBrz3+PHju1xXUsY0KGEVWOKCot2scl0GYYDkqcx5GzZsuAoWVwL3pTAaNfCqmJiY/dOmTdtepUqVkRjGCgsrymX9jBSCoxiIA1cUw1l+vJgltuzdTI0a5quWaBD17ahS+3dWyQFd1PoAH7V2YFeV9Mte9RtfG9lbxVKZYUsi1PKbX6sf1sxU8zDEVhVDfgHhTDkYnKLCAFpF0BJf/dzf96t/QIGbAqzOqCdb4noknbZ+rjbr/Fti1Rb4BA0wnBcXzzZyZiNVYOvTysvLa/QTOnIS1RkzZswcKtufhQGt02/dunUOxqUOlLm0GKpL4rlaSor3K442KQUr6WrCsx0NQC8oRuNSUMYy4t6l0CZcl3a7du3aIN/Bx8cnCLSokhjlTWlXHjyo6cyZM1PlTRYvXnxWcFMJXEsYjfNLsGdkZPzm7u4+AR1WWHQM/6/JjpzRiYP19YCV1p1YHABi5ehHMlGDgv4vImFQstMXTTLtYqq6xtdG+CkeIUJJRpAMIunJIEAjVUCjlxDOV0HhlDmjgSvAWncK7afmScv+ebj6ktOhnOVxvyp6AufXfS+UiOXgCnUcINLWuhyeXUTwOQfh7GmOXVkrzqFDh743gvO77777nQzFtfnz51/ZvXv3P8Xdjx07dpHKch9EyHTqmwy0ZRu8n6YTtdA+daGEdZFWHe9WFXnrgXc3wm8dXC8HQBaDOKNdKkAJ6+J59fFfP/dNKFP/DRs27JJ1DQkJ+ZzxBT5fDm2W18z62kMTOh0+fPiatLrly5efi8Z3FhaKh/NuNCQdN/Dih+XKlfuCrnVFHkcxdORHx7XcsmXLd7Icz8RhKtlJOEBFAI5GAOAYAd5Z3DEkYSRs5UcBsKMgnBZM8gFGjHehHPXQcFVQP1eA1RXnVdBpDdDB/Yf0VMv5mZmH1XP+ZQtP6e8DrDVQhvN3mT/2Bb3ReS9sVDcofTjA7mHo7BIiMqCpRzncsyksdsiNGzfuybaaM2fObUrn9tpFso1kO1naMzIP9eF1Sud+WCTTf/jhBx7lPibpizq9O3r06BHdu3dn49SN/Y8uXboMjYyMjECaN/qlPeevXbt2/wkTJkSNHz9+6sSJE6d07dr1A1xvjHatiBGpGoDavH79+j2nTJkykekMCyxqJ1CbzlDu8BUrVqTLugYEBKxD27VHm5REW9mbOWqs7YPkDQhk12F1KyNPHoCqyZAhQ5YbeHEm8eI4QS+KoHNc8ELa4lRh6yvL8lQyGspZEPoCsEK1AL4PBHiZuzG37Q1g98RzuSEGX9umLl3dqi6nr1aH331bjYFT6H1vtzpJVOJAYrTFKjUBmGvDAniwk8V5yNFLpvP3GDxMS/iZqTHq1t1v1GP+/8lQtRwK2hSWgYH+/i+wultj1XX+/SFFMVj4+X1C+6pgvvf5FLUWHasjNU5oG1aeeuMDVeC5ZPXt9e2KrecUo1Ul0Nyi9H0kTEk2QFK++OKLi3rka9u27ba4uLhT1mjF7du3f2Jg7N279xudRqBMSEtLO2Ri/UIqVqw4jhTie7N7Xbt27RJhYSzA2Bwc35OBfvz48QNWYv0Z/v7+bIBC33777bnEdZ+Z5SO29DQiIiISylFeWN+XwMuJHrxmwVD5HdCSUoKjcWN7Hjly5KoB6GxlhsG6FMMQyB3Uvm7dur0BwqLoMJ+ff/75kVwLIcCrCb/kvdwofQV4QxgQJB0x7LSBBejC6XKY3xRjsU4DjenEoT/Eu/FzO++Gg8fCXBlKGx7zsdrPafR7Lay/Osv/iaKwUg+G5eBO8x3ZR8XytZ+/VY/oPJn/39+jHtD/8axo4YFqmr7/jkUW2uMhvGp3KJDn5c0qXbxnjNl0/DfffHM/Ojr6LLXrJsqTSLKahEOYrBjsJGY7jc90S57L/tDH8uXLvyfOvd4auCTIevfuPR2+S0CbNm0mZOdg8j3p3mup3Las8q2hg+7ZGlgqjpH/Jb5rAWTfvn1TDaQ5DtalqAAVA8ybAWcSt+0HE18WYPWdPXt2CvG2Y2JCgs1/B+OiHhPwaurgho7uJTo1FEO3D0DbCuIFCxw8O+wFgDZ8qr4BleCw1fBdi9VeTv9tv/oFvHhonw7UkZT29Kh60ruDmg6rzkNWRPwU9T3Ay4DdTdY3E+BfAgBzPYZf2vSCc48frA7R+TpR14mgMcNH9VHzOe3BQXUfitZU8MG27Jjy9SdH1dNypVUMpS0MDw8/klXn3r17N5PXjgwdOnQv5Wc+vpLF19f3W+K+L810Mg08ceLEPZ4JpTyLs7rvo0eP/qhVq9aeS5cuPZTp5PQ9Jyucyb8y/dy5czwicNtFG6kO5X1Gxu4R0ZYnxsmqUqVK7SJl/IfxfkxB2UBWqlTpI1CHqsBpfiN4LYAkLdhqANRwkHZHEX8tExwcHGpFm9nK9AJ/GkpcZ6fgWu2FV+vNDZgFePWzCoMHNpZeP1mnK0wN2ELe3qXOkLU7xUMy7sHgHTm4u1rFedfMVNypH4EDM4gnEhe1DOuJ09UBOp9B97nL53GTLVZ6NMDLYJ+wYor6jq9FjVAXmGdGh6gzfL47TrEjO4mt8wc91ApOozo8BHhWCfBGCD4+lhy6Xzn9owEW3t4FSsejhy+PEnxtzzJ1hs4/ZctLsiwxMTHDligDWc9MomSpXAZA3iyvp6en/waawbQn3lj+/Pnzj4lrniOjdYKu7xk1atRlQ2TomZOTE1M8ph03k5KSXrLWrVu33kUU4qBMO3v2LJfhUZkxcHP16tUvlSHacJrSj82aNeu+TO/Wrdt3lB6LfmiTleW1Bbw6YlCLONV4s8a7fPny79u3b88g/nRw+vTppw2TEZ5iFs57xIgRu3II3l7ZxXhxDw5lhQQCvEkzLPyQKUIQGiK8UW21+PER9Yyvpy1Qly38NNnSuJPxzv0wBH6Ynqgy+HqPdhagby7trLZoh6xBDZVAaZ+TNb/A58sjFY8wbJEXE2e9z2lvuKhpAC5TnbEzQ9VGTj+9wQLQQeDWrPBBGtidW6p4Op9KEgUQx/fo0eMQ04XsAMyRnPbt26dwGZL1higEh/o47LmAJM5YFqBlLr2RncHk5OS78vrmzZufR0VFPWGZOnXqk4SEhKfyOjlkNzZs2HDfUOYZ5X3M+Vm+/PLLpyYO6AkC70vWumfPnvvZsMCPaYoR+J84r1Xa4OHhEYuCxcRkgx87ZmZrHqwd48aNW4uhX8/RdyAivs8G8BYCBWkkLS/9j4Q11U6bDyy7J8Irwwf3UCuF5R2l4574P2POGHVU34/B2LCmZTIjHKDtBiUI5ogB5+n1rtoJbpm0eOIL7rv1c3WtbhW1Rd/DtaQFMBz2m8fOGqcHvWexgiOhOKPdXNT0J0fUU77WvIFlmGXqEhwx5IWy/UijADtqJOPwjmy5OeLD9UvhYXbAgAFn4uPjf6LDlIsePHjwBqxvgkwnHnwPwGWFiDUZOdkqL0UoMsFIO7I7ZsyY8Ss9O0cxaQIvW/H0Tz/99I5M79Wr1y5Qru5wrMsgKmNvk8M2cuTINPDI8rDAvjzTxjNutlbu9OnTd8ELK+LhFodt3bp1P2ThsJmBt6ch2sBg8IfT1RoTEc1wPuSDnjQsUt61s9QeWNNeiEow4KM8PdQmfT/msRiixiCfFxTiA81l+3VSKTr85FJCJT06pJ6T/EFD/U1QjpMY5hmQM86nqB85fUhPC6BDYGXZoR2/ef4Lpwy0hYE65ViSushp00daLN8ETTWaNWs2kxc4YaIoHg7aWljHHdWrVz9u5JIAIoN3hUw7deoU98VnHBdnhTApswD14RFoHoM9J0D8+OOPf2NqkZMykydPvkrP2j937txbMt3f3387RswOwF4JEfHKPlTGAINlY1D4M3B5jYOtFeOlke7u7hGYKXECeDnOGZiRkfG7lVCZGXg5IN5NgDcIw20bALsO4oz1YX0H6fgswDsM+bshijDl6lb1C19/SADk35VR6qgBvMxHA/VQjg7/BMP5fLrveWm5yeouxzUG3ifMW/nauEGWKEAwrD5b9dAmddQXfI2pCysD0w9xPgWdFtKiRYso2Z59+vTZzJQEws9bzzy8Y8eOF02A+E+8FuCdBwX7zKTMVCgajwafkOF5yRrSkK8pQCZ+Lf+jo6MfBgUFsRN6hSzvU0OZ56JM5rRp0zj/A+a4zKlpJGGHOi0mJua6LMdRCPSHF6IyzmbgtTpJwR4nhugxrq6uy2y1uBwGWbNmzV6yCkMBXBfEbS2TFLycMotJCiN4XTEJ4CPA2xtOTj1YdL1MsBomVAJouF4qwDsCjhxTgSCmEnzt+Br1j5qV1F62onze09NiOd8XtCFIPPMjPcTzcEY0I15f+2qOhb9OR2NbuO3qGS9CbKAtwXj+e1CeieeS1S2+Hh6ojiyJeAH01HmWGTkdnQg2zjoxn61fv34SLORCOGXbiGteN+aD5V1mQhsWA8ALTcA7DgrGijaGOO9LsWIC3iM4axxZuEWO2E9jx479NTw8nO/LjteJuLi4+4YyPKrdRpmbVOZHzk+08UcGLRRwQ2xsbIbB8qahPp0RuSopfC/bpod59oa0Ywd5opnWwMr8t1+/filhYWFzQkJCRoF/yo2XeoEOW8dAXg+cxfSwnQl4LVO1AkjdkF+vFtNz7+5Qlr5Dfckh+V/wcARhAIufl5oFa/msThW1lWOys0LVMU67tUPdAfgGIgw2WjxT0xRfXP+IhvjNidHqYNN6lqF4JIDPMlIriADve6A0DOLRYf1VKl/fu0zdvoPJD3YkoQD87KE8cWDmkPEGgKVLl57kqXuz6WFymq+Cty42hr849IaIRKIJeEdj5OFJnaCBAwcmGfOQI/5b48aNf/Lz87vLkQSdHhkZeZnK7CSak25WpnLlyjepzB1ZhrB2AkoWv3DhwvPGrWODBw9eWbNmzYGYCHIFHhyyXJjDIRd9kwcPHvy3fKAZcDt06JCITqklZo2KiEXFhbWzxyDPYmGO2bJIF1hYbwGkjrDG5eAE6kUgOjLhN9xPLcJs11FwZLaaI27vVD9x+vyxlijEIkQHFmlLuG62+panUJvVVzPIKiZx2u1dFqsRAP7VGjN+vrCiQbjWA9d55m3wp2HqK1j3C6P6Wix6Tyh1Z0xbR/OEhn6nQ6ssceRIMaXNEY8xHGbMCYdkgMI68+Kcz+7du2c6WrZq1Wq3CXiHgy55QVF5Zu26Lc/FGhgOE65OSEi4aksZcjq/Rz1jrM0IkqJuxCSVO/o4b46WRNoAXLlU0sGwLE4D1+LsGaMU7CQalkQqAd6CmCLmKdx2ArztkFZGLK4uhHOeqeqqJwREmbCNn6k0/n8pVV0Dt5wEbz6SeaiOAnRppZbqYZ+Fp5phkVpAkd6E5W+NurTCeSP89wv2f8FrxfN7gKO3BzAj5n6oDuvroX0tjloYLHR7WGm2Op8QfThrS3/cuXPncfv27ZOxWIlj7pM2btx43Cxvy5Yt93F+fX7z5s07GJ084fwygAe5ubnNJh77Y3a+TaNGjZYitMfPXrB169ZrWZUhpXrYpEmTzxHhmUQOabzZrhu6z2a0sekkhU2L0c2A6+XltQ4aWh2W1sGwQt5ZL0Y3c/asLEaXi8IdQQe44m8f+VKtYgE1qCrWyOYTnLo6+PD7q6aq5OS5ageDlukATwIQr9zu722ZIBgq+B0P06ETBqsEGub3MB0Y1E0lcoyYZ+j6d7YAvROsvd6dUQHOZzWxa6MygM0dP2DlVJWS8pn6evsXKhUWWYPdYtW83nkxJY3JjSkAT1sMk01gyblukQ0aNEhYsmTJaZ4h41k1uYpv//79t4hiHECYbiIc1AGIrIyLior6+tChQze4T3mkGzZsGFOZhHbt2m2h9Ovp6emXaUifjb7wELtWvDESRJGzuIWfw7F8rSh8v8mTJ+/mDbqgTYNQX6Y+M8jp2sIgNpYhH+cAlZmB0VDXM5wNIQcJOA878VT2KO/EQZtkCd5stwFJKsGai0o2Ewu9C8O0l0JHsvMUyFuHbt++/dTGbUByR0F+0AI3TKN6QOoirZjYjqMXsLshOuENkASAh/bDaqo+GCk6wRK2BA14D40fgvf6EJZwCIb8ZmJNcHE828mwZ64UQNwI1KYPnu2H83aoF9dlPCnVCQZv7DiLUxkm1v7qXRD1Ubf3cT0SK+rmCJmNSMh4gMEfz2gL8PfGO0UgX7SYAIkUDqI/Ro2aYtuTfP4YKNhsPHcWyoehjTujPdviPQaiDbMq0wWWXrfVSNQzCr8jhEJVQJvne60NmGvWrHmAEEckXlqvKHoLvwyMQBoWFhidMxs3YCpBOwrC03wD4KmK/3qFfV6xraQA7ueul+QBMJ5il0crWO76WIdRFZZGfwXIB0D2FTz2HXSq3v5j3KGcXyxkL4nRqyEsrTc6pyM6mOnHcDcXNVPP8vF/dHZLWHO9SLw8/Agdv9bKOAiKHwjL1QdOrCcsdm28W13UXc889jUosb9Q5OZil4Xek2jt+QOFUuqy9TAKVcPo0wLva61MC7HvsB7q2QH16YN8nZFeQ1BEh9fe+s7Wd9OmTTd5Kphn5tgzDQoKWsa/c+fOPbxv376fXmPru3E/WSGAsjTE2bArVy7mkRshK4NG1IBUB1h1eK0UOkkvQK8uFly/BStYB2B0Mdl4adzbpeuqlzjWBpjadG+rAu/vUdenBatFHMb7MU39LNYxhGEmqQHi2kXFAvnSOdiAWRWAKy12PbiLGHgjOLSN8V+/Y23xjsXENh+z5zcRG18bIr2iWORfAv8r2lCmrNgVbqxnQyttb/93+uiIvdhpIPdO5TX5foJxC7qTYVdzCbG1pbDYU6WBUkI0ptlWl+x23UoFchKWq/mCCS9WrklhAL/hahkiB8BKVzVsbM33Clvfi4hvWBRC2RJi0X1Zw/uVMXnHvIKKGZ9fVnxuwEXsoCgk9r4VsqFMcbEH0KyeLugLY9vbvA3+3/25JzvDxzekmH2Uwvjxj/xWNhbmEx1kb9jDVkA0aEHxDQRbvndgBLDeC8cWx4ccv8iv5qidHPudGWpx4sLh4HTEUOtq2GWc04+O5M/Be0kpYPKthOyeb/zYiYNhZ7AtZfKa7CEskEW9cvStif+UD+3l5NNFdla+wmKfxRdZrH1S6VW+NGPcvu6K4a8N+O4QTFoMA//sgOG7AqxRfisjyqt+7slaG2TXJsqG59v6XFvK2NJXr/Rlk7/rJ07tXhH4r/uNLxnqc9JbfOCQdRA7MHTcuAJGI7013i6Hdcuujn/FRwn/6ue+rpF6pQ7J/bi07dZXR0D05soqcI7qiA2LLmJLvIP6z/uW2P+7jsn9rL/tAJYOpLP4LoLx80u5wLXx+B+cTUKEm3GYQAAAACV0RVh0ZGF0ZTpjcmVhdGUAMjAxMi0wNS0wMlQxOTo0Njo1MSswMTowMBx1tHgAAAAldEVYdGRhdGU6bW9kaWZ5ADIwMTItMDUtMDJUMTk6NDY6NTErMDE6MDBtKAzEAAAAGXRFWHRTb2Z0d2FyZQBBZG9iZSBJbWFnZVJlYWR5ccllPAAAAABJRU5ErkJggg==') -5px 8px no-repeat; } .ie7 #site-logo { - background: url($image-sprite) -3px -3px no-repeat; + background: url($image-sprite) -8px 0px no-repeat; } .next-steps { diff --git a/web/cobrands/fixmystreet.com/fmsforcouncils.scss b/web/cobrands/fixmystreet.com/fmsforcouncils.scss index 4448c4616..6351b7b9c 100644 --- a/web/cobrands/fixmystreet.com/fmsforcouncils.scss +++ b/web/cobrands/fixmystreet.com/fmsforcouncils.scss @@ -17,17 +17,18 @@ $fms-pink: #E65376; max-width: 100%; } - .wrapper { - display: block; - @media only screen and (min-width: 48em) { - display: table; - } + // Allow page contents to stretch to edges of window + .container { + max-width: none; + padding: 0; + } - // Allow page contents to stretch to edges of window - // (But only inside .wrapper, so not affecting footer!) + #site-header, + .nav-wrapper, + .mysoc-footer { .container { - width: 100%; - padding: 0; + max-width: 60em; + padding: 0 1em; } } @@ -48,14 +49,6 @@ $fms-pink: #E65376; } } - #site-header { - .container { - @media only screen and (min-width: 60em) { - max-width: 60em; - } - } - } - .fixed-container { max-width: 90em; padding: 0; @@ -65,9 +58,6 @@ $fms-pink: #E65376; padding: 0; background-color: #fff; overflow: hidden; - @media only screen and (min-width: 60em) { - width: 100%; - } } .councils-content-wrapper { diff --git a/web/cobrands/fixmystreet.com/layout.scss b/web/cobrands/fixmystreet.com/layout.scss index 87916b33a..221694330 100644 --- a/web/cobrands/fixmystreet.com/layout.scss +++ b/web/cobrands/fixmystreet.com/layout.scss @@ -76,20 +76,20 @@ h3, h4, a:hover { @include linear-gradient(#000, #444 10%, #444 95%, #111); } + a.report-a-problem-btn:hover { + background: $primary/1.1; + } } -.nav-wrapper { - .nav-wrapper-2 { - border-image-source: url(images/tile-y-border.jpg); - border-image-slice: 4 0 0; - border-image-repeat: repeat; - } +#site-header { + background: none; + border-image-source: url(images/tile-y-border.jpg); + border-image-slice: 4 0 0; + border-image-repeat: repeat; } body.mappage { - .nav-wrapper { - .nav-wrapper-2 { - @include linear-gradient(#000, #222 10%, #222 90%, #000); - } + #site-header { + @include linear-gradient(#000, #222 10%, #222 90%, #000); } } @@ -149,7 +149,7 @@ body.fullwidthpage { body.frontpage { #site-logo { - top: 3em; + margin: 2em 0; width: 300px; height: 60px; background: url($image-sprite) -2px -108px no-repeat; diff --git a/web/cobrands/greenwich/_colours.scss b/web/cobrands/greenwich/_colours.scss index d2dc1c3ed..447b5a134 100644 --- a/web/cobrands/greenwich/_colours.scss +++ b/web/cobrands/greenwich/_colours.scss @@ -17,9 +17,13 @@ $map_nav_bg: #fff; $nav_fg: #fff; $nav_fg_hover: transparent; +$header-top-border: false; + $col_big_numbers: $primary; $col_click_map: $greenwich_red; $col_fixed_label: #00BD08; $col_fixed_label_dark: #4B8304; + +$container-max-width: 990px; diff --git a/web/cobrands/greenwich/base.scss b/web/cobrands/greenwich/base.scss index 0c52bd5da..2f2ebfa8c 100644 --- a/web/cobrands/greenwich/base.scss +++ b/web/cobrands/greenwich/base.scss @@ -6,15 +6,12 @@ @import "../sass/base"; @import "../sass/report_list_pins"; -body.frontpage #site-logo, -#site-logo -{ - background: url("/cobrands/greenwich/logo.gif") 0 0 no-repeat; +#site-logo { + background: url("/cobrands/greenwich/logo.gif") 0 50% no-repeat; background-size: contain; width: 82px; height: 40px; - top: 8px; - left: 4px; + padding: 0.25em 0; } #nav-link { @@ -23,8 +20,7 @@ body.frontpage #site-logo, #site-header { - background-color: $base_bg; - background: url("/cobrands/greenwich/mastWave.gif") 0 0 no-repeat; + background: $base_bg url("/cobrands/greenwich/mastWave.gif") 100% 0 no-repeat; background-size: cover; } diff --git a/web/cobrands/greenwich/layout.scss b/web/cobrands/greenwich/layout.scss index db06c9424..c2b50088c 100644 --- a/web/cobrands/greenwich/layout.scss +++ b/web/cobrands/greenwich/layout.scss @@ -2,8 +2,6 @@ @import "_fonts"; @import "../sass/layout"; -$fixed_page_width: 990px; - #site-logo, body.frontpage #site-logo, body.twothirdswidthpage #site-logo @@ -18,17 +16,13 @@ body.twothirdswidthpage #site-logo height: 83px; } -.container, #main-nav { - width: $fixed_page_width; -} - #front-main { background-color: $base_bg; padding-top: 0.5em; text-align: left; #front-main-container { - max-width: $fixed_page_width; + max-width: $container-max-width; background-color: transparent; padding: 1em 0; } @@ -43,11 +37,12 @@ body.twothirdswidthpage #site-logo } } -body.frontpage #site-header, #site-header { - height: auto; +#site-header { + background: none; + padding: 0 1em; // "wave" background image means its easier to apply padding here than on .container .container { - min-height: 0; + padding: 0; // let the #site-header padding do the work on mid-sized screens } .container:first-child { @@ -61,17 +56,15 @@ body.frontpage { border-left: solid 4px $primary; } + // Greenwich positions the menu visually *below* the h1 on the homepage. #fms-menu-desktop { position: absolute; - width: 990px; - top: 262px; + left: 0; + right: 0; + top: 150px; } } -.nav-wrapper .nav-wrapper-2 { - border-top: none; -} - .nav-menu--main { display: none; } @@ -150,8 +143,15 @@ body.frontpage { } body.mappage { - #site-header .container { - min-height: 68px; + #site-header { + background: $base_bg url("/cobrands/greenwich/mastWave.gif") 100% 0 no-repeat; + background-size: contain; + + // No more "wave" background on .container + .container { + min-height: 0; + background: transparent; + } } .main-menu-container { @@ -171,16 +171,14 @@ body.mappage { height: 54px; } - .nav-wrapper .nav-wrapper-2 { - background: url("/cobrands/greenwich/mastWave.gif") 100% 0 no-repeat; - background-color: $base_bg; - background-size: contain; + .nav-wrapper { border-bottom: solid 4px $primary; } .nav-menu--main a.report-a-problem-btn { color: $nav_fg; } + .nav-menu { a, span { color: $primary_text; diff --git a/web/cobrands/hart/_colours.scss b/web/cobrands/hart/_colours.scss index 947b97625..3dce0d9b1 100644 --- a/web/cobrands/hart/_colours.scss +++ b/web/cobrands/hart/_colours.scss @@ -14,6 +14,11 @@ $base_bg: #ffffff; $base_fg: #1a1a1a; /* Unused here */ -$map_nav_bg: #222; $nav_fg: #fff; $nav_fg_hover: #444; + +$map_nav_bg: $primary; +$mappage-header-height: 173px + 32px; +$header-top-border: false; + +$container-max-width: 60em; diff --git a/web/cobrands/hart/base.scss b/web/cobrands/hart/base.scss index bd847aa55..62a4250f3 100644 --- a/web/cobrands/hart/base.scss +++ b/web/cobrands/hart/base.scss @@ -24,15 +24,7 @@ h1.main { margin: 0.5em 0; } -.container { - padding: 0 1em 1em; /* if remove this 1em, need to edit .full-width! */ -} - #site-header { - background: $primary; - height: 57px; - - .mobile-header-nav { height: 56px; float: right; @@ -53,11 +45,13 @@ h1.main { } } -// Colour tab to match colour scheme -#nav-link { - width: 50px; - height: 48px; - background: url('/cobrands/hart/tab-blue.png') 0 0 no-repeat; +#site-logo { + display: block; + background: url("/cobrands/hart/hart-logo-mobile.png") 0 50% no-repeat; +} + +#main-nav--hart { // Hart has two main menus, basically same on mobile + margin: 0 -1em; } .big-green-banner { diff --git a/web/cobrands/hart/hart.scss b/web/cobrands/hart/hart.scss index 0b11024d9..af2b79a50 100644 --- a/web/cobrands/hart/hart.scss +++ b/web/cobrands/hart/hart.scss @@ -26,110 +26,12 @@ h1, h2, h3, h4, h5, h6, legend { font-family: 'Gill Sans MT', 'Gill Sans', 'Trebuchet MS', Calibri, sans-serif; } body { color: #333; font-family: "Gill Sans MT", "Gill Sans", Arial, 'Helvetica Neue', Helvetica, sans-serif; line-height: 1.4; background-color: $base_bg;} -.nav-wrapper-2, -body.mappage .nav-wrapper .nav-wrapper-2, -body.frontpage .nav-wrapper-2 { - border: 0; - border-top: solid 4px $hart_primary; /* otherwise overridden in base layout.scss - for some templates only */ - min-height: auto; - background-color: $hart_primary; - - @media only screen and (min-width:48em) { - height: 173px; - } -} - -@media only screen and (min-width:48em) { - #map_box, - #map_sidebar { - top: 173px + 32px; - } - - body.frontpage #site-header { - height: 13em; - - .mobile-header-nav { - display: none; - } - } - - body.mappage { - .header-container, - .main-menu { - max-width: none; // containers are full width on map page - } - } - - #skipped-map { - clear: both; - margin-top: 3em; /* required to push "Your Reports" visible on Safari/IE */ - } - - #main-nav { - margin-top: 106px; - } - .nav-menu { - margin-left: 157px; - float: none; - } - - .nav-menu li { - text-align: center; - text-transform: uppercase; - padding: 0 15px; - font-size: 16px; - border-right: solid 1px white; - line-height: 1.5em; - } - .nav-menu li:last-child { - border-right: none; - } - - .nav-menu a { - padding: 0; - font-size: inherit; - } - - .nav-menu li:hover, .nav-menu li:hover a, { - background-color: white; - color: black; - text-decoration: none; - } -} - -@media only screen and (max-width: 61em) and (min-width: 48em) { - #main-nav { - padding-left: 0px; - float:none; - } -} - /* -------- For Google translate select box only */ .header-nav div#google_translate_element .goog-te-gadget { font-family: "Gill Sans MT", Arial, 'Helvetica Neue', Helvetica, sans-serif; } .header-nav div#google_translate_element .goog-te-gadget .goog-te-combo { margin:5px 0 0 5px; padding:0 0 0 2px; background: #9b9b9b; color: #fff; border: 1px solid #606060; font-size: 12px; width: 138px;} .header-nav div#google_translate_element .goog-te-gadget .goog-te-combo option { background:#fff; color: #666; padding: 1px 0; margin: 0; } /* --- */ -body.frontpage #site-logo, -#site-logo { - display: block; - background: url("/cobrands/hart/hart-logo-mobile.png") 0 0 no-repeat; - margin: 10px; - padding-left: 10px; - position: static; - @media only screen and (min-width: 48em) { - position: relative; - top: 1em; - margin: 0; - margin-left: 2.25em; - padding: 0; - background: url("/cobrands/hart/hart-logo.png") 0 0 no-repeat; - width: 123px; - height: 132px; - } -} - .sign-in { display: none; } @@ -144,75 +46,18 @@ body.frontpage #site-logo, .sign-in a:link, .sign-in a:visited {color:#333; font-weight:bold; text-decoration:none;} .sign-in a:hover, .sign-in a:active {text-decoration:underline;} -.main-menu-wrapper { - background-color: #FFF; - width: 100%; - - @media only screen and (min-width:48em) { - position: absolute; - box-shadow: 0 0 20px rgba(0,0,0,0.2); // shadow to add contrast with map - } -} - -.main-menu { - li { - font-family: 'Gill Sans MT', 'Gill Sans', 'Trebuchet MS', Calibri, sans-serif; - margin: 0; - - span { display: none } - - a { - padding: 0.5em 1em; - background: #f6f6f6; - color: #333; - font-size: 1.25em; - border-bottom: 0.25em solid #333; - display: block; - - &:link, &:visited { - color: $hart_primary; - text-decoration: none; - } - &:hover { - background-color: $hart_primary; - color: #FFF; - } - } - } - @media only screen and (min-width:48em) { - height: 32px; - max-width: 60em; - margin: 173px auto 0 auto; - - li { - float: left; - margin-left: 1em; - text-align: center; - - span { - display: inline; - } - - a { - padding: 0; - background: #fff; - color: #333; - font-size: 1em; - border-bottom: 0; - display: inline; - - &:link, &:visited { - color: $hart_primary; - text-decoration: none; - } - &:hover { - background-color: #fff; - color: $hart_primary; - text-decoration: underline; - } - } +.nav-menu--main { + font-family: 'Gill Sans MT', 'Gill Sans', 'Trebuchet MS', Calibri, sans-serif; + a { + &:link, &:visited { + color: $hart_primary; + } + &:hover { + background-color: $hart_primary; + color: #FFF; + } } - } + span { display: none } } #front-main { @@ -386,20 +231,6 @@ body.frontpage .table-cell .content { list-style-type: none; } -.main-menu ul { - margin: 0; - line-height: 32px; -} - -.main-menu li { - list-style-type: none; - color: #000; -} - -.main-menu li.last { - padding-right: 0; -} - //#search input { display: inline; margin: 0; @include border-radius(0em); } //#search input.button { font-weight: normal; text-transform: none; } // The footer breaks the map pages layout, easier to exclude it than diff --git a/web/cobrands/hart/layout.scss b/web/cobrands/hart/layout.scss index 08b084275..0358aca87 100644 --- a/web/cobrands/hart/layout.scss +++ b/web/cobrands/hart/layout.scss @@ -1,10 +1,6 @@ @import "_colours"; @import "../sass/layout"; -.content { - margin-top: 8em; -} - #front-main-container { background-color: $hart_primary; } @@ -16,3 +12,110 @@ body.twothirdswidthpage .content { } } } + +.mobile-header-nav { + display: none; +} + +#site-header { + margin-bottom: 2em; // To push main content down under abs. pos menu +} + +#site-logo { + margin-left: 2.25em; + border-bottom: solid 0.75em $primary; + padding: 1em 0; + background: url("/cobrands/hart/hart-logo.png") 0 50% no-repeat; + width: 123px; + height: 132px; +} + +#main-nav--hart { + margin: 0; +} + +// Menu *in* the header, pushed down from top +.nav-menu--hart { + margin-left: 157px; + position: relative; + top: 110px; + float: none; + li { + text-align: center; + text-transform: uppercase; + padding: 0 15px; + font-size: 16px; + border-right: solid 1px white; + line-height: 1.5em; + } + li:last-child { + border-right: none; + } + a { + padding: 0; + font-size: inherit; + } + li:hover, li:hover a { + background-color: white; + color: black; + text-decoration: none; + } +} + +// Menu *under* header - with a full width shadow first +.container--hart { + box-shadow: 0 0 20px rgba(0,0,0,0.2); // shadow to add contrast with map + position: absolute; + max-width: none; + padding: 0; + width: 100%; + + body.mappage & { + position: absolute; // rather than static + } +} + +#main-nav { + min-height: 0; + float: none; + margin: 11em auto 0; // To push it under header + background-color: #fff; + + // #main-nav acts a bit like a .container, so we give it the same max-width. + max-width: $container-max-width; + + // And, like other .containers, we remove the max-width on the map page. + body.mappage & { + max-width: none; + } +} + +.nav-menu--first { + padding: 0.25em 0; + + li { + float: left; + margin-left: 1em; + text-align: center; + + a, span { + padding: 0; + display: inline; + font-size: 1em; + color: #333; + background: #fff; + } + + a { + &:link, &:visited { + color: $hart_primary; + text-decoration: none; + } + &:hover { + background-color: #fff; + color: $hart_primary; + text-decoration: underline; + } + } + } +} diff --git a/web/cobrands/oxfordshire/_colours.scss b/web/cobrands/oxfordshire/_colours.scss index ba0597bb8..b332eb6da 100644 --- a/web/cobrands/oxfordshire/_colours.scss +++ b/web/cobrands/oxfordshire/_colours.scss @@ -15,8 +15,7 @@ $base_fg: #000; // Taken from the OCC website $oxfordshire_link_colour: #0c62ba; -/* Unused here */ -$map_nav_bg: #222; +$map_nav_bg: $oxfordshire_dk_green; $nav_fg: #fff; $nav_fg_hover: #444; diff --git a/web/cobrands/oxfordshire/_oxon.scss b/web/cobrands/oxfordshire/_oxon.scss index c8c49a631..39d2edec7 100644 --- a/web/cobrands/oxfordshire/_oxon.scss +++ b/web/cobrands/oxfordshire/_oxon.scss @@ -14,16 +14,15 @@ body { a:hover {text-decoration:underline} margin:0; background:#E0E0E0 url("images/bg.jpg") repeat-y top center; +} - #oxford-wrapper { +#oxford-wrapper { background: url("images/bg-y.jpg") repeat-y scroll 0 0 #FFFFFF; clear: both; display: block; margin: 0 auto; padding: 0 8px; width: 990px; - } - } #oxford-header { @@ -32,19 +31,19 @@ body { overflow:hidden; position:relative; width:958px; - - /* note================= */ - height: 133px; - height:auto !important; - min-height:133px; - /* note================= */ + min-height: 133px; background: $oxfordshire_lt_green url("images/header.jpg") no-repeat 0 0; a.logo:hover {cursor:pointer;cursor:hand} - a.logo {float:left; display:inline; margin:3px 0 6px 10px; position:relative; overflow:hidden} - a.logo span {display:block; position:absolute; top:0; left:0; z-index:10} - a.logo, a.logo span {width:173px; height:38px; background: url("images/logo.jpg") no-repeat 0 0;} + a.logo { + float:left; + margin:3px 0 6px 10px; + width:173px; + height:38px; + background: url("images/logo.jpg") no-repeat 0 50%; + text-indent: -999999px; + } h1 { float:left; padding:8px 0 0 10px; margin:0; font-size:1.25em; line-height:normal; @@ -236,7 +235,3 @@ body { z-index: 1000; } } -.oxford-left { - float: left !important; -} - diff --git a/web/cobrands/oxfordshire/base.scss b/web/cobrands/oxfordshire/base.scss index 8d437c5b1..55bd2f436 100644 --- a/web/cobrands/oxfordshire/base.scss +++ b/web/cobrands/oxfordshire/base.scss @@ -6,28 +6,17 @@ @import "../sass/top-banner"; @import "../sass/report_list_pins"; -#site-header { - background: none; - background-color: $oxfordshire_dk_green; - height: 60px; -} - #site-logo { - margin-top:4px; - background-image: url('images/logo.jpg'); - background-repeat: no-repeat; - background-position: 0px 0px; - border: 4px solid $oxfordshire_dk_green; + background: transparent url('images/logo.jpg') 0 50% no-repeat; width: 173px; height: 38px; -} - -#nav-link { - height: 60px; // to match #site-header + padding: 0.5em 0; } #mysoc-logo { background-image: none; + background-color: $primary; + color: #fff; text-indent: 0; img { display: inline; diff --git a/web/cobrands/oxfordshire/layout.scss b/web/cobrands/oxfordshire/layout.scss index 086337383..fc89b854f 100644 --- a/web/cobrands/oxfordshire/layout.scss +++ b/web/cobrands/oxfordshire/layout.scss @@ -37,8 +37,7 @@ body, body a { } // White background, so no margin needed. -.content, -.iel8 .content { +.content { margin: 0; } @@ -62,16 +61,10 @@ body.twothirdswidthpage { body.mappage { #oxford-wrapper { width: auto; + background: none; padding: 0; - background: transparent; } - #oxford-header { - position: absolute; - top: 0; - left: 0; - right: 0; - z-index: 1; width: auto; min-height: $mappage-header-height; // override the normal min-height of 133px padding: 0; @@ -86,16 +79,10 @@ body.mappage { a.logo { display: block; - float: left; height: $mappage-header-height; width: 200px; margin: 0; background: transparent url("images/logo-light-green.gif") no-repeat 50% 50%; - text-indent: -999px; - - * { - display: none; - } } #navigation { @@ -131,10 +118,6 @@ body.mappage { padding-right: 0; } - .container { - width: auto; - } - .extra-text { padding: 1em; margin: 0 -1em; diff --git a/web/cobrands/sass/_base.scss b/web/cobrands/sass/_base.scss index 70e2ecc67..c319082a8 100644 --- a/web/cobrands/sass/_base.scss +++ b/web/cobrands/sass/_base.scss @@ -11,6 +11,10 @@ $itemlist_item_background_hover: #e6e6e6 !default; $col_big_numbers: #ccc !default; $form-control-border-color: #aaaaaa !default; +$header-top-border-width: 0.25em !default; +$header-top-border: $header-top-border-width solid $primary !default; + +$container-max-width: 60em !default; @import "_mixins"; @import "_report_list"; @@ -458,8 +462,10 @@ ul.error { /*** LAYOUT ***/ // Padding creates page margins on mobile -.container{ - padding: 0 1em 1em; +.container { + margin: 0 auto; + padding: 0 1em; + max-width: $container-max-width; } // Use full width to reverse .container margins @@ -468,62 +474,63 @@ ul.error { } // #site-header creates grey bar in mobile -// .nav-wrapper-2 is used on desktop -#site-header{ - border-top: 0.25em solid $primary; - height: 3em; - @include linear-gradient(#000, #222 10%, #222 90%, #000); - .container { - min-height:4em; +#site-header { + @if ($header-top-border) { + border-top: $header-top-border; } + color: $nav_fg; + background-color: $map_nav_bg; + position: relative; } -#site-logo{ + +#site-logo { display: block; width: 175px; - height: 40px; - top: 0.4em; - #{$left}: 0.5em; - background: url($image-sprite) -3px -3px no-repeat; + height: 60px; + background: url($image-sprite) -8px 5px no-repeat; text-indent: -999999px; - position: absolute; - z-index:2; } // this is a skip to nav for mobile users only #nav-link { width: 3em; - height: 3em; // same height as #site-header + height: 3em; background: transparent url(../fixmystreet/images/#{$menu-image}.png) center center no-repeat; background-image: inline-image("../fixmystreet/images/#{$menu-image}.svg"), none; background-size: 22px 18px; - display: block; text-indent: -999999px; - position: absolute; #{$right}: 0; - top: 0.25em; // same as border-top on #site-header } -// A shortcut to the Reporting page, in the mobile header -#report-cta { +#nav-link, #report-cta { display: block; position: absolute; - top: (3em / 2); // half the height of #site-header + top: 50%; + transform: translateY(-50%); +} + +// A shortcut to the Reporting page, in the mobile header +#report-cta { #{$right}: 3.5em; - margin-top: -0.5em; font-size: 0.9em; line-height: 1em; border: 1px solid #666; - color: #fff; + color: $nav_fg; padding: 0.4em; border-radius: 0.3em; &:hover, &:focus { text-decoration: none; - background-color: #444; + background-color: $nav_fg_hover; } } +// The nav list has this sort of "full width" look, +// so we want to cancel out the margin from .container +#main-nav { + margin: 0 -1em; +} .nav-menu { @include list-reset-soft; @@ -545,21 +552,6 @@ ul.error { } } -//defines where the table caption is (login stuff on mob, nav menu on desktop) -.wrapper { - width:100%; - display:table; - // The 'caption' at large widths will be top, moving the menu up magically - caption-side: bottom; - // This is so absolutely positioned header stuff doesn't overlap banner... - position: relative; -} -// ...however position: relative stops the map being clickable (?), so better -// revert it there -body.mappage .wrapper { - position: static; -} - // #key-tools is the list that's pulled out an stick to the bottom of the page of desktop, below is mostly just aesthetic .shadow-wrap { margin: 0 -1em; diff --git a/web/cobrands/sass/_layout.scss b/web/cobrands/sass/_layout.scss index 2f5e263c4..f3ce64f37 100644 --- a/web/cobrands/sass/_layout.scss +++ b/web/cobrands/sass/_layout.scss @@ -2,19 +2,18 @@ $image-sprite: '../fixmystreet/images/sprite.png' !default; $layout_front_stats_color: $primary !default; -$mappage-header-height: 4em !default; +$mappage-header-height: 4em !default; // eg: might want this to equal outer height of #site-header on normal pages $mappage-sidebar-width: 29em; $mappage-sidebar-padding: 1em; $mappage-notes-width: 15em; $mappage-actions-width: 25em; $mappage-sidebar-width--medium: 24em; $mappage-actions-width--medium: 20em; +$header-top-border-width: 0.25em !default; +$header-top-border: $header-top-border-width solid $primary !default; .internal-link-fixed-header { display: block; - /* Roughly the height of .nav-wrapper-2 (mappage-header-height) plus the - * border-top on .nav-wrapper-2 (4px), plus the padding-top on - * .item-list__item (0.5em). */ @if unit($mappage-header-height) == 'em' { padding-top: $mappage-header-height + 1em; margin-top: -($mappage-header-height + 1em); @@ -49,80 +48,32 @@ h1 { // Page wrapper and header bits follow -.container{ - margin: 0 auto; - padding: 0em; - width: 60em; - position: relative; -} - -.wrapper{ - display: table; - caption-side: top; - width: 100%; - .table-cell { - display:table-cell; - } -} - -//pad the top of the wrapper to allow space for the menu to fit in -//when its positioned absolute below -.ie7 { - .wrapper { - padding-top:4em; - } -} - -.nav-wrapper { - display: table-caption; - .nav-wrapper-2 { - width: 100%; - min-height: 4em; - position: absolute; - border-top: 4px solid $primary; - border-width: 4px 0 0 0; - z-index: 2; - } +.container { + position: relative; } -//position absolute the menu as ie doesn't like display:table -.ie7 { - .nav-wrapper { - position: absolute; - top:0; - #{$left}: 0; - width:100%; - .nav-wrapper-2 { - // position static as well so we fix lots of the z-index issues - position:static; - } - } +// Body sometimes has a .top_banner at the start, which we don't want to +// cover up when we absolutely position the nav to the top of the body. +// So make .wrapper into a new positioning context for the nav. +.wrapper { + position: relative; } -// Resets a lot of the mobile styling. #site-header only used to help position logo on desktop -#site-header { - height: auto; - background: none; - border-top: 0px; - // margin-top: 4px; <-- With this we compensate for 4px of content due to - // .nav-wrapper-2's border-top, but misaligns e.g. FAQ page - .container { - position: static;//reset position so the nav links become clickable - } - - .ie7 & { - height: 3em; - // Without this, the #site-logo is unclickable. - // Something to do with broken z-index nesting in IE6-7. - z-index: 2; +#main-nav { + min-height: $mappage-header-height; // defaults to map header height; should be height of #site-header (eg: #site-logo + any vertical padding) + @include flex-container(); + @include flex-align(center); + float: $right; // we could use justify-content here, but float degrades better for non-flexbox browsers + margin: 0; + @if ($header-top-border) { + margin-top: $header-top-border-width * -1; // visually compensate for border on #site-header } } #site-logo { - top: 0.9em; - #{$left}: auto; - position: absolute; - z-index: 3; + // Bring #site-logo in front of .nav-wrapper (which has no z-index) so that it's clickable + position: relative; + z-index: 1; } #nav-link { @@ -135,11 +86,17 @@ h1 { display: none; } -#main-nav { - margin: 0 auto; - padding: 0; - width: 60em; +.nav-wrapper { + position: absolute; + @if ($header-top-border) { + top: $header-top-border-width; + } @else { + top: 0; + } + left: 0; + right: 0; } + .nav-menu { float: $right; li { @@ -176,46 +133,33 @@ h1 { } // .content Is the white box - -// The narrow single column box .content { - width: 27em; - margin: 3em 0.5em -1em; - padding: 1em 1em 3em; + margin: 1em 0 0 0; + padding: 1em; background: #fff; color: #222; } -.iel8 { - .content { - //take off margins so we line up properly - margin: 0 0.5em; - } -} - -.full-width { - margin: 0 ($mappage-sidebar-padding * -1); -} // map page - has fixed header and different styling body.mappage { - - .wrapper .table-cell, - .nav-wrapper { - // No need for the table-cell stuff now we're using absolute positioning - display: block; + .wrapper { + position: static; } .container { - width: auto; + max-width: none; position: static; } .content { - width: auto; padding: 0; margin: 0; } + .full-width { + margin: 0 ($mappage-sidebar-padding * -1); + } + #site-header { // With the exception of the #site-logo child, the rest of // #site-header gets entirely hidden behind .nav-wrapper-2 @@ -227,49 +171,14 @@ body.mappage { height: $mappage-header-height; } - #site-logo { - #{$left}: 12px; - // Also inherits... - // `top: 0.9em` - // `position: absolute` - // `z-index: 3` - // ...from the non-mappage version, above - } - - #main-nav { - width: auto; - margin-#{$right}: 1em; - } - - .nav-wrapper { - .nav-wrapper-2 { - position: absolute; - z-index: auto; - top: 0; - left: 0; - right: 0; - background: $map_nav_bg; - - // Watch out! If the nav links break onto two lines, the header will - // get taller, and overlap the top of #map_sidebar and #map_box. - // (But at least the nav links will be legible.) - min-height: $mappage-header-height; - - // Count the 4px border-top as part of the height (mappage-header-height) - -webkit-box-sizing: border-box; - -moz-box-sizing: border-box; - box-sizing: border-box; - } - } - - .nav-menu--main a, .nav-menu--main span { - padding: 1.4em 0.75em 1.35em; - } - - .nav-menu--main a.report-a-problem-btn { - padding: 0.5em; - margin: 0.9em 0.25em 0.85em; - } +// .nav-menu--main a, .nav-menu--main span { +// padding: 1.4em 0.75em 1.35em; +// } +// +// .nav-menu--main a.report-a-problem-btn { +// padding: 0.5em; +// margin: 0.9em 0.25em 0.85em; +// } .banner { p { @@ -278,23 +187,6 @@ body.mappage { } } -.ie7 { - body.mappage { - // The below is *mandatory* to allow pins/zoom to be clickable in IE6/7. Do NOT remove. - .container { - float: $left; - width: 27em; - margin-#{$left}: 0.7em; - } - .nav-wrapper{ - z-index:1; - .nav-wrapper-2 { - position:static; - } - } - } -} - // Want to cover over the blue sidebar body.mappage.admin { .full-width--top { @@ -341,7 +233,7 @@ body.mappage.admin { padding: $mappage-sidebar-padding; overflow: auto; // vertical scrollbar when list is taller than window background-color: #fff; // since no longer in the flow inside .content - box-shadow: 0 0 20px rgba(0, 0, 0, 0.2); + box-shadow: 0 10px 20px rgba(0, 0, 0, 0.2); .with-notes & { width: (($mappage-sidebar-width + $mappage-notes-width) - ($mappage-sidebar-padding * 2)); @@ -482,20 +374,10 @@ body.mappage.admin { } } - -// full width page -body.fullwidthpage { - .content { - width: auto; - } -} - body.twothirdswidthpage, body.fullwidthpage { .container { .content { - padding: 1em; - margin-bottom: 0em; footer { margin-top: 0em; margin-bottom: -1em; @@ -550,7 +432,7 @@ body.fullwidthpage { // two thirds width page, also has option for a sidebar which can be sticky or not body.twothirdswidthpage { - .container { + #site-header + .container { // This used to be on all containers, but there was a bug in Chrome, so now // it's just here so that the sidebar links are still clickable with their // negative z-index. @@ -585,16 +467,26 @@ body.twothirdswidthpage { } } } + + @media (max-width: 61em) { + // make twothirdswidthpage nearly as small as main + // .content: just enough to still fit the sidebar in + .content { + width:30em; + .sticky-sidebar { + #{$left}: 32em; + } + } + } } // Centre the login and password change pages, // but keep them narrow to match the report sidebar body.authpage { .content { + width: 27em; margin-#{$left}: auto; margin-#{$right}: auto; - margin-bottom: 0; - padding: 1em; // same as .twothirdswidthpage .content } } @@ -611,7 +503,6 @@ body.authpage { width:50%; } .full-width { - width:auto; margin:0; } } @@ -951,40 +842,6 @@ textarea.form-error { // Frontpage -body.frontpage { - .table-cell { - .content { - margin: 1em 0.5em 0; - } - } - .nav-wrapper-2{ - height:6em; - } - #site-header{ - height:8em; - } -} -//logo fix -.iel8 { - body.frontpage { - #site-logo { - position:relative; - width:60em; - margin:0 auto; - } - } -} -.ie7 { - body.frontpage { - #site-header { - height:4em; - } - #site-logo { - top:-1em; - } - } -} - // big yellow bit full screen width #front-main { color: $primary_text; @@ -1117,44 +974,3 @@ body.frontpage { float: $right; width: 25%; } - -/* MEDIA QUERIES */ -@media only screen and (min-width: 48em) and (max-width: 61em) { - .container { - width: 100%; - } - - // Remove central positioning of mainmenu and float right. - // Left padding is to ensure no overlap of the site-logo - // Background styling replicates header styling - - #main-nav { - width: auto; - float: $right; - padding-#{$left}: 180px; - } - - #mysoc-logo { - width: 16px; - // Just the mySociety circle logo - background-image: url(data:image/png;base64,iVBORw0KGgoAAAANSUhEUgAAABgAAAAYCAYAAADgdz34AAAAGXRFWHRTb2Z0d2FyZQBBZG9iZSBJbWFnZVJlYWR5ccllPAAABJ9JREFUeNqsVXlMHFUYf/Pe7O7M7E2Xw6UFWg5LQ1GTosa0IT00wYbGaKoltWnaRGNrjIptiUalXqlJU9RU0fSPHtqCR20pliBpQpAmxQgoLDeLQIEuh2WBndmDnZn3fMvRsqEGVv0mv3lzvPd97/u97wBgmXLUbHvOFZ/cJK1KbTtmiX4F/J+ySzBuDiakeSdWphA3RSAhTX3NaN2znLVwyQkMA/YbzAcwAAIFIBSYELjPYH6Zpf9CwrEMeGS1zhalh2zEBkIq2NCdkDvfyOxCRqHfnnpIWN9caK+5URDX2VJob8zfZsqJyIBKlVzweU7pIMIC3TFHIUAISkSx2GKE2uK8qNK0ODZbVsgKuwllnthp/S4rUZs0vx4th0dHcLp3FCv1VogEL8G9Jz2THx4Tx79+Yh23/oVs4zuBwKx3CuWQ5aHO5VYba7oDDjDj/TJEpSgWJytD0FAP5Dm6PD4ySZmSIUM0+C6DoGdUdkXkwULBC56HJtRJuxFpsu7nsll60CwHQY3D/8PRq1NFQZXg+TP8TwKphhc3GXPS4zWP9tySm07XSZe9MgkLEpCuX5uZZdqQBwEM1nsaStq87V3/xtjGTVzKB29bj0RZkK2s3PvTJ59PnWG2Rm3esTP2mW80gDUByq+CFffJoS+2tkrtTZEoz80R1pVfjrsBEGMGCvWAQ+DsV5MFcLstp0jFqsmH/cCn+qjLMGqLdcvrcOkIDpO9eYY9QMuYVRED1U8A8Sjg6Vz9AahH+mi84OhCzwISbAwT8fFoFr6EjlgvMAh2eDtP85AP7XwGHORAi9R6USVqRNrPlUqlIEgCSM8ApGMAtCBw/nvpLGqR2qoFxIMYbUwCJvh2tbv6oyt/lX8Z6fa7e+Thdsd0bdpa7QqvF49UlPmKXz0y/vEdHqyshaeDH2lNNoPGmhlUfQMuydmzHOX2VENMTKKQ0OMQu6Qxv8hqaLDMhWoY0VlxuXkPx24vZhhooa/elts1hddvfXsCE/yPyrftTdj15ME1n3J6FOsTlbFrZwbeqDrVdz4sD0Ji41fan019q1MF2Ego/wy9NIjDl5zHM1xeZ8e9lMenGuIPl2zoIIAxqjIGiO4cIeg/vrs+fbBDvBlWi3RISKF5YCQYz5XkGRchx+rT6djBpzyYaM3Zl0ftaqd++fGSt7m2NTqBT9dwyOgXldmaRWnRcgyflGnKWGTAr0hOTFQPjSQTHWciihCCJd9IM/fAxuTV712shTreHppreXz3of739+dMDFW1E0wUBjIsHQGt4gDT8BtsF52L+oE74BquH7l6kFIzoYE6agBJv49V5o/JI39G5750mNFydlWaAiHQOca45/Pfvdk17bp2ur+AM6CAYGKBlkdyQ+Xom4OdYve83rBy3Tj284U+T/N1njUmBVTf0Lh/qBdABDQ2+31Elu8mkaoAyAsxgHbIK5/1FnX9NlmVmGFa0/vHVL+zYaJloc5F/cAdGB4AIIT51FaBWFdRps94bIciB2ZaJ+T1wNf2azmYS8bOOndbCPcKhGX1g0BfqwPpzUS3Ki0ZanVeT13FuZHiQ4UkOK0stfZvAQYA/wr53nPx8cUAAAAASUVORK5CYII=); - background-size: auto; - } - - //Revert to mobile use of the .full-width class - .full-width{ - width: auto; - margin: 0em -1em; - } - - //make twothirdswidthpage nearly as small as main - //.content: just enough to still fit the sidebar in - body.twothirdswidthpage { - .content { - width:30em; - .sticky-sidebar { - #{$left}: 32em; - } - } - } -} diff --git a/web/cobrands/stevenage/_colours.scss b/web/cobrands/stevenage/_colours.scss index 62514b8f3..42718421a 100644 --- a/web/cobrands/stevenage/_colours.scss +++ b/web/cobrands/stevenage/_colours.scss @@ -9,10 +9,12 @@ $primary_text: #fff; $base_bg: #dddddb; $base_fg: #222; -$map_nav_bg: #6b6969; +$map_nav_bg: #eee; $nav_fg: #fff; $nav_fg_hover: #444; $col_click_map: #00BD08; $col_fixed_label: #00BD08; $col_fixed_label_dark: #4B8304; + +$container-max-width: 984px; // to match Stevenage header width diff --git a/web/cobrands/stevenage/base.scss b/web/cobrands/stevenage/base.scss index 2bccdc377..0eec2be99 100644 --- a/web/cobrands/stevenage/base.scss +++ b/web/cobrands/stevenage/base.scss @@ -8,39 +8,22 @@ $heading-font: 'PTSansCaptionRegular', "PT Sans Caption", Verdana, Arial, sans-s @import "../sass/base"; -#site-header { - background: #eee; - height: 4em; - margin-bottom: 1em; - - .container { - min-height: 0; - } -} - #site-logo { background: transparent; width: 82px; height: 45px; text-indent: 0; - top: 0.6em; - left: 0.9em; + padding: 0.5em 0; } #report-cta { border-color: #ccc; color: #000; - top: 2em; - &:hover, &:focus { background-color: #ddd; } } -#nav-link { - top: 0.75em; -} - @import "council_header"; @import "council_header_responsive"; diff --git a/web/cobrands/stevenage/layout.scss b/web/cobrands/stevenage/layout.scss index 55d0cb6b6..93ab23268 100644 --- a/web/cobrands/stevenage/layout.scss +++ b/web/cobrands/stevenage/layout.scss @@ -1,13 +1,23 @@ @import "colours"; @import "../sass/layout"; -// d523b431 -.nav-wrapper{ - .nav-wrapper-2{ +.wrapper { + display: table; + width: 100%; +} +.table-cell { + display: table-cell; +} +.table-caption { + display: table-caption; +} + +#site-header { + display: none; +} + +.nav-wrapper { position: static; - min-height: 0; - // e7c122a4 / 0b0a619b / - "Removed mySociety menu and positioned menu" - border-top: none; padding-top: 0.5em; padding-bottom: 0.25em; background-color: #6b6969; @@ -16,7 +26,12 @@ .iel8 & { background-color: #6b6969; } - } +} + +#main-nav { + min-height: 0; + margin-top: 0; + float: none; } // We use absolute positioning for the header on IE7, @@ -39,15 +54,6 @@ } } -#main-nav { - @include clearfix; - width: auto; - max-width: 984px; // match the Stevenage header width - float: none; - padding-left: 0; -} - - .nav-menu { float: none; } @@ -96,26 +102,12 @@ body.twothirdswidthpage { } // d523b431 -body.frontpage { - .nav-wrapper-2 { - height: auto; - } - #site-header { - height: auto; - } -} - -#site-header { - display: none; -} - -// d523b431 #front-main { background: #fff; color: #222; margin: 0 auto; margin-top: 1.5em; - max-width: 60em; + max-width: $container-max-width; } // Front page button colour @@ -133,52 +125,26 @@ body.frontpage { } } -@media only screen and (min-width: 48em) and (max-width: 61em) { - // f432a72d - moved sticky sidebars down a bit to account for the larger header - body.twothirdswidthpage { - .content { - .sticky-sidebar { - aside { - top: 19em; - } - } - } - } -} - body.mappage { #site-header { // We use the obscured #site-header to push the // content sidebar down beyond .nav-wrapper-2 - height: 3em; + height: 4em; display: block; + border-top: none; } - // Over-specific selector required to trump _layout.scss - .nav-wrapper .nav-wrapper-2 { + .nav-wrapper { position: absolute; top: 0; padding: 0; background: #fff url("http://www.stevenage.gov.uk/Images/headerBG.jpg") repeat-x bottom left; } - #site-logo { - position: absolute; - top: 0.5em; - } - + // Override the defaults, above #main-nav { float: right; - margin-right: 1em; - margin-top: 1em; - } - - // again, !important to override _layout.scss - .nav-menu--main a, - .nav-menu--main span, - .report-a-problem-btn { - padding: 0.5em 0.75em 0.4em 0.75em !important; - margin: 0 !important; + min-height: $mappage-header-height; } .nav-menu a { diff --git a/web/cobrands/warwickshire/_colours.scss b/web/cobrands/warwickshire/_colours.scss index 473d8cb03..8c2c41406 100644 --- a/web/cobrands/warwickshire/_colours.scss +++ b/web/cobrands/warwickshire/_colours.scss @@ -9,7 +9,7 @@ $primary_text: #222222; $base_bg: #F9FFF8; $base_fg: #000; -$map_nav_bg: $green; +$map_nav_bg: #fff; $nav_fg: #000; $nav_fg_hover: $primary; diff --git a/web/cobrands/warwickshire/base.scss b/web/cobrands/warwickshire/base.scss index 0dcd85f53..eeefc0d80 100644 --- a/web/cobrands/warwickshire/base.scss +++ b/web/cobrands/warwickshire/base.scss @@ -39,17 +39,10 @@ body { } #site-header { - height: auto; - background: white; - nav ul li, ul.nav li { list-style: none; margin-bottom: 0; } - - .container { - min-height: 0; - } } body.mappage > div.container { @@ -114,17 +107,9 @@ body.mappage > div.container { display: block; } -@media (max-width: 978px) { - .navbar-container { - padding: 0; - margin: 0; - } -} - -// Lifted from bootstrap-responsive.css, no idea why this -// media query has a different pixel size to the one above... @media (max-width: 979px) { .navbar-fixed-top .navbar-inner { - padding: 0 5px; + padding-top: 0; + padding-bottom: 0; } } diff --git a/web/cobrands/warwickshire/layout.scss b/web/cobrands/warwickshire/layout.scss index 177d5773e..0415d1f2a 100644 --- a/web/cobrands/warwickshire/layout.scss +++ b/web/cobrands/warwickshire/layout.scss @@ -3,21 +3,13 @@ $mappage-header-height: 41px + 100px + 37px; // .navbar-inverse + #top-header + @import "_colours"; @import "../sass/layout"; - #site-header { - position: relative; + border-top: none; .navbar { margin-bottom: 0; } } -// Needs to be within body.frontpage to override an existing rule in _layout.scss -body.frontpage { - #site-header { - height: auto; - } -} - body.mappage { footer, .footer-container, #footer-container, #footer-logos-bottom { display: none; @@ -27,10 +19,6 @@ body.mappage { display: none; } - .navbar-container { - width: auto !important; // 100% width for the FMS nav links container ONLY - } - #site-header .navbar { margin-top: 0; // remove space between FMS nav links and green header } @@ -41,10 +29,6 @@ body.mappage { } } -.content { - margin-bottom: 0; -} - body.twothirdswidthpage .content .sticky-sidebar { z-index: 0; @@ -57,59 +41,24 @@ body.twothirdswidthpage .content .sticky-sidebar { background: $base_bg; } +#top-header { + [class*="span"] { + margin-left: 2%; + } -// These bits are taken from Warwickshire's CSS to override default FMS styles -// The 'body.mappage .container' selector has been added to each so it takes precedent over -// default FMS style. - -// http://www.warwickshire.gov.uk/wp-content/themes/gamma/style.css -.container { - width: 940px; -} - -.navbar .container { - width: auto; -} - -.navbar-static-top .container, -.navbar-fixed-top .container, -.navbar-fixed-bottom .container, -body.mappage .container { - width: 940px; -} - -// http://www.warwickshire.gov.uk/wp-content/themes/gamma/bootstrap-responsive.css -@media (min-width: 1200px) { - .container, - .navbar-static-top .container, - .navbar-fixed-top .container, - .navbar-fixed-bottom .container, - body.mappage .container { - width: 1170px; + .span12 { + width: 98%; } -} -@media (min-width: 768px) and (max-width: 979px) { - .container, - .navbar-static-top .container, - .navbar-fixed-top .container, - .navbar-fixed-bottom .container, - body.mappage .container { - width: 724px; - } - } + .span3 { + width: 23%; + } -@media (max-width: 767px) { - .container, - body.mappage .container { - width: auto; - } + .span9 { + width: 73%; + } } -@media (max-width: 979px) { - .navbar .container, - body.mappage .container { - width: auto; - padding: 0; - } -} +#site-search.navbar-form input { + width: 16em; +}
\ No newline at end of file diff --git a/web/cobrands/whitelabel/_colours.scss b/web/cobrands/whitelabel/_colours.scss new file mode 100644 index 000000000..1392663d5 --- /dev/null +++ b/web/cobrands/whitelabel/_colours.scss @@ -0,0 +1,30 @@ +/* LAYOUT */ + +// If you are wanting a right-to-left layout, uncomment the following line. +// $direction: right; + +/* COLOURS */ + +$primary: gray; +$primary_b: #000000; +$primary_text: #222222; + +$base_bg: white; +$base_fg: #000; + +$map_nav_bg: #eee; +$nav_fg: #000; +$nav_fg_hover: $primary; + +// Colour used for front page 'how to report a problem' steps +$col_big_numbers: #ccc; + +$col_click_map: gray; + +$col_fixed_label: #00BD08; +$col_fixed_label_dark: #4B8304; + +$menu-image: 'menu-black'; + +$front_main_background: white; +// $header-top-border: false; diff --git a/web/cobrands/whitelabel/base.scss b/web/cobrands/whitelabel/base.scss new file mode 100644 index 000000000..4f953084e --- /dev/null +++ b/web/cobrands/whitelabel/base.scss @@ -0,0 +1,4 @@ +@import "../sass/h5bp"; +@import "./_colours"; +@import "../sass/mixins"; +@import "../sass/base"; diff --git a/web/cobrands/whitelabel/layout.scss b/web/cobrands/whitelabel/layout.scss new file mode 100644 index 000000000..9c58b471d --- /dev/null +++ b/web/cobrands/whitelabel/layout.scss @@ -0,0 +1,14 @@ +@import "_colours"; +@import "../sass/layout"; + +.big-green-banner { + text-transform: none; +} + +.nav-menu--main a.report-a-problem-btn { + color: white; +} + +#front-main { + background-color: $front_main_background; +} diff --git a/web/cobrands/zurich/_colours.scss b/web/cobrands/zurich/_colours.scss index d05be2102..3bdbd7447 100644 --- a/web/cobrands/zurich/_colours.scss +++ b/web/cobrands/zurich/_colours.scss @@ -10,7 +10,7 @@ $primary_text: #fff; $base_bg: #fff; $base_fg: #3c3c3c; -$map_nav_bg: #fff; +$map_nav_bg: #366AB6; /* Unused here, main-nav is mobile only */ $nav_fg: $primary_text; $nav_fg_hover: $primary/1.1; @@ -23,3 +23,4 @@ $col_fixed_label_dark: #4B8304; $mobile_menu_tab_bg_col: #FFFFFF; // the white border and tab on mobile site $mobile_header_blue: #366AB6; // close match to Zurich logo_portal.jpg +$header-top-border: solid 0.25em $mobile_menu_tab_bg_col; diff --git a/web/cobrands/zurich/_zurich.scss b/web/cobrands/zurich/_zurich.scss index 746da4ece..e4ff44220 100644 --- a/web/cobrands/zurich/_zurich.scss +++ b/web/cobrands/zurich/_zurich.scss @@ -8,12 +8,6 @@ a:hover { text-decoration: underline; } -// mySociety addition for box shadow on front page with static image -body.frontpage #zurich-footer-wrapper { - padding: 1px 0; - @include box-shadow(0 -6px 6px -5px #000); -} - #zurich-footer { margin: 2em auto; // mySociety font-size: 67.5%; @@ -22,7 +16,7 @@ body.frontpage #zurich-footer-wrapper { background-image: url(bg_mainnav_portal.png); background-repeat: repeat-x; border: 1px solid #d8d8d8; - width: 953px; + max-width: 953px; padding: 3px 10px; margin-bottom: 24px; height: 1.5em diff --git a/web/cobrands/zurich/base.scss b/web/cobrands/zurich/base.scss index 0308f5b43..3b13a93cf 100644 --- a/web/cobrands/zurich/base.scss +++ b/web/cobrands/zurich/base.scss @@ -50,17 +50,14 @@ } } -#site-header { - background: $mobile_header_blue; - border-top: 4px solid $mobile_menu_tab_bg_col; - height: 48px; +#site-logo-text { + display: none; } #site-logo { background: url(logo_portal.jpg) 0px -24px no-repeat; width: 200px; height: 48px; - left:0; - top:4px; + margin-left: -1em; } #front-howto #front_stats, #front-main #postcodeForm { diff --git a/web/cobrands/zurich/layout.scss b/web/cobrands/zurich/layout.scss index fc61aabbd..a5e6735d7 100644 --- a/web/cobrands/zurich/layout.scss +++ b/web/cobrands/zurich/layout.scss @@ -11,62 +11,40 @@ $mappage-header-height: 7em; color: #3c3c3c; } -// Front page content needs a shadow. -// (Purely decorative: No need for border fallback for IE8) -body.frontpage .content { - @include box-shadow(0 0 6px 1px #000); -} -// The header on a map page needs a shadow too -body.mappage .nav-wrapper .nav-wrapper-2 { - @include box-shadow(0 0 6px 1px #000); - z-index: 2; // One more than #zurich-main-nav so it's on top -} -// Except on admin pages where there's an admin nav directly underneath it -body.mappage.admin .nav-wrapper-2 { - @include box-shadow(none); -} - // Fix positioning of images in the admin body.admin .admin-nav-wrapper { z-index: 1; } // Different header and logo -#site-header .container { - height: 99px; - background: url(logo_portal.x.jpg) top left repeat-x; -} - -body.frontpage #site-logo, #site-logo { - width: 415px; - height: 83px; - background: url(logo_portal.jpg) top left no-repeat; - top: 0; - left: auto; // base set this to 0 -} +#site-header { + background-color: #fff; + border-top: none; + margin-bottom: 2em; -// Static map on front page -body.frontpage { - .table-cell { - background-position: 50% 117px; - background-repeat: no-repeat; - background-image: url(mapbg-1024.jpg); - @media all and (min-width: 1025px) { - background-image: url(mapbg-1600.jpg); - } - .content { - margin: 2em auto; // Spacing around front content on top of static map - } + .container { + background: #fff url(logo_portal.x.jpg) top left repeat-x; + padding: 0; } +} +body.mappage { #site-header { - height: 117px; - background-color: #fff; + // The header on a map page needs a shadow too @include box-shadow(0 0 6px 1px #000); + z-index: 2; // One more than #zurich-main-nav so it's on top + .container { + margin: 0 1em; // White padding left/right + } + } + // Except on admin pages where there's an admin nav directly underneath it + &.admin #site-header { + @include box-shadow(none); } } #site-logo-text { + display: inline; position: absolute; top: 0; z-index: 3; @@ -76,43 +54,73 @@ body.frontpage { font-size: 85%; } body.mappage #site-logo-text { - position: fixed; + padding-left: 0; +} + +#site-logo { + width: 415px; + height: 83px; + background-position: top left; + margin-left: 0; +} + +body.mappage #site-logo { + margin-left: 0; } .nav-wrapper { - .nav-wrapper-2 { - border-top: none; - } - .nav-wrapper-3 { - height: 6em; // rough figure, enough to show the blue band, but less than .nav-wrapper-2 height - padding-top: 18px; + top: 18px; +} + +#main-nav { + margin-top: 0; + display: block; // Stop the default 'flex' + body.mappage & { + // As header gets a z-index above for the shadow + // Otherwise this would be invisible underneath + z-index: 2; + position: relative; } } -body.mappage { - .nav-wrapper { - .nav-wrapper-2 { - border-top: none; - padding: 0 10px; - box-sizing: border-box; +// Static map on front page +body.frontpage { + // Front page content needs a shadow. + // (Purely decorative: No need for border fallback for IE8) + .content { + @include box-shadow(0 0 6px 1px #000); + } + + .table-cell { + background-position: 50% 117px; + background-repeat: no-repeat; + background-image: url(mapbg-1024.jpg); + @media all and (min-width: 1025px) { + background-image: url(mapbg-1600.jpg); + } + .content { + margin: 2em auto; // Spacing around front content on top of static map } } - /* Ugh :( But first wrapper is the caption, second is the fixed (so first we - can do padding on) so a third seems necessary for the background then. */ - .nav-wrapper-3 { - background: #fff url(logo_portal.x.jpg) top left repeat-x; + + #site-header { + @include box-shadow(0 0 6px 1px #000); + height: 117px; } - .content { - margin-top: 1em; + + #zurich-footer-wrapper { + padding: 1px 0; + @include box-shadow(0 -6px 6px -5px #000); + position: relative; } } // Logged in notice in footer (appearing in header) -.nav-wrapper-2 p:first-child { +.nav-wrapper p:first-child { font-weight: bold; margin-top: 0.75em; } -.nav-wrapper-2 p { +.nav-wrapper p { line-height: 1.2; color: white; clear: right; |