[East Herts] Update template design.

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
 }