Add MVP home & about pages behind switch (#15092)

- Add home page for English only behind switch m24-home
- Add about page for English only behind switchm24-about
- Add beta font files 
- Move grid variables to a new file
This commit is contained in:
Stephanie Hobson 2024-09-10 16:26:14 -07:00 коммит произвёл GitHub
Родитель dc5969b32e
Коммит 8f06aa1b59
Не найден ключ, соответствующий данной подписи
Идентификатор ключа GPG: B5690EEEBB952194
66 изменённых файлов: 1319 добавлений и 126 удалений

Просмотреть файл

@ -0,0 +1,32 @@
{#
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/.
#}
<section class="m24-c-content">
<div class="m24-c-copy">
<h2 class="m24-c-copy-title">Lorem ipsum dolor sit amet</h2>
<p>Suspendisse commodo sed erat in pellentesque. In sit amet tortor porttitor, gravida mauris tempor, pharetra erat. Nam vel justo urna.</p>
</div>
<div class="m24-c-grid m24-l-grid-pair">
<div class="m24-c-grid-cell">
<div class="m24-grid-cell-media">
<img src="{{ static('img/m24/todo-1-1.svg') }}" alt="" width="680" height="680">
</div>
<p class="m24-grid-cell-title"> In sit amet tortor porttitor, gravida mauris tempor, pharetra erat. Suspendisse commodo sed erat in pellentesque.</p>
<p class="m24-grid-cell-cta"><a href="" class="m24-c-cta m24-t-small" data-cta-text="">Nam vel justo urna</a></p>
</div>
<div class="m24-c-grid-cell">
<div class="m24-grid-cell-media">
<img src="{{ static('img/m24/todo-1-1.svg') }}" alt="" width="680" height="680">
</div>
<p class="m24-grid-cell-title"> In sit amet tortor porttitor, gravida mauris tempor, pharetra erat. Suspendisse commodo sed erat in pellentesque.</p>
<p class="m24-grid-cell-cta"><a href="" class="m24-c-cta m24-t-small" data-cta-text="">Nam vel justo urna</a></p>
</div>
</div>
</section>

Просмотреть файл

@ -0,0 +1,27 @@
{#
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 career_pic(img_src_tall, img_src_square) -%}
<picture>
<source srcset="{{ static(img_src_square) }}" media="(max-width: 768px)" width="216" height="216"> <!-- 2:1 -->
<img src="{{ static(img_src_tall) }}" alt="" width="216" height="324"> <!-- 2.7:1 -->
</picture>
{%- endmacro %}
<div class="m24-c-consider">
<h2 class="m24-c-consider-title">Mozilla jobs are where skill meets passion</h2>
<div class="m24-c-consider-media">
{{ career_pic('img/m24/todo-2-3.svg', 'img/m24/todo-1-1.svg') }}
{{ career_pic('img/m24/todo-2-3.svg', 'img/m24/todo-1-1.svg') }}
{{ career_pic('img/m24/todo-2-3.svg', 'img/m24/todo-1-1.svg') }}
{{ career_pic('img/m24/todo-2-3.svg', 'img/m24/todo-1-1.svg') }}
</div>
<p class="m24-consider-cta-info">Interested in advocacy? Love coding? Join our best-in-class talent and lets transform the web, for everyone.</p>
<div class="m24-c-consider-cta">
<a href="{{ url('careers.home') }}" class="m24-c-cta" data-cta-text="Check out jobs">Check out jobs</a>
</div>
</div>

Просмотреть файл

@ -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/.
#}
<section class="m24-c-hero">
<div class="m24-c-copy">
<h1 class="m24-c-copy-title m24-t-2xl">Activists for change on and off the screen</h1>
<p>We don't answer to shareholders because we don't have any. We're guided by ten principles. And a love for the interweb.</p>
<p class="m24-c-copy-cta"><a href="{{ url('mozorg.about.manifesto') }}" class="m24-c-cta" data-cta-text="Mission">Read our mission</a></p>
</div>
<div class="m24-c-hero-media">
<picture>
<source srcset="{{ static('img/m24/todo-2-1.svg') }}" media="(max-width: 768px)" width="768" height="384"> <!-- 2:1 -->
<img src="{{ static('img/m24/todo-27-1.svg') }}" alt="" width="1440" height="533"> <!-- 2.7:1 -->
</picture>
</div>
</section>

Просмотреть файл

@ -0,0 +1,17 @@
{#
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/.
#}
<div class="m24-c-transition m24-t-purple"><hr></div>
<div class="m24-t-purple">
<section class="m24-c-showcase">
<h2 class="m24-c-showcase-title">IDEA ipsum dolor sit amet</h2>
<p class="m24-c-showcase-subtitle">Suspendisse commodo sed erat in pellentesque. In sit amet tortor porttitor, gravida mauris tempor, pharetra erat. Nam vel justo urna.</p>
<div class="m24-c-showcase-media">
<img src="{{ static('img/m24/todo-1-1.svg') }}" alt="" height="500" width="500">
</div>
<p class="m24-c-showcase-cta"><a href="{{ url('mozorg.impact-report.index') }}" class="m24-c-cta" data-cta-text="IDEA">Read the report</a></p>
</section>
</div>

Просмотреть файл

@ -0,0 +1,18 @@
{#
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/.
#}
<div class="m24-t-green">
<section class="m24-c-showcase">
<h2 class="m24-c-showcase-title">Leadership ipsum dolor sit amet</h2>
<p class="m24-c-showcase-subtitle">Suspendisse commodo sed erat in pellentesque. In sit amet tortor porttitor, gravida mauris tempor, pharetra erat. Nam vel justo urna.</p>
<div class="m24-c-showcase-media">
<img src="{{ static('img/m24/todo-1-1.svg') }}" alt="" height="500" width="500">
</div>
<p class="m24-c-showcase-cta"><a href="{{ url('mozorg.about.leadership.index') }}" class="m24-c-cta" data-cta-text="Leadership">Leadership</a></p>
</section>
</div>
<div class="m24-c-transition m24-l-reverse"><hr></div>

Просмотреть файл

@ -0,0 +1,32 @@
{#
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 "base-protocol-mozilla.html" %}
{% block page_title %}Learn About Mozilla{% endblock %}
{% block page_title_suffix %}{% endblock %}
{% block page_desc %}
Mozilla makes browsers, apps, code and tools that put people before profit. Our mission: Keep the internet open and accessible to all.
{% endblock %}
{% block body_id %}about{% endblock %}
{% block page_css %}
{{ css_bundle('m24') }}
{% endblock %}
{% block content %}
{% include 'mozorg/about/includes/m24/hero.html'%}
{% include 'mozorg/about/includes/m24/amplify.html'%}
{% include 'mozorg/about/includes/m24/idea.html'%}
{% include 'mozorg/about/includes/m24/careers.html'%}
{% include 'mozorg/about/includes/m24/leadership.html'%}
<div class="m24-c-transition m24-t-black"><hr></div>
{% endblock %}

Просмотреть файл

@ -0,0 +1,49 @@
{#
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 "mozorg/home/base.html" %}
{# Bug 1438302, Issue 13019: Avoid duplicate content for English pages. #}
{%- block page_title_full -%}
{%- if LANG == 'en-US' -%}
Internet for people, not profit — Mozilla (US)
{%- elif LANG == 'en-GB' -%}
Internet for people, not profit — Mozilla (UK)
{%- else -%}
Internet for people, not profit
{%- endif -%}
{%- endblock -%}
{% block page_title_suffix %}{% endblock %}
{% block page_desc %}Did you know? Mozilla — the maker of Firefox — fights to keep the internet a global public resource, open and accessible to all.{% endblock %}
{% set show_firefox_app_store_banner = switch('firefox-app-store-banner') %}
{% block page_css %}
{{ css_bundle('m24') }}
{% endblock %}
{% block site_header %}
{% include 'includes/protocol/navigation/navigation.html' %}
{% endblock %}
{% set utm_params = '?utm_source=www.mozilla.org&utm_medium=referral&utm_campaign=homepage' %}
{% block content %}
<main>
{% include 'mozorg/home/includes/m24/hero.html'%}
{% include 'mozorg/home/includes/m24/products.html'%}
{% include 'mozorg/home/includes/m24/donate.html'%}
{% include 'mozorg/home/includes/m24/ai-grid.html'%}
{% include 'mozorg/home/includes/m24/showcase.html'%}
{% include 'mozorg/home/includes/m24/join.html'%}
</main>
<div class="m24-c-transition m24-t-black"><hr></div>
{% endblock %}

Просмотреть файл

@ -0,0 +1,32 @@
{#
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/.
#}
<section class="m24-c-content">
<div class="m24-c-copy">
<h2 class="m24-c-copy-title">Lorem ipsum dolor sit amet</h2>
<p>Suspendisse commodo sed erat in pellentesque. In sit amet tortor porttitor, gravida mauris tempor, pharetra erat. Nam vel justo urna.</p>
</div>
<div class="m24-c-grid m24-l-grid-pair">
<div class="m24-c-grid-cell">
<div class="m24-grid-cell-media">
<img src="{{ static('img/m24/todo-1-1.svg') }}" alt="" width="680" height="680">
</div>
<p class="m24-grid-cell-title"> In sit amet tortor porttitor, gravida mauris tempor, pharetra erat. Suspendisse commodo sed erat in pellentesque.</p>
<p class="m24-grid-cell-cta"><a href="" class="m24-c-cta m24-t-small" data-cta-text=""> Nam vel justo urna</a></p>
</div>
<div class="m24-c-grid-cell">
<div class="m24-grid-cell-media">
<img src="{{ static('img/m24/todo-1-1.svg') }}" alt="" width="680" height="680">
</div>
<p class="m24-grid-cell-title"> In sit amet tortor porttitor, gravida mauris tempor, pharetra erat. Suspendisse commodo sed erat in pellentesque.</p>
<p class="m24-grid-cell-cta"><a href="" class="m24-c-cta m24-t-small" data-cta-text="">Nam vel justo urna</a></p>
</div>
</div>
</section>

Просмотреть файл

@ -0,0 +1,21 @@
{#
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/.
#}
<div class="m24-t-dark" id="donate">
<div class="m24-c-donate">
<h2 class="m24-c-donate-title">Donate to Mozillas non-profit</h2>
<div class="m24-c-donate-media"><img src="{{ static('img/m24/todo-27-1.svg') }}" alt="" height="253" width="680"></div>
<div class="m24-c-donate-info">
<p class="m24-c-donate-info-title">Where do your dollars go?</p>
<ul class="mzp-u-list-styled">
<li>Funding new AI privacy technologies</li>
<li>Building innovation labs</li>
<li>Sponsoring incoming 2025 Fellows</li>
</ul>
</div>
<p class="m24-c-donate-cta"><a href="https://foundation.mozilla.org/?form=Mozilla-Website-Homepage" class="m24-c-cta" data-cta-text="Donate">Donate</a></p>
</div>
</div>

Просмотреть файл

@ -0,0 +1,21 @@
{#
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/.
#}
<section class="m24-c-hero">
<div class="m24-c-copy">
<h1 class="m24-c-copy-title m24-t-2xl">Reclaim the internet</h1>
<p>You might know Mozilla for creating Firefox. We're also a non-profit, campaigning, advocating, funding, and other ings for a
healthy internet. Because the web can be a wild place. Together, we can take it back.</p>
<p class="m24-c-copy-cta"><a href="{{ url('mozorg.about.index') }}" class="m24-c-cta" data-cta-text="Learn about us">Learn about us</a></p>
</div>
<div class="m24-c-hero-media">
<picture>
<source srcset="{{ static('img/m24/todo-2-1.svg') }}" media="(max-width: 768px)" width="768" height="384"> <!-- 2:1 -->
<img src="{{ static('img/m24/todo-27-1.svg') }}" alt="" width="1440" height="533"> <!-- 2.7:1 -->
</picture>
</div>
</section>

Просмотреть файл

@ -0,0 +1,32 @@
{#
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/.
#}
<section class="m24-c-content">
<div class="m24-c-copy">
<h2 class="m24-c-copy-title">Join us in shaping the webs future</h2>
<p>Here are a few ways wed love to collaborate with you to make the internet a place for everyone, everywhere.</p>
</div>
<div class="m24-c-grid m24-l-grid-pair">
<div class="m24-c-grid-cell">
<div class="m24-grid-cell-media">
<img src="{{ static('img/m24/todo-1-1.svg') }}" alt="" width="680" height="680">
</div>
<p class="m24-grid-cell-title">At the Data Futures Lab, partner with researchers and policymakers to give people control of their data again.</p>
<p class="m24-grid-cell-cta"><a href="" class="m24-c-cta m24-t-small" data-cta-text="">Apply now</a></p>
</div>
<div class="m24-c-grid-cell">
<div class="m24-grid-cell-media">
<img src="{{ static('img/m24/todo-1-1.svg') }}" alt="" width="680" height="680">
</div>
<p class="m24-grid-cell-title">Get the Firefox browser built just for developers and play a role in how people surf tomorrow.</p>
<p class="m24-grid-cell-cta"><a href="" class="m24-c-cta m24-t-small" data-cta-text="">Get the developer version</a></p>
</div>
</div>
<p class="m24-c-section-cta"><a href="" class="m24-c-cta" data-cta-text="">Contribute</a></p>
</section>

Просмотреть файл

@ -0,0 +1,51 @@
{#
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/.
#}
<section class="m24-c-content">
<div class="m24-c-copy">
<h2 class="m24-c-copy-title">Surf the web, on your terms</h2>
<p>Mozilla builds tools for browsing, shopping, keeping personal data personal, and more.</p>
</div>
<ul class="m24-c-spring">
<li class="m24-c-spring-item">
<a class="m24-c-spring-link" href="{{ url('firefox') }}" data-cta-text="Firefox" data-cta-position="product-list">
<strong class="m24-c-spring-title">Firefox</strong>
<span class="m24-c-spring-info">Browse with speed, privacy, and control.</span>
</a>
</li>
<li class="m24-c-spring-item">
<a class="m24-c-spring-link" href="https://www.fakespot.com/{{ utm_params }}" data-cta-text="Fakespot" data-cta-position="product-list">
<strong class="m24-c-spring-title">Fakespot</strong>
<span class="m24-c-spring-info">Spot fake reviews, products, and maybe one day fake people. </span>
</a>
</li>
<li class="m24-c-spring-item">
<a class="m24-c-spring-link" href="https://getpocket.com/signup{{ utm_params }}" data-cta-text="Pocket" data-cta-position="product-list">
<strong class="m24-c-spring-title">Pocket</strong>
<span class="m24-c-spring-info">Save content and read it later on any device, online or off.</span>
</a>
</li>
<li class="m24-c-spring-item">
<a class="m24-c-spring-link" href="{{ url('products.vpn.landing') }}" data-cta-text="VPN" data-cta-position="product-list">
<strong class="m24-c-spring-title">VPN</strong>
<span class="m24-c-spring-info">Stay safe on public Wi-Fi, block advertisers, and more.</span>
</a>
</li>
<li class="m24-c-spring-item">
<a class="m24-c-spring-link" href="https://monitor.mozilla.org/{{ utm_params }}" data-cta-text="Monitor" data-cta-position="product-list">
<strong class="m24-c-spring-title">Monitor</strong>
<span class="m24-c-spring-info">Check if your data has been breached then make it private.</span>
</a>
</li>
<li class="m24-c-spring-item">
<a class="m24-c-spring-link" href="https://www.thunderbird.net/{{ utm_params }}" data-cta-text="Thunderbird" data-cta-position="product-list">
<strong class="m24-c-spring-title">Thunderbird</strong>
<span class="m24-c-spring-info">Access email, calendars, and contacts in one fast app.</span>
</a>
</li>
</ul>
<p class="m24-c-section-cta"><a href="{{ url('products.landing') }}" class="m24-c-cta">Learn about our products</a></p>
</section>

Просмотреть файл

@ -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/.
#}
<div class="m24-c-transition"><hr></div>
<div class="m24-t-green">
<section class="m24-c-showcase">
<h2 class="m24-c-showcase-title">Rise25 ipsum dolor sit amet</h2>
<p class="m24-c-showcase-subtitle">Suspendisse commodo sed erat in pellentesque. In sit amet tortor porttitor, gravida mauris tempor, pharetra erat. Nam vel justo urna.</p>
<div class="m24-c-showcase-media">
<img src="{{ static('img/m24/todo-1-1.svg') }}" alt="" height="500" width="500">
</div>
<p class="m24-c-showcase-info">Sed eu mattis</p>
<p class="m24-c-showcase-cta"><a href="https://rise25.mozilla.org/" class="m24-c-cta" data-cta-text="">Learn more</a></p>
</section>
</div>

Просмотреть файл

@ -23,7 +23,7 @@ from .util import page
urlpatterns = [ urlpatterns = [
path("", views.HomeView.as_view(), name="mozorg.home"), path("", views.HomeView.as_view(), name="mozorg.home"),
page("about/", "mozorg/about/index.html", ftl_files=["mozorg/about"]), path("about/", views.AboutView.as_view(), name="mozorg.about.index"),
page("about/manifesto/", "mozorg/about/manifesto.html", ftl_files=["mozorg/about/manifesto"]), page("about/manifesto/", "mozorg/about/manifesto.html", ftl_files=["mozorg/about/manifesto"]),
page("about/manifesto/details/", "mozorg/about/manifesto-details.html", ftl_files=["mozorg/about/manifesto"]), page("about/manifesto/details/", "mozorg/about/manifesto-details.html", ftl_files=["mozorg/about/manifesto"]),
page("account/", "mozorg/account.html", ftl_files=["firefox/accounts"]), page("account/", "mozorg/account.html", ftl_files=["firefox/accounts"]),

Просмотреть файл

@ -17,12 +17,12 @@ from django.views.generic import TemplateView
from jsonview.decorators import json_view from jsonview.decorators import json_view
from product_details import product_details from product_details import product_details
from bedrock.base.waffle import switch
from bedrock.contentful.api import ContentfulPage from bedrock.contentful.api import ContentfulPage
from bedrock.mozorg.credits import CreditsFile from bedrock.mozorg.credits import CreditsFile
from bedrock.mozorg.forms import MiecoEmailForm from bedrock.mozorg.forms import MiecoEmailForm
from bedrock.mozorg.models import WebvisionDoc from bedrock.mozorg.models import WebvisionDoc
from bedrock.newsletter.forms import NewsletterFooterForm from bedrock.newsletter.forms import NewsletterFooterForm
from bedrock.utils.views import VariationTemplateView
from lib import l10n_utils from lib import l10n_utils
from lib.l10n_utils import L10nTemplateView, RequireSafeMixin from lib.l10n_utils import L10nTemplateView, RequireSafeMixin
from lib.l10n_utils.fluent import ftl_file_is_active from lib.l10n_utils.fluent import ftl_file_is_active
@ -125,7 +125,8 @@ def namespaces(request, namespace):
return django_render(request, template, context) return django_render(request, template, context)
class HomeView(VariationTemplateView): class HomeView(L10nTemplateView):
m24_template_name = "mozorg/home/home-m24.html"
template_name = "mozorg/home/home-new.html" template_name = "mozorg/home/home-new.html"
old_template_name = "mozorg/home/home-old.html" old_template_name = "mozorg/home/home-old.html"
template_context_variations = ["1", "2", "3"] template_context_variations = ["1", "2", "3"]
@ -136,12 +137,28 @@ class HomeView(VariationTemplateView):
def get_template_names(self): def get_template_names(self):
experience = self.request.GET.get("xv", None) experience = self.request.GET.get("xv", None)
if ftl_file_is_active("mozorg/home-new") and experience != "legacy": if switch("m24-home") and self.request.locale.startswith("en"):
return [self.m24_template_name]
elif ftl_file_is_active("mozorg/home-new") and experience != "legacy":
return [self.template_name] return [self.template_name]
return [self.old_template_name] return [self.old_template_name]
class AboutView(L10nTemplateView):
m24_template_name = "mozorg/about/index-m24.html"
template_name = "mozorg/about/index.html"
activation_files = ["mozorg/about"]
ftl_files_map = {template_name: ["mozorg/about"]}
def get_template_names(self):
if switch("m24-about") and self.request.locale.startswith("en"):
return [self.m24_template_name]
return [self.template_name]
@method_decorator(never_cache, name="dispatch") @method_decorator(never_cache, name="dispatch")
class ContentfulPreviewView(L10nTemplateView): class ContentfulPreviewView(L10nTemplateView):
def get_context_data(self, **kwargs): def get_context_data(self, **kwargs):

Просмотреть файл

@ -6,26 +6,165 @@
@import '~@mozilla-protocol/core/protocol/css/includes/lib'; @import '~@mozilla-protocol/core/protocol/css/includes/lib';
// variables // variables
@import 'vars/animation';
@import 'vars/color'; @import 'vars/color';
@import 'vars/grid';
@import 'vars/spacing'; @import 'vars/spacing';
@import 'vars/text'; @import 'vars/text';
@import 'vars/animation';
$mobile-square-img-max-width: 363px; // components
@import 'consider';
@import 'copy';
@import 'donate';
@import 'grid';
@import 'hero';
@import 'showcase';
@import 'spring';
@import 'transition';
@font-face {
font-display: swap;
font-family: 'Mozilla Sans Text';
font-style: normal;
font-weight: normal;
src:
url('#{$m24-font-path}/mozilla-sans-text/MozillaSansTextBETA-SemiBold.woff2') format('woff2'),
url('#{$m24-font-path}/mozilla-sans-text/MozillaSansTextBETA-SemiBold.woff') format('woff');
}
@font-face {
font-display: swap;
font-family: 'Mozilla Sans Text';
font-style: normal;
font-weight: bold;
src:
url('#{$m24-font-path}/mozilla-sans-text/MozillaSansTextBETA-Bold.woff2') format('woff2'),
url('#{$m24-font-path}/mozilla-sans-text/MozillaSansTextBETA-Bold.woff') format('woff');
}
@font-face {
font-display: swap;
font-family: 'Mozilla Sans Text';
font-style: italic;
font-weight: normal;
src:
url('#{$m24-font-path}/mozilla-sans-text/MozillaSansTextBETA-SemiBoldIt.woff2') format('woff2'),
url('#{$m24-font-path}/mozilla-sans-text/MozillaSansTextBETA-SemiBoldIt.woff') format('woff');
}
@font-face {
font-display: swap;
font-family: 'Mozilla Sans Text';
font-style: italic;
font-weight: bold;
src:
url('#{$m24-font-path}/mozilla-sans-text/MozillaSansTextBETA-BoldIt.woff2') format('woff2'),
url('#{$m24-font-path}/mozilla-sans-text/MozillaSansTextBETA-BoldIt.woff') format('woff');
}
@font-face {
font-display: swap;
font-family: 'Mozilla SemiSlab';
font-style: normal;
font-weight: normal;
src:
url('#{$m24-font-path}/mozilla-semi-slab/MozillaSemiSlab-SemiBold.woff2') format('woff2'),
url('#{$m24-font-path}mozilla-semi-slab/MozillaSemiSlab-SemiBold.woff') format('woff');
}
@font-face {
font-display: swap;
font-family: 'Mozilla SemiSlab';
font-style: normal;
font-weight: bold;
src:
url('#{$m24-font-path}/mozilla-semi-slab/MozillaSemiSlab-Bold.woff2') format('woff2'),
url('#{$m24-font-path}mozilla-semi-slab/MozillaSemiSlab-Bold.woff') format('woff');
}
/* Protocol overrides ------------------------------------------------------------ */
body {
background-color: $m24-color-white;
color: $m24-color-black;
font-family: 'Mozilla Sans Text', sans-serif;
font-variant-ligatures: none;
line-height: 1.2;
}
h1, h2, h3, h4, h5 {
color: $m24-color-black;
font-family: 'Mozilla SemiSlab', serif;
font-variant-ligatures: none;
font-weight: bold;
}
strong {
font-weight: 900;
}
a:link {
color: $m24-color-black;
&:hover,
&:focus {
color: $m24-color-black;
}
&:visited{
&:hover,
&:focus {
color: $m24-color-black;
}
}
}
*:focus,
*:focus-visible {
outline-offset: 6px;
}
/* ------------------------------------------------------------------------------- */ /* ------------------------------------------------------------------------------- */
// can only be used inside a component that is 1440px with $content-padding on each side .m24-c-container {
@function grid($n) { @include container;
$total-columns: 12;
$one-column: calc(100% / #{$total-columns});
$minus: calc($grid-gutter * ($grid-columns - $n) / $grid-columns);
@return calc($one-column * #{$n} - #{$minus});
} }
// can only be used inside a component that is 1440px with $content-padding on each side .m24-c-content {
@mixin grid { @include container;
display: grid; padding-top: $spacer-xl;
grid-template-columns: repeat($grid-columns, 1fr); padding-bottom: $spacer-xl;
gap: $grid-gutter; }
/* ------------------------------------------------------------------------------- */
.m24-c-section-cta {
margin-bottom: 0;
padding: $spacer-xs 0;
text-align: right;
}
.m24-c-cta {
color: $m24-color-black;
display: inline-block;
font-family: 'Mozilla SemiSlab', serif;
font-size: $text-button-lg;
&:hover {
color: $m24-color-dark-green;
}
&:focus-visible {
color: $m24-color-black;
}
&:active {
color: $m24-color-black;
}
&.m24-t-small {
font-family: 'Mozilla Sans Text', sans-serif;
font-size: $text-button-sm;
}
} }

Просмотреть файл

@ -0,0 +1,83 @@
// 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/.
.m24-c-consider {
@include container;
color: $m24-color-black;
background-color: $m24-color-white;
padding: $spacer-xl $container-padding;
* {
margin-bottom: 0;
}
}
.m24-c-consider-title {
font-size: $alias-text-title-h2;
padding-bottom: $spacer-xl;
text-wrap-style: balance;
}
.m24-c-consider-media {
@include grid;
padding-bottom: $spacer-xl;
picture {
display: grid; // removes line height so there's no extra space underneath
grid-column: auto / span 6;
}
picture:nth-child(1),
picture:nth-child(3) {
justify-self: end;
}
}
.m24-consider-cta-info {
font-size: $alias-text-title-h4;
}
.m24-c-consider-cta {
padding-top: $spacer-lg;
text-align: right;
}
@media #{$mq-md} {
.m24-c-consider-media {
display: flex;
gap: $grid-gutter;
}
}
@media #{$mq-lg} {
.m24-c-consider {
@include grid;
}
.m24-c-consider-title {
grid-column: 1/-1;
padding-bottom: $spacer-xl;
}
.m24-c-consider-media {
grid-column: 1/-1;
grid-row: 2/4;
padding: 0;
picture {
grid-column: auto / span 3;
}
}
.m24-consider-cta-info {
grid-column: 1/7;
}
.m24-c-consider-cta {
grid-column: 7/-1;
padding: 0;
place-self: end;
}
}

44
media/css/m24/copy.scss Normal file
Просмотреть файл

@ -0,0 +1,44 @@
// 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/.
.m24-c-copy {
box-sizing: border-box;
font-size: $alias-text-title-h4;
margin: 0 auto;
max-width: $content-max;
p {
margin-bottom: 0;
text-wrap-style: balance;
}
}
.m24-c-copy-title {
font-size: $alias-text-title-h2;
margin-bottom: 0;
padding-bottom: $spacer-sm;
text-wrap-style: balance;
&.m24-t-2xl {
font-size: $alias-text-title-h1;
}
}
.m24-c-copy-cta {
text-align: right;
padding-top: $spacer-md;
}
@media #{$mq-xl} {
.m24-c-copy {
p {
max-width: grid(9);
}
}
p.m24-c-copy-cta {
max-width: 100%;
}
}

83
media/css/m24/donate.scss Normal file
Просмотреть файл

@ -0,0 +1,83 @@
// 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/.
.m24-c-donate {
@include container;
color: $m24-color-black;
background-color: $m24-color-white;
padding: $spacer-xl $container-padding;
* {
margin-bottom: 0;
}
}
.m24-c-donate-title {
font-size: $alias-text-title-h2;
padding-bottom: $spacer-3xl;
text-wrap-style: balance;
}
.m24-c-donate-media {
img {
display: block;
}
}
.m24-c-donate-info {
padding-top: $spacer-xl;
font-size: $alias-text-title-h5;
}
.m24-c-donate-info-title {
font-size: $alias-text-title-h4;
padding-bottom: $spacer-xs;
}
.m24-c-donate-cta {
padding: $spacer-lg 0 0;
text-align: right;
a {
text-align: right;
}
}
.m24-consider-cta-text {
font-size: $alias-text-title-h4;
padding-top: $spacer-xs;
}
@media #{$mq-lg} {
.m24-c-donate {
@include grid;
}
.m24-c-donate-title {
grid-column: 1/-1;
}
.m24-c-donate-media {
grid-column: 1/7;
grid-row: 2/4;
}
.m24-c-donate-info {
padding-top: 0;
grid-column: 7/-1;
text-wrap-style: balance;
}
.m24-c-donate-cta {
place-self: end;
grid-column: 1/-1;
padding: 0;
a {
grid-column: 2/-1;
}
}
}

62
media/css/m24/grid.scss Normal file
Просмотреть файл

@ -0,0 +1,62 @@
// 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/.
.m24-c-grid {
padding: $spacer-xl 0;
}
.m24-c-grid-cell {
padding-top: $spacer-lg;
&:first-child {
padding-top: 0;
}
}
.m24-l-grid-pair .m24-c-grid-cell {
max-width: $mobile-square-img-max-width;
margin: 0 auto;
}
.m24-grid-cell-cta {
margin: 0;
}
@media #{$mq-md} {
.m24-c-grid {
@include grid;
}
.m24-c-grid-cell {
padding-top: 0;
}
.m24-l-grid-pair .m24-c-grid-cell {
grid-column: 1/7;
max-width: auto;
+ .m24-c-grid-cell {
grid-column: 7/-1;
}
}
}
@media #{$mq-xl} {
.m24-l-grid-pair .m24-c-grid-cell {
grid-column: 2/5;
+ .m24-c-grid-cell {
grid-column: 9/-2;
}
}
}
.m24-grid-cell-media {
padding-bottom: $spacer-sm;
}
.m24-grid-cell-title {
margin-bottom: 0;
padding-bottom: $spacer-sm;
}

33
media/css/m24/hero.scss Normal file
Просмотреть файл

@ -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/.
.m24-c-hero {
@include container;
padding-top: $spacer-2xl;
* {
margin-bottom: 0;
}
}
.m24-c-hero-title {
font-size: $text-title-2xl;
}
.m24-c-hero-media {
margin: 0 calc(-1 * $container-padding);
padding-top: $spacer-xl;
img {
display: block;
border: $spacer-xs solid $color-black; // this does not change from light to dark mode
box-sizing: border-box;
}
}
.m24-c-hero-cta {
padding: $spacer-md 0 0;
text-align: right;
}

Просмотреть файл

@ -0,0 +1,70 @@
// 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/.
.m24-c-showcase {
@include container;
padding-top: $spacer-xl;
padding-bottom: $spacer-xl;
* {
margin-bottom: 0;
}
}
.m24-c-showcase-title {
font-size: $alias-text-title-h2;
}
.m24-c-showcase-subtitle {
font-size: $alias-text-title-h4;
text-wrap-style: balance;
padding-top: $spacer-sm;
}
.m24-c-showcase-media {
text-align: center;
padding: $spacer-xl 0;
position: relative;
}
.m24-c-showcase-info {
padding-bottom: $spacer-xl;
font-size: $alias-text-title-h3;
}
.m24-c-showcase-cta {
text-align: right;
}
@media #{$mq-lg} {
.m24-c-showcase {
@include grid;
grid-template-rows: min-content min-content auto min-content;
}
.m24-c-showcase-title {
grid-column: 1/-1;
}
.m24-c-showcase-subtitle {
grid-column: 1/10;
}
.m24-c-showcase-media {
grid-column: 1/-1;
align-self: center;
}
.m24-c-showcase-info {
grid-column: 1/7;
padding-bottom: 0;
}
.m24-c-showcase-cta {
grid-column: 7/-1;
}
}

95
media/css/m24/spring.scss Normal file
Просмотреть файл

@ -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/.
$logo-spacing: calc(24px + #{$spacer-xs});
.m24-c-spring {
padding: $spacer-xl 0;
margin: 0;
}
.m24-c-spring-item {
border-bottom: 4px solid $m24-color-light-gray;
margin-bottom: 0;
}
.m24-c-spring-link {
@include grid;
background-color: $m24-color-white;
color: $m24-color-black;
display: grid;
gap: $spacer-2xs $grid-gutter;
margin: 0 calc($container-padding * -1);
padding: $spacer-sm $container-padding;
position: relative;
text-decoration: none;
&:hover,
&:link:active, // override protocol
&:focus-visible {
@include invert-colors;
background-color: $m24-color-white; // override protocl
position: relative;
z-index: 2;
}
&::before,
&::after {
content: '';
background-image: url('/media/img/m24/todo-1-1.svg');
background-size: 15px auto;
background-repeat: no-repeat;
background-position: center left;
display: block;
width: 24px;
position: absolute;
top: 0;
bottom: 0;
}
&::before {
left: $container-padding;
}
&::after {
content: '';
background-image: url('/media/img/icons/m24-small/arrow-right.svg');
right: $container-padding;
}
&:focus-visible::after,
&:active::after,
&:hover::after {
background-image: url('/media/img/icons/m24-small/arrow-right-white.svg');
}
}
.m24-c-spring-title {
color: $m24-color-black;
display: inline-block;
font-size: $alias-text-title-h4;
font-weight: 600;
grid-column: 1 / span 10;
padding-left: $logo-spacing;
line-height: 1;
}
.m24-c-spring-info {
color: $m24-color-functional-gray;
grid-column: 1 / span 11;
padding-left: $logo-spacing;
}
@media #{$mq-lg} {
.m24-c-spring-title {
grid-column: 1 / 4;
align-content: center;
}
.m24-c-spring-info {
grid-column: 4 / 11;
padding-left: 0;
align-content: end;
}
}

Просмотреть файл

@ -0,0 +1,87 @@
// 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/.
// TODO: shutter lines are not equal height in Figma
.m24-c-transition {
overflow: hidden;
position: relative;
height: calc($spacer-xl * 2);
background-color: transparent;
hr,
&::before,
&::after {
content: '';
display: block;
height: $spacer-xl;
width: 100%;
background-color: $m24-color-light-green;
margin: 0;
border: 0;
top: 0;
left: 0;
position: absolute;
}
&.m24-t-purple {
background-color: transparent;
hr,
&::before,
&::after {
background-color: $token-color-light-pink;
}
}
&.m24-t-black {
background-color: transparent;
hr,
&::before,
&::after {
background-color: $m24-color-black;
}
}
&::before {
transform: translate(calc(grid(10) * -1), 0);
}
hr {
transform: translate(calc(grid(8) * -1), 0);
top: $spacer-xl;
}
&::after {
top: $spacer-xl;
transform: translate(grid(8), 0);
}
&.m24-l-reverse {
&::before {
display: none;
left: 50%;
transform: translate(-50%,0);
}
hr {
top: 0;
left: 50%;
transform: translate(-50%,0);
margin-left: grid(2);
}
&::after {
left: 50%;
transform: translate(-50%,0);
width: grid(4);
}
}
&.m24-l-reverse + .m24-c-transition {
margin-top: calc($spacer-xl * -2);
}
}

Просмотреть файл

@ -2,6 +2,9 @@
// License, v. 2.0. If a copy of the MPL was not distributed with this // 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/. // file, You can obtain one at https://mozilla.org/MPL/2.0/.
/* ------------------------------------------------------------------------------- */
// hex code colors
// do not reference these directly, use the $m24-color-* variables as they will adapt for dark mode
$token-color-black: #000; $token-color-black: #000;
$token-color-light-gray: #f4f4f4; $token-color-light-gray: #f4f4f4;
$token-color-dark-gray: #181818; $token-color-dark-gray: #181818;
@ -9,103 +12,120 @@ $token-color-functional-gray-on-white: #707070;
$token-color-functional-gray-on-black: #828282; $token-color-functional-gray-on-black: #828282;
$token-color-white: #fff; $token-color-white: #fff;
$token-color-green: #00D230; $token-color-green: #00D230;
$token-color-light-green: #E5F4E5; $token-color-light-green: #D6FFCD;
$token-color-dark-green: #155E2A; $token-color-dark-green: #28733F;
$token-color-orange: #ff9502; $token-color-orange: #FF9456;
$token-color-light-orange: #FFF9F0; $token-color-light-orange: #FAF0E6;
$token-color-dark-orange: #F10900; $token-color-dark-orange: #FF453F;
$token-color-pink: #FF0089; $token-color-pink: #FF97E2;
$token-color-light-pink: #FFEAF4; $token-color-light-pink: #FFF1F8;
$token-color-dark-pink: #7F00CA; $token-color-dark-pink: #AE49EC;
$token-color-feedback-success: $token-color-green; $token-color-feedback-success: $token-color-green;
$token-color-feedback-caution: $token-color-dark-orange; $token-color-feedback-caution: $token-color-dark-orange;
$token-color-feedback-error: $token-color-orange; $token-color-feedback-error: $token-color-orange;
// define CSS variables for the browser
// do not reference these directly, use the $m24-color-* variables
:root { :root {
--white-on-black: #{$token-color-white}; // black and white
--black-on-white: #{$token-color-black}; --m24-white: #{$token-color-white};
--light-gray-on-white: #{$token-color-light-gray}; --m24-black: #{$token-color-black};
--light-gray-on-dark-gray: #{$token-color-light-gray};
--dark-gray-on-light-gray: #{$token-color-dark-gray}; // gray
--white-on-light-gray: #{$token-color-white}; --m24-light-gray: #{$token-color-light-gray};
--white-on-dark-gray: #{$token-color-white}; --m24-dark-gray: #{$token-color-dark-gray};
--black-on-dark-gray: #{$token-color-black}; --m24-functional-gray: #{$token-color-functional-gray-on-white};
--dark-gray-on-black: #{$token-color-dark-gray};
--functional-gray-on-white: #{$token-color-functional-gray-on-white}; // green
--functional-gray-on-black: #{$token-color-functional-gray-on-black}; --m24-green: #{$token-color-green};
--green-on-white: #{$token-color-dark-green}; --m24-light-green: #{$token-color-light-green};
--green-on-black: #{$token-color-green}; --m24-dark-green: #{$token-color-dark-green};
// pink
--m24-pink: #{$token-color-pink};
--m24-light-pink: #{$token-color-light-pink};
--m24-dark-pink: #{$token-color-dark-pink};
// orange
--m24-orange: #{$token-color-orange};
--m24-light-orange: #{$token-color-light-orange};
--m24-dark-orange: #{$token-color-dark-orange};
}
/* ------------------------------------------------------------------------------- */
// define sass variables to hold CSS variables
// reference these!
// black and white
$m24-color-white: var(--m24-white);
$m24-color-black: var(--m24-black);
// gray
$m24-color-light-gray: var(--m24-light-gray);
$m24-color-dark-gray: var(--m24-dark-gray);
$m24-color-functional-gray: var(--m24-functional-gray);
// green
$m24-color-green: var(--m24-green);
$m24-color-light-green: var(--m24-light-green);
$m24-color-dark-green: var(--m24-dark-green);
// orange
$m24-color-orange: var(--m24-orange);
$m24-color-light-orange: var(--m24-light-orange);
$m24-color-dark-orange: var(--m24-dark-orange);
// pink
$m24-color-pink: var(--m24-pink);
$m24-color-light-pink: var(--m24-light-pink);
$m24-color-dark-pink: var(--m24-dark-pink);
/* ------------------------------------------------------------------------------- */
// this mixin will invert the values of the CSS variables, essentially giving you "dark mode"
@mixin invert-colors {
// black and white
--m24-white: #{$token-color-black};
--m24-black: #{$token-color-white};
// gray
--m24-light-gray: #{$token-color-dark-gray};
--m24-dark-gray: #{$token-color-light-gray};
--m24-functional-gray: #{$token-color-functional-gray-on-black};
// green
--m24-green: #{$token-color-green};
--m24-light-green: #{$token-color-dark-green};
--m24-dark-green: #{$token-color-light-green};
// pink
--m24-pink: #{$token-color-pink};
--m24-light-pink: #{$token-color-dark-pink};
--m24-dark-pink: #{$token-color-light-pink};
// orange
--m24-orange: #{$token-color-orange};
--m24-light-orange: #{$token-color-dark-orange};
--m24-dark-orange: #{$token-color-light-orange};
}
/* ------------------------------------------------------------------------------- */
.m24-t-light-alt {
background-color: $m24-color-light-gray;
}
.m24-t-dark {
@include invert-colors;
background-color: $m24-color-white;
color: $m24-color-black;
}
.m24-t-green {
background-color: $m24-color-light-green;
} }
.m24-t-dark,
.m24-t-purple { .m24-t-purple {
--white-on-black: #{$token-color-black}; background-color: $token-color-light-pink;
--black-on-white: #{$token-color-white};
--light-gray-on-white: #{$token-color-dark-gray};
--light-gray-on-dark-gray: #{$token-color-dark-gray};
--dark-gray-on-light-gray: #{$token-color-light-gray};
--white-on-light-gray: #{$token-color-light-gray};
--white-on-dark-gray: #{$token-color-dark-gray};
--black-on-dark-gray: #{$token-color-dark-gray};
--dark-gray-on-black: #{$token-color-black};
--functional-gray-on-white: #{$token-color-functional-gray-on-black};
--functional-gray-on-black: #{$token-color-functional-gray-on-white};
--green-on-white: #{$token-color-green};
--green-on-black: #{$token-color-dark-green};
// dark mode not supported for now
// @media (prefers-color-scheme: dark) {
// --white-on-black: #{$token-color-dark-gray};
// --black-on-white: #{$token-color-functional-gray-on-black};
// --light-gray-on-white: #{$token-color-light-gray};
// --light-gray-on-dark-gray: #{$token-color-light-gray};
// --dark-gray-on-light-gray: #{$token-color-dark-gray};
// --white-on-light-gray: #{$token-color-white};
// --white-on-dark-gray: #{$token-color-white};
// --black-on-dark-gray: #{$token-color-black};
// --dark-gray-on-black: #{$token-color-dark-gray};
// --functional-gray-on-white: #{$token-color-functional-gray-on-black);
// --functional-gray-on-black: #{$token-color-functional-gray-on-white};
// --green-on-white: #{$token-color-dark-green};
// --green-on-black: #{$token-color-green};
// }
} }
// dark mode not supported for now
// @media (prefers-color-scheme: dark) {
// :root {
// --white-on-black: #{$token-color-black};
// --black-on-white: #{$token-color-white};
// --light-gray-on-white: #{$token-color-dark-gray};
// --light-gray-on-dark-gray: #{$token-color-dark-gray};
// --dark-gray-on-light-gray: #{$token-color-light-gray};
// --white-on-light-gray: #{$token-color-light-gray};
// --white-on-dark-gray: #{$token-color-dark-gray};
// --black-on-dark-gray: #{$token-color-dark-gray};
// --dark-gray-on-black: #{$token-color-black};
// --functional-gray-on-white: #{$token-color-functional-gray-on-black};
// --functional-gray-on-black: #{$token-color-functional-gray-on-white};
// --green-on-white: #{$token-color-green};
// --green-on-black: #{$token-color-dark-green};
// }
// .m24-t-purple {
// --black-on-white: #{$token-color-black};
// }
// }
$color-white-on-black: var(--white-on-black);
$color-black-on-white: var(--black-on-white);
$color-light-gray-on-white: var(--light-gray-on-white);
$color-light-gray-on-dark-gray: var(--light-gray-on-dark-gray);
$color-dark-gray-on-light-gray: var(--dark-gray-on-light-gray);
$color-white-on-light-gray: var(--white-on-light-gray);
$color-white-on-dark-gray: var(--white-on-dark-gray);
$color-black-on-dark-gray: var(--black-on-dark-gray);
$color-dark-gray-on-black: var(--dark-gray-on-black);
$color-functional-gray-on-white: var(--functional-gray-on-white);
$color-functional-gray-on-black: var(--functional-gray-on-black);
$color-green-on-white: var(--green-on-white);
$color-green-on-black: var(--green-on-black);
$color-purple: #{$token-color-dark-pink};
$color-black: #{$token-color-black};

Просмотреть файл

@ -0,0 +1,56 @@
// 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/.
:root {
// grid
--grid-margin: 16px;
--grid-gutter: 8px;
}
@media #{$mq-md} {
:root {
// grid
--grid-margin: 24px;
--grid-gutter: 12px;
}
}
@media #{$mq-xl} {
:root {
// grid
--grid-margin: 32px;
--grid-gutter: 16px;
}
}
// grid
$grid-margin: var(--grid-margin);
$grid-gutter: var(--grid-gutter);
$grid-columns: 12;
// image in grid
$mobile-square-img-max-width: 363px;
@function grid($n) {
// can only be used inside a container that is full width with $content-padding on each side
$total-columns: 12;
$one-column: calc(100% / #{$total-columns});
$minus: calc($grid-gutter * ($grid-columns - $n) / $grid-columns);
@return calc($one-column * #{$n} - #{$minus});
}
@mixin grid {
// can only be used inside a container that is full width with $content-padding on each side
display: grid;
grid-template-columns: repeat($grid-columns, 1fr);
gap: $grid-gutter;
}
@mixin container {
box-sizing: border-box;
margin: 0 auto;
max-width: $content-max;
padding: 0 $container-padding;
position: relative;
}

Просмотреть файл

@ -13,10 +13,6 @@
--spacer-xs: 8px; --spacer-xs: 8px;
--spacer-2xs: 4px; --spacer-2xs: 4px;
// grid
--grid-margin: 16px;
--grid-gutter: 8px;
// container // container
--container-padding: 16px; --container-padding: 16px;
} }
@ -33,10 +29,6 @@
--spacer-xs: 8px; --spacer-xs: 8px;
--spacer-2xs: 4px; --spacer-2xs: 4px;
// grid
--grid-margin: 24px;
--grid-gutter: 12px;
// container // container
--container-padding: 24px; --container-padding: 24px;
} }
@ -54,10 +46,6 @@
--spacer-xs: 8px; --spacer-xs: 8px;
--spacer-2xs: 4px; --spacer-2xs: 4px;
// grid
--grid-margin: 32px;
--grid-gutter: 16px;
// container // container
--container-padding: 32px; --container-padding: 32px;
} }
@ -73,10 +61,5 @@ $spacer-sm: var(--spacer-sm);
$spacer-xs: var(--spacer-xs); $spacer-xs: var(--spacer-xs);
$spacer-2xs: var(--spacer-2xs); $spacer-2xs: var(--spacer-2xs);
// grid
$grid-margin: var(--grid-margin);
$grid-gutter: var(--grid-gutter);
$grid-columns: 12;
// container // container
$container-padding: var(--container-padding); $container-padding: var(--container-padding);

Просмотреть файл

@ -2,6 +2,8 @@
// License, v. 2.0. If a copy of the MPL was not distributed with this // 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/. // file, You can obtain one at https://mozilla.org/MPL/2.0/.
$m24-font-path: '/media/fonts/m24/';
:root { :root {
// titles // titles
--text-title-2xl: 48px; --text-title-2xl: 48px;
@ -76,7 +78,6 @@ $text-body-sm: var(--text-body-sm);
$text-button-lg: var(--text-button-lg); $text-button-lg: var(--text-button-lg);
$text-button-sm: var(--text-button-sm); $text-button-sm: var(--text-button-sm);
// aliases are to help with copying styles from the Basic Figma files // aliases are to help with copying styles from the Basic Figma files
// these should be find/replaced out at some point in the future // these should be find/replaced out at some point in the future
$alias-text-title-h1: $text-title-2xl; $alias-text-title-h1: $text-title-2xl;

Двоичные данные
media/fonts/m24/mozilla-sans-text/MozillaSansTextBETA-Bold.woff Normal file

Двоичный файл не отображается.

Двоичные данные
media/fonts/m24/mozilla-sans-text/MozillaSansTextBETA-Bold.woff2 Normal file

Двоичный файл не отображается.

Двоичные данные
media/fonts/m24/mozilla-sans-text/MozillaSansTextBETA-BoldIt.woff Normal file

Двоичный файл не отображается.

Двоичные данные
media/fonts/m24/mozilla-sans-text/MozillaSansTextBETA-BoldIt.woff2 Normal file

Двоичный файл не отображается.

Двоичные данные
media/fonts/m24/mozilla-sans-text/MozillaSansTextBETA-Italic.woff Normal file

Двоичный файл не отображается.

Двоичные данные
media/fonts/m24/mozilla-sans-text/MozillaSansTextBETA-Italic.woff2 Normal file

Двоичный файл не отображается.

Двоичные данные
media/fonts/m24/mozilla-sans-text/MozillaSansTextBETA-Medium.woff Normal file

Двоичный файл не отображается.

Двоичные данные
media/fonts/m24/mozilla-sans-text/MozillaSansTextBETA-Medium.woff2 Normal file

Двоичный файл не отображается.

Двоичный файл не отображается.

Двоичный файл не отображается.

Двоичные данные
media/fonts/m24/mozilla-sans-text/MozillaSansTextBETA-Regular.woff Normal file

Двоичный файл не отображается.

Двоичный файл не отображается.

Двоичный файл не отображается.

Двоичный файл не отображается.

Двоичный файл не отображается.

Двоичный файл не отображается.

Двоичные данные
media/fonts/m24/mozilla-semi-slab/MozillaSemiSlab-Bold.woff Normal file

Двоичный файл не отображается.

Двоичные данные
media/fonts/m24/mozilla-semi-slab/MozillaSemiSlab-Bold.woff2 Normal file

Двоичный файл не отображается.

Двоичные данные
media/fonts/m24/mozilla-semi-slab/MozillaSemiSlab-BoldIt.woff Normal file

Двоичный файл не отображается.

Двоичные данные
media/fonts/m24/mozilla-semi-slab/MozillaSemiSlab-BoldIt.woff2 Normal file

Двоичный файл не отображается.

Двоичные данные
media/fonts/m24/mozilla-semi-slab/MozillaSemiSlab-Italic.woff Normal file

Двоичный файл не отображается.

Двоичные данные
media/fonts/m24/mozilla-semi-slab/MozillaSemiSlab-Italic.woff2 Normal file

Двоичный файл не отображается.

Двоичные данные
media/fonts/m24/mozilla-semi-slab/MozillaSemiSlab-Regular.woff Normal file

Двоичный файл не отображается.

Двоичные данные
media/fonts/m24/mozilla-semi-slab/MozillaSemiSlab-Regular.woff2 Normal file

Двоичный файл не отображается.

Двоичные данные
media/fonts/m24/mozilla-semi-slab/MozillaSemiSlab-SemiBold.woff Normal file

Двоичный файл не отображается.

Двоичные данные
media/fonts/m24/mozilla-semi-slab/MozillaSemiSlab-SemiBold.woff2 Normal file

Двоичный файл не отображается.

Двоичные данные
media/fonts/m24/mozilla-semi-slab/MozillaSemiSlab-SemiBoldIt.woff Normal file

Двоичный файл не отображается.

Двоичные данные
media/fonts/m24/mozilla-semi-slab/MozillaSemiSlab-SemiBoldIt.woff2 Normal file

Двоичный файл не отображается.

Просмотреть файл

@ -0,0 +1,5 @@
<?xml version="1.0" encoding="utf-8"?>
<svg width="24" height="24" style="enable-background:new 0 0 896.1732 896.1732" xmlns="http://www.w3.org/2000/svg">
<defs/>
<path d="M13.787 9.413h-3.014V.32h3.014v9.093ZM12.28 23.679l12-14.266H13.787v3.014h4.019l-5.526 6.57-5.527-6.57 7.632-.001-.004-3.013H.28l12 14.266Z" style="transform-box: fill-box; transform-origin: 50% 50%; fill: rgb(255, 255, 255);" transform="rotate(-90 0 0)"/>
</svg>

После

Ширина:  |  Высота:  |  Размер: 439 B

Просмотреть файл

@ -0,0 +1 @@
<svg xmlns="http://www.w3.org/2000/svg" width="24" height="24" style="enable-background:new 0 0 896.1732 896.1732"><path d="M13.787 9.413h-3.014V.32h3.014v9.093ZM12.28 23.679l12-14.266H13.787v3.014h4.019l-5.526 6.57-5.527-6.57 7.632-.001-.004-3.013H.28l12 14.266Z" style="transform-box:fill-box;transform-origin:50% 50%" transform="rotate(-90 0 0)"/></svg>

После

Ширина:  |  Высота:  |  Размер: 356 B

Просмотреть файл

@ -0,0 +1,6 @@
<?xml version="1.0" encoding="utf-8"?>
<svg width="24" height="24" style="enable-background:new 0 0 896.1732 896.1732" xmlns="http://www.w3.org/2000/svg">
<defs/>
<path d="M3.914 9.793H.9V-.9h3.014V9.793Zm0 3.014 10.493-.126V9.793H3.914v3.014Z" transform="rotate(-90 7.654 6.753)" style="fill: rgb(255, 255, 255);"/>
<path d="m13.004 23.314-3.024.036.029-13.36h2.995v13.324Zm0-.014 10.493-.126v-2.888l-10.493-.003V23.3Z" transform="rotate(90 16.743 17.246)" style="fill: rgb(255, 255, 255);"/>
</svg>

После

Ширина:  |  Высота:  |  Размер: 506 B

Просмотреть файл

@ -0,0 +1 @@
<svg xmlns="http://www.w3.org/2000/svg" width="24" height="24" style="enable-background:new 0 0 896.1732 896.1732"><path d="M3.914 9.793H.9V-.9h3.014V9.793Zm0 3.014 10.493-.126V9.793H3.914v3.014Z" transform="rotate(-90 7.654 6.753)"/><path d="m13.004 23.314-3.024.036.029-13.36h2.995v13.324Zm0-.014 10.493-.126v-2.888l-10.493-.003V23.3Z" transform="rotate(90 16.743 17.246)"/></svg>

После

Ширина:  |  Высота:  |  Размер: 382 B

Просмотреть файл

@ -0,0 +1,6 @@
<?xml version="1.0" encoding="utf-8"?>
<svg viewBox="0 0 768 768" width="768px" height="768px" fill="#A9A9A9" xmlns="http://www.w3.org/2000/svg">
<defs/>
<rect width="768" height="768" style="fill: rgb(187, 187, 187);"/>
<text style="white-space: pre; fill: rgb(51, 51, 51); font-family: Arial, sans-serif; font-size: 28px;" x="364.538" y="393.633">1:1</text>
</svg>

После

Ширина:  |  Высота:  |  Размер: 373 B

Просмотреть файл

@ -0,0 +1,6 @@
<?xml version="1.0" encoding="utf-8"?>
<svg viewBox="0 0 768 384" width="768px" height="384px" fill="#A9A9A9" xmlns="http://www.w3.org/2000/svg">
<defs/>
<rect width="768" height="384" style="fill: rgb(187, 187, 187);"/>
<text style="white-space: pre; fill: rgb(51, 51, 51); font-family: Arial, sans-serif; font-size: 28px;" x="364.538" y="201.698">2:1</text>
</svg>

После

Ширина:  |  Высота:  |  Размер: 373 B

Просмотреть файл

@ -0,0 +1,6 @@
<?xml version="1.0" encoding="utf-8"?>
<svg viewBox="0 0 216 324" width="216px" height="324px" fill="#A9A9A9" xmlns="http://www.w3.org/2000/svg">
<defs/>
<rect width="216" height="324" style="fill: rgb(187, 187, 187);"/>
<text style="white-space: pre; fill: rgb(51, 51, 51); font-family: Arial, sans-serif; font-size: 28px;" x="88.535" y="171.655">2:3</text>
</svg>

После

Ширина:  |  Высота:  |  Размер: 372 B

Просмотреть файл

@ -0,0 +1,6 @@
<?xml version="1.0" encoding="utf-8"?>
<svg viewBox="0 0 1440 533" width="1440px" height="533px" fill="#D3D3D3" xmlns="http://www.w3.org/2000/svg">
<defs/>
<rect width="1440" height="533" style="fill: rgb(187, 187, 187);"/>
<text style="white-space: pre; fill: rgb(51, 51, 51); font-family: Arial, sans-serif; font-size: 28px;" x="688.861" y="276.168">2.7:1</text>
</svg>

После

Ширина:  |  Высота:  |  Размер: 378 B

Просмотреть файл

@ -0,0 +1,6 @@
<?xml version="1.0" encoding="utf-8"?>
<svg viewBox="0 0 400 500" width="400px" height="500px" fill="#A9A9A9" xmlns="http://www.w3.org/2000/svg">
<defs/>
<rect width="400" height="500" style="fill: rgb(187, 187, 187);"/>
<text style="white-space: pre; fill: rgb(51, 51, 51); font-family: Arial, sans-serif; font-size: 28px;" x="180.54" y="259.619">4:5</text>
</svg>

После

Ширина:  |  Высота:  |  Размер: 372 B

Просмотреть файл

@ -1237,6 +1237,12 @@
"css/firefox/built-for-you/landing.scss" "css/firefox/built-for-you/landing.scss"
], ],
"name": "firefox-built-for-you" "name": "firefox-built-for-you"
},
{
"files": [
"css/m24/base.scss"
],
"name": "m24"
} }
], ],
"js": [ "js": [