Skip to content

Commit

Permalink
Nothing Personal Updates (fix mozilla#15420)
Browse files Browse the repository at this point in the history
  • Loading branch information
@maureenlholland
maureenlholland committed Nov 5, 2024
1 parent c3ed5d2 commit c951830
Show file tree
Hide file tree
Showing 12 changed files with 423 additions and 506 deletions.
2 changes: 1 addition & 1 deletion 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,7 +10,7 @@
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 %}">
{% if heading and aria_label %}
<h3 aria-label="{{ aria_label }}">{{ heading }}</h3>
Expand Down
272 changes: 131 additions & 141 deletions bedrock/firefox/templates/firefox/nothing-personal/index.html
View file

Large diffs are not rendered by default.

16 changes: 0 additions & 16 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,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;
}
}
179 changes: 7 additions & 172 deletions media/css/firefox/nothing-personal/_browser.scss
View file
Original file line number Diff line number Diff line change
Expand Up @@ -4,9 +4,9 @@

.c-browser {
border-radius: $border-radius-md;
margin-bottom: $layout-lg;

.c-browser-bar {
$heading-size: #{var(--title-3xs-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;
Expand All @@ -16,11 +16,12 @@
border-top-left-radius: $border-radius-lg;
border-top-right-radius: $border-radius-lg;
padding: $spacing-sm $spacing-md;
min-height: $heading-size; // reserve space for bars without text

h3 {
@include font-size(18px);
color: $browser-background;
font-family: 'Fira Mono', 'Andale Mono', monospace;
font-size: $heading-size;
font-weight: 500;
margin-bottom: 0;
padding-left: 80px;
Expand All @@ -41,189 +42,23 @@
border-bottom-right-radius: $border-radius-lg;
padding: $layout-sm;

h3,
h4,
h5 {
@include text-title-2xs;
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;
}
}
> *:last-child {
margin-bottom: 0;
}
}

@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 {
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;
}
}

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

.c-browser-window-top {
&::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;
}
20 changes: 20 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,20 @@
// 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;
font-family: 'Fira Mono', 'Andale Mono', monospace;
gap: $spacing-sm;
}
70 changes: 11 additions & 59 deletions media/css/firefox/nothing-personal/_fox-gif.scss
View file
Original file line number Diff line number Diff line change
Expand Up @@ -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 {
Expand Down
Loading

0 comments on commit c951830

Please sign in to comment.