From a062e376aa51acecad610371606353b43ee3efd9 Mon Sep 17 00:00:00 2001 From: Jan Brasna <1784648+janbrasna@users.noreply.github.com> Date: Mon, 5 Aug 2024 17:29:16 +0200 Subject: [PATCH 1/6] Fix ctd-promo-de --- .../mozorg/templates/mozorg/home/includes/ctd-promo-de.html | 6 ++---- 1 file changed, 2 insertions(+), 4 deletions(-) diff --git a/bedrock/mozorg/templates/mozorg/home/includes/ctd-promo-de.html b/bedrock/mozorg/templates/mozorg/home/includes/ctd-promo-de.html index 4f73dc161f4..6d9c5bdbed9 100644 --- a/bedrock/mozorg/templates/mozorg/home/includes/ctd-promo-de.html +++ b/bedrock/mozorg/templates/mozorg/home/includes/ctd-promo-de.html @@ -35,7 +35,7 @@

Dein Browser ist soooooo Standard

(Wir haben auch ein paar wirklich gute Argumente.)

- Ich schau mir Firefox mal an + Ich schau mir Firefox mal an {% endcall %} @@ -70,10 +70,8 @@

Und was machen wir jetzt?

Zeigt mir den Mobile Browser + {% endcall %} - {% endcall %} - - {% endblock %} From 863fecd446b3b9be627d3e5c5a5f7c30ab8c9335 Mon Sep 17 00:00:00 2001 From: Jan Brasna <1784648+janbrasna@users.noreply.github.com> Date: Fri, 9 Aug 2024 20:14:09 +0200 Subject: [PATCH 2/6] Fixup and simplify CTD landing --- .../challenge-the-default/landing-base.html | 66 +++++++--------- .../challenge-the-default/_animations.scss | 5 -- .../challenge-the-default/_compare-table.scss | 7 -- .../firefox/challenge-the-default/_hero.scss | 3 - .../challenge-the-default/_toggle.scss | 6 -- .../firefox/challenge-the-default/index.scss | 20 ++--- media/css/mozorg/home/ctd-promo-de.scss | 3 - .../challenge-the-default/logo-firefox.svg | 79 ------------------- 8 files changed, 41 insertions(+), 148 deletions(-) delete mode 100644 media/img/firefox/challenge-the-default/logo-firefox.svg 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 389399b0afc..8f95617ec1a 100644 --- a/bedrock/firefox/templates/firefox/challenge-the-default/landing-base.html +++ b/bedrock/firefox/templates/firefox/challenge-the-default/landing-base.html @@ -4,37 +4,32 @@ file, You can obtain one at https://mozilla.org/MPL/2.0/. #} -{% extends "base-protocol.html" %} +{% extends "firefox/base/base-protocol.html" %} {% from "macros-protocol.html" import picto with context %} {% block page_title %}{{ ftl('firefox-home-firefox-protect-your') }}{% endblock %} - -{% block page_title_suffix %}{{ ftl('firefox-home-mozilla') }}{% endblock %} - -{% block page_desc %} - {{ seo_desc }} -{% endblock %} +{% block page_title_suffix %} — {{ ftl('firefox-home-mozilla') }}{% endblock %} +{% block page_desc %}{{ seo_desc }}{% endblock %} {% block page_image %} {% if LANG == "fr" %} {{ static('img/firefox/challenge-the-default/ctd-share-fr.png') }} + {% elif LANG == "es-ES" %} + {{ static('img/firefox/challenge-the-default/ctd-share-es.png') }} + {% elif LANG == "it" %} + {{ static('img/firefox/challenge-the-default/ctd-share-it.png') }} + {% elif LANG == "pl" %} + {{ static('img/firefox/challenge-the-default/ctd-share-pl.png') }} {% else %} {{ static('img/firefox/challenge-the-default/ctd-share.png') }} {% endif %} {% endblock %} -{% block page_favicon %}{{ static('img/favicons/firefox/favicon.ico') }}{% endblock %} -{% block page_favicon_large %}{{ static('img/favicons/firefox/favicon-196x196.png') }}{% endblock %} -{% block page_ios_icon %}{{ static('img/favicons/firefox/apple-touch-icon.png') }}{% endblock %} {% block page_css %} {{ css_bundle('protocol-picto') }} {{ css_bundle('challenge-the-default') }} {% endblock %} - -{% block sub_navigation %} -{% endblock %} - {% macro cta_group(position) -%} {{ cta_default }} {{ cta_mobile }} @@ -46,7 +41,7 @@ {% if variation not in ["2", "3", "4", "5", "6"] %}
{{ resp_img( - url='img/firefox/challenge-the-default/logo-firefox.svg', + url='protocol/img/logos/firefox/browser/logo.svg', optional_attributes={ 'loading': 'eager', 'height': '24', @@ -141,7 +136,7 @@
{% if variation not in ["2", "3", "4", "5", "6"] %} {{ resp_img( - url='img/firefox/challenge-the-default/logo-firefox.svg', + url='protocol/img/logos/firefox/browser/logo.svg', optional_attributes={ 'loading': 'eager', 'alt': hero_alt, @@ -213,7 +208,6 @@

{{ features_head|safe }}

)%}

{{ features_power_body }}

{{ features_power_small }} -

{% endcall %} {% call picto( base_el='li', @@ -261,56 +255,56 @@

{{ compare_title|safe }}

{{ compare_passwords }} - ✓ - ✓ - ✓ - ✓ + ✓ + ✓ + ✓ + ✓ {{ compare_search }} - ✓ - ✓ - ✓ - ✓ + ✓ + ✓ + ✓ + ✓ {{ compare_sync }} - ✓ - ✓ - ✓ - ✓ + ✓ + ✓ + ✓ + ✓ {{ compare_block }} - ✓ - ✓ + ✓ + ✓ - ✓ + ✓ {{ compare_profit }} - ✓ + ✓ {{ compare_privacy }} - ✓ + ✓ {{ compare_shareholders }} - ✓ + ✓ {{ compare_logo }} - ✓ + ✓ diff --git a/media/css/firefox/challenge-the-default/_animations.scss b/media/css/firefox/challenge-the-default/_animations.scss index 885d3b63949..51d4d937979 100644 --- a/media/css/firefox/challenge-the-default/_animations.scss +++ b/media/css/firefox/challenge-the-default/_animations.scss @@ -2,11 +2,6 @@ // 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/. -$campaign-red: #ff6a75; -$campaign-pink: #ffbdc5; -$campaign-mint: #d1ffee; -$campaign-green: #2ac3a2; - .js { @media (prefers-reduced-motion: no-preference) { @keyframes pop-in { diff --git a/media/css/firefox/challenge-the-default/_compare-table.scss b/media/css/firefox/challenge-the-default/_compare-table.scss index f421f0090b1..fc3134593af 100644 --- a/media/css/firefox/challenge-the-default/_compare-table.scss +++ b/media/css/firefox/challenge-the-default/_compare-table.scss @@ -2,7 +2,6 @@ // 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/. - .c-ctd-comparison { .mzp-l-content { padding-left: $spacing-sm; @@ -14,7 +13,6 @@ padding-left: $spacing-md; padding-right: $spacing-md; - h2 { @include font-firefox; @include font-size(40px); @@ -32,16 +30,12 @@ width: 60%; min-width: 550px; - h2 { @include font-size(60px); } - - } } - .mzp-u-data-table.comparison-table { width: 100%; max-width: 100%; @@ -135,7 +129,6 @@ height: 100%; } - @media #{$mq-md} { .safari, .edge, diff --git a/media/css/firefox/challenge-the-default/_hero.scss b/media/css/firefox/challenge-the-default/_hero.scss index eb378c631a2..48664db71a0 100644 --- a/media/css/firefox/challenge-the-default/_hero.scss +++ b/media/css/firefox/challenge-the-default/_hero.scss @@ -2,9 +2,6 @@ // 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/. - -$campaign-red: #ff6a75; - .ctd-hero-wrapper { background: $campaign-red; display: flex; diff --git a/media/css/firefox/challenge-the-default/_toggle.scss b/media/css/firefox/challenge-the-default/_toggle.scss index 55e662eff7a..9230d36d90e 100644 --- a/media/css/firefox/challenge-the-default/_toggle.scss +++ b/media/css/firefox/challenge-the-default/_toggle.scss @@ -2,8 +2,6 @@ // 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/. -@import '~@mozilla-protocol/core/protocol/css/includes/lib'; - .toggle { display: inline-flex; align-items: center; @@ -17,8 +15,6 @@ } } - - @keyframes animate-toggle { 0% { transform: rotate(0); @@ -44,7 +40,6 @@ @keyframes animate-toggle-rotate { 0% { transform: translate(0, -50%) rotate(0deg); - } 25% { @@ -143,7 +138,6 @@ outline: 0; } - .toggle-input:checked+.toggle-display { background-color: $color-white; border: none; diff --git a/media/css/firefox/challenge-the-default/index.scss b/media/css/firefox/challenge-the-default/index.scss index c5596fcc42c..b2321574629 100644 --- a/media/css/firefox/challenge-the-default/index.scss +++ b/media/css/firefox/challenge-the-default/index.scss @@ -5,23 +5,23 @@ $image-path: '/media/protocol/img'; $font-path: '/media/protocol/fonts'; -@import "./toggle"; -@import "./animations"; -@import "./hero"; -@import "./compare-table"; - @import '~@mozilla-protocol/core/protocol/css/includes/lib'; @import '~@mozilla-protocol/core/protocol/css/includes/forms'; +@import '~@mozilla-protocol/core/protocol/css/includes/fonts/metropolis'; +@import '~@mozilla-protocol/core/protocol/css/includes/mixins/details'; @import '~@mozilla-protocol/core/protocol/css/components/modal'; @import '~@mozilla-protocol/core/protocol/css/components/notification-bar'; -@import '~@mozilla-protocol/core/protocol/css/includes/mixins/details'; -@import '~@mozilla-protocol/core/protocol/css/includes/fonts/metropolis'; $campaign-red: #ff6a75; $campaign-pink: #ffbdc5; $campaign-mint: #d1ffee; $campaign-green: #2ac3a2; +@import "./toggle"; +@import "./animations"; +@import "./hero"; +@import "./compare-table"; + // fonts to be included for CTD and should be removed when the page is no longer live @font-face { font-display: swap; @@ -349,6 +349,10 @@ html:not(.is-firefox) { border-radius: $border-radius-lg; margin-top: $spacing-lg; + summary { + cursor: pointer; + } + h3 { margin-bottom: 0; @include font-size(18px); @@ -363,7 +367,6 @@ html:not(.is-firefox) { color: $color-marketing-gray-70; font-weight: 600; margin-top: $spacing-xl; - } } } @@ -398,7 +401,6 @@ html:not(.is-firefox) { position: absolute; max-width: 90%; - @media #{$mq-md} { max-width: 440px; } diff --git a/media/css/mozorg/home/ctd-promo-de.scss b/media/css/mozorg/home/ctd-promo-de.scss index 93f3d842316..0608593b2cb 100644 --- a/media/css/mozorg/home/ctd-promo-de.scss +++ b/media/css/mozorg/home/ctd-promo-de.scss @@ -2,11 +2,8 @@ // 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/. -$image-path: '/media/protocol/img'; - @import '~@mozilla-protocol/core/protocol/css/includes/lib'; @import '~@mozilla-protocol/core/protocol/css/components/logos/wordmark'; -@import '~@mozilla-protocol/core/protocol/css/components/logos/wordmark-product-family'; .ctd-promo { .ctd-promo-non-fx, diff --git a/media/img/firefox/challenge-the-default/logo-firefox.svg b/media/img/firefox/challenge-the-default/logo-firefox.svg deleted file mode 100644 index 1e472e7e0ea..00000000000 --- a/media/img/firefox/challenge-the-default/logo-firefox.svg +++ /dev/null @@ -1,79 +0,0 @@ - - - - - - - - - - - - - - - - - - - - - - - - - - - - - - - - - - - - - - - - - - - - - - - - - - - - - - - - - - - - - - - - - - - - - - - - - - - - - - - From 68ae3efccb57734280d242eead7ad7f46818a463 Mon Sep 17 00:00:00 2001 From: Jan Brasna <1784648+janbrasna@users.noreply.github.com> Date: Fri, 9 Aug 2024 20:24:33 +0200 Subject: [PATCH 3/6] Fix repeated ids --- .../includes/toggles.html | 36 +++++++++---------- .../challenge-the-default/landing-base.html | 13 ------- 2 files changed, 18 insertions(+), 31 deletions(-) diff --git a/bedrock/firefox/templates/firefox/challenge-the-default/includes/toggles.html b/bedrock/firefox/templates/firefox/challenge-the-default/includes/toggles.html index c8c43b57848..25b57c8e192 100644 --- a/bedrock/firefox/templates/firefox/challenge-the-default/includes/toggles.html +++ b/bedrock/firefox/templates/firefox/challenge-the-default/includes/toggles.html @@ -8,54 +8,54 @@
{% for element in range(4) %} -
{% for element in range(7) %} -
{% for element in range(10) %} -