This commit is contained in:
Jingwen Zhu 2024-11-07 09:10:30 -04:00 коммит произвёл GitHub
Родитель 36c797c963
Коммит 0349017b88
Не найден ключ, соответствующий данной подписи
Идентификатор ключа GPG: B5690EEEBB952194
9 изменённых файлов: 110 добавлений и 58 удалений

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

@ -11,28 +11,6 @@
<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-position="footer" data-link-text="Twitter (@mozilla)">{{ ftl('footer-refresh-x-formerly-twitter', fallback='footer-twitter') }}<span> (@mozilla)</span></a></li>
<li><a class="instagram" href="{{ mozilla_instagram_url() }}" data-link-position="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-position="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-position="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-position="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-position="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-position="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-position="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">
@ -87,6 +65,28 @@
</ul>
</section>
</div>
<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-position="footer" data-link-text="Twitter (@mozilla)">{{ ftl('footer-refresh-x-formerly-twitter', fallback='footer-twitter') }}<span> (@mozilla)</span></a></li>
<li><a class="instagram" href="{{ mozilla_instagram_url() }}" data-link-position="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-position="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-position="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-position="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-position="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-position="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-position="footer" data-link-text="YouTube (@firefoxchannel)">{{ ftl('footer-refresh-youtube') }}<span> (@firefoxchannel)</span></a></li>
</ul>
</div>
</section>
</div>
</div>
</nav>
<div class="moz24-footer-actions">

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

@ -152,8 +152,12 @@ $max-footer-content-width: $content-max;
&:focus,
&:focus-visible,
&:focus-within {
border-color: $m24-color-green;
background-color: $m24-color-white;
color: $m24-color-white;
background-color: $m24-color-black;
&::placeholder {
color: $m24-color-white;
}
}
}
@ -231,7 +235,9 @@ $max-footer-content-width: $content-max;
}
.mzp-u-inline {
display: inline;
display: inline-flex;
flex-wrap: wrap;
gap: $spacer-2xs;
input {
height: 20px;
@ -248,24 +254,23 @@ $max-footer-content-width: $content-max;
margin-bottom: 0;
button {
border: $border-width solid $m24-color-green;
border: $border-width solid $m24-color-black;
border-radius: 0;
font-family: $secondary-font;
position: relative;
max-width: 800px;
width: 100%;
font-weight: 500;
&:hover,
&:focus-visible {
box-shadow: 4px 4px 0 0 $m24-color-green;
background-color: $m24-color-white;
color: $m24-color-black;
background-color: $m24-color-black;
color: $m24-color-white;
}
&:active {
background-color: $m24-color-black;
color: $m24-color-green;
box-shadow: none;
background-color: $m24-color-white;
color: $m24-color-black;
}
@media(min-width: $screen-md) {

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

@ -34,7 +34,7 @@ $max-footer-content-width: $content-max;
.moz24-footer-sections-wrapper {
display: flex;
flex-direction: column-reverse;
flex-direction: column;
gap: $grid-gutter;
@media(min-width: $screen-lg) {
@ -48,7 +48,7 @@ $max-footer-content-width: $content-max;
width: 100%;
@media(min-width: $screen-lg) {
width: grid(4);
width: grid(2);
}
&.moz24-links-section {
@ -83,9 +83,10 @@ $max-footer-content-width: $content-max;
.moz24-footer-heading-social {
padding: 0;
font-family: $primary-font;
color: $m24-color-functional-gray;
color: $m24-color-black;
margin: 0;
font-size: $text-title-sm;
font-weight: 400;
@media(min-width: $screen-md) {
margin-bottom: $spacer-sm;
@ -122,38 +123,66 @@ $max-footer-content-width: $content-max;
}
&:hover {
outline: 1px dotted $m24-color-black;
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');
}
}
&.linkedin {
background-image: url('/media/protocol/img/icons/social/linkedin/white.svg');
background-image: url('/media/img/icons/m24-small/social-linkedin-gray.svg');
}
&.tiktok {
background-image: url('/media/protocol/img/icons/social/tiktok/white.svg');
background-image: url('/media/img/icons/m24-small/social-tiktok-gray.svg');
}
&.spotify {
background-image: url('/media/protocol/img/icons/social/spotify/white.svg');
background-image: url('/media/img/icons/m24-small/social-spotify-gray.svg');
}
&.mastodon {
background-image: url('/media/protocol/img/icons/social/mastodon/white.svg');
background-image: url('/media/img/icons/m24-small/social-mastodon-gray.svg');
background-size: contain;
}
&.twitter {
background-image: url('/media/protocol/img/icons/social/x/white.svg');
background-image: url('/media/img/icons/m24-small/social-x-gray.svg');
}
&.instagram {
background-image: url('/media/protocol/img/icons/social/instagram/white.svg');
background-image: url('/media/img/icons/m24-small/social-instagram-gray.svg');
}
&.youtube {
background-image: url('/media/protocol/img/icons/social/youtube/white.svg');
background-image: url('/media/img/icons/m24-small/social-youtube-gray.svg');
}
}
}
@ -161,8 +190,8 @@ $max-footer-content-width: $content-max;
.moz24-footer-label {
color: $m24-color-functional-gray;
font-weight: 600;
font-size: $text-title-md;
font-weight: 400;
font-size: $text-title-sm;
font-family: $secondary-font;
}
@ -178,7 +207,7 @@ $max-footer-content-width: $content-max;
text-decoration: none;
position: relative;
color: $m24-color-black;
font-weight: normal;
font-weight: 400;
}
a:hover,
@ -232,20 +261,26 @@ $max-footer-content-width: $content-max;
position: relative;
border-radius: 0;
font-family: $secondary-font;
font-weight: 600;
font-weight: 500;
background-color: transparent;
color: $m24-color-black;
padding: 6px 24px;
border: $border-width solid $m24-color-green;
border: $border-width solid $m24-color-black;
text-decoration: none;
text-align: center;
max-width: 800px;
&:hover,
&:visited:hover {
box-shadow: 4px 4px 0 0 $m24-color-green;
background-color: transparent;
color: $m24-color-black;
background-color: $m24-color-black;
span {
color: $m24-color-white;
}
.mzp-c-button-icon-start svg path {
fill: $m24-color-white;
}
}
&:active,
@ -253,6 +288,14 @@ $max-footer-content-width: $content-max;
background-color: transparent;
box-shadow: none;
span {
color: $m24-color-black;
}
.mzp-c-button-icon-start svg path {
fill: $m24-color-black;
}
.mzp-c-button-icon-text::after {
display: none;
}
@ -260,14 +303,10 @@ $max-footer-content-width: $content-max;
&:focus-visible,
&:visited:focus-visible {
color: $m24-color-green;
color: $m24-color-white;
.mzp-c-button-icon-start svg path {
fill: $m24-color-green;
}
.mzp-c-button-icon-text::after {
background: $m24-color-green;
fill: $m24-color-black;
}
}
@ -351,7 +390,7 @@ $max-footer-content-width: $content-max;
&:hover,
&:focus-visible {
border-color: $m24-color-black;
border-color: $m24-color-functional-gray;
}
}
}

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

@ -0,0 +1 @@
<svg width="16px" height="16px" viewBox="0 0 16 16" xmlns="http://www.w3.org/2000/svg"><title>icon/social/instagram/white</title><g id="icon/social/instagram/white" stroke="none" stroke-width="1" fill="none" fill-rule="evenodd"><path d="M7.99749206,0.00504761905 C10.1694603,0.00504761905 10.4418095,0.0142539683 11.2948254,0.0531746032 C12.1460635,0.092 12.7274286,0.227206349 13.236127,0.424920635 C13.7620317,0.629269841 14.2080317,0.902730159 14.6526667,1.34733333 C15.0972698,1.79196825 15.3707302,2.23796825 15.5751111,2.76387302 C15.7727937,3.27257143 15.908,3.85393651 15.9468254,4.7051746 C15.985746,5.55819048 15.9949524,5.83053968 15.9949524,8.00253968 C15.9949524,10.1745079 15.985746,10.4468571 15.9468254,11.299873 C15.908,12.1511111 15.7727937,12.7324762 15.5751111,13.2411746 C15.3707302,13.7670794 15.0972698,14.2130794 14.6526667,14.6577143 C14.2080317,15.1023175 13.7620317,15.3757778 13.236127,15.5801587 C12.7274286,15.7778413 12.1460635,15.9130476 11.2948254,15.951873 C10.4418095,15.9907937 10.1694603,16 7.99749206,16 C5.82549206,16 5.55314286,15.9907937 4.70012698,15.951873 C3.84888889,15.9130476 3.26752381,15.7778413 2.7588254,15.5801587 C2.23292063,15.3757778 1.78692063,15.1023175 1.34228571,14.6577143 C0.89768254,14.2130794 0.624222222,13.7670794 0.419873016,13.2411746 C0.22215873,12.7324762 0.086952381,12.1511111 0.0481269841,11.299873 C0.00920634921,10.4468571 0,10.1745079 0,8.00253968 C0,5.83053968 0.00920634921,5.55819048 0.0481269841,4.7051746 C0.086952381,3.85393651 0.22215873,3.27257143 0.419873016,2.76387302 C0.624222222,2.23796825 0.89768254,1.79196825 1.34228571,1.34733333 C1.78692063,0.902730159 2.23292063,0.629269841 2.7588254,0.424920635 C3.26752381,0.227206349 3.84888889,0.092 4.70012698,0.0531746032 C5.55314286,0.0142539683 5.82549206,0.00504761905 7.99749206,0.00504761905 Z M7.99749206,1.44603175 C5.86206349,1.44603175 5.60911111,1.45419048 4.76580952,1.49266667 C3.98606349,1.52822222 3.56260317,1.65850794 3.28079365,1.76803175 C2.90749206,1.91311111 2.64107937,2.0864127 2.3612381,2.36628571 C2.08136508,2.64612698 1.90806349,2.91253968 1.76298413,3.28584127 C1.65346032,3.56765079 1.5231746,3.99111111 1.48761905,4.77085714 C1.44914286,5.61415873 1.44098413,5.86711111 1.44098413,8.00253968 C1.44098413,10.1379365 1.44914286,10.3908889 1.48761905,11.2341905 C1.5231746,12.0139365 1.65346032,12.4373968 1.76298413,12.7192063 C1.90806349,13.0925079 2.08139683,13.3589206 2.3612381,13.6387619 C2.64107937,13.9186349 2.90749206,14.0919365 3.28079365,14.2370159 C3.56260317,14.3465397 3.98606349,14.4768254 4.76580952,14.512381 C5.60901587,14.5508571 5.86190476,14.5590159 7.99749206,14.5590159 C10.1330476,14.5590159 10.3859683,14.5508571 11.2291429,14.512381 C12.0088889,14.4768254 12.4323492,14.3465397 12.7141587,14.2370159 C13.0874603,14.0919365 13.353873,13.9186349 13.6337143,13.6387619 C13.9135873,13.3589206 14.0868889,13.0925079 14.2319683,12.7192063 C14.3414921,12.4373968 14.4717778,12.0139365 14.5073333,11.2341905 C14.5458095,10.3908889 14.5539683,10.1379365 14.5539683,8.00253968 C14.5539683,5.86711111 14.5458095,5.61415873 14.5073333,4.77085714 C14.4717778,3.99111111 14.3414921,3.56765079 14.2319683,3.28584127 C14.0868889,2.91253968 13.9135873,2.64612698 13.6337143,2.36628571 C13.353873,2.0864127 13.0874603,1.91311111 12.7141587,1.76803175 C12.4323492,1.65850794 12.0088889,1.52822222 11.2291429,1.49266667 C10.3858413,1.45419048 10.1328889,1.44603175 7.99749206,1.44603175 Z M7.99749206,3.89571429 C10.265619,3.89571429 12.1042857,5.73438095 12.1042857,8.00253968 C12.1042857,10.2706667 10.265619,12.1093333 7.99749206,12.1093333 C5.72933333,12.1093333 3.89066667,10.2706667 3.89066667,8.00253968 C3.89066667,5.73438095 5.72933333,3.89571429 7.99749206,3.89571429 Z M7.99749206,10.6683492 C9.46977778,10.6683492 10.6633016,9.4748254 10.6633016,8.00253968 C10.6633016,6.53022222 9.46977778,5.33669841 7.99749206,5.33669841 C6.5251746,5.33669841 5.33165079,6.53022222 5.33165079,8.00253968 C5.33165079,9.4748254 6.5251746,10.6683492 7.99749206,10.6683492 Z M13.226254,3.73346032 C13.226254,4.26349206 12.7965714,4.69314286 12.2665397,4.69314286 C11.7365397,4.69314286 11.3068571,4.26349206 11.3068571,3.73346032 C11.3068571,3.20342857 11.7365397,2.77374603 12.2665397,2.77374603 C12.7965714,2.77374603 13.226254,3.20342857 13.226254,3.73346032 Z" id="icon" fill="#828282"></path></g></svg>

После

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

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

@ -0,0 +1 @@
<svg viewBox="0 0 24 24" xmlns="http://www.w3.org/2000/svg"><path fill="#828282" d="M20.447 20.452h-3.554v-5.569c0-1.328-.027-3.037-1.852-3.037-1.853 0-2.136 1.445-2.136 2.939v5.667H9.351V9h3.414v1.561h.046c.477-.9 1.637-1.85 3.37-1.85 3.601 0 4.267 2.37 4.267 5.455v6.286zM5.337 7.433a2.062 2.062 0 0 1-2.063-2.065 2.064 2.064 0 1 1 2.063 2.065zm1.782 13.019H3.555V9h3.564v11.452zM22.225 0H1.771C.792 0 0 .774 0 1.729v20.542C0 23.227.792 24 1.771 24h20.451C23.2 24 24 23.227 24 22.271V1.729C24 .774 23.2 0 22.222 0h.003z"/></svg>

После

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

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

@ -0,0 +1 @@
<svg viewBox="0 0 24 24" xmlns="http://www.w3.org/2000/svg"><path fill="#828282" d="M12 0C5.4 0 0 5.4 0 12s5.4 12 12 12 12-5.4 12-12S18.66 0 12 0zm5.521 17.34c-.24.359-.66.48-1.021.24-2.82-1.74-6.36-2.101-10.561-1.141-.418.122-.779-.179-.899-.539-.12-.421.18-.78.54-.9 4.56-1.021 8.52-.6 11.64 1.32.42.18.479.659.301 1.02zm1.44-3.3c-.301.42-.841.6-1.262.3-3.239-1.98-8.159-2.58-11.939-1.38-.479.12-1.02-.12-1.14-.6-.12-.48.12-1.021.6-1.141C9.6 9.9 15 10.561 18.72 12.84c.361.181.54.78.241 1.2zm.12-3.36C15.24 8.4 8.82 8.16 5.16 9.301c-.6.179-1.2-.181-1.38-.721-.18-.601.18-1.2.72-1.381 4.26-1.26 11.28-1.02 15.721 1.621.539.3.719 1.02.419 1.56-.299.421-1.02.599-1.559.3z"/></svg>

После

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

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

@ -0,0 +1 @@
<svg viewBox="0 0 24 24" xmlns="http://www.w3.org/2000/svg"><path fill="#828282" d="M12.525.02c1.31-.02 2.61-.01 3.91-.02.08 1.53.63 3.09 1.75 4.17 1.12 1.11 2.7 1.62 4.24 1.79v4.03c-1.44-.05-2.89-.35-4.2-.97-.57-.26-1.1-.59-1.62-.93-.01 2.92.01 5.84-.02 8.75-.08 1.4-.54 2.79-1.35 3.94-1.31 1.92-3.58 3.17-5.91 3.21-1.43.08-2.86-.31-4.08-1.03-2.02-1.19-3.44-3.37-3.65-5.71-.02-.5-.03-1-.01-1.49.18-1.9 1.12-3.72 2.58-4.96 1.66-1.44 3.98-2.13 6.15-1.72.02 1.48-.04 2.96-.04 4.44-.99-.32-2.15-.23-3.02.37-.63.41-1.11 1.04-1.36 1.75-.21.51-.15 1.07-.14 1.61.24 1.64 1.82 3.02 3.5 2.87 1.12-.01 2.19-.66 2.77-1.61.19-.33.4-.67.41-1.06.1-1.79.06-3.57.07-5.36.01-4.03-.01-8.05.02-12.07z"/></svg>

После

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

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

@ -0,0 +1,3 @@
<svg xmlns="http://www.w3.org/2000/svg" width="16" height="16" fill="none" viewBox="0 0 16 16">
<path fill="#828282" d="M12.6009 1h2.4535L9.69434 7.31003 16 15.8966h-4.9373l-3.86704-5.2077-4.42479 5.2077H.315951L6.04904 9.14727 0 1h5.06262l3.49549 4.76002L12.6009 1Zm-.861 13.384h1.3594L4.32392 2.43312H2.86506L11.7399 14.384Z"/>
</svg>

После

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

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

@ -0,0 +1 @@
<svg xmlns="http://www.w3.org/2000/svg" width="16" height="16" viewBox="0 0 16 16"><path fill="#828282" fill-rule="evenodd" d="M15.666 3.749C16 4.997 16 7.599 16 7.599s0 2.604-.334 3.852a2.004 2.004 0 0 1-1.415 1.415C13.003 13.2 8 13.2 8 13.2s-5.003 0-6.251-.334A2.004 2.004 0 0 1 .334 11.45C0 10.203 0 7.6 0 7.6s0-2.603.334-3.851A2.004 2.004 0 0 1 1.75 2.334C2.997 2 7.999 2 7.999 2s5.004 0 6.252.334c.689.184 1.23.726 1.415 1.415zM6.4 9.999 10.557 7.6 6.4 5.2V10z"/></svg>

После

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