Fix bug 947310 - redesign MDN home page promo

This also removes/replaces the 2013 addons promo.
mozilla · Jan 9, 2014 · c7aa50c · c7aa50c
1 parent eabe3d9
commit c7aa50c
Show file tree

Hide file tree

Showing 21 changed files with 151 additions and 282 deletions.
diff --git a/bedrock/mozorg/templates/mozorg/home.html b/bedrock/mozorg/templates/mozorg/home.html
@@ -136,73 +136,63 @@ <h3>{{ _('Look ahead') }}</h3>
         </div>
       </li>
 
-    {#
-      Restricted to DEV for localization. Another PR will be issued to
-      add the l10n_has_tag function on release day (12/19).
-    #}
-    {% if l10n_has_tag('promo_addons2013') or settings.DEV %}
-      <li id="panel-addons" class="panel" tabindex="0">
-        {# L10n: This <br> is strictly for visual formatting; translations can omit or reposition as needed. #}
-        <h2 class="panel-title">{{ _('See the<br> best add-ons') }}</h2>
+    {% if l10n_has_tag('promo_webmaker') or settings.DEV %}
+      <li id="panel-webmaker" class="panel" tabindex="0">
+        {# L10n: The active word should be wrapped in <i></i> tags, though it may appear at a different position in the translated title. #}
+        <h2 class="panel-title">{{ _('<i>Learn</i> the Web') }}</h2>
         <div class="panel-inner">
           <div class="panel-content">
-          {% if request.locale == 'en-US' %}
-            <a href="http://blog.mozilla.org/theden/2013/12/04/13-best-firefox-add-ons-of-2013">
-          {% elif request.locale in ['es-AR', 'es-CL', 'es-ES', 'es-MX'] %}
-            <a href="http://blog.mozilla.org/laguaridadefirefox/2013/12/04/los-13-mejores-complementos-para-firefox-del-2013">
-          {% else %}
-            <a href="https://addons.mozilla.org/firefox/collections/mozilla/best-13-of-2013/">
-          {% endif %}
-              {# L10n: This <br> is strictly for visual formatting; translations can omit or reposition as needed. #}
-              <h3>{{ _('The best add-ons<br> of the year') }}</h3>
-              <p>{{ _('See the top 13 add-ons from 2013, as chosen by our amazing committee of volunteers.') }}</p>
-              <p class="go">{{ _('Add them to Firefox') }}</p>
+            <a href="https://webmaker.org" rel="external">
+              <h3>{{ _('We teach the Web') }}</h3>
+              <p>{{ _('Let‘s explore, tinker and create together to build a Web that‘s open and made by everyone.') }}</p>
+              <p class="go">{{ _('Become a Webmaker') }}</p>
             </a>
           </div>
         </div>
       </li>
     {% else %}
-      <li id="panel-mdn" class="panel" tabindex="0">
+      <li id="panel-mozfest" class="panel" tabindex="0">
         {# L10n: The active word should be wrapped in <i></i> tags, though it may appear at a different position in the translated title. #}
-        <h2 class="panel-title">{{ _('<i>Join</i> our community') }}</h2>
+        <h2 class="panel-title">{{ _('<i>Forge</i> the future') }}</h2>
         <div class="panel-inner">
           <div class="panel-content">
-            <a href="https://developer.mozilla.org/">
+            <a href="https://mozillafestival.org">
               {# L10n: This <br> is strictly for visual formatting; translations can omit or reposition as needed. #}
-              <h3>{{ _('Join our<br> developer community') }}</h3>
-              <p>{{ _('Get docs and demos, tools and tutorials and everything related to the Open Web.') }}</p>
-              <p class="go">{{ _('Visit the Mozilla Developer Network') }}</p>
+              <h3>{{ _('Forge the future<br> of the Web') }}</h3>
+              <p>{{ _('Learn from some of the most passionate thinkers and inventors from around the world.') }}</p>
+              <p class="go">{{ _('Come to the Mozilla Festival') }}</p>
             </a>
           </div>
         </div>
       </li>
     {% endif %}
 
-    {% if l10n_has_tag('promo_webmaker') or settings.DEV %}
-      <li id="panel-webmaker" class="panel" tabindex="0">
+    {% if l10n_has_tag('promo_new_mdn') or settings.DEV %}
+      <li id="panel-mdn" class="panel" tabindex="0">
         {# L10n: The active word should be wrapped in <i></i> tags, though it may appear at a different position in the translated title. #}
-        <h2 class="panel-title">{{ _('<i>Learn</i> the Web') }}</h2>
+        <h2 class="panel-title">{{ _('<i>See</i> the new MDN') }}</h2>
         <div class="panel-inner">
           <div class="panel-content">
-            <a href="https://webmaker.org" rel="external">
-              <h3>{{ _('We teach the Web') }}</h3>
-              <p>{{ _('Let‘s explore, tinker and create together to build a Web that‘s open and made by everyone.') }}</p>
-              <p class="go">{{ _('Become a Webmaker') }}</p>
+            <a href="https://developer.mozilla.org/">
+              {# L10n: This <br> is strictly for visual formatting; translations can omit or reposition as needed. #}
+              <h3>{{ _('See what’s new <br>for developers') }}</h3>
+              <p>{{ _('Our community hub for docs, demos and other resources just got a brand new look.') }}</p>
+              <p class="go">{{ _('Visit the Mozilla Developer Network') }}</p>
             </a>
           </div>
         </div>
       </li>
     {% else %}
-      <li id="panel-mozfest" class="panel" tabindex="0">
+      <li id="panel-mdn" class="panel" tabindex="0">
         {# L10n: The active word should be wrapped in <i></i> tags, though it may appear at a different position in the translated title. #}
-        <h2 class="panel-title">{{ _('<i>Forge</i> the future') }}</h2>
+        <h2 class="panel-title">{{ _('<i>Join</i> our community') }}</h2>
         <div class="panel-inner">
           <div class="panel-content">
-            <a href="https://mozillafestival.org">
+            <a href="https://developer.mozilla.org/">
               {# L10n: This <br> is strictly for visual formatting; translations can omit or reposition as needed. #}
-              <h3>{{ _('Forge the future<br> of the Web') }}</h3>
-              <p>{{ _('Learn from some of the most passionate thinkers and inventors from around the world.') }}</p>
-              <p class="go">{{ _('Come to the Mozilla Festival') }}</p>
+              <h3>{{ _('Join our<br> developer community') }}</h3>
+              <p>{{ _('Get docs and demos, tools and tutorials and everything related to the Open Web.') }}</p>
+              <p class="go">{{ _('Visit the Mozilla Developer Network') }}</p>
             </a>
           </div>
         </div>

diff --git a/media/css/mozorg/home-ie8.less b/media/css/mozorg/home-ie8.less
@@ -68,7 +68,7 @@
 
     #panel-mdn.expanded,
     #panel-mdn.compressed {
-        background-position: -80px 10px;
+        background-position: -25px 40px;
     }
 
     #panel-mozfest.expanded,
@@ -91,7 +91,7 @@
     }
 
     #panel-mdn .panel-title {
-        background: #000;
+        background: #fff;
     }
 
     #panel-mozfest .panel-title {

diff --git a/media/css/mozorg/home-ie9.less b/media/css/mozorg/home-ie9.less
@@ -42,7 +42,7 @@
     // MDN
     #panel-mdn.expanded,
     #panel-mdn.compressed {
-        background-position: -80px 10px, 0 0;
+        background-position: -25px 40px, 0 0;
     }
 
     // Mozfest
@@ -87,7 +87,7 @@
         #panel-mdn,
         #panel-mdn.expanded,
         #panel-mdn.compressed {
-            background-position: -110px -5px, 0 0;
+            background-position: -90px 40px, 0 0;
         }
 
         // Webmaker
@@ -129,7 +129,7 @@
     #panel-mdn,
     #panel-mdn.expanded,
     #panel-mdn-compressed {
-        background-position: -25px -8px, 0 0;
+        background-position: -20px -10px, -350px 0;
     }
 
     // Mozfest
@@ -176,7 +176,7 @@
     #panel-mdn,
     #panel-mdn.expanded,
     #panel-mdn.compressed {
-        background-position: 10px -8px, 0 0;
+        background-position: 10px -20px, -250px 0;
     }
 
     // Mozfest