mozilla
/
bedrock
зеркало из https://github.com/mozilla/bedrock.git
1
0
Форкнуть 0
Код Задачи Пакеты Проекты Релизы Вики Активность

Simplify dev edition product, firstrun, and whatsnew pages (Fix #14243 Fix #14244 ) (#14314) 

* Simplify dev edition product, firstrun, and whatsnew pages

We are simplifying these pages to be closer to base protocol in preparation for upcoming
-design system changes

-    Remove references to features being "new"
-    Remove custom styles sheets for all dev edition page includes
-    Change icon colours to match dev edition pallet
-    Convert highlights to card component
-    Convert features to use picto component
-    Convert newsletter to use split component
-    Generic whats new page:
     -   Add link to release notes
     -   Remove feature list and replace with link to the docs
     -   Darker theme
     -   Add MDN component
This commit is contained in:
Stephanie Hobson 2024-03-19 17:32:16 -07:00 коммит произвёл GitHub
Родитель d264a18703
Коммит d08bd22c02
Не найден ключ, соответствующий данной подписи
Идентификатор ключа GPG: B5690EEEBB952194
34 изменённых файлов: 701 добавлений и 822 удалений
Показать статистику Скачать Patch файл Скачать Diff файл Показать все файлы Свернуть все файлы

21
bedrock/firefox/templates/firefox/developer/firstrun.html
Просмотреть файл

@ -26,27 +26,22 @@
{% block content %}
<main>
<section class="t-intro">
<div class="mzp-l-content">
<div class="mzp-c-wordmark mzp-t-wordmark-lg mzp-t-product-developer"></div>
<h1 class="intro-title">
<section class="mzp-l-content mzp-t-content-md t-center">
<div class="mzp-c-logo mzp-t-logo-xl mzp-t-product-developer mzp-l-logo-center"></div>
<h1>
{{ ftl('firefox-developer-welcome-to-firefox-browser', fallback='firefox-developer-welcome-to-the-all-new') }}
</h1>
<p class="intro-tagline">{{ ftl('firefox-developer-firefox-has-been-rebuilt') }}</p>
{% include '/firefox/developer/includes/intro-features.html' %}
</div>
</section>
{% include '/firefox/developer/includes/alt-newsletter.html' %}
{% with hide_heading=True %}
{% include '/firefox/developer/includes/features.html' %}
{% endwith %}
{% include '/firefox/developer/includes/highlights.html' %}
{% include '/firefox/developer/includes/for-developers.html' %}
{% include '/firefox/developer/includes/alt-newsletter.html' %}
{% include '/firefox/developer/includes/features.html' %}
<section class="t-engage mzp-t-dark">
<section class="mzp-t-dark t-engage">
{% include '/firefox/developer/includes/engage.html' %}
</section>
</main>

20
bedrock/firefox/templates/firefox/developer/includes/alt-newsletter.html
Просмотреть файл

@ -4,19 +4,27 @@
file, You can obtain one at https://mozilla.org/MPL/2.0/.
#}
<section class="t-newsletter">
<div class="mzp-l-content">
{% from "macros-protocol.html" import split with context %}
{% call split(
block_id='newsletter',
image=resp_img('img/firefox/developer/mail.svg', optional_attributes={
'width': '200',
'loading': 'lazy'
}),
block_class='mzp-l-split-reversed mzp-l-split-body-wide mzp-t-content-lg mzp-l-split-center-on-sm-md',
media_class='mzp-l-split-h-center'
) %}
{% if LANG.startswith('en-') %}
{{ email_newsletter_form(
'app-dev',
title='Mozilla Developer Newsletter',
desc='Get developer news, tricks and resources <br> sent straight to your inbox.'|safe,
desc='Get developer news, tricks and resources sent straight to your inbox.'|safe,
button_class='mzp-t-product mzp-t-lg',
include_language=False) }}
{% else %}
{{ email_newsletter_form(
spinner_color='#fff',
spinner_color='#0c99d5',
button_class='mzp-c-button mzp-t-product mzp-t-lg') }}
{% endif %}
</div>
</section>
{% endcall %}

3
bedrock/firefox/templates/firefox/developer/includes/arrow-right.svg Normal file
Просмотреть файл

@ -0,0 +1,3 @@
<svg fill="none" height="40px" viewBox="0 0 60 40" width="60px" xmlns="http://www.w3.org/2000/svg" aria-role="presentation">
<path d="M 38.263 0.766 C 37.201 1.807 37.201 3.537 38.243 4.599 L 50.914 17.286 L 2.688 17.286 C 1.209 17.286 0 18.494 0 19.994 C 0 21.494 1.209 22.702 2.688 22.702 L 50.893 22.702 L 38.222 35.388 C 37.18 36.451 37.201 38.159 38.243 39.222 C 39.305 40.263 40.994 40.263 42.057 39.201 L 59.229 21.91 C 59.458 21.66 59.646 21.389 59.792 21.056 C 59.938 20.723 60 20.369 60 20.015 C 60 19.306 59.729 18.64 59.229 18.119 L 42.057 0.828 C 41.035 -0.255 39.326 -0.276 38.263 0.766 L 38.263 0.766 Z" fill="currentcolor"/>
</svg>
Режим "рядом"

После

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

277
bedrock/firefox/templates/firefox/developer/includes/features.html
Просмотреть файл

@ -5,159 +5,226 @@
file, You can obtain one at https://mozilla.org/MPL/2.0/.
#}
<section class="t-features mzp-l-content mzp-t-content-xl">
<h2 class="c-title"><span>{{ ftl('firefox-developer-design-code-test') }}</span></h2>
<h3 class="c-subtitle">{{ ftl('firefox-developer-build-and-perfect') }}</h3>
{% from "macros-protocol.html" import picto with context %}
<ul class="c-gallery-grid">
<li class="c-gallery-item">
<img class="c-feature-img" src="{{ static('img/firefox/developer/feature-inspector.svg') }}" alt="" width="202" height="124">
<h3 class="c-feature-name">{{ ftl('firefox-developer-inspector') }}</h3>
<p class="c-feature-desc">
{{ ftl('firefox-developer-inspect-and-refine') }}
{% if ftl_has_messages('firefox-developer-learn-about-page-inspector') %}
<p class="c-feature-more">
<section class="t-features">
{% if not hide_heading %}
<div class="mzp-c-section-heading">
<h2 class="mzp-u-title-3xs"><span>{{ ftl('firefox-developer-design-code-test') }}</span></h2>
<h3 class="mzp-u-title-sm">{{ ftl('firefox-developer-build-and-perfect') }}</h3>
</div>
{% endif %}
<div class="mzp-l-content mzp-l-columns mzp-t-columns-three mzp-t-content-xl">
{% call picto(
title=ftl('firefox-developer-inspector'),
body=True,
image=resp_img(
url='img/firefox/developer/feature-inspector.svg',
optional_attributes={
'class': 'mzp-c-picto-image',
'width': '202',
'height': 124,
'loading': 'lazy'
}
),
) %}
<p>{{ ftl('firefox-developer-inspect-and-refine') }}</p>
<p>
<a href="https://firefox-source-docs.mozilla.org/devtools-user/page_inspector/" class="mzp-c-cta-link" rel="external">
{{ ftl('firefox-developer-learn-about-page-inspector') }}
</a>
</p>
{% endif %}
</p>
</li>
{% endcall %}
<li class="c-gallery-item">
<img class="c-feature-img" src="{{ static('img/firefox/developer/feature-console.svg') }}" alt="" width="182" height="124">
<h3 class="c-feature-name">{{ ftl('firefox-developer-console') }}</h3>
<p class="c-feature-desc">
{{ ftl('firefox-developer-track-css') }}
{% if ftl_has_messages('firefox-developer-learn-about-web-console') %}
<p class="c-feature-more">
{% call picto(
title=ftl('firefox-developer-console'),
body=True,
image=resp_img(
url='img/firefox/developer/feature-console.svg',
optional_attributes={
'class': 'mzp-c-picto-image',
'width': '182',
'height': '124',
'loading': 'lazy'
}
),
) %}
<p>{{ ftl('firefox-developer-inspect-and-refine') }}</p>
<p>
<a href="https://firefox-source-docs.mozilla.org/devtools-user/web_console/" class="mzp-c-cta-link" rel="external">
{{ ftl('firefox-developer-learn-about-web-console') }}
</a>
</p>
{% endif %}
</p>
</li>
{% endcall %}
<li class="c-gallery-item">
<img class="c-feature-img" src="{{ static('img/firefox/developer/feature-debugger.svg') }}" alt="" width="202" height="110">
<h3 class="c-feature-name">{{ ftl('firefox-developer-debugger') }}</h3>
<p class="c-feature-desc">
{{ ftl('firefox-developer-powerful-javascript') }}
{% if ftl_has_messages('firefox-developer-learn-more-about-debugger') %}
<p class="c-feature-more">
{% call picto(
title=ftl('firefox-developer-debugger'),
body=True,
image=resp_img(
url='img/firefox/developer/feature-debugger.svg',
optional_attributes={
'class': 'mzp-c-picto-image',
'width': '202',
'height': '110',
'loading': 'lazy'
}
),
) %}
<p>{{ ftl('firefox-developer-powerful-javascript') }}</p>
<p>
<a href="https://firefox-source-docs.mozilla.org/devtools-user/debugger/" class="mzp-c-cta-link" rel="external">
{{ ftl('firefox-developer-learn-more-about-debugger') }}
</a>
</p>
{% endif %}
</p>
</li>
{% endcall %}
<li class="c-gallery-item">
<img class="c-feature-img" src="{{ static('img/firefox/developer/feature-network.svg') }}" alt="" width="202" height="108">
<h3 class="c-feature-name">{{ ftl('firefox-developer-network') }}</h3>
<p class="c-feature-desc">
{{ ftl('firefox-developer-monitor-network-requests') }}
{% if ftl_has_messages('firefox-developer-learn-more-about-newtork-monitor') %}
<p class="c-feature-more">
{% call picto(
title=ftl('firefox-developer-network'),
body=True,
image=resp_img(
url='img/firefox/developer/feature-network.svg',
optional_attributes={
'class': 'mzp-c-picto-image',
'width': '232',
'height': '124',
'loading': 'lazy'
}
),
) %}
<p>{{ ftl('firefox-developer-monitor-network-requests') }}</p>
<p>
<a href="https://firefox-source-docs.mozilla.org/devtools-user/network_monitor/" class="mzp-c-cta-link" rel="external">
{{ ftl('firefox-developer-learn-more-about-newtork-monitor') }}
</a>
</p>
{% endif %}
</p>
</li>
{% endcall %}
<li class="c-gallery-item">
<img class="c-feature-img" src="{{ static('img/firefox/developer/feature-storage.svg') }}" alt="" width="134" height="124">
<h3 class="c-feature-name">{{ ftl('firefox-developer-storage-panel') }}</h3>
<p class="c-feature-desc">
{{ ftl('firefox-developer-add-modify-remove') }}
{% if ftl_has_messages('firefox-developer-learn-more-about-storage') %}
<p class="c-feature-more">
{% call picto(
title=ftl('firefox-developer-storage-panel'),
body=True,
image=resp_img(
url='img/firefox/developer/feature-storage.svg',
optional_attributes={
'class': 'mzp-c-picto-image',
'width': '134',
'height': '124',
'loading': 'lazy'
}
),
) %}
<p>{{ ftl('firefox-developer-add-modify-remove') }}</p>
<p>
<a href="https://firefox-source-docs.mozilla.org/devtools-user/storage_inspector/" class="mzp-c-cta-link" rel="external">
{{ ftl('firefox-developer-learn-more-about-storage') }}
</a>
</p>
{% endif %}
</p>
</li>
{% endcall %}
<li class="c-gallery-item">
<img class="c-feature-img" src="{{ static('img/firefox/developer/feature-responsive-mode.svg') }}" alt="" width="194" height="124">
<h3 class="c-feature-name">{{ ftl('firefox-developer-responsive-design-mode') }}</h3>
<p class="c-feature-desc">
{{ ftl('firefox-developer-test-sites-emulated') }}
{% if ftl_has_messages('firefox-developer-learn-more-about-responsive') %}
<p class="c-feature-more">
{% call picto(
title=ftl('firefox-developer-responsive-design-mode'),
body=True,
image=resp_img(
url='img/firefox/developer/feature-responsive-mode.svg',
optional_attributes={
'class': 'mzp-c-picto-image',
'width': '194',
'height': '124',
'loading': 'lazy'
}
),
) %}
<p>{{ ftl('firefox-developer-test-sites-emulated') }}</p>
<p>
<a href="https://firefox-source-docs.mozilla.org/devtools-user/responsive_design_mode/" class="mzp-c-cta-link" rel="external">
{{ ftl('firefox-developer-learn-more-about-responsive') }}
</a>
</p>
{% endif %}
</p>
</li>
{% endcall %}
<li class="c-gallery-item">
<img class="c-feature-img" src="{{ static('img/firefox/developer/feature-visual-editing.svg') }}" alt="" width="112" height="124">
<h3 class="c-feature-name">{{ ftl('firefox-developer-visual-editing') }}</h3>
<p class="c-feature-desc">
{{ ftl('firefox-developer-fine-tuning-animations') }}
{% if ftl_has_messages('firefox-developer-learn-more-about-visual-editing') %}
<p class="c-feature-more">
{% call picto(
title=ftl('firefox-developer-visual-editing'),
body=True,
image=resp_img(
url='img/firefox/developer/feature-visual-editing.svg',
optional_attributes={
'class': 'mzp-c-picto-image',
'width': '112',
'height': '124',
'loading': 'lazy'
}
),
) %}
<p>{{ ftl('firefox-developer-fine-tuning-animations') }}</p>
<p>
<a href="https://hacks.mozilla.org/2015/11/developer-edition-44-creative-tools-and-more" class="mzp-c-cta-link" rel="external">
{{ ftl('firefox-developer-learn-more-about-visual-editing') }}
</a>
</p>
{% endif %}
</p>
</li>
{% endcall %}
<li class="c-gallery-item">
<img class="c-feature-img" src="{{ static('img/firefox/developer/feature-performance.svg') }}" alt="" width="202" height="124">
<h3 class="c-feature-name">{{ ftl('firefox-developer-performance') }}</h3>
<p class="c-feature-desc">
{{ ftl('firefox-developer-unblock-bottlenecks') }}
{% if ftl_has_messages('firefox-developer-learn-more-about-performance') %}
<p class="c-feature-more">
{% call picto(
title=ftl('firefox-developer-visual-editing'),
body=True,
image=resp_img(
url='img/firefox/developer/feature-performance.svg',
optional_attributes={
'class': 'mzp-c-picto-image',
'width': '202',
'height': '124',
'loading': 'lazy'
}
),
) %}
<p>{{ ftl('firefox-developer-unblock-bottlenecks') }}</p>
<p>
<a href="https://firefox-source-docs.mozilla.org/devtools-user/performance/" class="mzp-c-cta-link" rel="external">
{{ ftl('firefox-developer-learn-more-about-performance') }}
</a>
</p>
{% endif %}
</p>
</li>
{% endcall %}
<li class="c-gallery-item">
<img class="c-feature-img" src="{{ static('img/firefox/developer/feature-memory.svg') }}" alt="" width="116" height="124">
<h3 class="c-feature-name">{{ ftl('firefox-developer-memory') }}</h3>
<p class="c-feature-desc">
{{ ftl('firefox-developer-find-memory-leaks') }}
{% if ftl_has_messages('firefox-developer-learn-more-about-memory') %}
<p class="c-feature-more">
{% call picto(
title=ftl('firefox-developer-memory'),
body=True,
image=resp_img(
url='img/firefox/developer/feature-memory.svg',
optional_attributes={
'class': 'mzp-c-picto-image',
'width': '116',
'height': '124',
'loading': 'lazy'
}
),
) %}
<p>{{ ftl('firefox-developer-find-memory-leaks') }}</p>
<p>
<a href="https://firefox-source-docs.mozilla.org/devtools-user/memory/" class="mzp-c-cta-link" rel="external">
{{ ftl('firefox-developer-learn-more-about-memory') }}
</a>
</p>
{% endif %}
</p>
</li>
{% endcall %}
<li class="c-gallery-item">
<img class="c-feature-img" src="{{ static('img/firefox/developer/feature-style-editor.svg') }}" alt="" width="126" height="124">
<h3 class="c-feature-name">{{ ftl('firefox-developer-style-editor') }}</h3>
<p class="c-feature-desc">
{{ ftl('firefox-developer-edit-and-manage') }}
{% if ftl_has_messages('firefox-developer-learn-more-about-style') %}
<p class="c-feature-more">
{% call picto(
title=ftl('firefox-developer-style-editor'),
body=True,
image=resp_img(
url='img/firefox/developer/feature-style-editor.svg',
optional_attributes={
'class': 'mzp-c-picto-image',
'width': '116',
'height': '124',
'loading': 'lazy'
}
),
) %}
<p>{{ ftl('firefox-developer-edit-and-manage') }}</p>
<p>
<a href="https://firefox-source-docs.mozilla.org/devtools-user/style_editor/" class="mzp-c-cta-link" rel="external">
{{ ftl('firefox-developer-learn-more-about-style') }}
</a>
</p>
{% endif %}
</p>
</li>
</ul>
{% endcall %}
</div>
</section>

6
bedrock/firefox/templates/firefox/developer/includes/for-developers.html
Просмотреть файл

@ -9,10 +9,10 @@
{% call split(
block_id='fordevs',
image=resp_img('img/firefox/developer/stylo-engine.svg', optional_attributes={ 'class': 'mzp-c-split-media-asset'}),
block_class='t-performance'
block_class='mzp-t-split-nospace'
) %}
<h2 class="c-title">{{ ftl('firefox-developer-firefox-browser') }}</h2>
<p class="c-subtitle">{{ ftl('firefox-developer-made-for-developers') }}</p>
<h2 class="mzp-u-title-xs">{{ ftl('firefox-developer-firefox-browser') }}</h2>
<h3 class="mzp-u-title-sm">{{ ftl('firefox-developer-made-for-developers') }}</h3>
<p>{{ ftl('firefox-developer-all-the-latest-v2', fallback='firefox-developer-all-the-latest') }}</p>
<p>{{ ftl('firefox-developer-a-separate-profile') }}</p>
<p>{{ ftl('firefox-developer-preferences-tailored') }}</p>

134
bedrock/firefox/templates/firefox/developer/includes/highlights.html
Просмотреть файл

@ -4,86 +4,62 @@
file, You can obtain one at https://mozilla.org/MPL/2.0/.
#}
<section class="t-highlights mzp-l-content mzp-t-content-lg">
<div class="c-gallery-grid">
{% if ftl_has_messages('firefox-developer-new-tools', 'firefox-developer-firefox-devtools-now-grays-out') %}
<div class="c-gallery-item" id="devtools">
<a href="https://hacks.mozilla.org/2019/10/firefox-70-a-bountiful-release-for-all/#developertools" rel="external" width="416" height="208">
{{ resp_img(
url='img/firefox/developer/hero-inactive-css.png',
srcset={
'img/firefox/developer/hero-inactive-css-high-res.png': '2x'
},
optional_attributes={
'alt': ftl('firefox-developer-inactive-css'),
'class': 'highlight-image'
}
) }}
</a>
<h2 class="c-title">{{ ftl('firefox-developer-new-tools') }}</h2>
<h3 class="c-subtitle">{{ ftl('firefox-developer-inactive-css') }}</h3>
<p>{{ ftl('firefox-developer-firefox-devtools-now-grays-out') }}</p>
<p>
<a class="mzp-c-cta-link" rel="external" href="https://hacks.mozilla.org/2019/10/firefox-70-a-bountiful-release-for-all/#developertools">
{{ ftl('ui-learn-more') }}
</a>
</p>
</div>
{% endif %}
<div class="c-gallery-item" id="devtools">
<a href="https://mozilladevelopers.github.io/playground/debugger/" rel="external">
<img class="highlight-image" src="{{ static('img/firefox/developer/hero-debugger-ani.gif') }}" alt="{{ ftl('firefox-developer-firefox-devtools') }}" width="416" height="208">
</a>
<h2 class="c-title">{{ ftl('firefox-developer-new-tools') }}</h2>
<h3 class="c-subtitle">{{ ftl('firefox-developer-firefox-devtools') }}</h3>
<p>{{ ftl('firefox-developer-the-new-firefox-devtools') }}</p>
<p>
<a class="mzp-c-cta-link" rel="external" href="https://mozilladevelopers.github.io/playground/debugger/">
{{ ftl('ui-learn-more') }}
</a>
</p>
</div>
{% from "macros-protocol.html" import card with context %}
<div class="c-gallery-item" id="cssgrid">
<a href="https://mozilladevelopers.github.io/playground/css-grid/" rel="external">
<img class="highlight-image" src="{{ static('img/firefox/developer/hero-cssgrid-ani.gif') }}" alt="{{ ftl('firefox-developer-master-css-grid') }}" width="416" height="208">
</a>
<h2 class="c-title">{{ ftl('firefox-developer-master-innovative-features') }}</h2>
<h3 class="c-subtitle">{{ ftl('firefox-developer-master-css-grid') }}</h3>
<p>{{ ftl('firefox-developer-firefox-is-the-only-browser') }}</p>
<p>
<a class="mzp-c-cta-link" rel="external" href="https://mozilladevelopers.github.io/playground/css-grid/">
{{ ftl('ui-learn-more') }}
</a>
</p>
</div>
<section class="t-highlights mzp-l-content mzp-l-card-half mzp-t-content-xl">
{{ card(
attributes='id="inactive"',
class='mzp-c-card-medium',
tag_label=ftl('firefox-developer-new-tools'),
ga_title='Pioneers of The Open Web',
title=ftl('firefox-developer-inactive-css'),
desc=ftl('firefox-developer-firefox-devtools-now-grays-out'),
image=resp_img('img/firefox/developer/hero-inactive-css.png', srcset={'img/firefox/developer/hero-inactive-css-high-res.png': '2x'}, optional_attributes={'alt': ftl('firefox-developer-inactive-css'), "loading": "lazy", "class": "mzp-c-card-image", "height": "280", "width": "560"}),
aspect_ratio='mzp-has-aspect-16-9',
link_url='https://hacks.mozilla.org/2019/10/firefox-70-a-bountiful-release-for-all/#developertools',
link_rel='external',
cta=ftl('ui-learn-more')
)}}
{% if ftl_has_messages('firefox-developer-faster-innovation', 'firefox-developer-the-new-fonts-panel') %}
{% if not ftl_has_messages('firefox-developer-new-tools', 'firefox-developer-firefox-devtools-now-grays-out') %}
<div class="c-gallery-item">
<a rel="external" href="https://firefox-source-docs.mozilla.org/devtools-user/page_inspector/how_to/edit_css_shapes/">
<img class="highlight-image" src="{{ static('img/firefox/developer/hero-clip-ani.gif') }}" alt="{{ ftl('firefox-developer-shapes-editor') }}" width="416" height="208">
</a>
<h2 class="c-title">{{ ftl('firefox-developer-convenient-features') }}</h2>
<h3 class="c-subtitle">{{ ftl('firefox-developer-shapes-editor') }}</h3>
<p>
{{ ftl('firefox-developer-firefox-devtools-has-a-brand-new-v2', fallbacl='firefox-developer-firefox-devtools-has-a-brand-new') }}
</p>
<p><a class="mzp-c-cta-link" rel="external" href="https://firefox-source-docs.mozilla.org/devtools-user/page_inspector/how_to/edit_css_shapes/">{{ ftl('ui-learn-more') }}</a></p>
</div>
{% endif %}
{{ card(
attributes='id="devtools"',
class='mzp-c-card-medium',
tag_label=ftl('firefox-developer-new-tools'),
ga_title='Pioneers of The Open Web',
title=ftl('firefox-developer-firefox-devtools'),
desc=ftl('firefox-developer-the-new-firefox-devtools'),
image=resp_img('img/firefox/developer/hero-debugger-ani.gif', optional_attributes={'alt': ftl('firefox-developer-firefox-devtools'), "loading": "lazy", "class": "mzp-c-card-image", "height": "280", "width": "560"}),
aspect_ratio='mzp-has-aspect-16-9',
link_url='https://mozilladevelopers.github.io/playground/debugger/',
link_rel='external',
cta=ftl('ui-learn-more')
)}}
<div class="c-gallery-item">
<a rel="external" href="https://firefox-source-docs.mozilla.org/devtools-user/page_inspector/how_to/edit_fonts/">
<img class="highlight-image" src="{{ static('img/firefox/developer/hero-fonts.gif') }}" alt="{{ ftl('firefox-developer-fonts-panel') }}" width="416" height="208">
</a>
<h2 class="c-title">{{ ftl('firefox-developer-faster-innovation') }}</h2>
<h3 class="c-subtitle">{{ ftl('firefox-developer-fonts-panel') }}</h3>
<p>
{{ ftl('firefox-developer-the-new-fonts-panel') }}
</p>
<p><a class="mzp-c-cta-link" rel="external" href="https://firefox-source-docs.mozilla.org/devtools-user/page_inspector/how_to/edit_fonts/">{{ ftl('ui-learn-more') }}</a></p>
</div>
{% endif %}
</div>
{{ card(
attributes='id="cssgrid"',
class='mzp-c-card-medium',
tag_label=ftl('firefox-developer-master-innovative-features'),
ga_title='Pioneers of The Open Web',
title=ftl('firefox-developer-master-css-grid'),
desc=ftl('firefox-developer-firefox-is-the-only-browser'),
image=resp_img('img/firefox/developer/hero-cssgrid-ani.gif', optional_attributes={'alt': ftl('firefox-developer-master-css-grid'), "loading": "lazy", "class": "mzp-c-card-image", "height": "280", "width": "560"}),
aspect_ratio='mzp-has-aspect-16-9',
link_url='https://mozilladevelopers.github.io/playground/css-grid/',
link_rel='external',
cta=ftl('ui-learn-more')
)}}
{{ card(
attributes='id="fonts"',
class='mzp-c-card-medium',
tag_label=ftl('firefox-developer-faster-innovation'),
ga_title='Pioneers of The Open Web',
title=ftl('firefox-developer-fonts-panel'),
desc=ftl('firefox-developer-the-new-fonts-panel'),
image=resp_img('img/firefox/developer/hero-fonts.gif', optional_attributes={'alt': ftl('firefox-developer-fonts-panel'), "loading": "lazy", "class": "mzp-c-card-image", "height": "280", "width": "560"}),
aspect_ratio='mzp-has-aspect-16-9',
link_url='https://firefox-source-docs.mozilla.org/devtools-user/page_inspector/how_to/edit_fonts/',
link_rel='external',
cta=ftl('ui-learn-more')
)}}
</section>

61
bedrock/firefox/templates/firefox/developer/includes/intro-features.html
Просмотреть файл

@ -4,20 +4,53 @@
file, You can obtain one at https://mozilla.org/MPL/2.0/.
#}
<ul class="c-gallery-grid">
<li class="c-gallery-item">
<img class="icon" src="{{ static('img/firefox/developer/devtools-icon.svg') }}" alt="" width="96" height="96">
<h3 class="c-title">{{ ftl('firefox-developer-firefox-devtools') }}</h3>
{% from "macros-protocol.html" import picto with context %}
<div class="mzp-l-content mzp-l-columns mzp-t-columns-three mzp-t-content-nospace mzp-t-picto-center">
{% call picto(
title=ftl('firefox-developer-firefox-devtools'),
body=True,
image=resp_img(
url='img/firefox/developer/devtools-icon.svg',
optional_attributes={
'class': 'mzp-c-picto-image',
'width': '96',
'loading': 'lazy'
}
),
) %}
<p><a href="#devtools" class="mzp-c-cta-link">{{ ftl('ui-learn-more') }}</a></p>
</li>
<li class="c-gallery-item">
<img class="icon" src="{{ static('img/firefox/developer/css-grid-icon.svg') }}" alt="" width="96" height="96">
<h3 class="c-title">{{ ftl('firefox-developer-master-css-grid') }}</h3>
{% endcall %}
{% call picto(
title=ftl('firefox-developer-master-css-grid'),
body=True,
image=resp_img(
url='img/firefox/developer/css-grid-icon.svg',
optional_attributes={
'class': 'mzp-c-picto-image',
'width': '96',
'loading': 'lazy'
}
),
) %}
<p><a href="#cssgrid" class="mzp-c-cta-link">{{ ftl('ui-learn-more') }}</a></p>
</li>
<li class="c-gallery-item">
<img class="icon" src="{{ static('img/firefox/developer/next-gen-icon.svg') }}" alt="" width="96" height="96">
<h3 class="c-title">{{ ftl('firefox-developer-built-for-developers') }}</h3>
{% endcall %}
{% call picto(
title=ftl('firefox-developer-built-for-developers'),
body=True,
image=resp_img(
url='img/firefox/developer/next-gen-icon.svg',
optional_attributes={
'class': 'mzp-c-picto-image',
'width': '96',
'loading': 'lazy'
}
),
) %}
<p><a href="#fordevs" class="mzp-c-cta-link">{{ ftl('ui-learn-more')}}</a></p>
</li>
</ul>
{% endcall %}
</div>

30
bedrock/firefox/templates/firefox/developer/includes/mdn-features.html Normal file
Просмотреть файл

@ -0,0 +1,30 @@
{#
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/.
#}
{% from "macros-protocol.html" import picto with context %}
<section>
<div class="mzp-l-content mzp-t-content-lg">
<div class="mzp-c-section-heading">
<h2><img src="{{ static('img/logos/mdn/mdn-wordmark-white.svg') }}" alt="{{ ftl('firefox-developer-mdn-web-docs') }}" width="222" height="64"></h2>
<p>{{ ftl('firefox-developer-resources-for-developers') }}</p>
</div>
<div class="mzp-l-columns mzp-t-columns-three">
<div>
<h3 class="mzp-u-title-xs"><a href="https://developer.mozilla.org/docs/Web?utm_source=www.mozilla.org&utm_medium=referral&utm_campaign=fxdev-whatsnew" rel="external">{{ ftl('firefox-developer-mdn-references') }}</a></h3>
<p>{{ ftl('firefox-developer-mdn-is-a') }}</p>
</div>
<div>
<h3 class="mzp-u-title-xs"><a href="https://developer.mozilla.org/curriculum/?utm_source=www.mozilla.org&utm_medium=referral&utm_campaign=fxdev-whatsnew" rel="external">{{ ftl('firefox-developer-mdn-curriculum') }}</a></h3>
<p>{{ ftl('firefox-developer-a-structured-guide') }}</p>
</div>
<div>
<h3 class="mzp-u-title-xs"><a href="https://developer.mozilla.org/plus/?utm_source=www.mozilla.org&utm_medium=referral&utm_campaign=fxdev-whatsnew" rel="external">{{ ftl('firefox-developer-mdn-plus') }}</a></h3>
<p>{{ ftl('firefox-developer-support-mdn-and') }}</p>
</div>
</div>
</div>
</section>

1
bedrock/firefox/templates/firefox/developer/includes/nightly.html
Просмотреть файл

@ -12,6 +12,7 @@
optional_attributes={ 'class': 'mzp-c-split-media-asset'}
),
block_class='mzp-l-split-reversed mzp-l-split-center-on-sm-md',
media_class='mzp-l-split-h-center',
media_after=True
) %}
<h2>{{ ftl('firefox-developer-want-to-be-on-the-cutting-edge') }}</h2>

67
bedrock/firefox/templates/firefox/developer/index.html
Просмотреть файл

@ -23,7 +23,7 @@
{% endblock %}
{% block body_id %}firefox-developer{% endblock %}
{% block body_class %}firefox-developer mzp-t-firefox t-home{% endblock %}
{% block body_class %}firefox-developer firefox-developer-home mzp-t-firefox{% endblock %}
{% block site_header %}
{% with hide_nav_download_button=True %}
@ -53,11 +53,10 @@
{% block content %}
<main>
<section class="t-intro">
<div class="mzp-l-content">
<div class="mzp-c-wordmark mzp-t-wordmark-lg mzp-t-product-developer"></div>
<h1 class="intro-title">{{ ftl('firefox-developer-firefox-browser') }}</h1>
<p class="intro-tagline">{{ ftl('firefox-developer-welcome-to-your-new-favorite') }}</p>
<div class="mzp-l-content mzp-t-content-md t-center">
<div class="mzp-c-logo mzp-t-logo-xl mzp-t-product-developer mzp-l-logo-center"></div>
<h1>{{ ftl('firefox-developer-firefox-browser') }}</h1>
<p>{{ ftl('firefox-developer-welcome-to-your-new-favorite') }}</p>
{{ download_firefox('alpha', platform='desktop', dom_id='intro-download', download_location='primary cta') }}
@ -68,19 +67,6 @@
<a href="{{ url('privacy.notices.firefox') }}#pre-release" class="more">{{ ftl('ui-learn-more') }}</a>
</p>
</div>
<div class="intro-image">
{{ resp_img(
url='img/firefox/developer/hero-screenshot.png',
srcset={
'img/firefox/developer/hero-screenshot-high-res.png': '2x'
},
optional_attributes={
'width': '1200',
'height': '337'
}
) }}
</div>
</section>
{% include '/firefox/developer/includes/for-developers.html' %}
@ -88,23 +74,16 @@
{% include '/firefox/developer/includes/features.html' %}
<section class="t-engage mzp-t-dark">
{% include '/firefox/developer/includes/engage.html' %}
<aside>
{% call split(
image=resp_img('img/firefox/developer/browser.png',
srcset={ 'img/firefox/developer/browser-high-res.png': '2x' },
optional_attributes={ 'class': 'mzp-c-split-media-asset' }
),
block_class='mzp-l-split-reversed mzp-l-split-center-on-sm-md',
media_after=True
block_id='newsletter',
image=resp_img('img/firefox/developer/mail.svg', optional_attributes={
'width': '200',
'loading': 'lazy'
}),
block_class='mzp-l-split-reversed',
media_class='mzp-l-split-h-center'
) %}
<h2>{{ ftl('firefox-developer-download-the-firefox-browser') }}</h2>
{{ download_firefox('alpha', platform='desktop', dom_id='footer-download', download_location='footer cta') }}
{% endcall %}
</section>
<section class="t-newsletter">
<div class="mzp-l-content">
{% if LANG.startswith('en-') %}
{{ email_newsletter_form(
'app-dev',
@ -117,7 +96,25 @@
spinner_color='#fff',
button_class='mzp-c-button mzp-t-product mzp-t-lg') }}
{% endif %}
</div>
{% endcall %}
</aside>
<section class="mzp-t-dark t-engage">
{% include '/firefox/developer/includes/engage.html' %}
{% call split(
image=resp_img('img/firefox/developer/browser.png',
srcset={ 'img/firefox/developer/browser-high-res.png': '2x' },
optional_attributes={ 'class': 'mzp-c-split-media-asset' }
),
block_class='mzp-l-split-reversed mzp-l-split-center-on-sm-md',
media_class='mzp-l-split-h-center',
media_after=True
) %}
<h2>{{ ftl('firefox-developer-download-the-firefox-browser') }}</h2>
{{ download_firefox('alpha', platform='desktop', dom_id='footer-download', download_location='footer cta') }}
{% endcall %}
</section>
</main>
{% endblock %}

43
bedrock/firefox/templates/firefox/developer/whatsnew.html
Просмотреть файл

@ -22,35 +22,38 @@
{% block body_class %}firefox-developer firefox-developer-whatsnew{% endblock %}
{% block content %}
<main>
<section class="t-intro">
<div class="mzp-l-content">
<div class="mzp-c-wordmark mzp-t-wordmark-lg mzp-t-product-developer"></div>
{% if ftl_has_messages('firefox-developer-congrats-you-now-have', 'firefox-developer-welcome-to-your-new-favorite') %}
<h1 class="intro-title">{{ ftl('firefox-developer-congrats-you-now-have-latest', fallback='firefox-developer-congrats-you-now-have') }}</h1>
<p class="intro-tagline">{{ ftl('firefox-developer-welcome-to-your-new-favorite') }}</p>
<main class="mzp-t-dark">
<div class="mzp-l-content mzp-t-content-md t-center">
<div class="mzp-c-logo mzp-t-logo-xl mzp-t-product-developer mzp-l-logo-center"></div>
<h1>{{ ftl('firefox-developer-congrats-you-now-have-latest-v2', fallback='firefox-developer-congrats-you-now-have-latest') }}</h1>
{% set attrs = 'href="' ~ url('firefox.notes', channel='aurora') ~ '"' %}
{% if LANG.startswith('en-') %}
<p>View the <a {{ attrs|safe }}>release notes</a> to see what’s new.</p>
{% else %}
<h1 class="intro-title">{{ ftl('firefox-developer-congrats-you-now-have-firefox') }}</h1>
<p class="intro-tagline">{{ ftl('firefox-developer-this-isnt-just-an-update') }}</p>
<p>{{ ftl('firefox-developer-view-the-release', attrs=attrs) }}</p>
{% endif %}
</div>
{% if ftl_has_messages('firefox-developer-developer-tools-user') %}
<div class="mzp-l-content mzp-t-content-md t-center">
<h2 class="mzp-u-title-sm"><a href="https://firefox-source-docs.mozilla.org/devtools-user/" rel="external" class="c-docs">
{{ ftl('firefox-developer-developer-tools-user') }}
{% include '/firefox/developer/includes/arrow-right.svg' %}
</a></h2>
</div>
{% endif %}
{% include '/firefox/developer/includes/intro-features.html' %}
</div>
</section>
{% if ftl_has_messages('firefox-developer-resources-for-developers', 'firefox-developer-mdn-is-a') %}
{% include '/firefox/developer/includes/mdn-features.html' %}
{% endif %}
{% include '/firefox/developer/includes/alt-newsletter.html' %}
{% include '/firefox/developer/includes/highlights.html' %}
{% include '/firefox/developer/includes/for-developers.html' %}
{% include '/firefox/developer/includes/features.html' %}
<section class="t-engage mzp-t-dark">
<section class="mzp-t-dark t-engage">
{% include '/firefox/developer/includes/engage.html' %}
{% include '/firefox/developer/includes/nightly.html' %}
</section>
</main>
{% endblock %}

28
l10n/en/firefox/developer.ftl
Просмотреть файл

@ -8,7 +8,7 @@
firefox-developer-page-title = { -brand-name-firefox-developer-edition }
firefox-developer-firefox-developer-edition-desc = { -brand-name-firefox-developer-edition } is the blazing fast browser that offers cutting edge developer tools and latest features like CSS Grid support and framework debugging
firefox-developer-firefox-browser = { -brand-name-firefox-browser } { -brand-name-developer-edition }
firefox-developer-firefox-browser = { -brand-name-firefox } { -brand-name-developer-edition }
firefox-developer-welcome-to-your-new-favorite = Welcome to your new favorite browser. Get the latest features, fast performance, and the development tools you need to build for the open web.
firefox-developer-speak-up = Speak up
firefox-developer-feedback-makes-us = Feedback makes us better. Tell us how we can improve the browser and Developer tools.
@ -73,16 +73,26 @@ firefox-developer-firefox-developer-edition-sends = { -brand-name-firefox-develo
firefox-developer-download-the-firefox-browser = Download the { -brand-name-firefox } browser made for developers
firefox-developer-welcome-to-the-all-new = Welcome to the all-new { -brand-name-firefox-quantum }: { -brand-name-developer-edition }
firefox-developer-firefox-has-been-rebuilt = { -brand-name-firefox } has been rebuilt from the ground-up to be faster, sleeker, and more powerful than ever.
firefox-developer-congrats-you-now-have-firefox = Congrats. You now have { -brand-name-firefox-quantum }: { -brand-name-developer-edition }.
firefox-developer-this-isnt-just-an-update = This isn’t just an update. This is { -brand-name-firefox-quantum }: A brand new { -brand-name-firefox } that has been rebuilt from the ground-up to be faster, sleeker, and more powerful than ever.
firefox-developer-welcome-to-firefox-browser = Welcome to { -brand-name-firefox-browser } { -brand-name-developer-edition }
firefox-developer-welcome-to-firefox-browser = Welcome to { -brand-name-firefox } { -brand-name-developer-edition }
firefox-developer-made-for-developers = The browser made for developers
firefox-developer-all-the-latest-v2 = All the latest developer tools in beta in addition to features like the Multi-line Console Editor and WebSocket Inspector.
# Obsolete string
firefox-developer-all-the-latest = All the latest developer tools in beta, plus <strong>experimental features</strong> like the Multi-line Console Editor and WebSocket Inspector.
firefox-developer-a-separate-profile = A <strong>separate profile and path</strong> so you can easily run it alongside Release or { -brand-name-beta } { -brand-name-firefox }.
firefox-developer-preferences-tailored = Preferences <strong>tailored for web developers</strong>: Browser and remote debugging are enabled by default, as are the dark theme and developer toolbar button.
firefox-developer-congrats-you-now-have = Congrats. You now have { -brand-name-firefox-browser } { -brand-name-developer-edition }.
firefox-developer-congrats-you-now-have-latest-v2 = You now have the latest version of { -brand-name-firefox } { -brand-name-developer-edition }.
# Obsolete string (expires: 2024-05-14)
firefox-developer-congrats-you-now-have-latest = Congrats. You now have the latest version of { -brand-name-firefox-browser } { -brand-name-developer-edition }.
# Variables:
# $attrs (string) - link to the most recent Firefox Developer Edition release notes
firefox-developer-view-the-release = View the <a { $attrs }>release notes</a> (English only) to see what’s new.
# this is a link to https://firefox-source-docs.mozilla.org/devtools-user/
firefox-developer-developer-tools-user = Developer Tools User Docs
firefox-developer-mdn-web-docs = { -brand-name-mdn-web-docs }
firefox-developer-resources-for-developers = Resources for Developers, by Developers
firefox-developer-mdn-references = { -brand-name-mdn } References
firefox-developer-mdn-is-a = { -brand-name-mdn } is an open-source, collaborative project documenting Web platform technologies, including CSS, HTML, JavaScript and Web APIs.
firefox-developer-mdn-curriculum = { -brand-name-mdn } Curriculum
firefox-developer-a-structured-guide = A structured guide to the essential skills and practices for being a successful front-end developer, along with recommended learning resources.
firefox-developer-mdn-plus = { -brand-name-mdn-plus }
firefox-developer-support-mdn-and = Support { -brand-name-mdn } and make it your own with collections, notifications, and playgrounds.

4
l10n/en/firefox/installer-help.ftl
Просмотреть файл

@ -19,9 +19,9 @@ installer-help-firefox-release-title = { -brand-name-firefox-browser }
# $trackers (number) - number of trackers blocked by Firefox (currently in the thousands)
installer-help-firefox-release-desc = Get the latest. Automatic privacy is here. Download { -brand-name-firefox-browser } to block over { $trackers } trackers.
installer-help-firefox-beta-title = { -brand-name-firefox-browser } { -brand-name-beta }
installer-help-firefox-beta-title = { -brand-name-firefox } { -brand-name-beta }
installer-help-firefox-beta-desc = Test about-to-be released features in the most stable pre-release build.
installer-help-firefox-developer-title = { -brand-name-firefox-browser } { -brand-name-developer-edition }
installer-help-firefox-developer-title = { -brand-name-firefox } { -brand-name-developer-edition }
installer-help-firefox-developer-desc = Build, test, scale and more with the only browser built just for developers.
installer-help-firefox-nightly-title = { -brand-name-firefox-browser } { -brand-name-nightly }
installer-help-firefox-nightly-desc = Peek at our next generation web browser, and help us make it the best browser it can be.

2
l10n/en/firefox/whatsnew/whatsnew-developer-mdnplus.ftl
Просмотреть файл

@ -6,7 +6,7 @@
# HTML page title
developer-mdnplus-page-title = { -brand-name-firefox-developer-edition }
developer-mdnplus-congrats-you-now-have-latest = Congrats. You now have the latest version of { -brand-name-firefox-browser } { -brand-name-developer-edition }.
developer-mdnplus-congrats-you-now-have-latest = Congrats. You now have the latest version of { -brand-name-firefox } { -brand-name-developer-edition }.
# Main title
developer-mdnplus-more-mdn-your-mdn = More { -brand-name-mdn }. <em>Your</em> { -brand-name-mdn }.

107
media/css/firefox/developer/developer.scss
Просмотреть файл

@ -5,70 +5,44 @@
$image-path: '/media/protocol/img';
@import '~@mozilla-protocol/core/protocol/css/includes/lib';
@import '~@mozilla-protocol/core/protocol/css/components/logos/wordmark';
@import '~@mozilla-protocol/core/protocol/css/components/logos/wordmark-product-developer';
@import 'includes/engage';
@import 'includes/features';
@import 'includes/gallery-grid';
@import 'includes/highlights';
@import 'includes/intro';
@import 'includes/newsletter';
@import 'includes/performance';
@import '~@mozilla-protocol/core/protocol/css/components/card';
@import '~@mozilla-protocol/core/protocol/css/components/emphasis-box';
@import '~@mozilla-protocol/core/protocol/css/components/logos/logo';
@import '~@mozilla-protocol/core/protocol/css/components/logos/logo-product-developer';
@import '~@mozilla-protocol/core/protocol/css/components/newsletter-form';
@import '~@mozilla-protocol/core/protocol/css/components/picto';
@import '~@mozilla-protocol/core/protocol/css/components/section-heading';
@import '~@mozilla-protocol/core/protocol/css/components/split';
@import "~@mozilla-protocol/core/protocol/css/templates/multi-column";
@import '~@mozilla-protocol/core/protocol/css/templates/card-layout';
// *------------------------------------------------------------------*/
// Title and subtitles for entire page
.c-title {
@include text-body-md;
.t-center {
text-align: center;
}
.c-subtitle {
@include text-title-sm;
line-height: $text-title-line-height;
font-weight: bold;
margin-bottom: $spacing-md;
.t-features .mzp-c-section-heading,
.t-features h3 {
padding-bottom: 0;
margin-bottom: 0;
}
.t-highlights & {
@include text-title-xs;
}
// highlights images are non-standard aspect ratio
.t-highlights .mzp-c-card.mzp-has-aspect-16-9 .mzp-c-card-media-wrapper {
padding-bottom: 50.3%;
}
.t-features & {
margin: 0 auto $layout-md;
max-width: $content-lg;
.t-engage .mzp-c-split {
padding-top: 0;
}
br {
@supports (display:grid){
.mzp-l-columns::after {
display: none;
}
}
}
@media #{$mq-md} {
.c-subtitle {
.t-features & {
margin-bottom: $layout-xl;
br {
display: block;
}
}
}
}
// *------------------------------------------------------------------*/
// Padding for page content sections
.t-highlights,
.t-features {
&.mzp-l-content {
padding-top: $layout-md;
padding-bottom: $layout-sm;
@media #{$mq-lg} {
padding-top: $layout-xl;
padding-bottom: $layout-xl;
}
}
}
// index
.show-linux {
display: none;
@ -87,3 +61,30 @@ $image-path: '/media/protocol/img';
.linux .show-linux {
display: block;
}
.intro-feedback-note {
@include text-body-xs;
margin: $spacing-sm auto 0;
max-width: $content-xs;
}
// whats new
.c-docs svg {
vertical-align: middle;
height: 18px;
[dir='rtl'] & {
transform: rotate(180deg);
}
}
// first run
.firefox-developer-firstrun .t-features {
.mzp-l-content {
padding-top: 0;
}
}

57
media/css/firefox/developer/includes/engage.scss
Просмотреть файл

@ -1,57 +0,0 @@
// 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';
$brand-theme: 'firefox';
// *------------------------------------------------------------------*/
// Engagement
.t-engage {
background: #010817;
background: linear-gradient(#09204d, #010817);
color: #fff;
padding-top: $layout-sm;
padding-bottom: $layout-sm;
.mzp-l-content,
.mzp-c-split-container {
max-width: $content-xl;
}
.mzp-c-split {
padding-top: 0;
}
.mzp-l-columns {
row-gap: 0; // uses margin bottom instead of row gap for spacing
.mzp-c-picto {
margin-bottom: $layout-md;
}
}
.mzp-c-picto-heading {
@include text-title-md;
}
@media #{$mq-md} {
padding-top: $layout-lg;
padding-bottom: $layout-lg;
.mzp-l-columns .mzp-c-picto {
margin-bottom: 0;
}
.mzp-c-split-container {
box-sizing: content-box;
}
.mzp-l-split-reversed {
.mzp-c-split-media {
justify-self: start;
}
}
}
}

36
media/css/firefox/developer/includes/features.scss
Просмотреть файл

@ -1,36 +0,0 @@
// 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';
.t-features {
@include text-body-sm;
text-align: center;
}
.c-feature-name {
@include text-title-2xs;
}
.c-feature-img {
margin-bottom: $layout-sm;
}
.c-feature-desc {
margin-bottom: $layout-xs;
}
@media #{$mq-md} {
.t-features {
@include text-body-md;
}
.c-feature-img {
margin-bottom: $layout-sm;
}
.c-feature-desc {
margin-bottom: $layout-xs;
}
}

117
media/css/firefox/developer/includes/gallery-grid.scss
Просмотреть файл

@ -1,117 +0,0 @@
// 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';
// *------------------------------------------------------------------*/
// Gallery grid
.c-gallery-grid {
text-align: center;
}
.c-gallery-item {
display: inline-block;
margin-bottom: $layout-lg;
min-width: 200px;
max-width: 320px;
vertical-align: top;
&:last-child {
margin-bottom: 0;
}
.t-highlights & {
max-width: $content-sm;
}
}
@media #{$mq-sm} {
.c-gallery-grid {
margin-left: $layout-xs * -1;
margin-right: $layout-xs * -1;
}
.c-gallery-item {
margin: 0 $layout-xs $layout-md;
text-align: left;
.t-intro & {
text-align: center;
}
}
}
@media #{$mq-md} {
.c-gallery-grid {
margin-left: $layout-md * -1;
margin-right: $layout-md * -1;
}
.c-gallery-item {
margin: 0 $layout-md $layout-lg;
}
}
@media #{$mq-sm} {
@supports (display: grid) {
.c-gallery-grid {
display: grid;
grid-column-gap: $layout-md;
grid-row-gap: $layout-md;
grid-template-columns: repeat(2, 1fr);
justify-content: center;
justify-items: center;
margin-left: 0;
margin-right: 0;
.t-highlights & {
grid-template-columns: repeat(1, $content-sm);
}
}
.c-gallery-item {
margin: 0;
width: auto;
.t-highlights & {
max-width: 100%;
}
}
}
}
@media #{$mq-md} {
@supports (display: grid) {
.c-gallery-grid {
grid-row-gap: $layout-xl;
grid-template-columns: repeat(auto-fit, minmax(240px, 1fr));
.t-highlights & {
grid-template-columns: repeat(2, 1fr);
}
}
}
}
@media #{$mq-lg} {
@supports (display: grid) {
.c-gallery-grid {
grid-column-gap: $layout-lg;
}
.t-highlights .c-gallery-grid {
grid-column-gap: $layout-xl;
}
}
}
@media #{$mq-xl} {
@supports (display: grid) {
.c-gallery-grid {
grid-column-gap: $layout-xl;
justify-content: space-between;
}
}
}

12
media/css/firefox/developer/includes/highlights.scss
Просмотреть файл

@ -1,12 +0,0 @@
// 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';
// *------------------------------------------------------------------*/
// Engagement
.highlight-image {
margin-bottom: $layout-sm;
}

74
media/css/firefox/developer/includes/intro.scss
Просмотреть файл

@ -1,74 +0,0 @@
// 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';
// *------------------------------------------------------------------*/
// Intro
.t-intro {
text-align: center;
margin-bottom: $layout-sm;
.mzp-l-content {
padding-top: $layout-lg;
}
.mzp-c-wordmark {
margin-left: auto;
margin-right: auto;
}
}
.intro-title {
@include text-title-md;
background-position: top center;
background-repeat: no-repeat;
margin: $layout-sm auto;
max-width: $content-md;
}
.intro-tagline {
@include text-body-lg;
margin: 0 auto $layout-md;
max-width: $content-sm;
.t-home & {
max-width: $content-md;
}
}
.intro-feedback-note {
@include text-body-xs;
margin: $spacing-sm auto 0;
max-width: $content-xs;
}
.intro-image {
background-image: url('/media/img/firefox/developer/hero-background.svg');
background-position: 80% 100%;
background-repeat: no-repeat;
background-size: auto 420px;
height: 420px;
position: relative;
overflow: hidden;
img {
bottom: 0;
height: 337px;
max-width: none;
position: absolute;
right: 0;
}
}
@media #{$mq-lg} {
.intro-image {
img {
left: 50%;
margin-left: -600px;
right: auto;
}
}
}

111
media/css/firefox/developer/includes/newsletter.scss
Просмотреть файл

@ -1,111 +0,0 @@
// 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';
@import '../../../protocol/components/newsletter-form';
// *------------------------------------------------------------------*/
// Newsletter
.t-newsletter {
background: #08204e url('/media/img/firefox/developer/newsletter-bg.svg') center bottom no-repeat;
background-size: cover;
padding: $layout-md $layout-xs;
.mzp-l-content {
background: #fff;
border-radius: $border-radius-md;
box-shadow: $box-shadow-md;
padding-top: $layout-md;
padding-bottom: $layout-md;
min-width: 0;
max-width: $content-sm;
}
.mzp-c-newsletter-content {
margin-bottom: 0;
}
.mzp-c-newsletter-form {
padding-top: 0;
@include font-size(14px);
input[type='email'],
select {
min-width: 0; // https://github.com/mozilla/protocol/issues/607
}
legend {
@include font-size(14px);
}
}
.mzp-c-newsletter-title {
@include font-size(24px);
margin-bottom: $layout-2xs;
}
.mzp-c-newsletter-tagline {
margin-bottom: $layout-sm;
br {
display: none;
}
}
.mzp-c-newsletter-details {
text-align: left;
}
.mzp-c-form-submit {
margin-bottom: 0;
}
.mzp-c-fieldnote {
display: none;
}
.mzp-c-newsletter-thanks {
padding-top: 0;
h3 {
@include font-size(24px);
}
p {
margin-bottom: 0;
}
}
@media #{$mq-md} {
padding: $layout-md $layout-md;
.mzp-l-content {
max-width: $content-xl;
}
.mzp-c-newsletter-form {
display: grid;
grid-column-gap: $layout-md;
grid-template-columns: auto 285px;
}
.mzp-c-newsletter-tagline,
.mzp-c-button {
margin-bottom: 0;
}
}
@media #{$mq-lg} {
.mzp-l-content {
padding-right: $layout-md;
padding-left: $layout-md;
}
.mzp-c-newsletter-form {
grid-column-gap: $layout-lg;
padding-left: 84px + $layout-md; // width of icon
background: url('/media/img/firefox/developer/mail.svg') top left no-repeat;
}
}
}

11
media/css/firefox/developer/includes/performance.scss
Просмотреть файл

@ -1,11 +0,0 @@
// 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/.
.t-performance .mzp-c-split-container {
box-sizing: content-box; // add default split padding to max-width
max-width: $content-sm;
@media #{$mq-lg} {
max-width: $content-max;
}
}

15
media/img/firefox/developer/feature-console.svg
Просмотреть файл

@ -1 +1,14 @@
<svg width="182" height="124" viewBox="0 0 182 124" xmlns="http://www.w3.org/2000/svg"><g fill="none" fill-rule="evenodd"><path fill="#FF8A50" d="M3 1h177v31H3z"/><path d="M168.1 121.5H13.9c-6 0-10.9-4.9-10.9-10.9V2.5h176v108.1c0 6-4.9 10.9-10.9 10.9zM4.396 31.8h171.822" stroke="#592ACB" stroke-width="5" stroke-linecap="round" stroke-linejoin="round"/><g transform="translate(13 13)" fill="#592ACB"><circle cx="4.2" cy="4.1" r="3.5"/><circle cx="18.3" cy="4.1" r="3.5"/><circle cx="32.4" cy="4.1" r="3.5"/></g><path d="M24.6 50.5h56.6M90.6 50.5h67.1M24.6 65.2h75.3M107.4 65.2h32.5" stroke="#592ACB" stroke-width="5" stroke-linecap="round" stroke-linejoin="round"/><path d="M41.8 105.1h17.6M24.6 83.8l10.6 10.7-10.6 10.6" stroke="#952BB9" stroke-width="5" stroke-linecap="round" stroke-linejoin="round"/></g></svg>
<?xml version="1.0" encoding="utf-8"?>
<svg width="182" height="124" viewBox="0 0 182 124" xmlns="http://www.w3.org/2000/svg">
<g fill="none" fill-rule="evenodd">
<path d="M3 1h177v31H3z" style="fill: rgb(0, 128, 255);"/>
<path d="M168.1 121.5H13.9c-6 0-10.9-4.9-10.9-10.9V2.5h176v108.1c0 6-4.9 10.9-10.9 10.9zM4.396 31.8h171.822" stroke-width="5" stroke-linecap="round" stroke-linejoin="round" style="stroke: rgb(0, 128, 255);"/>
<g transform="translate(13 13)" fill="#592ACB">
<circle cx="4.2" cy="4.1" r="3.5" style="fill: rgb(255, 255, 255);"/>
<circle cx="18.3" cy="4.1" r="3.5" style="fill: rgb(255, 255, 255);"/>
<circle cx="32.4" cy="4.1" r="3.5" style="fill: rgb(255, 255, 255);"/>
</g>
<path d="M24.6 50.5h56.6M90.6 50.5h67.1M24.6 65.2h75.3M107.4 65.2h32.5" stroke-width="5" stroke-linecap="round" stroke-linejoin="round" style="stroke: rgb(1, 199, 216);"/>
<path d="M41.8 105.1h17.6M24.6 83.8l10.6 10.7-10.6 10.6" stroke-width="5" stroke-linecap="round" stroke-linejoin="round" style="stroke: rgb(28, 33, 66);"/>
</g>
</svg>

Режим "рядом" Свайп Оверлей

До

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

После

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

12
media/img/firefox/developer/feature-debugger.svg
Просмотреть файл

@ -1 +1,11 @@
<svg width="202" height="110" viewBox="0 0 202 110" xmlns="http://www.w3.org/2000/svg"><g stroke-width="5" fill="none" fill-rule="evenodd" stroke-linecap="round" stroke-linejoin="round"><path stroke="#592ACB" d="M28.1 37h20.4V16.7M82.7 21.3l14.4 14.4 14.4-14.4"/><path d="M2.7 84.4h196.6M2.7 107.1h159.5" stroke="#952BB9"/><path d="M2.7 54.8h17M75.8 54.8h17.1M101.3 54.8h17.1M136 54.8h17.1M161.6 54.8h17M6.4 31.2L24.5 13l24 24.1M71.5 2.9h25.6v31.6M177.3 32.8l14.4-14.4L177.3 4" stroke="#592ACB"/><path stroke="#592ACB" d="M190.4 18.4h-31.6V44"/></g></svg>
<?xml version="1.0" encoding="utf-8"?>
<svg width="202" height="110" viewBox="0 0 202 110" xmlns="http://www.w3.org/2000/svg">
<g stroke-width="5" fill="none" fill-rule="evenodd" stroke-linecap="round" stroke-linejoin="round">
<path d="M28.1 37h20.4V16.7M82.7 21.3l14.4 14.4 14.4-14.4" style="stroke: rgb(0, 128, 255);"/>
<path d="M2.7 54.8h17M75.8 54.8h17.1M101.3 54.8h17.1M136 54.8h17.1M161.6 54.8h17M6.4 31.2L24.5 13l24 24.1M71.5 2.9h25.6v31.6M177.3 32.8l14.4-14.4L177.3 4" style="stroke: rgb(0, 128, 255);"/>
<path d="M190.4 18.4h-31.6V44" style="stroke: rgb(0, 128, 255);"/>
<path d="M 197.997 82.263 L 2.997 82.263 C 1.072 82.263 -0.13 84.347 0.832 86.013 C 1.278 86.787 2.104 87.263 2.997 87.263 L 197.997 87.263 C 199.921 87.263 201.124 85.18 200.162 83.513 C 199.715 82.74 198.89 82.263 197.997 82.263 Z" fill="#00C7D8"/>
<path d="M 57.227 104.493 L 2.997 104.493 C 1.072 104.493 -0.13 106.577 0.832 108.243 C 1.278 109.017 2.104 109.493 2.997 109.493 L 57.227 109.493 C 59.151 109.493 60.354 107.41 59.392 105.743 C 58.945 104.97 58.12 104.493 57.227 104.493 Z" fill="#0080FF"/>
<path d="M 115.647 104.493 L 75.277 104.493 C 73.352 104.493 72.15 106.577 73.112 108.243 C 73.558 109.017 74.384 109.493 75.277 109.493 L 115.647 109.493 C 117.571 109.493 118.774 107.41 117.812 105.743 C 117.365 104.97 116.54 104.493 115.647 104.493 Z" fill="#1C2142"/>
</g>
</svg>

Режим "рядом" Свайп Оверлей

До

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

После

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

16
media/img/firefox/developer/feature-inspector.svg
Просмотреть файл

@ -1 +1,15 @@
<svg width="202" height="124" viewBox="0 0 202 124" xmlns="http://www.w3.org/2000/svg"><g stroke-width="5" fill="none" fill-rule="evenodd" stroke-linecap="round" stroke-linejoin="round"><g stroke="#592ACB"><path d="M33.3 2.8V119M163.3 2.8v55.4"/></g><g stroke="#592ACB"><path d="M2.5 22.4h191.7M2.5 99.5h91.1"/></g><path stroke="#592ACB" d="M93.6 99.5H33.3V22.4h130v34.9"/><path stroke="#592ACB" d="M93.1 84.7h-45V37.2h100.4v19.9"/><path d="M182.6 121.2H111c-9.3 0-16.9-7.6-16.9-16.9V58.2h88.5c9.3 0 16.9 7.6 16.9 16.9v29.2c0 9.3-7.6 16.9-16.9 16.9z" stroke="#592ACB" fill="#FF8A50"/><path d="M112.1 76.6h73.5M112.1 89.7h73.5M112.1 102.8h73.5" stroke="#952BB9"/></g></svg>
<?xml version="1.0" encoding="utf-8"?>
<svg width="202" height="124" viewBox="0 0 202 124" xmlns="http://www.w3.org/2000/svg">
<g stroke-width="5" fill="none" fill-rule="evenodd" stroke-linecap="round" stroke-linejoin="round">
<g stroke="#592ACB">
<path d="M33.3 2.8V119M163.3 2.8v55.4" style="stroke: rgb(0, 128, 255);"/>
</g>
<g stroke="#592ACB">
<path d="M2.5 22.4h191.7M2.5 99.5h91.1" style="stroke: rgb(0, 128, 255);"/>
</g>
<path d="M93.6 99.5H33.3V22.4h130v34.9" style="stroke: rgb(0, 128, 255);"/>
<path d="M93.1 84.7h-45V37.2h100.4v19.9" style="stroke: rgb(0, 128, 255); fill: rgb(0, 128, 255);"/>
<path d="M182.6 121.2H111c-9.3 0-16.9-7.6-16.9-16.9V58.2h88.5c9.3 0 16.9 7.6 16.9 16.9v29.2c0 9.3-7.6 16.9-16.9 16.9z" style="stroke: rgb(28, 33, 66); fill: rgb(28, 33, 66);"/>
<path d="M112.1 76.6h73.5M112.1 89.7h73.5M112.1 102.8h73.5" style="stroke: rgb(0, 199, 216);"/>
</g>
</svg>

Режим "рядом" Свайп Оверлей

До

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

После

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

23
media/img/firefox/developer/feature-memory.svg
Просмотреть файл

@ -1 +1,22 @@
<svg width="116" height="124" viewBox="0 0 116 124" xmlns="http://www.w3.org/2000/svg"><g stroke-width="5" fill="none" fill-rule="evenodd" stroke-linecap="round" stroke-linejoin="round"><g stroke="#FF8A50"><path d="M30.6 100.2v6.8M48.8 100.2v6.8M67 100.2v6.8M85.3 100.2v6.8"/></g><g stroke="#FF8A50"><path d="M44.3 23.6v6.8M58 23.6v6.8M71.7 23.6v6.8"/><g><path d="M44.3 77.5v6.8M58 77.5v6.8M71.7 77.5v6.8"/></g><g><path d="M27.2 68.5H34M27.2 54.8H34M27.2 41.1H34"/></g><g><path d="M83.4 68.5h6.8M83.4 54.8h6.8M83.4 41.1h6.8"/></g></g><path d="M112.6 116.4c0 2.7-2.2 4.9-4.9 4.9H8.3c-2.7 0-4.9-2.2-4.9-4.9v-50c4.8-2.1 8.1-6.9 8.1-12.5S8.2 43.5 3.4 41.4V7.5c0-2.7 2.2-4.9 4.9-4.9h99.3c2.7 0 4.9 2.2 4.9 4.9v33.9c-4.8 2.1-8.1 6.9-8.1 12.5s3.3 10.4 8.1 12.5v50h.1z" stroke="#592ACB"/><path d="M78.9 76.6H38.5c-2.5 0-4.5-2-4.5-4.5V35.8c0-2.5 2-4.5 4.5-4.5h40.4c2.5 0 4.5 2 4.5 4.5v36.3c0 2.5-2.1 4.5-4.5 4.5z" stroke="#952BB9" fill="#FF8A50"/></g></svg>
<?xml version="1.0" encoding="utf-8"?>
<svg width="116" height="124" viewBox="0 0 116 124" xmlns="http://www.w3.org/2000/svg">
<g stroke-width="5" fill="none" fill-rule="evenodd" stroke-linecap="round" stroke-linejoin="round">
<g stroke="#FF8A50">
<path d="M30.6 100.2v6.8M48.8 100.2v6.8M67 100.2v6.8M85.3 100.2v6.8" style="stroke: rgb(0, 199, 216);"/>
</g>
<g stroke="#FF8A50">
<path d="M44.3 23.6v6.8M58 23.6v6.8M71.7 23.6v6.8" style="stroke: rgb(0, 34, 169);"/>
<g>
<path d="M44.3 77.5v6.8M58 77.5v6.8M71.7 77.5v6.8" style="stroke: rgb(0, 34, 169);"/>
</g>
<g>
<path d="M27.2 68.5H34M27.2 54.8H34M27.2 41.1H34" style="stroke: rgb(0, 34, 169);"/>
</g>
<g>
<path d="M83.4 68.5h6.8M83.4 54.8h6.8M83.4 41.1h6.8" style="stroke: rgb(0, 34, 169);"/>
</g>
</g>
<path d="M112.6 116.4c0 2.7-2.2 4.9-4.9 4.9H8.3c-2.7 0-4.9-2.2-4.9-4.9v-50c4.8-2.1 8.1-6.9 8.1-12.5S8.2 43.5 3.4 41.4V7.5c0-2.7 2.2-4.9 4.9-4.9h99.3c2.7 0 4.9 2.2 4.9 4.9v33.9c-4.8 2.1-8.1 6.9-8.1 12.5s3.3 10.4 8.1 12.5v50h.1z" style="stroke: rgb(0, 128, 255);"/>
<path d="M78.9 76.6H38.5c-2.5 0-4.5-2-4.5-4.5V35.8c0-2.5 2-4.5 4.5-4.5h40.4c2.5 0 4.5 2 4.5 4.5v36.3c0 2.5-2.1 4.5-4.5 4.5z" style="stroke: rgb(0, 34, 169); fill: rgb(255, 255, 255);"/>
</g>
</svg>

Режим "рядом" Свайп Оверлей

До

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

После

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

12
media/img/firefox/developer/feature-network.svg
Просмотреть файл

@ -1 +1,11 @@
<svg width="202" height="108" viewBox="0 0 202 108" xmlns="http://www.w3.org/2000/svg"><g stroke-width="5" fill="none" fill-rule="evenodd" stroke-linecap="round" stroke-linejoin="round"><path d="M2.5 15.2h190.4" stroke="#952BB9"/><path d="M2.5 53h82.7M107.6 53h46.7M69.7 80.5h129.8M140.8 105.2h41.3" stroke="#592ACB"/><path d="M17.9 2.8v24.7M72.4 2.8v24.7M126.3 2.8v24.7M180.2 2.8v24.7" stroke="#FF8A50"/></g></svg>
<?xml version="1.0" encoding="utf-8"?>
<svg width="202" height="108" viewBox="0 0 202 108" xmlns="http://www.w3.org/2000/svg">
<g stroke-width="5" fill="none" fill-rule="evenodd" stroke-linecap="round" stroke-linejoin="round">
<path d="M 2.5 15.2 L 198.9 15.2" style="stroke: rgb(3, 21, 55);"/>
<path d="M17.9 2.8v24.7M72.4 2.8v24.7M126.3 2.8v24.7M180.2 2.8v24.7" style="stroke: rgb(3, 21, 55);"/>
<path d="M 85.894 50.733 L 2.824 50.733 C 0.9 50.733 -0.303 52.816 0.659 54.483 C 1.106 55.257 1.931 55.733 2.824 55.733 L 85.894 55.733 C 87.819 55.733 89.021 53.65 88.059 51.983 C 87.613 51.21 86.787 50.733 85.894 50.733 Z" fill="#0080FF"/>
<path d="M 197.904 102.733 L 140.824 102.733 C 138.9 102.733 137.697 104.816 138.659 106.483 C 139.106 107.257 139.931 107.733 140.824 107.733 L 197.904 107.733 C 199.829 107.733 201.031 105.65 200.069 103.983 C 199.623 103.21 198.797 102.733 197.904 102.733 Z" fill="#00C7D8"/>
<path d="M 155.904 50.733 L 107.824 50.733 C 105.9 50.733 104.697 52.816 105.659 54.483 C 106.106 55.257 106.931 55.733 107.824 55.733 L 155.904 55.733 C 157.829 55.733 159.031 53.65 158.069 51.983 C 157.623 51.21 156.797 50.733 155.904 50.733 Z" fill="#0080FF"/>
<path fill-rule="evenodd" d="M 67.324 80.233 C 67.324 78.848 68.449 77.728 69.834 77.733 L 197.614 77.733 C 199.539 77.733 200.741 79.816 199.779 81.483 C 199.333 82.257 198.507 82.733 197.614 82.733 L 69.834 82.733 C 68.449 82.739 67.324 81.618 67.324 80.233 Z" fill="#1C2142"/>
</g>
</svg>

Режим "рядом" Свайп Оверлей

До

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

После

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

20
media/img/firefox/developer/feature-performance.svg
Просмотреть файл

@ -1 +1,19 @@
<svg width="202" height="124" viewBox="0 0 202 124" xmlns="http://www.w3.org/2000/svg"><g fill="none" fill-rule="evenodd"><g transform="translate(2 2)"><path fill="#FF8A50" d="M0 0h177v29H0z"/><path d="M104.1 119.3H11.8c-6 0-10.9-4.9-10.9-10.9V.7h175.5v53.5M.9 29.9h175.5" stroke="#592ACB" stroke-width="5" stroke-linecap="round" stroke-linejoin="round"/><g transform="translate(11 11)" fill="#592ACB"><circle cx="4" cy="4.3" r="3.5"/><circle cx="18.1" cy="4.3" r="3.5"/><circle cx="32.2" cy="4.3" r="3.5"/></g><path d="M105.1 119.3c-4.3-7.3-6.8-15.9-6.8-25 0-27.3 22.1-49.4 49.4-49.4 27.3 0 49.4 22.1 49.4 49.4 0 9-2.4 17.4-6.6 24.7-.1.1-.1.2-.2.3h-85.2zM21.5 46.9H73M21.5 65.6h66.7M21.5 86.5h50.6" stroke="#592ACB" stroke-width="5" stroke-linecap="round" stroke-linejoin="round"/><circle stroke="#952BB9" stroke-width="5" stroke-linecap="round" stroke-linejoin="round" cx="147.7" cy="94.4" r="13"/></g><path d="M149.7 64v9.1" stroke="#20123A" stroke-width="5" stroke-linecap="round" stroke-linejoin="round"/><path d="M126.8 73.5l6.4 6.4M117.3 96.4h9.1M172.6 73.5l-22.9 22.9M149.7 64v9.1" stroke="#952BB9" stroke-width="5" stroke-linecap="round" stroke-linejoin="round"/><path d="M83.6 48.9h21.7" stroke="#592ACB" stroke-width="5" stroke-linecap="round" stroke-linejoin="round"/></g></svg>
<?xml version="1.0" encoding="utf-8"?>
<svg width="202" height="124" viewBox="0 0 202 124" xmlns="http://www.w3.org/2000/svg">
<g fill="none" fill-rule="evenodd">
<g transform="translate(2 2)">
<path d="M0 0h177v29H0z" style="fill: rgb(0, 128, 255);"/>
<path d="M 99.806 109.249 L 11.8 109.3 C 5.8 109.3 0.9 104.4 0.9 98.4 L 0.9 0.7 L 176.4 0.7 L 176.4 54.2 M 0.9 29.9 L 176.4 29.9" stroke-width="5" stroke-linecap="round" stroke-linejoin="round" style="stroke: rgb(0, 128, 255);"/>
<g transform="translate(11 11)" fill="#592ACB">
<circle cx="4" cy="4.3" r="3.5" style="fill: rgb(255, 255, 255);"/>
<circle cx="18.1" cy="4.3" r="3.5" style="fill: rgb(255, 255, 255);"/>
<circle cx="32.2" cy="4.3" r="3.5" style="fill: rgb(255, 255, 255);"/>
</g>
<path d="M 105.1 119.3 C 100.8 112 98.3 103.4 98.3 94.3 C 98.3 74.346 110.107 57.17 127.121 49.371 C 133.384 46.5 140.354 44.9 147.7 44.9 C 175 44.9 197.1 67 197.1 94.3 C 197.1 103.3 194.7 111.7 190.5 119 C 190.4 119.1 190.4 119.2 190.3 119.3 L 105.1 119.3 L 105.1 119.3 Z M 21.5 46.9 L 73 46.9 M 21.5 65.6 L 88.2 65.6 M 21.5 86.5 L 72.1 86.5" stroke-width="5" stroke-linecap="round" stroke-linejoin="round" style="stroke: rgb(0, 199, 216);"/>
<circle stroke-width="5" stroke-linecap="round" stroke-linejoin="round" cx="147.7" cy="94.4" r="13" style="stroke: rgb(0, 34, 169);"/>
</g>
<path d="M149.7 64v9.1" stroke="#20123A" stroke-width="5" stroke-linecap="round" stroke-linejoin="round"/>
<path d="M126.8 73.5l6.4 6.4M117.3 96.4h9.1M172.6 73.5l-22.9 22.9M149.7 64v9.1" stroke-width="5" stroke-linecap="round" stroke-linejoin="round" style="stroke: rgb(19, 126, 255);"/>
<path d="M83.6 48.9h21.7" stroke-width="5" stroke-linecap="round" stroke-linejoin="round" style="stroke: rgb(0, 199, 216);"/>
</g>
</svg>

Режим "рядом" Свайп Оверлей

До

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

После

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

22
media/img/firefox/developer/feature-responsive-mode.svg
Просмотреть файл

@ -1 +1,21 @@
<svg width="194" height="124" viewBox="0 0 194 124" xmlns="http://www.w3.org/2000/svg"><g transform="translate(2 2)" fill="none" fill-rule="evenodd"><path fill="#FF8A50" d="M0 0h160v27H0z"/><path d="M129.2 107.9H10.4c-5.4 0-9.8-4.4-9.8-9.8V.6h158.6V18M.6 27.1H128" stroke="#592ACB" stroke-width="5" stroke-linecap="round" stroke-linejoin="round"/><g transform="translate(10 10)" fill="#592ACB"><circle cx="3.3" cy="3.9" r="3.2"/><circle cx="16.1" cy="3.9" r="3.2"/><circle cx="28.8" cy="3.9" r="3.2"/></g><path d="M186 119.4h-53.3c-1.9 0-3.4-1.6-3.4-3.4V21.4c0-1.9 1.6-3.4 3.4-3.4H186c1.9 0 3.4 1.6 3.4 3.4v94.5c0 1.9-1.5 3.5-3.4 3.5z" fill="#FFF"/><path d="M129 89h61v30h-61z"/><path d="M186 119.4h-53.3c-1.9 0-3.4-1.6-3.4-3.4V21.4c0-1.9 1.6-3.4 3.4-3.4H186c1.9 0 3.4 1.6 3.4 3.4v94.5c0 1.9-1.5 3.5-3.4 3.5z" stroke="#592ACB" stroke-width="5" stroke-linecap="round" stroke-linejoin="round"/><path d="M19.1 42.5h46.7M79.5 42.5h33.4M19.1 59.4h78.3M19.1 78.2h87.6" stroke="#952BB9" stroke-width="5" stroke-linecap="round" stroke-linejoin="round"/><circle stroke="#592ACB" stroke-width="5" fill="#FF8A50" stroke-linecap="round" stroke-linejoin="round" cx="159.2" cy="104.1" r="5.8"/><g stroke="#952BB9" stroke-linecap="round" stroke-linejoin="round" stroke-width="5"><path d="M139 36h19.3M166.7 36h12.6M139 53.2h31.9M139 71.7h40.4"/></g><path d="M132.5 89.7h56" stroke="#592ACB" stroke-width="5" stroke-linecap="round" stroke-linejoin="round"/></g></svg>
<?xml version="1.0" encoding="utf-8"?>
<svg width="194" height="124" viewBox="0 0 194 124" xmlns="http://www.w3.org/2000/svg">
<g transform="translate(2 2)" fill="none" fill-rule="evenodd">
<path d="M0 0h160v27H0z" style="fill: rgb(0, 128, 255);"/>
<path d="M129.2 107.9H10.4c-5.4 0-9.8-4.4-9.8-9.8V.6h158.6V18M.6 27.1H128" stroke-width="5" stroke-linecap="round" stroke-linejoin="round" style="stroke: rgb(0, 128, 255);"/>
<g transform="translate(10 10)" fill="#592ACB">
<circle cx="3.3" cy="3.9" r="3.2" style="fill: rgb(255, 255, 255);"/>
<circle cx="16.1" cy="3.9" r="3.2" style="fill: rgb(255, 255, 255);"/>
<circle cx="28.8" cy="3.9" r="3.2" style="fill: rgb(255, 255, 255);"/>
</g>
<path d="M186 119.4h-53.3c-1.9 0-3.4-1.6-3.4-3.4V21.4c0-1.9 1.6-3.4 3.4-3.4H186c1.9 0 3.4 1.6 3.4 3.4v94.5c0 1.9-1.5 3.5-3.4 3.5z" fill="#FFF"/>
<path d="M129 89h61v30h-61z"/>
<path d="M186 119.4h-53.3c-1.9 0-3.4-1.6-3.4-3.4V21.4c0-1.9 1.6-3.4 3.4-3.4H186c1.9 0 3.4 1.6 3.4 3.4v94.5c0 1.9-1.5 3.5-3.4 3.5z" stroke-width="5" stroke-linecap="round" stroke-linejoin="round" style="stroke: rgb(14, 89, 225);"/>
<path d="M19.1 42.5h46.7M79.5 42.5h33.4M19.1 59.4h78.3M19.1 78.2h87.6" stroke-width="5" stroke-linecap="round" stroke-linejoin="round" style="stroke: rgb(0, 199, 216);"/>
<circle stroke-width="5" stroke-linecap="round" stroke-linejoin="round" cx="159.2" cy="104.1" r="5.8" style="stroke: rgb(14, 89, 225); fill: rgb(0, 128, 255);"/>
<g stroke="#952BB9" stroke-linecap="round" stroke-linejoin="round" stroke-width="5">
<path d="M139 36h19.3M166.7 36h12.6M139 53.2h31.9M139 71.7h40.4" style="stroke: rgb(1, 199, 216);"/>
</g>
<path d="M132.5 89.7h56" stroke-width="5" stroke-linecap="round" stroke-linejoin="round" style="stroke: rgb(14, 89, 225);"/>
</g>
</svg>

Режим "рядом" Свайп Оверлей

До

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

После

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

16
media/img/firefox/developer/feature-storage.svg
Просмотреть файл

@ -1 +1,15 @@
<svg width="134" height="124" viewBox="0 0 134 124" xmlns="http://www.w3.org/2000/svg"><g transform="translate(3 2)" stroke-width="5" fill="none" fill-rule="evenodd" stroke-linecap="round" stroke-linejoin="round"><g stroke="#952BB9"><path d="M14.1 34.1v8.6M113.9 34v8.7"/></g><g stroke="#952BB9"><path d="M14.1 76.9v9M113.9 76.9v9"/></g><circle stroke="#592ACB" fill="#FF8A50" cx="21.2" cy="17.2" r="5.2"/><circle stroke="#592ACB" fill="#FF8A50" cx="21.2" cy="60" r="5.2"/><circle stroke="#592ACB" fill="#FF8A50" cx="21.2" cy="102.8" r="5.2"/><path stroke="#592ACB" d="M.1.7h127.8v33H.1zM.1 43.5h127.8v33H.1zM.1 86.4h127.8v33H.1z"/></g></svg>
<?xml version="1.0" encoding="utf-8"?>
<svg width="134" height="124" viewBox="0 0 134 124" xmlns="http://www.w3.org/2000/svg">
<g transform="translate(3 2)" stroke-width="5" fill="none" fill-rule="evenodd" stroke-linecap="round" stroke-linejoin="round">
<g stroke="#952BB9">
<path d="M14.1 34.1v8.6M113.9 34v8.7" style="stroke: rgb(19, 126, 255);"/>
</g>
<g stroke="#952BB9">
<path d="M14.1 76.9v9M113.9 76.9v9" style="stroke: rgb(19, 126, 255);"/>
</g>
<circle cx="21.2" cy="17.2" r="5.2" style="fill: rgb(1, 34, 169); stroke: rgb(0, 199, 216);"/>
<circle cx="21.2" cy="60" r="5.2" style="fill: rgb(1, 34, 169); stroke: rgb(0, 199, 216);"/>
<circle cx="21.2" cy="102.8" r="5.2" style="fill: rgb(1, 34, 169); stroke: rgb(0, 199, 216);"/>
<path d="M.1.7h127.8v33H.1zM.1 43.5h127.8v33H.1zM.1 86.4h127.8v33H.1z" style="stroke: rgb(0, 34, 169);"/>
</g>
</svg>

Режим "рядом" Свайп Оверлей

До

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

После

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

10
media/img/firefox/developer/feature-style-editor.svg
Просмотреть файл

@ -1 +1,9 @@
<svg width="126" height="124" viewBox="0 0 126 124" xmlns="http://www.w3.org/2000/svg"><g stroke-width="5" fill="none" fill-rule="evenodd" stroke-linecap="round" stroke-linejoin="round"><path stroke="#592ACB" d="M97 49.3v71.9H2.6V26.8h76.7"/><path stroke="#592ACB" d="M72.1 74.2v22.1H27.5V51.7h26.7"/><path d="M107.3 39.1L77.2 69.2l-8.1 8.1-21.9 4.6c-1.7.4-3.2-1.1-2.9-2.9l4.3-21.7L58 48l29.1-29.1" stroke="#952BB9" fill="#FF8A50"/><path d="M79.3 11.2L115 46.8M91.7 23.6L111 4.3c2-2 5.4-2 7.4 0l3.4 3.4c2 2 2 5.4 0 7.4l-19.3 19.3" stroke="#592ACB"/></g></svg>
<?xml version="1.0" encoding="utf-8"?>
<svg width="126" height="124" viewBox="0 0 126 124" xmlns="http://www.w3.org/2000/svg">
<g stroke-width="5" fill="none" fill-rule="evenodd" stroke-linecap="round" stroke-linejoin="round">
<path d="M97 49.3v71.9H2.6V26.8h76.7" style="stroke: rgb(17, 126, 255);"/>
<path d="M72.1 74.2v22.1H27.5V51.7h26.7" style="fill: rgb(0, 199, 216); stroke: rgb(17, 126, 255);"/>
<path d="M107.3 39.1L77.2 69.2l-8.1 8.1-21.9 4.6c-1.7.4-3.2-1.1-2.9-2.9l4.3-21.7L58 48l29.1-29.1" style="fill: rgb(0, 199, 216); stroke: rgb(0, 34, 169);"/>
<path d="M79.3 11.2L115 46.8M91.7 23.6L111 4.3c2-2 5.4-2 7.4 0l3.4 3.4c2 2 2 5.4 0 7.4l-19.3 19.3" style="stroke: rgb(0, 34, 169);"/>
</g>
</svg>

Режим "рядом" Свайп Оверлей

До

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

После

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

20
media/img/firefox/developer/feature-visual-editing.svg
Просмотреть файл

@ -1 +1,19 @@
<svg width="112" height="124" viewBox="0 0 112 124" xmlns="http://www.w3.org/2000/svg"><g stroke-width="5" fill="none" fill-rule="evenodd" stroke-linecap="round" stroke-linejoin="round"><path d="M3.2 84.3l105.6-44.6" stroke="#FF8A50"/><g stroke="#952BB9"><g transform="translate(3 13)"><circle fill="#FF8A50" cx="10.3" cy="10.5" r="10"/><path d="M20.6 10.5h32.5"/></g><g transform="translate(55 90)"><circle fill="#FF8A50" cx="42.8" cy="10.5" r="10"/><path d="M32.5 10.5H0"/></g></g><g stroke="#592ACB"><path d="M108.8 2.8v14.6M3.2 106.6v14.6M108.8 9.8C96.6 11.5 84.5 12.2 71 26.1c-25.1 25.8-4.8 45.5-29.8 71.3-13.5 13.9-25.7 14.6-38 16.3"/></g></g></svg>
<?xml version="1.0" encoding="utf-8"?>
<svg width="112" height="124" viewBox="0 0 112 124" xmlns="http://www.w3.org/2000/svg">
<g stroke-width="5" fill="none" fill-rule="evenodd" stroke-linecap="round" stroke-linejoin="round">
<path d="M3.2 84.3l105.6-44.6" style="stroke: rgb(0, 199, 216);"/>
<g stroke="#952BB9">
<g transform="translate(3 13)">
<circle cx="10.3" cy="10.5" r="10" style="stroke: rgb(0, 34, 169);"/>
<path d="M20.6 10.5h32.5" style="stroke: rgb(0, 34, 169);"/>
</g>
<g transform="translate(55 90)">
<circle cx="42.8" cy="10.5" r="10" style="stroke: rgb(0, 34, 169);"/>
<path d="M32.5 10.5H0" style="stroke: rgb(0, 34, 169);"/>
</g>
</g>
<g stroke="#592ACB">
<path d="M108.8 2.8v14.6M3.2 106.6v14.6M108.8 9.8C96.6 11.5 84.5 12.2 71 26.1c-25.1 25.8-4.8 45.5-29.8 71.3-13.5 13.9-25.7 14.6-38 16.3" style="stroke: rgb(0, 128, 255);"/>
</g>
</g>
</svg>

Режим "рядом" Свайп Оверлей

До

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

После

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

10
media/img/firefox/developer/mail.svg
Просмотреть файл

@ -1 +1,9 @@
<svg width="84" height="87" viewBox="0 0 84 87" xmlns="http://www.w3.org/2000/svg"><g fill="none" fill-rule="evenodd"><path fill="#9059FF" d="M84 43.011L70 47V28zM0 43.011L14 47V28z"/><path d="M70 65H14V5.5C14 2.461 16.397 0 19.356 0h45.288C67.604 0 70 2.461 70 5.5V65z" fill="#FFBD4F"/><path d="M81.342 42.194c1.255-.563 2.658.37 2.658 1.77v40.278C84 85.765 82.394 87 80.438 87H3.562C1.606 87 0 85.751 0 84.242V43.923c0-1.386 1.403-2.32 2.658-1.757L42.02 59.787l39.322-17.593z" fill="#E31587"/><path d="M22 12h41M22 22h41M22 32h41" stroke="#AC29CC" stroke-width="4" stroke-linecap="round"/></g></svg>
<?xml version="1.0" encoding="utf-8"?>
<svg width="84" height="87" viewBox="0 0 84 87" xmlns="http://www.w3.org/2000/svg">
<g fill="none" fill-rule="evenodd">
<path d="M84 43.011L70 47V28zM0 43.011L14 47V28z" style="fill: rgb(14, 89, 225);"/>
<path d="M70 65H14V5.5C14 2.461 16.397 0 19.356 0h45.288C67.604 0 70 2.461 70 5.5V65z" style="fill: rgb(1, 199, 216);"/>
<path d="M81.342 42.194c1.255-.563 2.658.37 2.658 1.77v40.278C84 85.765 82.394 87 80.438 87H3.562C1.606 87 0 85.751 0 84.242V43.923c0-1.386 1.403-2.32 2.658-1.757L42.02 59.787l39.322-17.593z" style="fill: rgb(0, 128, 255);"/>
<path d="M22 12h41M22 22h41M22 32h41" stroke-width="4" stroke-linecap="round" style="stroke: rgb(3, 21, 55);"/>
</g>
</svg>

Режим "рядом" Свайп Оверлей

До

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

После

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

19
media/img/logos/mdn/mdn-wordmark-white.svg Normal file
Просмотреть файл

@ -0,0 +1,19 @@
<?xml version="1.0" encoding="utf-8"?>
<svg id="mdn-logo" x="0px" y="0px" viewBox="0 0 361 104.2" xmlns="http://www.w3.org/2000/svg">
<style type="text/css">
.logo-m{fill:#1870f0;}
.logo-text{fill:#15141a;}
</style>
<g class="logo-m">
<path d="M40.3,0L11.7,92.1H0L28.5,0H40.3z"/>
<path d="M50.7,0v92.1H40.3V0H50.7z"/>
<path d="M101.4,0v92.1H91V0H101.4z"/>
<path d="M91,0L62.5,92.1H50.8L79.3,0H91z"/>
<path d="M294,95.4h67v8.8h-67V95.4z"/>
</g>
<g class="logo-text">
<path d="M198.7,72.8h-17.1v-5.5h3.8V51.5c0-3.7-0.7-6.3-2.1-7.9c-1.4-1.6-3.3-2.3-5.7-2.3c-3.2,0-5.6,1.1-7.2,3.4 s-2.4,4.6-2.5,6.9v15.6h6v5.5h-17.1v-5.5h3.8V51.5c0-3.8-0.7-6.4-2.1-7.9c-1.4-1.5-3.3-2.3-5.6-2.3c-3.2,0-5.5,1.1-7.2,3.3 c-1.6,2.2-2.4,4.5-2.5,6.9v15.8h6.9v5.5h-20.2v-5.5h6V42h-6.1v-5.6h13.4v6.4c1.2-2.1,2.7-3.8,4.7-5.2c2-1.3,4.4-2,7.3-2 c2.8,0,5.3,0.7,7.5,2.1c2.2,1.4,3.7,3.5,4.5,6.4c1.1-2.5,2.7-4.5,4.9-6.1c2.2-1.6,4.8-2.4,7.9-2.4c3.5,0,6.5,1.1,8.9,3.3 c2.4,2.2,3.7,5.6,3.7,10.2v18.2h6.1V72.8z" style="fill: rgb(255, 255, 255);"/>
<path d="M241.2,72.8h-13.2v-7.2c-1.2,2.2-2.8,4.1-4.9,5.6c-2.1,1.6-4.8,2.4-8.3,2.4c-4.8,0-8.7-1.6-11.6-4.9 c-2.9-3.2-4.3-7.7-4.3-13.3c0-5,1.3-9.6,4-13.7c2.6-4.1,6.9-6.2,12.8-6.2c5.7,0,9.8,2.2,12.3,6.5V22.3h-8.6v-5.6h15.8v50.6h6 V72.8z M227.9,56v-4.4c-0.1-3-1.2-5.5-3.2-7.3c-2-1.8-4.4-2.8-7.2-2.8c-3.6,0-6.3,1.3-8.2,3.9c-1.9,2.6-2.8,5.8-2.8,9.6 c0,4.1,1,7.3,3,9.5c2,2.2,4.5,3.3,7.4,3.3c3.2,0,5.8-1.3,7.8-3.8C226.8,61.4,227.8,58.7,227.9,56z" style="fill: rgb(255, 255, 255);"/>
<path d="M286.4,72.8h-19.3v-5.5h6V51.5c0-3.7-0.7-6.3-2.2-7.9c-1.4-1.6-3.4-2.3-5.7-2.3c-3.1,0-5.6,1-7.4,3c-1.8,2-2.8,4.4-2.9,7 v15.9h6v5.5h-19.3v-5.5h6V42h-6.2v-5.6h13.6v6.2c2.6-4.6,6.8-6.9,12.7-6.9c3.6,0,6.7,1.1,9.2,3.3c2.5,2.2,3.7,5.6,3.7,10.2v18.2 h6V72.8z" style="fill: rgb(255, 255, 255);"/>
</g>
</svg>
Режим "рядом"

После

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