[East Herts] Update template design.

7 files changed, 294 insertions, 323 deletions

diff --git a/templates/web/eastherts/footer.html b/templates/web/eastherts/footer.html
index bb6d0ed23..d057b9f7b 100644
--- a/templates/web/eastherts/footer.html
+++ b/templates/web/eastherts/footer.html
@@ -10,17 +10,42 @@
     </div> <!-- .wrapper -->
 
     [% IF pagefooter %]
-    <footer role="contentinfo">
-        <ul>
-            <li><a href="http://www.eastherts.gov.uk/article/10/A-to-Z">A to Z</a></li>
-            <li><a href="http://www.eastherts.gov.uk/article/3347/Accessibility" accesskey="0">Accessibility</a></li>
-            <li><a href="http://www.eastherts.gov.uk/article/3351/Disclaimer">Disclaimer</a></li>
-            <li><a href="http://www.eastherts.gov.uk/article/3352/Copyright-2016">Copyright 2016</a></li>
-            <li><a href="http://www.eastherts.gov.uk/privacy">Privacy, Data Protection and Fraud Prevention</a></li>
-            <li class="last"><a href="http://www.eastherts.gov.uk/article/6653/Neighbouring-Councils">Neighbouring Councils</a></li>
-        </ul>
-        <p>© 2016 East Herts Council , <strong>Telephone:</strong> +44 (0)1279 655261 <strong>Bishop's Stortford Office:</strong>- Charringtons House, Bishop's Stortford, Herts, CM23 2EN. <strong>Hertford Office:</strong>- Wallfields, Pegs Lane, Hertford, SG13 8EQ.</p>
-    </footer>
+	<div class="footer clearfix">
+		<div class="container">
+			<div class="footer__left"><img src="https://www.eastherts.gov.uk/image/29958/EastHertsLogo-Footer/original.png" width="250" height="75" alt="EastHertsLogo-Footer" title="EastHertsLogo-Footer" class="footer__logo" />
+				<div class="footer__socialmedia">
+				
+				<a href="https://www.facebook.com" rel="external" title="Facebook"><img src="https://www.eastherts.gov.uk/image/29956/Facebook/original.png" width="40" height="40" alt="Facebook" title="Facebook" />
+				</a>
+				
+				<a href="https://www.twitter.com" rel="external" title="Twitter"><img src="https://www.eastherts.gov.uk/image/29959/Twitter/original.png" width="40" height="40" alt="Twitter" title="Twitter" />
+				</a><img src="https://www.eastherts.gov.uk/image/29957/RSS/original.png" width="40" height="40" alt="RSS" title="RSS" />
+				</div>
+			</div>
+			<div class="footer__right">
+		<div class="footer__navigation">
+				<ul>
+							<li class="footer__navitem"><a href="https://www.eastherts.gov.uk/article/34224/Site-map" class="footer__navlink">Site map</a>
+							</li>
+							<li class="footer__navitem"><a href="/article/34226/Terms--Conditions" class="footer__navlink">Terms & Conditions</a>
+							</li>
+							<li class="footer__navitem"><a href="https://www.eastherts.gov.uk/article/34230/Privacy--Cookies" class="footer__navlink">Privacy & Cookies</a>
+							</li>
+							<li class="footer__navitem"><a href="https://www.eastherts.gov.uk/article/34378/Privacy-Data-Protection-and-Fraud-Prevention" class="footer__navlink">Privacy, Data Protection and Fraud Prevention</a>
+							</li>
+							<li class="footer__navitem"><a href="https://www.eastherts.gov.uk/article/34376/Comments-Compliments-and-Complaints" class="footer__navlink" accesskey="7">Comments, Compliments and Complaints</a>
+							</li>
+				</ul>
+		</div>
+				<div class="footer__copyright">
+					<p>&copy; 2017 mySociety</p>
+				</div>
+				<div class="footer__goss">
+					<a href="https://www.fixmystreet.com/about/council">Powered by FixMyStreet</a>
+				</div>
+			</div>
+		</div>
+	</div>
     [% END %]
 
     [% INCLUDE 'common_footer_tags.html' %]
diff --git a/templates/web/eastherts/header_extra.html b/templates/web/eastherts/header_extra.html
new file mode 100644
index 000000000..6a1d1bdc1
--- /dev/null
+++ b/templates/web/eastherts/header_extra.html
@@ -0,0 +1,2 @@
+<link href="https://fonts.googleapis.com/css?family=Open+Sans:400,600,700" rel="stylesheet" type="text/css">
+
diff --git a/templates/web/eastherts/header_logo.html b/templates/web/eastherts/header_logo.html
deleted file mode 100644
index 868edc6cd..000000000
--- a/templates/web/eastherts/header_logo.html
+++ /dev/null
@@ -1,25 +0,0 @@
-<a href="[% c.cobrand.base_url IF admin %]/" id="site-logo">[% site_name %]</a>
-<a href="[% c.cobrand.base_url IF admin %]/" id="report-cta" title="[%- loc('Report a problem') -%]">[%- loc('Report') -%]</a>
-
-<div class="header__eh_top_nav">
-    <ul id="toputilnav" class="internal">
-        <li><a href="http://www.eastherts.gov.uk/">Home</a>
-        </li>
-        <li><a href="http://www.eastherts.gov.uk/cookies">Cookies on our site</a></li>
-        [%# <li><a href="http://www.eastherts.gov.uk/article/5/Log-in">Log in</a></li> %]
-        <li><a href="http://www.eastherts.gov.uk/search" accesskey="4">Search the site</a></li>
-        <li><a href="http://www.eastherts.gov.uk/article/42/Site-Map" accesskey="3">Site Map</a></li>
-        <li class="last"><a href="http://www.eastherts.gov.uk/article/6715/Translation-Services">Translation Services</a></li>
-    </ul>
-    <ul id="bannerimages">
-        <li><a href="http://www.eastherts.gov.uk/payments"><img src="[% version('/cobrands/eastherts/img/paymentsd1.gif') %]" width="110" height="50" alt="Payments"></a>
-        </li>
-        <li><a href="http://www.eastherts.gov.uk/report"><img src="[% version('/cobrands/eastherts/img/reportd1.gif') %]" width="110" height="50" alt="Report"></a>
-        </li>
-        <li><a href="http://www.eastherts.gov.uk/contactus"><img src="[% version('/cobrands/eastherts/img/contactusd1.gif') %]" width="110" height="50" alt="Contact Us"></a>
-        </li>
-        <li>
-        <img src="[% version('/cobrands/eastherts/img/consultationd1.gif') %]" width="110" height="50" alt="Consultations">
-        </li>
-    </ul>
-</div>
\ No newline at end of file
diff --git a/templates/web/eastherts/header_site.html b/templates/web/eastherts/header_site.html
index 30f692573..5f1f4965e 100644
--- a/templates/web/eastherts/header_site.html
+++ b/templates/web/eastherts/header_site.html
@@ -1,87 +1,37 @@
-<header id="site-header" role="banner">
+<div class="toputils">
     <div class="container">
-        [% INCLUDE 'header_logo.html' %]
+        <a href="[% c.cobrand.base_url IF admin %]/" id="report-cta" title="[%- loc('Report a problem') -%]">[%- loc('Report') -%]</a>
         <a href="#main-nav" id="nav-link">Main Navigation</a>
-    </div>
-    <div class="header__eh_nav">
-        <div class="container">
-            <ul>
-                <li>
-                    <a href="http://www.eastherts.gov.uk/article/11/A">A - Z Index - A</a>
-                </li>
-                <li>
-                    <a href="http://www.eastherts.gov.uk/article/12/B">B</a>
-                </li>
-                <li>
-                    <a href="http://www.eastherts.gov.uk/article/13/C">C</a>
-                </li>
-                <li>
-                    <a href="http://www.eastherts.gov.uk/article/14/D">D</a>
-                </li>
-                <li>
-                    <a href="http://www.eastherts.gov.uk/article/15/E">E</a>
-                </li>
-                <li>
-                    <a href="http://www.eastherts.gov.uk/article/16/F">F</a>
-                </li>
-                <li>
-                    <a href="http://www.eastherts.gov.uk/article/17/G">G</a>
-                </li>
-                <li>
-                    <a href="http://www.eastherts.gov.uk/article/18/H">H</a>
-                </li>
-                <li>
-                    <a href="http://www.eastherts.gov.uk/article/29071/I">I</a>
-                </li>
-                <li>
-                    <a href="http://www.eastherts.gov.uk/article/20/J">J</a>
-                </li>
-                <li>
-                    <a href="http://www.eastherts.gov.uk/article/21/K">K</a>
-                </li>
-                <li>
-                    <a href="http://www.eastherts.gov.uk/article/22/L">L</a>
-                </li>
-                <li>
-                    <a href="http://www.eastherts.gov.uk/article/23/M">M</a>
-                </li>
-                <li>
-                    <a href="http://www.eastherts.gov.uk/article/24/N">N</a>
-                </li>
-                <li>
-                    <a href="http://www.eastherts.gov.uk/article/25/O">O</a>
-                </li>
-                <li>
-                    <a href="http://www.eastherts.gov.uk/article/26/P">P</a>
-                </li>
-                <li>
-                    <a href="http://www.eastherts.gov.uk/article/28/R">R</a>
-                </li>
-                <li>
-                    <a href="http://www.eastherts.gov.uk/article/29/S">S</a>
-                </li>
-                <li>
-                    <a href="http://www.eastherts.gov.uk/article/30/T">T</a>
-                </li>
-                <li>
-                    <a href="http://www.eastherts.gov.uk/article/31/U">U</a>
-                </li>
-                <li>
-                    <a href="http://www.eastherts.gov.uk/article/32/V">V</a>
-                </li>
-                <li>
-                    <a href="http://www.eastherts.gov.uk/article/33/W">W</a>
-                </li>
-                <li>
-                    <a href="http://www.eastherts.gov.uk/article/34/X">X</a>
-                </li>
-                <li>
-                    <a href="http://www.eastherts.gov.uk/article/35/Y">Y</a>
-                </li>
-                <li>
-                    <a href="http://www.eastherts.gov.uk/article/36/Z">Z</a>
-                </li>
-            </ul>
+        <!-- <a href="https://www.eastherts.gov.uk/article/34246/Search">Search</a> -->
+
+        <div class="toputils__right desk-only">
+            <div class="toputils__nav">
+                    <ul class="toputils__navlist">
+                                <li><a href="/article/34210/Accessibility" class="toputils__navitem">Accessibility</a>
+                                </li>
+                                <li><a href="/article/34212/A-Z-of-Services" class="toputils__navitem">A-Z of Services</a>
+                                </li>
+                                <li><a href="/article/34377/Contact-us" class="toputils__navitem">Contact us</a>
+                                </li>
+                    </ul>
+            </div>
         </div>
     </div>
+</div>
+
+<header id="site-header" role="banner">
+    <div class="container">
+        <a href="[% c.cobrand.base_url IF admin %]/" id="site-logo">[% site_name %]</a>
+		<div class="mainmenu desk-only">
+			<ul class="mainmenu__list">
+				<li class="footer__navitem"><a href="http://www.eastherts.gov.uk/residents" class="mainmenu__item">Residents</a></li>
+				<li class="footer__navitem"><a href="http://www.eastherts.gov.uk/business" class="mainmenu__item">Business</a></li>
+				<li class="footer__navitem"><a href="http://www.eastherts.gov.uk/council" class="mainmenu__item">Your Council</a></li>
+				<li class="footer__navitem"><a href="http://www.eastherts.gov.uk/news" class="mainmenu__item">News</a></li>
+			</ul>
+		</div>
+		<div class="searchcontrol desk-only">
+			<a href="https://www.eastherts.gov.uk/article/34246/Search" class="searchcontrol__expandtoggle">Search</a>
+		</div>
+    </div>
 </header>
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
 }