Skip to content

Commit

Permalink
Add State of Mozilla section to home page [fix #15727]
Browse files Browse the repository at this point in the history
  • Loading branch information
craigcook committed Dec 14, 2024
1 parent 61085d4 commit ff27c15
Showing 11 changed files with 82 additions and 5 deletions.
6 changes: 5 additions & 1 deletion bedrock/mozorg/templates/mozorg/home/home-m24.html
Original file line number Diff line number Diff line change
@@ -42,7 +42,11 @@
{% include 'mozorg/home/includes/m24/donate.html'%}
{% include 'mozorg/home/includes/m24/ai-gallery.html'%}
{% include 'mozorg/home/includes/m24/media-springboard.html'%}
{% include 'mozorg/home/includes/m24/showcase.html'%}
{% if ftl_has_messages('m24-home-state-of-mozilla', 'm24-home-mozilla-is-reinventing-itself', 'm24-home-read-the-report') %}
{% include 'mozorg/home/includes/m24/showcase-som.html'%}
{% else %}
{% include 'mozorg/home/includes/m24/showcase.html'%}
{% endif %}
{% include 'mozorg/home/includes/m24/issues-gallery.html'%}

</main>
Original file line number Diff line number Diff line change
@@ -132,5 +132,3 @@ <h3 class="m24-c-intro-title m24-t-sm">{{ ftl('m24-home-headline-you-ai-v2', fal
) }}
</ul>
</section>

<div class="m24-c-transition m24-t-top-light m24-t-bottom-green"><hr></div>
Original file line number Diff line number Diff line change
@@ -0,0 +1,47 @@
{#
This Source Code Form is subject to the terms of the Mozilla Public
License, v. 2.0. If a copy of the MPL was not distributed with this
file, You can obtain one at https://mozilla.org/MPL/2.0/.
#}

<div class="m24-c-transition m24-t-top-light m24-t-bottom-pink"><hr></div>

<section class="m24-c-showcase m24-t-pink">
<div class="m24-c-content">
<header class="m24-c-showcase-text">
<h2 class="m24-c-showcase-title">{{ ftl('m24-home-state-of-mozilla') }}</h2>
<p class="m24-c-showcase-body">{{ ftl('m24-home-mozilla-is-reinventing-itself') }}</p>
</header>

<div class="m24-c-showcase">
<div class="m24-c-showcase-media">
{{ resp_img(
url='img/home/2024//showcase/showcase-som-1440.png',
srcset={
'img/home/2024//showcase/showcase-som-375.png': '375w',
'img/home/2024//showcase/showcase-som-686.png': '686w',
'img/home/2024//showcase/showcase-som-1440.png': '1440w',
'img/home/2024//showcase/showcase-som-2752.png': '2752w',
},
sizes={
'default': '100vw',
},
optional_attributes={
'width': '1376',
'height': '590',
'alt': ftl('m24-home-state-of-mozilla-alt'),
}
) }}
</div>
</div>

<header class="m24-c-showcase-text m24-l-two-columns">
<h3 class="m24-c-showcase-subtitle">2024</h3>

<p class="m24-c-showcase-body m24-c-section-cta">
<a href="#TODO-foundation.annualreport.2024.index" class="m24-c-cta" rel="external noopener" data-cta-text="Read the report">{{ ftl('m24-home-read-the-report') }}</a>
</p>
</footer>

</div>
</section>
Original file line number Diff line number Diff line change
@@ -4,6 +4,8 @@
file, You can obtain one at https://mozilla.org/MPL/2.0/.
#}

<div class="m24-c-transition m24-t-top-light m24-t-bottom-green"><hr></div>

<section class="m24-c-showcase m24-t-green">
<div class="m24-c-content">
<header class="m24-c-showcase-text">
5 changes: 5 additions & 0 deletions l10n/en/mozorg/home-m24.ftl
Original file line number Diff line number Diff line change
@@ -116,6 +116,11 @@ m24-home-alt-rise25-proud = A proud honoree at { -brand-name-rise25 }.
m24-home-alt-rise25-smiling = A confident smiling speaker at { -brand-name-rise25 }.
# Used as an accessible text alternative for an image
m24-home-alt-rise25-joyous = A joyous honoree at { -brand-name-rise25 }.
m24-home-state-of-mozilla = State of { -brand-name-mozilla }
m24-home-mozilla-is-reinventing-itself = { -brand-name-mozilla } is reinventing itself, diversifying around a constellation of organizations, reimagining advertising and creating an open source AI ecosystem. Read about it in the State of { -brand-name-mozilla } 2024 Report.
# Used as an accessible text alternative for an image
m24-home-state-of-mozilla-alt = Abstract pixel art in shades of green, orange and pink
m24-home-read-the-report = Read the report
## Issues

3 changes: 2 additions & 1 deletion media/css/m24/base.scss
Original file line number Diff line number Diff line change
@@ -89,8 +89,9 @@ a:link {
font-family: var(--title-font-family);
font-size: $text-button-xl;
font-weight: 600;
line-height: 1.1;
background-image:
linear-gradient(to right, $m24-color-black 0, $m24-color-black 33%,transparent 33%, transparent 66%, $m24-color-black 66%, $m24-color-black 100%);
linear-gradient(to right, $m24-color-black 0, $m24-color-black 33%,transparent 33%, transparent 66%, $m24-color-black 66%, $m24-color-black 100%);
background-repeat: no-repeat;
background-position:
left var(--cta-bg-position, 100%) top 100%;
22 changes: 21 additions & 1 deletion media/css/m24/showcase.scss
Original file line number Diff line number Diff line change
@@ -9,6 +9,12 @@
margin-bottom: $spacer-sm;
}

.m24-c-showcase-subtitle {
font-size: $text-button-xl;
padding: $spacer-xs 0;
text-align: end;
}

.m24-c-showcase-body {
font-weight: 500;
font-size: $text-body-lg;
@@ -106,15 +112,29 @@
.m24-c-showcase-text.m24-l-two-columns {
@include grid;

.m24-c-showcase-title {
.m24-c-showcase-title,
.m24-c-showcase-subtitle {
grid-column: 1/7;
text-align: start;
}

.m24-c-showcase-body {
grid-column: 7/-1;
max-width: none;
}
}

.m24-c-showcase-foot {
@include grid;

.m24-c-showcase-foot-content {
grid-column: 1/7;
}

.m24-c-section-cta {
grid-column: 7/-1;
}
}
}

@media #{$mq-lg} and (prefers-reduced-motion: no-preference) {
Loading
Sorry, something went wrong. Reload?
Sorry, we cannot display this file.
Sorry, this file is invalid so it cannot be displayed.
Loading
Sorry, something went wrong. Reload?
Sorry, we cannot display this file.
Sorry, this file is invalid so it cannot be displayed.
Binary file added media/img/home/2024/showcase/showcase-som-375.png
Loading
Sorry, something went wrong. Reload?
Sorry, we cannot display this file.
Sorry, this file is invalid so it cannot be displayed.
Binary file added media/img/home/2024/showcase/showcase-som-686.png
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 ff27c15

Please sign in to comment.