WIP Bug 1133004. Fx family landing page.

bedrock/firefox/templates/firefox/family/index.html

@@ -0,0 +1,123 @@
+{# This Source Code Form is subject to the terms of the Mozilla Public
+ # License, v. 2.0. If a copy of the MPL was not distributed with this
+ # file, You can obtain one at http://mozilla.org/MPL/2.0/. -#}
+
+{% extends "firefox/base-resp.html" %}
+
+{% block page_title_prefix %}{% endblock %}
+{% block page_title %}{{ _('Firefox — Desktop browser, Android, OS, Hello, Sync, Marketplace') }}{% endblock %}
+{% block page_desc %}{{ _('Learn more about our complete lineup of products for desktop and mobile browsing (and more) that help keep you in control online. Free yourself with Firefox.') }}{% endblock %}
+
+{% block site_css %}
+  {% stylesheet 'firefox_family' %}
+{% endblock %}
+
+{% block body_class %}mozid{% endblock %}
+
+{% block site_header %}{% endblock %}
+
+{% block content %}
+
+<div id="conditional-download-bar" class="visible">
+  <div class="content">
+    <div id="dlbar-fx-desktop">
+      {{ _('You’re using an older version of Firefox for desktop.') }}
+      {{ _('Update today to stay fast and safe.') }}
+      <a class="button-flat" href="{{ url('firefox.new') }}">{{ _('Download') }}</a>
+    </div>
+    <div id="dlbar-nonfx-desktop">
+      {{ _('Choose Independent.') }}
+      {{ _('Choose Firefox.') }}
+    </div>
+    <div id="dlbar-nonfx-android">
+      <a rel="external" href="{{ settings.GOOGLE_PLAY_FIREFOX_LINK }}">{{ _('Get Firefox for Android') }}</a>
+    </div>
+    <div id="dlbar-ios">
+      {{ _('Firefox is coming soon to iOS! <a href="%s">Sign up to learn more</a>.')|format(url('newsletter.ios')) }}
+    </div>
+  </div>{#-- /.content --#}
+</div>{#-- /#conditional-download-bar --#}
+
+<section id="header">
+  <div class="content">
+    <h1>
+    {% if request.locale.startswith('en') %}
+      Free <span>yourself with</span> {{ high_res_img('img/firefox/family/index/firefox-wordmark.png', {'alt': 'Firefox', 'width': '330', 'height': '95'}) }}
+    {% else %}
+      {{ _('Free yourself with %s')|format(high_res_img('img/firefox/family/index/firefox-wordmark.png', {'alt': 'Firefox', 'width': '330', 'height': '95'})) }}
+    {% endif %}
+    </h1>
+  </div>{#-- /.content --#}
+</section>{#-- /#header --#}
+
+<div id="fox"></div>
+
+<section id="products-primary">
+  <div class="content">
+    <ul class="product-list">
+      <li id="desktop">
+        {# L10n: <span> tag below adds visual style to "for" text #}
+        <h2><a href="{{ url('firefox.desktop.index') }}">{{ _('Firefox <span>for</span> desktop') }}</a></h2>
+        <h3>{{ _('Trusted. Flexible. Fast.') }}</h3>
+
+        <div id="img-desktop"></div>
+      </li>
+      <li id="android">
+        {# L10n: <span> tag below adds visual style to "for" text #}
+        <h2><a href="{{ url('firefox.android.index') }}">{{ _('Firefox <span>for</span> Android') }}</a></h2>
+        <h3>{{ _('Make it uniquely yours.') }}</h3>
+
+        <a rel="external" href="{{ settings.GOOGLE_PLAY_FIREFOX_LINK }}" id="img-google-play">{{ _('Get it on Google Play') }}</a>
+
+        <div id="img-android"></div>
+        <div id="img-android-robot"></div>
+      </li>
+      <li id="fxos">
+        <h2><a href="{{ url('firefox.os.index') }}">{{ _('Firefox OS') }}</a></h2>
+        <h3>{{ _('Get just what you need.') }}</h3>
+
+        <div id="img-fxos"></div>
+      </li>
+    </ul>
+  </div>{#-- /.content --#}
+</section>{#-- /#products-primary --#}
+
+<section id="products-secondary">
+  <div class="content">
+    <ul class="product-list">
+      <li id="hello">
+        <h2><a href="{{ url('firefox.hello') }}">{{ _('Firefox Hello') }}</a></h2>
+        <h3>{{ _('Free, easy video conversations.') }}</h3>
+      </li>
+      <li id="marketplace">
+        <h2><a rel="external" href="https://marketplace.firefox.com/">{{ _('Firefox Marketplace') }}</a></h2>
+        <h3>{{ _('Discover and download Web apps.') }}</h3>
+      </li>
+      <li id="sync">
+        <h2><a href="{{ url('firefox.sync') }}">{{ _('Sync') }}</a></h2>
+        <h3>{{ _('Connect Firefox wherever you use it.') }}</h3>
+      </li>
+    </ul>
+  </div>{#-- /.content --#}
+</section>{#-- /#products-secondary --#}
+
+{% endblock %}
+
+{% block site_footer %}
+<footer id="footer">
+  <a href="{{ url('mozorg.home') }}">Mozilla</a>
+  <ul>
+    <li>
+      <a href="{{ url('privacy') }}">{{ _('Privacy Policy') }}</a>
+    </li>
+    <li>
+      <a href="{{ url('privacy.notices.websites') }}#cookies">{{ _('Cookies') }}</a>
+    </li>
+    <li>
+      <a href="{{ url('legal.index') }}">{{ _('Legal Notices') }}</a>
+    </li>
+  </ul>
+</footer>
+{% endblock %}
+
+{% block email_form %}{% endblock %}

bedrock/firefox/urls.py

@@ -44,6 +44,7 @@
     page('firefox/android', 'firefox/android/index.html'),
     page('firefox/android/faq', 'firefox/android/faq.html'),
     page('firefox/os/faq', 'firefox/os/faq.html'),
+    page('firefox/products', 'firefox/family/index.html'),
     url('^firefox/sms/$', views.sms_send, name='firefox.sms'),
     page('firefox/sms/sent', 'firefox/android/sms-thankyou.html'),
     page('firefox/sync', 'firefox/sync.html'),

bedrock/settings/base.py

@@ -409,6 +409,14 @@ def JINJA_CONFIG():
         ),
         'output_filename': 'css/firefox-tiles-bundle.css',
     },
+    'firefox_family': {
+        'source_filenames': (
+            'css/sandstone/sandstone-resp.less',
+            'css/firefox/family-nav.less',
+            'css/firefox/family/index.less',
+        ),
+        'output_filename': 'css/firefox-family-index-bundle.css',
+    },
     'firefox_faq': {
         'source_filenames': (
             'css/sandstone/sandstone-resp.less',

etc/httpd/global.conf

@@ -238,6 +238,9 @@ RewriteRule ^/(\w{2,3}(?:-\w{2})?/)?firefox/sync(/?)$ /b/$1firefox/sync$2 [PT]
 # bug 1101984
 RewriteRule ^/(\w{2,3}(?:-\w{2})?/)?firefox/hello(/?)$ /b/$1firefox/hello$2 [PT]
 
+# bug 1133004
+RewriteRule ^/(\w{2,3}(?:-\w{2})?/)?firefox/products(/?)$ /b/$1firefox/products$2 [PT]
+
 # bug 1071074
 RewriteRule ^/(\w{2,3}(?:-\w{2})?/)?firefox/channel(/?)$ /b/$1firefox/channel$2 [PT]
 

media/css/firefox/family/index.less

@@ -0,0 +1,208 @@
+// This Source Code Form is subject to the terms of the Mozilla Public
+// License, v. 2.0. If a copy of the MPL was not distributed with this
+// file, You can obtain one at http://mozilla.org/MPL/2.0/.
+
+@import "../../sandstone/lib.less";
+
+// potential general styles for new mozilla id themed pages
+@mozIDBlue: #0c99d5;
+
+.mozid {
+    color: #fff;
+
+    #outer-wrapper {
+        background: @mozIDBlue;
+    }
+
+    a {
+        color: #fff;
+
+        &:hover,
+        &:focus,
+        &:active {
+            //text-decoration: underline;
+        }
+    }
+
+    #wrapper {
+        width: 100%;
+        overflow: hidden;
+    }
+
+    h1, h2, h3, h4, h5, h6, .huge, .large {
+        color: #fff;
+        text-shadow: none;
+    }
+}
+
+.content {
+    .border-box();
+    width: @breakDesktopWide;
+    margin: 0 auto;
+
+    @media (max-width: @breakDesktopWide) {
+        width: @breakDesktop;
+    }
+
+    @media (max-width: @breakDesktop) {
+        width: @breakTablet;
+    }
+
+    @media (max-width: @breakTablet) {
+        width: 100%;
+        padding: @baseLine / 2;
+    }
+}
+
+// page specific styles
+.fxfamily-sprite(@posx, @posy) {
+    background-image: url(/media/img/firefox/family/index/sprite.png);
+    background-position: @posx @posy;
+    overflow: hidden;
+
+    @media (-webkit-min-device-pixel-ratio: 1.5),
+       (                min-resolution: 1.5dppx),
+       (                min-resolution: 144dpi) {
+
+    }
+}
+
+ul {
+    margin: 0;
+}
+
+// conditional download bar
+#conditional-download-bar {
+    position: absolute;
+    top: 0;
+    left: 0;
+    z-index: 3;
+    height: 40px;
+    width: 100%;
+    text-align: center;
+    overflow: hidden;
+    background: #fff;
+    color: @textColorPrimary;
+    .transform(translateY(-51px));
+    .transition(all 0.25s ease);
+
+    &.visible {
+        .transform(translateY(0));
+    }
+}
+
+// header
+#header {
+    position: relative;
+    height: 570px;
+    z-index: 2;
+    overflow: hidden;
+
+    .content {
+        padding: (@baseLine * 2) 0 0 70px;
+        overflow-y: visible;
+    }
+}
+
+#fox {
+    position: absolute;
+    top: -129px;
+    left: 663px;
+    width: 1184px;
+    height: 704px;
+    background: url(/media/img/firefox/family/index/fox.png) left top no-repeat;
+}
+
+.product-list {
+    .clearfix();
+    margin: 0;
+    list-style-type: none;
+
+    li {
+        float: left;
+        margin: 0;
+        width: (460px - (@baseLine * 2));
+        padding: (@baseLine * 2) @baseLine 0;
+
+        @media (max-width: @breakDesktopWide) {
+            width: (320px - @baseLine);
+            padding-left: @baseLine / 2;
+            padding-right: @baseLine / 2;
+        }
+    }
+
+    h2 a {
+        .trailing-arrow();
+        text-decoration: none;
+    }
+}
+
+#products-primary {
+    background: #00a7e0;
+
+    li {
+        text-align: center;
+    }
+
+    h2 {
+        .font-size(36px);
+    }
+
+    h3 {
+        .font-size(18px);
+    }
+
+    .container {
+        padding: 0 (@baseLine / 2);
+    }
+
+    @media (max-width: @breakDesktopWide) {
+        h2 {
+            .font-size(30px);
+        }
+
+        h3 {
+            .font-size(@largeFontSize);
+        }
+    }
+}
+
+#img-desktop {
+    .fxfamily-sprite(0px, 0px);
+    width: 307px;
+    height: 148px;
+}
+
+#img-android {
+    .fxfamily-sprite(0px, -148px);
+    width: 309px;
+    height: 177px;
+}
+
+#img-android-robot {
+    .fxfamily-sprite(0px, -660px);
+    width: 66px;
+    height: 90px;
+}
+
+#img-google-play {
+    .fxfamily-sprite(120px, -579px);
+    width: 135px;
+    height: 48px;
+    display: block;
+    //.image-replaced();
+}
+
+#img-fxos {
+    .fxfamily-sprite(0px, -325px);
+    width: 221px;
+    height: 146px;
+}
+
+#products-secondary {
+    background: #efefef;
+}
+
+#footer {
+    background: #fff;
+}