diff --git a/bedrock/firefox/templates/firefox/nothing-personal/includes/browser-macro.html b/bedrock/firefox/templates/firefox/nothing-personal/includes/browser-macro.html index 45aa055cfe6..37ea873afeb 100644 --- a/bedrock/firefox/templates/firefox/nothing-personal/includes/browser-macro.html +++ b/bedrock/firefox/templates/firefox/nothing-personal/includes/browser-macro.html @@ -10,12 +10,12 @@ heading=None, aria_label=None ) -%} -
+
{% if heading and aria_label %} -

{{ heading }}

+

{{ heading }}

{% elif heading %} -

{{ heading }}

+

{{ heading }}

{% endif %}
diff --git a/bedrock/firefox/templates/firefox/nothing-personal/index.html b/bedrock/firefox/templates/firefox/nothing-personal/index.html index c11088f3b3c..90a14bef4b6 100644 --- a/bedrock/firefox/templates/firefox/nothing-personal/index.html +++ b/bedrock/firefox/templates/firefox/nothing-personal/index.html @@ -27,6 +27,8 @@ {% set ios_url = 'https://apps.apple.com/us/app/firefox-private-safe-browser/id989804926?ppid=fb7ff70c-585e-4c32-bd90-f3abb0500d2a&ct=nothing-personal&mt=8' %} {% set android_url = 'https://play.google.com/store/apps/details?id=org.mozilla.firefox&listing=nothing_personal&referrer=utm_source%3Dwww.mozilla.org%26utm_medium%3Dreferral%26utm_campaign%3Dnothing-personal' %} +{% set utm_params = 'utm_source=www.mozilla.org&utm_medium=referral&utm_campaign=nothing-personal' %} + {% block content %}
@@ -46,80 +48,123 @@

Firefox by Mozilla

-
-
-
-
- {% 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

+
+
+
+
+

Ok, we admit it: we’re fast, reliable and private.

+

We don’t need to watch everything you do online to get you where you need to go.

- {% 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

+
+ +
+ Cartoon fox slides back into bush, disappearing from view +
+ {% call browser_border(class='c-things-browser', heading="What would Firefox do?") %} +

Things we’d rather do than go through your personal data

+
+
    +
  • Work out to elevator music
    • +
  • Have a pigeon as a roommate
    • +
  • Eat buffet oysters
    • +
  • Sit next to a crying infant on a plane
    • +
  • Reset password only to be told you can’t use your existing password
    • +
+
+
All the things!
 +
    +
  • Get into a passionate debate with a bot in the comments
    • +
  • Sit in a waiting room with no signal AND no gossip magazines
    • +
  • Bare feet → Lego bricks
    • +
  • Floss (not the dance... but also the dance)
    • +
  • Lose an earbud on a long walk
    • +
  • Peel wet asparagus
    • +
  • Go to a wedding alone where we don’t know anyone
    • +
  • Fold a fitted sheet :( :( :(
    • +
  • Clean up hairballs from someone else’s cat
    • +
  • Detangle headphone cables
    • +
  • Assemble a dresser without the instructions
    • +
  • Paint toenails while holding brush in our teeth
    • +
  • Look for the end of the tape roll
    • +
  • Explain what memes are to Uncle Gary
    • +
  • Try to track down where a weird smell is coming from... and fail
    • +
  • Leave phone at home 😱
    • +
+
+
+
+

+
+
+ +

And keep clicking

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

+
+ +
+
+

The thing is, your privacy has always been our thing

+

Experience the internet the way you want — without the data tradeoffs.

- {% 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

+
+ {% call browser_border(class='c-privacy-default') %} + +

Your privacy is respected by default

+

No need to dig through your privacy settings — with Firefox your personal data is private by default.

+ {% endcall %} + {% call browser_border() %} + +

Keep third-party trackers off your trail

+

We make it hard for cookies and trackers to follow you around, so they can’t get data about you they definitely don’t need.

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

+
+ +
+
+

Here’s why people dump their other browsers for us

+
+
+
+

+ + We’re fast. Like, really fast. +

+

With Firefox, there’s no waiting around. Web pages and videos load in a flash, and we’re getting faster every day.

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

+ + You can count on us +

+

We can handle all your tabs, streams, vision boards — whatever you need, we can hold it down.

+
+
+

+ + Features with a following +

+

Our actually-useful features are kind of a big deal. Fan favorites include popping out videos and a built-in PDF editor.

+
+
+

+ + We make switching easy +

+

Bring over your browsing history, bookmarks, extensions and logins with just a few clicks.

- -
-
+
+ +
+
- - +
+ +
{% endblock %} {% block js %} diff --git a/media/css/firefox/nothing-personal/_animations.scss b/media/css/firefox/nothing-personal/_animations.scss index a6b70ac0b18..b70aab7bc11 100644 --- a/media/css/firefox/nothing-personal/_animations.scss +++ b/media/css/firefox/nothing-personal/_animations.scss @@ -48,18 +48,6 @@ right: 0; } } - - @keyframes slide-in-mobile { - 0% { - left: 100%; - opacity: 0; - } - - 100% { - left: 0; - opacity: 1; - } - } } .animate-pop-in { @@ -69,8 +57,4 @@ .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 index 6623945f840..28cf15eca00 100644 --- a/media/css/firefox/nothing-personal/_browser.scss +++ b/media/css/firefox/nothing-personal/_browser.scss @@ -4,226 +4,55 @@ .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: end; - white-space: nowrap; - - @media (min-width: $mq-tad-smaller-sm) { - text-align: center; - 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; - } - } - } +.c-browser-bar { + --heading-size: var(--body-sm-size); + 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; + min-height: 1rem; // fallback + min-height: var(--heading-size); // reserve space for bars without text @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; + --heading-size: var(--title-3xs-size); } } -.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 { - line-height: 1; - margin: 0; - padding-right: $spacing-lg; - @include text-title-xl; - } +.c-browser-bar-title { + color: $browser-background; + font-family: 'Fira Mono', 'Andale Mono', monospace; + font-size: var(--heading-size); + font-weight: 500; + margin-bottom: 0; + padding-left: 80px; + text-align: end; + white-space: nowrap; - &::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 { - &::after { - height: 95px; - bottom: 6px; - right: 205px; - top: auto; - width: 105px; - } - } + @media (min-width: $mq-tad-smaller-sm) { + text-align: center; + padding: 0; } } -// 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; +.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: 40px $layout-sm; - &.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; - } - } - } - } + h4 { + margin-bottom: $layout-sm; } -} -.sticky-window { - position: relative; + > *:last-child { + margin-bottom: 0; + } } diff --git a/media/css/firefox/nothing-personal/_feature-box.scss b/media/css/firefox/nothing-personal/_feature-box.scss new file mode 100644 index 00000000000..905d7375ab6 --- /dev/null +++ b/media/css/firefox/nothing-personal/_feature-box.scss @@ -0,0 +1,19 @@ +// 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-feature-box { + background-color: $browser-background; + border-radius: $border-radius-md; + padding: $layout-sm; // match browser components + + > *:last-child { + margin-bottom: 0; + } +} + +.c-feature-box-title { + align-items: center; + display: flex; + gap: $spacing-md; +} diff --git a/media/css/firefox/nothing-personal/_fox-gif.scss b/media/css/firefox/nothing-personal/_fox-gif.scss index bdb58313a9b..6b38acd8dc6 100644 --- a/media/css/firefox/nothing-personal/_fox-gif.scss +++ b/media/css/firefox/nothing-personal/_fox-gif.scss @@ -2,69 +2,21 @@ // 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; - } -} - +// TODO: check mobile/tablet expectations for this asset .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; - } - - } + display: none; @media #{$mq-lg} { - &.c-attached-gif { - display: block; - position: absolute; - top: 350px; - left: -105px; - - img { - width: 180px; - height: 180px; - object-fit: cover; - } - - } + display: inline-block; + position: relative; + z-index: 10; - @media (prefers-reduced-motion: no-preference) { - opacity: 0; + img { + border: 3px solid $color-black; + display: block; + width: 180px; + height: 180px; + object-fit: cover; } &::before { diff --git a/media/css/firefox/nothing-personal/_sticky-note.scss b/media/css/firefox/nothing-personal/_sticky-note.scss index 483dcef66ca..231ad8e7aff 100644 --- a/media/css/firefox/nothing-personal/_sticky-note.scss +++ b/media/css/firefox/nothing-personal/_sticky-note.scss @@ -8,27 +8,12 @@ background-size: contain; width: 200px; height: 220px; - margin: 0 auto; + margin: $spacing-xl auto $layout-lg; padding: $spacing-xl; - transform: rotate(11deg); + transform: rotate(5deg); text-align: center; @include text-body-lg; - &.c-detached-sticky { - position: relative; - margin: 0 auto; - display: block; - opacity: 1; - - @media (prefers-reduced-motion: no-preference) { - opacity: 0; - } - } - - &.c-attached-sticky { - display: none; - } - p, span, a { @@ -42,25 +27,6 @@ span { font-weight: bold; } - - @media #{$mq-lg} { - &.c-detached-sticky { - display: none; - } - - &.c-attached-sticky { - display: block; - position: absolute; - bottom: -80px; - right: 0; - margin-right: -150px; - opacity: 1; - - @media (prefers-reduced-motion: no-preference) { - opacity: 0; - } - } - } } .c-sticky-note > .c-button-download-thanks { diff --git a/media/css/firefox/nothing-personal/_things.scss b/media/css/firefox/nothing-personal/_things.scss new file mode 100644 index 00000000000..644a951ee3e --- /dev/null +++ b/media/css/firefox/nothing-personal/_things.scss @@ -0,0 +1,227 @@ +// 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-things { + @media screen and (max-width: #{$screen-md}) { + // no room on mobile for browser buttons and fox sticker + .c-browser-bar { + background: $browser-background $browser-cool-gradient; + } + } + + .c-browser-bar h3 { + padding-left: 0; + text-align: start; + + @media (min-width: $mq-tad-smaller-sm) { + text-align: center; + padding: 0; + } + } +} + +.c-things-list-container { + display: none; +} + +.c-things-list { + background-color: var(--background-color); + border: $border-black; + padding: $spacing-md; + + &.mzp-u-list-styled { + margin-left: 0; + padding-left: $spacing-xl; + } +} + +.c-things-browser-fox-bush-container { + position: relative; +} + +$fox-bush-width: 124px; +$fox-bush-height: 79px; + +.c-things-fox-bush { + display: none; + + @media #{$mq-lg} { + display: block; + position: absolute; + left: -#{$layout-xl}; + top: $layout-lg; + + &::after { + content: ''; + position: absolute; + background-color: #0EBF45; + height: $fox-bush-height; + width: $fox-bush-width; + left: 10px; + top: 10px; + } + } +} + +.c-things-fox-bush-image { + height: $fox-bush-height; + width: $fox-bush-width; + object-fit: cover; + object-position: bottom; // cut off browser bar at top + position: relative; + z-index: 10; +} + +.c-things-browser { + position: relative; + + &::before { + position: absolute; + content: ""; + background-image: url("/media/img/firefox/nothing-personal/foxy-sticker.svg"); + background-repeat: no-repeat; + background-size: contain; + transform: rotate(15deg); + height: 80px; + width: 100px; + right: 0; + top: -20px; + + @media #{$mq-md} { + height: 100px; + width: 122px; + right: -70px; + top: 30px; + } + } + + &::after { + position: absolute; + content: ""; + background-image: url("/media/img/firefox/nothing-personal/heart-smiley-stickers.svg"); + background-repeat: no-repeat; + background-size: contain; + height: 107px; + width: 128px; + left: 10px; + bottom: -70px; + + @media #{$mq-md} { + left: 30px; + } + } +} + +.c-things-output-container { + background-color: var(--background-color); + border: $border-black; + margin-bottom: $layout-sm; // match title margin + padding: $spacing-md; +} + +.c-things-output { + margin-bottom: 0; + text-wrap: pretty; +} + +.c-things-button-container { + text-align: center; +} + +$sparkle-size: 22px; + +// TODO: confirm hover, focus, active styling +.c-things-button { + $push-depth: 2px; + background-color: $color-pink-10; + background-image: linear-gradient(to right,$color-pink-10, $color-pink-10, $color-pink-40, $color-pink-10, $color-pink-10); + background-size: 400% 100%; + border: $border-black; + box-shadow: $spacing-xs $spacing-xs var(--background-color-inverse); + display: flex; // center text within button + margin-right: auto; + margin-left: auto; + margin-bottom: $spacing-sm; + padding: $spacing-md; + position: relative; + + @media #{$mq-md} { + padding: $spacing-md $spacing-lg; + } + + @media (prefers-reduced-motion: reduce) { + &:hover, + &:focus-visible { + background-position: 200% 0; + } + } + + @media (prefers-reduced-motion: no-preference) { + transition: background-position 0.3s ease-out; + + &:hover, + &:focus-visible { + background-position: 100% 0; + } + } + + &:active { + transform: translate($push-depth, $push-depth); + box-shadow: $push-depth $push-depth var(--background-color-inverse); + } + + &::before, + &::after { + position: absolute; + content: ""; + background-image: url("/media/img/firefox/nothing-personal/sparkle.svg"); + background-repeat: no-repeat; + background-size: contain; + height: $sparkle-size; + width: $sparkle-size; + } + + // top left + &::before { + left: -17px; + top: 5px; + } + + // bottom right + &::after { + right: -10px; + bottom: -10px; + } +} + +// top right +.c-things-button-sparkle { + position: absolute; + width: $sparkle-size; + height: $sparkle-size; + top: -12px; + right: 10px; +} + +.c-things-note { + @include text-body-xs; + /* stylelint-disable-next-line declaration-no-important */ + margin-bottom: 0 !important; // override the extra specificity margin from c-browser + + @media #{$mq-md} { + @include text-body-sm; + } +} + +// use details instead of button +html.no-js { + .c-things-list-container { + display: block; + } + + .c-things-output-container, + .c-things-button-container { + display: none; + } +} diff --git a/media/css/firefox/nothing-personal/styles.scss b/media/css/firefox/nothing-personal/styles.scss index 0bbb5fb412f..d2b1ddf1180 100644 --- a/media/css/firefox/nothing-personal/styles.scss +++ b/media/css/firefox/nothing-personal/styles.scss @@ -15,6 +15,7 @@ $browser-cool-gradient: linear-gradient(to right,$color-blue-40, $color-violet-5 $border-black: 2px solid $color-black; $mq-tad-smaller-sm: 455px; +@import './feature-box'; @import './fonts'; @import './animations'; @import './header'; @@ -22,82 +23,185 @@ $mq-tad-smaller-sm: 455px; @import './browser'; @import './fox-gif'; @import './sticky-note'; +@import './things'; -.c-page-main-content { - background: $page-background 60% 10% / cover no-repeat url('/media/img/firefox/nothing-personal/grid-background.svg'); +.u-text-uppercase { + text-transform: uppercase; +} + +.c-content-layout { font-family: 'Fira Mono', 'Andale Mono', monospace; - position: relative; + padding-top: $layout-lg; + padding-bottom: $layout-lg; + background: $page-background 60% 10% / cover no-repeat url('/media/img/firefox/nothing-personal/grid-background.svg'); - section { - display: flex; - flex-direction: column; - align-items: center; - overflow-x: hidden; + @media (prefers-reduced-motion: no-preference) and (#{$mq-sm}) { + background-attachment: fixed; + } +} + +.c-main { + > *:not(:last-child) { + margin-bottom: calc(#{$layout-xl} + #{$layout-xs}); + + @media #{$mq-md} { + margin-bottom: calc(#{$layout-xl} + #{$layout-md}); + } } - aside { - display: none; + .mzp-t-content-md { + max-width: remify(510px); } +} - @media (prefers-reduced-motion: no-preference) and (#{$mq-sm}) { - background-attachment: fixed; +.c-aside { + display: none; +} + +// Add aside sidebar +@media #{$mq-lg} { + .c-content-layout { + display: grid; + grid-template-columns: 1fr [main-start] auto [main-end aside-start] 1fr [aside-end]; + } + + .c-main { + grid-area: main; } - @media #{$mq-lg} { - aside { + .c-aside { + grid-area: aside; + display: flex; + flex-direction: column; + margin-left: -#{$layout-lg}; // shift over padding + justify-self: start; + position: relative; + text-align: center; + + a, .c-trash { + color: $color-white; display: flex; flex-direction: column; - position: absolute; - text-align: center; - top: 105px; - right: 0; + align-items: center; + margin-bottom: $spacing-2xl; + padding: $spacing-sm; + text-decoration: none; + cursor: default; + } - a, .c-trash { + a { + &:hover, + &:active, + &:focus { color: $color-white; - display: flex; - flex-direction: column; - align-items: center; - margin-bottom: $spacing-2xl; - padding: $spacing-sm; - text-decoration: none; - cursor: default; } - a { - &:hover, - &:active, - &:focus { - color: $color-white; - } - - &:active, - &:focus { - background-color: $color-blue-60; - } + &:active, + &:focus { + background-color: $color-blue-60; } } } +} + +.c-text-section { + margin-bottom: $spacing-xl; + + * { + color: var(--body-text-color-inverse); + } +} + +.c-text-title { + @include font-size(34px); + margin-bottom: $spacing-xl; + + @media #{$mq-md} { + @include font-size(38px); + } +} + +.c-text-body { + @include text-body-md; + font-weight: 500; - @media #{$mq-xl} { - aside { - right: 140px; + @media #{$mq-md} { + @include text-body-lg; + } +} + +.c-mono-title { + @include text-body-md; + font-family: 'Fira Mono', 'Andale Mono', monospace; + font-weight: 700; +} + +@media #{$mq-md} { + // sizing + .c-things, + .c-newsletter { + .c-mono-title { + @include text-body-lg; + } + } + + // line breaking + .c-feature-fast, + .c-privacy-default { + .c-mono-title { + max-width: 25ch; + } + } +} + +.c-grid { + display: grid; + gap: $spacing-md; + + @media #{$mq-md} { + grid-template-columns: repeat(2, minmax(0, 1fr)); + + &.mzp-t-content-md { + max-width: $screen-md; } } } +// TODO: fix dimensions/high-res +// TODO: get proper default privacy image (centered & with shield) +.c-privacy-image { + display: block; + width: 100%; + margin-bottom: $spacing-md; +} + +.c-slide-in-container { + overflow: hidden; +} + +.c-newsletter-gif-container { + position: relative; +} + +// bit magic number-y :( +.c-thug-life-gif { + position: absolute; + left: -170px; + top: -50px; +} + .c-sign-off { - margin: $layout-lg 0; @include text-title-xs; .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; + margin-right: auto; + margin-left: auto; } .c-sign-off-wordmark { @@ -106,8 +210,6 @@ $mq-tad-smaller-sm: 455px; } @media #{$mq-md} { - margin-top: 0; - .c-nothing-personal p { width: 415px; height: 51px; @@ -115,10 +217,42 @@ $mq-tad-smaller-sm: 455px; } } +// Special border padding overrides +@media (max-width: #{$screen-sm}) { + .c-things { + .c-browser-content { + padding-right: $spacing-md; + padding-left: $spacing-md; + } + } + + .c-newsletter { + .c-browser-content { + padding-right: 20px; + padding-left: 20px; + } + } +} + +@media (prefers-reduced-motion: no-preference) { + [data-animation="pop-in"] { + opacity: 0; + } + + [data-animation="slide-in"] { + position: relative; + opacity: 0; + } +} + // 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 */ + [data-animation="pop-in"] { + opacity: 1; + } + + [data-animation="slide-in"] { + position: static; + opacity: 1; } } diff --git a/media/img/firefox/nothing-personal/clickity-text.svg b/media/img/firefox/nothing-personal/clickity-text.svg new file mode 100644 index 00000000000..fdaf98bfc70 --- /dev/null +++ b/media/img/firefox/nothing-personal/clickity-text.svg @@ -0,0 +1 @@ + diff --git a/media/img/firefox/nothing-personal/feature-fast.svg b/media/img/firefox/nothing-personal/feature-fast.svg new file mode 100644 index 00000000000..bb61e9f7769 --- /dev/null +++ b/media/img/firefox/nothing-personal/feature-fast.svg @@ -0,0 +1 @@ + diff --git a/media/img/firefox/nothing-personal/feature-following.svg b/media/img/firefox/nothing-personal/feature-following.svg new file mode 100644 index 00000000000..8dcdad5a2fe --- /dev/null +++ b/media/img/firefox/nothing-personal/feature-following.svg @@ -0,0 +1 @@ + diff --git a/media/img/firefox/nothing-personal/feature-reliable.svg b/media/img/firefox/nothing-personal/feature-reliable.svg new file mode 100644 index 00000000000..d292b26dbd0 --- /dev/null +++ b/media/img/firefox/nothing-personal/feature-reliable.svg @@ -0,0 +1,9 @@ + + + + + + + + + diff --git a/media/img/firefox/nothing-personal/feature-switch.svg b/media/img/firefox/nothing-personal/feature-switch.svg new file mode 100644 index 00000000000..7b5e6df2dca --- /dev/null +++ b/media/img/firefox/nothing-personal/feature-switch.svg @@ -0,0 +1 @@ + diff --git a/media/img/firefox/nothing-personal/fox-bush-high-res.png b/media/img/firefox/nothing-personal/fox-bush-high-res.png new file mode 100644 index 00000000000..a87f8708482 Binary files /dev/null and b/media/img/firefox/nothing-personal/fox-bush-high-res.png differ diff --git a/media/img/firefox/nothing-personal/fox-bush.gif b/media/img/firefox/nothing-personal/fox-bush.gif new file mode 100644 index 00000000000..8842db0ab3e Binary files /dev/null and b/media/img/firefox/nothing-personal/fox-bush.gif differ diff --git a/media/img/firefox/nothing-personal/fox-bush.png b/media/img/firefox/nothing-personal/fox-bush.png new file mode 100644 index 00000000000..ec831db3342 Binary files /dev/null and b/media/img/firefox/nothing-personal/fox-bush.png differ diff --git a/media/img/firefox/nothing-personal/foxy-sticker.svg b/media/img/firefox/nothing-personal/foxy-sticker.svg new file mode 100644 index 00000000000..4b33f816df4 --- /dev/null +++ b/media/img/firefox/nothing-personal/foxy-sticker.svg @@ -0,0 +1 @@ + diff --git a/media/img/firefox/nothing-personal/heart-smiley-stickers.svg b/media/img/firefox/nothing-personal/heart-smiley-stickers.svg new file mode 100644 index 00000000000..90f5302baba --- /dev/null +++ b/media/img/firefox/nothing-personal/heart-smiley-stickers.svg @@ -0,0 +1 @@ + diff --git a/media/img/firefox/nothing-personal/heart-sticker.svg b/media/img/firefox/nothing-personal/heart-sticker.svg deleted file mode 100644 index 7900abcb3ed..00000000000 --- a/media/img/firefox/nothing-personal/heart-sticker.svg +++ /dev/null @@ -1 +0,0 @@ - diff --git a/media/img/firefox/nothing-personal/privacy-default.svg b/media/img/firefox/nothing-personal/privacy-default.svg new file mode 100644 index 00000000000..c45ee4eb51a --- /dev/null +++ b/media/img/firefox/nothing-personal/privacy-default.svg @@ -0,0 +1 @@ + diff --git a/media/img/firefox/nothing-personal/privacy-tracker.svg b/media/img/firefox/nothing-personal/privacy-tracker.svg new file mode 100644 index 00000000000..1b223fc7afc --- /dev/null +++ b/media/img/firefox/nothing-personal/privacy-tracker.svg @@ -0,0 +1 @@ + diff --git a/media/img/firefox/nothing-personal/sparkle.svg b/media/img/firefox/nothing-personal/sparkle.svg new file mode 100644 index 00000000000..785d40f7cc7 --- /dev/null +++ b/media/img/firefox/nothing-personal/sparkle.svg @@ -0,0 +1 @@ + diff --git a/media/js/firefox/nothing-personal/animate-pop-in.es6.js b/media/js/firefox/nothing-personal/animations.es6.js similarity index 51% rename from media/js/firefox/nothing-personal/animate-pop-in.es6.js rename to media/js/firefox/nothing-personal/animations.es6.js index bc37a6f4aee..8937e9ff588 100644 --- a/media/js/firefox/nothing-personal/animate-pop-in.es6.js +++ b/media/js/firefox/nothing-personal/animations.es6.js @@ -5,31 +5,19 @@ */ 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')) { + if (entry.target.dataset.animation === 'pop-in') { // 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') - ) { + } else if (entry.target.dataset.animation === 'slide-in') { 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); } } }); @@ -41,26 +29,19 @@ function init() { 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') + .querySelectorAll("[data-animation='pop-in']") .forEach(function (element) { observer.observe(element); }); - observer.observe(browser); - observer.observe(attachedStickyNote); - observer.observe(detachedStickyNote); - observer.observe(stickyGif); + document + .querySelectorAll("[data-animation='slide-in']") + .forEach(function (element) { + observer.observe(element); + }); } } @@ -82,13 +63,4 @@ function slideIn(element) { }); } -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/random-answers.es6.js b/media/js/firefox/nothing-personal/random-answers.es6.js new file mode 100644 index 00000000000..3b1fae90276 --- /dev/null +++ b/media/js/firefox/nothing-personal/random-answers.es6.js @@ -0,0 +1,43 @@ +/* + * 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 randomizerButton; +let randomOutput; +let answers; +let mutableAnswers; + +function getRandomAnswer(answers) { + // set a mutable array we can work through, reset it when empty + if (mutableAnswers === undefined || mutableAnswers.length === 0) { + mutableAnswers = [...answers]; + } + const answerIndex = Math.floor(Math.random() * mutableAnswers.length); + // mutate array to remove answer so we can't repeat it, return answer + return mutableAnswers.splice(answerIndex, 1); +} + +function setRandomAnswer(container, answers) { + container.textContent = getRandomAnswer(answers); +} + +function init() { + randomizerButton = document.getElementById('randomizer-button'); + randomOutput = document.getElementById('random-output'); + + answers = Array.from(document.querySelectorAll('#things-list li')).map( + (li) => li.textContent + ); + + // set new answer on button click + randomizerButton.addEventListener('click', () => { + setRandomAnswer(randomOutput, answers); + }); + + // set initial random answer on load + setRandomAnswer(randomOutput, answers); +} + +init(); diff --git a/media/static-bundles.json b/media/static-bundles.json index 4efdc10e011..d5d340fdcc3 100644 --- a/media/static-bundles.json +++ b/media/static-bundles.json @@ -1775,7 +1775,8 @@ { "files": [ "js/firefox/nothing-personal/fx-is-default-init.es6.js", - "js/firefox/nothing-personal/animate-pop-in.es6.js" + "js/firefox/nothing-personal/animations.es6.js", + "js/firefox/nothing-personal/random-answers.es6.js" ], "name": "firefox-nothing-personal" },