From 2c56bfcd4e746b74ced62c0e76c1d7404cebc31b Mon Sep 17 00:00:00 2001 From: Craig Cook Date: Wed, 16 Aug 2023 10:27:20 -0700 Subject: [PATCH] Review fixes * Misc fixes to strings and Fluent files. * Deleting obsolete CSS. * Fix PiP JS * Add image borders. --- .../templates/firefox/features/adblocker.html | 4 +- .../firefox/features/base-article.html | 4 +- .../templates/firefox/features/customize.html | 6 +- .../firefox/features/fingerprinting.html | 2 +- .../templates/firefox/features/index.html | 6 +- .../firefox/features/picture-in-picture.html | 1 + bedrock/firefox/urls.py | 8 +- l10n/en/firefox/features/adblocker.ftl | 10 +- .../{bookmarks.ftl => bookmarks-2023.ftl} | 0 .../features/{fast.ftl => fast-2023.ftl} | 0 l10n/en/firefox/features/fingerprinting.ftl | 1 + l10n/en/firefox/features/independent.ftl | 27 ----- .../features/{index.ftl => index-2023.ftl} | 2 +- l10n/en/firefox/features/memory.ftl | 26 ----- ...-manager.ftl => password-manager-2023.ftl} | 0 ...browsing.ftl => private-browsing-2023.ftl} | 0 media/css/firefox/features/adblocker.scss | 59 ---------- .../firefox/features/{new => }/article.scss | 4 + media/css/firefox/features/detail.scss | 50 --------- media/css/firefox/features/index.scss | 104 ++++++++++++------ media/css/firefox/features/new/index.scss | 95 ---------------- media/css/firefox/features/safebrowser.scss | 84 -------------- media/static-bundles.json | 34 +----- 23 files changed, 105 insertions(+), 422 deletions(-) rename l10n/en/firefox/features/{bookmarks.ftl => bookmarks-2023.ftl} (100%) rename l10n/en/firefox/features/{fast.ftl => fast-2023.ftl} (100%) delete mode 100644 l10n/en/firefox/features/independent.ftl rename l10n/en/firefox/features/{index.ftl => index-2023.ftl} (98%) delete mode 100644 l10n/en/firefox/features/memory.ftl rename l10n/en/firefox/features/{password-manager.ftl => password-manager-2023.ftl} (100%) rename l10n/en/firefox/features/{private-browsing.ftl => private-browsing-2023.ftl} (100%) delete mode 100644 media/css/firefox/features/adblocker.scss rename media/css/firefox/features/{new => }/article.scss (95%) delete mode 100644 media/css/firefox/features/detail.scss delete mode 100644 media/css/firefox/features/new/index.scss delete mode 100644 media/css/firefox/features/safebrowser.scss diff --git a/bedrock/firefox/templates/firefox/features/adblocker.html b/bedrock/firefox/templates/firefox/features/adblocker.html index 5a263bd26fa..ad7dc779c70 100644 --- a/bedrock/firefox/templates/firefox/features/adblocker.html +++ b/bedrock/firefox/templates/firefox/features/adblocker.html @@ -39,7 +39,7 @@

{{ftl('features-adblocker-create-a-tracker-free') }}

{{ftl('features-adblocker-choose-your-level-of-protection') }}

-

{{ ftl('features-adblocker-to-start-click-on-the') }}

+

{{ ftl('features-adblocker-to-start-click-on-the-v2', fallback='features-adblocker-to-start-click-on-the') }}

{{ftl('features-adblocker-go-easy-with-standard') }}

{{ ftl('features-adblocker-if-ads-dont-bother-you', url=url('firefox.features.private-browsing')) }}

@@ -127,5 +127,5 @@

{{ftl('features-adblocker-send-a-do-not-track-signal') }}

{{ ftl('features-adblocker-speed-up-thanks-to-ad') }}

{{ ftl('features-adblocker-in-some-cases-an-ad-blocker') }}

-

{{ ftl('features-adblocker-if-you-want-to-learn-more', url=url('firefox.new')) }}

+

{{ ftl('features-adblocker-if-you-want-to-learn-more-v2', fallback='features-adblocker-if-you-want-to-learn-more', url=url('firefox.new')) }}

{% endblock %} diff --git a/bedrock/firefox/templates/firefox/features/base-article.html b/bedrock/firefox/templates/firefox/features/base-article.html index d4c440e6b53..15efaf0c6a5 100644 --- a/bedrock/firefox/templates/firefox/features/base-article.html +++ b/bedrock/firefox/templates/firefox/features/base-article.html @@ -10,7 +10,7 @@ {% block page_css %} {{ css_bundle('protocol-split') }} - {{ css_bundle('firefox-features-new-article') }} + {{ css_bundle('firefox-features-article') }} {% endblock page_css %} {% block article_title_short %}{% endblock %} @@ -65,5 +65,5 @@

{{ ftl('features-shared-footer-cta-title') }}

{% endblock content %} {% block js %} - {{ js_bundle('firefox_features_new_article') }} + {{ js_bundle('firefox_features_article') }} {% endblock %} diff --git a/bedrock/firefox/templates/firefox/features/customize.html b/bedrock/firefox/templates/firefox/features/customize.html index caf5adc1529..b194a1bae4d 100644 --- a/bedrock/firefox/templates/firefox/features/customize.html +++ b/bedrock/firefox/templates/firefox/features/customize.html @@ -36,9 +36,9 @@ trending='href="https://addons.mozilla.org/firefox/search/?sort=hotness&type=statictheme&utm_source=www.mozilla.org&utm_medium=referral&utm_campaign=firefox-features" rel="external noopener"', recommended='href="https://addons.mozilla.org/firefox/search/?promoted=recommended&sort=random&type=statictheme&utm_source=www.mozilla.org&utm_medium=referral&utm_campaign=firefox-features" rel="external noopener"', music='href="https://addons.mozilla.org/firefox/themes/category/music/?utm_source=www.mozilla.org&utm_medium=referral&utm_campaign=firefox-features" rel="external noopener"', - seasonal='href="https://addons.mozilla.org/firefox/themes/category/seasonal/?href="utm_source=www.mozilla.org&utm_medium=referral&utm_campaign=firefox-features" rel="external noopener"', - sports='href="https://addons.mozilla.org/firefox/themes/category/sports/?href="utm_source=www.mozilla.org&utm_medium=referral&utm_campaign=firefox-features" rel="external noopener"', - nature='href="https://addons.mozilla.org/firefox/themes/category/nature/?href="utm_source=www.mozilla.org&utm_medium=referral&utm_campaign=firefox-features" rel="external noopener"' + seasonal='href="https://addons.mozilla.org/firefox/themes/category/seasonal/?utm_source=www.mozilla.org&utm_medium=referral&utm_campaign=firefox-features" rel="external noopener"', + sports='href="https://addons.mozilla.org/firefox/themes/category/sports/?utm_source=www.mozilla.org&utm_medium=referral&utm_campaign=firefox-features" rel="external noopener"', + nature='href="https://addons.mozilla.org/firefox/themes/category/nature/?utm_source=www.mozilla.org&utm_medium=referral&utm_campaign=firefox-features" rel="external noopener"' ) }}

diff --git a/bedrock/firefox/templates/firefox/features/fingerprinting.html b/bedrock/firefox/templates/firefox/features/fingerprinting.html index 04f12d6d6b6..5f72eb52673 100644 --- a/bedrock/firefox/templates/firefox/features/fingerprinting.html +++ b/bedrock/firefox/templates/firefox/features/fingerprinting.html @@ -8,7 +8,7 @@ {% block page_desc %}{{ ftl('features-fingerprinting-fingerprinting-is-a-desc') }}{% endblock %} -{% block article_title_short %}Fingerprinter blocking{% endblock %} +{% block article_title_short %}{{ ftl('features-fingerprinting-fingerprint-blocking') }}{% endblock %} {% block article_title %}{{ ftl('features-fingerprinting-firefox-blocks-fingerprinting') }}{% endblock %} {% block article_content %} diff --git a/bedrock/firefox/templates/firefox/features/index.html b/bedrock/firefox/templates/firefox/features/index.html index 29679c5417b..96c28699b99 100644 --- a/bedrock/firefox/templates/firefox/features/index.html +++ b/bedrock/firefox/templates/firefox/features/index.html @@ -24,7 +24,7 @@

{{ title }}

{%- endmacro %} {% block page_css %} - {{ css_bundle('firefox-features-new-index')}} + {{ css_bundle('firefox-features-index')}} {% endblock page_css %} {% block page_title %}{{ ftl('features-index-firefox-browser-features') }}{% endblock page_title %} @@ -144,8 +144,8 @@

{{ title }}

{{ feature_item( link=url('firefox.features.fingerprinting'), - title=ftl('features-index-fingerprinter-blocking'), - ga_title="Fingerprinter blocking", + title=ftl('features-index-fingerprint-blocking'), + ga_title="Fingerprint blocking", desc=ftl('features-index-ditch-the-sticky-ads'), ) }} diff --git a/bedrock/firefox/templates/firefox/features/picture-in-picture.html b/bedrock/firefox/templates/firefox/features/picture-in-picture.html index 76f080867af..90e185e76d7 100644 --- a/bedrock/firefox/templates/firefox/features/picture-in-picture.html +++ b/bedrock/firefox/templates/firefox/features/picture-in-picture.html @@ -89,5 +89,6 @@

{{ ftl('features-pip-3-more-ways-to-use-picture', fallback='features-pip-3-w {% endblock article_content %} {% block js %} + {{ super() }} {{ js_bundle('firefox-features-pip') }} {% endblock %} diff --git a/bedrock/firefox/urls.py b/bedrock/firefox/urls.py index 65906d80422..9c0f45c94b0 100644 --- a/bedrock/firefox/urls.py +++ b/bedrock/firefox/urls.py @@ -37,14 +37,14 @@ page("firefox/developer/", "firefox/developer/index.html", ftl_files=["firefox/developer"]), page("firefox/enterprise/", "firefox/enterprise/index.html", ftl_files=["firefox/enterprise"]), page("firefox/facebookcontainer/", "firefox/facebookcontainer/index.html", ftl_files=["firefox/facebook_container"]), - page("firefox/features/", "firefox/features/index.html", ftl_files=["firefox/features/index", "firefox/features/shared"]), + page("firefox/features/", "firefox/features/index.html", ftl_files=["firefox/features/index-2023", "firefox/features/shared"]), page("firefox/features/customize/", "firefox/features/customize.html", ftl_files=["firefox/features/customize", "firefox/features/shared"]), page("firefox/features/add-ons/", "firefox/features/add-ons.html", ftl_files=["firefox/features/add-ons", "firefox/features/shared"]), page("firefox/features/pinned-tabs/", "firefox/features/pinned-tabs.html", ftl_files=["firefox/features/pinned-tabs", "firefox/features/shared"]), page("firefox/features/eyedropper/", "firefox/features/eyedropper.html", ftl_files=["firefox/features/eyedropper", "firefox/features/shared"]), page("firefox/features/pdf-editor/", "firefox/features/pdf-editor.html", ftl_files=["firefox/features/pdf-editor", "firefox/features/shared"]), page("firefox/features/adblocker/", "firefox/features/adblocker.html", ftl_files=["firefox/features/adblocker", "firefox/features/shared"]), - page("firefox/features/bookmarks/", "firefox/features/bookmarks.html", ftl_files=["firefox/features/bookmarks", "firefox/features/shared"]), + page("firefox/features/bookmarks/", "firefox/features/bookmarks.html", ftl_files=["firefox/features/bookmarks-2023", "firefox/features/shared"]), page("firefox/features/fast/", "firefox/features/fast.html", ftl_files=["firefox/features/fast", "firefox/features/shared"]), page( "firefox/features/block-fingerprinting/", @@ -54,7 +54,7 @@ page( "firefox/features/password-manager/", "firefox/features/password-manager.html", - ftl_files=["firefox/features/password-manager", "firefox/features/shared"], + ftl_files=["firefox/features/password-manager-2023", "firefox/features/shared"], ), page( "firefox/features/private/", @@ -64,7 +64,7 @@ page( "firefox/features/private-browsing/", "firefox/features/private-browsing.html", - ftl_files=["firefox/features/private-browsing", "firefox/features/shared"], + ftl_files=["firefox/features/private-browsing-2023", "firefox/features/shared"], ), page("firefox/features/sync/", "firefox/features/sync.html", ftl_files=["firefox/features/sync", "firefox/features/shared"]), path("firefox/features/translate/", views.firefox_features_translate, name="firefox.features.translate"), diff --git a/l10n/en/firefox/features/adblocker.ftl b/l10n/en/firefox/features/adblocker.ftl index 8830d3e2c6f..08166ec2d55 100644 --- a/l10n/en/firefox/features/adblocker.ftl +++ b/l10n/en/firefox/features/adblocker.ftl @@ -38,7 +38,10 @@ features-adblocker-create-a-tracker-free = Create a tracker-free zone with Conte features-adblocker-on-firefox-you-can-use = On { -brand-name-firefox }, you can use Privacy or Content Blocking settings to get even more control over ad trackers that serve you the ads. features-adblocker-choose-your-level-of-protection = Choose your level of protection -features-adblocker-to-start-click-on-the = To start, click the shield to the left of the address bar on any webpage and select “Protection Settings.” This will open the { -brand-name-firefox } Settings Privacy & Security panel in a new tab. You should see a blue pop-up with different selections. +features-adblocker-to-start-click-on-the-v2 = To start, click the shield to the left of the address bar on any webpage and select “Protection Settings.” This will open the { -brand-name-firefox } Settings Privacy & Security panel in a new tab. You should see a blue pop-up with different selections. + +# Obsolete string +features-adblocker-to-start-click-on-the = To start, click on the { -brand-name-firefox } menu in the top right-hand corner of your screen. It looks like three lines stacked on top of each other. In the drop-down menu, click on Content Blocking. You should see a blue pop-up with different selections. features-adblocker-go-easy-with-standard = Go easy with Standard mode # Variables: @@ -69,4 +72,7 @@ features-adblocker-in-some-cases-an-ad-blocker = In some cases, an ad blocker ca # Variables: # $url (url) - link to https://www.mozilla.org/firefox/new/ -features-adblocker-if-you-want-to-learn-more = If you want to learn more about ad blocking, there are hundreds of ad blocker extensions available for { -brand-name-firefox } and other browsers. If you want to try out the ad blockers { -brand-name-firefox } uses, click here to download a browser that puts privacy first. +features-adblocker-if-you-want-to-learn-more-v2 = If you want to learn more about ad blocking, there are hundreds of ad blocker extensions available for { -brand-name-firefox } and other browsers. If you want to try out the ad blockers { -brand-name-firefox } uses, click here to download a browser that puts privacy first. + +# Obsolete string +features-adblocker-if-you-want-to-learn-more = If you want to learn more about ad blocking, there are hundreds of ad blocker extensions available for { -brand-name-firefox } and other browsers. If want to try out the ad blockers { -brand-name-firefox } uses, click here to download a browser that puts privacy first. diff --git a/l10n/en/firefox/features/bookmarks.ftl b/l10n/en/firefox/features/bookmarks-2023.ftl similarity index 100% rename from l10n/en/firefox/features/bookmarks.ftl rename to l10n/en/firefox/features/bookmarks-2023.ftl diff --git a/l10n/en/firefox/features/fast.ftl b/l10n/en/firefox/features/fast-2023.ftl similarity index 100% rename from l10n/en/firefox/features/fast.ftl rename to l10n/en/firefox/features/fast-2023.ftl diff --git a/l10n/en/firefox/features/fingerprinting.ftl b/l10n/en/firefox/features/fingerprinting.ftl index 9dc9284e56e..009a9b38d20 100644 --- a/l10n/en/firefox/features/fingerprinting.ftl +++ b/l10n/en/firefox/features/fingerprinting.ftl @@ -10,6 +10,7 @@ features-fingerprinting-what-is-fingerprinting-title = What is fingerprinting an # page description features-fingerprinting-fingerprinting-is-a-desc = Fingerprinting is a type of online tracking that’s more invasive than ordinary cookie-based tracking — that’s why { -brand-name-firefox-browser } blocks it. +features-fingerprinting-fingerprint-blocking = Fingerprint blocking features-fingerprinting-firefox-blocks-fingerprinting = { -brand-name-firefox } blocks fingerprinting features-fingerprinting-ditch-the-sticky = Ditch the sticky ads following you around with { -brand-name-firefox } browser’s built-in fingerprinting blockers. diff --git a/l10n/en/firefox/features/independent.ftl b/l10n/en/firefox/features/independent.ftl deleted file mode 100644 index 4fcb0341be8..00000000000 --- a/l10n/en/firefox/features/independent.ftl +++ /dev/null @@ -1,27 +0,0 @@ -# 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 https://mozilla.org/MPL/2.0/. - -### URL: https://www-dev.allizom.org/firefox/features/independent/ - -# HTML page title -features-independent-firefox-a-different = { -brand-name-firefox }, a different browser for different times. Browse free. - -# HTML page description -features-independent-browse-the-internet = Browse the Internet as it was meant to be… free, safe and accessible to all. Declare your online independence. -features-independent-firefox-rebel-with-a = { -brand-name-firefox }: Rebel with a cause -features-independent-firefox-is-independent = { -brand-name-firefox } is independent and a part of the non-profit { -brand-name-mozilla }, which fights for your online rights, keeps corporate powers in check and makes the Internet accessible to everyone, everywhere. - -# This phrase means without conditions or restrictions, expecting nothing in return -features-independent-no-strings-attached = No strings attached -features-independent-firefox-is-built-by-v2 = { -brand-name-firefox } is built by a non-profit. That means we can do things that others can’t, like build new products and features without a hidden agenda. We champion your right to privacy with tools like Private Browsing with Tracking Protection. - -# Obsolete string -features-independent-firefox-is-built-by = { -brand-name-firefox } is built by a non-profit. That means we can do things that others can’t, like build new products and features without a hidden agenda. We champion your right to privacy with tools like Private Browsing with Tracking Protection, which go beyond what { -brand-name-google } { -brand-name-chrome } and { -brand-name-microsoft } { -brand-name-edge } offer. -features-independent-what-you-see-is-what = What you see is what you get -features-independent-we-believe-the-internet = We believe the Internet is for people, not profit. Unlike other companies, we don’t sell access to your data. You’re in control over who sees your search and browsing history. Choice — that’s what a healthy Internet is all about! -features-independent-a-browser-on-a-mission = A browser on a mission -features-independent-in-addition-to-fighting = In addition to fighting for your online rights, we also keep corporate powers in check, while working with allies all around the globe to nurture healthy Internet practices. So when you choose { -brand-name-firefox }, we’re choosing you, too. - -# Obsolete string -features-independent-firefox-is-a-browser = { -brand-name-firefox } is a browser with a conscience. As part of the technology non-profit { -brand-name-mozilla }, we fight for your online rights, keep corporate powers in check and help educate developing countries on healthy Internet practices. So when you choose { -brand-name-firefox }, we’re choosing you, too. diff --git a/l10n/en/firefox/features/index.ftl b/l10n/en/firefox/features/index-2023.ftl similarity index 98% rename from l10n/en/firefox/features/index.ftl rename to l10n/en/firefox/features/index-2023.ftl index b9b30570ddd..3deee981438 100644 --- a/l10n/en/firefox/features/index.ftl +++ b/l10n/en/firefox/features/index-2023.ftl @@ -32,7 +32,7 @@ features-index-eyedropper-tool = Eyedropper tool features-index-identify-the-exact-color-on-a = Identify the exact color on a page and copy its hex code. features-index-pdf-editor = PDF editor features-index-view-and-edit-pdf-files = View and edit PDF files right in { -brand-name-firefox }. -features-index-fingerprinter-blocking = Fingerprinter blocking +features-index-fingerprint-blocking = Fingerprint blocking features-index-ad-tracker-blocking = Ad tracker blocking features-index-firefox-automatically-blocks = { -brand-name-firefox } automatically blocks 2000+ ad trackers from following you around the internet. diff --git a/l10n/en/firefox/features/memory.ftl b/l10n/en/firefox/features/memory.ftl deleted file mode 100644 index 5299da83ab7..00000000000 --- a/l10n/en/firefox/features/memory.ftl +++ /dev/null @@ -1,26 +0,0 @@ -# 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 https://mozilla.org/MPL/2.0/. - -### URL: https://www-dev.allizom.org/firefox/features/memory/ - -# HTML page title -features-memory-firefox-browser-use-less = { -brand-name-firefox-browser }: Use less memory, get more speed - -# HTML page description -features-memory-is-your-computer-slow-your = Is your computer slow? Your browser might be using too much memory. Switch to { -brand-name-firefox } today for more speed. -features-memory-less-memory-usage-than-chrome = Less memory usage than { -brand-name-chrome } -features-memory-if-your-web-browser-uses = If your web browser uses too much memory, switch to { -brand-name-firefox }. -features-memory-speed-up-your-computer = Speed up your computer -features-memory-every-computer-program-you = Every computer program you run takes up some memory. When too much is used, your system can slooooowww down. { -brand-name-firefox } aims for a balance — using enough memory to let you browse smoothly and leaving plenty of memory to keep your computer responsive. -features-memory-stop-running-out-of-memory = Stop running out of memory - -# Variables: -# $url (url) - link to https://blog.mozilla.org/firefox/fx54memorytest/ -features-memory-chrome-uses-up-to-177x-more = { -brand-name-chrome } uses up to 1.77x more memory than { -brand-name-firefox }. If your computer is already low on memory, this can cause a significant slowdown. Using { -brand-name-firefox }’s latest version with multi-process can result in more available memory to run your favorite programs. -features-memory-browse-faster-privately = Browse faster, privately - -# Variables: -# $url (url) - link to https://www.mozilla.org/firefox/features/private-browsing/ -# "Decluttering" means reducing clutter -features-memory-explore-the-web-faster-with = Explore the web faster with { -brand-name-firefox } Private Browsing. Only { -brand-name-firefox }’s private mode includes tracking protection which blocks ads with trackers from loading on pages. Decluttering sites means web pages can load faster. diff --git a/l10n/en/firefox/features/password-manager.ftl b/l10n/en/firefox/features/password-manager-2023.ftl similarity index 100% rename from l10n/en/firefox/features/password-manager.ftl rename to l10n/en/firefox/features/password-manager-2023.ftl diff --git a/l10n/en/firefox/features/private-browsing.ftl b/l10n/en/firefox/features/private-browsing-2023.ftl similarity index 100% rename from l10n/en/firefox/features/private-browsing.ftl rename to l10n/en/firefox/features/private-browsing-2023.ftl diff --git a/media/css/firefox/features/adblocker.scss b/media/css/firefox/features/adblocker.scss deleted file mode 100644 index 03dfca68f30..00000000000 --- a/media/css/firefox/features/adblocker.scss +++ /dev/null @@ -1,59 +0,0 @@ -// 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 https://mozilla.org/MPL/2.0/. - -$font-path: '/media/protocol/fonts'; -$image-path: '/media/protocol/img'; - -@import '~@mozilla-protocol/core/protocol/css/includes/lib'; -@import '~@mozilla-protocol/core/protocol/css/components/call-out'; - -// * -------------------------------------------------------------------------- */ -// Custom layout -.mzp-c-call-out-compact { - background-color: $color-marketing-gray-20; - - .fx-privacy-link { - margin-bottom: 0; - } -} - -.mzp-c-call-out.mzp-t-hero { - padding: 0; - background-color: $color-white; - - .mzp-c-call-out-title { - @include text-title-md; - } - - .mzp-c-call-out-subtitle { - @include text-title-xs; - } -} - -.section-title { - @include text-title-xs; - text-align: center; - margin-top: $layout-md; - - &:first-child { - margin-top: 0; - } -} - -.block-image { - display: block; - margin: $layout-md auto; - - @media #{$mq-md} { - margin-left: -$layout-md; - margin-right: -$layout-md; - max-width: calc(100% + 96px); - } - - @media #{$mq-xl} { - margin-left: -$layout-xl; - margin-right: -$layout-xl; - max-width: calc(100% + 192px); - } -} diff --git a/media/css/firefox/features/new/article.scss b/media/css/firefox/features/article.scss similarity index 95% rename from media/css/firefox/features/new/article.scss rename to media/css/firefox/features/article.scss index 9ef3a6a49a3..50cab73e70f 100644 --- a/media/css/firefox/features/new/article.scss +++ b/media/css/firefox/features/article.scss @@ -56,6 +56,10 @@ $image-path: '/media/protocol/img'; margin: $spacing-lg 0; text-align: center; + img { + border: 1px solid $color-marketing-gray-30; + } + figcaption { font-style: italic; } diff --git a/media/css/firefox/features/detail.scss b/media/css/firefox/features/detail.scss deleted file mode 100644 index e6936a2cf07..00000000000 --- a/media/css/firefox/features/detail.scss +++ /dev/null @@ -1,50 +0,0 @@ -// 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 https://mozilla.org/MPL/2.0/. - -$font-path: '/media/protocol/fonts'; -$image-path: '/media/protocol/img'; - -@import '~@mozilla-protocol/core/protocol/css/includes/lib'; -@import '~@mozilla-protocol/core/protocol/css/components/section-heading'; - -.c-hero { - .c-hero-icon { - margin-bottom: $spacing-xl; - } - - .c-hero-title { - @include text-title-lg; - } - - .c-hero-desc { - @include text-body-lg; - margin-bottom: $spacing-xl; - } -} - -.c-hero-content { - margin: 0 auto; - text-align: center; - - @media #{$mq-md} { - max-width: $content-md; - } - - @media #{$mq-lg} { - max-width: $content-lg; - } -} - -.mzp-c-picto-image { - width: 32px; - margin-bottom: $spacing-sm; -} - -.mzp-c-picto-body { - font-weight: bold; -} - -.mzp-c-section-heading { - @include text-title-sm; -} diff --git a/media/css/firefox/features/index.scss b/media/css/firefox/features/index.scss index adea16cdd32..f09621370da 100644 --- a/media/css/firefox/features/index.scss +++ b/media/css/firefox/features/index.scss @@ -2,54 +2,94 @@ // License, v. 2.0. If a copy of the MPL was not distributed with this // file, You can obtain one at https://mozilla.org/MPL/2.0/. +$font-path: '/media/fonts'; $image-path: '/media/protocol/img'; @import '~@mozilla-protocol/core/protocol/css/includes/lib'; -@import '~@mozilla-protocol/core/protocol/css/components/section-heading'; +@import '~@mozilla-protocol/core/protocol/css/components/call-out'; +@import '~@mozilla-protocol/core/protocol/css/components/card'; +@import '~@mozilla-protocol/core/protocol/css/templates/card-layout'; +@import '~@mozilla-protocol/core/protocol/css/templates/multi-column'; +@import '~@mozilla-protocol/core/protocol/css/components/breadcrumb'; -.c-hero-desc { - @include text-body-xl; - margin-bottom: $layout-md; -} - -// Add bottom margins when pictos stack on mobile. -// We should probably fix this upstream in Protocol. -.mzp-l-columns .mzp-c-picto { - margin-bottom: $layout-md; +.c-feature-header { + background-color: transparent; + position: relative; - @media #{$mq-md} { - margin-bottom: 0; + &::after { + background: $color-marketing-gray-20; + bottom: 0; + box-shadow: 0 0 2px 0 $color-marketing-gray-60; + content: ''; + display: block; + height: 10px; + position: absolute; + width: 100%; } -} -@media #{$mq-lg} { - .main-content { - margin-bottom: $layout-lg; + @media #{$mq-lg} { + background: + url('/media/img/firefox/features/header-left.svg') left -10% top no-repeat, + transparent url('/media/img/firefox/features/header-right.svg') right -10% top no-repeat; + background-size: auto 100%, contain; + padding: $layout-lg 0; + } - .mzp-l-columns { - row-gap: $layout-lg; - } + @media #{$mq-xl} { + background-position: left top, right top; } } -// Secondary content -.secondary-content { - .mzp-c-section-heading { - @include text-title-sm; +.mzp-c-call-out.mzp-t-content-md { + .mzp-l-content { + max-width: $content-md; } +} + +.c-feature-item { + margin-bottom: $layout-xs; + + a { + color: get-theme('body-text-color'); + display: block; + border: 1px solid $color-light-gray-30; + border-radius: $border-radius-md; + padding: $spacing-md; + text-decoration: none; + transition: border-color 150ms ease; - .mzp-t-picto-side .mzp-c-picto { - @include bidi(( - (padding-left, $layout-md, 0), - (padding-right, 0, $layout-md), - )); + &:hover, + &:focus, + &:active { + border-color: get-theme('link-color-hover'); + color: get-theme('body-text-color'); + + .c-feature-item-title { + text-decoration: underline; + } + + .c-feature-item-cta { + color: get-theme('link-color-hover'); + } + } } - .mzp-c-picto-image { - width: 24px; + @media #{$mq-md} { + display: contents; + margin-bottom: 0; } +} + +.c-feature-item-title { + @include text-title-2xs; +} + +.c-feature-item-cta { + margin: 0; + color: get-theme('link-color'); + text-decoration: underline; - .mzp-c-picto-heading { - @include text-title-2xs; + :visited & { + color: get-theme('link-color-visited'); } } diff --git a/media/css/firefox/features/new/index.scss b/media/css/firefox/features/new/index.scss deleted file mode 100644 index f09621370da..00000000000 --- a/media/css/firefox/features/new/index.scss +++ /dev/null @@ -1,95 +0,0 @@ -// 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 https://mozilla.org/MPL/2.0/. - -$font-path: '/media/fonts'; -$image-path: '/media/protocol/img'; - -@import '~@mozilla-protocol/core/protocol/css/includes/lib'; -@import '~@mozilla-protocol/core/protocol/css/components/call-out'; -@import '~@mozilla-protocol/core/protocol/css/components/card'; -@import '~@mozilla-protocol/core/protocol/css/templates/card-layout'; -@import '~@mozilla-protocol/core/protocol/css/templates/multi-column'; -@import '~@mozilla-protocol/core/protocol/css/components/breadcrumb'; - -.c-feature-header { - background-color: transparent; - position: relative; - - &::after { - background: $color-marketing-gray-20; - bottom: 0; - box-shadow: 0 0 2px 0 $color-marketing-gray-60; - content: ''; - display: block; - height: 10px; - position: absolute; - width: 100%; - } - - @media #{$mq-lg} { - background: - url('/media/img/firefox/features/header-left.svg') left -10% top no-repeat, - transparent url('/media/img/firefox/features/header-right.svg') right -10% top no-repeat; - background-size: auto 100%, contain; - padding: $layout-lg 0; - } - - @media #{$mq-xl} { - background-position: left top, right top; - } -} - -.mzp-c-call-out.mzp-t-content-md { - .mzp-l-content { - max-width: $content-md; - } -} - -.c-feature-item { - margin-bottom: $layout-xs; - - a { - color: get-theme('body-text-color'); - display: block; - border: 1px solid $color-light-gray-30; - border-radius: $border-radius-md; - padding: $spacing-md; - text-decoration: none; - transition: border-color 150ms ease; - - &:hover, - &:focus, - &:active { - border-color: get-theme('link-color-hover'); - color: get-theme('body-text-color'); - - .c-feature-item-title { - text-decoration: underline; - } - - .c-feature-item-cta { - color: get-theme('link-color-hover'); - } - } - } - - @media #{$mq-md} { - display: contents; - margin-bottom: 0; - } -} - -.c-feature-item-title { - @include text-title-2xs; -} - -.c-feature-item-cta { - margin: 0; - color: get-theme('link-color'); - text-decoration: underline; - - :visited & { - color: get-theme('link-color-visited'); - } -} diff --git a/media/css/firefox/features/safebrowser.scss b/media/css/firefox/features/safebrowser.scss deleted file mode 100644 index 1bd07675f21..00000000000 --- a/media/css/firefox/features/safebrowser.scss +++ /dev/null @@ -1,84 +0,0 @@ -// 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 https://mozilla.org/MPL/2.0/. - -$font-path: '/media/protocol/fonts'; -$image-path: '/media/protocol/img'; - -@import '~@mozilla-protocol/core/protocol/css/includes/lib'; -@import '~@mozilla-protocol/core/protocol/css/components/logos/logo'; -@import '~@mozilla-protocol/core/protocol/css/components/logos/logo-product-firefox'; - -.c-hero { - background: $color-purple-90; - color: $body-text-color-inverse; - text-align: center; - min-height: 520px; - margin-bottom: $spacing-xl; - - @supports (--css: variables) { - color: var(--body-text-color-inverse); - } - - .hero-content { - padding-top: $layout-xl; - padding-bottom: $layout-xl; - - .mzp-c-logo { - margin-left: auto; - margin-right: auto; - } - - h1 { - @include font-base; - @include text-title-lg; - color: $title-text-color-inverse; - margin: 0 auto $spacing-2xl; - max-width: 580px; - - @supports (--css: variables) { - color: var(--title-text-color-inverse); - } - } - - p { - color: $color-orange-50; - font-weight: bold; - } - - img { - margin-bottom: $spacing-md; - } - } -} - -.mzp-c-article { - margin: 0 auto $layout-lg; - - img { - display: block; - margin: auto; - width: 100%; - max-width: 580px; - } - - .article-section { - margin-bottom: $layout-lg; - - h2 { - @include font-base; - @include text-title-md; - } - } -} - -/* -------------------------------------------------------------------------- */ -// Call out - -.mzp-c-call-out-compact.mzp-t-dark { - background: $color-purple-90; - - .mzp-c-call-out-title { - color: $color-orange-50; - } -} diff --git a/media/static-bundles.json b/media/static-bundles.json index 105df34d453..59789b024cb 100644 --- a/media/static-bundles.json +++ b/media/static-bundles.json @@ -188,13 +188,6 @@ ], "name": "manifesto" }, - { - "files": [ - "css/firefox/sticky-promo.scss", - "css/firefox/features/detail.scss" - ], - "name": "firefox-features-hub-detail" - }, { "files": [ "css/firefox/features/picture-in-picture.scss" @@ -554,22 +547,15 @@ }, { "files": [ - "css/firefox/sticky-promo.scss", "css/firefox/features/index.scss" ], "name": "firefox-features-index" }, { "files": [ - "css/firefox/features/new/index.scss" - ], - "name": "firefox-features-new-index" - }, - { - "files": [ - "css/firefox/features/new/article.scss" + "css/firefox/features/article.scss" ], - "name": "firefox-features-new-article" + "name": "firefox-features-article" }, { "files": [ @@ -719,13 +705,6 @@ ], "name": "product_pocket" }, - { - "files": [ - "css/firefox/sticky-promo.scss", - "css/firefox/features/adblocker.scss" - ], - "name": "adblocker" - }, { "files": [ "css/firefox/sticky-promo.scss", @@ -766,13 +745,6 @@ ], "name": "windows-64-bit" }, - { - "files": [ - "css/firefox/sticky-promo.scss", - "css/firefox/features/safebrowser.scss" - ], - "name": "safebrowser" - }, { "files": [ "css/firefox/seo.scss" @@ -1411,7 +1383,7 @@ "files": [ "js/firefox/features/features-article.es6.js" ], - "name": "firefox_features_new_article" + "name": "firefox_features_article" }, { "files": [