Add products to product list page

bedrock/privacy/templates/privacy/notices/mdn-plus.html

@@ -7,4 +7,4 @@
 {% extends "privacy/notices/base-notice-headings.html" %}
 
 {% set body_id = "mdn-plus" %}
-{% block article_header_logo %}{{ static('img/privacy/icon-mdn-plus.svg') }}{% endblock %}
+{% block article_header_logo %}{{ static('img/logos/mdn/mdn-plus-logo.svg') }}{% endblock %}

l10n/en/brands.ftl

@@ -101,6 +101,10 @@
 
 -brand-name-pocket = Pocket
 
+## Fakespot
+
+-brand-name-fakespot = Fakespot
+
 ## Mozilla projects
 
 -brand-name-bugzilla = Bugzilla

l10n/en/firefox/products.ftl

@@ -4,63 +4,73 @@
 
 ### URL: https://www-dev.allizom.org/products/
 
-# Obsolete string
 # HTML page title
-firefox-products-firefox-is-more-than-a-browser = { -brand-name-firefox } is more than a browser
+firefox-products-mozilla-products = { -brand-name-mozilla }’s products
 
-# HTML page title
+# HTML page description
+firefox-products-mozillas-family-of-products = { -brand-name-mozilla }’s family of products are all designed to keep you safer and smarter online
+
+firefox-products-products = Products
+firefox-products-firefox-beginning-v2 = { -brand-name-firefox } is just the beginning.
+
+# Obsolete string (expires: 2024-07-03)
 firefox-products-firefox-beginning = { -brand-name-firefox } is just the beginning
 
-# Obsolete string
-# HTML page description
-firefox-products-its-a-whole-family-of-products = It’s a whole family of products designed to keep you safer and smarter online.
+firefox-products-mozillas-family-of-products-sentence = { -brand-name-mozilla }’s family of products are all designed to keep you safer and smarter online.
 
-firefox-products-mozillas-family-of-products = { -brand-name-mozilla }’s family of products are all designed to keep you safer and smarter online
+# appears after the name of a product with independant branding. Example: Fakespot by Mozilla
+firefox-products-by-mozilla = by { -brand-name-mozilla }
 
-# Obsolete string
-# The strong tag wraps a word that gets highlighted with a colorful underline for emphasis. The underline breaks if it is on two words, please omit the strong tags if they need to be around multiple words in your language
-firefox-products-firefox-is-more-than-a-browser-emphasis = { -brand-name-firefox } is <strong>more</strong> than a browser
+## Firefox
 
-firefox-products-mozilla-monitor = { -brand-name-mozilla-monitor }
+firefox-products-firefox = { -brand-name-firefox }
+firefox-products-get-the-browsers-that-block = Get the browsers that block 2000+ data trackers automatically. Enhanced Tracking Protection comes standard in every { -brand-name-firefox } browser.
 
-# Obsolete string
-# The strong tag wraps a word that gets highlighted with a colorful underline for emphasis. The underline breaks if it is on two words, please omit the strong tags if they need to be around multiple words in your language
-firefox-products-firefox-beginning-emphasis = { -brand-name-firefox } is just the <strong>beginning</strong>
+## Focus
 
+firefox-products-firefox-focus = { -brand-name-firefox-focus }
+firefox-products-your-dedicated-privacy = Your dedicated privacy browser with automatic tracking protection and ad blocking.
 
-firefox-products-firefox-monitor = { -brand-name-firefox-monitor }
+## Monitor
 
+firefox-products-mozilla-monitor = { -brand-name-mozilla-monitor }
 firefox-products-see-if-your-personal-information = See if your personal information has been compromised in a corporate data breach, and sign up for future alerts.
 firefox-products-check-for-breaches = Check for breaches
-firefox-products-sign-up-for-breach-alerts = Sign up for breach alerts
 
-# Obsolete string
-firefox-products-firefox-browsers = { -brand-name-firefox } browsers
+## Relay
+
+firefox-products-relay = { -brand-name-firefox-relay}
+firefox-products-protect-your-real = Protect your real email address to help control your inbox.
+firefox-products-get-relay = Get { -brand-name-firefox-relay}
+
+## VPN
 
-firefox-products-firefox = { -brand-name-firefox }
-firefox-products-get-the-browsers-that-block = Get the browsers that block 2000+ data trackers automatically. Enhanced Tracking Protection comes standard in every { -brand-name-firefox } browser.
-firefox-products-desktop = Desktop
-firefox-products-android = { -brand-name-android }
-firefox-products-ios = { -brand-name-ios }
-firefox-products-see-all-browsers = See all browsers
 firefox-products-mozilla-vpn = { -brand-name-mozilla-vpn }
 firefox-products-surf-stream-and-get-work-done = Surf, stream and get work done on servers in over 30 countries for a secure internet connection with a new perspective.
 firefox-products-get-mozilla-vpn = Get { -brand-name-mozilla-vpn }
-firefox-products-relay = { -brand-name-firefox-relay}
-firefox-products-protect-your-real = Protect your real email address to help control your inbox.
-firefox-products-learn-more-about-relay = Learn more about { -brand-name-firefox-relay }
 
-firefox-products-send-your-large-files-and = Send your large files and sensitive documents safely, up to 2.5G.
-firefox-products-send-a-file = Send a file
+## MDN Plus
+
+firefox-products-mdn-plus = { -brand-name-mdn-plus }
+firefox-products-resources-for-developers = Resources for developers, by developers. Support MDN and make it your own with collections, notifications, and playgrounds.
+firefox-products-support-mdn = Support { -brand-name-mdn }
+
+## Thunderbird
+
+firefox-products-thunderbird = { -brand-name-thunderbird }
+firefox-products-access-all = Access all your email, calendars, and contacts in one fast app. Filter and organize them the way you like.
+firefox-products-download-thunderbird = Download { -brand-name-thunderbird }
+
+## Fakespot
+
+firefox-products-fakespot = { -brand-name-fakespot }
+# scam artists are people who are trying to sell fakes or steal money
+# 'weeding' is a gardening term, here it is used to mean "removing unwanted things without touching the good ones"
+firefox-products-fakespot-has-your = Fakespot has your back when you’re shopping online — weeding out scam artists and finding you the best deals.
+firefox-products-analyze = Analyze a URL
+
+## Pocket
+
 firefox-products-pocket = { -brand-name-pocket }
 firefox-products-discover-the-best-content = Discover the best content on the web — and consume it wherever and whenever you want.
 firefox-products-get-pocket = Get { -brand-name-pocket }
-firefox-products-learn-more-about-pocket = Learn more about { -brand-name-pocket }
-
-# Variables:
-#   $fxa_attr (string) - anchor link url and attributes
-#   $accounts_attr (string) - anchor link url and attributes
-firefox-products-already-have-an-account-sign = Already have an account? <a { $fxa_attr }>Sign In</a> or <a { $accounts_attr }>learn more</a> about joining { -brand-name-firefox }.
-
-firefox-products-firefox-focus = { -brand-name-firefox-focus }
-firefox-products-your-dedicated-privacy = Your dedicated privacy browser with automatic tracking protection and ad blocking.

media/css/products/landing.scss

@@ -5,206 +5,45 @@
 $font-path: '/media/protocol/fonts';
 $image-path: '/media/protocol/img';
 
-@import '../protocol/components/custom-menu-list';
-@import '../protocol/components/fxa-form';
-@import '~@mozilla-protocol/core/protocol/css/components/logos/logo-product-firefox';
 @import '~@mozilla-protocol/core/protocol/css/includes/lib';
 
-// * -------------------------------------------------------------------------- */
-// Put spacing into variables so it's easier to adjust spacing at each break point
 
-// xs
-$v-grid-xs: $layout-xs;
-$h-grid-xs: $layout-xs;
-
-// md
-$v-grid-md: $layout-md;
-$h-grid-md: $layout-lg;
-
-// lg
-$v-grid-lg: $layout-lg;
-$h-grid-lg: $layout-xl;
-
-// * -------------------------------------------------------------------------- */
-// Protocol over-rides
-
-.mzp-c-menu-list {
-    // match the bottom margin of <p>
-    margin-bottom: 1.25em;
-}
-
-.mzp-c-menu-list-title {
-    margin-bottom: 0;
-}
-
-.mzp-t-download .mzp-c-menu-list-item.t-web a:hover::after {
+// hide the privacy notice to match the other buttons
+.mzp-c-button-download-privacy-link {
     display: none;
 }
 
-// vertical spacing
-main .mzp-l-content {
-    padding-bottom: $v-grid-xs;
-    padding-top: $v-grid-xs;
-
-    @media #{$mq-md} {
-        padding-bottom: $v-grid-md;
-        padding-top: $v-grid-md;
-    }
-
-    @media #{$mq-lg} {
-        padding-bottom: $v-grid-lg;
-        padding-top: $v-grid-lg;
-    }
-}
-
-// make buttons in drop down menus look like links
-.c-menu-list-link {
-    &,
-    &.mzp-c-button.mzp-t-product {
-        background-color: inherit;
-        color: $color-link;
-        display: block;
-        font-family: inherit;
-        font-weight: normal;
-        padding: $spacing-sm 30px $spacing-sm $spacing-sm;
-        border: 0;
-
-        &:hover {
-            color: $color-link-hover;
-            background-color: $color-marketing-gray-20;
-        }
-    }
-}
-
-// * -------------------------------------------------------------------------- */
-// landing grid
-
-.c-landing-grid-item {
-    margin-bottom: $v-grid-xs * 2; // vertical spacing
-    margin-left: auto;
-    margin-right: auto;
-    max-width: 400px;
-
-    &:last-child {
-        margin-bottom: 0;
-    }
-
-    &.c-landing-grid-wide {
-        max-width: 100%;
-    }
-
-    > p:last-child {
-        margin-bottom: 0;
-    }
-}
-
-.c-landing-grid-title {
-    @include font-size(24px);
-    margin-bottom: $spacing-md;
-    margin-top: $spacing-xl;
-
-    a {
-        color: $color-ink-80;
-        text-decoration: none;
-
-        &:hover,
-        &:focus {
-            text-decoration: underline;
-        }
-    }
-
-    + p {
-        margin-bottom: $spacing-xl;
-    }
+// the space between the buttons was getting a link underline, this removes that
+a[id^='playStoreLink'],
+a[id^='appStoreLink'] {
+    display: inline-block;
 }
 
-.c-landing-grid-img {
-    display: block;
-    margin: 0 auto;
-}
 
-// two column grid for browsers that don't support display:grid
-// works in RTL without bidi styles \o/
-@media #{$mq-md} {
-    .c-landing-grid-item {
-        float: left;
-        margin-bottom: $v-grid-md * 2;
-        margin-left: $h-grid-md;
-        max-width: 100%;
-        width: calc(50% - #{$h-grid-md * 0.5});
+// --------------------------------------------------------------------------
+// conditional content classes
 
-        &:nth-child(odd) {
-            clear: left;
-            margin-left: 0;
-        }
-    }
+.show-android,
+.show-ios {
+    display: none !important; /* stylelint-disable-line declaration-no-important */
 }
 
-@media #{$mq-lg} {
-    .c-landing-grid-item {
-        margin-bottom: $v-grid-lg * 2;
-        margin-left: $h-grid-lg;
-        width: calc(50% - #{$h-grid-lg * 0.5});
-    }
+.android .hide-android,
+.ios .hide-ios {
+    display: none !important; /* stylelint-disable-line declaration-no-important */
 }
 
-// column grid for browsers that do support grid
-@supports (display:grid) {
-    // two column
-    @media #{$mq-md} {
-        .c-landing-grid {
-            @include grid-column-gap($h-grid-md);
-            @include grid-row-gap(#{$v-grid-md * 2});
-            display: grid;
-            grid-template-columns: repeat(2, minmax(0, 1fr));
-        }
-
-        // need to remove :after added by .mzp-l-content or we get an extra grid row
-        // added for clearfix purposes but grids don't need a clearfix
-        .c-landing-grid::after {
-            content: none;
-        }
-
-        .c-landing-grid-item {
-            margin-bottom: 0; // vertical spacing now set as row-gap instead of margin-bottom
-            margin-left: 0;
-            width: auto; // over-ride 50% width from float layout
-        }
-
-        .c-landing-grid-img {
-            max-width: 100%;
-        }
-    }
-
-    // three column
-    @media #{$mq-lg} {
-        .c-landing-grid {
-            @include grid-column-gap($h-grid-lg);
-            @include grid-row-gap(#{$v-grid-lg * 2});
-            grid-template-columns: repeat(3, minmax(0, 1fr));
-        }
+.show-else {
+    .android &,
+    .ios & {
+        display: none !important; /* stylelint-disable-line declaration-no-important */
     }
 }
 
-// * -------------------------------------------------------------------------- */
-// Desktop download menu
-
-// issue 13317
-.fx-unsupported .menu-desktop {
-    display: none;
+.ios .show-ios {
+    display: inline-block !important; /* stylelint-disable-line declaration-no-important */
 }
 
-// * -------------------------------------------------------------------------- */
-// Mobile download links
-
-#menu-browsers {
-    .ios & .menu-desktop,
-    .ios & .menu-android,
-    .android & .menu-desktop,
-    .android & .menu-ios {
-        a {
-            pointer-events: none;
-            color: $color-marketing-gray-50;
-        }
-    }
+.android .show-android {
+    display: inline-block !important; /* stylelint-disable-line declaration-no-important */
 }