Skip to content

Commit

Permalink
add page to nav, update header design
Browse files Browse the repository at this point in the history
  • Loading branch information
@reemhamz
reemhamz committed Jun 13, 2024
1 parent a9a1eb6 commit 3431faf
Show file tree
Hide file tree
Showing 5 changed files with 106 additions and 19 deletions.
11 changes: 10 additions & 1 deletion bedrock/base/templates/includes/protocol/navigation/menus/whoweare.html
View file
Original file line number Diff line number Diff line change
Expand Up @@ -12,7 +12,7 @@
<div class="c-menu-panel-container">
<button class="c-menu-button-close" type="button" aria-controls="c-menu-panel-about">{{ ftl('navigation-v2-close-who-we-are-menu', fallback='navigation-close-about-menu') }}</button>
<div class="c-menu-panel-content">
<ul class="mzp-l-rows-three">
<ul class="mzp-l-rows-four">
<li>
<section class="c-menu-item mzp-has-icon">
<a class="c-menu-item-link" href="{{ url('mozorg.about.manifesto') }}" data-link-text="Mozilla Manifesto" data-link-type="nav" data-link-position="topnav" data-link-group="who-we-are">
Expand Down Expand Up @@ -73,6 +73,15 @@ <h4 class="c-menu-item-title">{{ ftl('navigation-v2-mozilla-blog') }}</h4>
</a>
</section>
</li>
<li>
<section class="c-menu-item mzp-has-icon">
<a class="c-menu-item-link" href="{{ url('mozorg.impact-report.index') }}" data-link-text="Impact" data-link-type="nav" data-link-position="topnav" data-link-group="who-we-are">
<img src="{{ static('protocol/img/icons/careers.svg') }}" alt="" class="c-menu-item-icon">
<h4 class="c-menu-item-title">{{ ftl('navigation-v2-impact') }}</h4>
<p class="c-menu-item-desc">{{ ftl('navigation-v2-learn-read-our-reports') }}</p>
</a>
</section>
</li>

</ul>
<p class="c-menu-category-link">
Expand Down
33 changes: 20 additions & 13 deletions bedrock/mozorg/templates/mozorg/impact-report/index.html
View file
Original file line number Diff line number Diff line change
Expand Up @@ -19,14 +19,25 @@

{% block content %}
<main>
<header class="mzp-l-content mzp-t-content-md">
<h1>Our Social and Environmental Impact</h1>
<h2>Learn how we are making the internet more equitable, inclusive, and sustainable</h2>
<header>
<div class="c-hero-banner mzp-l-content">

<h1>
<span>Our social</span>
<span>&</span> <br>
<span>environmental</span> <br> <span>impact</span>
</h1>

</div>
<div class="c-subheader mzp-l-content">
<h2>Learn how Mozilla is making the internet more equitable, inclusive, and sustainable</h2>
</div>

</header>

<section class="c-report">
{% call split(
block_class='mzp-l-split-center-on-sm-md mzp-l-split-reversed mzp-t-split-nospace c-foundation',
block_class='mzp-l-split-center-on-sm-md mzp-l-split-reversed c-foundation',
image=resp_img(
url='img/mozorg/impact/report-cover.jpg',
srcset={
Expand All @@ -40,7 +51,7 @@ <h2>Learn how we are making the internet more equitable, inclusive, and sustaina
media_after=False
) %}
<h3>Our 2024 report</h3>
<p>Our holistic report by the Mozilla Corporation and Mozilla Foundation on the progress of our Sustainability and Diversity, Equity, Inclusion, and Belonging (DEIB) commitments in 2023 to provide transparency to our employees, customers, and community.</p>
<p>This holistic report by the Mozilla Corporation and Mozilla Foundation provides transparency to our employees, customers, and community on the progress of our Sustainability and Diversity, Equity, Inclusion, and Belonging commitments in 2023.</p>
<a href="" class="mzp-c-button">View the report</a>
{% endcall %}
</section>
Expand All @@ -58,8 +69,8 @@ <h3>Join us in making an impact!</h3>
)}}

{{ card(
title='Fight racism',
ga_title='Fight racism',
title='Fight anti-Black racism',
ga_title='Fight anti-Black racism',
image=resp_img('img/mozorg/impact/fight-racism.jpg', optional_attributes={"loading": "lazy", "class": "mzp-c-card-image"}),
desc='A resource list compiled by Afrozilla',
link_url='https://getpocket.com/collections/moving-from-ally-to-accomplice-in-the-anti-racist-fight-an-afrozilla-resource-list'
Expand Down Expand Up @@ -99,25 +110,21 @@ <h3>Explore our past reports</h3>
</tr>
<tr>
<td><a href="{{ url('mozorg.diversity.2021.index') }}">2022 Diversity & Inclusion Report</a></td>
<td><a href="https://blog.mozilla.org/en/mozilla/release-mozillas-greenhouse-gas-emissions-baseline/">Mozilla’s Greenhouse Gas emissions baseline</a> (2019 data)</td>
<td><a href="https://blog.mozilla.org/en/mozilla/release-mozillas-greenhouse-gas-emissions-baseline/">Blog: Mozilla’s 2019 Greenhouse Gas Emissions</a></td>
</tr>
<tr>
<td><a href="https://foundation.mozilla.org/en/blog/mozilla-foundation-2020-diversity-disclosure/">2020 Mozilla Foundation D&I Report</a></td>
<td><a href="https://blog.mozilla.org/wp-content/blogs.dir/278/files/2021/02/Mozillas-2019-Greenhouse-Gas-emissions-baseline_2020-11-18.pdf">Inventory Report</a> (2019 data)</td>
<td><a href="https://blog.mozilla.org/wp-content/blogs.dir/278/files/2021/02/Mozillas-2019-Greenhouse-Gas-emissions-baseline_2020-11-18.pdf">Detailed 2019 Greenhouse Gas Emissions Inventory</a></td>
</tr>
<tr>
<td><a href="https://blog.mozilla.org/careers/mozilla-diversity-inclusion-2019-results/">2020 Mozilla Corporation D&I Report</a></td>
<td></td>
</tr>
<tr>
<td><a href="https://blog.mozilla.org/careers/mozilla-diversity-inclusion-2018-results/">2019 Mozilla Corporation D&I Report</a></td></tr>
<td></td>
<tr>
<td><a href="https://blog.mozilla.org/careers/diversity-and-inclusion-at-mozilla/">2018 Mozilla Corporation D&I Report</a></td></tr>
<td></td>
<tr>
<td><a href="https://blog.mozilla.org/careers/diversity-and-inclusion-at-mozilla-foundation/">2018 Mozilla Foundation D&I Report</a></td></tr>
<td></td>
</tbody>
</table>
</section>
Expand Down
2 changes: 2 additions & 0 deletions l10n/en/navigation_v2.ftl
View file
Original file line number Diff line number Diff line change
Expand Up @@ -62,6 +62,8 @@ navigation-v2-work-for-a-mission-driven-updated = Work for a mission-driven orga
navigation-v2-mozilla-blog = { -brand-name-mozilla } Blog
navigation-v2-learn-about-mozilla-and = Learn about { -brand-name-mozilla } and the issues that matter to us.
navigation-v2-more-about-mozilla = More About { -brand-name-mozilla }
navigation-v2-impact = Impact
navigation-v2-learn-read-our-reports = Find how we’re making the internet more inclusive and sustainable
## Innovation menu

Expand Down
79 changes: 74 additions & 5 deletions media/css/mozorg/impact.scss
View file
Original file line number Diff line number Diff line change
Expand Up @@ -8,16 +8,80 @@ $image-path: '/media/protocol/img';
@import '~@mozilla-protocol/core/protocol/css/includes/lib';

header {
background-color: $color-black;
text-align: center;

h2 {
@include text-title-xs;
font-weight: 500;
.c-hero-banner {
min-height: 500px;
background-color: $color-black;
display: flex;
flex-direction: column;
justify-content: center;
align-items: center;


h1 {
@include font-base;
@include text-title-lg;
color: $color-white;
font-weight: normal;

span {
background: $color-green-70;
}
}

@media #{$mq-md} {
background-image: url('/media/img/mozorg/impact/arrow.png');
background-size: 900px;
background-position: center center;
background-repeat: no-repeat;
min-height: 450px;

h1 {
@include font-size(90px);

span {
display: inline-block;
margin-bottom: $spacing-md;
padding: 0 $spacing-md;

&:nth-of-type(1) {
margin-left: -160px;
}

&:nth-of-type(3) {
margin-left: 90px;
}
}
}
}

@media #{$mq-lg} {
@include background-size(1300px, auto);
}
}

.c-subheader {
padding-bottom: $spacing-md;
padding-top: 0;

h2 {
@include text-title-xs;
@include font-base;
color: $color-white;
font-weight: 500;
}
}

}

.c-foundation {
padding-bottom: 0;
}

.c-cards {
h2 {
h3 {
text-align: center;
}
}
Expand All @@ -34,10 +98,15 @@ header {
.c-past-reports-table {
margin: 0 auto;
margin-top: $spacing-2xl;
table-layout: fixed;
table-layout: auto;

th,
td {
max-width: 420px;
}

@media #{$mq-md} {
table-layout: fixed;
width: 790px;
}
}
Binary file added media/img/mozorg/impact/arrow.png
View file
Loading
Sorry, something went wrong. Reload?
Sorry, we cannot display this file.
Sorry, this file is invalid so it cannot be displayed.

0 comments on commit 3431faf

Please sign in to comment.