Refresh: use Firefox brand fonts on some Firefox pages [fix mozilla#1…

…5542] (mozilla#15569) whatsnew, welcome, and campaign pages
craigcook · Dec 3, 2024 · bafed7c · bafed7c
1 parent f7c1aae
commit bafed7c
Show file tree

Hide file tree

Showing 15 changed files with 146 additions and 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
@@ -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
@@ -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
@@ -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
@@ -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
@@ -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
@@ -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
@@ -11,6 +11,16 @@
 {# "noindex" pages should not have the canonical or hreflang tags: bug 1442331 #}
 {% block canonical_urls %}<meta name="robots" content="noindex,follow">{% 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
@@ -9,6 +9,16 @@
 {# "noindex" pages should not have the canonical or hreflang tags: bug 1442331 #}
 {% block canonical_urls %}<meta name="robots" content="noindex,follow">{% 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
@@ -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
@@ -9,6 +9,16 @@
 {# "noindex" pages should not have the canonical or hreflang tags: bug 1442331 #}
 {% block canonical_urls %}<meta name="robots" content="noindex,follow">{% 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
@@ -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
@@ -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
@@ -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
@@ -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,13 +615,19 @@ $margin-top: 54px; // top margin offset for mobile navigation menu
         border: none;
         font-weight: 600;
         position: relative;
+        text-decoration: none;
     }
 }
 
 .mzp-has-icon.m24-c-menu-item .m24-c-menu-item-link:hover,
 .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
@@ -18,6 +18,11 @@
             color: $m24-color-black;
             margin-bottom: 0;
         }
+
+        :link,
+        :visited {
+            color: $m24-color-black;
+        }
     }
 
     .m24-pencil-banner-close {