From 49c0dbe68e3e5bcc7d1f1051e7d8e05f6131bbbf Mon Sep 17 00:00:00 2001 From: Craig Cook Date: Thu, 25 Jul 2024 11:27:46 -0700 Subject: [PATCH] Fixes for Nothing Personal page [#14824] (#14881) * Browser window title alignment * Desktop icon hover styles * Open links in new tab * fix #14877 - sticky note animation * fix #14878 - CTA default visibility --- .../firefox/nothing-personal/index.html | 16 +++++++------- .../firefox/nothing-personal/_animations.scss | 22 ++----------------- .../firefox/nothing-personal/_browser.scss | 3 ++- .../nothing-personal/_primary-cta.scss | 7 +++++- .../nothing-personal/_sticky-note.scss | 2 ++ .../css/firefox/nothing-personal/styles.scss | 13 ++++++----- 6 files changed, 27 insertions(+), 36 deletions(-) diff --git a/bedrock/firefox/templates/firefox/nothing-personal/index.html b/bedrock/firefox/templates/firefox/nothing-personal/index.html index c4325a1ad3..884166e717 100644 --- a/bedrock/firefox/templates/firefox/nothing-personal/index.html +++ b/bedrock/firefox/templates/firefox/nothing-personal/index.html @@ -29,10 +29,10 @@

Feeling browser-curious? We won’t tell.

- Set as default - Learn more + Set as default + {{ download_firefox_thanks(alt_copy='Download Firefox', dom_id='protocol-nav-download-firefox', button_class='mzp-t-primary mzp-t-lg c-download-firefox-cta', download_location='primary') }}
@@ -146,27 +146,27 @@

Somewhat Frequently Asked Questions

Are you even any good?
-

Calm down. And yes. We’re so fast you won’t even notice the difference.

+

Calm down. And yes. We’re so fast you won’t even notice the difference.

What makes you soooo special?
-

NBD, but people dump their other browsers for our features (like popping out videos and a built-in PDF editor).

+

NBD, but people dump their other browsers for our features (like popping out videos and a built-in PDF editor).

What does any of this have to do
with me?
-

Hey, you can customize Firefox to be all about you with add-ons and themes. Happy?

+

Hey, you can customize Firefox to be all about you with add-ons and themes. Happy?

Ok, what’s the privacy-catch?
-

We don’t keep track of where you go because 1. Yawn, and 2. We really don’t need it.

+

We don’t keep track of where you go because 1. Yawn, and 2. We really don’t need it.

-
+
{{ download_firefox_thanks(alt_copy='download', button_class='mzp-t-primary mzp-t-lg c-download-firefox-cta', download_location='secondary cta') }}
{{ download_firefox_thanks(alt_copy='download', button_class='mzp-t-primary mzp-t-lg c-download-firefox-cta', download_location='secondary cta') }}
{{ download_firefox_thanks(alt_copy='download', button_class='mzp-t-primary mzp-t-lg c-download-firefox-cta', download_location='secondary cta') }}

Ok, bye.

-
+
{% endcall %} diff --git a/media/css/firefox/nothing-personal/_animations.scss b/media/css/firefox/nothing-personal/_animations.scss index 0706a93364..a6b70ac0b1 100644 --- a/media/css/firefox/nothing-personal/_animations.scss +++ b/media/css/firefox/nothing-personal/_animations.scss @@ -43,15 +43,6 @@ right: -50%; } - 35% { - opacity: 1; - right: -30%; - } - - 65% { - right: -15%; - } - 100% { opacity: 1; right: 0; @@ -60,22 +51,13 @@ @keyframes slide-in-mobile { 0% { + left: 100%; opacity: 0; - margin-left: 200px; - } - - 35% { - opacity: 1; - margin-left: 80px; - } - - 65% { - margin-left: 60px; } 100% { + left: 0; opacity: 1; - margin-left: auto; } } } diff --git a/media/css/firefox/nothing-personal/_browser.scss b/media/css/firefox/nothing-personal/_browser.scss index 266c54fc07..6685dfdbcd 100644 --- a/media/css/firefox/nothing-personal/_browser.scss +++ b/media/css/firefox/nothing-personal/_browser.scss @@ -24,10 +24,11 @@ font-weight: 500; margin-bottom: 0; padding-left: 80px; - text-align: center; + text-align: start; white-space: nowrap; @media (min-width: $mq-tad-smaller-sm) { + text-align: center; padding: 0; } } diff --git a/media/css/firefox/nothing-personal/_primary-cta.scss b/media/css/firefox/nothing-personal/_primary-cta.scss index 5a7e45f1ad..639b6b3bcd 100644 --- a/media/css/firefox/nothing-personal/_primary-cta.scss +++ b/media/css/firefox/nothing-personal/_primary-cta.scss @@ -4,10 +4,15 @@ // file, You can obtain one at https://mozilla.org/MPL/2.0/. // -------------------- CTA logic ----------------------- // -.mzp-c-button.is-not-default, .mzp-c-button.is-default { +.mzp-c-button.is-not-default, +.mzp-c-button.is-default { display: none; } +.is-firefox .mzp-c-button.is-default { + display: block; +} + html.is-firefox { #protocol-nav-download-firefox { display: none; diff --git a/media/css/firefox/nothing-personal/_sticky-note.scss b/media/css/firefox/nothing-personal/_sticky-note.scss index 5cc6e63929..8d99f4c836 100644 --- a/media/css/firefox/nothing-personal/_sticky-note.scss +++ b/media/css/firefox/nothing-personal/_sticky-note.scss @@ -15,6 +15,8 @@ text-align: center; &.c-detached-sticky { + position: relative; + margin: 0 auto; display: block; opacity: 1; diff --git a/media/css/firefox/nothing-personal/styles.scss b/media/css/firefox/nothing-personal/styles.scss index 04432b273f..77d5b2d4db 100644 --- a/media/css/firefox/nothing-personal/styles.scss +++ b/media/css/firefox/nothing-personal/styles.scss @@ -32,6 +32,7 @@ $mq-tad-smaller-sm: 455px; display: flex; flex-direction: column; align-items: center; + overflow-x: hidden; } aside { @@ -58,19 +59,19 @@ $mq-tad-smaller-sm: 455px; align-items: center; margin-bottom: $spacing-2xl; padding: $spacing-sm; - border: 2px solid transparent; + text-decoration: none; + cursor: default; &:hover, &:active, &:focus { - background-color: $color-blue-60; color: $color-white; - border: 2px dotted $color-white; } - } - .c-trash { - cursor: default; + &:active, + &:focus { + background-color: $color-blue-60; + } } } }