diff options
-rw-r--r-- | templates/web/eastherts/footer_extra.html | 29 | ||||
-rw-r--r-- | templates/web/eastherts/header_site.html | 10 | ||||
-rw-r--r-- | web/cobrands/eastherts/_colours.scss | 20 | ||||
-rw-r--r-- | web/cobrands/eastherts/base.scss | 159 | ||||
-rw-r--r-- | web/cobrands/eastherts/layout.scss | 150 | ||||
-rw-r--r-- | web/cobrands/eastherts/logo.png | bin | 0 -> 3170 bytes | |||
-rw-r--r-- | web/cobrands/eastherts/logo.svg | 1 | ||||
-rw-r--r-- | web/cobrands/eastherts/menu.png | bin | 0 -> 158 bytes | |||
-rw-r--r-- | web/cobrands/eastherts/menu.svg | 1 | ||||
-rw-r--r-- | web/cobrands/eastherts/search.png | bin | 0 -> 246 bytes | |||
-rw-r--r-- | web/cobrands/eastherts/search.svg | 1 |
11 files changed, 366 insertions, 5 deletions
diff --git a/templates/web/eastherts/footer_extra.html b/templates/web/eastherts/footer_extra.html new file mode 100644 index 000000000..3722ea99f --- /dev/null +++ b/templates/web/eastherts/footer_extra.html @@ -0,0 +1,29 @@ +<footer class="eh-footer"> + <div class="container"> + + <p class="eh-footer__copyright">© East Herts District Council</p> + + <nav role="navigation" aria-labelledby="block-eastherts-footer-menu" class="eh-footer__nav"> + <h2 class="visuallyhidden" id="block-eastherts-footer-menu">Footer menu</h2> + <ul> + <li> + <a href="https://www.eastherts.gov.uk/accessibility">Accessibility</a> + </li> + <li> + <a href="https://www.eastherts.gov.uk/contactus">Contact Us</a> + </li> + <li> + <a href="https://www.eastherts.gov.uk/information-requests/data-protection">Data Protection</a> + </li> + <li> + <a href="https://www.eastherts.gov.uk/information-requests/data-protection/privacy-cookies">Privacy & Cookies</a> + </li> + </ul> + </nav> + + <a href="https://www.eastherts.gov.uk" title="Home" rel="home" class="eh-footer__logo"> + <img src="https://www.eastherts.gov.uk/themes/custom/eastherts/logo.svg" alt="Home"> + </a> + + </div> +</footer> diff --git a/templates/web/eastherts/header_site.html b/templates/web/eastherts/header_site.html new file mode 100644 index 000000000..2271dc259 --- /dev/null +++ b/templates/web/eastherts/header_site.html @@ -0,0 +1,10 @@ +<header class="eh-header"> + <div class="container"> + <a href="https://www.eastherts.gov.uk/" class="eh-header__logo">East Herts District Council</a> + <a href="#main-nav" class="eh-header__nav-link">Main Navigation</a> + <form class="eh-header__form" action="https://www.eastherts.gov.uk/search/content" method="get"> + <input class="eh-header__search" type="text" placeholder="Search and discover help, advice and information" name="search" size="30" maxlength="128"> + <button class="eh-header__button" type="submit" value="Search"><i></i> <span>Search</span></button> + </form> + </div> +</header> diff --git a/web/cobrands/eastherts/_colours.scss b/web/cobrands/eastherts/_colours.scss index 7372a42dc..84ef39bd1 100644 --- a/web/cobrands/eastherts/_colours.scss +++ b/web/cobrands/eastherts/_colours.scss @@ -1,11 +1,15 @@ /* COLOURS */ -$eh_dark_grey: #555; -$eh_green: #00843d; +$eh_green: #006633; +$eh_yellow: #fedd33; +$eh_blue: #007FA3; +$eh_light_grey: #EBEBEB; +$eh_mid_grey: #4A4A4A; +$eh_dark_grey: #262626; -$primary: $eh_green; -$primary_b: #000000; -$primary_text: #fff; +$primary: $eh_light_grey; +$primary_b: #000; +$primary_text: #000; $base_bg: white; $base_fg: $eh_dark_grey; @@ -25,3 +29,9 @@ $col_click_map_dark: darken($eh_green, 10%); $body-font: 'Open Sans', sans-serif; $meta-font: $body-font; $heading-font: $body-font; + +$container-max-width: 70.5em; // match 1128px row width in East Herts template + +$eh-header-height: 84px + 16px + 16px; +$eh-nav-height: 48px; +$mappage-header-height: $eh-header-height + $eh-nav-height; diff --git a/web/cobrands/eastherts/base.scss b/web/cobrands/eastherts/base.scss index 4f953084e..fb013e11b 100644 --- a/web/cobrands/eastherts/base.scss +++ b/web/cobrands/eastherts/base.scss @@ -2,3 +2,162 @@ @import "./_colours"; @import "../sass/mixins"; @import "../sass/base"; + +.eh-header { + background-color: $eh_green; + color: #fff; + padding: 1em 0; + position: relative; +} + +a:focus, +input:focus, +button:focus { + outline: 3px dotted red; +} + +.eh-header__logo, +.eh-footer__logo { + display: block; + overflow: hidden; + width: 91px; + height: 0; + padding-top: 84px; + @include svg-background-image('/cobrands/eastherts/logo'); + background-size: 91px 84px; +} + +.eh-header__form { + @include flex-container(); + margin-top: 1em; +} + +.eh-header__search { + font-family: inherit; + border-radius: 0.25em 0 0 0.25em; + color: #495057; + border: none; + + // override input[type="text"] { width: 100% } in core + &[type="text"] { + width: 80%; + font-size: 1.2em; + line-height: 1.4em; + padding: 6px 12px; + } +} + +.eh-header__button { + background-color: $eh_yellow; + color: $eh_mid_grey; + border-radius: 0 0.25em 0.25em 0; + padding: 6px 12px; + border: none; + + width: 20%; + + @include flex-container(); + @include flex-align(center); + @include justify-content(center); + text-align: center; + + i { + display: inline-block; + width: 16px; + height: 16px; + @include svg-background-image('/cobrands/eastherts/search'); + background-size: 16px 16px; + margin: 0 auto; + } + + span { + // .visuallyhidden + clip: rect(0 0 0 0); + height: 1px; + width: 1px; + margin: -1px; + overflow: hidden; + padding: 0; + position: absolute; + } +} + +.eh-header__nav-link { + position: absolute; + right: 1em; + top: 40px; // vertically centre alongside logo + display: block; + overflow: hidden; + width: 40px; + height: 0; + padding-top: 40px; + @include svg-background-image('/cobrands/eastherts/menu'); + background-position: center center; + background-repeat: no-repeat; +} + +.eh-footer { + background-color: $eh_dark_grey; + color: #fff; + padding: 2em 0; + margin: 0; + box-shadow: 0 1000px 0 1000px $eh_dark_grey; + + ul { + overflow: auto; + margin: 1em 0; + } + + li { + list-style: none; + float: left; + + &:after { + content: '|'; + display: inline-block; + margin-left: 0.3em; + margin-right: 0.3em; + } + + &:last-child:after { + display: none; + } + } + + a { + color: inherit; + } +} + +.nav-menu { + a, span, a:visited { + font-size: 1em; + background-color: #3B3B3B; + color: #fff; + border-bottom: 1px solid $eh_dark_grey; + } +} + +#front-main { + text-align: left; + color: inherit; + + h1 { + font-size: 1.75em; + } + + #postcodeForm { + margin-top: 1em; + } +} + +a#geolocate_link { + color: $eh_green; +} + +.map-fullscreen { + .eh-header, + .eh-footer { + display: none; + } +} diff --git a/web/cobrands/eastherts/layout.scss b/web/cobrands/eastherts/layout.scss index 69e455aa5..d54a6d968 100644 --- a/web/cobrands/eastherts/layout.scss +++ b/web/cobrands/eastherts/layout.scss @@ -1,2 +1,152 @@ @import "_colours"; @import "../sass/layout"; + +// give .eh-header a set height (like 8em) and a thick grey border-bottom + +// give .nav-wrapper { top: 6em } and remove all the { float: right } +// so that it sits in front of the grey border-bottom from .eh-header + +.eh-header { + @include box-sizing(border-box); + height: $eh-header-height + $eh-nav-height; + border-bottom: $eh-nav-height solid $eh_light_grey; +} + +.eh-header__form { + width: 70%; + max-width: 40em; + position: absolute; + top: 0.5em; // Note: this is relative to .container, not .eh-header! + right: 1em; + + body.mappage & { + top: 1.5em; // Relative to .eh-header again. + } +} + +.eh-header__button { + font-family: inherit; + + i { + margin: 0 0.5em 0 0; + } + + span { + clip: auto; + height: auto; + width: auto; + margin: 0; + overflow: visible; + position: static; + + font-size: 1.1em; + } +} + +.nav-wrapper { + top: $eh-header-height; +} + +#main-nav { + min-height: 0; + height: auto; + display: block; + float: none; + margin: 0 -0.75em; // compensate for 0.75em padding on nav links +} + +.nav-menu { + float: none; + + a, span, a:visited { + color: $eh_green; + font-size: 1em; + } + + span, + span.report-a-problem-btn { + cursor: default; + } + + a:hover, + a:focus { + color: #000; + background: transparent; + text-decoration: underline; + } + + a.report-a-problem-btn, + span.report-a-problem-btn { + padding: 0.75em; + margin: 0; + color: $eh_green; + background: transparent; + border-radius: 0; + + &:hover, + &:focus { + color: #000; + background: transparent; + text-decoration: underline; + } + } +} + +.eh-header__nav-link { + display: none; +} + +.eh-footer__logo { + position: absolute; + top: 0; + right: 1em; +} + +#front-main { + background-color: white; + text-align: left; + padding-top: 40px; + color: inherit; + + #postcodeForm { + margin-top: 0; + + div { + margin: 0; + } + } + + a#geolocate_link { + color: $eh_green; + } + + h1 { + font-size: 2.5em; + } + + h1 + p { + font-size: 1.5em; + line-height: 1.25em; + max-width: 640px; + } +} + +body.mappage { + .eh-footer { + display: none; + } +} + +body.frontpage { + .content { + padding: 2em 0; + margin: 2em 0 0 0; + border-top: 2px solid $eh_light_grey; + } +} + +body.twothirdswidthpage { + .content .sticky-sidebar aside { + top: 12em; // up from 7em, because of the taller header + } +} diff --git a/web/cobrands/eastherts/logo.png b/web/cobrands/eastherts/logo.png Binary files differnew file mode 100644 index 000000000..322450389 --- /dev/null +++ b/web/cobrands/eastherts/logo.png diff --git a/web/cobrands/eastherts/logo.svg b/web/cobrands/eastherts/logo.svg new file mode 100644 index 000000000..0511aa957 --- /dev/null +++ b/web/cobrands/eastherts/logo.svg @@ -0,0 +1 @@ +<svg xmlns="http://www.w3.org/2000/svg" width="91" height="84"><g fill="#FFF"><path d="M57.7 22.7h2.5l.7-2.8 4.7-1.3-1 4h3l-.8 3.2h-3.2l-1 3.6c-.2 1-.4 1.7-.4 2.3-.1.9.4 1.4 1.3 1.4.5 0 1-.2 1.4-.3l-.6 3-2.8.2c-2.2 0-4-1.1-3.7-3.9 0-.6.1-1.3.5-2.6l1-3.7h-2.4l.8-3.1zM35.7 33c-1 0-1.5-.7-1.4-1.3 0-1.2 1.6-2 3.7-1.9l1.2.1c-.5 1.8-1.7 3-3.5 3M39 22.5c-1.9 0-3.2.3-4.4.6l-1 3.4c1.6-.8 2.6-1 4.2-1 1.4 0 2.3.7 2.2 1.7v.5l-2.4-.1c-3.8 0-7 1.5-7.2 4.7-.2 2.5 1.2 3.8 4 3.8 1.7 0 3.3-.6 4.3-2.1l-.2 1.8h3.6c.7-4 2-6.8 2-8.9.3-3.2-2.1-4.4-5.1-4.4m13.1 0c-3 0-6.4 1.2-6.6 4.3-.3 4.2 5 3.3 4.9 5.1 0 1.1-1.8 1.2-2.5 1.2-1.2 0-2.4-.3-3.5-.7l-.8 3.1c1.4.3 3.2.6 5 .6 3.3 0 6-1.7 6.2-4.9.2-3.2-5.3-3.1-5.2-4.6 0-.9 1.2-1.1 2.1-1.1 1.3 0 2.4.2 3.5.7V26l.8-2.8c-1.5-.5-2.9-.7-3.9-.7M20.6 18.3h12.2l-.8 3.3h-7.8l-1 3.6h7.4l-.9 3.3h-7.4l-1 3.9h8l-.8 3.3H15.9zM5 38.1h4.6L8 44.8h5.4L15 38h4.5L15 55.5h-4.6l2-7.4H7l-2 7.4H.5zM27.4 47.8H22a3.5 3.5 0 0 1 3.4-2.6c1.6 0 2 1.2 2 2.6m-1.5-5.6c-5.7 0-7.9 4.7-8 7.7-.3 3.3 1.9 6 6 6 1.3 0 2.9-.3 4.4-.7L29 52a10 10 0 0 1-4 .8c-2.6 0-3.2-1-3.2-2.5h9l.5-2.4c.2-4-2.2-5.7-5.5-5.7m33.7 0c-3 0-6.5 1.3-6.7 4.3-.2 4.3 5 3.3 5 5.2-.1 1-1.9 1.1-2.6 1.1-1.2 0-2.4-.2-3.4-.7l-.8 3.1c1.3.4 3.2.6 5 .6 3.2 0 6-1.6 6.2-4.8.2-3.3-5.3-3.2-5.2-4.7 0-.8 1.1-1 2-1 1.4 0 2.5.2 3.5.6l.1-.1.7-2.9c-1.4-.4-2.8-.7-3.8-.7m-18.1 0c-1.8 0-3.3 1.5-4.1 3l.6-2.7h-4.1l-.7 3.4-2.6 9.6H35l1.6-6C37 47.6 38.2 46 40 46c.5 0 1 0 1.5.2l1-3.8-1.1-.2m7.6 3.5h3.1l.8-3.2h-3l1-4-4.6 1.2-.8 2.8h-2.2l-.9 3.2h2.2l-1 3.6a13 13 0 0 0-.5 2.7c-.2 2.7 1.5 3.8 3.8 3.8.8 0 1.6 0 2.5-.2l.8-3c-.5.2-1 .4-1.4.4-.8 0-1.4-.6-1.3-1.5 0-.6.2-1.2.5-2.2l1-3.6zM25 59.5c-.5-.3-1-.3-1.5-.3-1.7 0-2.4 1.1-2.5 2.3 0 1 .6 1.6 1.6 1.6.6 0 1.1-.1 1.6-.3l-.3 1.3-1.6.2c-2 0-3-1.1-3-2.8.2-2 1.7-3.5 4-3.5 1.2 0 1.8.2 2.2.3l-.5 1.2zm3.3 1.1c-.8 0-1.3.9-1.3 1.6 0 .6.2 1 .7 1 .8 0 1.3-.6 1.4-1.6 0-.5-.2-1-.8-1m-.7 3.7c-1.7 0-2.4-1-2.3-2 .1-1.7 1.4-2.8 3.2-2.8 1.5 0 2.3 1 2.2 2-.1 2-1.4 2.8-3.1 2.8m8.8-1.3l-.3 1.2h-1.4l.1-.7c-.5.5-1 .8-1.8.8-1 0-1.4-.7-1.3-1.6l.1-1 .6-2H34l-.5 2-.2.8c0 .2.2.5.6.5.7 0 1.1-.6 1.3-1.3l.6-2h1.5l-.9 3.3zm2.1-2.2l.3-1.2h1.5l-.2.8c.5-.5 1-.9 1.9-.9.9 0 1.3.7 1.3 1.6l-.2 1-.6 2.1H41l.6-2.1.1-.7c0-.3-.1-.6-.6-.6-.6 0-1 .6-1.2 1.3l-.6 2.1h-1.6l1-3.4zm9.2 3.3c-.4.2-.8.2-1.4.2-1.3 0-2.1-1-2-2 0-1.6 1.3-2.8 3.1-2.8.4 0 1 .1 1.4.3l-.4 1.1-1-.2c-.8 0-1.4.5-1.5 1.5 0 .5.4 1 1 1l1-.2-.2 1.1zm3-6.4h1.6L52 59h-1.6l.3-1.2zm-.5 2h1.6l-1.3 4.5H49l1.3-4.6zM54.1 57.6h1.6L54 64.2h-1.6zM77.2 25.6c.3-.2.6-.3 1.5-.3h4.2c.4 0 1.4.1 1.8.6 1 1.3 1 4 1.2 4.4.1.2-.3.7-.4 1-.2.2-.5.7 0 1.2s.5.9.5 1.3.1 1.2 1 1c.8-.2 2.5-.3 2.4.5 0 .9.8 1.8 1 2 .3.3 1.2 1 0 1.4-1.2.4-1.5 1-1.5 1.4 0 .4 0 1.4.7 1.6.8.3.4 1.2-.3 1.7-.6.6-3.7 3.9-5 4.3-1.4.4-3.3 1-4 1-.8-.2-1.8-.2-2.1.2-.4.3-.3 1-1 .8-.8-.2-1 .2-1.3.8-.3.6 0 2-.8 2.2L73 53c-.6.1-.9.2-1-.3-.9.3-1.6.8-2-.3-.3-1-.4-2.6-.9-3-.5-.3-2-1.5-1.5-2.2.5-.8.3-.6 0-1.1-.4-.5-1.1-1-.9-1.7.3-.7.4-.9 0-1.4-.3-.5-.2-1-.2-2 0-.8-.4-1.9.3-2.1.7-.3.4-.7.3-1.4-.2-.7-1.1-2.2-.7-3.1.4-1 .8-2 1.5-2s.8-.3.8-1c0-.5.5-.8 1.2-1.2.6-.4 2-2 2.7-1.6.6.4.8-.3.6-1-.1-.5-.2-.5.3-1l1.3-1.3c.2-.3.7-.4 1 0 .2 0 1 .7 1.4.3"/><path d="M78.9 48.4v.5c.1.3.2 1.1 0 1.3h.1c-.5.3-2.9 3-2.2 4.4.6 1.2.1 2.6 0 3.2-.3.5-1.4 1.2-2.1 1-1-.2-4.6-.4-5.5.3a29 29 0 0 0-4.2 3.7c-.5.8-1.6 2-3 1.7a3 3 0 0 0-3 .7l-2.6 2.1v.1l-.9.9c-.6.7-.7.8-1.2.7-1.8-.4-2.9.2-4 1.2l-.4.3c-1.1 1-2.2 1.8-2.8 1.3a11 11 0 0 1-2.2-2.2l-.2-.3c-.2-.2-.3-.3-.1-1.1 0-.9.1-2-1.1-2.8a.8.8 0 0 0-.9 1.5c.2.1.4.2.3 1-.2 1.4 0 1.9.5 2.5l.1.2c.5.6 1 1.3 2.6 2.6 1.7 1.4 3.7-.4 4.9-1.4l.4-.3c1-.9 1.6-1 2.6-.9 1.5.3 2.1-.4 2.8-1.2l.7-.8s1.9-1.4 2.7-2.2c.3-.4.8-.5 1.3-.3 1.8.5 3.6-.3 5-2.4a30.4 30.4 0 0 1 3.6-3.2c.5-.2 3.1-.3 4.2 0 1.5.3 3.5-.7 4-2.1.4-1 .8-2.8 0-4.5v.1c0-.4 1.2-2 1.6-2.3h-.1c1.2-.6 1-2 .8-3v-.5a.8.8 0 0 0-1.7.2m-14.2-31l.8-.5c.7 0 1.9.4 2.4 1.1l.3.4c.6 1 1.6 2.5 3.3 2.4l2.3-.3 2.5-.3c.6 0 1.2-.2 1.7-.4l.8-.3a.2.2 0 0 1-.2 0l.7 1c.8 1.4 1.6 2.6 2.2 4 .4.9 0 2.2-.3 3.5a.8.8 0 1 0 1.7.4c.4-1.6.7-3.2.2-4.5-.7-1.5-1.5-2.9-2.3-4.2l-.7-1.1c-.7-1.2-2-.7-2.8-.4-.3.2-.7.3-1 .3l-2.8.3-2.1.3c-.7 0-1.3-.9-1.8-1.6l-.4-.5a4.9 4.9 0 0 0-3.9-1.8c-.5 0-1 .3-1.6.7-.4.3-.4.9-.2 1.2.3.4.9.5 1.2.2"/><path d="M18.3 14.7a38.6 38.6 0 0 1 57 2.2c.8-.3 2-.6 3-.7A42.2 42.2 0 0 0 45.7.6c-20.8 0-38 15.3-41 35.2h2.7c1.3-8 5-15.3 10.8-21.1M83.8 50a39 39 0 0 1-73.6 7.7h-3a41.5 41.5 0 0 0 68 13.8 41.2 41.2 0 0 0 11.7-23.1 6 6 0 0 1-3 1.6"/></g></svg>
\ No newline at end of file diff --git a/web/cobrands/eastherts/menu.png b/web/cobrands/eastherts/menu.png Binary files differnew file mode 100644 index 000000000..6cac0eaba --- /dev/null +++ b/web/cobrands/eastherts/menu.png diff --git a/web/cobrands/eastherts/menu.svg b/web/cobrands/eastherts/menu.svg new file mode 100644 index 000000000..62f1e9d82 --- /dev/null +++ b/web/cobrands/eastherts/menu.svg @@ -0,0 +1 @@ +<svg xmlns="http://www.w3.org/2000/svg" width="40" height="35"><path fill="#FFF" d="M1.4 6.4h37.2c.8 0 1.4-.6 1.4-1.4V1.4c0-.8-.6-1.4-1.4-1.4H1.4C.6 0 0 .6 0 1.4V5c0 .8.6 1.4 1.4 1.4zm0 14.3h37.2c.8 0 1.4-.6 1.4-1.4v-3.6c0-.8-.6-1.4-1.4-1.4H1.4c-.8 0-1.4.6-1.4 1.4v3.6c0 .8.6 1.4 1.4 1.4zm0 14.3h37.2c.8 0 1.4-.6 1.4-1.4V30c0-.8-.6-1.4-1.4-1.4H1.4c-.8 0-1.4.6-1.4 1.4v3.6c0 .8.6 1.4 1.4 1.4z"/></svg>
\ No newline at end of file diff --git a/web/cobrands/eastherts/search.png b/web/cobrands/eastherts/search.png Binary files differnew file mode 100644 index 000000000..77131b755 --- /dev/null +++ b/web/cobrands/eastherts/search.png diff --git a/web/cobrands/eastherts/search.svg b/web/cobrands/eastherts/search.svg new file mode 100644 index 000000000..d0b2b05c5 --- /dev/null +++ b/web/cobrands/eastherts/search.svg @@ -0,0 +1 @@ +<svg xmlns="http://www.w3.org/2000/svg" width="16" height="16"><path fill="#4A4A4A" d="M15.8 13.8l-3.1-3a.7.7 0 0 0-.6-.3h-.5a6.5 6.5 0 1 0-1.1 1.1v.5c0 .2 0 .4.2.6l3.1 3c.3.4.8.4 1 0l1-.8c.3-.3.3-.8 0-1zm-9.3-3.3a4 4 0 1 1 0-8 4 4 0 0 1 0 8z"/></svg>
\ No newline at end of file |