[Hart] mobile header and images

6 files changed, 51 insertions, 29 deletions

diff --git a/web/cobrands/hart/base.scss b/web/cobrands/hart/base.scss
index 6afd82851..28c44dd95 100644
--- a/web/cobrands/hart/base.scss
+++ b/web/cobrands/hart/base.scss
@@ -27,10 +27,31 @@ h1.main {
     margin: 0.5em 0;
 }
 
-// Want a white header, and logo is slightly bigger
+.container {
+    padding: 0 1em 1em; /* if remove this 1em, need to edit .full-width! */
+}
+
 #site-header {
-    @include background(linear-gradient(#ddd, #fff 10%, #fff));
-    height: 4em;
+    background: $primary;
+    height: 57px;
+
+    .mobile-header-nav {
+        height: 56px;
+        float: right;
+        li {
+            list-style-type: none;
+            float: left;
+            div {
+                height: 57px;
+                width: 57px;
+                background-repeat: no-repeat;
+                background-position: 50% 50%;
+            }
+            .home-icon { background-image: url('/cobrands/hart/home_mobile.png'); }
+            .search-icon { background-image: url('/cobrands/hart/search_mobile.png'); }
+            .menu-icon { background-image: url('/cobrands/hart/menu_mobile.png'); }
+        }
+    }
 }
 
 // Colour tab to match colour scheme
@@ -78,3 +99,7 @@ h1.main {
         }
     }
 }
+
+.hart-footer-wrapper {
+    display: none;
+}
diff --git a/web/cobrands/hart/hart-logo-mobile.png b/web/cobrands/hart/hart-logo-mobile.png
new file mode 100755
index 000000000..0c779121e
--- /dev/null
+++ b/web/cobrands/hart/hart-logo-mobile.png
diff --git a/web/cobrands/hart/hart.scss b/web/cobrands/hart/hart.scss
index a9958129d..20e670965 100644
--- a/web/cobrands/hart/hart.scss
+++ b/web/cobrands/hart/hart.scss
@@ -7,6 +7,13 @@
 @import "compass";
 @import "_colours";
 
+/* from http://nicolasgallagher.com/micro-clearfix-hack/ */
+.clearfix:before,
+.clearfix:after { content: " "; display: table; }
+.clearfix:after { clear: both; }
+/* For IE 6/7 only */
+.clearfix { *zoom: 1; }
+
 
 // Taken from Bromley's form css
 input[type=text],
@@ -39,14 +46,6 @@ select { background: #fff; border: 1px solid #768b9a; border-color: #768b9a #d1d
 h1, h2, h3, h4, h5, h6, legend { font-family: 'Gill Sans MT', 'Trebuchet MS', Calibri, sans-serif; }
 body { color: #333; font-family: "Gill Sans MT", Arial, 'Helvetica Neue', Helvetica, sans-serif; line-height: 1.4; background-color: $base_bg;}
 
-#site-header {
-    height: 6em;
-}
-
-body.frontpage #site-header {
-    height: 13em;
-}
-
 .nav-wrapper-2, 
 body.mappage .nav-wrapper .nav-wrapper-2,
 body.frontpage .nav-wrapper-2 {
@@ -57,6 +56,10 @@ body.frontpage .nav-wrapper-2 {
 }
 
 @media only screen and (min-width:48em) {
+    body.frontpage #site-header {
+        height: 13em;
+    }
+
 	#main-nav {
 	  margin-top: 106px;
       margin-left: 148px;
@@ -111,12 +114,13 @@ body.frontpage .nav-wrapper-2 {
 body.frontpage #site-logo,
 #site-logo {
     display: block;
-    top: 1em;
-    left: 1em;
-    background: url("/cobrands/hart/hart-logo-inverse-small.gif") 0 0 no-repeat;
-    width: 70px;
-    height: 75px;
+    background: url("/cobrands/hart/hart-logo-mobile.png") 0 0 no-repeat;
+    margin: 10px;
+    padding-left: 10px;
+    position: inherit;
     @media only screen and (min-width: 48em) {
+        margin: 0;
+        padding: 0;
         background: url("/cobrands/hart/hart-logo.png") 0 0 no-repeat;
         width: 123px;
         height: 132px;
@@ -191,13 +195,6 @@ body.frontpage .table-cell .content {
   margin-bottom: 2em;
 }
 
-//#search { float: right; padding: 10px 17px; width: 270px; }
-//#search label {display:none;}
-//#search input { background: #ececec; border: 1px solid #768b9a; border-color: #768b9a #d1dee8 #d1dee8 #768b9a; line-height: 9px; padding: 6px 5px 4px; width: 184px; }
-//#search input.button { background: #fff; border: 1px solid #8596a8; color: #333; font-family: 'Gill Sans', 'Trebuchet MS', Calibri, sans-serif; font-size:133%; height: 27px; line-height: 27px; padding: 0; vertical-align: top; width: 70px; }
-
-// #footer renamed to #hart-footer, fixed font size.
-
 .hart-footer-wrapper {
     #footer_outside_wrapper {
         display: block;
@@ -208,28 +205,25 @@ body.frontpage .table-cell .content {
             }
             #footer-right {
                 float: right;
-                width: 329px;
+                max-width: 329px;
                 .region-footer-right {
                     float: left;
-                    width: 319px;
+                    max-width: 319px;
                 }
             }
             #footer-images {
                 display: block;
-                width: 300px;
+                max-width: 300px;
             }
         }
     }
     .footer_border {
         display: block;
-        width: 1024px;
     }
     background-color: #4F5757;
     clear: both;
-    width:100%; 
     height: auto;
     overflow: hidden;
-    display: block;
     bottom: 0;
     padding-bottom: 60px;
     padding:30px 15px 50px; 
diff --git a/web/cobrands/hart/home_mobile.png b/web/cobrands/hart/home_mobile.png
new file mode 100755
index 000000000..a0a568b3d
--- /dev/null
+++ b/web/cobrands/hart/home_mobile.png
diff --git a/web/cobrands/hart/layout.scss b/web/cobrands/hart/layout.scss
index 0a2d823a2..994d23673 100644
--- a/web/cobrands/hart/layout.scss
+++ b/web/cobrands/hart/layout.scss
@@ -5,6 +5,9 @@
   .content {
     margin-top: 8em;
   }
+  .hart-footer-wrapper {
+     display: block;
+  }
 
   }
   #front-main-container {
diff --git a/web/cobrands/hart/menu_mobile.png b/web/cobrands/hart/menu_mobile.png
new file mode 100755
index 000000000..61c1c0cf8
--- /dev/null
+++ b/web/cobrands/hart/menu_mobile.png