зеркало из https://github.com/mozilla/bedrock.git
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
GitHub
Родитель
dc5969b32e
Коммит
8f06aa1b59
|
|
@ -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 let’s 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 Mozilla’s 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 ing’s 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 web’s future</h2>
|
||||
<p>Here are a few ways we’d 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 = [
|
||||
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/details/", "mozorg/about/manifesto-details.html", ftl_files=["mozorg/about/manifesto"]),
|
||||
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 product_details import product_details
|
||||
|
||||
from bedrock.base.waffle import switch
|
||||
from bedrock.contentful.api import ContentfulPage
|
||||
from bedrock.mozorg.credits import CreditsFile
|
||||
from bedrock.mozorg.forms import MiecoEmailForm
|
||||
from bedrock.mozorg.models import WebvisionDoc
|
||||
from bedrock.newsletter.forms import NewsletterFooterForm
|
||||
from bedrock.utils.views import VariationTemplateView
|
||||
from lib import l10n_utils
|
||||
from lib.l10n_utils import L10nTemplateView, RequireSafeMixin
|
||||
from lib.l10n_utils.fluent import ftl_file_is_active
|
||||
|
|
@ -125,7 +125,8 @@ def namespaces(request, namespace):
|
|||
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"
|
||||
old_template_name = "mozorg/home/home-old.html"
|
||||
template_context_variations = ["1", "2", "3"]
|
||||
|
|
@ -136,12 +137,28 @@ class HomeView(VariationTemplateView):
|
|||
def get_template_names(self):
|
||||
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.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")
|
||||
class ContentfulPreviewView(L10nTemplateView):
|
||||
def get_context_data(self, **kwargs):
|
||||
|
|
|
|||
|
|
@ -6,26 +6,165 @@
|
|||
@import '~@mozilla-protocol/core/protocol/css/includes/lib';
|
||||
|
||||
// variables
|
||||
@import 'vars/animation';
|
||||
@import 'vars/color';
|
||||
@import 'vars/grid';
|
||||
@import 'vars/spacing';
|
||||
@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
|
||||
@function grid($n) {
|
||||
$total-columns: 12;
|
||||
$one-column: calc(100% / #{$total-columns});
|
||||
$minus: calc($grid-gutter * ($grid-columns - $n) / $grid-columns);
|
||||
@return calc($one-column * #{$n} - #{$minus});
|
||||
.m24-c-container {
|
||||
@include container;
|
||||
}
|
||||
|
||||
// can only be used inside a component that is 1440px with $content-padding on each side
|
||||
@mixin grid {
|
||||
display: grid;
|
||||
grid-template-columns: repeat($grid-columns, 1fr);
|
||||
gap: $grid-gutter;
|
||||
.m24-c-content {
|
||||
@include container;
|
||||
padding-top: $spacer-xl;
|
||||
padding-bottom: $spacer-xl;
|
||||
}
|
||||
|
||||
/* ------------------------------------------------------------------------------- */
|
||||
|
||||
.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;
|
||||
}
|
||||
}
|
||||
|
|
@ -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%;
|
||||
}
|
||||
}
|
||||
|
|
@ -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;
|
||||
}
|
||||
}
|
||||
}
|
||||
|
|
@ -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;
|
||||
}
|
||||
|
|
@ -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;
|
||||
|
||||
}
|
||||
}
|
||||
|
|
@ -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
|
||||
// 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-light-gray: #f4f4f4;
|
||||
$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-white: #fff;
|
||||
$token-color-green: #00D230;
|
||||
$token-color-light-green: #E5F4E5;
|
||||
$token-color-dark-green: #155E2A;
|
||||
$token-color-orange: #ff9502;
|
||||
$token-color-light-orange: #FFF9F0;
|
||||
$token-color-dark-orange: #F10900;
|
||||
$token-color-pink: #FF0089;
|
||||
$token-color-light-pink: #FFEAF4;
|
||||
$token-color-dark-pink: #7F00CA;
|
||||
$token-color-light-green: #D6FFCD;
|
||||
$token-color-dark-green: #28733F;
|
||||
$token-color-orange: #FF9456;
|
||||
$token-color-light-orange: #FAF0E6;
|
||||
$token-color-dark-orange: #FF453F;
|
||||
$token-color-pink: #FF97E2;
|
||||
$token-color-light-pink: #FFF1F8;
|
||||
$token-color-dark-pink: #AE49EC;
|
||||
$token-color-feedback-success: $token-color-green;
|
||||
$token-color-feedback-caution: $token-color-dark-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 {
|
||||
--white-on-black: #{$token-color-white};
|
||||
--black-on-white: #{$token-color-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-white};
|
||||
--functional-gray-on-black: #{$token-color-functional-gray-on-black};
|
||||
--green-on-white: #{$token-color-dark-green};
|
||||
--green-on-black: #{$token-color-green};
|
||||
// black and white
|
||||
--m24-white: #{$token-color-white};
|
||||
--m24-black: #{$token-color-black};
|
||||
|
||||
// gray
|
||||
--m24-light-gray: #{$token-color-light-gray};
|
||||
--m24-dark-gray: #{$token-color-dark-gray};
|
||||
--m24-functional-gray: #{$token-color-functional-gray-on-white};
|
||||
|
||||
// green
|
||||
--m24-green: #{$token-color-green};
|
||||
--m24-light-green: #{$token-color-light-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 {
|
||||
--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};
|
||||
|
||||
// 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};
|
||||
// }
|
||||
background-color: $token-color-light-pink;
|
||||
}
|
||||
|
||||
// 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-2xs: 4px;
|
||||
|
||||
// grid
|
||||
--grid-margin: 16px;
|
||||
--grid-gutter: 8px;
|
||||
|
||||
// container
|
||||
--container-padding: 16px;
|
||||
}
|
||||
|
|
@ -33,10 +29,6 @@
|
|||
--spacer-xs: 8px;
|
||||
--spacer-2xs: 4px;
|
||||
|
||||
// grid
|
||||
--grid-margin: 24px;
|
||||
--grid-gutter: 12px;
|
||||
|
||||
// container
|
||||
--container-padding: 24px;
|
||||
}
|
||||
|
|
@ -54,10 +46,6 @@
|
|||
--spacer-xs: 8px;
|
||||
--spacer-2xs: 4px;
|
||||
|
||||
// grid
|
||||
--grid-margin: 32px;
|
||||
--grid-gutter: 16px;
|
||||
|
||||
// container
|
||||
--container-padding: 32px;
|
||||
}
|
||||
|
|
@ -73,10 +61,5 @@ $spacer-sm: var(--spacer-sm);
|
|||
$spacer-xs: var(--spacer-xs);
|
||||
$spacer-2xs: var(--spacer-2xs);
|
||||
|
||||
// grid
|
||||
$grid-margin: var(--grid-margin);
|
||||
$grid-gutter: var(--grid-gutter);
|
||||
$grid-columns: 12;
|
||||
|
||||
// container
|
||||
$container-padding: var(--container-padding);
|
||||
|
|
|
|||
|
|
@ -2,6 +2,8 @@
|
|||
// 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-font-path: '/media/fonts/m24/';
|
||||
|
||||
:root {
|
||||
// titles
|
||||
--text-title-2xl: 48px;
|
||||
|
|
@ -76,7 +78,6 @@ $text-body-sm: var(--text-body-sm);
|
|||
$text-button-lg: var(--text-button-lg);
|
||||
$text-button-sm: var(--text-button-sm);
|
||||
|
||||
|
||||
// aliases are to help with copying styles from the Basic Figma files
|
||||
// these should be find/replaced out at some point in the future
|
||||
$alias-text-title-h1: $text-title-2xl;
|
||||
|
|
|
|||
Двоичный файл не отображается.
Двоичный файл не отображается.
Двоичный файл не отображается.
Двоичный файл не отображается.
Двоичный файл не отображается.
Двоичный файл не отображается.
Двоичный файл не отображается.
Двоичный файл не отображается.
Двоичный файл не отображается.
Двоичный файл не отображается.
Двоичный файл не отображается.
Двоичный файл не отображается.
Двоичный файл не отображается.
Двоичный файл не отображается.
Двоичный файл не отображается.
Двоичный файл не отображается.
Двоичный файл не отображается.
Двоичный файл не отображается.
Двоичный файл не отображается.
Двоичный файл не отображается.
Двоичный файл не отображается.
Двоичный файл не отображается.
Двоичный файл не отображается.
Двоичный файл не отображается.
Двоичный файл не отображается.
Двоичный файл не отображается.
Двоичный файл не отображается.
Двоичный файл не отображается.
|
|
@ -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"
|
||||
],
|
||||
"name": "firefox-built-for-you"
|
||||
},
|
||||
{
|
||||
"files": [
|
||||
"css/m24/base.scss"
|
||||
],
|
||||
"name": "m24"
|
||||
}
|
||||
],
|
||||
"js": [
|
||||
|
|
|
|||
Загрузка…
Ссылка в новой задаче