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 7, 2024
1 parent c3ed5d2 commit 591e454
Show file tree
Hide file tree
Showing 26 changed files with 707 additions and 552 deletions.
6 changes: 3 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,12 @@
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>
<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: 154 additions & 143 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;
}
}
247 changes: 38 additions & 209 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,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;
}
}
19 changes: 19 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,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;
}
Loading

0 comments on commit 591e454

Please sign in to comment.