Use proper CMC logo in header

2 files changed, 98 insertions, 10 deletions

diff --git a/www/cobrands/cuidomiciudad/css/style.css b/www/cobrands/cuidomiciudad/css/style.css
index 26c5483..54b4276 100644
--- a/www/cobrands/cuidomiciudad/css/style.css
+++ b/www/cobrands/cuidomiciudad/css/style.css
@@ -48,43 +48,82 @@ body.ios7 {
   border-radius: 3px;
 }
 
-/* line 52, style.scss */
+/* line 55, style.scss */
+#around-page .ui-header .ui-title {
+  text-indent: -99999px;
+  margin: 0;
+  padding-top: 0.6em;
+  padding-bottom: 0.6em;
+  background-image: url("../images/logo-footer.png");
+  background-repeat: no-repeat;
+  background-size: 35% auto;
+}
+@media (max-width: 374px) {
+  /* line 71, style.scss */
+  #around-page .ui-header .ui-title {
+    background-position: 55% 18%;
+  }
+  /* line 76, style.scss */
+  #around-page .ui-header .ui-btn-inner {
+    padding-left: 0.35em;
+    padding-right: 0.35em;
+  }
+  /* line 80, style.scss */
+  #around-page .ui-header .ui-btn-icon-left .ui-btn-inner {
+    padding-left: 30px;
+  }
+}
+@media (max-width: 414px) {
+  /* line 87, style.scss */
+  #around-page .ui-header .ui-title {
+    background-position: 55% top;
+  }
+}
+@media (min-width: 415px) {
+  /* line 94, style.scss */
+  #around-page .ui-header .ui-title {
+    background-position: center top;
+    background-size: auto 75%;
+  }
+}
+
+/* line 101, style.scss */
 #load-screen .radar,
 #locating .radar {
   background-image: url("../images/radar-cuidomiciudad.png");
 }
 
-/* line 57, style.scss */
+/* line 106, style.scss */
 .ui-icon {
   background-image: url("../../../css/images/icons-18-white.png");
 }
 
 @media only screen and (-webkit-min-device-pixel-ratio: 1.3), only screen and (min--moz-device-pixel-ratio: 1.3), only screen and (min-resolution: 200dpi) {
-  /* line 63, style.scss */
+  /* line 112, style.scss */
   .ui-icon {
     background-image: url("../../../css/images/icons-36-white.png");
   }
 }
-/* line 68, style.scss */
+/* line 117, style.scss */
 div[data-role='header'] .ui-icon-fms-account {
   background-image: url(../../../images/user-white@x2.png);
   background-size: 18px 18px;
 }
 
 @media only screen and (-webkit-min-device-pixel-ratio: 1.3), only screen and (min--moz-device-pixel-ratio: 1.3), only screen and (min-resolution: 200dpi) {
-  /* line 75, style.scss */
+  /* line 124, style.scss */
   div[data-role='header'] .ui-icon-fms-account {
     background-image: url(../../../images/user-white@x2.png);
   }
 }
-/* line 80, style.scss */
+/* line 129, style.scss */
 #helpContent {
   background-color: #005cb9;
   text-shadow: none;
   color: white;
   padding: 1em;
 }
-/* line 86, style.scss */
+/* line 135, style.scss */
 #helpContent h1 {
   text-align: center;
   background-image: url("../images/logo-footer.png");
@@ -94,18 +133,18 @@ div[data-role='header'] .ui-icon-fms-account {
   background-position: center top;
   text-indent: -9999999px;
 }
-/* line 96, style.scss */
+/* line 145, style.scss */
 #helpContent a, #helpContent a:visited {
   color: #eed11c;
 }
 
-/* line 101, style.scss */
+/* line 150, style.scss */
 #dismiss {
   color: white;
   text-shadow: 0px 1px 0px silver;
 }
 
-/* line 107, style.scss */
+/* line 156, style.scss */
 #locating p {
   text-shadow: none;
 }
diff --git a/www/cobrands/cuidomiciudad/css/style.scss b/www/cobrands/cuidomiciudad/css/style.scss
index efeb113..c7609fc 100644
--- a/www/cobrands/cuidomiciudad/css/style.scss
+++ b/www/cobrands/cuidomiciudad/css/style.scss
@@ -49,6 +49,55 @@ body.ios7 {
     border-radius: 3px;
 }
 
+
+#around-page .ui-header {
+    // We want the CMC logo in the header instead of plain text
+    .ui-title {
+        text-indent: -99999px;
+        margin: 0;
+        padding-top: 0.6em;
+        padding-bottom: 0.6em;
+        background-image: url('../images/logo-footer.png');
+        background-repeat: no-repeat;
+        background-size: 35% auto;
+    }
+
+    // background image is sized according to screen size,
+    // so it's centered on the screen and the baseline matches
+    // the buttons
+
+    // up to iPhone 6 size
+    @media (max-width: 374px) {
+        .ui-title {
+            background-position: 55% 18%;
+        }
+        // On narrow screens (e.g. iPhone 5S), make the button padding a little
+        // tighter to make room for the logo
+        .ui-btn-inner {
+            padding-left: 0.35em;
+            padding-right: 0.35em;
+        }
+        .ui-btn-icon-left .ui-btn-inner {
+            padding-left: 30px;
+        }
+    }
+
+    // up to & including iPhone 6+ size
+    @media (max-width: 414px) {
+        .ui-title {
+            background-position: 55% top;
+        }
+    }
+
+    // bigger than iPhone 6, e.g. high res android or iPad
+    @media (min-width: 415px) {
+        .ui-title {
+            background-position: center top;
+            background-size: auto 75%;
+        }
+    }
+}
+
 #load-screen .radar,
 #locating .radar {
     background-image: url('../images/radar-cuidomiciudad.png');