diff --git a/bedrock/firefox/templates/firefox/nothing-personal/includes/browser-macro.html b/bedrock/firefox/templates/firefox/nothing-personal/includes/browser-macro.html new file mode 100644 index 00000000000..2168cc53b87 --- /dev/null +++ b/bedrock/firefox/templates/firefox/nothing-personal/includes/browser-macro.html @@ -0,0 +1,24 @@ +{# + This Source Code Form is subject to the terms of the Mozilla Public + 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/. +#} + +{% macro browser_border( + class=None, + heading=None, + aria_label=None +) -%} +
+
+ {% if heading and aria_label %} +

{{ heading }}

+ {% elif heading %} +

{{ heading }}

+ {% endif %} +
+
+ {{ caller() }} +
+
+{%- endmacro %} diff --git a/bedrock/firefox/templates/firefox/nothing-personal/index.html b/bedrock/firefox/templates/firefox/nothing-personal/index.html new file mode 100644 index 00000000000..c4325a1ad34 --- /dev/null +++ b/bedrock/firefox/templates/firefox/nothing-personal/index.html @@ -0,0 +1,206 @@ +{# + This Source Code Form is subject to the terms of the Mozilla Public + 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/. +#} + +{% extends "firefox/base/base-protocol.html" %} + +{% from "firefox/nothing-personal/includes/browser-macro.html" import browser_border %} + +{% block page_css %} + {{ css_bundle('firefox-nothing-personal') }} +{% endblock %} + +{% block page_title_prefix %}Nothing Personal{% endblock %} +{% block page_title_suffix %}{% endblock %} + +{% block page_image %}{{ static('img/firefox/nothing-personal/meta-img.png') }}{% endblock %} +{% block page_og_title %}Firefox. Nothing personal. Just browsing.{% endblock %} +{% block page_desc %}Firefox isn’t that interested in your data. No offense.{% endblock %} + +{% block site_header %}{% endblock %} + +{% block content %} +
+
+

Firefox by Mozilla

+ +
+

Feeling browser-curious? We won’t tell.

+ + Set as default + + Learn more + + {{ 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') }} +
+
+
+
+
+
+
+ {% call browser_border(class='c-browser-window-top-wrapper mzp-l-content mzp-t-content-md mzp-t-content-nospace') %} +
+

We look forward to not getting to know you

+
+ {% endcall %} + + {% call browser_border(class='c-browser-window-top-wrapper c-hidden-browser yellow mzp-l-content mzp-t-content-md mzp-t-content-nospace') %} +
+ +

We look forward to not getting to know you

+
+ {% endcall %} + + {% call browser_border(class='c-browser-window-top-wrapper c-hidden-browser dark-yellow mzp-l-content mzp-t-content-md mzp-t-content-nospace') %} +
+ +

We look forward to not getting to know you

+
+ {% endcall %} + + {% call browser_border(class='c-browser-window-top-wrapper c-hidden-browser darker-yellow mzp-l-content mzp-t-content-md mzp-t-content-nospace') %} +
+ +

We look forward to not getting to know you

+
+ {% endcall %} +
+ + {% call browser_border(class='mzp-l-content mzp-t-content-md mzp-t-content-nospace', heading='Nothing Personal') %} +
+

You’re great — probably.

+

We just don’t need a lot of your data to be a fast, reliable browser that keeps up with the big guys.

+
+ {% endcall %} + +
+
+ {{ picture( + url='img/firefox/nothing-personal/thug-life.gif', + sources=[ + { + 'media': '(prefers-reduced-motion: reduce)', + 'srcset': { + 'img/firefox/nothing-personal/thug-life-img.jpg': '200w' + }, + 'sizes': { + 'default': '200px' + } + }, + { + 'media': '(prefers-reduced-motion: no-preference)', + 'srcset': { + 'img/firefox/nothing-personal/thug-life.gif': '200w' + }, + 'sizes': { + 'default': '200px' + } + } + ], + optional_attributes={ + 'height': '200', + 'loading': 'lazy', + 'width': '200' + } + ) }} +
+
+ +
+
+ {{ picture( + url='img/firefox/nothing-personal/thug-life.gif', + sources=[ + { + 'media': '(prefers-reduced-motion: reduce)', + 'srcset': { + 'img/firefox/nothing-personal/thug-life-img.jpg': '200w' + }, + 'sizes': { + 'default': '200px' + } + }, + { + 'media': '(prefers-reduced-motion: no-preference)', + 'srcset': { + 'img/firefox/nothing-personal/thug-life.gif': '200w' + }, + 'sizes': { + 'default': '200px' + } + } + ], + optional_attributes={ + 'height': '200', + 'loading': 'lazy', + 'width': '200' + } + ) }} +
+ + {% call browser_border(class='mzp-l-content mzp-t-content-md mzp-t-content-nospace', heading='SFAQs', aria_label='Somewhat Frequently Asked Questions') %} +
+

Somewhat Frequently Asked Questions

+ +
Are you even any good?
+

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).

+ +
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?

+ +
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.

+
+
+ + {{ 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 %} +
+ +
+ {{ 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.

+
+ +
+
+

Nothing personal. Just browsing.

+
+ +
+
+
+
+ + +
+{% endblock %} + +{% block js %} + {{ js_bundle('firefox-nothing-personal') }} +{% endblock %} diff --git a/bedrock/firefox/urls.py b/bedrock/firefox/urls.py index 79658bcfea9..f1ca219c8e1 100644 --- a/bedrock/firefox/urls.py +++ b/bedrock/firefox/urls.py @@ -158,6 +158,7 @@ page("firefox/switch/", "firefox/switch.html", ftl_files=["firefox/switch"]), page("firefox/pocket/", "firefox/pocket.html"), page("firefox/share/", "firefox/share.html", active_locales=["de", "fr"]), + page("firefox/nothing-personal/", "firefox/nothing-personal/index.html"), # Issue 6604, SEO firefox/new pages path("firefox/linux/", views.PlatformViewLinux.as_view(), name="firefox.linux"), path("firefox/mac/", views.PlatformViewMac.as_view(), name="firefox.mac"), diff --git a/media/css/firefox/family/styles.scss b/media/css/firefox/family/styles.scss index 26aebcbafbb..76392eb2f02 100644 --- a/media/css/firefox/family/styles.scss +++ b/media/css/firefox/family/styles.scss @@ -32,8 +32,8 @@ font-style: normal; font-display: swap; src: - url('/media/fonts/families/FiraMono-Regular.woff2') format('woff2'), - url('/media/fonts/families/FiraMono-Regular.woff') format('woff'); + url('/media/fonts/fira-mono-font/FiraMono-Regular.woff2') format('woff2'), + url('/media/fonts/fira-mono-font/FiraMono-Regular.woff') format('woff'); } @font-face { @@ -42,8 +42,8 @@ font-style: normal; font-display: swap; src: - url('/media/fonts/families/FiraMono-Bold.woff2') format('woff2'), - url('/media/fonts/families/FiraMono-Bold.woff') format('woff'); + url('/media/fonts/fira-mono-font/FiraMono-Bold.woff2') format('woff2'), + url('/media/fonts/fira-mono-font/FiraMono-Bold.woff') format('woff'); } // Hide top-nav CTA for Firefox browsers diff --git a/media/css/firefox/nothing-personal/_animations.scss b/media/css/firefox/nothing-personal/_animations.scss new file mode 100644 index 00000000000..0706a933640 --- /dev/null +++ b/media/css/firefox/nothing-personal/_animations.scss @@ -0,0 +1,94 @@ +// This Source Code Form is subject to the terms of the Mozilla Public +// 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/. + +.js { + @media (prefers-reduced-motion: no-preference) { + @keyframes pop-in { + 0% { + opacity: 0; + transform: scale(0); + } + + 35% { + opacity: 1; + transform: scale(0.2); + } + + 50% { + transform: scale(0.5); + } + + 65% { + transform: scale(0.7); + } + + 80% { + transform: scale(0.9); + } + + 90% { + transform: scale(1.1); + } + + 100% { + opacity: 1; + transform: scale(1); + } + } + + @keyframes slide-in { + 0% { + opacity: 0; + right: -50%; + } + + 35% { + opacity: 1; + right: -30%; + } + + 65% { + right: -15%; + } + + 100% { + opacity: 1; + right: 0; + } + } + + @keyframes slide-in-mobile { + 0% { + opacity: 0; + margin-left: 200px; + } + + 35% { + opacity: 1; + margin-left: 80px; + } + + 65% { + margin-left: 60px; + } + + 100% { + opacity: 1; + margin-left: auto; + } + } + } + + .animate-pop-in { + animation: 0.5s ease-out 0s 1 normal forwards running pop-in; + } + + .animate-slide-in { + animation: 0.5s ease-out 0s 1 normal forwards running slide-in; + } + + .animate-slide-in-mobile { + animation: 0.5s ease-out 0s 1 normal forwards running slide-in-mobile; + } +} diff --git a/media/css/firefox/nothing-personal/_browser.scss b/media/css/firefox/nothing-personal/_browser.scss new file mode 100644 index 00000000000..266c54fc079 --- /dev/null +++ b/media/css/firefox/nothing-personal/_browser.scss @@ -0,0 +1,232 @@ +// This Source Code Form is subject to the terms of the Mozilla Public +// 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-browser { + border-radius: $border-radius-md; + margin-bottom: $layout-lg; + + .c-browser-bar { + background: url('/media/img/firefox/nothing-personal/browser-dots.svg') left $spacing-md center no-repeat, + $browser-background $browser-cool-gradient; + background-size: 60px 16px, auto; + border-top: $border-black; + border-left: $border-black; + border-right: $border-black; + border-top-left-radius: $border-radius-lg; + border-top-right-radius: $border-radius-lg; + padding: $spacing-sm $spacing-md; + + h3 { + @include font-size(18px); + color: $browser-background; + font-family: 'Fira Mono', 'Andale Mono', monospace; + font-weight: 500; + margin-bottom: 0; + padding-left: 80px; + text-align: center; + white-space: nowrap; + + @media (min-width: $mq-tad-smaller-sm) { + padding: 0; + } + } + } + + .c-browser-content { + background-color: $browser-background; + border: $border-black; + border-bottom-left-radius: $border-radius-lg; + border-bottom-right-radius: $border-radius-lg; + padding: $layout-sm; + + h4, + h5 { + font-family: 'Fira Mono', 'Andale Mono', monospace; + } + + h4 { + margin-bottom: $layout-sm; + } + + h4, + h5, + p { + @include font-size(20px); + } + + h5 { + br { + display: none; + } + } + } + + @media #{$mq-md} { + .c-browser-bar.c-bar-with-heading h3 { + white-space: nowrap; + } + + .c-browser-content { + padding: $layout-xs $layout-md; + + h4, + h5, + p { + @include font-size(22px); + } + + h5 { + br { + display: block; + } + } + } + } + + @media (prefers-reduced-motion: no-preference) { + opacity: 0; + } +} + +.c-browser-window-top-wrapper { + position: relative; + z-index: 10; + + .c-browser-bar { + min-height: 16px; + background: $browser-background url('/media/img/firefox/nothing-personal/browser-dots.svg') left $spacing-md center no-repeat; + background-size: 60px 16px; + } + + .c-browser-window-top { + h2 { + @include text-title-xl; + line-height: 1; + margin: 0; + padding-right: $spacing-lg; + } + + &::after { + position: absolute; + content: ""; + background-image: url("/media/img/firefox/nothing-personal/heart-sticker.svg"); + background-repeat: no-repeat; + background-size: contain; + filter: drop-shadow(5px 4px 13px rgba(0, 0, 0, 0.2)); + height: 82px; + top: 10px; + right: 35px; + width: 90px; + } + } + + @media #{$mq-md} { + margin-bottom: $layout-lg; + + .c-browser-window-top { + h2 { + @include text-title-2xl; + } + + &::after { + height: 95px; + bottom: 6px; + right: 205px; + top: auto; + width: 105px; + } + } + } +} + +// Layered background styles for first window +.c-browser-windows { + padding-top: $layout-lg; + + .c-layered-browser { + position: relative; + margin-bottom: $layout-lg; + + .c-browser { + &::before { + content: ""; + position: absolute; + width: 88%; + height: 99%; + background-color: $color-yellow-30; + border-radius: $border-radius-lg; + top: 15px; + right: 12px; + z-index: -1; + } + } + + @media #{$mq-md} { + margin-bottom: $layout-xl + $layout-xs; // extra room for the layered windows + .c-browser { + &::before { + content: none; + } + } + } + + .c-hidden-browser { + display: none; + + @media #{$mq-md} { + display: block; + + &.yellow { + position: absolute; + right: -20px; + top: 20px; + z-index: 5; + + .c-browser-bar, + .c-browser-content { + background-color: $color-yellow-10; + } + } + + &.dark-yellow { + position: absolute; + top: 40px; + right: -40px; + z-index: 3; + + .c-browser-bar, + .c-browser-content { + background-color: $color-yellow-30; + } + } + + &.darker-yellow { + position: absolute; + top: 60px; + right: -60px; + z-index: 2; + + .c-browser-bar, + .c-browser-content { + background-color: $color-yellow-40; + } + } + + .c-browser-window-top { + h2 { + visibility: hidden; + } + + &::after { + content: none; + } + } + } + } + } +} + +.sticky-window { + position: relative; +} diff --git a/media/css/firefox/nothing-personal/_fonts.scss b/media/css/firefox/nothing-personal/_fonts.scss new file mode 100644 index 00000000000..6d0a0528c7e --- /dev/null +++ b/media/css/firefox/nothing-personal/_fonts.scss @@ -0,0 +1,33 @@ +// This Source Code Form is subject to the terms of the Mozilla Public +// 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/. + +@font-face { + font-family: 'Fira Mono'; + font-weight: normal; + font-style: normal; + font-display: swap; + src: + url('/media/fonts/fira-mono-font/FiraMono-Regular.woff2') format('woff2'), + url('/media/fonts/fira-mono-font/FiraMono-Regular.woff') format('woff'); +} + +@font-face { + font-family: 'Fira Mono'; + font-weight: 500; + font-style: normal; + font-display: swap; + src: + url('/media/fonts/fira-mono-font/FiraMono-Medium.woff2') format('woff2'), + url('/media/fonts/fira-mono-font/FiraMono-Medium.woff') format('woff'); +} + +@font-face { + font-family: 'Fira Mono'; + font-weight: bold; + font-style: normal; + font-display: swap; + src: + url('/media/fonts/fira-mono-font/FiraMono-Bold.woff2') format('woff2'), + url('/media/fonts/fira-mono-font/FiraMono-Bold.woff') format('woff'); +} diff --git a/media/css/firefox/nothing-personal/_fox-gif.scss b/media/css/firefox/nothing-personal/_fox-gif.scss new file mode 100644 index 00000000000..bdb58313a9b --- /dev/null +++ b/media/css/firefox/nothing-personal/_fox-gif.scss @@ -0,0 +1,94 @@ +// This Source Code Form is subject to the terms of the Mozilla Public +// 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-thug-life-gif-wrapper { + text-align: center; + padding-bottom: 0; + display: block; + margin-bottom: $layout-lg; + + @media #{$mq-lg} { + display: none; + } +} + +.c-thug-life-gif { + display: inline-block; + z-index: 10; + + .c-gif { + display: none; + } + + .c-image { + display: block; + } + + img { + border: 3px solid $color-black; + max-height: 200px; + display: block; + } + + &.c-attached-gif { + display: none; + } + + + + @media (prefers-reduced-motion: no-preference) { + .c-gif { + display: block; + } + + .c-image { + display: none; + } + + } + + @media #{$mq-lg} { + &.c-attached-gif { + display: block; + position: absolute; + top: 350px; + left: -105px; + + img { + width: 180px; + height: 180px; + object-fit: cover; + } + + } + + @media (prefers-reduced-motion: no-preference) { + opacity: 0; + } + + &::before { + content: ""; + position: absolute; + min-height: 180px; + width: 180px; + background: $color-white; + border: 3px solid $color-black; + top: 10px; + right: -10px; + z-index: -1; + } + + &::after { + content: ""; + position: absolute; + min-height: 180px; + width: 180px; + background: $color-white; + border: 3px solid $color-black; + top: 20px; + right: -20px; + z-index: -5; + } + } +} diff --git a/media/css/firefox/nothing-personal/_header.scss b/media/css/firefox/nothing-personal/_header.scss new file mode 100644 index 00000000000..c48f2207dd8 --- /dev/null +++ b/media/css/firefox/nothing-personal/_header.scss @@ -0,0 +1,67 @@ +// This Source Code Form is subject to the terms of the Mozilla Public +// 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-page-header { + background-color: $browser-background; + border-bottom: $border-black; + + @media (prefers-reduced-motion: no-preference) { + position: sticky; + top: 0; + z-index: 15; + } +} + +.c-page-header-logo-fx { + @include image-replaced; + margin: 0; + width: 60px; + height: 60px; + background: transparent url('/media/protocol/img/logos/firefox/browser/logo.svg') center left no-repeat; + background-size: contain; + + @media #{$mq-sm} { + width: 180px; + height: 60px; + background-image: url('/media/img/firefox/nothing-personal/firefox-by-mozilla-wordmark.svg'); + } +} + +.c-page-header-inner { + align-items: center; + display: grid; + padding: $spacing-md; + grid-template-columns: 60px 1fr; + gap: 0 $spacing-md; + + .cta-group { + justify-self: end; + + p { + display: none; + } + } + + @media #{$mq-sm} { + grid-template-columns: 180px 1fr; + } +} + +@media #{$mq-lg} { + .c-page-header-inner { + .cta-group { + align-items: center; + display: flex; + justify-self: end; + + p { + @include text-body-lg; + display: block; + font-family: 'Fira Mono', 'Andale Mono', monospace; + font-weight: 500; + margin: 0 $spacing-md 0 0; + } + } + } +} diff --git a/media/css/firefox/nothing-personal/_primary-cta.scss b/media/css/firefox/nothing-personal/_primary-cta.scss new file mode 100644 index 00000000000..5a7e45f1ad5 --- /dev/null +++ b/media/css/firefox/nothing-personal/_primary-cta.scss @@ -0,0 +1,97 @@ + +// This Source Code Form is subject to the terms of the Mozilla Public +// 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/. + +// -------------------- CTA logic ----------------------- // +.mzp-c-button.is-not-default, .mzp-c-button.is-default { + display: none; +} + +html.is-firefox { + #protocol-nav-download-firefox { + display: none; + } + + &.set-default-supported { + .mzp-c-button.is-not-default { + display: block; + } + + .mzp-c-button.is-default { + display: none; + } + + + &.is-firefox-default { + .mzp-c-button.is-default { + display: block; + } + + .mzp-c-button.is-not-default { + display: none; + } + } + } +} + +// If Firefox is unsupported, it'll show an alternative CTA to download Firefox ESR +html.fx-unsupported { + .cta-group { + p { + display: none; + } + } + + #protocol-nav-download-firefox { + color: $color-black; + + a { + color: $color-black; + border: $border-black; + } + } +} // -------------------- end CTA logic ----------------------- // + +// -------------------- CTA styles ----------------------- // + +.c-page-header-inner { /* stylelint-disable no-duplicate-selectors */ + #protocol-nav-download-firefox { + margin-bottom: 0; + + small { + display: none; + } + } + + .mzp-c-button, + #protocol-nav-download-firefox > .mzp-c-button { + @include text-body-lg; + padding: $spacing-sm $spacing-lg; + background-color: $color-yellow-20; + background-image: linear-gradient(to right,$color-yellow-20, $color-orange-50, $color-yellow-20, $color-yellow-20); + background-size: 300% 100%; + border-radius: 0; + color: $color-black; + border-color: $color-black; + transition: all 0.3s ease-out; + + @media (prefers-reduced-motion: reduce) { + background-image: linear-gradient(to right,$color-yellow-20, $color-orange-50); + transition: background-color 0.3s ease-out; + } + + &:hover, + &:focus, + &:active { + border-color: $color-black; + color: $color-black; + box-shadow: $box-shadow-sm; + background-position: 100% 0; + + @media (prefers-reduced-motion: reduce) { + background-image: linear-gradient(to right,$color-yellow-20, $color-yellow-20); + } + } + } +} // -------------------- end CTA styles ----------------------- // diff --git a/media/css/firefox/nothing-personal/_sticky-note.scss b/media/css/firefox/nothing-personal/_sticky-note.scss new file mode 100644 index 00000000000..5cc6e63929c --- /dev/null +++ b/media/css/firefox/nothing-personal/_sticky-note.scss @@ -0,0 +1,95 @@ +// This Source Code Form is subject to the terms of the Mozilla Public +// 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-sticky-note { + @include text-body-lg; + background-image: url('/media/img/firefox/nothing-personal/sticky-note-bg.svg'); + background-repeat: no-repeat; + background-size: contain; + width: 220px; + height: 220px; + margin: 0 auto; + padding: $spacing-xl; + transform: rotate(11deg); + text-align: center; + + &.c-detached-sticky { + display: block; + opacity: 1; + + @media (prefers-reduced-motion: no-preference) { + opacity: 0; + } + } + + &.c-attached-sticky { + display: none; + } + + p, + span, + a { + font-family: 'Fira Mono', 'Andale Mono', monospace; + } + + p { + margin-top: $spacing-xl; + } + + span { + font-weight: bold; + } + + @media #{$mq-lg} { + &.c-detached-sticky { + display: none; + } + + &.c-attached-sticky { + display: block; + position: absolute; + bottom: -80px; + margin-right: -150px; + opacity: 1; + + @media (prefers-reduced-motion: no-preference) { + opacity: 0; + } + } + } +} + +.c-sticky-note > .c-button-download-thanks { + margin-bottom: 0; + + a { + @include text-body-lg; + border: 0; + background: transparent; + color: $color-black; + padding: 0; + + &:hover, + &:focus, + &:active { + background-color: transparent; + color: $color-black; + text-decoration: underline solid $color-black !important; /* stylelint-disable-line declaration-no-important */ + text-decoration-thickness: 2px !important;/* stylelint-disable-line declaration-no-important */ + } + } + + small { + display: none; + } +} + +// If Firefox is unsupported, it'll show an alternative CTA to download Firefox ESR. +// However, the ESR CTA and warning message do not fit in the sticky note, +// so decided to remove the sticky note from the DOM instead. +html.fx-unsupported { + .c-sticky-note { + display: none; + } +} diff --git a/media/css/firefox/nothing-personal/styles.scss b/media/css/firefox/nothing-personal/styles.scss new file mode 100644 index 00000000000..04432b273f7 --- /dev/null +++ b/media/css/firefox/nothing-personal/styles.scss @@ -0,0 +1,122 @@ +// This Source Code Form is subject to the terms of the Mozilla Public +// 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/. + +@use 'sass:color'; + +$font-path: '/media/protocol/fonts'; +$image-path: '/media/protocol/img'; + +@import '~@mozilla-protocol/core/protocol/css/includes/lib'; + +$browser-background: #f8f6f4; +$page-background: #333336; +$browser-cool-gradient: linear-gradient(to right,$color-blue-40, $color-violet-50); +$border-black: 2px solid $color-black; +$mq-tad-smaller-sm: 455px; + +@import './fonts'; +@import './animations'; +@import './header'; +@import './primary-cta'; +@import './browser'; +@import './fox-gif'; +@import './sticky-note'; + +.c-page-main-content { + background: $page-background 60% 10% / cover no-repeat url('/media/img/firefox/nothing-personal/grid-background.svg'); + font-family: 'Fira Mono', 'Andale Mono', monospace; + position: relative; + + section { + display: flex; + flex-direction: column; + align-items: center; + } + + aside { + display: none; + } + + @media (prefers-reduced-motion: no-preference) and (#{$mq-sm}) { + background-attachment: fixed; + } + + @media #{$mq-lg} { + aside { + display: flex; + flex-direction: column; + position: absolute; + text-align: center; + top: 105px; + right: 0; + + a, .c-trash { + color: $color-white; + display: flex; + flex-direction: column; + align-items: center; + margin-bottom: $spacing-2xl; + padding: $spacing-sm; + border: 2px solid transparent; + + &:hover, + &:active, + &:focus { + background-color: $color-blue-60; + color: $color-white; + border: 2px dotted $color-white; + } + } + + .c-trash { + cursor: default; + } + } + } + + @media #{$mq-xl} { + aside { + right: 140px; + } + } +} + +.c-sign-off { + @include font-firefox; + @include text-title-xs; + margin: $layout-lg 0; + + .c-nothing-personal { + padding: 12px; + + p { + @include image-replaced; + background: transparent url('/media/img/firefox/nothing-personal/tagline.svg') center center no-repeat; + background-size: contain; + width: 300px; + height: 36px; + } + + .c-sign-off-wordmark { + text-align: center; + } + } + + @media #{$mq-md} { + margin-top: 0; + + .c-nothing-personal p { + width: 415px; + height: 51px; + } + } +} + +// Make sure content is visible of JS fails +html.no-js { + .c-browser, + .c-sticky-note.c-detached-sticky { + opacity: 1 !important; /* stylelint-disable-line declaration-no-important */ + } +} diff --git a/media/fonts/families/FiraMono-Bold.woff b/media/fonts/fira-mono-font/FiraMono-Bold.woff similarity index 100% rename from media/fonts/families/FiraMono-Bold.woff rename to media/fonts/fira-mono-font/FiraMono-Bold.woff diff --git a/media/fonts/families/FiraMono-Bold.woff2 b/media/fonts/fira-mono-font/FiraMono-Bold.woff2 similarity index 100% rename from media/fonts/families/FiraMono-Bold.woff2 rename to media/fonts/fira-mono-font/FiraMono-Bold.woff2 diff --git a/media/fonts/fira-mono-font/FiraMono-Medium.woff b/media/fonts/fira-mono-font/FiraMono-Medium.woff new file mode 100644 index 00000000000..a33c7245c53 Binary files /dev/null and b/media/fonts/fira-mono-font/FiraMono-Medium.woff differ diff --git a/media/fonts/fira-mono-font/FiraMono-Medium.woff2 b/media/fonts/fira-mono-font/FiraMono-Medium.woff2 new file mode 100644 index 00000000000..610e9b2071e Binary files /dev/null and b/media/fonts/fira-mono-font/FiraMono-Medium.woff2 differ diff --git a/media/fonts/families/FiraMono-Regular.woff b/media/fonts/fira-mono-font/FiraMono-Regular.woff similarity index 100% rename from media/fonts/families/FiraMono-Regular.woff rename to media/fonts/fira-mono-font/FiraMono-Regular.woff diff --git a/media/fonts/families/FiraMono-Regular.woff2 b/media/fonts/fira-mono-font/FiraMono-Regular.woff2 similarity index 100% rename from media/fonts/families/FiraMono-Regular.woff2 rename to media/fonts/fira-mono-font/FiraMono-Regular.woff2 diff --git a/media/img/firefox/nothing-personal/bin-icon.svg b/media/img/firefox/nothing-personal/bin-icon.svg new file mode 100644 index 00000000000..7c9eea5763f --- /dev/null +++ b/media/img/firefox/nothing-personal/bin-icon.svg @@ -0,0 +1 @@ + diff --git a/media/img/firefox/nothing-personal/browser-dots.svg b/media/img/firefox/nothing-personal/browser-dots.svg new file mode 100644 index 00000000000..36e351bfea6 --- /dev/null +++ b/media/img/firefox/nothing-personal/browser-dots.svg @@ -0,0 +1 @@ + diff --git a/media/img/firefox/nothing-personal/firefox-by-mozilla-wordmark-white.svg b/media/img/firefox/nothing-personal/firefox-by-mozilla-wordmark-white.svg new file mode 100644 index 00000000000..2daebd55060 --- /dev/null +++ b/media/img/firefox/nothing-personal/firefox-by-mozilla-wordmark-white.svg @@ -0,0 +1 @@ + diff --git a/media/img/firefox/nothing-personal/firefox-by-mozilla-wordmark.svg b/media/img/firefox/nothing-personal/firefox-by-mozilla-wordmark.svg new file mode 100644 index 00000000000..af80bbae91b --- /dev/null +++ b/media/img/firefox/nothing-personal/firefox-by-mozilla-wordmark.svg @@ -0,0 +1 @@ + diff --git a/media/img/firefox/nothing-personal/folder-icon.svg b/media/img/firefox/nothing-personal/folder-icon.svg new file mode 100644 index 00000000000..7df2ace19b3 --- /dev/null +++ b/media/img/firefox/nothing-personal/folder-icon.svg @@ -0,0 +1 @@ + diff --git a/media/img/firefox/nothing-personal/grid-background.svg b/media/img/firefox/nothing-personal/grid-background.svg new file mode 100644 index 00000000000..af2193a44a4 --- /dev/null +++ b/media/img/firefox/nothing-personal/grid-background.svg @@ -0,0 +1 @@ + diff --git a/media/img/firefox/nothing-personal/heart-sticker.svg b/media/img/firefox/nothing-personal/heart-sticker.svg new file mode 100644 index 00000000000..7900abcb3ed --- /dev/null +++ b/media/img/firefox/nothing-personal/heart-sticker.svg @@ -0,0 +1 @@ + diff --git a/media/img/firefox/nothing-personal/meta-img.png b/media/img/firefox/nothing-personal/meta-img.png new file mode 100644 index 00000000000..cb565951ba4 Binary files /dev/null and b/media/img/firefox/nothing-personal/meta-img.png differ diff --git a/media/img/firefox/nothing-personal/music-icon.svg b/media/img/firefox/nothing-personal/music-icon.svg new file mode 100644 index 00000000000..1daa23efd79 --- /dev/null +++ b/media/img/firefox/nothing-personal/music-icon.svg @@ -0,0 +1 @@ + diff --git a/media/img/firefox/nothing-personal/sticky-note-bg.svg b/media/img/firefox/nothing-personal/sticky-note-bg.svg new file mode 100644 index 00000000000..f406ac6daa4 --- /dev/null +++ b/media/img/firefox/nothing-personal/sticky-note-bg.svg @@ -0,0 +1 @@ + diff --git a/media/img/firefox/nothing-personal/tagline.svg b/media/img/firefox/nothing-personal/tagline.svg new file mode 100644 index 00000000000..fd072f92cbb --- /dev/null +++ b/media/img/firefox/nothing-personal/tagline.svg @@ -0,0 +1 @@ + diff --git a/media/img/firefox/nothing-personal/thug-life-img.jpg b/media/img/firefox/nothing-personal/thug-life-img.jpg new file mode 100644 index 00000000000..225b7d87d6e Binary files /dev/null and b/media/img/firefox/nothing-personal/thug-life-img.jpg differ diff --git a/media/img/firefox/nothing-personal/thug-life.gif b/media/img/firefox/nothing-personal/thug-life.gif new file mode 100644 index 00000000000..59e8aaa5b5f Binary files /dev/null and b/media/img/firefox/nothing-personal/thug-life.gif differ diff --git a/media/js/firefox/family/fx-is-default.es6.js b/media/js/base/fx-is-default.es6.js similarity index 71% rename from media/js/firefox/family/fx-is-default.es6.js rename to media/js/base/fx-is-default.es6.js index 61a5164d841..b35d259ffaf 100644 --- a/media/js/firefox/family/fx-is-default.es6.js +++ b/media/js/base/fx-is-default.es6.js @@ -18,11 +18,12 @@ const FirefoxDefault = { }, isSupported: () => { - return Mozilla.Client._isFirefoxDesktop() && 'Promise' in window; + return Mozilla.Client.isFirefoxDesktop && 'Promise' in window; }, - init: () => { - const main = document.querySelector('main'); + // Update `element` when running the init() function during initialization to be the query selector you want targeted + init: (element) => { + const targetElement = document.querySelector(element); if (!FirefoxDefault.isSupported()) { return; @@ -30,10 +31,10 @@ const FirefoxDefault = { return new window.Promise(function (resolve) { Mozilla.UITour.ping(() => { - main.classList.add('set-default-supported'); + targetElement.classList.add('set-default-supported'); FirefoxDefault.isDefaultBrowser() .then(function () { - main.classList.add('is-firefox-default'); + targetElement.classList.add('is-firefox-default'); resolve(); }) .catch(() => resolve()); diff --git a/media/js/firefox/challenge-the-default/device-detect.es6.js b/media/js/firefox/challenge-the-default/device-detect.es6.js index 4a4e6a73d68..b67fc67eb17 100644 --- a/media/js/firefox/challenge-the-default/device-detect.es6.js +++ b/media/js/firefox/challenge-the-default/device-detect.es6.js @@ -4,7 +4,7 @@ * file, You can obtain one at https://mozilla.org/MPL/2.0/. */ -import FirefoxDefault from '../family/fx-is-default.es6'; +import FirefoxDefault from '../../base/fx-is-default.es6'; const compareTable = document.querySelector('.comparison-table'); @@ -41,4 +41,4 @@ const browser = detectDevice(); compareTable.dataset.selectedBrowser = browser || 'chrome'; // check if firefox is set to default on startup -FirefoxDefault.init(); +FirefoxDefault.init('main'); diff --git a/media/js/firefox/family/fx-is-default-init.es6.js b/media/js/firefox/family/fx-is-default-init.es6.js index 4c845efc65d..891ccbccced 100644 --- a/media/js/firefox/family/fx-is-default-init.es6.js +++ b/media/js/firefox/family/fx-is-default-init.es6.js @@ -4,6 +4,6 @@ * file, You can obtain one at https://mozilla.org/MPL/2.0/. */ -import FirefoxDefault from './fx-is-default.es6'; +import FirefoxDefault from '../../base/fx-is-default.es6'; -FirefoxDefault.init(); +FirefoxDefault.init('main'); diff --git a/media/js/firefox/nothing-personal/animate-pop-in.es6.js b/media/js/firefox/nothing-personal/animate-pop-in.es6.js new file mode 100644 index 00000000000..bc37a6f4aee --- /dev/null +++ b/media/js/firefox/nothing-personal/animate-pop-in.es6.js @@ -0,0 +1,94 @@ +/* + * This Source Code Form is subject to the terms of the Mozilla Public + * 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/. + */ + +let observer; +let browser; +let attachedStickyNote; +let detachedStickyNote; +let stickyGif; + +function createObserver() { + return new IntersectionObserver(function (entries) { + let chain = Promise.resolve(); + entries.forEach(function (entry) { + if (entry.isIntersecting) { + if (entry.target.classList.contains('c-browser')) { + // chain promises with a 200ms delay in between each one + chain = chain.then(() => popIn(entry.target)); + // remove target observer after triggering animation + observer.unobserve(entry.target); + } else if ( + entry.target.classList.contains('c-attached-sticky') + ) { + slideIn(entry.target); + } else if ( + entry.target.classList.contains('c-detached-sticky') + ) { + slideInMobile(entry.target); + } else if (entry.target.classList.contains('c-thug-life-gif')) { + popIn(entry.target); + } + } + }); + }); +} + +function init() { + if ( + window.MzpSupports.intersectionObserver && + window.Mozilla.Utils.allowsMotion() + ) { + browser = document.querySelector('.c-browser'); + attachedStickyNote = document.querySelector('.c-attached-sticky'); + detachedStickyNote = document.querySelector('.c-detached-sticky'); + stickyGif = document.querySelector('.c-thug-life-gif'); + observer = createObserver(); + + document.querySelectorAll('.c-browser').forEach(function (element) { + observer.observe(element); + }); + + document + .querySelectorAll('.c-thug-life-gif') + .forEach(function (element) { + observer.observe(element); + }); + + observer.observe(browser); + observer.observe(attachedStickyNote); + observer.observe(detachedStickyNote); + observer.observe(stickyGif); + } +} + +function popIn(element) { + return new Promise((res) => { + setTimeout(() => { + element.classList.add('animate-pop-in'); + res(); + }, 200); + }); +} + +function slideIn(element) { + return new Promise((res) => { + setTimeout(() => { + element.classList.add('animate-slide-in'); + res(); + }, 800); + }); +} + +function slideInMobile(element) { + return new Promise((res) => { + setTimeout(() => { + element.classList.add('animate-slide-in-mobile'); + res(); + }, 800); + }); +} + +init(); diff --git a/media/js/firefox/nothing-personal/fx-is-default-init.es6.js b/media/js/firefox/nothing-personal/fx-is-default-init.es6.js new file mode 100644 index 00000000000..ead4a82576f --- /dev/null +++ b/media/js/firefox/nothing-personal/fx-is-default-init.es6.js @@ -0,0 +1,9 @@ +/* + * This Source Code Form is subject to the terms of the Mozilla Public + * 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 FirefoxDefault from '../../base/fx-is-default.es6'; + +FirefoxDefault.init('html'); diff --git a/media/static-bundles.json b/media/static-bundles.json index 02c29113532..62a641e3163 100644 --- a/media/static-bundles.json +++ b/media/static-bundles.json @@ -1172,6 +1172,12 @@ ], "name": "challenge-the-default" }, + { + "files": [ + "css/firefox/nothing-personal/styles.scss" + ], + "name": "firefox-nothing-personal" + }, { "files": [ "css/products/monitor/waitlist.scss" @@ -1805,7 +1811,6 @@ "js/firefox/family/subnav.js", "js/firefox/family/banner.es6.js", "js/firefox/family/banner-init.es6.js", - "js/firefox/family/fx-is-default.es6.js", "js/firefox/family/fx-is-default-init.es6.js", "js/firefox/family/copy-to-clipboard.js", "js/firefox/family/animate-pop-in.es6.js", @@ -1825,6 +1830,13 @@ ], "name": "challenge-the-default" }, + { + "files": [ + "js/firefox/nothing-personal/fx-is-default-init.es6.js", + "js/firefox/nothing-personal/animate-pop-in.es6.js" + ], + "name": "firefox-nothing-personal" + }, { "files": [ "js/products/mozsocial/invite.es6.js" diff --git a/tests/unit/spec/firefox/family/fx-is-default.js b/tests/unit/spec/firefox/default-status/fx-is-default.js similarity index 92% rename from tests/unit/spec/firefox/family/fx-is-default.js rename to tests/unit/spec/firefox/default-status/fx-is-default.js index 2cab579cdfc..af812e282f4 100644 --- a/tests/unit/spec/firefox/family/fx-is-default.js +++ b/tests/unit/spec/firefox/default-status/fx-is-default.js @@ -9,7 +9,7 @@ * Sinon docs: http://sinonjs.org/docs/ */ -import FirefoxDefault from '../../../../../media/js/firefox/family/fx-is-default.es6.js'; +import FirefoxDefault from '../../../../../media/js/base/fx-is-default.es6.js'; describe('fx-is-default.js', function () { beforeEach(function () { @@ -39,7 +39,7 @@ describe('fx-is-default.js', function () { } ); - return FirefoxDefault.init().then(() => { + return FirefoxDefault.init('main').then(() => { expect(document.querySelector('main').classList).toContain( 'is-firefox-default' ); @@ -59,7 +59,7 @@ describe('fx-is-default.js', function () { } ); - return FirefoxDefault.init().then(() => { + return FirefoxDefault.init('main').then(() => { expect(document.querySelector('main').classList).not.toContain( 'is-firefox-default' );