Tabzilla and home page promo for FxOS (Bug 867451)

bedrock/mozorg/templates/mozorg/home.html

@@ -61,15 +61,15 @@
 
   <div class="pager-content">
 
-    <div class="pager-page default-page" id="promo-mwc-announce">
+    <div class="pager-page default-page" id="promo-fxos">
       <script>
-        document.getElementById('promo-mwc-announce').id = 'page-promo-mwc-announce';
+        document.getElementById('promo-fxos').id = 'page-promo-fxos';
       </script>
-      <a href="{{ url('firefox.partners.index')  }}" class="container">
+      <a href="{{ url('firefox.os.index')  }}" class="container">
         <div class="content">
-          <h3>{{_('Introducing Firefox OS')}}</h3>
-          <h4>{{_('The Open Web makes its debut as the platform for mobile devices at Mobile World Congress to help bring the next billion smartphone users online.')}}</h4>
-          <p class="go">{{_('Learn More')}}</p>
+          <h3>{{_('Look ahead')}}</h3>
+          <h4>{{_('Firefox OS lets you live every moment to its fullest and build a brighter future for the Web.')}}</h4>
+          <p class="go">{{_('Find out how')}}</p>
         </div>
       </a>
     </div>

bedrock/tabzilla/templates/tabzilla/tabzilla.js

@@ -253,7 +253,7 @@ var Tabzilla = (function (Tabzilla) {
         // track search keywords in GA
         $('#tabzilla-search form').on('submit', function (e) {
             e.preventDefault();
-            
+
             var $form = $(this);
             var keyword = $form.find('#q').val();
             var timer = null;
@@ -399,10 +399,10 @@ var Tabzilla = (function (Tabzilla) {
       '<div id="tabzilla-panel" class="tabzilla-closed" tabindex="-1">'
     + '  <div id="tabzilla-contents">'
     + '    <div id="tabzilla-promo">'
-    + '      <div class="snippet" id="tabzilla-promo-mwc">'
+    + '      <div class="snippet" id="tabzilla-promo-fxos">'
     + '        <a href="https://www.mozilla.org/firefox/os/?icn=tabz">'
-    + '          <h4>{{ _('Firefox OS debuts <span>at Mobile World Congress!</span>') }}</h4>'
-    + '          <p>{{ _('Learn more')|js_escape }} »</p>'
+    + '          <h4>{{ _('Look ahead')|js_escape }}</h4>'
+    + '          <p>{{ _('Learn all about Firefox OS')|js_escape }} »</p>'
     + '        </a>'
     + '      </div>'
     + '    </div>'

media/css/mozorg/home-promo.less

@@ -151,21 +151,23 @@
 /* }}} */
 /* {{{ Specific styles for main promos, added in the order they appear */
 
-#promo-mwc-announce a,
-#page-promo-mwc-announce a {
-    background-image: url('/media/img/home/promo/mwc-announce/1000.jpg');
+#promo-fxos a,
+#page-promo-fxos a {
+    background-image: url('/media/img/home/promo/fxos/1000.png');
     .content {
         width: 80%;
     }
     h3 {
         font-family: Open Sans ExtraBoldItalic;
         text-transform: uppercase;
-        letter-spacing: -3px;
-        font-size: 62px;
+        letter-spacing: -4px;
+        font-size: 90px;
+        padding-top: 30px;
+        margin-bottom: 20px;
         font-weight: normal;
     }
     h4 {
-        width: 90%;
+        width: 70%;
         font-size: 20px;
         line-height: 1.3;
     }
@@ -369,11 +371,13 @@
         }
     }
 
-    #promo-mwc-announce a,
-    #page-promo-mwc-announce a {
-        background-image: url('/media/img/home/promo/mwc-announce/760.jpg');
+    #promo-fxos a,
+    #page-promo-fxos a {
+        background-image: url('/media/img/home/promo/fxos/760.png');
         h3 {
-            font-size: 48px;
+            font-size: 70px;
+            padding-top: 20px;
+            margin-bottom: 10px;
         }
         h4 {
             font-size: 16px;
@@ -526,14 +530,20 @@
         padding-top: 116px;
     }
 
-    #promo-mwc-announce a,
-    #page-promo-mwc-announce a {
-        background-image: url('/media/img/home/promo/mwc-announce/440.jpg');
+    #promo-fxos a,
+    #page-promo-fxos a {
+        background-image: url('/media/img/home/promo/fxos/440.png');
         .content {
             width: auto;
             h3 {
                 font-size: 30px;
                 letter-spacing: -1px;
+                padding-top: 20px;
+                margin-bottom: 5px;
+            }
+            h4 {
+                width: auto;
+                line-height: 1.2;
             }
         }
     }
@@ -567,18 +577,22 @@
     .loaded .pager-page a {
         padding-top: 84px;
     }
-    #promo-mwc-announce a,
-    #page-promo-mwc-announce a {
-        background-image: url('/media/img/home/promo/mwc-announce/320.jpg');
+    #promo-fxos a,
+    #page-promo-fxos a {
+        background-image: url('/media/img/home/promo/fxos/320.png');
         .content {
             width: auto;
             h3 {
                 font-size: 20px;
                 letter-spacing: -1px;
+                padding-top: 20px;
+                margin-bottom: 5px;
             }
             h4 {
                 font-size: @baseFontSize;
+                width: auto;
                 line-height: 1.3;
+                letter-spacing: normal;
             }
         }
     }

media/css/tabzilla/tabzilla.less

@@ -338,8 +338,8 @@
 	left: -400px;
 }
 
-#tabzilla-promo .snippet#tabzilla-promo-mwc a {
-    background-image: url('/media/img/tabzilla/promo-mwc.jpg');
+#tabzilla-promo .snippet#tabzilla-promo-fxos a {
+    background-image: url('/media/img/tabzilla/promo-fxos.png');
     background-position: 0 0;
     background-color: #226aa7;
     color: #fff;
@@ -354,26 +354,14 @@
         text-transform: uppercase;
         letter-spacing: -3px;
         font-weight: normal;
-        font-size: 46px;
+        font-size: 54px;
         line-height: 46px;
-        margin-bottom: 5px;
-
-        span {
-            display: block;
-            font-family: 'Open Sans', sans-serif;
-            font-size: 16px;
-            text-transform: none;
-            width: 150px;
-            margin-top: 5px;
-            margin-bottom: 10px;
-            line-height: 20px;
-            letter-spacing: normal;
-        }
+        margin-top: 10px;
+        margin-bottom: 20px;
     }
     p {
-        font-size: 16px;
+        font-size: 18px;
         width: 150px;
-        margin-bottom: 10px;
     }
 }