From bafed7c70ef959d6c1cb2dec6419a6b88a16ec2f Mon Sep 17 00:00:00 2001 From: Craig Cook Date: Mon, 2 Dec 2024 16:24:36 -0800 Subject: [PATCH] Refresh: use Firefox brand fonts on some Firefox pages [fix #15542] (#15569) whatsnew, welcome, and campaign pages --- .../firefox/built-for-you/landing.de.html | 10 ++++++++++ .../firefox/built-for-you/landing.fr.html | 10 ++++++++++ .../challenge-the-default/landing-base.html | 10 ++++++++++ .../templates/firefox/developer/firstrun.html | 10 ++++++++++ .../templates/firefox/developer/whatsnew.html | 10 ++++++++++ .../firefox/templates/firefox/family/index.html | 10 ++++++++++ .../templates/firefox/nightly/firstrun.html | 10 ++++++++++ .../templates/firefox/nightly/whatsnew.html | 10 ++++++++++ .../firefox/nothing-personal/index.html | 10 ++++++++++ .../firefox/templates/firefox/welcome/base.html | 10 ++++++++++ .../firefox/templates/firefox/whatsnew/base.html | 10 ++++++++++ .../css/firefox/developer/whatsnew-mdnplus.scss | 16 ++++++++++------ media/css/m24/components/footer-refresh.scss | 5 +++++ media/css/m24/components/navigation-refresh.scss | 16 ++++++++++++++++ media/css/m24/components/pencil-banner.scss | 5 +++++ 15 files changed, 146 insertions(+), 6 deletions(-) diff --git a/bedrock/firefox/templates/firefox/built-for-you/landing.de.html b/bedrock/firefox/templates/firefox/built-for-you/landing.de.html index 973300623d0..37f31c79d0b 100644 --- a/bedrock/firefox/templates/firefox/built-for-you/landing.de.html +++ b/bedrock/firefox/templates/firefox/built-for-you/landing.de.html @@ -13,6 +13,16 @@ {% block page_desc %}Keine Kompromisse, bei den Dingen, die dir wichtig sind: Sicherheit, Produktivität und die Freiheit, so zu sein, wie du willst – mit Firefox.{% endblock %} {% block page_image %}{{ static('img/firefox/built-for-you/meta-de.jpg') }}{% endblock %} +{% block site_css %} + {% if switch('m24-website-refresh') and ftl_file_is_active('navigation_refresh') and ftl_file_is_active('footer-refresh') %} + {{ css_bundle('m24-root') }} + {{ css_bundle('m24-navigation-and-footer') }} + {% else %} + {{ css_bundle('legacy-navigation-and-footer') }} + {% endif %} + {{ css_bundle('protocol-firefox') }} +{% endblock %} + {% block page_css %} {{ css_bundle('protocol-split') }} {{ css_bundle('protocol-card') }} diff --git a/bedrock/firefox/templates/firefox/built-for-you/landing.fr.html b/bedrock/firefox/templates/firefox/built-for-you/landing.fr.html index e71731205de..5e1ffb94ddc 100644 --- a/bedrock/firefox/templates/firefox/built-for-you/landing.fr.html +++ b/bedrock/firefox/templates/firefox/built-for-you/landing.fr.html @@ -13,6 +13,16 @@ {% block page_desc %}Ne fais plus de compromis sur ce qui compte pour toi : être en sécurité, plus productif et libre d’être qui tu veux, avec Firefox.{% endblock %} {% block page_image %}{{ static('img/firefox/built-for-you/meta-fr.jpg') }}{% endblock %} +{% block site_css %} + {% if switch('m24-website-refresh') and ftl_file_is_active('navigation_refresh') and ftl_file_is_active('footer-refresh') %} + {{ css_bundle('m24-root') }} + {{ css_bundle('m24-navigation-and-footer') }} + {% else %} + {{ css_bundle('legacy-navigation-and-footer') }} + {% endif %} + {{ css_bundle('protocol-firefox') }} +{% endblock %} + {% block page_css %} {{ css_bundle('protocol-split') }} {{ css_bundle('protocol-card') }} diff --git a/bedrock/firefox/templates/firefox/challenge-the-default/landing-base.html b/bedrock/firefox/templates/firefox/challenge-the-default/landing-base.html index 82a811ad1a8..188f88c2d4b 100644 --- a/bedrock/firefox/templates/firefox/challenge-the-default/landing-base.html +++ b/bedrock/firefox/templates/firefox/challenge-the-default/landing-base.html @@ -12,6 +12,16 @@ {% block page_title_suffix %} — {{ ftl('firefox-home-mozilla') }}{% endblock %} {% block page_desc %}{{ seo_desc }}{% endblock %} +{% block site_css %} + {% if switch('m24-website-refresh') and ftl_file_is_active('navigation_refresh') and ftl_file_is_active('footer-refresh') %} + {{ css_bundle('m24-root') }} + {{ css_bundle('m24-navigation-and-footer') }} + {% else %} + {{ css_bundle('legacy-navigation-and-footer') }} + {% endif %} + {{ css_bundle('protocol-firefox') }} +{% endblock %} + {% block page_css %} {{ css_bundle('protocol-picto') }} {{ css_bundle('challenge-the-default') }} diff --git a/bedrock/firefox/templates/firefox/developer/firstrun.html b/bedrock/firefox/templates/firefox/developer/firstrun.html index e70a4fb2e8c..25b7efb0988 100644 --- a/bedrock/firefox/templates/firefox/developer/firstrun.html +++ b/bedrock/firefox/templates/firefox/developer/firstrun.html @@ -16,6 +16,16 @@ {% block page_favicon_large %}{{ static('img/favicons/firefox/browser/developer/favicon-196x196.png') }}{% endblock %} {% block page_ios_icon %}{{ static('img/favicons/firefox/browser/developer/apple-touch-icon.png') }}{% endblock %} +{% block site_css %} + {% if switch('m24-website-refresh') and ftl_file_is_active('navigation_refresh') and ftl_file_is_active('footer-refresh') %} + {{ css_bundle('m24-root') }} + {{ css_bundle('m24-navigation-and-footer') }} + {% else %} + {{ css_bundle('legacy-navigation-and-footer') }} + {% endif %} + {{ css_bundle('protocol-firefox') }} +{% endblock %} + {% block page_css %} {{ css_bundle('protocol-split') }} {{ css_bundle('firefox_developer') }} diff --git a/bedrock/firefox/templates/firefox/developer/whatsnew.html b/bedrock/firefox/templates/firefox/developer/whatsnew.html index 822d6e04a6f..b635ac982c9 100644 --- a/bedrock/firefox/templates/firefox/developer/whatsnew.html +++ b/bedrock/firefox/templates/firefox/developer/whatsnew.html @@ -13,6 +13,16 @@ {% block page_favicon_large %}{{ static('img/favicons/firefox/browser/developer/favicon-196x196.png') }}{% endblock %} {% block page_ios_icon %}{{ static('img/favicons/firefox/browser/developer/apple-touch-icon.png') }}{% endblock %} +{% block site_css %} + {% if switch('m24-website-refresh') and ftl_file_is_active('navigation_refresh') and ftl_file_is_active('footer-refresh') %} + {{ css_bundle('m24-root') }} + {{ css_bundle('m24-navigation-and-footer') }} + {% else %} + {{ css_bundle('legacy-navigation-and-footer') }} + {% endif %} + {{ css_bundle('protocol-firefox') }} +{% endblock %} + {% block page_css %} {{ css_bundle('protocol-split') }} {{ css_bundle('firefox_developer') }} diff --git a/bedrock/firefox/templates/firefox/family/index.html b/bedrock/firefox/templates/firefox/family/index.html index 2926f874edd..cfc91966bf2 100644 --- a/bedrock/firefox/templates/firefox/family/index.html +++ b/bedrock/firefox/templates/firefox/family/index.html @@ -6,6 +6,16 @@ {% extends "firefox/base/base-protocol.html" %} +{% block site_css %} + {% if switch('m24-website-refresh') and ftl_file_is_active('navigation_refresh') and ftl_file_is_active('footer-refresh') %} + {{ css_bundle('m24-root') }} + {{ css_bundle('m24-navigation-and-footer') }} + {% else %} + {{ css_bundle('legacy-navigation-and-footer') }} + {% endif %} + {{ css_bundle('protocol-firefox') }} +{% endblock %} + {% block page_css %} {{ css_bundle('protocol-card') }} {{ css_bundle('firefox-family') }} diff --git a/bedrock/firefox/templates/firefox/nightly/firstrun.html b/bedrock/firefox/templates/firefox/nightly/firstrun.html index ff165ce34f2..1cd9d3a477f 100644 --- a/bedrock/firefox/templates/firefox/nightly/firstrun.html +++ b/bedrock/firefox/templates/firefox/nightly/firstrun.html @@ -11,6 +11,16 @@ {# "noindex" pages should not have the canonical or hreflang tags: bug 1442331 #} {% block canonical_urls %}{% endblock %} +{% block site_css %} + {% if switch('m24-website-refresh') and ftl_file_is_active('navigation_refresh') and ftl_file_is_active('footer-refresh') %} + {{ css_bundle('m24-root') }} + {{ css_bundle('m24-navigation-and-footer') }} + {% else %} + {{ css_bundle('legacy-navigation-and-footer') }} + {% endif %} + {{ css_bundle('protocol-firefox') }} +{% endblock %} + {% block page_css %} {{ css_bundle('protocol-picto') }} {{ css_bundle('protocol-callout') }} diff --git a/bedrock/firefox/templates/firefox/nightly/whatsnew.html b/bedrock/firefox/templates/firefox/nightly/whatsnew.html index 1a02499c704..0285e1ee9a9 100644 --- a/bedrock/firefox/templates/firefox/nightly/whatsnew.html +++ b/bedrock/firefox/templates/firefox/nightly/whatsnew.html @@ -9,6 +9,16 @@ {# "noindex" pages should not have the canonical or hreflang tags: bug 1442331 #} {% block canonical_urls %}{% endblock %} +{% block site_css %} + {% if switch('m24-website-refresh') and ftl_file_is_active('navigation_refresh') and ftl_file_is_active('footer-refresh') %} + {{ css_bundle('m24-root') }} + {{ css_bundle('m24-navigation-and-footer') }} + {% else %} + {{ css_bundle('legacy-navigation-and-footer') }} + {% endif %} + {{ css_bundle('protocol-firefox') }} +{% endblock %} + {% block page_css %} {{ css_bundle('protocol-emphasis-box') }} {{ css_bundle('protocol-callout') }} diff --git a/bedrock/firefox/templates/firefox/nothing-personal/index.html b/bedrock/firefox/templates/firefox/nothing-personal/index.html index 3dbc956e746..89d1eacaf83 100644 --- a/bedrock/firefox/templates/firefox/nothing-personal/index.html +++ b/bedrock/firefox/templates/firefox/nothing-personal/index.html @@ -10,6 +10,16 @@ {% from "firefox/nothing-personal/includes/browser-macro.html" import browser_border %} +{% block site_css %} + {% if switch('m24-website-refresh') and ftl_file_is_active('navigation_refresh') and ftl_file_is_active('footer-refresh') %} + {{ css_bundle('m24-root') }} + {{ css_bundle('m24-navigation-and-footer') }} + {% else %} + {{ css_bundle('legacy-navigation-and-footer') }} + {% endif %} + {{ css_bundle('protocol-firefox') }} +{% endblock %} + {% block page_css %} {{ css_bundle('firefox-nothing-personal') }} {{ css_bundle('protocol-newsletter') }} diff --git a/bedrock/firefox/templates/firefox/welcome/base.html b/bedrock/firefox/templates/firefox/welcome/base.html index 65ed7469d0c..04324f9ed33 100644 --- a/bedrock/firefox/templates/firefox/welcome/base.html +++ b/bedrock/firefox/templates/firefox/welcome/base.html @@ -9,6 +9,16 @@ {# "noindex" pages should not have the canonical or hreflang tags: bug 1442331 #} {% block canonical_urls %}{% endblock %} +{% block site_css %} + {% if switch('m24-website-refresh') and ftl_file_is_active('navigation_refresh') and ftl_file_is_active('footer-refresh') %} + {{ css_bundle('m24-root') }} + {{ css_bundle('m24-navigation-and-footer') }} + {% else %} + {{ css_bundle('legacy-navigation-and-footer') }} + {% endif %} + {{ css_bundle('protocol-firefox') }} +{% endblock %} + {% block page_css %} {{ css_bundle('firefox_welcome') }} {% endblock %} diff --git a/bedrock/firefox/templates/firefox/whatsnew/base.html b/bedrock/firefox/templates/firefox/whatsnew/base.html index bce76276a8f..3d35d1447b5 100644 --- a/bedrock/firefox/templates/firefox/whatsnew/base.html +++ b/bedrock/firefox/templates/firefox/whatsnew/base.html @@ -15,6 +15,16 @@ {% block page_title %}{{ ftl('whatsnew-page-title-v2') }}{% endblock %} {% block page_desc %}{{ ftl('whatsnew-page-description') }}{% endblock %} +{% block site_css %} + {% if switch('m24-website-refresh') and ftl_file_is_active('navigation_refresh') and ftl_file_is_active('footer-refresh') %} + {{ css_bundle('m24-root') }} + {{ css_bundle('m24-navigation-and-footer') }} + {% else %} + {{ css_bundle('legacy-navigation-and-footer') }} + {% endif %} + {{ css_bundle('protocol-firefox') }} +{% endblock %} + {% block body_id %}firefox-whatsnew{% endblock %} {% block site_header %}{% endblock %} diff --git a/media/css/firefox/developer/whatsnew-mdnplus.scss b/media/css/firefox/developer/whatsnew-mdnplus.scss index 2fb2c8641ba..adf358d71a5 100644 --- a/media/css/firefox/developer/whatsnew-mdnplus.scss +++ b/media/css/firefox/developer/whatsnew-mdnplus.scss @@ -11,12 +11,16 @@ $image-path: '/media/protocol/img'; @import '~@mozilla-protocol/core/protocol/css/components/logos/wordmark-product-developer'; .firefox-developer-whatsnew-mdnplus { - h1, - h2, - h3, - h4 { - @include font-base; - color: $color-black; + .c-mdn-header, + .c-mdn-body, + .c-mdn-footer { + h1, + h2, + h3, + h4 { + @include font-base; + color: $color-black; + } } } diff --git a/media/css/m24/components/footer-refresh.scss b/media/css/m24/components/footer-refresh.scss index e5b72ab8a87..77b765e8891 100644 --- a/media/css/m24/components/footer-refresh.scss +++ b/media/css/m24/components/footer-refresh.scss @@ -263,6 +263,11 @@ $max-footer-content-width: $content-max; text-align: center; max-width: 800px; + &:link, + &:visited { + text-decoration: none; + } + &:hover, &:visited:hover { background-color: $m24-color-black; diff --git a/media/css/m24/components/navigation-refresh.scss b/media/css/m24/components/navigation-refresh.scss index c019e078850..89423e0b87c 100644 --- a/media/css/m24/components/navigation-refresh.scss +++ b/media/css/m24/components/navigation-refresh.scss @@ -357,6 +357,13 @@ $margin-top: 54px; // top margin offset for mobile navigation menu text-decoration: none; width: 100%; + // extra specificity to override link colors on some Firefox pages + &:link, + &:visited { + color: $color-black; + text-decoration: none; + } + .m24-c-menu-title-icon { @include bidi(((margin, 0 8px 0 0, 0 0 0 8px),)); } @@ -443,6 +450,7 @@ $margin-top: 54px; // top margin offset for mobile navigation menu text-decoration: none; width: 100%; + &:link, &:visited { text-decoration: none; } @@ -457,6 +465,8 @@ $margin-top: 54px; // top margin offset for mobile navigation menu .m24-c-menu-item .m24-c-menu-item-link .m24-c-menu-item .m24-c-menu-item-link:link, .m24-c-menu-item .m24-c-menu-item-link:visited { + text-decoration: none; + .m24-c-menu-item-title { border: none; } @@ -605,6 +615,7 @@ $margin-top: 54px; // top margin offset for mobile navigation menu border: none; font-weight: 600; position: relative; + text-decoration: none; } } @@ -612,6 +623,11 @@ $margin-top: 54px; // top margin offset for mobile navigation menu .mzp-has-icon.m24-c-menu-item .m24-c-menu-item-link:visited:hover { .m24-c-menu-item-title { border: none; + text-decoration: none; + + &::after { + background: $m24-color-dark-green; + } } } diff --git a/media/css/m24/components/pencil-banner.scss b/media/css/m24/components/pencil-banner.scss index 38da771aea8..a22269abf7c 100644 --- a/media/css/m24/components/pencil-banner.scss +++ b/media/css/m24/components/pencil-banner.scss @@ -18,6 +18,11 @@ color: $m24-color-black; margin-bottom: 0; } + + :link, + :visited { + color: $m24-color-black; + } } .m24-pencil-banner-close {