Skip to content

Commit

Permalink
Nothing personal updates (fixes mozilla#15420) (mozilla#15445)
Browse files Browse the repository at this point in the history 
* Nothing Personal Updates (fix mozilla#15420)

* design feedback: increase body copy weight

* design feedback: adjust border color and browser box radius

* design feedback: keep browser bar title centered on mobile

* design feedback: reduce spacing for no-asset section gaps

* design feedback: avoid layout shift as random responses change

* design feedback: add stickers after browser window pop-in

- re-exported foxy, heart, and smiley svgs to get rotations from assets
- moved stickers from pseudo-elements to inline html to allow animation
- added check for dependent animations to run after main animation ends

* analytics: add data-cta-text for randomizer button

* demo: options for drawing attention to button

* design feedback: update stroke widths

* design feedback: increase fox bush gif by 10%

* design feedback: link sidebar icon to red panda video

* Use html entities for symbols

* Browser support fallbacks

* Handle reduced motion preferences

* Organization and minor clean-up

* Remove easy switching feature on mobile-size screens

The mobile browser does not have this function yet.

We have helper JS to detect platform and append classes, so we can
hide this feature on android and ios. Default will be to show.

* Review fixes
  • Loading branch information
@maureenlholland
maureenlholland authored Nov 20, 2024
1 parent 3bb94e5 commit f445fb6
Show file tree
Hide file tree
Showing 28 changed files with 919 additions and 540 deletions.
11 changes: 8 additions & 3 deletions bedrock/firefox/templates/firefox/nothing-personal/includes/browser-macro.html
View file
Original file line number Diff line number Diff line change
Expand Up @@ -10,12 +10,17 @@
heading=None,
aria_label=None
) -%}
<div {% if id %}id="{{ id }}" {% endif %}class="c-browser{% if class %} {{ class }}{% endif %}">
<div {% if id %}id="{{ id }}" {% endif %} data-animation="pop-in" class="c-browser{% if class %} {{ class }}{% endif %}">
<div class="c-browser-bar {% if heading %} c-bar-with-heading{% endif %}">
<svg class="c-browser-bar-dot-container" width="62" height="15" viewBox="0 0 62 15" fill="none" xmlns="http://www.w3.org/2000/svg">
<ellipse class="c-browser-bar-dot" cx="7.821" cy="7.559" rx="6.155" ry="6.074" />
<ellipse class="c-browser-bar-dot" cx="31.204" cy="7.559" rx="6.155" ry="6.074" />
<ellipse class="c-browser-bar-dot" cx="54.595" cy="7.559" rx="6.155" ry="6.074" />
</svg>
{% if heading and aria_label %}
<h3 aria-label="{{ aria_label }}">{{ heading }}</h3>
<h3 aria-label="{{ aria_label }}" class="c-browser-bar-title">{{ heading }}</h3>
{% elif heading %}
<h3>{{ heading }}</h3>
<h3 class="c-browser-bar-title">{{ heading }}</h3>
{% endif %}
</div>
<div class="c-browser-content">
Expand Down
297 changes: 170 additions & 127 deletions bedrock/firefox/templates/firefox/nothing-personal/index.html
View file

Large diffs are not rendered by default.

41 changes: 27 additions & 14 deletions media/css/firefox/nothing-personal/_animations.scss
View file
Original file line number Diff line number Diff line change
Expand Up @@ -48,18 +48,6 @@
right: 0;
}
}

@keyframes slide-in-mobile {
0% {
left: 100%;
opacity: 0;
}

100% {
left: 0;
opacity: 1;
}
}
}

.animate-pop-in {
Expand All @@ -69,8 +57,33 @@
.animate-slide-in {
animation: 0.5s ease-out 0s 1 normal forwards running slide-in;
}
}

.c-slide-in-container {
overflow: hidden;
}

@media (prefers-reduced-motion: no-preference) {
[data-animation="pop-in"],
[data-animation="dependent-pop-in"] {
opacity: 0;
}

[data-animation="slide-in"] {
position: relative;
opacity: 0;
}
}

// Make sure content is visible of JS fails
html.no-js {
[data-animation="pop-in"],
[data-animation="dependent-pop-in"] {
opacity: 1;
}

.animate-slide-in-mobile {
animation: 0.5s ease-out 0s 1 normal forwards running slide-in-mobile;
[data-animation="slide-in"] {
position: static;
opacity: 1;
}
}
254 changes: 46 additions & 208 deletions media/css/firefox/nothing-personal/_browser.scss
View file
Original file line number Diff line number Diff line change
Expand Up @@ -4,226 +4,64 @@

.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;
}
}
}

@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 {
.c-browser-bar {
--heading-size: var(--body-sm-size);
background: $browser-background $browser-cool-gradient;
background-repeat: no-repeat;
background-position: center;
background-size: cover;
border-top: $border-black;
border-left: $border-black;
border-right: $border-black;
border-top-left-radius: $border-radius-md;
border-top-right-radius: $border-radius-md;
padding: $spacing-sm $spacing-md;
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;
}

&::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;
}
}
min-height: 1rem; // IE fallback
min-height: var(--heading-size); // reserve space for bars without text

@media #{$mq-md} {
margin-bottom: $layout-lg;

.c-browser-window-top {
&::after {
height: 95px;
bottom: 6px;
right: 205px;
top: auto;
width: 105px;
}
}
--heading-size: var(--title-3xs-size);
}
}

// 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;
}
}
.c-browser-bar-dot-container {
position: absolute;
left: $spacing-md;
}

&.darker-yellow {
position: absolute;
top: 60px;
right: -60px;
z-index: 2;
// match $border-black styles
.c-browser-bar-dot {
stroke: $page-background;
stroke-width: $border-width;
}

.c-browser-bar,
.c-browser-content {
background-color: $color-yellow-40;
}
}
.c-browser-bar-title {
grid-area: full-width;
color: $browser-background;
font-family: 'Fira Mono', 'Andale Mono', monospace;
font-size: 1rem; // IE fallback
font-size: var(--heading-size);
font-weight: 500;
margin-bottom: 0;
text-align: center;
white-space: nowrap;
}

.c-browser-window-top {
h2 {
visibility: hidden;
}
.c-browser-content {
background-color: $browser-background;
border: $border-black;
border-bottom-left-radius: $border-radius-md;
border-bottom-right-radius: $border-radius-md;
padding: 40px $layout-sm;

&::after {
content: none;
}
}
}
}
h4 {
margin-bottom: $layout-sm;
}
}

.sticky-window {
position: relative;
> *:last-child {
margin-bottom: 0;
}
}
29 changes: 29 additions & 0 deletions media/css/firefox/nothing-personal/_feature-box.scss
View file
Original file line number Diff line number Diff line change
@@ -0,0 +1,29 @@
// 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;
}

.c-feature-box-image {
margin-right: $spacing-md;
}

.ios,
.android {
.c-feature-box-desktop-only {
display: none;
}
}
Loading

0 comments on commit f445fb6

Please sign in to comment.