Refresh: use Firefox brand fonts on some Firefox pages [fix #15542]

whatsnew, welcome, and campaign pages
mozilla · Nov 26, 2024 · 66eed7b · 66eed7b
1 parent 3ee3e04
commit 66eed7b
Show file tree

Hide file tree

Showing 7 changed files with 62 additions and 0 deletions.
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 LANG.startswith('en-') %}
+    {{ 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/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 LANG.startswith('en-') %}
+    {{ 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/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 LANG.startswith('en-') %}
+    {{ 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 LANG.startswith('en-') %}
+    {{ 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/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
@@ -340,6 +340,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;
+    }
+
     @media #{$mq-md} {
         &::after {
             background: $color-black;
@@ -416,6 +423,7 @@ $margin-top: 54px; // top margin offset for mobile navigation menu
         text-decoration: none;
         width: 100%;
 
+        &:link,
         &:visited {
             text-decoration: none;
         }
@@ -441,6 +449,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;
     }
@@ -565,6 +575,7 @@ $margin-top: 54px; // top margin offset for mobile navigation menu
         border: none;
         font-weight: 600;
         position: relative;
+        text-decoration: none;
 
         &::after {
             background: $color-black;
@@ -583,6 +594,7 @@ $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
@@ -18,6 +18,11 @@
             color: $m24-color-black;
             margin-bottom: 0;
         }
+
+        :link,
+        :visited {
+            color: $m24-color-black;
+        }
     }
 
     .m24-pencil-banner-close {