зеркало из https://github.com/mozilla/bedrock.git
Nothing Personal Firefox campaign (#14832)
This commit is contained in:
Reem H
GitHub
Родитель
3d20b68796
Коммит
d1018c1a15
|
|
@ -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
|
||||
) -%}
|
||||
<div class="c-browser {% if class %} {{ class }}{% endif %}">
|
||||
<div class="c-browser-bar {% if heading %} c-bar-with-heading{% endif %}">
|
||||
{% if heading and aria_label %}
|
||||
<h3 aria-label="{{ aria_label }}">{{ heading }}</h3>
|
||||
{% elif heading %}
|
||||
<h3>{{ heading }}</h3>
|
||||
{% endif %}
|
||||
</div>
|
||||
<div class="c-browser-content">
|
||||
{{ caller() }}
|
||||
</div>
|
||||
</div>
|
||||
{%- endmacro %}
|
||||
|
|
@ -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 %}
|
||||
<header class="c-page-header">
|
||||
<div class="mzp-l-content c-page-header-inner">
|
||||
<h1 class="c-page-header-logo-fx">Firefox by Mozilla</h1>
|
||||
|
||||
<div class="cta-group">
|
||||
<p>Feeling browser-curious? We won’t tell. <span aria-hidden="true">>>>>></span></p>
|
||||
|
||||
<a href="{{ url('firefox.set-as-default.thanks')}}" class="is-not-default mzp-c-button mzp-t-lg" data-cta-type="button" data-cta-text="Set as default" data-cta-position="primary">Set as default</a>
|
||||
|
||||
<a href="https://blog.mozilla.org/en/firefox/" class="is-default mzp-c-button mzp-t-lg" data-cta-type="button" data-cta-text="Learn more" data-cta-position="primary">Learn more</a>
|
||||
|
||||
{{ 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') }}
|
||||
</div>
|
||||
</div>
|
||||
</header>
|
||||
<main class="c-page-main-content">
|
||||
<section>
|
||||
<div class="c-browser-windows">
|
||||
<div class="c-layered-browser">
|
||||
{% call browser_border(class='c-browser-window-top-wrapper mzp-l-content mzp-t-content-md mzp-t-content-nospace') %}
|
||||
<div class="c-browser-window-top">
|
||||
<h2>We look forward to not getting to know you</h2>
|
||||
</div>
|
||||
{% 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') %}
|
||||
<div class="c-browser-window-top">
|
||||
<!-- Content is kept so it matches the size of the visible container above -->
|
||||
<h2>We look forward to not getting to know you</h2>
|
||||
</div>
|
||||
{% 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') %}
|
||||
<div class="c-browser-window-top">
|
||||
<!-- Content is kept so it matches the size of the visible container above -->
|
||||
<h2>We look forward to not getting to know you</h2>
|
||||
</div>
|
||||
{% 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') %}
|
||||
<div class="c-browser-window-top">
|
||||
<!-- Content is kept so it matches the size of the visible container above -->
|
||||
<h2>We look forward to not getting to know you</h2>
|
||||
</div>
|
||||
{% endcall %}
|
||||
</div>
|
||||
|
||||
{% call browser_border(class='mzp-l-content mzp-t-content-md mzp-t-content-nospace', heading='Nothing Personal') %}
|
||||
<div class="c-browser-window-top">
|
||||
<h4>You’re great — probably.</h4>
|
||||
<p>We just don’t need a lot of your data to be a <strong>fast, reliable</strong> browser that keeps up with the big guys.</p>
|
||||
</div>
|
||||
{% endcall %}
|
||||
|
||||
<div class="c-thug-life-gif-wrapper mzp-l-content mzp-t-content-md mzp-t-content-nospace">
|
||||
<div class="c-thug-life-gif c-detached-gif">
|
||||
{{ 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'
|
||||
}
|
||||
) }}
|
||||
</div>
|
||||
</div>
|
||||
|
||||
<div class="sticky-window">
|
||||
<div class="c-thug-life-gif c-attached-gif">
|
||||
{{ 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'
|
||||
}
|
||||
) }}
|
||||
</div>
|
||||
|
||||
{% call browser_border(class='mzp-l-content mzp-t-content-md mzp-t-content-nospace', heading='SFAQs', aria_label='Somewhat Frequently Asked Questions') %}
|
||||
<div class="c-browser-window-top">
|
||||
<h4><span aria-hidden="true">[</span>Somewhat Frequently Asked Questions<span aria-hidden="true">]</span></h4>
|
||||
|
||||
<h5>Are you even any good?</h5>
|
||||
<p>Calm down. And yes. <a href="{{ url('firefox.features.fast') }}">We’re so fast</a> you won’t even notice the difference.</p>
|
||||
|
||||
<h5 aria-label="What makes you so special?">What makes you soooo special?</h5>
|
||||
<p><abbr title="No big deal">NBD</abbr>, but people dump their other browsers <a href="{{ url('firefox.features.index') }}">for our features</a> (like <a href="{{ url('firefox.features.picture-in-picture') }}">popping out videos</a> and a <a href="{{ url('firefox.features.pdf-editor') }}">built-in PDF editor</a>).</p>
|
||||
|
||||
<h5>What does any of this have to do <br> with me?</h5>
|
||||
<p>Hey, you can customize Firefox to be all about you with <a href="{{ url('firefox.features.add-ons') }}">add-ons</a> and <a href="{{ url('firefox.features.customize') }}">themes</a>. Happy?</p>
|
||||
|
||||
<h5>Ok, what’s the privacy-catch?</h5>
|
||||
<p><a href="{{ url('firefox.privacy.index') }}">We don’t keep track of where you go</a> because 1. Yawn, and 2. We really don’t need it.</p>
|
||||
</div>
|
||||
<div class="c-sticky-note c-attached-sticky">
|
||||
|
||||
<span aria-hidden="true">>>></span> {{ download_firefox_thanks(alt_copy='download', button_class='mzp-t-primary mzp-t-lg c-download-firefox-cta', download_location='secondary cta') }} <span aria-hidden="true"> <<<< </span>
|
||||
<br>
|
||||
<span aria-hidden="true">>>></span> {{ download_firefox_thanks(alt_copy='download', button_class='mzp-t-primary mzp-t-lg c-download-firefox-cta', download_location='secondary cta') }} <span aria-hidden="true"> <<<< </span>
|
||||
<br>
|
||||
<span aria-hidden="true">>>></span> {{ download_firefox_thanks(alt_copy='download', button_class='mzp-t-primary mzp-t-lg c-download-firefox-cta', download_location='secondary cta') }} <span aria-hidden="true"> <<<< </span>
|
||||
<p>Ok, bye.</p>
|
||||
|
||||
</div>
|
||||
</div>
|
||||
{% endcall %}
|
||||
</div>
|
||||
|
||||
<div class="c-sticky-note c-detached-sticky">
|
||||
<span aria-hidden="true">>>></span> {{ download_firefox_thanks(alt_copy='download', button_class='mzp-t-primary mzp-t-lg c-download-firefox-cta', download_location='secondary cta') }} <span aria-hidden="true"> <<<< </span>
|
||||
<br>
|
||||
<span aria-hidden="true">>>></span> {{ download_firefox_thanks(alt_copy='download', button_class='mzp-t-primary mzp-t-lg c-download-firefox-cta', download_location='secondary cta') }} <span aria-hidden="true"> <<<< </span>
|
||||
<br>
|
||||
<span aria-hidden="true">>>></span> {{ download_firefox_thanks(alt_copy='download', button_class='mzp-t-primary mzp-t-lg c-download-firefox-cta', download_location='secondary cta') }} <span aria-hidden="true"> <<<< </span>
|
||||
<p>Ok, bye.</p>
|
||||
</div>
|
||||
|
||||
<div class="c-sign-off">
|
||||
<div class="mzp-l-content c-nothing-personal">
|
||||
<p>Nothing personal. Just browsing.</p>
|
||||
<div class="c-sign-off-wordmark">
|
||||
<img loading="lazy" src="{{ static('img/firefox/nothing-personal/firefox-by-mozilla-wordmark-white.svg') }}" alt="" width="180" height="40" class="c-header-logo">
|
||||
</div>
|
||||
</div>
|
||||
</div>
|
||||
</section>
|
||||
<aside>
|
||||
<a href="https://www.youtube.com/watch?v=dQw4w9WgXcQ" aria-label="Link to a Youtube video" target="_blank" rel="external noopener"><img src="{{ static('img/firefox/nothing-personal/folder-icon.svg') }}" alt="">Folder <br> <.< </a>
|
||||
<a href="https://open.spotify.com/playlist/0vvXsWCC9xrXsKd4FyS8kM" aria-label="Link to a Spotify playlist" target="_blank" rel="external noopener"><img src="{{ static('img/firefox/nothing-personal/music-icon.svg') }}" alt="">focus <br> playlist</a>
|
||||
<div class="c-trash" aria-hidden="true">
|
||||
<img src="{{ static('img/firefox/nothing-personal/bin-icon.svg') }}" alt="">
|
||||
<span>MyLife</span>
|
||||
</div>
|
||||
</aside>
|
||||
|
||||
</main>
|
||||
{% endblock %}
|
||||
|
||||
{% block js %}
|
||||
{{ js_bundle('firefox-nothing-personal') }}
|
||||
{% endblock %}
|
||||
|
|
@ -158,6 +158,7 @@ urlpatterns = (
|
|||
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"),
|
||||
|
|
|
|||
|
|
@ -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
|
||||
|
|
|
|||
|
|
@ -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;
|
||||
}
|
||||
}
|
||||
|
|
@ -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;
|
||||
}
|
||||
|
|
@ -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');
|
||||
}
|
||||
|
|
@ -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;
|
||||
}
|
||||
}
|
||||
}
|
||||
|
|
@ -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;
|
||||
}
|
||||
}
|
||||
}
|
||||
}
|
||||
|
|
@ -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 ----------------------- //
|
||||
|
|
@ -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;
|
||||
}
|
||||
}
|
||||
|
|
@ -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 */
|
||||
}
|
||||
}
|
||||
Двоичный файл не отображается.
Двоичный файл не отображается.
|
|
@ -0,0 +1 @@
|
|||
<svg width="50" height="59" fill="none" xmlns="http://www.w3.org/2000/svg"><path d="M7.745 52.483 1.575 6.215a1.608 1.608 0 0 1 1.595-1.82h43.65c.96 0 1.705.833 1.6 1.785l-5.141 46.268a1.608 1.608 0 0 1-1.599 1.43H9.34a1.608 1.608 0 0 1-1.594-1.395Z" fill="#333336" stroke="#F8F6F4" stroke-width="1.8"/><ellipse cx="24.973" cy="4.943" rx="23.642" ry="3.299" fill="#333336" stroke="#F8F6F4" stroke-width="1.8"/><ellipse cx="25.523" cy="54.153" rx="17.594" ry="3.024" fill="#333336" stroke="#F8F6F4" stroke-width="1.8"/><path d="M12.074 30.15c0-7.166 5.809-12.974 12.974-12.974s12.974 5.808 12.974 12.974c0 7.165-5.809 12.973-12.974 12.973S12.074 37.315 12.074 30.15Z" stroke="#F8F6F4" stroke-width="1.8"/><path d="M18.361 30.543c0-3.91 2.994-7.08 6.686-7.08 3.693 0 6.686 3.17 6.686 7.08m-4.448 3.633v-1.79m-4.474 1.79v-1.79" stroke="#F8F6F4" stroke-width="1.8" stroke-linecap="round"/></svg>
|
||||
|
После Ширина: | Высота: | Размер: 892 B |
|
|
@ -0,0 +1 @@
|
|||
<svg xmlns="http://www.w3.org/2000/svg" xml:space="preserve" viewBox="0 0 60 16"><path d="M7.5 2.9c2.8 0 5 2.2 5 5s-2.2 5-5 5-5-2.2-5-5 2.2-5 5-5m0-2c-3.9 0-7 3.1-7 7s3.1 7 7 7 7-3.1 7-7-3.1-7-7-7zM52.5 2.9c2.8 0 5 2.2 5 5s-2.2 5-5 5-5-2.2-5-5 2.2-5 5-5m0-2c-3.9 0-7 3.1-7 7s3.1 7 7 7 7-3.1 7-7-3.1-7-7-7zM30 3c2.8 0 5 2.2 5 5s-2.2 5-5 5-5-2.2-5-5 2.2-5 5-5m0-2c-3.9 0-7 3.1-7 7s3.1 7 7 7 7-3.1 7-7-3.1-7-7-7z"/></svg>
|
||||
|
После Ширина: | Высота: | Размер: 419 B |
Различия файлов скрыты, потому что одна или несколько строк слишком длинны
|
После Ширина: | Высота: | Размер: 13 KiB |
Различия файлов скрыты, потому что одна или несколько строк слишком длинны
|
После Ширина: | Высота: | Размер: 13 KiB |
|
|
@ -0,0 +1 @@
|
|||
<svg width="66" height="50" fill="none" xmlns="http://www.w3.org/2000/svg"><path d="M49.82 48.781H3.88a2.885 2.885 0 0 1-2.886-2.885V4.404A3.397 3.397 0 0 1 4.398 1H19.64c.981 0 1.895.499 2.426 1.324l2.676 4.16a2.885 2.885 0 0 0 2.426 1.323h22.65a2.885 2.885 0 0 1 2.886 2.886v35.203a2.885 2.885 0 0 1-2.885 2.885Z" fill="#333336" stroke="#F8F6F4" stroke-width="1.8"/><path d="M9.29 12.045h45.983c1.888 0 3.42 1.423 3.42 3.175v16.2c0 8.743-7.643 15.84-17.058 15.84H9.289c-1.887 0-3.42-1.422-3.42-3.175V15.22c0-1.752 1.533-3.175 3.42-3.175Z" fill="#333336" stroke="#F8F6F4" stroke-width="1.8"/><path d="M3.879 48.78c1.593 0 3.205-1.206 3.598-2.694L14.8 18.425c.394-1.488 2.005-2.695 3.599-2.695H62.03c1.593 0 2.566 1.207 2.172 2.695l-7.323 27.66c-.394 1.489-2.005 2.695-3.598 2.695H3.879Z" fill="#333336" stroke="#F8F6F4" stroke-width="1.8"/></svg>
|
||||
|
После Ширина: | Высота: | Размер: 848 B |
|
|
@ -0,0 +1 @@
|
|||
<svg width="1280" height="1753" fill="none" xmlns="http://www.w3.org/2000/svg"><path d="M2971.55 724.02h-4801.81m4801.81 17.496h-4801.81m4801.81 20.178-4801.81-.001m4801.81 23.485h-4801.81m4801.81 27.315-4801.81-.001m4801.81 32.232-4801.81-.001m4801.81 38.548-4801.81-.001m4801.81 46.969-4801.81-.001m4801.81 58.455-4801.81-.002m4801.81 74.669h-4801.81m4801.81 98.91-4801.81-.01m4801.81 136.86h-4801.81m6859.7 202.34h-8634.15M127.052 724.02l-1671.932 939.4m1732.074-939.4-1510.144 969.62M247.336 724.02-1113.12 1743.11M307.474 723.781-826.239 1743.11M367.61 724.016-575.072 1783.24M427.757 723.781-259.145 1753.11M487.879 723.781-21 1863M548.036 724.02 233 2107M608.168 724.02l.001 1354.98m60.134-1354.98L971 2089M728.459 724.02 1315 1991M788.594 724.02l748.916 1122m-688.782-1122 943.322 1059.95M908.884 724.02 2053.72 1753.11M969.018 724.02l1294.402 969.62M1029.15 724.02l1510.15 969.62M1089.31 724.02l1685.7 947.15M1149.44 724.016l1557.1 777.444M1209.58 724.016l1730.07 777.434M1269.71 724.016l1903.05 777.444M66.913 724.016-1490.82 1501.45M6.76 724.016l-1730.71 777.444m5860.93-202.34h-5967.24M187.186 11.482l-.001 712.532m60.157-712.532v712.532m60.134-712.532v712.532m60.133-712.532v712.533m60.158-712.533v712.532m60.111-712.037v712.039m60.156-712.534v712.532m60.134-712.532v712.533m60.135-712.533v712.532m60.156-712.532v712.533m60.135-712.533v712.532m60.134-712.532v712.533m60.156-712.533v712.533m60.134-712.533v712.536m60.132-712.536v712.536m60.16-709.584v709.584m60.13-709.584v709.583m60.14-709.583v709.584m60.13-709.584v709.583M6.76 14.434v709.584M66.917 14.434v709.584m60.134-709.584V724.02M-639.88 241.559H1844M-639.88 301.82h2483.87M-639.88 181.559H1844m-2483.88 180.48h2484.47M-639.88 61.008H1844m-2483.88 60.248h2483.87M-639.88 1H1844M-637.27 422.273h2481.85m-2484.224 60.231H1844.59m-2484.47 60.23H1844m-2483.644 60.204H1843.99m-2483.87 60.255h2484.47" stroke="#4F4F4F" stroke-miterlimit="10"/></svg>
|
||||
|
После Ширина: | Высота: | Размер: 1.9 KiB |
|
|
@ -0,0 +1 @@
|
|||
<svg width="95" height="88" fill="none" xmlns="http://www.w3.org/2000/svg"><path fill-rule="evenodd" clip-rule="evenodd" d="M22.33 5.635a25.545 25.545 0 0 1 19.354-.907 25.563 25.563 0 0 1 13.757 11.591 25.446 25.446 0 0 1 8.216-1.77 25.636 25.636 0 0 1 18.27 6.49 25.427 25.427 0 0 1 5.947 7.877 25.126 25.126 0 0 1 2.479 9.538 24.918 24.918 0 0 1-6.463 18.198 25.128 25.128 0 0 1-7.944 5.838l-38.27 17.88a6.69 6.69 0 0 1-8.853-3.144L10.405 39.21a25.017 25.017 0 0 1-1.082-19.29A25.018 25.018 0 0 1 22.331 5.635Zm14.876 11.702a12.165 12.165 0 0 0-9.212.42 11.637 11.637 0 0 0-6.062 6.642 11.637 11.637 0 0 0 .515 8.977l15.542 32.08 32.295-15.089h.001A11.748 11.748 0 0 0 74 47.637a11.54 11.54 0 0 0 2.994-8.428 11.749 11.749 0 0 0-1.162-4.46l-.001-.003a12.044 12.044 0 0 0-2.819-3.73 12.257 12.257 0 0 0-8.732-3.102 12.043 12.043 0 0 0-4.54 1.117l-4.591 2.145a6.69 6.69 0 0 1-8.853-3.145l-2.208-4.558a12.165 12.165 0 0 0-6.882-6.137Z" fill="#fff"/><path d="M82.459 31.564a18.736 18.736 0 0 0-4.383-5.804 18.946 18.946 0 0 0-13.501-4.795c-2.45.114-4.85.705-7.062 1.739l-4.59 2.144-2.208-4.559a18.855 18.855 0 0 0-10.663-9.524 18.855 18.855 0 0 0-14.283.664 18.327 18.327 0 0 0-9.535 10.463 18.327 18.327 0 0 0 .799 14.134l2.208 4.558 16.21 33.458 33.682-15.737 4.59-2.144a18.437 18.437 0 0 0 5.829-4.283 18.228 18.228 0 0 0 4.728-13.313 18.438 18.438 0 0 0-1.821-7Z" fill="#FF4F5F" stroke="#333336" stroke-width="2" stroke-linecap="round" stroke-linejoin="round"/></svg>
|
||||
|
После Ширина: | Высота: | Размер: 1.4 KiB |
Двоичный файл не отображается.
|
После Ширина: | Высота: | Размер: 75 KiB |
|
|
@ -0,0 +1 @@
|
|||
<svg width="41" height="55" fill="none" xmlns="http://www.w3.org/2000/svg"><path fill-rule="evenodd" clip-rule="evenodd" d="M24.987 1.441H6.144a4.711 4.711 0 0 0-4.711 4.711v42.399a4.711 4.711 0 0 0 4.71 4.711H34.41a4.711 4.711 0 0 0 4.711-4.711V15.574L24.987 1.441Z" fill="#333336" stroke="#F8F6F4" stroke-width="1.8" stroke-linecap="round" stroke-linejoin="round"/><path fill-rule="evenodd" clip-rule="evenodd" d="M24.258 2.172v14.133H38.39" fill="#333336"/><path d="M24.258 2.172v14.133H38.39m-21.951 22.39h-4.14a2.07 2.07 0 1 0 0 4.14h2.07a2.07 2.07 0 0 0 2.07-2.07v-2.07Zm12.418-2.07h-4.14a2.07 2.07 0 0 0 0 4.14h2.07a2.07 2.07 0 0 0 2.07-2.07v-2.07Z" stroke="#F8F6F4" stroke-width="1.8" stroke-linecap="round" stroke-linejoin="round"/><path d="M16.438 38.695V26.277l12.418-2.07v12.419" stroke="#F8F6F4" stroke-width="1.8" stroke-linecap="round" stroke-linejoin="round"/></svg>
|
||||
|
После Ширина: | Высота: | Размер: 883 B |
|
|
@ -0,0 +1 @@
|
|||
<svg xmlns="http://www.w3.org/2000/svg" xml:space="preserve" viewBox="0 0 185 185"><path fill="#ffff98" stroke="#000" stroke-miterlimit="10" stroke-width="2" d="M.5.5v184h141l43-43V.5z"/><path fill="none" stroke="#000" stroke-miterlimit="10" stroke-width="2" d="M184.5 141.5h-43v43"/></svg>
|
||||
|
После Ширина: | Высота: | Размер: 291 B |
Различия файлов скрыты, потому что одна или несколько строк слишком длинны
|
После Ширина: | Высота: | Размер: 7.0 KiB |
Двоичный файл не отображается.
|
После Ширина: | Высота: | Размер: 61 KiB |
Двоичный файл не отображается.
|
После Ширина: | Высота: | Размер: 1.1 MiB |
|
|
@ -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());
|
||||
|
|
@ -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');
|
||||
|
|
|
|||
|
|
@ -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');
|
||||
|
|
|
|||
|
|
@ -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();
|
||||
|
|
@ -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');
|
||||
|
|
@ -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"
|
||||
|
|
|
|||
|
|
@ -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'
|
||||
);
|
||||
Загрузка…
Ссылка в новой задаче