зеркало из https://github.com/mozilla/bedrock.git
Update Rise25 nomination page, link to honorees (#14866)
This commit is contained in:
Craig Cook
GitHub
Родитель
ea4e454f58
Коммит
3d20b68796
|
|
@ -5,7 +5,6 @@
|
|||
#}
|
||||
|
||||
<div class="r25-hero-video">
|
||||
<a class="video-play js-video-play" href="https://youtu.be/LbGtijF8qb0" role="button">
|
||||
<video preload="auto" playsinline autoplay loop muted poster="{{ static('img/mozorg/rise25/hero-poster-high-res.jpg') }}" width="680" height="383">
|
||||
<source src="https://assets.mozilla.net/rise25/rise25-hero.webm" type="video/webm">
|
||||
</video>
|
||||
|
|
@ -22,11 +21,4 @@
|
|||
'alt': ''
|
||||
}
|
||||
) }}
|
||||
</a>
|
||||
|
||||
<div class="mzp-u-modal-content hidden">
|
||||
<div class="mzp-c-video js-video-content">
|
||||
<div class="video-player-frame" data-video-id="LbGtijF8qb0" data-video-title="Rise25 Awards: Call for Nominations"></div>
|
||||
</div>
|
||||
</div>
|
||||
</div>
|
||||
|
|
|
|||
|
|
@ -1,55 +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/.
|
||||
#}
|
||||
|
||||
<div class="r25-c-social-share">
|
||||
<p class="social-share-title">Share</p>
|
||||
<ul class="social-share-list">
|
||||
<li>
|
||||
<button class="copy-text" data-cta-type="button" data-cta-text="Copy link">
|
||||
<svg width="16" height="16" viewBox="0 0 16 16" fill="none" xmlns="http://www.w3.org/2000/svg">
|
||||
<path fill-rule="evenodd" clip-rule="evenodd"
|
||||
d="M9.28906 8.64457C8.73118 9.3904 7.87686 9.85715 6.94784 9.92369C6.01882 9.99022 5.10671 9.64998 4.44823 8.99126L2.52217 7.0652C1.30563 5.80562 1.32303 3.80346 2.56127 2.56522C3.79952 1.32697 5.80168 1.30957 7.06125 2.52611L8.16553 3.62397"
|
||||
stroke="currentColor" stroke-width="1.28115" stroke-linecap="round" stroke-linejoin="round" />
|
||||
<path
|
||||
d="M6.71871 7.36057C7.2766 6.61474 8.13092 6.14799 9.05993 6.08145C9.98895 6.01492 10.9011 6.35516 11.5595 7.01388L13.4856 8.93994C14.7021 10.1995 14.6847 12.2017 13.4465 13.4399C12.2083 14.6782 10.2061 14.6956 8.94652 13.479L7.84867 12.3812"
|
||||
stroke="currentColor" stroke-width="1.28115" stroke-linecap="round" stroke-linejoin="round" />
|
||||
</svg>
|
||||
<span class="social-share-copy" role="tooltip">Copy to clipboard</span>
|
||||
<span class="social-share-copied" role="tooltip" aria-live="polite">Link copied!</span>
|
||||
</button>
|
||||
</li>
|
||||
<li>
|
||||
<a class="twitter" href="#" target="_blank" role="external noopener noreferrer" data-cta-type="link" data-cta-text="Share on X">
|
||||
<svg title="Share on X" width="16" height="16" viewBox="0 0 16 16" fill="none" xmlns="http://www.w3.org/2000/svg">
|
||||
<path fill="currentColor" 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>
|
||||
<span class="visually-hidden">Share on X (formerly Twitter)</span>
|
||||
</a>
|
||||
</li>
|
||||
<li>
|
||||
<a class="facebook" href="#" target="_blank" role="external noopener noreferrer" data-cta-type="link" data-cta-text="Share on Facebook">
|
||||
<svg title="Share on Facebook" width="9" height="16" viewBox="0 0 9 16" fill="none" xmlns="http://www.w3.org/2000/svg">
|
||||
<path fill-rule="evenodd" clip-rule="evenodd"
|
||||
d="M2.72851 15.7063V8.67785H0.363281V5.93867H2.72851V3.91863C2.72851 1.57434 4.16032 0.297852 6.25156 0.297852C7.25325 0.297852 8.11424 0.372451 8.36511 0.405773V2.85566L6.91473 2.85634C5.77737 2.85634 5.55718 3.39677 5.55718 4.18982V5.93867H8.26963L7.91642 8.67785H5.55718V15.7063H2.72851Z"
|
||||
fill="currentColor" />
|
||||
</svg>
|
||||
<span class="visually-hidden">Share on Facebook</span>
|
||||
</a>
|
||||
</li>
|
||||
<li>
|
||||
<a class="email" href="#" data-cta-type="link" data-cta-text="Share with email">
|
||||
<svg title="Share with email" width="17" height="16" viewBox="0 0 17 16" fill="none" xmlns="http://www.w3.org/2000/svg">
|
||||
<path fill-rule="evenodd" clip-rule="evenodd"
|
||||
d="M3.1942 2.86523H13.4665C14.1727 2.86523 14.7506 3.44305 14.7506 4.14927V11.8535C14.7506 12.5597 14.1727 13.1376 13.4665 13.1376H3.1942C2.48797 13.1376 1.91016 12.5597 1.91016 11.8535V4.14927C1.91016 3.44305 2.48797 2.86523 3.1942 2.86523Z"
|
||||
stroke="currentColor" stroke-width="1.28115" stroke-linecap="round" stroke-linejoin="round" />
|
||||
<path d="M14.7506 4.14941L8.33036 8.64356L1.91016 4.14941" stroke="currentColor" stroke-width="1.28115"
|
||||
stroke-linecap="round" stroke-linejoin="round" />
|
||||
</svg>
|
||||
<span class="visually-hidden">Share with Email</span>
|
||||
</a>
|
||||
</li>
|
||||
</ul>
|
||||
</div>
|
||||
|
|
@ -33,75 +33,17 @@
|
|||
) %}
|
||||
<h1 class="r25-c-wordmark">Rise25</h1>
|
||||
<h2 class="r25-fancy-title">AI for the people</h2>
|
||||
<p class="r25-hero-intro">We’re seeking 25 visionaries using AI to drive social
|
||||
impact, offering them global recognition at our Dublin awards event. By sharing
|
||||
their stories widely, we’ll amplify their work and connect them with a community
|
||||
dedicated to supporting responsible AI initiatives that benefit humanity. Know
|
||||
an innovator making a difference with AI?</p>
|
||||
<div class="r25-hero-cta">
|
||||
{% if switch('rise25-nominations-open') %}
|
||||
<strong class="r25-hero-notice">Call for nominees extended to<br> <time datetime="2024-04-12">April 12, 2024</time></strong>
|
||||
|
||||
<a href="#nominate" class="r25-c-button t-fancy">Nominate <span>someone</span></a>
|
||||
{% else %}
|
||||
<div class="r25-hero-cta">
|
||||
<p class="r25-hero-closed">
|
||||
<strong>Nominations are now closed.</strong>
|
||||
Follow us @Mozilla and stay tuned for the announcement of the Rise25 award winners.
|
||||
Please come back in 2025 for next year’s Rise25 nominations.
|
||||
</p>
|
||||
{% endif %}
|
||||
|
||||
{{ video_modal_embed(
|
||||
id='LbGtijF8qb0',
|
||||
title='Play the video',
|
||||
image=resp_img(
|
||||
url='img/mozorg/rise25/hero-thumb.jpg',
|
||||
srcset={
|
||||
'img/mozorg/rise25/hero-thumb-high-res.jpg': '1.5x'
|
||||
},
|
||||
optional_attributes={
|
||||
'width': '178',
|
||||
'height': '100',
|
||||
'class': 'fallback',
|
||||
'alt': ''
|
||||
}
|
||||
),
|
||||
) }}
|
||||
</div>
|
||||
{% endcall %}
|
||||
|
||||
<section class="mzp-l-content r25-promote">
|
||||
<div class="r25-promote-container">
|
||||
<div class="r25-promote-body">
|
||||
<h3>Join us in spreading the word</h3>
|
||||
<p>Share the Rise25 call for nominations and help celebrate those shaping the future of AI to benefit people, not large corporations.</p>
|
||||
{% include "mozorg/rise25/includes/social-share.html" %}
|
||||
</div>
|
||||
|
||||
<div class="r25-promote-video">
|
||||
<video class="video" preload="auto" playsinline autoplay loop muted poster="{{ static('img/mozorg/rise25/winners-poster-high-res.jpg') }}" width="450" height="450">
|
||||
<source src="https://assets.mozilla.net/rise25/rise25-2023-winners.webm" type="video/webm">
|
||||
</video>
|
||||
|
||||
{{ resp_img(
|
||||
url='img/mozorg/rise25/winners-poster.jpg',
|
||||
srcset={
|
||||
'img/mozorg/rise25/winners-poster-high-res.jpg': '1.5x'
|
||||
},
|
||||
optional_attributes={
|
||||
'width': '450',
|
||||
'height': '450',
|
||||
'class': 'fallback',
|
||||
'alt': ''
|
||||
}
|
||||
) }}
|
||||
|
||||
<p class="r25-c-past-cta"><a href="https://rise25.mozilla.org/{{ utm_params }}" rel="external noopener" target="_blank">See last year’s Rise25 winners</a></p>
|
||||
</div>
|
||||
</div>
|
||||
</section>
|
||||
|
||||
<section id="nominate" class="mzp-l-content r25-nominate">
|
||||
<h2 class="r25-section-title">Nomination Categories</h2>
|
||||
<h2 class="r25-section-title">Categories</h2>
|
||||
|
||||
<div id="advocates" class="r25-c-category r25-t-red">
|
||||
<div class="r25-c-category-body">
|
||||
|
|
@ -116,11 +58,28 @@
|
|||
to make AI a force for societal good.
|
||||
</p>
|
||||
</div>
|
||||
{% if switch('rise25-nominations-open') %}
|
||||
|
||||
<p class="r25-c-category-cta">
|
||||
<a class="r25-c-button" href="https://mozilla.formstack.com/forms/rise25" rel="external noopener" target="_blank">Nominate</a>
|
||||
<a class="r25-c-button" href="https://rise25.mozilla.org/advocates/" rel="external noopener" target="_blank">See the honorees</a>
|
||||
</p>
|
||||
</div>
|
||||
|
||||
<div id="artists" class="r25-c-category r25-t-green">
|
||||
<div class="r25-c-category-body">
|
||||
<h3 class="r25-c-category-title">Artists</h3>
|
||||
<p class="r25-c-category-desc">Reimagining AI’s creative potential.</p>
|
||||
<p class="r25-c-category-expand">
|
||||
Their work provokes thought and offers fresh perspectives on AI through
|
||||
storytelling across various mediums. Their projects challenge perceptions
|
||||
and show how AI can amplify human creativity. Some also use their craft
|
||||
to challenge the current state of AI and engage in conversations about
|
||||
ensuring technology is applied fairly and equitably.
|
||||
</p>
|
||||
</div>
|
||||
|
||||
<p class="r25-c-category-cta">
|
||||
<a class="r25-c-button" href="https://rise25.mozilla.org/artists/" rel="external noopener" target="_blank">See the honorees</a>
|
||||
</p>
|
||||
{% endif %}
|
||||
</div>
|
||||
|
||||
<div id="builders" class="r25-c-category r25-t-teal">
|
||||
|
|
@ -135,50 +94,10 @@
|
|||
reliable, aiming to create tools that empower and advance society.
|
||||
</p>
|
||||
</div>
|
||||
{% if switch('rise25-nominations-open') %}
|
||||
<p class="r25-c-category-cta">
|
||||
<a class="r25-c-button" href="https://mozilla.formstack.com/forms/rise25" rel="external noopener" target="_blank">Nominate</a>
|
||||
</p>
|
||||
{% endif %}
|
||||
</div>
|
||||
|
||||
<div id="artists" class="r25-c-category r25-t-green">
|
||||
<div class="r25-c-category-body">
|
||||
<h3 class="r25-c-category-title">Artists</h3>
|
||||
<p class="r25-c-category-desc">Reimagining AI’s creative potential.</p>
|
||||
<p class="r25-c-category-expand">
|
||||
They transcend traditional AI applications, like synthesizing visuals
|
||||
or using large language models. Their projects, whether interactive
|
||||
websites, films, or digital media, challenge our perceptions and
|
||||
demonstrate how AI can amplify and empower human creativity. Their work
|
||||
provokes thought and offers fresh perspectives on the intersection of
|
||||
AI and art.
|
||||
</p>
|
||||
</div>
|
||||
{% if switch('rise25-nominations-open') %}
|
||||
<p class="r25-c-category-cta">
|
||||
<a class="r25-c-button" href="https://mozilla.formstack.com/forms/rise25" rel="external noopener" target="_blank">Nominate</a>
|
||||
<a class="r25-c-button" href="https://rise25.mozilla.org/builders/" rel="external noopener" target="_blank">See the honorees</a>
|
||||
</p>
|
||||
{% endif %}
|
||||
</div>
|
||||
|
||||
<div id="entrepreneurs" class="r25-c-category r25-t-purple">
|
||||
<div class="r25-c-category-body">
|
||||
<h3 class="r25-c-category-title">Entrepreneurs</h3>
|
||||
<p class="r25-c-category-desc">Fueling AI’s evolution with visionary ventures.</p>
|
||||
<p class="r25-c-category-expand">
|
||||
These daring individuals are transforming imaginative ideas into reality.
|
||||
They’re crafting businesses and solutions with AI to meet societal needs,
|
||||
improve everyday life and forge new technological paths. They embody
|
||||
innovation, steering startups and projects with a commitment to ethical
|
||||
standards, inclusiveness and enhancing human welfare through technology.
|
||||
</p>
|
||||
</div>
|
||||
{% if switch('rise25-nominations-open') %}
|
||||
<p class="r25-c-category-cta">
|
||||
<a class="r25-c-button" href="https://mozilla.formstack.com/forms/rise25" rel="external noopener" target="_blank">Nominate</a>
|
||||
</p>
|
||||
{% endif %}
|
||||
</div>
|
||||
|
||||
<div id="change-agents" class="r25-c-category r25-t-orange">
|
||||
|
|
@ -195,66 +114,32 @@
|
|||
AI environment of equality and empowerment.
|
||||
</p>
|
||||
</div>
|
||||
{% if switch('rise25-nominations-open') %}
|
||||
|
||||
<p class="r25-c-category-cta">
|
||||
<a class="r25-c-button" href="https://mozilla.formstack.com/forms/rise25" rel="external noopener" target="_blank">Nominate</a>
|
||||
</p>
|
||||
{% endif %}
|
||||
</div>
|
||||
</section>
|
||||
|
||||
<section class="mzp-l-content mzp-t-content-md">
|
||||
<div class="r25-blog">
|
||||
<div class="r25-blog-body">
|
||||
<h3 class="r25-blog-title">Who’s shaping the future of AI? We’re on the hunt.</h3>
|
||||
<p class="r25-blog-cta">
|
||||
<a href="https://blog.mozilla.org/en/mozilla/mozilla-rise25-ai-nominations/{{ utm_params }}" rel="external noopener" target="_blank">Read our blog post</a>
|
||||
<a class="r25-c-button" href="https://rise25.mozilla.org/change-agents/" rel="external noopener" target="_blank">See the honorees</a>
|
||||
</p>
|
||||
</div>
|
||||
|
||||
{{ resp_img(
|
||||
url='img/mozorg/rise25/blog-thumbnail.jpg',
|
||||
srcset={
|
||||
'img/mozorg/rise25/blog-thumbnail-high-res.jpg': '1.5x'
|
||||
},
|
||||
optional_attributes={
|
||||
'width': '230',
|
||||
'height': '153',
|
||||
'class': 'r25-blog-image'
|
||||
}
|
||||
) }}
|
||||
<div id="entrepreneurs" class="r25-c-category r25-t-purple">
|
||||
<div class="r25-c-category-body">
|
||||
<h3 class="r25-c-category-title">Entrepreneurs</h3>
|
||||
<p class="r25-c-category-desc">Fueling AI’s evolution with visionary ventures.</p>
|
||||
<p class="r25-c-category-expand">
|
||||
These daring individuals are transforming imaginative ideas into reality.
|
||||
They’re crafting businesses and solutions with AI to meet societal needs,
|
||||
improve everyday life and forge new technological paths. They embody
|
||||
innovation, steering startups and projects with a commitment to ethical
|
||||
standards, inclusiveness and enhancing human welfare through technology.
|
||||
</p>
|
||||
</div>
|
||||
|
||||
<div class="r25-spread-secondary">
|
||||
<h3>Help us spread the word!</h3>
|
||||
{% include "mozorg/rise25/includes/social-share.html" %}
|
||||
</div>
|
||||
</section>
|
||||
|
||||
<section id="faq" class="mzp-l-content">
|
||||
<h2 class="r25-section-title">FAQs</h2>
|
||||
|
||||
<div class="mzp-c-details r25-faq">
|
||||
<h3 class="r25-faq-heading">Why should I nominate someone for Rise25?</h3>
|
||||
<p>The selected honorees will be celebrated in Dublin this August and invited
|
||||
to join the Rise25 cohort with past and current winners and part of the
|
||||
Mozilla community. Mozilla will be covering the flight and hotel expenses
|
||||
for the honorees and a plus one.</p>
|
||||
|
||||
<h3 class="r25-faq-heading">How much does it cost to enter?</h3>
|
||||
<p>There are no nomination fees or costs associated with the nomination form.</p>
|
||||
|
||||
<h3 class="r25-faq-heading">How will honorees be notified?</h3>
|
||||
<p>Mozilla will reach out to honorees via email later this year.</p>
|
||||
|
||||
<h3 class="r25-faq-heading">Who can I contact for more information?</h3>
|
||||
<p>Give us a shout at <a href="mailto:rise25@mozilla.com">rise25@mozilla.com</a>.</p>
|
||||
<p class="r25-c-category-cta">
|
||||
<a class="r25-c-button" href="https://rise25.mozilla.org/entrepreneurs/" rel="external noopener" target="_blank">See the honorees</a>
|
||||
</p>
|
||||
</div>
|
||||
</section>
|
||||
{% endblock %}
|
||||
|
||||
{% block js %}
|
||||
{{ js_bundle('protocol-modal') }}
|
||||
{{ js_bundle('video-modal-embed') }}
|
||||
{{ js_bundle('rise25-landing') }}
|
||||
{% endblock %}
|
||||
|
|
|
|||
|
|
@ -1,37 +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/.
|
||||
#}
|
||||
|
||||
{% extends "base-protocol.html" %}
|
||||
|
||||
{% block page_title %}Thanks for submitting your nomination for Rise 25{% endblock %}
|
||||
|
||||
{% block page_css %}
|
||||
{{ css_bundle('protocol-newsletter') }}
|
||||
{{ css_bundle('rise25') }}
|
||||
{% endblock %}
|
||||
|
||||
{% block body_class %}rise25{% endblock %}
|
||||
|
||||
{% block content %}
|
||||
<section class="mzp-l-content mzp-t-content-lg r25-thanks-body">
|
||||
<div class="r25-c-wordmark"></div>
|
||||
<h1 class="r25-fancy-title">Thanks for submitting your nomination</h1>
|
||||
</section>
|
||||
|
||||
<section class="mzp-l-content mzp-t-content-md r25-thanks-newsletter">
|
||||
{{ email_newsletter_form(
|
||||
newsletters='knowledge-is-power',
|
||||
include_title=True,
|
||||
title='Want to keep in touch? Stay connected with our mission to create a happier, healthier, and safer internet.',
|
||||
button_class='r25-c-button t-fancy',
|
||||
spinner_color='#fff'
|
||||
) }}
|
||||
</section>
|
||||
{% endblock %}
|
||||
|
||||
{% block js %}
|
||||
{{ js_bundle('newsletter') }}
|
||||
{% endblock %}
|
||||
|
|
@ -146,7 +146,6 @@ urlpatterns = [
|
|||
),
|
||||
path("antiharassment-tool/", views.anti_harassment_tool_view, name="mozorg.antiharassment-tool"),
|
||||
page("rise25/nominate/", "mozorg/rise25/landing.html"),
|
||||
page("rise25/thanks/", "mozorg/rise25/thanks.html"),
|
||||
]
|
||||
|
||||
if settings.DEV:
|
||||
|
|
|
|||
|
|
@ -1,85 +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/.
|
||||
|
||||
@use '../lib' as r25;
|
||||
|
||||
@import '~@mozilla-protocol/core/protocol/css/includes/lib';
|
||||
|
||||
// * -------------------------------------------------------------------------- */
|
||||
// Blog promo
|
||||
|
||||
.r25-blog {
|
||||
@include white-links;
|
||||
background-image: linear-gradient(-40deg, fade-out(r25.$teal, 0.6) -100px, fade-out(r25.$teal, 1) 80%);
|
||||
border-image: linear-gradient(-90deg, fade-out($color-white, 0.8), fade-out($color-white, 1) 60%) 1;
|
||||
border-style: solid;
|
||||
border-width: 1px 1px 1px 0;
|
||||
padding: $spacing-lg;
|
||||
|
||||
.r25-blog-title {
|
||||
@include text-title-2xs;
|
||||
}
|
||||
|
||||
.r25-blog-image {
|
||||
display: block;
|
||||
margin: $spacing-lg auto 0;
|
||||
border: 1px solid fade-out($color-black, 0.5);
|
||||
}
|
||||
|
||||
.r25-blog-cta {
|
||||
font-weight: bold;
|
||||
margin: 0;
|
||||
|
||||
a:link,
|
||||
a:visited {
|
||||
text-decoration: none;
|
||||
|
||||
&:hover,
|
||||
&:focus {
|
||||
text-decoration: underline;
|
||||
}
|
||||
|
||||
&::after {
|
||||
content: " →";
|
||||
white-space: nowrap;
|
||||
}
|
||||
}
|
||||
}
|
||||
|
||||
@media #{$mq-sm} {
|
||||
align-items: center;
|
||||
column-gap: $layout-md;
|
||||
display: grid;
|
||||
grid-template-areas: "media body";
|
||||
|
||||
.r25-blog-body {
|
||||
grid-area: body;
|
||||
}
|
||||
|
||||
.r25-blog-image {
|
||||
grid-area: media;
|
||||
}
|
||||
}
|
||||
}
|
||||
|
||||
.r25-spread-secondary {
|
||||
margin: $layout-md auto 0;
|
||||
text-align: center;
|
||||
|
||||
h3 {
|
||||
@include text-title-xs;
|
||||
margin: 0 auto $spacing-md;
|
||||
}
|
||||
|
||||
@media #{$mq-md} {
|
||||
display: flex;
|
||||
align-items: center;
|
||||
column-gap: $layout-md;
|
||||
justify-content: center;
|
||||
|
||||
h3 {
|
||||
margin: 0;
|
||||
}
|
||||
}
|
||||
}
|
||||
|
|
@ -19,7 +19,7 @@
|
|||
}
|
||||
|
||||
.r25-c-category-body {
|
||||
max-width: $content-lg;
|
||||
max-width: $content-md;
|
||||
}
|
||||
|
||||
.r25-c-category-desc {
|
||||
|
|
@ -67,7 +67,7 @@
|
|||
}
|
||||
|
||||
&:hover {
|
||||
background: radial-gradient(50% 320% at 50% 50%, fade-out(r25.$orange, 0.65) 6%, fade-out(r25.$orange, 1) 100%);
|
||||
background: radial-gradient(50% 150% at 50% 0, fade-out(r25.$orange, 0.65) 6%, fade-out(r25.$orange, 1) 100%);
|
||||
|
||||
.r25-c-button {
|
||||
background: $color-white radial-gradient(90% 500% at 90% 200%, fade-out(r25.$orange, 0.6) 0%, $color-white 100%);
|
||||
|
|
@ -87,7 +87,7 @@
|
|||
}
|
||||
|
||||
&:hover {
|
||||
background: radial-gradient(50% 320% at 50% 50%, fade-out(r25.$green, 0.75) 6%, fade-out(r25.$green, 1) 100%);
|
||||
background: radial-gradient(50% 150% at 50% 0, fade-out(r25.$green, 0.75) 6%, fade-out(r25.$green, 1) 100%);
|
||||
|
||||
.r25-c-button {
|
||||
background: $color-white radial-gradient(90% 500% at 90% 200%, fade-out(r25.$green, 0.5) 0%, $color-white 100%);
|
||||
|
|
@ -107,7 +107,7 @@
|
|||
}
|
||||
|
||||
&:hover {
|
||||
background: radial-gradient(50% 320% at 50% 50%, fade-out(r25.$purple, 0.65) 6%, fade-out(r25.$purple, 1) 100%);
|
||||
background: radial-gradient(50% 150% at 50% 0, fade-out(r25.$purple, 0.65) 6%, fade-out(r25.$purple, 1) 100%);
|
||||
|
||||
.r25-c-button {
|
||||
background: $color-white radial-gradient(90% 500% at 90% 200%, fade-out(r25.$purple, 0.5) 0%, $color-white 100%);
|
||||
|
|
@ -127,7 +127,7 @@
|
|||
}
|
||||
|
||||
&:hover {
|
||||
background: radial-gradient(50% 320% at 50% 50%, fade-out(r25.$teal, 0.55) 6%, fade-out(r25.$teal, 1) 100%);
|
||||
background: radial-gradient(50% 150% at 50% 0, fade-out(r25.$teal, 0.55) 6%, fade-out(r25.$teal, 1) 100%);
|
||||
|
||||
.r25-c-button {
|
||||
background: $color-white radial-gradient(90% 500% at 90% 200%, fade-out(r25.$teal, 0.5) 0%, $color-white 100%);
|
||||
|
|
@ -147,7 +147,7 @@
|
|||
}
|
||||
|
||||
&:hover {
|
||||
background: radial-gradient(50% 320% at 50% 50%, fade-out(r25.$red, 0.65) 6%, fade-out(r25.$red, 1) 100%);
|
||||
background: radial-gradient(50% 150% at 50% 0, fade-out(r25.$red, 0.65) 6%, fade-out(r25.$red, 1) 100%);
|
||||
|
||||
.r25-c-button {
|
||||
background: $color-white radial-gradient(90% 500% at 90% 200%, fade-out(r25.$red, 0.5) 0%, $color-white 100%);
|
||||
|
|
|
|||
|
|
@ -1,65 +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/.
|
||||
|
||||
@use '../lib' as r25;
|
||||
|
||||
@import '~@mozilla-protocol/core/protocol/css/includes/lib';
|
||||
|
||||
// * -------------------------------------------------------------------------- */
|
||||
// FAQs
|
||||
|
||||
.r25-faq {
|
||||
@include white-links;
|
||||
margin-top: $layout-md;
|
||||
|
||||
.r25-faq-heading {
|
||||
@include text-title-2xs;
|
||||
margin: $spacing-xl 0;
|
||||
|
||||
&::before {
|
||||
content: "";
|
||||
display: block;
|
||||
width: 100%;
|
||||
border-top: 1px solid fade-out($color-white, 0.8);
|
||||
position: relative;
|
||||
top: -$spacing-md;
|
||||
}
|
||||
}
|
||||
|
||||
p {
|
||||
max-width: $content-md;
|
||||
margin-bottom: $layout-lg;
|
||||
}
|
||||
|
||||
&.mzp-c-details .is-summary button::before {
|
||||
width: 30px;
|
||||
height: 30px;
|
||||
border-radius: 1em;
|
||||
margin-top: -1em;
|
||||
transition: background-color 100ms ease-in, transform 100ms ease-in;
|
||||
background-position: center center;
|
||||
background-size: 14px 14px;
|
||||
background-image: url("data:image/svg+xml,%3Csvg xmlns='http://www.w3.org/2000/svg' xml:space='preserve' viewBox='0 0 16 16'%3E%3Cpath fill='%23fff' d='m0 8.2 1.8-1.8 4.8 4.7V0h2.7v11.1l4.8-4.7L16 8.2 8 16 0 8.2z'/%3E%3C/svg%3E");
|
||||
|
||||
@media #{$mq-md} {
|
||||
margin-top: -0.75em;
|
||||
}
|
||||
}
|
||||
|
||||
&.mzp-c-details .is-summary button[aria-expanded="true"]::before {
|
||||
background-color: $color-white;
|
||||
transform: rotate(180deg);
|
||||
background-image: url("data:image/svg+xml,%3Csvg xmlns='http://www.w3.org/2000/svg' xml:space='preserve' viewBox='0 0 16 16'%3E%3Cpath fill='%23000' d='m0 8.2 1.8-1.8 4.8 4.7V0h2.7v11.1l4.8-4.7L16 8.2 8 16 0 8.2z'/%3E%3C/svg%3E");
|
||||
}
|
||||
|
||||
&.mzp-c-details .is-summary:hover button::before,
|
||||
&.mzp-c-details .is-summary:focus button::before {
|
||||
background-color: #555;
|
||||
}
|
||||
|
||||
&.mzp-c-details .is-summary:hover button[aria-expanded="true"]::before,
|
||||
&.mzp-c-details .is-summary:focus button[aria-expanded="true"]::before {
|
||||
background-color: #ddd;
|
||||
}
|
||||
}
|
||||
|
|
@ -51,142 +51,22 @@
|
|||
}
|
||||
}
|
||||
|
||||
.video-play {
|
||||
display: block;
|
||||
position: relative;
|
||||
margin: $spacing-xl auto 0;
|
||||
|
||||
img,
|
||||
video {
|
||||
border: 1px solid fade-out($color-black, 0.5);
|
||||
}
|
||||
|
||||
&::after {
|
||||
background: url("/media/img/mozorg/rise25/play-button.svg") center center no-repeat;
|
||||
background-size: 50px 50px;
|
||||
top: 50%;
|
||||
content: "";
|
||||
display: block;
|
||||
margin: -27px 0 0 -27px;
|
||||
height: 54px;
|
||||
width: 54px;
|
||||
position: absolute;
|
||||
left: 50%;
|
||||
transition: background-size 100ms ease-in-out;
|
||||
z-index: 2;
|
||||
}
|
||||
|
||||
&:focus-visible {
|
||||
outline: 0;
|
||||
}
|
||||
|
||||
&:hover::after,
|
||||
&:focus::after {
|
||||
background-size: 54px 54px;
|
||||
}
|
||||
}
|
||||
|
||||
.r25-c-button {
|
||||
span {
|
||||
display: none;
|
||||
}
|
||||
|
||||
&::after {
|
||||
content: " ↓";
|
||||
white-space: nowrap;
|
||||
}
|
||||
}
|
||||
|
||||
@media #{$mq-sm} {
|
||||
align-items: center;
|
||||
display: grid;
|
||||
gap: $spacing-lg;
|
||||
grid-template-areas: "notice notice"
|
||||
"video button";
|
||||
justify-content: center;
|
||||
|
||||
.r25-hero-notice {
|
||||
grid-area: notice;
|
||||
|
||||
br {
|
||||
display: none;
|
||||
}
|
||||
}
|
||||
|
||||
.video-play {
|
||||
grid-area: video;
|
||||
margin: 0;
|
||||
}
|
||||
|
||||
.r25-c-button {
|
||||
grid-area: button;
|
||||
}
|
||||
}
|
||||
|
||||
@media #{$mq-md} {
|
||||
justify-content: start;
|
||||
row-gap: $spacing-xl;
|
||||
grid-template-areas: "notice"
|
||||
"button";
|
||||
|
||||
.r25-hero-notice {
|
||||
text-align: start;
|
||||
margin: 0;
|
||||
}
|
||||
|
||||
.r25-c-button span {
|
||||
display: inline;
|
||||
}
|
||||
|
||||
.video-play {
|
||||
display: none;
|
||||
}
|
||||
}
|
||||
|
||||
@media #{$mq-lg} {
|
||||
grid-template-areas: "button notice";
|
||||
column-gap: $spacing-2xl;
|
||||
}
|
||||
|
||||
@media #{$mq-xl} {
|
||||
.r25-hero-notice br {
|
||||
display: block;
|
||||
}
|
||||
}
|
||||
}
|
||||
|
||||
.r25-hero-video {
|
||||
display: none;
|
||||
|
||||
.video-play {
|
||||
&::after {
|
||||
@include border-box;
|
||||
background: url("/media/img/mozorg/rise25/play-button.svg") right 2px center no-repeat;
|
||||
background-size: 50px 50px;
|
||||
bottom: $spacing-lg;
|
||||
color: $color-white;
|
||||
content: "Play video";
|
||||
display: block;
|
||||
font-weight: bold;
|
||||
min-height: 50px;
|
||||
padding: $spacing-md 70px $spacing-md;
|
||||
position: absolute;
|
||||
right: $spacing-lg;
|
||||
transition: background-size 100ms ease-in-out, background-position 100ms ease-in-out;
|
||||
z-index: 2;
|
||||
}
|
||||
|
||||
&:focus-visible {
|
||||
outline: 0;
|
||||
}
|
||||
|
||||
&:hover::after,
|
||||
&:focus::after {
|
||||
background-size: 54px 54px;
|
||||
background-position: right 0 center;
|
||||
}
|
||||
}
|
||||
|
||||
video,
|
||||
img {
|
||||
border: 1px solid fade-out($color-black, 0.5);
|
||||
|
|
|
|||
|
|
@ -1,128 +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/.
|
||||
|
||||
@use '../lib' as r25;
|
||||
|
||||
@import '~@mozilla-protocol/core/protocol/css/includes/lib';
|
||||
|
||||
// * -------------------------------------------------------------------------- */
|
||||
// Past winners and spread the word
|
||||
|
||||
.r25-promote {
|
||||
.r25-promote-body {
|
||||
background-image: linear-gradient(330deg, fade-out(r25.$purple, 0.6) -100px, fade-out(r25.$purple, 1) 80%);
|
||||
border-image: linear-gradient(350deg, fade-out(r25.$purple, 0.5), fade-out(r25.$purple, 1) 70%) 1;
|
||||
border-style: solid;
|
||||
border-width: 0 1px 1px;
|
||||
padding: $spacing-xl;
|
||||
margin-top: -$spacing-2xl;
|
||||
text-align: center;
|
||||
}
|
||||
|
||||
.r25-promote-video {
|
||||
text-align: center;
|
||||
margin-top: $layout-md;
|
||||
|
||||
.video {
|
||||
display: none;
|
||||
}
|
||||
|
||||
.fallback {
|
||||
display: block;
|
||||
}
|
||||
|
||||
img,
|
||||
video {
|
||||
margin: 0 auto;
|
||||
border: 1px solid fade-out($color-black, 0.5);
|
||||
}
|
||||
}
|
||||
|
||||
@media #{$mq-md} {
|
||||
.r25-promote-container {
|
||||
align-items: center;
|
||||
background-image: linear-gradient(-40deg, fade-out(r25.$purple, 0.6) -100px, fade-out(r25.$purple, 1) 80%);
|
||||
border-image: linear-gradient(-45deg, fade-out(r25.$purple, 0.5), fade-out(r25.$purple, 1) 80%) 1;
|
||||
border-style: solid;
|
||||
border-width: 0 1px 1px 0;
|
||||
column-gap: $spacing-2xl;
|
||||
display: grid;
|
||||
grid-template-areas: "video body";
|
||||
grid-template-columns: 40% 1fr;
|
||||
margin-top: -$spacing-2xl;
|
||||
padding: $spacing-2xl;
|
||||
}
|
||||
|
||||
.r25-promote-body {
|
||||
@include text-body-xl;
|
||||
background: transparent none;
|
||||
border: none;
|
||||
grid-area: body;
|
||||
margin: 0;
|
||||
padding: 0;
|
||||
text-align: start;
|
||||
}
|
||||
|
||||
.r25-promote-video {
|
||||
grid-area: video;
|
||||
margin: 0 auto;
|
||||
|
||||
.video {
|
||||
display: block;
|
||||
}
|
||||
|
||||
.fallback {
|
||||
display: none;
|
||||
}
|
||||
}
|
||||
}
|
||||
|
||||
@media #{$mq-md} and (prefers-reduced-motion: reduce) {
|
||||
.r25-promote-video {
|
||||
.video {
|
||||
display: none;
|
||||
}
|
||||
|
||||
.fallback {
|
||||
display: block;
|
||||
}
|
||||
}
|
||||
}
|
||||
}
|
||||
|
||||
.r25-c-past-cta {
|
||||
margin: $spacing-md 0 0;
|
||||
|
||||
a:link,
|
||||
a:visited {
|
||||
@include text-body-lg;
|
||||
font-weight: bold;
|
||||
text-decoration: none;
|
||||
|
||||
&::after {
|
||||
content: " →";
|
||||
transition: margin 100ms ease-in, padding 100ms ease-in;
|
||||
white-space: nowrap;
|
||||
}
|
||||
|
||||
&:hover::after,
|
||||
&:focus::after {
|
||||
left: $spacing-xs;
|
||||
margin-right: -$spacing-xs;
|
||||
padding-left: $spacing-xs;
|
||||
}
|
||||
|
||||
@supports (background-clip: text) {
|
||||
background-image: linear-gradient(110deg, r25.$orange -5%, r25.$red 35%, r25.$purple 70%, r25.$teal 108%);
|
||||
background-clip: text;
|
||||
color: fade-out($color-white, 0.8);
|
||||
transition: color 100ms ease-in;
|
||||
|
||||
&:hover,
|
||||
&:focus {
|
||||
color: $color-white;
|
||||
}
|
||||
}
|
||||
}
|
||||
}
|
||||
|
|
@ -1,134 +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/.
|
||||
|
||||
@use '../lib' as r25;
|
||||
|
||||
@import '~@mozilla-protocol/core/protocol/css/includes/lib';
|
||||
|
||||
// * -------------------------------------------------------------------------- */
|
||||
// Social share widget
|
||||
|
||||
.r25-c-social-share {
|
||||
--social-share-color: #bbb;
|
||||
@include text-body-sm;
|
||||
display: flex;
|
||||
align-items: center;
|
||||
justify-content: center;
|
||||
color: var(--social-share-color);
|
||||
|
||||
.social-share-title {
|
||||
font-weight: 900;
|
||||
margin-bottom: 0;
|
||||
margin-right: $spacing-sm;
|
||||
text-transform: uppercase;
|
||||
}
|
||||
|
||||
@media #{$mq-md} {
|
||||
justify-content: flex-start;
|
||||
}
|
||||
|
||||
.social-share-list {
|
||||
display: flex;
|
||||
margin: 0;
|
||||
|
||||
.visually-hidden {
|
||||
@include visually-hidden;
|
||||
}
|
||||
|
||||
a,
|
||||
button {
|
||||
background: transparent;
|
||||
width: 30px;
|
||||
height: 30px;
|
||||
margin-left: $spacing-xs;
|
||||
margin-right: $spacing-xs;
|
||||
border: 1px solid var(--social-share-color);
|
||||
border-radius: $border-radius-lg;
|
||||
display: flex;
|
||||
color: var(--social-share-color);
|
||||
align-items: center;
|
||||
justify-content: center;
|
||||
appearance: none;
|
||||
|
||||
&:hover,
|
||||
&:focus {
|
||||
--social-share-color: #fff;
|
||||
}
|
||||
}
|
||||
|
||||
button {
|
||||
height: 32px;
|
||||
width: 32px;
|
||||
position: relative;
|
||||
|
||||
&:hover {
|
||||
cursor: pointer;
|
||||
}
|
||||
|
||||
.social-share-copy,
|
||||
.social-share-copied {
|
||||
@include text-body-sm;
|
||||
background: $color-white;
|
||||
border-radius: $border-radius-sm;
|
||||
bottom: -50px;
|
||||
color: $color-black;
|
||||
display: block;
|
||||
height: auto;
|
||||
left: -100%;
|
||||
opacity: 0;
|
||||
padding: $spacing-xs $spacing-sm;
|
||||
pointer-events: none;
|
||||
position: absolute;
|
||||
text-align: center;
|
||||
width: max-content;
|
||||
|
||||
&::after {
|
||||
border-color: transparent transparent #fff;
|
||||
border-style: solid;
|
||||
border-width: 9px;
|
||||
content: '';
|
||||
left: calc(25% + 1px);
|
||||
opacity: 0;
|
||||
position: absolute;
|
||||
top: 1px;
|
||||
transform: translateY(-100%);
|
||||
}
|
||||
}
|
||||
|
||||
.social-share-copied {
|
||||
display: none;
|
||||
opacity: 1;
|
||||
left: -75%;
|
||||
|
||||
&::after {
|
||||
content: '';
|
||||
position: absolute;
|
||||
border-width: 9px;
|
||||
border-style: solid;
|
||||
border-color: transparent transparent #fff;
|
||||
opacity: 1;
|
||||
top: 1px;
|
||||
left: calc(25% + 1px);
|
||||
transform: translateY(-100%);
|
||||
}
|
||||
}
|
||||
|
||||
@media #{$mq-md} {
|
||||
.social-share-copied {
|
||||
&::before {
|
||||
bottom: $spacing-xs;
|
||||
}
|
||||
}
|
||||
|
||||
&:hover,
|
||||
&:active {
|
||||
.social-share-copy,
|
||||
.social-share-copy::after {
|
||||
opacity: 1;
|
||||
}
|
||||
}
|
||||
}
|
||||
}
|
||||
}
|
||||
}
|
||||
|
|
@ -7,13 +7,8 @@
|
|||
@use 'lib' as r25;
|
||||
|
||||
@use "./components/hero.scss";
|
||||
@use "./components/promote.scss";
|
||||
@use "./components/social.scss";
|
||||
@use "./components/category.scss";
|
||||
@use "./components/blog.scss";
|
||||
@use "./components/faq.scss";
|
||||
|
||||
@use "~@mozilla-protocol/core/protocol/css/components/modal";
|
||||
@use "~@mozilla-protocol/core/protocol/css/components/video";
|
||||
|
||||
@font-face {
|
||||
|
|
@ -81,7 +76,7 @@ body.rise25 {
|
|||
}
|
||||
|
||||
.r25-section-title {
|
||||
@include text-title-xl;
|
||||
@include text-title-md;
|
||||
}
|
||||
|
||||
.r25-c-button {
|
||||
|
|
@ -89,7 +84,6 @@ body.rise25 {
|
|||
@include font-size(16px);
|
||||
background: $color-black;
|
||||
border-radius: 2em;
|
||||
box-shadow: 0 -1px 2px fade-out($color-white, 0.4);
|
||||
color: $color-white;
|
||||
display: inline-block;
|
||||
font-weight: bold;
|
||||
|
|
@ -127,41 +121,3 @@ body.rise25 {
|
|||
}
|
||||
}
|
||||
}
|
||||
|
||||
// * -------------------------------------------------------------------------- */
|
||||
// Thanks page
|
||||
|
||||
.r25-thanks-body {
|
||||
text-align: center;
|
||||
|
||||
.r25-c-wordmark {
|
||||
margin: 0 auto $layout-md;
|
||||
}
|
||||
|
||||
.r25-fancy-title {
|
||||
max-width: $content-md;
|
||||
}
|
||||
}
|
||||
|
||||
.r25-thanks-newsletter {
|
||||
.mzp-c-newsletter-form {
|
||||
@include white-links;
|
||||
|
||||
.mzp-c-newsletter-title {
|
||||
@include text-body-lg;
|
||||
font-weight: normal;
|
||||
text-align: center;
|
||||
margin: 0 auto $spacing-lg;
|
||||
}
|
||||
|
||||
.mzp-c-newsletter-content {
|
||||
max-width: $content-sm;
|
||||
margin: 0 auto;
|
||||
}
|
||||
|
||||
.mzp-c-button {
|
||||
width: auto;
|
||||
border: 0;
|
||||
}
|
||||
}
|
||||
}
|
||||
|
|
|
|||
Двоичные данные
media/img/mozorg/rise25/blog-thumbnail-high-res.jpg
Двоичные данные
media/img/mozorg/rise25/blog-thumbnail-high-res.jpg
Двоичный файл не отображается.
|
До Ширина: | Высота: | Размер: 20 KiB |
Двоичные данные
media/img/mozorg/rise25/blog-thumbnail.jpg
Двоичные данные
media/img/mozorg/rise25/blog-thumbnail.jpg
Двоичный файл не отображается.
|
До Ширина: | Высота: | Размер: 11 KiB |
Двоичные данные
media/img/mozorg/rise25/hero-thumb-high-res.jpg
Двоичные данные
media/img/mozorg/rise25/hero-thumb-high-res.jpg
Двоичный файл не отображается.
|
До Ширина: | Высота: | Размер: 18 KiB |
Двоичные данные
media/img/mozorg/rise25/hero-thumb.jpg
Двоичные данные
media/img/mozorg/rise25/hero-thumb.jpg
Двоичный файл не отображается.
|
До Ширина: | Высота: | Размер: 10 KiB |
|
|
@ -1,5 +0,0 @@
|
|||
<svg xmlns="http://www.w3.org/2000/svg" xml:space="preserve" viewBox="0 0 49 48" width="49" height="48">
|
||||
<path fill="#fff" d="M24.5.5C37.5.5 48 11 48 24S37.5 47.5 24.5 47.5 1 37 1 24 11.5.5 24.5.5z" opacity=".2"/>
|
||||
<path fill="none" stroke="#fff" d="M24.5.5C37.5.5 48 11 48 24S37.5 47.5 24.5 47.5 1 37 1 24 11.5.5 24.5.5z"/>
|
||||
<path fill="#fff" d="m32.2 24-13.5 7.8V16.2c.1 0 13.5 7.8 13.5 7.8z"/>
|
||||
</svg>
|
||||
|
До Ширина: | Высота: | Размер: 408 B |
Двоичные данные
media/img/mozorg/rise25/winners-poster-high-res.jpg
Двоичные данные
media/img/mozorg/rise25/winners-poster-high-res.jpg
Двоичный файл не отображается.
|
До Ширина: | Высота: | Размер: 22 KiB |
Двоичные данные
media/img/mozorg/rise25/winners-poster.jpg
Двоичные данные
media/img/mozorg/rise25/winners-poster.jpg
Двоичный файл не отображается.
|
До Ширина: | Высота: | Размер: 13 KiB |
Загрузка…
Ссылка в новой задаче