зеркало из https://github.com/mozilla/bedrock.git
footer refresh
This commit is contained in:
wen-2018
Alex Gibson
Родитель
d39708b35f
Коммит
3e34323660
|
|
@ -10,6 +10,9 @@
|
|||
|
||||
{% block site_css %}
|
||||
{{ css_bundle('protocol-mozilla') }}
|
||||
{% if switch('m24-navigation-and-footer') and LANG.startswith('en-') %}
|
||||
{{ css_bundle('m24-navigation-and-footer') }}
|
||||
{% endif %}
|
||||
{% endblock %}
|
||||
|
||||
{% block site_footer %}
|
||||
|
|
|
|||
|
|
@ -73,6 +73,9 @@
|
|||
{# Global styles, hidden from IE9 and lower #}
|
||||
{% block site_css %}
|
||||
{{ css_bundle('protocol-firefox') }}
|
||||
{% if switch('m24-navigation-and-footer') and LANG.startswith('en-') %}
|
||||
{{ css_bundle('m24-navigation-and-footer') }}
|
||||
{% endif %}
|
||||
{% endblock %}
|
||||
|
||||
{# Page-specific styles, hidden from IE9 and lower #}
|
||||
|
|
|
|||
|
|
@ -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="moz24-newsletter-container">
|
||||
<div class="moz24-newsletter-wrapper">
|
||||
<div class="moz24-newsletter-info">
|
||||
<img loading="lazy" class="moz24-newsletter-image" src="{{ static('img/logos/mozilla/footer-refresh/symbol.svg') }}" alt="" width="40" height="48">
|
||||
<p>{{ ftl('footer-refresh-find-out-about') }}</p>
|
||||
</div>
|
||||
|
||||
<div class="moz24-newsletter">
|
||||
{{ email_newsletter_form(
|
||||
newsletters='mozilla-and-you',
|
||||
title=None
|
||||
)}}
|
||||
</div>
|
||||
</div>
|
||||
</div>
|
||||
|
|
@ -0,0 +1,134 @@
|
|||
{#
|
||||
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/.
|
||||
#}
|
||||
|
||||
<footer class="moz24-footer" id="colophon">
|
||||
{% if show_newsletter %}
|
||||
{% include 'includes/protocol/footer/footer-newsletter.html' %}
|
||||
{% endif %}
|
||||
<div class="moz24-footer-content">
|
||||
<nav class="moz24-footer-primary">
|
||||
<div class="moz24-footer-sections-wrapper">
|
||||
<div class="moz24-footer-section-wrapper">
|
||||
<section>
|
||||
<div class="moz24-footer-refresh-social-wrapper">
|
||||
<h2 class="moz24-footer-heading-social">{{ ftl('footer-refresh-follow-mozilla') }}</h2>
|
||||
<ul class="moz24-footer-links-social">
|
||||
<li><a class="twitter" href="{{ mozilla_twitter_url() }}" data-link-type="footer" data-link-text="Twitter (@mozilla)">{{ ftl('footer-refresh-x-formerly-twitter', fallback='footer-twitter') }}<span> (@mozilla)</span></a></li>
|
||||
<li><a class="mastodon" href="https://mozilla.social/@Mozilla" rel="me" data-link-type="footer" data-link-text="Mastodon (@mozilla)">{{ ftl('footer-refresh-mastodon') }}<span> (@mozilla)</span></a></li>
|
||||
<li><a class="instagram" href="{{ mozilla_instagram_url() }}" data-link-type="footer" data-link-text="Instagram (@mozilla)">{{ ftl('footer-refresh-instagram') }}<span> (@mozilla)</span></a></li>
|
||||
<li><a class="linkedin" href="https://www.linkedin.com/company/mozilla-corporation/" data-link-type="footer" data-link-text="LinkedIn (@mozilla)">{{ ftl('footer-refresh-linkedin') }}<span> (@mozilla)</span></a></li>
|
||||
<li><a class="tiktok" href="https://www.tiktok.com/@mozilla" data-link-type="footer" data-link-text="TikTok (@mozilla)">{{ ftl('footer-refresh-tiktok') }}<span> (@mozilla)</span></a></li>
|
||||
<li><a class="spotify" href="https://open.spotify.com/show/0vT7LJMeVDxyQ2ZamHKu08?si=_uDRD6bRR_6M5YZyISGXgA" data-link-type="footer" data-link-text="Spotify (@mozilla)">{{ ftl('footer-refresh-spotify') }}<span> (@mozilla)</span></a></li>
|
||||
</ul>
|
||||
</div>
|
||||
<div class="moz24-footer-refresh-social-wrapper">
|
||||
<h2 class="moz24-footer-heading-social">{{ ftl('footer-refresh-follow-firefox') }}</h2>
|
||||
<ul class="moz24-footer-links-social">
|
||||
<li><a class="twitter" href="{{ firefox_twitter_url() }}" data-link-type="footer" data-link-text="Twitter (@firefox)">{{ ftl('footer-refresh-x-formerly-twitter', fallback='footer-refresh-twitter') }}<span> (@firefox)</span></a></li>
|
||||
<li><a class="instagram" href="https://www.instagram.com/firefox/" data-link-type="footer" data-link-text="Instagram (@firefox)">{{ ftl('footer-refresh-instagram') }}<span> (@firefox)</span></a></li>
|
||||
<li><a class="youtube" href="https://www.youtube.com/user/firefoxchannel" data-link-type="footer" data-link-text="YouTube (@firefoxchannel)">{{ ftl('footer-refresh-youtube') }}<span> (@firefoxchannel)</span></a></li>
|
||||
</ul>
|
||||
</div>
|
||||
</section>
|
||||
</div>
|
||||
<div class="moz24-footer-section-wrapper moz24-links-section">
|
||||
<section>
|
||||
<h2 class="moz24-footer-label" data-testid="footer-heading-company">
|
||||
{{ ftl('footer-refresh-company') }}
|
||||
</h2>
|
||||
<ul class="moz24-footer-primary-list" data-testid="footer-list-company">
|
||||
<li><a href="{{ url('mozorg.about.leadership.index') }}" data-link-type="footer" data-link-text="footer-refresh-leadership = Leadership">{{ ftl('footer-refresh-leadership') }}</a></li>
|
||||
<li><a href="https://blog.mozilla.org/category/mozilla/news/?{{ utm_params }}&utm_content=company" data-link-type="footer" data-link-text="Press Center">{{ ftl('footer-refresh-press-center') }}</a></li>
|
||||
<li><a href="{{ url('careers.home') }}" data-link-type="footer" data-link-text="Careers">{{ ftl('footer-refresh-careers') }}</a></li>
|
||||
<li><a href="{{ url('mozorg.contact.contact-landing') }}" data-link-type="footer" data-link-text="Contact">{{ ftl('footer-refresh-contact') }}</a></li>
|
||||
<li>
|
||||
|
||||
</li>
|
||||
{% if LANG == "de" %}
|
||||
{# Legal requirement in Germany see issue #14240 #}
|
||||
<li><a href="{{ url('legal.impressum') }}" data-link-type="footer" data-link-text="Impressum">Impressum</a></li>
|
||||
{% endif %}
|
||||
</ul>
|
||||
</section>
|
||||
|
||||
<section>
|
||||
<h2 class="moz24-footer-label" data-testid="footer-heading-support">
|
||||
{{ ftl('footer-refresh-support') }}
|
||||
</h2>
|
||||
<ul class="moz24-footer-primary-list" data-testid="footer-list-support">
|
||||
<li><a href="https://support.mozilla.org/?{{ utm_params }}&utm_content=support" data-link-type="footer" data-link-text="Product Help">{{ ftl('footer-refresh-product-help', fallback='footer-refresh-support') }}</a></li>
|
||||
<li><a href="https://bugzilla.mozilla.org/?{{ utm_params }}&utm_content=support" data-link-type="footer" data-link-text="File a Bug">{{ ftl('footer-refresh-file-a-bug') }}</a></li>
|
||||
<li><a href="https://pontoon.mozilla.org/?{{ utm_params }}&utm_content=support" data-link-type="footer" data-link-text="Localise Mozilla">{{ ftl('footer-refresh-localize-mozilla') }}</a></li>
|
||||
</ul>
|
||||
</section>
|
||||
|
||||
<section>
|
||||
<h2 class="moz24-footer-label" data-testid="footer-heading-resources">
|
||||
{{ ftl('footer-refresh-resources') }}
|
||||
</h2>
|
||||
<ul class="moz24-footer-primary-list" data-testid="footer-list-resources">
|
||||
<li><a href="https://www.mozilla.org/advertising/" data-link-type="footer" data-link-text="Advertise with Mozilla">{{ ftl('footer-refresh-advertise') }}</a></li>
|
||||
<li><a href="https://mozilla.design/?{{ utm_params }}&utm_content=resources" data-link-type="footer" data-link-text="Brand Standards">{{ ftl('footer-refresh-brand-standards') }}</a></li>
|
||||
<li><a href="/firefox/{{ latest_firefox_version }}/releasenotes/" data-link-type="footer" data-link-text="Firefox Release Notes">{{ ftl('footer-refresh-firefox-release-notes') }}</a></li>
|
||||
</ul>
|
||||
</section>
|
||||
|
||||
<section>
|
||||
<h2 class="moz24-footer-label" data-testid="footer-heading-developers">
|
||||
{{ ftl('footer-refresh-developers') }}
|
||||
</h2>
|
||||
<ul class="moz24-footer-primary-list" data-testid="footer-list-developers">
|
||||
<li><a href="{{ url('firefox.developer.index') }}" data-link-type="footer" data-link-text="Firefox Developer Edition">{{ ftl('footer-refresh-developer-edition') }}</a></li>
|
||||
<li><a href="{{ url('firefox.enterprise.index') }}" data-link-type="footer" data-link-text="Firefox for Enterprise">{{ ftl('footer-refresh-enterprise') }}</a></li>
|
||||
<li><a href="https://firefox-source-docs.mozilla.org/devtools-user/?{{ utm_params }}&utm_content=developers" rel="external" data-link-type="footer" data-link-text="Tools">{{ ftl('footer-refresh-tools') }}</a></li>
|
||||
<li><a href="https://developer.mozilla.org/?{{ utm_params }}" data-link-type="footer" data-link-text="MDN">{{ ftl('footer-refresh-mdn') }}</a></li>
|
||||
</ul>
|
||||
</section>
|
||||
</div>
|
||||
</div>
|
||||
</nav>
|
||||
<div class="moz24-footer-actions">
|
||||
<a class="moz24-footer-donate" href="{{ donate_url(location='moco-donate-footer') }}" data-link-type="button" data-link-text="Donate">
|
||||
<span class="mzp-c-button-icon-start">
|
||||
<svg height="640" viewBox="0 0 896.173 896.173" width="640" xmlns="http://www.w3.org/2000/svg"><switch><path d="m415.586 381.044v-65.006h65.001v65.006zm151.61-179.868c-34.105 0-63.39 12.422-86.609 27.824v87.038c4.788-5.861 12.53-14.509 22.611-22.98 21.228-17.838 42.76-26.882 63.998-26.882 47.765 0 86.625 40.383 86.625 90.02 0 72.488-58.765 143.314-108.062 189.965-37.953 35.915-76.426 63.436-97.672 77.68-21.246-14.244-59.72-41.765-97.673-77.68-49.297-46.651-108.062-117.477-108.062-189.964 0-49.638 38.86-90.021 86.625-90.021 21.239 0 42.77 9.044 63.998 26.882 10.082 8.472 17.823 17.119 22.611 22.98v-87.038c-23.218-15.402-52.503-27.824-86.609-27.824-83.606 0-151.625 69.542-151.625 155.02 0 43.355 14.14 88.366 42.027 133.784 21.258 34.62 50.627 69.704 87.29 104.273 61.41 57.902 122.133 94.58 124.688 96.112l7.735 4.632h17.989l7.735-4.632c2.555-1.533 63.278-38.21 124.687-96.112 36.664-34.57 66.033-69.652 87.29-104.273 27.888-45.418 42.028-90.429 42.028-133.783 0-85.479-68.019-155.021-151.625-155.021"/></switch></svg>
|
||||
</span>
|
||||
<span class="mzp-c-button-icon-text">{{ ftl('footer-refresh-donate') }}</span>
|
||||
</a>
|
||||
<div class="moz24-footer-language">
|
||||
{% include 'includes/protocol/lang-switcher-refresh.html' %}
|
||||
</div>
|
||||
</div>
|
||||
<nav class="moz24-footer-secondary">
|
||||
<div class="moz24-footer-legal">
|
||||
<p class="moz24-footer-license" rel="license">
|
||||
{% set moco_link = 'href="%s" data-link-type="footer" data-link-text="Mozilla Corporation"'|safe|format(url('mozorg.home')) %}
|
||||
{% set mofo_link = 'href="https://foundation.mozilla.org/?utm_source=www.mozilla.org&utm_medium=referral&utm_campaign=footer" rel="external noopener" data-link-type="footer" data-link-text="Mozilla Foundation"'|safe %}
|
||||
{{ ftl('footer-refresh-visit-mozilla-corporations', moco_link=moco_link, mofo_link=mofo_link) }}<br>
|
||||
{{ ftl('footer-refresh-portions-of-this-content', url=url('foundation.licensing.website-content'), current_year=current_year|string) }}
|
||||
</p>
|
||||
<ul class="moz24-footer-terms">
|
||||
<li><a href="{{ url('privacy.notices.websites') }}" data-link-type="footer" data-link-text="Privacy">{{ ftl('footer-refresh-websites-privacy-notice') }}</a></li>
|
||||
<li>
|
||||
{# Link to /privacy/websites/cookie-settings/ is a legal requirement and should not be removed. It must be present on every page (Issue 14213). #}
|
||||
<a href="{{ url('privacy.cookie-settings') }}" data-link-type="footer" data-link-text="Cookies">{{ ftl('footer-refresh-websites-cookies') }}</a>
|
||||
</li>
|
||||
<li><a href="{{ url('legal.index') }}" data-link-type="footer" data-link-text="Legal">{{ ftl('footer-refresh-websites-legal') }}</a></li>
|
||||
<li><a href="{{ url('mozorg.about.governance.policies.participation') }}" data-link-type="footer" data-link-text="Community Participation Guidelines">{{ ftl('footer-refresh-community-participation-guidelines') }}</a></li>
|
||||
{% if ftl_has_messages('footer-about-this-site') %}
|
||||
<li><a href="{{ url('mozorg.about.this-site') }}" data-link-type="footer" data-link-text="About this site">{{ ftl('footer-refresh-about-this-site') }}</a></li>
|
||||
{% endif %}
|
||||
</ul>
|
||||
</div>
|
||||
</nav>
|
||||
<img loading="lazy" class="moz24-footer-logo-image-bottom" src="{{ static('img/logos/mozilla/footer-refresh/mozilla-in-white.svg') }}" alt="" width="1376" height="285">
|
||||
</div>
|
||||
</footer>
|
||||
|
||||
{% block footer_js %}
|
||||
{% if show_newsletter %}
|
||||
{{ js_bundle('newsletter') }}
|
||||
{% endif %}
|
||||
{% endblock %}
|
||||
|
|
@ -6,6 +6,9 @@
|
|||
|
||||
{% set utm_params = 'utm_source=www.mozilla.org&utm_medium=referral&utm_campaign=footer' %}
|
||||
|
||||
{% if switch('m24-navigation-and-footer') and LANG.startswith('en-') %}
|
||||
{% include 'includes/protocol/footer/footer-refresh.html' %}
|
||||
{% else %}
|
||||
<footer class="mzp-c-footer {% if theme_class %}{{ theme_class }}{% endif %}" id="colophon">
|
||||
<div class="mzp-l-content">
|
||||
<nav class="mzp-c-footer-primary">
|
||||
|
|
@ -123,3 +126,4 @@
|
|||
</nav>
|
||||
</div>
|
||||
</footer>
|
||||
{% endif %}
|
||||
|
|
|
|||
|
|
@ -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/.
|
||||
#}
|
||||
|
||||
{% if translations|length > 1 %}
|
||||
<form id="lang_form" class="moz24-c-language-switcher" method="get" action="#">
|
||||
<label for="page-language-select">{{ ftl('footer-refresh-language') }}</label>
|
||||
<a class="mzp-c-language-switcher-link" href="{{ url('mozorg.locales') }}">{{ ftl('footer-refresh-language') }}</a>
|
||||
<select id="page-language-select" class="mzp-js-language-switcher-select" name="lang" dir="ltr" data-testid="footer-language-select">
|
||||
{% for code, label in translations|dictsort -%}
|
||||
{# Don't escape the label as it may include entity references
|
||||
# like "Português (do Brasil)" (Bug 861149) #}
|
||||
<option lang="{{ code }}" value="{{ code }}"{{ code|ifeq(LANG, " selected") }}>{{ label|safe|replace('English (US)', 'English') }}</option>
|
||||
{% endfor %}
|
||||
</select>
|
||||
</form>
|
||||
{% endif %}
|
||||
|
|
@ -277,6 +277,7 @@ FLUENT_DEFAULT_FILES = [
|
|||
"brands",
|
||||
"download_button",
|
||||
"footer",
|
||||
"footer-refresh",
|
||||
"fxa_form",
|
||||
"mozorg/about/shared",
|
||||
"navigation",
|
||||
|
|
|
|||
|
|
@ -0,0 +1,42 @@
|
|||
# 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/.
|
||||
|
||||
footer-refresh-find-out-about = Find out about { -brand-name-mozilla } products, initiatives, and more. We’ll never sell your email, even if presented with free pizza for life.
|
||||
footer-refresh-leadership = Leadership
|
||||
footer-refresh-advertise = Advertise with { -brand-name-mozilla }
|
||||
footer-refresh-firefox-release-notes = { -brand-name-firefox } Release Notes
|
||||
footer-refresh-mdn = MDN
|
||||
footer-refresh-follow-mozilla = Follow @{ -brand-name-mozilla }
|
||||
footer-refresh-x = X
|
||||
footer-refresh-x-formerly-twitter = X (formerly Twitter)
|
||||
footer-refresh-mastodon = Mastodon
|
||||
footer-refresh-instagram = Instagram
|
||||
footer-refresh-linkedin = LinkedIn
|
||||
footer-refresh-tiktok = TikTok
|
||||
footer-refresh-spotify = Spotify
|
||||
footer-refresh-follow-firefox = Follow @{ -brand-name-firefox }
|
||||
footer-refresh-youtube = YouTube
|
||||
footer-refresh-company = Company
|
||||
footer-refresh-press-center = Press Center
|
||||
footer-refresh-careers = Careers
|
||||
footer-refresh-contact = Contact
|
||||
footer-refresh-support = Support
|
||||
footer-refresh-product-help = Product Help
|
||||
footer-refresh-file-a-bug = File a Bug
|
||||
footer-refresh-localize-mozilla = Localize { -brand-name-mozilla }
|
||||
footer-refresh-resources = Resources
|
||||
footer-refresh-brand-standards = Brand Standards
|
||||
footer-refresh-developers = Developers
|
||||
footer-refresh-developer-edition = { -brand-name-developer-edition }
|
||||
footer-refresh-enterprise = { -brand-name-enterprise }
|
||||
footer-refresh-tools = Tools
|
||||
footer-refresh-donate = Donate
|
||||
footer-refresh-visit-mozilla-corporations = Visit <a { $moco_link }>{ -brand-name-mozilla-corporation }’s</a> not-for-profit parent, the <a { $mofo_link }>{ -brand-name-mozilla-foundation }</a>.
|
||||
footer-refresh-portions-of-this-content = Portions of this content are ©1998–{ $current_year } by individual mozilla.org contributors. Content available under a <a rel="license" { $href }>{ -brand-name-creative-commons } license</a>.
|
||||
footer-refresh-websites-privacy-notice = Website Privacy Notice
|
||||
footer-refresh-websites-cookies = Cookies
|
||||
footer-refresh-websites-legal = Legal
|
||||
footer-refresh-community-participation-guidelines = Community Participation Guidelines
|
||||
footer-refresh-about-this-site = About this site
|
||||
footer-refresh-language = Language
|
||||
|
|
@ -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/.
|
||||
|
||||
|
||||
@import '~@mozilla-protocol/core/protocol/css/includes/lib';
|
||||
|
||||
// variables
|
||||
@import 'vars/animation';
|
||||
@import 'vars/color';
|
||||
@import 'vars/fonts';
|
||||
@import 'vars/grid';
|
||||
@import 'vars/spacing';
|
||||
@import 'vars/text';
|
||||
|
||||
// global components
|
||||
@import 'components/footer-refresh';
|
||||
|
|
@ -8,6 +8,7 @@
|
|||
// variables
|
||||
@import 'vars/animation';
|
||||
@import 'vars/color';
|
||||
@import 'vars/fonts';
|
||||
@import 'vars/grid';
|
||||
@import 'vars/spacing';
|
||||
@import 'vars/text';
|
||||
|
|
@ -22,67 +23,6 @@
|
|||
@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 {
|
||||
|
|
|
|||
|
|
@ -0,0 +1,690 @@
|
|||
// 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/.
|
||||
|
||||
$max-footer-content-width: 1440px;
|
||||
|
||||
// whole footer
|
||||
.moz24-footer {
|
||||
background-color: $color-black;
|
||||
color: $color-white;
|
||||
}
|
||||
|
||||
// newsletter form
|
||||
.moz24-newsletter-container {
|
||||
margin: $spacer-xl $spacer-lg 0;
|
||||
|
||||
&.c-newsletter.mzp-l-content {
|
||||
padding-bottom: 0;
|
||||
}
|
||||
|
||||
.moz24-newsletter-wrapper {
|
||||
padding: $spacer-2xl 0 0;
|
||||
display: flex;
|
||||
flex-direction: column;
|
||||
align-items: center;
|
||||
justify-content: space-between;
|
||||
|
||||
@media(min-width: $screen-md) {
|
||||
max-width: $max-footer-content-width;
|
||||
margin: 0 auto;
|
||||
flex-direction: row;
|
||||
align-items: flex-start;
|
||||
}
|
||||
}
|
||||
|
||||
.moz24-newsletter-wrapper .moz24-newsletter-info {
|
||||
display: flex;
|
||||
align-items: flex-start;
|
||||
margin-bottom: $grid-margin;
|
||||
|
||||
@media(min-width: $screen-md) {
|
||||
width: 40%;
|
||||
@include bidi(((margin-right, 10%, 0), (margin-left, 0, 10%)));
|
||||
}
|
||||
|
||||
p {
|
||||
margin-bottom: 0;
|
||||
line-height: 1.3;
|
||||
font-weight: 600;
|
||||
font-family: $primary-font;
|
||||
text-align: start;
|
||||
}
|
||||
}
|
||||
|
||||
.moz24-newsletter-image {
|
||||
width: 40px;
|
||||
@include bidi(((margin-right, $spacer-xl, 0), (margin-left, 0, $spacer-xl)));
|
||||
}
|
||||
|
||||
.moz24-newsletter {
|
||||
@media(min-width: $screen-md) {
|
||||
width: 50%;
|
||||
}
|
||||
|
||||
h2 {
|
||||
color: $color-white;
|
||||
}
|
||||
|
||||
.mzp-c-newsletter-thanks {
|
||||
h3 {
|
||||
color: $color-white;
|
||||
font-family: $secondary-font;
|
||||
}
|
||||
|
||||
p {
|
||||
font-family: $primary-font;
|
||||
font-weight: 400;
|
||||
}
|
||||
}
|
||||
|
||||
.error-try-again-later {
|
||||
font-family: $primary-font;
|
||||
font-weight: 400;
|
||||
}
|
||||
}
|
||||
|
||||
.moz24-newsletter-wrapper .mzp-c-newsletter-form {
|
||||
.mzp-c-newsletter-header {
|
||||
display: none;
|
||||
}
|
||||
|
||||
.mzp-c-newsletter-content {
|
||||
input {
|
||||
margin-bottom: $spacer-lg;
|
||||
width: 100%;
|
||||
font-family: $primary-font;
|
||||
border: 2px solid $color-white;
|
||||
color: $token-color-functional-gray-on-white;
|
||||
|
||||
@media(min-width: $screen-md) {
|
||||
min-width: 100%;
|
||||
}
|
||||
}
|
||||
}
|
||||
|
||||
.mzp-c-newsletter-details {
|
||||
max-width: 100%;
|
||||
|
||||
@media(min-width: $screen-lg) {
|
||||
display: grid;
|
||||
grid-template-columns: 1fr 1fr;
|
||||
grid-template-rows: 30px 45px 75px;
|
||||
column-gap: $spacer-lg;
|
||||
}
|
||||
|
||||
p {
|
||||
margin-bottom: 0;
|
||||
line-height: 1.3;
|
||||
font-weight: 600;
|
||||
font-family: $primary-font;
|
||||
text-align: start;
|
||||
|
||||
@media(min-width: $screen-lg) {
|
||||
display: inline-grid;
|
||||
|
||||
&:first-of-type {
|
||||
grid-column-start: 1;
|
||||
grid-column-end: 2;
|
||||
}
|
||||
|
||||
&:nth-of-type(2) {
|
||||
grid-column-start: 2;
|
||||
grid-column-end: 3;
|
||||
}
|
||||
}
|
||||
|
||||
&:has(> label.mzp-u-inline) {
|
||||
margin: $spacer-lg 0 $spacer-md;
|
||||
|
||||
@media(min-width: $screen-lg) {
|
||||
grid-column-start: 1;
|
||||
grid-column-end: 3;
|
||||
}
|
||||
|
||||
input {
|
||||
margin: 0;
|
||||
}
|
||||
}
|
||||
}
|
||||
|
||||
label {
|
||||
margin-bottom: 0;
|
||||
line-height: 1.3;
|
||||
font-weight: 600;
|
||||
font-family: $primary-font;
|
||||
text-align: start;
|
||||
|
||||
@media(min-width: $screen-lg) {
|
||||
display: inline-grid;
|
||||
|
||||
&:first-of-type {
|
||||
grid-column-start: 1;
|
||||
}
|
||||
|
||||
&:nth-of-type(2) {
|
||||
grid-column-start: 2;
|
||||
grid-column-end: 3;
|
||||
grid-row-start: 1;
|
||||
grid-row-end: 2;
|
||||
}
|
||||
}
|
||||
}
|
||||
|
||||
select {
|
||||
font-family: $primary-font;
|
||||
border: 2px solid $color-white;
|
||||
color: $token-color-functional-gray-on-white;
|
||||
width: 100%;
|
||||
background-position-x: 100%;
|
||||
background-position-y: 9px;
|
||||
background-image: url('/media/img/logos/mozilla/footer-refresh/icon-arrow-down.svg');
|
||||
background-repeat: no-repeat;
|
||||
|
||||
@media(min-width: $screen-lg) {
|
||||
min-width: 100%;
|
||||
}
|
||||
}
|
||||
|
||||
.mzp-u-inline {
|
||||
display: inline;
|
||||
|
||||
input {
|
||||
width: 13px;
|
||||
height: 13px;
|
||||
min-width: unset;
|
||||
line-height: 1;
|
||||
}
|
||||
}
|
||||
|
||||
a:visited {
|
||||
color: $color-white;
|
||||
}
|
||||
}
|
||||
|
||||
.mzp-c-form-submit button {
|
||||
border: 2px solid $token-color-green;
|
||||
border-radius: 0;
|
||||
font-family: $secondary-font;
|
||||
position: relative;
|
||||
|
||||
&:hover {
|
||||
box-shadow: 4px 4px 0 0 $token-color-green;
|
||||
background-color: $color-black;
|
||||
color: $color-white;
|
||||
}
|
||||
|
||||
&:active {
|
||||
background-color: $color-black;
|
||||
color: $token-color-green;
|
||||
box-shadow: none;
|
||||
|
||||
&::after {
|
||||
display: none;
|
||||
}
|
||||
}
|
||||
|
||||
@media(min-width: $screen-md) {
|
||||
width: fit-content;
|
||||
display: flex;
|
||||
justify-content: flex-start;
|
||||
}
|
||||
}
|
||||
|
||||
.mzp-c-fieldnote {
|
||||
display: none;
|
||||
}
|
||||
}
|
||||
}
|
||||
|
||||
// main content
|
||||
.moz24-footer-content {
|
||||
padding: $spacer-xl $spacer-md 0;
|
||||
max-width: $max-footer-content-width;
|
||||
margin: 0 auto;
|
||||
|
||||
@media(min-width: $screen-md) {
|
||||
padding: 64px 32px 0;
|
||||
}
|
||||
}
|
||||
|
||||
// primary nav
|
||||
.moz24-footer-primary {
|
||||
margin-bottom: $spacer-lg;
|
||||
}
|
||||
|
||||
.moz24-footer-sections-wrapper {
|
||||
display: flex;
|
||||
flex-direction: column-reverse;
|
||||
|
||||
@media(min-width: $screen-lg) {
|
||||
flex-direction: row;
|
||||
justify-content: space-between;
|
||||
align-items: flex-start;
|
||||
}
|
||||
}
|
||||
|
||||
.moz24-footer-primary .moz24-footer-section-wrapper {
|
||||
width: 100%;
|
||||
|
||||
@media(min-width: $screen-lg) {
|
||||
width: 20%;
|
||||
}
|
||||
|
||||
&.moz24-links-section {
|
||||
display: grid;
|
||||
grid-template-rows: 1fr 1fr;
|
||||
grid-template-columns: 1fr 1fr;
|
||||
place-items: stretch start;
|
||||
|
||||
@media(min-width: $screen-lg) {
|
||||
width: 70%;
|
||||
display: flex;
|
||||
flex-direction: row;
|
||||
justify-content: space-between;
|
||||
align-items: start;
|
||||
}
|
||||
}
|
||||
}
|
||||
|
||||
.moz24-footer-refresh-social-wrapper {
|
||||
display: flex;
|
||||
align-items: center;
|
||||
margin-bottom: $spacer-lg;
|
||||
|
||||
@media(min-width: $screen-md) {
|
||||
flex-direction: column;
|
||||
justify-content: center;
|
||||
align-items: flex-start;
|
||||
}
|
||||
}
|
||||
|
||||
|
||||
.moz24-footer-heading-social {
|
||||
padding: 0;
|
||||
font-family: $primary-font;
|
||||
color: $color-white;
|
||||
margin: 0;
|
||||
font-size: $text-title-sm;
|
||||
|
||||
@media(min-width: $screen-md) {
|
||||
margin-bottom: $spacer-sm;
|
||||
}
|
||||
}
|
||||
|
||||
.moz24-footer-links-social {
|
||||
margin: 0 0 0 $spacer-lg;
|
||||
display: flex;
|
||||
|
||||
@media(min-width: $screen-md) {
|
||||
margin: 0;
|
||||
}
|
||||
|
||||
li {
|
||||
margin-right: $spacer-2xs;
|
||||
display: inline-block;
|
||||
|
||||
a {
|
||||
background-repeat: no-repeat;
|
||||
border-bottom: 1px solid rgba(0,0,0,0);
|
||||
direction: ltr;
|
||||
display: block;
|
||||
height: 16px;
|
||||
overflow: hidden;
|
||||
text-align: left;
|
||||
text-indent: -9999px;
|
||||
white-space: nowrap;
|
||||
width: 16px;
|
||||
@include bidi(((margin-right, 8px, 0), (margin-left, 0, 8px)));
|
||||
|
||||
@media(min-width: $screen-md) {
|
||||
@include bidi(((margin-right, 16px, 0), (margin-left, 0, 16px)));
|
||||
}
|
||||
|
||||
&:hover,
|
||||
&:focus,
|
||||
&:active {
|
||||
outline: 1px dotted $color-white;
|
||||
outline-offset: $spacing-xs;
|
||||
border-bottom-color: transparent;
|
||||
background-repeat: no-repeat;
|
||||
}
|
||||
|
||||
&.linkedin {
|
||||
background-image: url('/media/protocol/img/icons/social/linkedin/white.svg');
|
||||
}
|
||||
|
||||
&.tiktok {
|
||||
background-image: url('/media/protocol/img/icons/social/tiktok/white.svg');
|
||||
}
|
||||
|
||||
&.spotify {
|
||||
background-image: url('/media/protocol/img/icons/social/spotify/white.svg');
|
||||
}
|
||||
|
||||
&.mastodon {
|
||||
background-image: url('/media/protocol/img/icons/social/mastodon/white.svg');
|
||||
background-size: contain;
|
||||
}
|
||||
|
||||
&.twitter {
|
||||
background-image: url('/media/protocol/img/icons/social/x/white.svg');
|
||||
}
|
||||
|
||||
&.instagram {
|
||||
background-image: url('/media/protocol/img/icons/social/instagram/white.svg');
|
||||
}
|
||||
|
||||
&.youtube {
|
||||
background-image: url('/media/protocol/img/icons/social/youtube/white.svg');
|
||||
}
|
||||
}
|
||||
}
|
||||
}
|
||||
|
||||
.moz24-footer-label {
|
||||
color: $color-white;
|
||||
font-weight: 600;
|
||||
font-size: $text-title-md;
|
||||
font-family: $secondary-font;
|
||||
}
|
||||
|
||||
.moz24-footer-primary-list {
|
||||
li {
|
||||
font-family: $primary-font;
|
||||
}
|
||||
|
||||
a,
|
||||
a:link,
|
||||
a:visited {
|
||||
text-decoration: none;
|
||||
position: relative;
|
||||
color: $color-white;
|
||||
font-weight: normal;
|
||||
}
|
||||
|
||||
a:hover,
|
||||
a:link:hover {
|
||||
color: $color-white;
|
||||
|
||||
&::after {
|
||||
display: block;
|
||||
content: "";
|
||||
position: absolute;
|
||||
width: 100%;
|
||||
height: 1px;
|
||||
left: 0;
|
||||
bottom: 1px;
|
||||
background: $color-white;
|
||||
}
|
||||
}
|
||||
|
||||
a:focus,
|
||||
a:link:focus,
|
||||
a:active,
|
||||
a:link:active {
|
||||
border: 1px solid $color-white;
|
||||
border-radius: 2px;
|
||||
color: $color-white;
|
||||
|
||||
&::after {
|
||||
display: none;
|
||||
}
|
||||
}
|
||||
}
|
||||
|
||||
// actions section
|
||||
.moz24-footer-actions {
|
||||
display: flex;
|
||||
flex-direction: column;
|
||||
position: relative;
|
||||
|
||||
@media(min-width: $screen-md) {
|
||||
flex-direction: row;
|
||||
justify-content: space-between;
|
||||
align-items: center;
|
||||
margin-bottom: 0;
|
||||
}
|
||||
}
|
||||
|
||||
|
||||
// donation link
|
||||
.moz24-footer-donate {
|
||||
position: relative;
|
||||
border-radius: 0;
|
||||
font-family: $secondary-font;
|
||||
font-weight: 600;
|
||||
background-color: transparent;
|
||||
color: $color-white;
|
||||
padding: 6px 24px;
|
||||
border: 2px solid $token-color-green;
|
||||
text-decoration: none;
|
||||
text-align: center;
|
||||
max-width: 120px;
|
||||
|
||||
&:hover {
|
||||
box-shadow: 4px 4px 0 0 $token-color-green;
|
||||
background-color: transparent;
|
||||
color: $color-white;
|
||||
}
|
||||
|
||||
&:active {
|
||||
background-color: transparent;
|
||||
box-shadow: none;
|
||||
|
||||
.mzp-c-button-icon-text::after {
|
||||
display: none;
|
||||
}
|
||||
}
|
||||
|
||||
&:focus,
|
||||
&:visited:focus {
|
||||
color: $token-color-green;
|
||||
|
||||
.mzp-c-button-icon-start svg path {
|
||||
fill: $token-color-green;
|
||||
}
|
||||
|
||||
.mzp-c-button-icon-text::after {
|
||||
background: $token-color-green;
|
||||
}
|
||||
}
|
||||
|
||||
@media(min-width: $screen-md) {
|
||||
margin-bottom: 0;
|
||||
}
|
||||
}
|
||||
|
||||
.mzp-c-button-icon-start {
|
||||
font-size: 1.7em;
|
||||
vertical-align: middle;
|
||||
margin-right: 0;
|
||||
|
||||
svg path {
|
||||
fill: $color-white;
|
||||
}
|
||||
}
|
||||
|
||||
.mzp-c-button-icon-text {
|
||||
position: relative;
|
||||
font-family: $secondary-font;
|
||||
color: $color-white;
|
||||
|
||||
&::after {
|
||||
display: block;
|
||||
content: "";
|
||||
position: absolute;
|
||||
width: 100%;
|
||||
height: 1px;
|
||||
left: 0;
|
||||
bottom: 1px;
|
||||
background: $color-white;
|
||||
}
|
||||
}
|
||||
|
||||
// language form
|
||||
.moz24-footer-language {
|
||||
margin-top: $spacer-lg;
|
||||
margin-bottom: 0;
|
||||
position: relative;
|
||||
|
||||
&::before {
|
||||
display: block;
|
||||
content: "";
|
||||
position: absolute;
|
||||
width: 100%;
|
||||
height: 4px;
|
||||
left: 0;
|
||||
top: -10px;
|
||||
background: $token-color-dark-gray;
|
||||
|
||||
@media(min-width: $screen-md) {
|
||||
display: none;
|
||||
}
|
||||
}
|
||||
}
|
||||
|
||||
.moz24-c-language-switcher {
|
||||
position: relative;
|
||||
border-color: transparent;
|
||||
|
||||
&::before {
|
||||
display: block;
|
||||
content: "";
|
||||
position: absolute;
|
||||
width: 32px;
|
||||
height: 32px;
|
||||
@include bidi(((left, 0, 0), (right, 0, 102px)));
|
||||
bottom: 0;
|
||||
color: $color-white;
|
||||
background-repeat: no-repeat;
|
||||
background-position-x: 8px;
|
||||
background-position-y: -2px;
|
||||
background-image: url('/media/img/logos/mozilla/footer-refresh/icon-globe.svg');
|
||||
}
|
||||
|
||||
label {
|
||||
border: 0;
|
||||
clip: rect(0 0 0 0);
|
||||
height: 1px;
|
||||
margin: -1px;
|
||||
overflow: hidden;
|
||||
padding: 0;
|
||||
position: absolute;
|
||||
width: 1px;
|
||||
}
|
||||
|
||||
.mzp-c-language-switcher-link {
|
||||
color: $color-white;
|
||||
font-family: $primary-font;
|
||||
text-decoration: none;
|
||||
position: relative;
|
||||
|
||||
&::after {
|
||||
display: block;
|
||||
content: "";
|
||||
position: absolute;
|
||||
width: 100%;
|
||||
height: 1px;
|
||||
left: 0;
|
||||
bottom: 0;
|
||||
background: $color-white;
|
||||
}
|
||||
|
||||
&:hover {
|
||||
&::after {
|
||||
display: none;
|
||||
}
|
||||
}
|
||||
}
|
||||
|
||||
.mzp-js-language-switcher-select {
|
||||
border: 2px solid transparent;
|
||||
border-radius: 0;
|
||||
font-family: $secondary-font;
|
||||
font-weight: 600;
|
||||
padding-left: 36px;
|
||||
min-width: unset;
|
||||
width: 136px;
|
||||
background: $color-black;
|
||||
color: $color-white;
|
||||
background-position-x: 95px;
|
||||
background-position-y: 9px;
|
||||
background-image: url('/media/img/logos/mozilla/footer-refresh/icon-arrow-down.svg');
|
||||
background-repeat: no-repeat;
|
||||
margin-top: 16px;
|
||||
|
||||
&:hover {
|
||||
border-color: $color-white;
|
||||
}
|
||||
}
|
||||
}
|
||||
|
||||
// secondary nav
|
||||
.moz24-footer-secondary {
|
||||
position: relative;
|
||||
margin-top: $grid-margin;
|
||||
|
||||
@media(min-width: $screen-md) {
|
||||
padding-top: $grid-margin;
|
||||
|
||||
&::before {
|
||||
display: block;
|
||||
content: "";
|
||||
position: absolute;
|
||||
width: 100%;
|
||||
height: 4px;
|
||||
left: 0;
|
||||
top: 0;
|
||||
background: $token-color-dark-gray;
|
||||
}
|
||||
}
|
||||
}
|
||||
|
||||
.moz24-footer-legal {
|
||||
display: flex;
|
||||
flex-direction: column;
|
||||
color: $color-white;
|
||||
font-weight: 600;
|
||||
font-size: $text-body-sm;
|
||||
|
||||
@media(min-width: $screen-lg) {
|
||||
flex-direction: row;
|
||||
justify-content: space-between;
|
||||
}
|
||||
}
|
||||
|
||||
.moz24-footer-license {
|
||||
font-family: $primary-font;
|
||||
|
||||
@media(min-width: $screen-md) {
|
||||
max-width: unset;
|
||||
@include bidi(((margin-right, 10%, 0), (margin-left, 0, 10%)));
|
||||
}
|
||||
|
||||
a,
|
||||
a:link,
|
||||
a:visited {
|
||||
color: $color-white;
|
||||
font-weight: 600;
|
||||
}
|
||||
}
|
||||
|
||||
.moz24-footer-terms {
|
||||
li {
|
||||
font-family: $primary-font;
|
||||
display: inline-block;
|
||||
padding: 0 24px 0 0;
|
||||
}
|
||||
|
||||
a,
|
||||
a:link,
|
||||
a:visited {
|
||||
color: $color-white;
|
||||
font-weight: 600;
|
||||
}
|
||||
}
|
||||
|
||||
.moz24-footer-logo-image-bottom {
|
||||
width: 100%;
|
||||
}
|
||||
|
|
@ -0,0 +1,68 @@
|
|||
// 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-font-path: '/media/fonts/m24/';
|
||||
|
||||
@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');
|
||||
}
|
||||
|
||||
$primary-font: "Mozilla Sans Text", inter, x-localespecific, sans-serif;
|
||||
$secondary-font: "Mozilla SemiSlab", "Zilla Slab", inter, x-localespecific;
|
||||
|
|
@ -2,8 +2,6 @@
|
|||
// 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;
|
||||
|
|
|
|||
|
|
@ -0,0 +1 @@
|
|||
<svg width="24" height="25" fill="none" xmlns="http://www.w3.org/2000/svg"><g clip-path="url(#a)"><path d="M16.243 9.43 12 13.673 7.757 9.43" stroke="#fff" stroke-width="2"/></g><defs><clipPath id="a"><path fill="#fff" d="M0 .188h24v24H0z"/></clipPath></defs></svg>
|
||||
|
После Ширина: | Высота: | Размер: 265 B |
|
|
@ -0,0 +1 @@
|
|||
<svg width="24" height="25" fill="none" xmlns="http://www.w3.org/2000/svg"><g clip-path="url(#a)"><path d="M19.032 12.188a7.031 7.031 0 1 1-14.063 0 7.031 7.031 0 0 1 14.063 0Zm-3.969-4.572c.508 1.07.82 2.394.904 3.808h1.485a5.512 5.512 0 0 0-2.389-3.808Zm-8.514 3.808h1.485c.083-1.414.395-2.737.903-3.808a5.512 5.512 0 0 0-2.388 3.808Zm2.388 5.336c-.508-1.071-.82-2.395-.903-3.81H6.549a5.513 5.513 0 0 0 2.388 3.81Zm4.665-.49c.463-.899.752-2.057.836-3.32h-1.675v-1.526h1.675c-.084-1.262-.373-2.42-.836-3.32-.252-.49-.54-.867-.839-1.11v4.43h-1.526v-4.43c-.299.243-.587.62-.84 1.11-.462.9-.751 2.058-.834 3.32h1.674v1.527H9.563c.083 1.262.372 2.42.835 3.32.252.49.54.867.839 1.11v-4.43h1.526v4.43c.3-.243.587-.62.84-1.11Zm3.85-3.32h-1.485c-.083 1.415-.396 2.739-.904 3.81a5.512 5.512 0 0 0 2.389-3.81Z" fill="#fff"/></g><defs><clipPath id="a"><path fill="#fff" d="M0 .188h24v24H0z"/></clipPath></defs></svg>
|
||||
|
После Ширина: | Высота: | Размер: 906 B |
|
|
@ -0,0 +1 @@
|
|||
<svg xmlns="http://www.w3.org/2000/svg" viewBox="0 0 703.5 147" style="enable-background:new 0 0 703.5 147" xml:space="preserve"><path d="m54.6 0 18.7 92H80L98.7 0h54.6v144.9h-29.8V25.4h-6.7l-26 119.5H62.6l-26-119.5h-6.7v119.5H0V0h54.6zm171.1 30.7c34.4 0 54.4 20.6 54.4 58.2S260.2 147 225.7 147s-54.4-20.6-54.4-58.2 20-58.1 54.4-58.1zm0 93.2c15.5 0 22.9-8.4 22.9-26.9V80.6c0-18.5-7.3-26.9-22.9-26.9s-22.9 8.4-22.9 26.9V97c.1 18.5 7.4 26.9 22.9 26.9zm66.6-.6 56.9-68.9h-56.1V32.8h91.6v21.6l-56.9 68.9h57.7v21.6h-93.2v-21.6zm108.8-90.5h42v112.1h-29.8V54.4h-12.2V32.8zM413.3 0h29.8v21.6h-29.8V0zm49.5 0h42v144.9H475V21.6h-12.2V0zm61.8 0h42v144.9h-29.8V21.6h-12.2V0zm106 30.7c16.6 0 27.5 8.2 30.7 22.5h6.7V32.8h35.5v21.6h-12.2v68.9h12.2v21.6h-17c-12 0-18.5-6.5-18.5-18.5v-1.9h-6.7c-3.2 14.3-14.1 22.5-30.7 22.5-26.2 0-44.7-22.3-44.7-58.2 0-35.9 18.5-58.1 44.7-58.1zm8.8 93.2c15.1 0 22-8.4 22-26.9V80.6c0-18.5-6.9-26.9-22-26.9s-22 8.4-22 26.9V97c0 18.5 6.9 26.9 22 26.9z" style="fill:#fff"/></svg>
|
||||
|
После Ширина: | Высота: | Размер: 992 B |
|
|
@ -0,0 +1 @@
|
|||
<svg xmlns="http://www.w3.org/2000/svg" viewBox="0 0 199.1 233.1" style="enable-background:new 0 0 199.1 233.1" xml:space="preserve"><path d="M29.8 233.1H0V0h29.8v233.1zm24.4-114.2h118v-6.7l-76.9-28V60.7l76.9-27.9V26H81.1V0h118v47.5l-62.6 21.6v6.7l62.6 21.6v47.5H54.2v-26zm0-92.9h26.9v26.9H54.2V26z" style="fill:#fff"/></svg>
|
||||
|
После Ширина: | Высота: | Размер: 325 B |
|
|
@ -255,6 +255,12 @@
|
|||
],
|
||||
"name": "common-old-ie"
|
||||
},
|
||||
{
|
||||
"files": [
|
||||
"css/m24/base-navigation-and-footer.scss"
|
||||
],
|
||||
"name": "m24-navigation-and-footer"
|
||||
},
|
||||
{
|
||||
"files": [
|
||||
"css/legal/legal.scss"
|
||||
|
|
|
|||
|
|
@ -16,6 +16,7 @@ const {
|
|||
const { test, expect } = require('@playwright/test');
|
||||
|
||||
const testURL = '/en-US/firefox/new/';
|
||||
const footerTestURL = '/de/firefox/new/';
|
||||
|
||||
test.describe(
|
||||
'Navigation (desktop)',
|
||||
|
|
@ -137,7 +138,7 @@ test.describe(
|
|||
},
|
||||
() => {
|
||||
test.beforeEach(async ({ page, browserName }) => {
|
||||
await openPage(testURL, page, browserName);
|
||||
await openPage(footerTestURL, page, browserName);
|
||||
});
|
||||
|
||||
test('should not have any detectable a11y issues', async ({ page }) => {
|
||||
|
|
@ -157,7 +158,7 @@ test.describe(
|
|||
test.use({ viewport: { width: 360, height: 780 } });
|
||||
|
||||
test.beforeEach(async ({ page, browserName }) => {
|
||||
await openPage(testURL, page, browserName);
|
||||
await openPage(footerTestURL, page, browserName);
|
||||
});
|
||||
|
||||
test('should not have any detectable a11y issues', async ({ page }) => {
|
||||
|
|
|
|||
|
|
@ -8,7 +8,7 @@
|
|||
|
||||
const { test, expect } = require('@playwright/test');
|
||||
const openPage = require('../scripts/open-page');
|
||||
const url = '/en-US/';
|
||||
const url = '/de/';
|
||||
|
||||
test.describe(
|
||||
`${url} footer (mobile)`,
|
||||
|
|
@ -76,17 +76,17 @@ test.describe(
|
|||
test('Footer language change', async ({ page }) => {
|
||||
const languageSelect = page.getByTestId('footer-language-select');
|
||||
|
||||
// Assert default language is English (US)
|
||||
await expect(languageSelect).toHaveValue('en-US');
|
||||
// Assert default language is German
|
||||
await expect(languageSelect).toHaveValue('de');
|
||||
|
||||
// Change page language from /en-US/ to /de/
|
||||
await languageSelect.selectOption('de');
|
||||
// Change page language from /de/ to /fr/
|
||||
await languageSelect.selectOption('fr');
|
||||
await page.waitForURL('**/de/?automation=true', {
|
||||
waitUntil: 'commit'
|
||||
});
|
||||
|
||||
// Assert page language is now German
|
||||
await expect(languageSelect).toHaveValue('de');
|
||||
// Assert page language is now French
|
||||
await expect(languageSelect).toHaveValue('fr');
|
||||
});
|
||||
}
|
||||
);
|
||||
|
|
|
|||
Загрузка…
Ссылка в новой задаче