diff options
Diffstat (limited to 'web')
31 files changed, 382 insertions, 565 deletions
diff --git a/web/cobrands/angus/_colours.scss b/web/cobrands/angus/_colours.scss index 564c78348..fd59b3ef9 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; diff --git a/web/cobrands/angus/base.scss b/web/cobrands/angus/base.scss index 87e121266..f03f97a13 100644 --- a/web/cobrands/angus/base.scss +++ b/web/cobrands/angus/base.scss @@ -5,9 +5,7 @@ @import "../sass/base"; -body.frontpage #site-logo, -#site-logo -{ +#site-logo { background: url("/cobrands/angus/third_party/css_img/angus-logo-header.png") 0 50% no-repeat; background-size: contain; width: 82px; @@ -15,7 +13,6 @@ body.frontpage #site-logo, } #site-header { - border-top: none; background: $angus_green; form.form__search { @@ -38,7 +35,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..0e3e3201e 100644 --- a/web/cobrands/angus/layout.scss +++ b/web/cobrands/angus/layout.scss @@ -4,20 +4,11 @@ $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; + margin: 0 1em; } #site-header { @@ -25,15 +16,10 @@ body.twothirdswidthpage #site-logo 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%; @@ -124,12 +110,6 @@ body.twothirdswidthpage #site-logo } } -body.fullwidthpage, body.twothirdswidthpage, body.authpage, body.frontpage { - #site-header { - height: 91px; - } -} - #front-main { background: transparent; @@ -150,7 +130,6 @@ body.fullwidthpage, body.twothirdswidthpage, body.authpage { .content { background: $angus_light_grey; background-color: $angus_light_grey; - } } } @@ -169,7 +148,7 @@ body.twothirdswidthpage .content .sticky-sidebar { left: 43em; aside { - top: 15em; + top: 198px; } } @@ -289,9 +268,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 +316,9 @@ body.mappage { } #site-logo { - height: 54px; + height: 58px; width: 111px; - top: 7px; - left: 7px; + padding: 0; } #site-header { diff --git a/web/cobrands/bristol/_colours.scss b/web/cobrands/bristol/_colours.scss index 82837b976..97d57391d 100644 --- a/web/cobrands/bristol/_colours.scss +++ b/web/cobrands/bristol/_colours.scss @@ -26,6 +26,8 @@ $map_nav_bg: $g1; $nav_fg: $b4; $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 17dbc0b8c..0b8d6f621 100644 --- a/web/cobrands/bristol/base.scss +++ b/web/cobrands/bristol/base.scss @@ -23,7 +23,6 @@ #site-header { border-bottom: solid 5px $bcc_red; - border-top: none; background: $g1; // Can't use background-color as it's ignored in favour of existing background } diff --git a/web/cobrands/bristol/layout.scss b/web/cobrands/bristol/layout.scss index 3b9dfa1b6..9049e2da0 100644 --- a/web/cobrands/bristol/layout.scss +++ b/web/cobrands/bristol/layout.scss @@ -3,14 +3,12 @@ @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 +18,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 +66,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 +91,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..9cdf8bdb3 100644 --- a/web/cobrands/bromley/_colours.scss +++ b/web/cobrands/bromley/_colours.scss @@ -20,3 +20,5 @@ $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; diff --git a/web/cobrands/bromley/base.scss b/web/cobrands/bromley/base.scss index 5d38b0d9b..8e3d01f7b 100644 --- a/web/cobrands/bromley/base.scss +++ b/web/cobrands/bromley/base.scss @@ -192,6 +192,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; @@ -201,7 +202,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; } } diff --git a/web/cobrands/bromley/layout.scss b/web/cobrands/bromley/layout.scss index 2e23d1755..cfb5981a9 100644 --- a/web/cobrands/bromley/layout.scss +++ b/web/cobrands/bromley/layout.scss @@ -3,31 +3,23 @@ // 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; + .container { + max-width: none; } - // 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 +27,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; @@ -52,6 +40,12 @@ body.mappage { 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 .nav-menu--main { background-color: $bromley_blue; @@ -116,29 +110,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..6266db6a3 100644 --- a/web/cobrands/eastherts/_colours.scss +++ b/web/cobrands/eastherts/_colours.scss @@ -18,6 +18,8 @@ $map_nav_bg: $eh_green; $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; diff --git a/web/cobrands/eastherts/base.scss b/web/cobrands/eastherts/base.scss index ee1d78ffa..d9401a47d 100644 --- a/web/cobrands/eastherts/base.scss +++ b/web/cobrands/eastherts/base.scss @@ -9,7 +9,6 @@ } #site-header { - border-top: none; background: $eh_blue; } diff --git a/web/cobrands/eastherts/layout.scss b/web/cobrands/eastherts/layout.scss index 9623f33de..eeb5cf0dc 100644 --- a/web/cobrands/eastherts/layout.scss +++ b/web/cobrands/eastherts/layout.scss @@ -1,16 +1,10 @@ @import "_colours"; @import "../sass/layout"; -#site-header { +#site-header, +body.mappage #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: $eh_blue url(img/header_mid.jpg) 0 0 repeat-x; } body.fullwidthpage, body.twothirdswidthpage, body.authpage, body.frontpage { @@ -22,10 +16,6 @@ body.fullwidthpage, body.twothirdswidthpage, body.authpage, body.frontpage { background-color: $base_bg; height: $logo-height + $eh-nav-height + $fms-nav-height; - .container { - height: auto; - } - .container:first-child { height: $logo-height; } @@ -125,6 +115,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 +126,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 +164,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 +199,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 205cccd8d..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; 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 172bab1bd..52c4b50da 100644 --- a/web/cobrands/fixamingata/base.scss +++ b/web/cobrands/fixamingata/base.scss @@ -12,13 +12,13 @@ #site-header { @include linear-gradient(#000, #ccc 10%, #ccc 90%, #000); + padding: 0.5em 0; } #site-logo { width: 185px; height: 38px; - margin-top: 10px; - background: url('images/fms-logo.png') no-repeat; + background: url('images/fms-logo.png') 0 50% no-repeat; } #report-cta { diff --git a/web/cobrands/fixamingata/layout.scss b/web/cobrands/fixamingata/layout.scss index 555e2641b..e8697a963 100644 --- a/web/cobrands/fixamingata/layout.scss +++ b/web/cobrands/fixamingata/layout.scss @@ -67,10 +67,8 @@ h3, h4, @import "_colours"; @import "../sass/layout"; -.nav-wrapper { - .nav-wrapper-2 { - border-top: 0; - } +#site-header { + padding: 1em 0; } body.frontpage { @@ -79,6 +77,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 +131,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/layout.scss b/web/cobrands/fixmystreet.com/layout.scss index 4cd4b357f..e34a6712e 100644 --- a/web/cobrands/fixmystreet.com/layout.scss +++ b/web/cobrands/fixmystreet.com/layout.scss @@ -78,18 +78,14 @@ h3, h4, } } -.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 { + 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); } } diff --git a/web/cobrands/greenwich/_colours.scss b/web/cobrands/greenwich/_colours.scss index d2dc1c3ed..21a8dbbf9 100644 --- a/web/cobrands/greenwich/_colours.scss +++ b/web/cobrands/greenwich/_colours.scss @@ -17,6 +17,8 @@ $map_nav_bg: #fff; $nav_fg: #fff; $nav_fg_hover: transparent; +$header-top-border: false; + $col_big_numbers: $primary; $col_click_map: $greenwich_red; diff --git a/web/cobrands/greenwich/layout.scss b/web/cobrands/greenwich/layout.scss index db06c9424..7093f0138 100644 --- a/web/cobrands/greenwich/layout.scss +++ b/web/cobrands/greenwich/layout.scss @@ -43,11 +43,10 @@ body.twothirdswidthpage #site-logo } } -body.frontpage #site-header, #site-header { - height: auto; - +#site-header, +body.frontpage #site-header { .container { - min-height: 0; + position: static; } .container:first-child { @@ -68,10 +67,6 @@ body.frontpage { } } -.nav-wrapper .nav-wrapper-2 { - border-top: none; -} - .nav-menu--main { display: none; } @@ -150,8 +145,15 @@ body.frontpage { } body.mappage { - #site-header .container { - min-height: 68px; + #site-header { + background: url("/cobrands/greenwich/mastWave.gif") 100% 0 no-repeat; + background-color: $base_bg; + background-size: contain; + + .container { + min-height: 0; + background: transparent; + } } .main-menu-container { @@ -171,16 +173,18 @@ 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; + #main-nav { + width: auto; + } + + .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..f72106469 100644 --- a/web/cobrands/hart/_colours.scss +++ b/web/cobrands/hart/_colours.scss @@ -14,6 +14,9 @@ $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; diff --git a/web/cobrands/hart/base.scss b/web/cobrands/hart/base.scss index b60a22bd3..8d903dc3d 100644 --- a/web/cobrands/hart/base.scss +++ b/web/cobrands/hart/base.scss @@ -26,8 +26,6 @@ h1.main { #site-header { background: $primary; - height: 57px; - .mobile-header-nav { height: 56px; @@ -49,6 +47,15 @@ h1.main { } } +#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 { text-transform: none; } 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..ecda2cc1f 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,114 @@ body.twothirdswidthpage .content { } } } + +.mobile-header-nav { + display: none; +} + +#site-header { + background-color: $hart_primary; + 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 +// The !importants are because we do not want this to be reset on a map page as +// it otherwise would be. + +.container--hart { + box-shadow: 0 0 20px rgba(0,0,0,0.2); // shadow to add contrast with map + width: 100% !important; + position: absolute !important; +} + +#main-nav { + min-height: 0; + float: none; + max-width: 60em; // To have it line up at big widths + margin: 11em auto 0; // To push it under heade + background-color: #fff; +} + +body.mappage { + #site-logo { + // XXX Rather than re-overriding this, and margin-right below, should + // the 1em padding be on the header container instead of site-logo/ + // main-nav, or something? + margin-left: 2.25em; + } + #main-nav { + max-width: none; // containers are full width on map page, overriding 60em above + margin-right: 0; + } +} + +.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/_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 637b2c139..033dcb0ff 100644 --- a/web/cobrands/oxfordshire/base.scss +++ b/web/cobrands/oxfordshire/base.scss @@ -20,6 +20,8 @@ #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..a1bee844e 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 { diff --git a/web/cobrands/sass/_layout.scss b/web/cobrands/sass/_layout.scss index 47980ca21..9a6b00139 100644 --- a/web/cobrands/sass/_layout.scss +++ b/web/cobrands/sass/_layout.scss @@ -450,7 +450,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. diff --git a/web/cobrands/stevenage/layout.scss b/web/cobrands/stevenage/layout.scss index 55d0cb6b6..fc4033875 100644 --- a/web/cobrands/stevenage/layout.scss +++ b/web/cobrands/stevenage/layout.scss @@ -1,22 +1,42 @@ @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; @include linear-gradient(#6b6969, #555454); + .container { + width: auto; + max-width: 984px; // match the Stevenage header width + } + .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 +59,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,20 +107,6 @@ 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; @@ -133,52 +130,30 @@ 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; + .container { + max-width: none; // Overriding 984px default above + } } - #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/layout.scss b/web/cobrands/warwickshire/layout.scss index 177d5773e..be8a2e591 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; @@ -78,6 +62,12 @@ body.mappage .container { width: 940px; } +body.mappage { + .navbar-container { + width: auto; // 100% width for the FMS nav links container ONLY + } +} + // http://www.warwickshire.gov.uk/wp-content/themes/gamma/bootstrap-responsive.css @media (min-width: 1200px) { .container, diff --git a/web/cobrands/zurich/_zurich.scss b/web/cobrands/zurich/_zurich.scss index 746da4ece..b79803d5e 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%; diff --git a/web/cobrands/zurich/layout.scss b/web/cobrands/zurich/layout.scss index 42d340f1f..d2c4f71b5 100644 --- a/web/cobrands/zurich/layout.scss +++ b/web/cobrands/zurich/layout.scss @@ -11,46 +11,83 @@ $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; +#site-header { + border-top: none; + margin-bottom: 2em; + .container { + background: #fff url(logo_portal.x.jpg) top left repeat-x; + } +} + +body.mappage { + #site-header { + // 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; + padding-top: 83px; + padding-left: 10px; + color: #585858; + font-size: 85%; +} +body.mappage #site-logo-text { + padding-left: 0; } -body.frontpage #site-logo, #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 + background-position: top left; + margin-left: 0; +} + +body.mappage #site-logo { + margin-left: 0; +} + +.nav-wrapper { + 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; + } } // 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; @@ -64,59 +101,23 @@ body.frontpage { } #site-header { - height: 117px; - background-color: #fff; @include box-shadow(0 0 6px 1px #000); + height: 117px; } -} - -#site-logo-text { - position: absolute; - top: 0; - z-index: 3; - padding-top: 83px; - padding-left: 10px; - color: #585858; - font-size: 85%; -} -body.mappage #site-logo-text { - position: fixed; -} - -.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; - } -} -body.mappage { - .nav-wrapper { - .nav-wrapper-2 { - border-top: none; - padding: 0 10px; - box-sizing: border-box; - } - } - /* 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; - } - .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; |