aboutsummaryrefslogtreecommitdiffstats
path: root/web
diff options
context:
space:
mode:
Diffstat (limited to 'web')
-rw-r--r--web/cobrands/eastherts/_colours.scss18
-rw-r--r--web/cobrands/eastherts/base.scss97
-rw-r--r--web/cobrands/eastherts/layout.scss314
3 files changed, 224 insertions, 205 deletions
diff --git a/web/cobrands/eastherts/_colours.scss b/web/cobrands/eastherts/_colours.scss
index dc5531627..2854c01bd 100644
--- a/web/cobrands/eastherts/_colours.scss
+++ b/web/cobrands/eastherts/_colours.scss
@@ -1,22 +1,18 @@
/* COLOURS */
$eh_dark_grey: #555;
-$eh_med_grey: #dadcda;
-$eh_dark_green: #007900;
-$eh_green: #2c992c;
-$eh_purple: #609;
-$eh_blue: #4e96e8;
+$eh_green: #00843d;
$primary: $eh_green;
$primary_b: #000000;
-$primary_text: #222222;
+$primary_text: #fff;
$base_bg: white;
$base_fg: $eh_dark_grey;
-$map_nav_bg: $eh_blue;
-$nav_fg: #000;
-$nav_fg_hover: $primary;
+$map_nav_bg: #000;
+$nav_fg: #fff;
+$nav_fg_hover: $eh_green;
$header-top-border: false;
@@ -29,6 +25,8 @@ $col_click_map_dark: darken($eh_green, 10%);
$col_fixed_label: #00BD08;
$col_fixed_label_dark: #4B8304;
-$body-font: Verdana,Arial,Helvetica,Geneva,sans-serif;
+$body-font: 'Open Sans', sans-serif;
$meta-font: $body-font;
$heading-font: $body-font;
+
+$mappage-header-height: 178px;
diff --git a/web/cobrands/eastherts/base.scss b/web/cobrands/eastherts/base.scss
index 83350bdfa..aa654c48c 100644
--- a/web/cobrands/eastherts/base.scss
+++ b/web/cobrands/eastherts/base.scss
@@ -1,49 +1,78 @@
@import "../sass/h5bp";
@import "./_colours";
@import "../sass/mixins";
-
@import "../sass/base";
-.header__eh_nav, .header__eh_top_nav, .nav-menu li.user-meta--nav {
- display: none;
+#site-header {
+ background-image: url('https://www.eastherts.gov.uk/media/29966/Website_background/image/panorama-lomoesque-compressor.jpg');
+ background-repeat: no-repeat;
+ background-size: cover;
}
#site-logo {
- background: url(img/toplogo.gif);
- background-size: 51px 48px;
- height: 48px;
- width: 51px;
-}
-
-h1, h2, h3, h4 {
- color: $eh_green;
+ margin: 0 auto;
+ background: url('https://www.eastherts.gov.uk/image/29967/site_logo/original.png');
+ width: 150px;
+ height: 138px;
}
-footer {
- background-color: $eh_med_grey;
- background-image: url(img/footer.gif);
- background-repeat: repeat-x;
- background-position: top;
-
- text-align: center;
- padding: 1em;
- margin: 0;
+// Seemed easiest to have a little bar above the header
- p {
- margin: 0;
- }
+.toputils {
+ background-color: #000;
+ position: relative;
+ height: 40px;
+}
- ul {
- margin: 0;
- li {
- list-style: none;
+// Footer styles from their stylesheet
- a, a:visited, a:hover, a:active {
- color: $eh_dark_grey;
- }
- a:hover {
- text-decoration: underline;
- }
+.footer {
+ padding: 2em 0.75em 1em;
+ color: #fff;
+ background-color: #000;
+ .container {
+ padding: 0;
+ margin: 0 auto;
+ }
+}
+.footer__logo {
+ display: block;
+ margin: 0 auto 1em;
+}
+.footer__socialmedia {
+ text-align: center;
+ a {
+ text-decoration: none;
+ }
+}
+.footer__navigation {
+ overflow: hidden;
+ margin-bottom: 1em;
+ & > ul {
+ margin: 0;
+ padding: 0;
+ li {
+ list-style: none;
+ }
}
- }
+}
+.footer__navitem {
+ margin-bottom: 0;
+}
+a.footer__navlink {
+ color: #fff;
+ display: block;
+ padding: 0.5em 0;
+ text-align: center;
+}
+.footer__copyright {
+ text-align: center;
+ clear: both;
+}
+.footer__goss > a {
+ display: block;
+ text-align: center;
+ font-size: 14px;
+ color: #ccc;
+ clear: both;
}
diff --git a/web/cobrands/eastherts/layout.scss b/web/cobrands/eastherts/layout.scss
index a11f7ef72..cb3a616bf 100644
--- a/web/cobrands/eastherts/layout.scss
+++ b/web/cobrands/eastherts/layout.scss
@@ -1,198 +1,190 @@
@import "_colours";
@import "../sass/layout";
-#site-header {
- background: $base_bg url(img/header_mid.jpg) 0 0 repeat-x;
+#site-logo {
+ margin: 0; // Left aligned again
}
-body.fullwidthpage, body.twothirdswidthpage, body.authpage, body.frontpage {
- $logo-height: 90px;
- $eh-nav-height: 32px;
- $fms-nav-height: 43px;
+// Put the nav underneath the East Herts nav
- #site-header {
- height: $logo-height + $eh-nav-height + $fms-nav-height;
-
- .container:first-child {
- height: $logo-height;
- }
-
- .header__eh_nav {
- display: block;
- background-color: $eh_dark_green;
- background-image: url(img/welcome_mid.gif);
- background-repeat: repeat-x;
- background-position: 0 0;
- height: $eh-nav-height;
-
- ul, span {
- font-size: 1.1em;
- line-height: $eh-nav-height;
- color: white;
- }
-
- ul {
- float: right;
- text-align: right;
- list-style: none;
- margin: 0;
- padding: 0;
-
- li {
- display: inline;
- margin: 0;
- padding: 0;
-
- a {
- color: white;
- padding: 0 0.5em 0 0.6em;
- }
- }
- }
- }
-
- .header__eh_top_nav {
- display: block;
- position: relative;
- z-index: 4;
-
- ul {
- float: right;
- margin: 0;
- list-style: none;
-
- li {
- display: inline;
- list-style: none;
- }
- }
-
- ul#toputilnav {
- width: 100%;
- text-align: right;
-
- li {
- margin: 0;
- padding: 0;
-
- a {
- padding: 0 0.5em 0 0.25em;
- font-size: 0.9em;
- color: black;
- }
-
- &:after {
- content: "";
- border-right: solid 1px $eh_dark_grey;
- }
-
- // For some reason the spacing isn't even on the 'cookies' link,
- // so this sorts it out.
- &:first-child {
- margin-right: 0.25em;
- };
-
- &:last-child {
- a {
- padding-right: 0;
- }
- &:after {
- border-right: none;
- }
- }
- }
- }
-
- ul#bannerimages {
- margin-top: 0.25em;
- }
- }
- }
-
- #site-logo {
- $img-height: 184px;
- $img-width: 399px;
+#main-nav {
+ display: block;
position: absolute;
- top: $logo-height - $img-height;
- width: $img-width;
- height: $img-height;
- background-image: url(img/toplogo.jpg);
- background-repeat: no-repeat;
- background-position: bottom;
- background-color: $eh_blue;
- background-size: $img-width $img-height;
- }
-
- #main-nav {
- position: absolute;
- top: $logo-height + $eh-nav-height;
+ top: 124px; // 80px + 40px + 4px gap
+ left: 0;
width: 100%;
float: none;
min-height: 0;
- }
+}
- .nav-menu {
- float: none;
- width: 100%;
- text-align: center;
+// And make it look the same
- li {
- float: none;
- display: inline-block;
+.nav-menu {
+ background-color: $eh_dark_grey;
+ margin-right: calc(40px - -0.75em);
+ span {
+ color: #fff;
+ background-color: $eh_green;
}
+}
- .nav-menu__item--privacy {
- display: none;
+.nav-menu--main {
+ a, span {
+ padding: 0.5em;
+ margin: 0.25em;
+ @include border-radius(0.25em);
+ }
+ a.report-a-problem-btn {
+ background-color: transparent;
+ padding: 0.5em;
+ margin: 0.25em;
}
- }
}
+// Front page, light background bar
+
#front-main {
- background-color: #f6f6f6;
+ background-color: #f6f6f6;
}
.content, #front-main {
- color: $eh_dark_grey;
+ color: $eh_dark_grey;
}
+// Extra height needed
body.twothirdswidthpage .content .sticky-sidebar aside {
- top: 11em;
- box-shadow: none;
+ top: 16em;
}
body.mappage {
- #site-logo {
- top: 8px;
- }
-
- .nav-menu--main {
- a {
- color: white;
+ #site-header {
+ top: 40px;
+ height: 138px;
}
- span {
- color: $eh_dark_grey;
+}
+
+// Header bits from their stylesheet, tweaked for simpler display
+
+.toputils__right {
+ float: right;
+}
+.toputils__nav {
+ float: left;
+ padding: 0 0.25em;
+ li {
+ float: left;
+ list-style: none;
}
- }
+}
+.toputils__navlist {
+ margin: 0;
+ padding: 0;
+}
+a.toputils__navitem {
+ display: block;
+ color: #fff;
+ line-height: 2.5rem;
+ padding: 0 0.5em;
+ font-size: 0.875rem;
}
+.mainmenu {
+ background-color: #00843d;
+}
-footer ul {
- margin-bottom: 0.5em;
- li {
- display: inline-block;
+.mainmenu {
+ position:absolute;
+ display: block;
+ right: calc(40px - -0.75em);
+ top: 20px;
+}
+
+a.mainmenu__item {
+ font-size: 1.125rem;
+ line-height: normal;
+ display: block;
+ padding: 1em;
+ color: #fff
+}
+
+.mainmenu__list {
margin: 0;
padding: 0;
+}
- &:after {
- content: "";
- border-right: solid 1px $eh_dark_grey;
- }
- &:last-child:after {
- border-right: none;
- }
+.mainmenu__list > li {
+ list-style: none;
+ float: left;
+ position: relative
+}
- a {
- padding: 0 0.5em 0 0.25em;
- }
- }
+.searchcontrol {
+ background-color: #fff;
+ font-size: .875rem;
+ position:absolute;
+ display: block;
+ top: 0;
+ right: 0;
+ width: 40px;
+ height: 40px;
+ overflow: hidden;
+ margin-top: 30px;
+ background-color: transparent
+}
+
+.searchcontrol__expandtoggle {
+ display:block;
+ width: 40px;
+ height: 40px;
+ background-image: url("https://www.eastherts.gov.uk/themes/cruise/images/searchbutton-transparent.png");
+ position: absolute;
+ right: 0;
+ text-indent: -99999px;
+}
+
+// Footer bits from their stylesheet, tweaked for smaller widths
+
+.footer__left {
+ float: left;
+ width: 266px;
+}
+.footer__right {
+ float: right;
+ width: 450px;
+}
+
+.footer__logo {
+ margin:0 0 1em 0
+}
+
+
+.footer__socialmedia {
+ text-align:left
+}
+
+.footer__socialmedia img {
+ margin: 0 1em 1em 0
+}
+
+a.footer__navlink {
+ padding:0;
+ padding-right: .5em;
+ margin-right: .5em;
+ border-right: 1px solid #fff;
+ text-align: left
+}
+
+.footer__navitem:last-child a.footer__navlink {
+ border-right: 0
+}
+
+.footer__navitem {
+ float:left
+}
+
+.footer__copyright {
+ text-align:left
+}
+.footer__goss > a {
+ text-align:left
}
generated by cgit v1.2.3 (git 2.25.1) at 2025-04-26 14:03:16 +0000