зеркало из https://github.com/mozilla/bedrock.git
removed product stories blog referennces
This commit is contained in:
Reem H
Alex Gibson
Родитель
aa6be1f61c
Коммит
849a7cf519
|
|
@ -41,17 +41,6 @@
|
|||
<p class="c-menu-item-desc">{{ ftl('navigation-v2-join-the-fight-for-a', fallback='navigation-join-the-fight-for-a') }}</p>
|
||||
</a>
|
||||
</section>
|
||||
</li>
|
||||
<li>
|
||||
<section class="c-menu-item mzp-has-icon">
|
||||
<a class="c-menu-item-link" href="{{ url('stories.landing') }}" data-link-text="Stories Blog" data-link-type="nav" data-link-position="topnav" data-link-group="who-we-are">
|
||||
<svg class="c-menu-item-icon" viewBox="0 0 32 32" xmlns="http://www.w3.org/2000/svg"><g fill="none" stroke="#010101" stroke-linecap="round" stroke-linejoin="round" stroke-width="2" transform="translate(2 1.87868)"><path d="m8.3.4h-7c-1.1 0-2 .9-2 2v12c0 1.1.9 2 2 2h9l2 4 2-4h2c1.1 0 2-.9 2-2v-6"/><path d="m14.8-.1c.8-.8 2.2-.8 3 0s.8 2.2 0 3l-7.5 7.5-4 1 1-4z"/></g></svg>
|
||||
<h4 class="c-menu-item-title">{{ ftl('navigation-v2-stories') }}</h4>
|
||||
{% if ftl_has_messages('navigation-v2-navigation-v2-stories-about-how') %}
|
||||
<p class="c-menu-item-desc">{{ ftl('navigation-v2-stories-about-how') }}</p>
|
||||
{% endif %}
|
||||
</a>
|
||||
</section>
|
||||
</li>
|
||||
<li>
|
||||
<section class="c-menu-item mzp-has-icon">
|
||||
|
|
|
|||
|
|
@ -564,6 +564,8 @@ redirectpatterns = (
|
|||
redirect(r"/VendorDPA/?$", "https://assets.mozilla.net/pdf/VendorDPA.pdf", re_flags="i"),
|
||||
# Issue 14221
|
||||
redirect(r"^firefox/products/?$", "/products/"),
|
||||
# Issue 14252
|
||||
redirect(r"^stories/?$", "https://blog.mozilla.org/category/products/firefox/"),
|
||||
# Issue 14255
|
||||
redirect(r"^rise25/?$", "/rise25/nominate/"),
|
||||
)
|
||||
|
|
|
|||
|
|
@ -595,7 +595,6 @@ INSTALLED_APPS = [
|
|||
"bedrock.base",
|
||||
"bedrock.firefox",
|
||||
"bedrock.foundation",
|
||||
"bedrock.stories",
|
||||
"bedrock.legal",
|
||||
"bedrock.legal_docs",
|
||||
"bedrock.mozorg",
|
||||
|
|
|
|||
|
|
@ -1,3 +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/.
|
||||
|
|
@ -1,3 +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/.
|
||||
|
|
@ -1,203 +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 "stories/stories-base-article.html" %}
|
||||
|
||||
{% from "stories/includes/macros.html" import stories_article_blockquote, stories_image with context %}
|
||||
|
||||
|
||||
{% block publish_date %}2022-08-02{% endblock %}
|
||||
{% block publish_date_formatted %}August 2, 2022{% endblock %}
|
||||
|
||||
|
||||
{% set credits = [
|
||||
{
|
||||
"name": "Ray Fambro",
|
||||
"title": "Product Manager",
|
||||
"image": resp_img(
|
||||
'img/stories/credit/ray-fembro-credit.jpg',
|
||||
srcset={ 'img/stories/credit/ray-fembro-credit-high-res.jpg': '2x' },
|
||||
optional_attributes={
|
||||
'width': '114',
|
||||
'height': '131'
|
||||
},
|
||||
),
|
||||
},
|
||||
{
|
||||
"name": "Ania Safko",
|
||||
"title": "Product Manager",
|
||||
"image": resp_img(
|
||||
'img/stories/credit/ania-safko-credit.jpg',
|
||||
srcset={ 'img/stories/credit/ania-safko-credit-high-res.jpg': '2x' },
|
||||
optional_attributes={
|
||||
'width': '114',
|
||||
'height': '131'
|
||||
},
|
||||
),
|
||||
},
|
||||
{
|
||||
"name": "Jon Siddoway",
|
||||
"title": "Product Community Manager",
|
||||
"image": resp_img(
|
||||
'img/stories/credit/jon-siddoway-credit.jpg',
|
||||
srcset={ 'img/stories/credit/jon-siddoway-credit-high-res.jpg': '2x' },
|
||||
optional_attributes={
|
||||
'width': '114',
|
||||
'height': '131'
|
||||
},
|
||||
)
|
||||
},
|
||||
] %}
|
||||
|
||||
{% set related = [
|
||||
{
|
||||
"title": "Licensed to Build Together",
|
||||
"desc": "Who really owns the Firefox browser? Its copyleft license means we all do.",
|
||||
"image": resp_img(
|
||||
'img/stories/build-together.jpg',
|
||||
srcset={ 'img/stories/build-together-high-res.jpg': '2x' },
|
||||
optional_attributes={
|
||||
'class': 'card-image',
|
||||
'width': '349',
|
||||
'height': '239'
|
||||
},
|
||||
),
|
||||
"link": url('stories.articles.build-together')
|
||||
},
|
||||
{
|
||||
"title": "From Volunteer to Mozilla Community Champion",
|
||||
"desc": "An early Mozilla volunteer’s curiosity about open-source software led him to a career with a company whose mission he believes in.",
|
||||
"image": resp_img(
|
||||
'img/stories/community-champion.jpg',
|
||||
srcset={ 'img/stories/community-champion-high-res.jpg': '2x' },
|
||||
optional_attributes={
|
||||
'class': 'card-image',
|
||||
'width': '349',
|
||||
'height': '239'
|
||||
},
|
||||
),
|
||||
"link": url('stories.articles.community-champion')
|
||||
}
|
||||
] %}
|
||||
|
||||
|
||||
{% block article_title %}The Art of Engagement{% endblock %}
|
||||
{% block article_subtitle %}
|
||||
Mozilla’s vibrant community gets a direct connection to the people building the products they love.
|
||||
{% endblock %}
|
||||
{% block page_image %}{{ static('img/stories/social/art-of-engagement-social.jpg') }}{% endblock %}
|
||||
|
||||
{% block article_content %}
|
||||
<section class="c-stories-article-section">
|
||||
<div class="stories-max-width-wrapper">
|
||||
<p>Ray Fambro began by asking for feedback about all things regarding browser information organization. The product manager then got more specific: What kind of insights did the community have about tab management?</p>
|
||||
<p>Plenty, as it turned out. Every day for the next two weeks, Fambro signed in to <a href="https://connect.mozilla.org">Mozilla <i>Connect</i></a>, Mozilla’s new community platform, to listen. He reviewed comments, assessed feedback and otherwise engaged with Mozilla’s user community — one known for its talent, knowledge and an enthusiasm sometimes bordering on fervor.</p>
|
||||
|
||||
{{ stories_article_blockquote(
|
||||
quote="We’re opening up new opportunities for us to connect more with our users",
|
||||
caption="Jon Siddoway"
|
||||
)}}
|
||||
|
||||
<p class="bold">With the launch of <i>Connect</i>, Mozilla has brought that community more directly into conversations with the employees in the midst of building the products they love. The platform acts as a collaborative space where people share product feedback, submit ideas and have the kind of meaningful discussions that can impact future releases. “We’re opening up new opportunities for us to connect more with our users and make them more a part of product development,” said Product Community Manager Jon Siddoway.</p>
|
||||
<p>Of course, not everyone in the community is a developer or has an interest in code. But those aren’t necessary. Every member can offer ideas or vote on those that appeal to them, and, as <i>Connect’s</i> name implies, engage in discussions with like-minded people.</p>
|
||||
|
||||
{{ stories_image(
|
||||
image=resp_img(
|
||||
'img/stories/mozilla-connect.png',
|
||||
srcset={ 'img/stories/mozilla-connect-high-res.png': '2x' },
|
||||
optional_attributes={
|
||||
'loading': 'lazy',
|
||||
'width': '631',
|
||||
'height': '544',
|
||||
'alt': 'Mozilla Connect website, Welcome page'
|
||||
}
|
||||
),
|
||||
image_class="article-width center"
|
||||
)}}
|
||||
|
||||
<p>“<i>Connect</i> is a space where the community is not dependent on our moderators, but where members can have conversations,” Siddoway said. “Our users are passionate, and when they come to the community they see that many others share their interests and also feel strongly about Firefox and Mozilla.” Case in point: Asa Dotzler, product manager for Firefox accessibility, who was a graduate student in architecture with no coding skills when he became fascinated by <a href="{{ url('stories.articles.community-champion') }}">Mozilla’s vision and joined its community.</a></p>
|
||||
</div>
|
||||
</section>
|
||||
|
||||
<section class="c-stories-article-section">
|
||||
<div class="stories-max-width-wrapper">
|
||||
<h3 class="c-stories-article-section-title">A Sense of Belonging</h3>
|
||||
<p>Brands have been talking about community for decades, spurred largely by the rise of online forums where a single customer’s experience with a company or product, for better or worse, could be broadcast to far more people than only their family, friends and neighbors. David W. McMillan and David M. Chavis, professors at Vanderbilt University, <a href="https://www.drdavidmcmillan.com/sense-of-community/sense-of-community-a-definition-and-theory" rel="external">defined community</a> in 1986 as a feeling that members have of belonging, where members matter to each other and have faith that their needs will be met. Since then, a growing body of academic research and business books has delved into refining that notion and determining what makes a brand community succeed.</p>
|
||||
<p>Even so, community remains a vague and slippery concept at many companies. Often it is just another word marketers use to describe customers, and frequently it is a one-way street down which brands encourage consumers to take on some of the work of spreading the word about their products. That’s never been the case at Mozilla, where a passionate, highly engaged volunteer community has helped build its products from the early, bug-filled days of the first Firefox browser.</p>
|
||||
|
||||
{{ stories_image(
|
||||
image=resp_img(
|
||||
'img/stories/engagement-hero.jpg',
|
||||
srcset={ 'img/stories/engagement-hero-high-res.jpg': '2x' },
|
||||
optional_attributes={
|
||||
'loading': 'lazy',
|
||||
'width': '1010',
|
||||
'height': '519'
|
||||
}
|
||||
),
|
||||
image_class="article-width center",
|
||||
caption="Image by: Opensource.com / CC BY-SA 4.0"
|
||||
)}}
|
||||
|
||||
|
||||
|
||||
<p>At the core of the 1998 Mozilla project was a <a href="{{ url('stories.articles.build-together') }}">commitment to open-source development</a>, and the volunteers who believed in that model played a vital role in developing Firefox 1.0, released six years later. Since then, thousands of people have offered ideas, suggestions and criticisms that continue to shape the browser and other Mozilla products. Between 2017 and 2019 alone, 22,821 non-employees made more than 2 million contributions to Mozilla products, according to the 2020 report “Mozilla and the Rebel Alliance.” Almost 750,000 of those contributions focused on Firefox, with more than 65,000 specifically involving code.</p>
|
||||
<p>By the time Siddoway joined Mozilla late in 2021, its community was gathering on a clunky platform that lacked some of the capabilities needed to make interacting, moderating and organizing as easy, efficient, and enjoyable as Firefox’s leadership wanted it to be. They also hoped to enhance the connection between community members and employees.</p>
|
||||
|
||||
{{ stories_image(
|
||||
image=resp_img(
|
||||
'img/stories/mozilla-connect-message.png',
|
||||
srcset={ 'img/stories/mozilla-connect-message-high-res.png': '2x' },
|
||||
optional_attributes={
|
||||
'loading': 'lazy',
|
||||
'width': '631',
|
||||
'height': '256',
|
||||
'alt': 'Mozilla Connect messages'
|
||||
},
|
||||
),
|
||||
image_class="article-width center"
|
||||
)}}
|
||||
|
||||
<p>The first step toward those goals was to replace the previous platform with a feature-rich one that would encourage participation. <i>Connect</i> now includes new forums, discussion threads, and elements of gamification. But the heart of the platform, Siddoway said, is its idea exchange. Members can submit an idea for a new feature they’d like to see in Firefox or a new product, and others in the community can comment and vote on the idea, allowing the best ones to surface. (Siddoway noted that users should continue to report bugs through <a href="https://www.bugzilla.org/"><i>Bugzilla</i></a>.)</p>
|
||||
<p>Once building the new platform was underway, Siddoway, who’d been managing the community on his own and routing feedback and comments to employees as needed, began recruiting product managers and engineers to join him. Fambro and his colleague, Ania Safko, both desktop product managers, were the first to participate when <i>Connect</i> launched quietly in the spring. After a few weeks, Siddoway met with them to discuss how things were going.</p>
|
||||
<p>Siddoway was pleased by what he heard. The PMs reported that a lot of engaging, interesting conversations were happening. Fambro’s initial feedback request had generated dozens of responses about bookmarks and tabs, topics that elicited strong opinions among many in the community.</p>
|
||||
<p>As with any launch, there were rough spots to be worked out. Siddoway initially thought they’d have two product managers commit to two-week cycles engaging on the platform. But was that ideal? The team decided it was still too early to tell as much would depend on the number of comments coming in and how much time PMs would spend reading and responding to them.</p>
|
||||
<p>Siddoway and the product managers ultimately agreed that the community’s engagement would be most valuable to their work at two key stages of product development: at the start, when they’re brainstorming ideas for features and products, and at the end, when the developers are testing what they’ve built.</p>
|
||||
</div>
|
||||
{{ stories_article_blockquote(
|
||||
quote="We are interested in how people use Firefox and how they think about their day-to-day browsing needs.",
|
||||
caption="Ania Safko",
|
||||
class="color-accent"
|
||||
)}}
|
||||
<div class="stories-max-width-wrapper">
|
||||
<p class="bold">“It’s really useful for us to engage with users in exploratory conversations when we know we want to improve a certain experience but we haven’t made a decision about the exact solution,” Safko said. “We are interested in how people use Firefox and how they think about their day-to-day browsing needs.”</p>
|
||||
<p>The goal isn’t to define specific solutions, but to let the ideas fly. “We’re asking the community to come up with the most innovative, blue-sky ideas that can possibly address a problem we should consider solving,” said Fambro. “Sometimes you'll see really prescriptive posts that clearly highlight opportunity gaps. Although all problems need proper definition and preliminary understanding before solutioning, we still welcome all suggestions and appreciate the opportunity to learn and engage.” And if a feature has been incorporated into the browser experience, the <i>Connect</i> community can offer valuable feedback on whether it is performing as intended “in the wild,” Fambro said.</p>
|
||||
<p>The team needed to discuss another, less tangible issue: How could they keep conversations from getting derailed? “Mozilla has built a rich open source culture over the years and from the beginning has been community-focused,” said Fambro. “A lot of our loyal users are very entrenched in our development process, which comes along with a lot of opinions.”</p>
|
||||
<p>Those opinions are highly valued by employees, as well as by community members themselves. Many seasoned contributors note their long-standing commitment to Mozilla in the conversation threads. “We are grateful to be able to leverage a community of folks that know our products inside and out, many of whom have helped to build some of our core product features,” said Fambro.</p>
|
||||
<p>The flipside is that loyalty can sometimes cross the line into something a bit more challenging to navigate. “Because we’ve developed a rapport of open dialogue with our users, we sometimes risk a forum resulting in very vocal opinions,” said Fambro. “Keeping the conversations focused, on topic and respectful can sometimes be a challenge.” </p>
|
||||
<p>Siddoway’s antidote to any disagreements that might come up is transparency. Many of the complaints he’d heard in the past involved people asking why a choice was made or why something happened and not getting a clear answer from employees. On <i>Connect</i>, he wants those channels to be wide open. “As long as we're communicating with the community and sharing as much as possible about why we are doing or not doing something, people understand and trust us,” said Siddoway. “They might not necessarily agree, but as long as we have guidelines set up that allow criticism, as long as it's constructive, we can have meaningful conversations.”</p>
|
||||
</div>
|
||||
</section>
|
||||
|
||||
<section class="c-stories-article-section">
|
||||
<div class="stories-max-width-wrapper">
|
||||
<h3>Motivated by the Mission</h3>
|
||||
<p>An online community lives and dies on participation. There is no easy trick to inspire people to join or to post and comment once they do. In their research on the nature of community, McMillan and Chavis named four key factors that make a difference: membership – an understanding people have about who is in the community and why – influence, fulfillment of needs, and emotional connection.</p>
|
||||
|
||||
{{ stories_article_blockquote(
|
||||
quote="Three months after Connect launched, 4,500 people had signed up and there were about 5,000 posts and replies. Almost 45% of activity came from casual participants, five times the average.",
|
||||
class="long-quote"
|
||||
)}}
|
||||
|
||||
<p class="bold">An online community lives and dies on participation. There is no easy trick to inspire people to join or to post and comment once they do. In their research on the nature of community, McMillan and Chavis named four key factors that make a difference: membership – an understanding people have about who is in the community and why – influence, fulfillment of needs, and emotional connection.</p>
|
||||
<p>Considering Firefox’s history, perhaps it isn’t surprising that early engagement on <i>Connect</i> exceeded expectations – even with Siddoway setting a pretty high bar. In most communities, he noted, engagement follows a 90-9-1 rule, with 90% of members observing without comment, 9% chiming in occasionally and 1% – the superusers – providing the bulk of the content. Three months after Connect launched, 4,500 people had signed up and there were about 5,000 posts and replies. Almost 45% of activity came from casual participants, five times the average.</p>
|
||||
<p>Those discussions quickly made an impact on product development, too. Safko had conversations that helped shape the prototype for additional controls in Picture-In-Picture, Firefox’s popular feature that plays videos in floating, adjustable windows. The original prototype put emphasis on controlling a video timeline with a slider, but feedback pointed to forward and backward actions being a more common rewind pattern. As people often watch videos in Picture-in-Picture while doing something else, catching a moment they might have missed was useful to them. Another great contribution: After numerous requests, the product team enhanced PIP with subtitles and captions. That has both improved the feature’s accessibility for the hard of hearing and users who watch content in languages other than their primary one.</p>
|
||||
<p>The question remains, however, of what inspires people to spend their time and energy online doing what is, essentially, helping a company succeed. In other words, in McMillan and Chavis’ framework, how is the community fulfilling people’s needs? Mozilla community members surveyed for the Rebel Alliance report identified two primary motivations: support of the company’s social impact goals and personal self-improvement, such as learning new skills.</p>
|
||||
<p>Those findings dovetail with Dotzler’s explanation that both intellectual and social motivations inspired him to get up earlier each morning to spend a few hours reporting bugs and connecting with other community members. “It was fun and it was also social, “ he said. “I got to talk with people who make the browser that I love. How cool is that?”</p>
|
||||
</div>
|
||||
</section>
|
||||
|
||||
{% endblock article_content %}
|
||||
|
|
@ -1,119 +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 "stories/stories-base-article.html" %}
|
||||
|
||||
|
||||
{% from "stories/includes/macros.html" import stories_article_blockquote with context %}
|
||||
|
||||
|
||||
{% set credits = [
|
||||
{
|
||||
"name": "Mike Hoye",
|
||||
"title": "Senior Product Manager",
|
||||
"image": resp_img(
|
||||
'img/stories/credit/mike-hoye-credit.jpg',
|
||||
srcset={ 'img/stories/credit/mike-hoye-credit-high-res.jpg': '2x' },
|
||||
optional_attributes={
|
||||
'width': '114',
|
||||
'height': '131'
|
||||
},
|
||||
),
|
||||
},
|
||||
{
|
||||
"name": "Daniel Nazer",
|
||||
"title": "Senior IP and Product Counsel",
|
||||
"image": resp_img(
|
||||
'img/stories/credit/daniel-nazer-credit.jpg',
|
||||
srcset={ 'img/stories/credit/daniel-nazer-credit-high-res.jpg': '2x' },
|
||||
optional_attributes={
|
||||
'width': '114',
|
||||
'height': '131'
|
||||
},
|
||||
),
|
||||
},
|
||||
{
|
||||
"name": "Ray Fambro",
|
||||
"title": "Product Manager",
|
||||
"image": resp_img(
|
||||
'img/stories/credit/ray-fembro-credit.jpg',
|
||||
srcset={ 'img/stories/credit/ray-fembro-credit-high-res.jpg': '2x' },
|
||||
optional_attributes={
|
||||
'width': '114',
|
||||
'height': '131'
|
||||
},
|
||||
),
|
||||
},
|
||||
] %}
|
||||
|
||||
{% set related = [
|
||||
{
|
||||
"title": "The Art of Engagement",
|
||||
"desc": "Mozilla’s vibrant community gets a direct connection to the people building the products they love.",
|
||||
"image": resp_img(
|
||||
'img/stories/art-of-engagement.jpg',
|
||||
srcset={ 'img/stories/art-of-engagement-high-res.jpg': '2x' },
|
||||
optional_attributes={
|
||||
'class': 'card-image',
|
||||
'width': '349',
|
||||
'height': '239'
|
||||
},
|
||||
),
|
||||
"link": url('stories.articles.art-of-engagement')
|
||||
},
|
||||
{
|
||||
"title": "From Volunteer to Mozilla Community Champion",
|
||||
"desc": "An early Mozilla volunteer’s curiosity about open-source software led him to a career with a company whose mission he believes in.",
|
||||
"image": resp_img(
|
||||
'img/stories/community-champion.jpg',
|
||||
srcset={ 'img/stories/community-champion-high-res.jpg': '2x' },
|
||||
optional_attributes={
|
||||
'class': 'card-image',
|
||||
'width': '349',
|
||||
'height': '239'
|
||||
},
|
||||
),
|
||||
"link": url('stories.articles.community-champion')
|
||||
}
|
||||
] %}
|
||||
|
||||
|
||||
{% block publish_date %}2022-08-02{% endblock %}
|
||||
{% block publish_date_formatted %}August 2, 2022{% endblock %}
|
||||
|
||||
{% block article_title %}Licensed to Build Together{% endblock %}
|
||||
{% block article_subtitle %} Who really owns the Firefox browser? Its copyleft license means we all do.{% endblock %}
|
||||
|
||||
{% block page_image %}{{ static('img/stories/social/building-together-social.jpg') }}{% endblock %}
|
||||
|
||||
|
||||
{% block article_content %}
|
||||
<section class="c-stories-article-section">
|
||||
<div class="stories-max-width-wrapper">
|
||||
<p>Building software with the help of a volunteer community wasn’t a well known concept when Firefox got going in 1998. What is more surprising, even now, to those outside the tech industry is the idea that anyone in that community and beyond can use the browser’s source code for their own projects as well.</p>
|
||||
<p>Tech companies often claim the software they’ve built could only have come from them and only they are able to tackle the problems it solves to atttract consumers and investors. “To maintain that fiction, they can’t let anyone see how the software really works. It has to stay proprietary, owned only by the company that’s pulling the levers and telling you to ignore the man behind the curtain,” said Mike Hoye, senior product manager.</p>
|
||||
|
||||
{{ stories_article_blockquote(
|
||||
quote="If software is the cake, source code is the recipe",
|
||||
caption="Mike Hoye"
|
||||
)}}
|
||||
|
||||
<p>Open source development takes the opposite approach of creating products whose source code — if software is the cake, source code is the recipe — is available and free for anyone to view, modify and use. “You can see the recipe, how the cake is made and if you’re curious, make it yourself at home,” said Hoye.</p>
|
||||
<p>Doesn’t that make it easier for other software companies to compete? Yes, but for open source advocates a larger concept has far more weight: that this code, the communities around it, and the internet that connects them is supposed to benefit everyone. Supporters of open source projects and practices consider the values of collaboration, transparency and accountability underpinning the model as important as the specifics of software development. </p>
|
||||
</div>
|
||||
</section>
|
||||
<section class="c-stories-article-section">
|
||||
<div class="stories-max-width-wrapper">
|
||||
<h3 class="c-stories-article-section-title">Benefits for All</h3>
|
||||
<p>Firefox was built on the open source model, as were other early internet projects including the Linux kernel and the Apache web server. Though available to all, open source software comes with a license that sets some guidelines about how it can be used and shared.</p>
|
||||
<p>The key aspect of Mozilla’s license is that it is a “copyleft” license, said Senior IP and Product Counsel Daniel Nazer. In contrast to a proprietary approach, where a company fully reserves its copyright, a copyleft license allows anyone to use, distribute, or modify the source code as long as they comply with the terms of the license. That freedom is available to individuals and businesses alike. </p>
|
||||
<p>Legend has it that the idea of <a href="https://www.altlegal.com/blog/to-the-left-to-the-left-an-introduction-to-copyleft-and-open-source-software/" rel="external">copyleft began</a> in the 1970s when a developer added it to the distribution notice of BASIC programming language as a dig at Bill Gates, who’d complained about people pirating Microsoft’s Altair BASIC program. About a decade later, it took on legal significance when it was used in the distribution license for the <a href="https://www.gnu.org/" rel="external">GNU Project</a>. That license was followed by several others including the <a href="{{ url('mozorg.mpl.index') }}">Mozilla Public License</a> (MPL), which was released in 1998, with <a href="{{ url('mozorg.mpl.2.0.index') }}" rel="external">Version 2.0</a> released in 2010.</p>
|
||||
<p>The MPL includes the crucial requirement that modified versions of MPL-licensed code have to remain open source as well. “The license is designed to create a community around the code, and an infrastructure everyone can use to build and share products,” said Nazer.</p>
|
||||
<p>For consumers, the open source mindset is no small matter. Not everyone has the skills or desire to open the hood and see how a browser or app works, but knowing that others are doing so should be reassuring. “Anyone can look at the code and know exactly what it does, which is an extraordinary level of corporate transparency,” said Nazer. “If we make a promise about the privacy and security features of Firefox, we’re not asking for blind trust. You can actually go to our repositories and look at the code. That makes us accountable.”</p>
|
||||
<p>Open source culture manifests at Mozilla in other important ways. Many employees join the company because of its mission, one that guides their daily choices. “I really do believe that something as amazing as the internet should be managed and developed with a greater good and with everyone.” said Product Manager Ray Fambro</p>
|
||||
</div>
|
||||
</section>
|
||||
{% endblock %}
|
||||
|
|
@ -1,98 +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 "stories/stories-base-article.html" %}
|
||||
|
||||
{% from "stories/includes/macros.html" import stories_article_blockquote with context %}
|
||||
|
||||
{% set credits = [
|
||||
{
|
||||
"name": "Asa Dotzler",
|
||||
"title": "Product Manager",
|
||||
"image": resp_img(
|
||||
'img/stories/credit/asa-dotzler-credit.jpg',
|
||||
srcset={ 'img/stories/credit/asa-dotzler-credit-high-res.jpg': '2x' },
|
||||
optional_attributes={
|
||||
'width': '114',
|
||||
'height': '131'
|
||||
},
|
||||
),
|
||||
}
|
||||
] %}
|
||||
|
||||
{% set related = [
|
||||
{
|
||||
"title": "Licensed to Build Together",
|
||||
"desc": "Who really owns the Firefox browser? Its copyleft license means we all do.",
|
||||
"image": resp_img(
|
||||
'img/stories/build-together.jpg',
|
||||
srcset={ 'img/stories/build-together-high-res.jpg': '2x' },
|
||||
optional_attributes={
|
||||
'class': 'card-image',
|
||||
'width': '349',
|
||||
'height': '239'
|
||||
},
|
||||
),
|
||||
"link": url('stories.articles.build-together')
|
||||
},
|
||||
{
|
||||
"title": "The Art of Engagement",
|
||||
"desc": "Mozilla’s vibrant community gets a direct connection to the people building the products they love.",
|
||||
"image": resp_img(
|
||||
'img/stories/art-of-engagement.jpg',
|
||||
srcset={ 'img/stories/art-of-engagement-high-res.jpg': '2x' },
|
||||
optional_attributes={
|
||||
'class': 'card-image',
|
||||
'width': '349',
|
||||
'height': '239'
|
||||
},
|
||||
),
|
||||
"link": url('stories.articles.art-of-engagement')
|
||||
}
|
||||
] %}
|
||||
|
||||
|
||||
{% block publish_date %}2022-08-02{% endblock %}
|
||||
{% block publish_date_formatted %}August 2, 2022{% endblock %}
|
||||
|
||||
{% block article_title %}From Volunteer to Mozilla Community Champion{% endblock %}
|
||||
{% block article_subtitle %}An early Mozilla volunteer’s curiosity about open-source software led him to a career with a company whose mission he believes in.{% endblock %}
|
||||
{% block page_image %}{{ static('img/stories/social/community-champion-social.jpg') }}{% endblock %}
|
||||
|
||||
|
||||
{% block article_content %}
|
||||
<section class="c-stories-article-section">
|
||||
<div class="stories-max-width-wrapper">
|
||||
<p>Asa Dotzler, product manager for accessibility at Firefox, embodies the passion, commitment and talent of Mozilla’s community. As a graduate student in the mid-1990s, Dotzler was intrigued by open-source software. He wasn’t a developer, and his initial attempts to join the Mozilla project were rebuffed. But his effort and leadership as part of Mozilla’s nascent volunteer community led to a career doing what he loves at a company whose mission he fervently believes in. Here, in his own words, is Asa’s Mozilla story.</p>
|
||||
<p>“Back in 1996, I was studying architecture in college and had some friends who were electrical engineering majors. They were really into the Linux operating system, which used a free model where people, mostly academics, collaborated on the software.</p>
|
||||
<p>I thought it was a really neat way for people to pool their collective resources to build something that typically would be made by a large commercial outfit. In addition, it came with a license that allowed them to modify it in any way they wanted.</p>
|
||||
<p>But one day they showed it to me and I realized it was just Unix, which I used at university for email and was the bane of my existence. I said ‘forget it.’</p>
|
||||
<p>In 1998, Netscape announced it was going to open-source the code for its browser and give it away with the idea that people from around the world could collaborate to improve that software. By harnessing the resources of the internet community, they’d be able to more effectively compete with Microsoft.</p>
|
||||
{{ stories_article_blockquote(
|
||||
quote="All of a sudden instead of it being me and five or 10 other non-programmers trying to get involved, there were like 10,000 non-programmers trying to get involved, because everyone could play with it.",
|
||||
caption="Asa Dotzler",
|
||||
class="long-quote"
|
||||
)}}
|
||||
<p>So now there was the development model I thought was really neat combined with a product I actually used. I decided to insinuate myself into that somehow.</p>
|
||||
<p>When they released the source code a few months later, I downloaded it on my 54-kbps modem. When I looked to double-click on something to make it start, there was nothing. It wasn’t end-user software. It was the recipe to make the browser. I couldn’t do anything because I didn’t have the developer tools to turn the source code into a running program. </p>
|
||||
<p>Netscape had created a group of about 10 employees to become the leaders of the Mozilla project. A group of us reached out and said we want to help, and they basically said go away. They wanted programmers.</p>
|
||||
<p>Some community members and I found out that occasionally a programmer would convert the source code into an app you could run on your computer and post it to a website, so then I could get a snapshot of what the browser was looking like and play with it. But it was horrible. It broke, and it crashed, and it just didn’t work.</p>
|
||||
<p>I started reporting problems to its open bug tracking system, the ticketing system where you can give technical feedback on what’s working and not working. And the developers closed my bug reports and said ‘you don’t know what you’re talking about. You’re not sophisticated enough. You’re not a programmer and you’re wasting our time.’</p>
|
||||
<p>Over time I learned what they wanted in a good bug report, what details you needed to include so it would be actionable by a programmer. I got pretty good at writing those bug reports.</p>
|
||||
<p>The community – maybe I had a hand in it – convinced Mozilla’s leadership team to start making downloadable apps available on a daily basis. All of a sudden instead of it being me and five or 10 other non-programmers trying to get involved, there were like 10,000 non-programmers trying to get involved, because everyone could play with it.</p>
|
||||
<p>A bunch of bad bug reports started to get submitted that were like my early ones that were not helpful. And the developers were overwhelmed and said they were going to have to close down this public bug tracker.</p>
|
||||
{{ stories_article_blockquote(
|
||||
quote="I got to talk with people who make the browser that I love. How cool is that?",
|
||||
caption="Asa Dotzler"
|
||||
)}}
|
||||
<p>I told them I’d go in and try to fix all of those problematic bug reports. I lived in Austin at the time, which gave me a time zone advantage over the West Coast. I had to get up early for work, but I’d get up a couple hours earlier and look at any bug reports filed by people that didn’t have Netscape or Mozilla email addresses – those would be volunteers.</p>
|
||||
<p>And then I got overwhelmed. I created a group of people who could help me. I instituted a weekly event, where every Tuesday for about six hours I would be online and I would train new people.</p>
|
||||
<p>It was just a hobby. It was fun and it was also social. I got to talk with people who make the browser that I love. How cool is that?</p>
|
||||
<p>Pretty soon we had about 50,000 people downloading those apps every single day. I got credit for a bunch of the good feedback people were giving because I created the tutorial days. And Mitchell Baker, who was the head of the Mozilla leadership group and responsible for the community side, asked me if I wanted a job doing this full time. I quit my job, my wife and I packed up, and we moved to the Bay Area.”</p>
|
||||
</div>
|
||||
</section>
|
||||
|
||||
{% endblock %}
|
||||
|
|
@ -1,101 +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 "stories/stories-base-article.html" %}
|
||||
|
||||
{% from "stories/includes/macros.html" import stories_article_blockquote, stories_image with context %}
|
||||
|
||||
{% block body_class %}theme-light-blue{% endblock %}
|
||||
|
||||
{% set featured = true %}
|
||||
|
||||
{% set credits = [{
|
||||
"name": "Karen Kim",
|
||||
"title": "Product Manager ",
|
||||
"image": resp_img(
|
||||
'img/stories/credit/karen-kim-credit.jpg',
|
||||
optional_attributes={
|
||||
'width': '114',
|
||||
'height': '131'
|
||||
},
|
||||
),
|
||||
"photo_credit": "Photo credit: © Karen Kim"
|
||||
}] %}
|
||||
|
||||
{% set related = [
|
||||
{
|
||||
"title": "Raising Technology’s EQ",
|
||||
"desc": "Pamela Pavliscak studies the impact of technology and how we feel. Here’s why she thinks we’re entering the era of big emotion.",
|
||||
"image": resp_img(
|
||||
'img/stories/raising-technology-eq-500.jpg',
|
||||
optional_attributes={
|
||||
'class': 'card-image',
|
||||
'width': '349',
|
||||
'height': '239'
|
||||
},
|
||||
),
|
||||
"link": url('stories.articles.raising-technology-eq')
|
||||
},
|
||||
{
|
||||
"title": "The Joy of Color",
|
||||
"desc": "The internet is supposed to be fun. Firefox gives color to the gray world of browsing with seasonal shades and a new collaboration with former Nike sneaker designer Keely Alexis.",
|
||||
"image": resp_img(
|
||||
'img/stories/joy-of-color.jpg',
|
||||
srcset={ 'img/stories/joy-of-color-high-res.jpg': '2x' },
|
||||
optional_attributes={
|
||||
'class': 'card-image',
|
||||
'width': '349',
|
||||
'height': '239'
|
||||
},
|
||||
),
|
||||
"link": url('stories.articles.joy-of-color'),
|
||||
}
|
||||
] %}
|
||||
|
||||
|
||||
{% block publish_date %}2023-02-06{% endblock %}
|
||||
{% block publish_date_formatted %}February 6, 2023{% endblock %}
|
||||
|
||||
{% block article_title %}Dreaming Then Building With Platform Discovery{% endblock %}
|
||||
{% block article_subtitle %}Product manager Karen Kim kicked off the chat with a question: “How can we…?” Several Zoom meetings and one Miro board later, her team had a solid wishlist of engineer-dreamed ideas to pick from and deliver.{% endblock %}
|
||||
{% block page_image %}{% endblock %}
|
||||
|
||||
|
||||
{% block article_content %}
|
||||
<section class="c-stories-article-section">
|
||||
<div class="stories-max-width-wrapper">
|
||||
<p>The Firefox web platform team often runs behind the scenes: People only take notice when things go wrong, like when a website breaks. Work revolves around Gecko, the engine that runs Firefox, and its ability to process and bring online content to your screen. Gecko is one of only three major engines shared among the many browsers we see today. So why should we not innovate based on our own engine’s unique qualities and capabilities to advance the web?</p>
|
||||
<p>In the fall of 2021, Kim was approached by former Platform Internationalization Technical Lead Manager Zibi Braniecki (now a Mozilla alumni) with a hypothesis rooted to an internal problem: <strong>How can we make our product development process more inclusive? How can we make it more joyful to <em>build</em>?</strong> It made a lot of sense: Mozilla’s engineers have their finger on the pulse of the newest web technologies. Instead of approaching an engineer with a “here’s what we decided, now build it” attitude, why not partner up early, share ideas and build some magic together for the community?</p>
|
||||
<p>In her book <cite>Continuous Discovery Habits</cite>, Teresa Torres emphasizes innovating in a product trio, which is comprised of a product manager, a software engineer and a designer. “When a product trio is tasked with an outcome, they have a choice,” she says. “They can choose to engage with customers, do the work required to truly understand their customers’ context, and focus on creating value for their customers.” Each role takes on a different area of expertise, so sharing these contexts early and using them to identify people-focused opportunities are integral to smooth <a href="https://www.atlassian.com/work-management/project-collaboration/cross-functional-teams">cross-functional</a> dynamics.</p>
|
||||
<p>Following the conversation with Braniecki, Kim folded Torres’ insights into a series of blue sky (as in the sky’s the limit) sessions with platform engineering teams. If you know your improv, the objective was to foster “yes, and! energy” first: “If the sky’s the limit, what technologies that you’ve seen in movies like ‘The Matrix’ or ‘Mission Impossible’ and books do you wish we could have in Firefox? <strong>How can we harness Gecko to deliver a prototype to people?”</strong></p>
|
||||
<p>“Stop energy”— or setting limits by ruling out functionalities that fall out of scope — could come later.
|
||||
These blue sky sessions led to awesome ideas from engineers across the platform organization. The next step was to prioritize an idea that one to two engineers could build over a short development cycle. A committee of product managers and engineers walked through each idea and compiled a shortlist based on the following criteria: the Firefox 2022 vision, <a href="https://www.mozilla.org/en-US/about/webvision/full/">Mozilla’s vision for the web</a> and big 2022 release themes. The ideal project needed to (1) align well with Mozilla’s current organizational priorities, and (2) have the potential to meaningfully impact the overall user experience. The shortlist then went through another review, this time to determine which idea would be the most feasible to build within the expected timeframe.</p>
|
||||
<p>Text recognition (the ability to copy text directly from images, aka “Optical Character Recognition”) was selected to be the inaugural feature.</p>
|
||||
<p>Now, onto how the text recognition capability was built.</p>
|
||||
<p>Formal feature experiments are rare for the platform team, so platform discovery work became a new outlet for a growing experimental culture at Mozilla. The aim for this project was to build and test incrementally in a lightweight and low-friction environment. On top of Torres’ principles, the platform discovery process was designed to validate the theory that this environment could support a successful “product trio” moving nimbly through exploration and quick learnings.</p>
|
||||
<p>To kick off production, Kim worked closely with a group of platform engineers as the product manager. After further scoping, they determined that they could ship text recognition the fastest if they started with macOS. Shortly after that, UX designers joined the project, and they soon determined what the prototype would look like. From then on, Kim from product, Greg Tatum from engineering, and Ryan Casey from design became a tight-knit trio to get the pilot feature across the finish line.</p>
|
||||
<p>Building off of that aforementioned “yes, and! energy,” the team sought to make Text Recognition useful, accessible, and delightful – one that could positively impact the digital lives of users with disabilities/disabled users<sup id="note-1-content"><a href="#note-1"><span class="visually-hidden">Footnote </span>[1]</a></sup> in particular. “Images make up a huge chunk of the content that we love to share with family and friends via text or social media,” Kim says, “but by nature, they’re limited. Internet users are estimated to share about <a href="https://theconversation.com/3-2-billion-images-and-720-000-hours-of-video-are-shared-online-daily-can-you-sort-real-from-fake-148630">3.2 billion images daily</a>, yet we continue to exclude members of our community who are blind or have low vision from accessing a medium that we enjoy so frequently!” In the industry, strides had been made to make images more inclusive. For example, <a href="https://blog.twitter.com/en_us/topics/product/2022/making-images-twitter-more-accessible">alternative or alt text</a> has emerged in the most prominent social media platforms. “We wanted to prioritize a meaningful feature that would stretch the traditional barriers of a hugely popular medium, but in order to build more mindfully, we needed to gather more awareness of inclusive design. That’s why we wanted to include our accessibility (a11y) team as early as possible.”</p>
|
||||
<p>With guidance from Morgan Rae Reschenberg, senior accessibility platform engineer, the text recognition trio drafted more a11y-friendly designs, added screen reader support to the prototype, and ran thorough quality assurance testing to ensure a smooth experience that can reach as many of our community members as possible. If you own a Mac and use Firefox 106 or higher, you can use <a href="https://www.perkins.org/resource/mac-voiceover/">VoiceOver</a> to read out the results when you <a href="https://support.mozilla.org/en-US/kb/text-recognition">copy text from images</a> — even in several different languages. Jamie Teh, co-creator of the screen reader <a href="https://www.nvaccess.org/about-nvda/">NVDA</a> and Morgan’s colleague, <a href="https://blog.mozilla.org/en/products/firefox/firefox-news/firefox-accessibility-text-recognition-screen-readers/">put the partnership into words</a>: “One of the joys of inclusive design is creating products that a lot of people can use but can be especially beneficial for some. Text recognition is part of our effort to make accessibility and inclusion an even bigger part of our process across Mozilla… The Firefox desktop platform and front-end teams got us involved early on so that when the feature shipped, it’s immediately accessible and delightfully so, rather than just ticking the required boxes.” It goes beyond cutting down time away from your browsing experience since you don’t have to retype the caption in your favorite meme or logistics from an event flyer — an accessible version of text recognition can open up a traditionally closed source of content such as an image with text to broader audiences.</p>
|
||||
</div>
|
||||
</section>
|
||||
{{ stories_article_blockquote(
|
||||
quote="One of the joys of inclusive design is creating products that a lot of people can use but can be especially beneficial for some.",
|
||||
caption="Jamie Teh, accessibility tech lead",
|
||||
class="color-accent"
|
||||
)}}
|
||||
<section class="c-stories-article-section">
|
||||
<div class="stories-max-width-wrapper">
|
||||
<p>It is thrilling to say that the contributors involved in the project will continue to work closely with Morgan and Jamie and refine the UX for Firefox’s text recognition capability. The feature will extend into other operating systems and become more joyful and easier to use.</p>
|
||||
<p>The entire discovery process was driven by relationships, within the product trio and among partners. With the help of our accessibility, legal and QA teams, along with our internal Mozillian “Foxfooders,” text recognition got robust love and support from day one to delivery. The trio designed, built, gathered more insights, made some changes based on those insights, and moved forward. Maire Reavy, Firefox platform engineering director and project sponsor, said, “Relationships are built on trust, and trust is currency for a low-friction environment where we can be reactive and nimble.” To that point, relationships can be a product manager’s most important asset. Building trust by constantly communicating and opening up the floor for early collaboration can lead to a shared and <em>felt</em> product vision that can spark excitement and keep morale high. Trust also helps you get context, make decisions, align more easily OR apply a “disagree and commit” policy when you need to move forward. Relationships allow for more bonding and learning — there’s more spirit in the actual building of a product.</p>
|
||||
{{ stories_article_blockquote(
|
||||
quote="Relationships are built on trust, and trust is currency for building in a low-friction environment where we can be reactive and nimble.",
|
||||
caption="Maire Reavy, Firefox platform engineering director"
|
||||
)}}
|
||||
<p>Platform discovery was a process – a cross-functional best-practice – where Mozillians could generate new ideas that could unlock the power and potential of Gecko. Stakeholders across disciplines identified potential growth areas where Mozilla could invest in early, and they brought together a product trio that tested, adapted and grew a feature in shorter cycles. In building text recognition, the four disciplines of product, engineering, design, and accessibility came together to ship a meaningful, joyful feature.</p>
|
||||
<p id="note-1"><sup><a href="#note-1-content"><span class="visually-hidden">Return to content for footnote </span>[1]</a></sup>Author’s Note: The language around disability is ever-evolving, and currently, the most appropriate term is up to individual preference. Since we are referring to a broader group instead of an individual, we chose this term because it covers a) the people who are disabled because that is the way society treats them, b) the people who are disabled because of a medical condition or consider disability part of their core identity, and c) the people who identify as both.</p>
|
||||
</div> <!-- .stories-max-width-wrapper -->
|
||||
</section> <!-- .c-stories-article-section -->
|
||||
{% endblock %}
|
||||
|
|
@ -1,203 +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 "stories/stories-base-article.html" %}
|
||||
|
||||
{% from "stories/includes/macros.html" import stories_article_blockquote, stories_image with context %}
|
||||
|
||||
{% block body_class %}theme-green{% endblock %}
|
||||
|
||||
{% set credits = [
|
||||
{
|
||||
"name": "Ingrid Fetell Lee",
|
||||
"title": "Designer and author",
|
||||
"image": resp_img(
|
||||
'img/stories/credit/ingrid-fetell-lee-credit.jpg',
|
||||
optional_attributes={
|
||||
'width': '114',
|
||||
'height': '131'
|
||||
},
|
||||
),
|
||||
"photo_credit": "Photo credit: © Ingrid Fetell Lee"
|
||||
},
|
||||
{
|
||||
"name": "Amber Case",
|
||||
"title": "Cyborg anthropologist and UX designer",
|
||||
"image": resp_img(
|
||||
'img/stories/credit/amber-case-credit.jpg',
|
||||
optional_attributes={
|
||||
'width': '114',
|
||||
'height': '131'
|
||||
},
|
||||
),
|
||||
"photo_credit": "Photo credit: © Amber Case"
|
||||
},
|
||||
{
|
||||
"name": "Keely Alexis",
|
||||
"title": "Streetwear and sneaker designer",
|
||||
"image": resp_img(
|
||||
'img/stories/credit/keely-alexis-credit.jpg',
|
||||
optional_attributes={
|
||||
'width': '114',
|
||||
'height': '131'
|
||||
},
|
||||
),
|
||||
"photo_credit": "Photo credit: © Keely Alexis"
|
||||
},
|
||||
{
|
||||
"name": "Mikal Lewis",
|
||||
"title": "Senior director of product management at Firefox",
|
||||
"image": resp_img(
|
||||
'img/stories/credit/mikal-lewis-credit.png',
|
||||
optional_attributes={
|
||||
'width': '114',
|
||||
'height': '131'
|
||||
},
|
||||
),
|
||||
"photo_credit": "Photo credit: © Mikal Lewis"
|
||||
}
|
||||
] %}
|
||||
|
||||
{% set related = [
|
||||
{
|
||||
"title": "The Art of Engagement",
|
||||
"desc": "Mozilla’s vibrant community gets a direct connection to the people building the products they love.",
|
||||
"image": resp_img(
|
||||
'img/stories/art-of-engagement.jpg',
|
||||
srcset={ 'img/stories/art-of-engagement-high-res.jpg': '2x' },
|
||||
optional_attributes={
|
||||
'class': 'card-image',
|
||||
'width': '349',
|
||||
'height': '239'
|
||||
},
|
||||
),
|
||||
"link": url('stories.articles.art-of-engagement')
|
||||
},
|
||||
{
|
||||
"title": "From Volunteer to Mozilla Community Champion",
|
||||
"desc": "An early Mozilla volunteer’s curiosity about open-source software led him to a career with a company whose mission he believes in.",
|
||||
"image": resp_img(
|
||||
'img/stories/community-champion.jpg',
|
||||
srcset={ 'img/stories/community-champion-high-res.jpg': '2x' },
|
||||
optional_attributes={
|
||||
'class': 'card-image',
|
||||
'width': '349',
|
||||
'height': '239'
|
||||
},
|
||||
),
|
||||
"link": url('stories.articles.community-champion')
|
||||
}
|
||||
] %}
|
||||
|
||||
{% block publish_date %}2022-10-18{% endblock %}
|
||||
{% block publish_date_formatted %}October 18, 2022{% endblock %}
|
||||
|
||||
{% block article_title %}The Joy of Color{% endblock %}
|
||||
{% block article_subtitle %}The internet is supposed to be fun. Firefox gives color to the gray world of browsing with seasonal shades and a new collaboration with former Nike sneaker designer Keely Alexis.{% endblock %}
|
||||
|
||||
{% block page_image %}{{ static('img/stories/social/joy-of-color-social.jpg') }}{% endblock %}
|
||||
|
||||
{% block article_content %}
|
||||
<section class="c-stories-article-section">
|
||||
<div class="stories-max-width-wrapper">
|
||||
<p>As she began hunting for what brings people joy, Ingrid Fetell Lee quickly discovered the power of color. According to her, it starts in our DNA. Spotting ripe fruits and tender greens among the trees was an evolutionary advantage, but it took a series of genetic mutations spanning tens of millions of years before bichromatic humans developed color vision. Now bestowed with the gift of seeing color, the gradient of grays transformed into a rainbow of hues.</p>
|
||||
<p>“Of course, we don't look at a brightly colored wall now and think ‘I'm going to eat that,’ but because of how our brains evolved there’s a primal feeling of energy and anticipation that we get from seeing bright color,” said Lee, designer, author and founder of the <a href="https://aestheticsofjoy.com/" rel="external noopener">Aesthetics of Joy.</a></p>
|
||||
{{ stories_article_blockquote(
|
||||
quote="Color is a nourishing source of joy we see in nature."
|
||||
)}}
|
||||
<p>Color is a nourishing source of joy we see in nature. Conversely, in digital environments—where people inhabit most of their day—is a lackluster metaverse decorated in monochromatic grays. Despite the myriad advances since the personal computer was invented decades ago, the same color palette that plagued its original design <em>still</em> remains in today's upgraded versions.</p>
|
||||
<p>The internet we know today has evolved from a place to perform a specific task into a thriving, creative, (dare we say it) essential platform that touches most aspects of our lives. For that reason, Firefox decided now is the time for a more colorful web, one that can spark joy and offer a richer user experience.</p>
|
||||
<p>Firefox has answered with colorways, a new browser feature that brings the internet to life with color. Firefox users can now customize their browsers by choosing from seasonal shades and limited-edition color drops (and change them as often as they like).</p>
|
||||
<p>“Privacy has been part of Mozilla’s vision from day one, and now we’re making the connection that a safe and joyful internet is a colorful one,” said Mikal Lewis, senior director of product management at Firefox. “We know we are spending more time in this digital ecosystem—not the concrete jungle, but the digital jungle. So much more of our life is flowing through what have historically been these gray boxes. And we don’t really tolerate this type of what I would say are one-size-fits-all tools anywhere else in our lives.”</p>
|
||||
{{ stories_article_blockquote(
|
||||
quote="‘Independent Voices’ are the voices of the past and present that create a better future.",
|
||||
caption="Keely Alexis"
|
||||
)}}
|
||||
</div>
|
||||
</section>
|
||||
<section class="c-stories-article-section">
|
||||
<div class="stories-max-width-wrapper">
|
||||
<p>Behind “Independent Voices,” the new Colorways drop, is streetwear and sneaker designer Keely Alexis. In choosing to work with Mozilla for her first collaboration with a technology company, Alexis—best known for the Air Jordans and other sneakers she created at Nike—created bold and vibrant colored themes, Colorways, based on values she shares with the company. “‘Independent Voices’ are the voices of the past and present that create a better future,” she said. “I chose this [analogy] as my inspiration for the collaboration because it feels authentic to me but it also aligns with Firefox and the vision that we can make the world better, on the internet and beyond.”</p>
|
||||
{{ stories_image(
|
||||
image=resp_img(
|
||||
'img/stories/joy-of-color-sneakers.jpg',
|
||||
srcset={ 'img/stories/joy-of-color-sneakers-high-res.jpg': '2x' },
|
||||
optional_attributes={
|
||||
'loading': 'lazy',
|
||||
'width': '878',
|
||||
'height': '864',
|
||||
'alt': 'green and white sneakers showcased on white fur rug'
|
||||
},
|
||||
),
|
||||
image_class="article-width",
|
||||
caption='Photo credit: © Keely Alexis',
|
||||
)}}
|
||||
</div>
|
||||
</section>
|
||||
<section class="c-stories-article-section">
|
||||
<div class="stories-max-width-wrapper">
|
||||
<h3 class="c-stories-article-section-title">Why the Web Is Gray</h3>
|
||||
<p>Our innate captivation with color is a key reason, a bit paradoxically, for its limited use in the digital environment. As technology developed, it took its cues from a technical culture in the throes of efficiency (often defined by a minimalist aesthetic at the mercy of improving upon predecessor versions, instead of disrupting all prior designs of cyberspace).</p>
|
||||
<p>The somber tones that plague digital design have a parallel to modern architecture: design in the service of efficiency, reduced to its most simple form. The modernist movement of the early 20th century turned sharply away from superfluous decoration, including maximalist “ornamentation” (think of turning away from centuries of maximalist decoration: chinoiserie, art nouveau, the arts & crafts movement, etc.). Lee referred to “Ornament and Crime,” a manifesto in which architect Adolph Loos decried the use of decoration for decoration’s sake, in favor of useful objects as influential in the shift toward rectilinear buildings that were reduced to the most simplified form with no “unnecessary” features. The theory was that only those who lacked restraint—children and people in non-Western societies—favored overtly decorative design fraught with unnecessary use of color (color used without purpose or intention).</p>
|
||||
<p> “Holding back from ornamentation was a sign of spiritual strength, so if you paraded conspicuous decoration overwrought with an abundance of color, you were basically showcasing your own moral weakness,” said Lee, referencing Loos’ essay.</p>
|
||||
<p>The shift toward full blown modernism manifested the notion that “Modern” people stray away from conspicuous decoration and therefore overuse of color, which became a trope in modern culture. Restraint use of color and minimalism became the status quo among those who considered themselves arbiters of taste. Architecture and interior design embraced a restrained use of color.</p>
|
||||
<p>The rise of the pared down aesthetic neatly dovetailed with society’s growing obsession with productivity (think of Le Corbusier’s search for standardization, and standards lead to perfection). In the drive for maximum efficiency, places from factories to call centers to offices to homes were designed for productivity—in work and in life. Workers were viewed not as individuals, but cogs in a machine that companies could endlessly fine-tune.</p>
|
||||
<p>“A lot of us have been made to feel that the use of color is unnecessary or immature, and so we tell ourselves that we <em>should</em> limit our use of color,” said Lee. “I think that has also influenced the development of technology.”</p>
|
||||
</div>
|
||||
</section>
|
||||
<section class="c-stories-article-section">
|
||||
<div class="stories-max-width-wrapper">
|
||||
<h3 class="c-stories-article-section-title">Beyond Function to Feeling</h3>
|
||||
<p>Beyond the cultural narrative, technology’s muted palette is primarily the result of choices made for the purpose of functionality. “Nature does a really good job with color—it’s harmonious and nuanced,” said Amber Case, a cyborg anthropologist and UX designer. “But in the human world, we have a lot of supernormal stimuli, so we design first without color, then we can add color to it.”</p>
|
||||
<p>Once functionality is achieved, the addition of color becomes deliberate (and secondary). Designers add color to guide people’s attention and prompt action. “The people who are best at using color online are obviously advertisers,” said Case. “They know exactly what color to use to bypass the ego and frontal cortex to get people to take action.”</p>
|
||||
<p>Those bright “buy now” buttons and banner ads succeed because of the deep connection between color and human emotion. That link, however, also undermines some of the theories that led to dull-colored virtual environments. Stripping an environment of distractions to enhance productivity is, at best, partially viable. There are some good reasons to limit distractions in digital spaces. For example, subdued colors on a website or platform can help backgrounds retreat, keeping the focus on content. Conversely, the pinging and popping of notifications can also negatively impact concentration.</p>
|
||||
<p>Some “distractions,” however, boost our mood and productivity. At the top of the list: the right balance of color and light. Colorful artwork on walls and windows that reveal a glimpse of sky or trees can reenergize people throughout the day. “You can't sit for eight hours a day and stare at the laptop,” said Lee. “We know that people perform better, and are actually more productive and more efficient when they have ‘distractions’ that are beneficial.”</p>
|
||||
<p>“Research from several countries,” said Lee, “concluded that people in more colorful work environments are more alert, confident, friendly, and joyful than people working in drab spaces. Those studies were conducted in physical environments, but I have to think our response to it is so deep and so hardwired that it would apply in the digital realm.”</p>
|
||||
{{ stories_image(
|
||||
image=resp_img(
|
||||
'img/stories/joy-of-color-window-wall.jpg',
|
||||
srcset={ 'img/stories/joy-of-color-window-wall-high-res.jpg': '2x' },
|
||||
optional_attributes={
|
||||
'loading': 'lazy',
|
||||
'width': '750',
|
||||
'height': '1125',
|
||||
'alt': 'multi-colored windows form the wall of a building'
|
||||
},
|
||||
),
|
||||
image_class="article-width",
|
||||
caption='Image credit: Felix Dubois-Robert on Unsplash',
|
||||
)}}
|
||||
<p>Firefox’s research confirmed that to be true:. “We identified color as a way to connect with people across all divides. It is a universal language that transcends the boundaries of our diverse verbal languages,” said Lewis. Early tests of the concept were resoundingly positive, and Firefox decided to include the option in future releases for desktop (and to change the typical language associated with technology’s look and feel). Wallpapers adds color to mobile with a limited edition “Independent Voices”-themed collection, aligning the platforms.</p>
|
||||
<p>“We chose to call it ‘colorways’ rather than themes to show we are branching out from our ‘language of browser’ to speak the language of everyday life and everyday users,” said Lewis. “It feels like a natural extension to allow people to use this tool that they’re leveraging every day to feel like more of their own: to feel fresh, to be exciting, to just bring in that small moment of delight to their day.”</p>
|
||||
</div>
|
||||
</section>
|
||||
<section class="c-stories-article-section">
|
||||
<div class="stories-max-width-wrapper">
|
||||
<h3 class="c-stories-article-section-title">Building a More Inclusive Web</h3>
|
||||
{{ stories_article_blockquote(
|
||||
quote="The appreciation of color may be a human universal, but preferences, even perceptions, are highly variable."
|
||||
)}}
|
||||
<p>The appreciation of color may be a human universal, but preferences, even perceptions, are highly variable. They can also change with time, moods, and circumstances. When researching a book about sound and design, Case found that people tend to enjoy switching up colors every few months. They grow tired of a shade, or like to align their choice with the changing seasons. In traditional Japanese homes, Case noted, people alter the color scheme in one part of a room as the colors outdoors shift through the seasons. “You may have a home where design is very minimal, but there is a seasonal palette,” said Case. “Not everyone would want a Christmas-colored website obviously, but I liken it to painting your nails to have a seasonal color palette.”</p>
|
||||
<p>Lee also has found that many people have lost touch with how particular colors affect them personally: “We all have this intuition for what feels good to us, either in our surroundings or in our technology, and because we've been conditioned to accept gray bland interiors and color devoid tech we've sort of lost touch with that intuition.”</p>
|
||||
<p>In that context, the option to customize a browser with color, such as colorways allows, is not just a playful decorative touch. “I think it's a way to reconnect with our intuition and what feels good,” said Lee. “We’re cut off from it because we live these productivity-driven lives.”</p>
|
||||
<p>Case argued giving people more choices to design their digital lives is a form of inclusivity. “It’s not the colors themselves that are inclusive, it’s that giving a choice is inclusive rather than people being handed something in the one-size-fits all environment—one that we are forced to live in now,” she said. “The opportunity to allow people to play with color is the kind of thinking that is bringing humanity to a joyous internet.”</p>
|
||||
{{ stories_image(
|
||||
image=resp_img(
|
||||
'img/stories/joy-of-color-colorways.png',
|
||||
srcset={ 'img/stories/joy-of-color-colorways-high-res.png': '2x' },
|
||||
optional_attributes={
|
||||
'loading': 'lazy',
|
||||
'width': '708',
|
||||
'height': '780',
|
||||
'alt': 'vibrantly illustrated green eye surrounded by blue heart, gold crown, purple headphones, red ball, and orange sneakers'
|
||||
},
|
||||
),
|
||||
image_class="article-width",
|
||||
caption='Image credit: Final artwork for Colorways'
|
||||
)}}
|
||||
</div>
|
||||
</section>
|
||||
{% endblock %}
|
||||
|
|
@ -1,103 +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 "stories/stories-base-article.html" %}
|
||||
|
||||
{% from "stories/includes/macros.html" import stories_article_blockquote with context %}
|
||||
|
||||
{% block body_class %}theme-orange{% endblock %}
|
||||
|
||||
{% set credits = [
|
||||
{
|
||||
"name": "Pamela Pavliscak",
|
||||
"title": "Tech Emotionographer, Author, Speaker, Lecturer",
|
||||
"image": resp_img(
|
||||
'img/stories/credit/pamela-pavliscak-credit.jpg',
|
||||
optional_attributes={
|
||||
'width': '114',
|
||||
'height': '131'
|
||||
},
|
||||
),
|
||||
"photo_credit": "Photo Credit: © Pamela Pavliscak"}
|
||||
] %}
|
||||
|
||||
{% set related = [
|
||||
{
|
||||
"title": "The Joy of Color",
|
||||
"desc": "The internet is supposed to be fun. Firefox gives color to the gray world of browsing with seasonal shades and a new collaboration with former Nike sneaker designer Keely Alexis.",
|
||||
"image": resp_img(
|
||||
'img/stories/joy-of-color.jpg',
|
||||
srcset={ 'img/stories/joy-of-color-high-res.jpg': '2x' },
|
||||
optional_attributes={
|
||||
'class': 'card-image',
|
||||
'width': '349',
|
||||
'height': '239'
|
||||
},
|
||||
),
|
||||
"link": url('stories.articles.joy-of-color'),
|
||||
},
|
||||
{
|
||||
"title": "The Art of Engagement",
|
||||
"desc": "Mozilla’s vibrant community gets a direct connection to the people building the products they love.",
|
||||
"image": resp_img(
|
||||
'img/stories/art-of-engagement.jpg',
|
||||
srcset={ 'img/stories/art-of-engagement-high-res.jpg': '2x' },
|
||||
optional_attributes={
|
||||
'class': 'card-image',
|
||||
'width': '349',
|
||||
'height': '239'
|
||||
},
|
||||
),
|
||||
"link": url('stories.articles.art-of-engagement')
|
||||
},
|
||||
] %}
|
||||
|
||||
{% block publish_date %}2022-12-05{% endblock %}
|
||||
{% block publish_date_formatted %}December 5, 2022{% endblock %}
|
||||
|
||||
{% block article_title %}Raising Technology’s EQ{% endblock %}
|
||||
{% block article_subtitle %}Pamela Pavliscak studies the impact of technology and how we feel. Here’s why she thinks we’re entering the era of big emotion.{% endblock %}
|
||||
{% block page_image %}{{ static('img/stories/social/raising-technology-eq-social.jpg') }}{% endblock %}
|
||||
|
||||
{% block article_content %}
|
||||
<section class="c-stories-article-section">
|
||||
<div class="stories-max-width-wrapper">
|
||||
<p>“Watching my kids trying to negotiate technology as they define who they are and who they want to be first got me thinking about its emotional side. Popular culture focuses on how technology makes us feel terrible, ashamed, envious or outraged. The solution is that we’re supposed to stay away from technology more. But, of course, we can’t.</p>
|
||||
|
||||
{{ stories_article_blockquote(
|
||||
quote="Watching my kids trying to negotiate technology as they define who they are and who they want to be got me thinking about its emotional side.",
|
||||
caption="Pamela Pavliscak"
|
||||
)}}
|
||||
|
||||
<p>Inside the industry, our focus is on making technology simple, straightforward and frictionless. If it does things well, only <em>then</em> can we give people an extra thrill or delight. That helps us avoid people becoming annoyed or frustrated but leaves out our true experience of technology — which isn’t calm or free of emotion. It is interwoven with how we feel about ourselves, who we are with, and what we just did. That fits into something other than the perfect journeys and perfect personas the industry uses.</p>
|
||||
|
||||
<p>I say ‘emotionally intelligent design’ instead of ‘emotional design’ because we tend to think of the latter as manipulating people. For me, the concept of emotional intelligence — where we become more aware of our emotions and more sympathetic to other people's emotions — is what I want for design. Emotionally intelligent design doesn't necessarily have to create an emotion in you. It needs to understand how people feel and have some sensitivity and awareness about it.</p>
|
||||
|
||||
<p>That means doing more thinking up front: trying to understand what people are feeling and how a particular product fits with that. If you want people to be joyful about accomplishing something, you should design for that goal. You can look at the research in sociology and psychology about what creates and sustains joy, and then you ask questions about how people experience it. As with any design process, you test and evaluate ideas and have to look at them in context — because we tend to make general rules. You see guides saying this color means this or that, but those are incredibly simplistic. Color interacts with texture, scent and personality — and even those depend on context.</p>
|
||||
|
||||
<p>There are flawed ideas that emotion can be mapped directly to physical expression or tone of voice. Technology that tries to detect emotion is very controversial, and rightly so because it's extremely limited now. It's taking all this complexity and saying, for example, that there are about 20 different kinds of smiles.</p>
|
||||
|
||||
<p>I don't know if there's a right metric, measure or target for emotion. Nobody wants a dystopia where we have to smile to pay for something or fake our feelings to interact with a machine. We have to throw away the idea of accuracy and numbers and think more holistically.</p>
|
||||
|
||||
<p>Ideally, you would have technology that has sensitivity: to the fact that you aren’t always happy on Tuesdays, or you're not always angry at 4 o'clock, and can pick up on patterns. Maybe you have little kids and you’re tired around 5 o’clock every day, and technology gives you more awareness of that and you have a snack at 4:30 p.m. and feel a little better.</p>
|
||||
|
||||
<p>I can’t think of any perfect examples of where this is working now, but many industries have the potential to do good things and not just say they know best and here’s what people should do. In health care and mental health, companies are trying to find the line between making something helpful without being overbearing. Gaming is another area to watch because it's so tapped into emotion.</p>
|
||||
</div><!-- .stories-max-width-wrapper -->
|
||||
|
||||
{{ stories_article_blockquote(
|
||||
quote="Technology is pushing us to a time of big emotion.",
|
||||
caption="Pamela Pavliscak",
|
||||
class="color-accent"
|
||||
)}}
|
||||
|
||||
<div class="stories-max-width-wrapper">
|
||||
<p>Technology is pushing us to a time of big emotion. That harkens back to big data, and in the same way, we have to think about data. We must think about technology, like AI, and how it works and if we believe it is ethical. We are likely to see more of a role for people to shape their own experience and what we know or remember about them. Companies that allow people to have some agency over that and some way to interact with their data will see people gravitate towards that and become loyal. This is one of design’s big challenges: how to do that without requiring a ton of extra effort.</p>
|
||||
|
||||
<p>As we experience technology, we have to think about more than the practical side. It's fair to expect something beyond that. Ask yourself questions: Does it make me feel terrible about myself? Is it undermining a relationship or making me feel wound up when I want to unwind? How is it impacting my emotional life and experience of the world around me? We should expect more from our technology.”</p>
|
||||
</div> <!-- .stories-max-width-wrapper -->
|
||||
</section> <!-- .c-stories-article-section -->
|
||||
|
||||
{% endblock %}
|
||||
|
|
@ -1,41 +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/.
|
||||
#}
|
||||
|
||||
{% from "macros-protocol.html" import card with context %}
|
||||
|
||||
{% macro stories_card(title, link, desc, image=None, class="") %}
|
||||
<section class="c-stories-card {% if class %}{{ class }}{% endif %}">
|
||||
<a class="card-block-link" href="{{ link }}">
|
||||
<div class="card-media-wrapper">
|
||||
{% if image %}
|
||||
{{ image }}
|
||||
{% endif %}
|
||||
</div>
|
||||
<div class="card-content">
|
||||
<h3 class="card-title">{{ title }}</h3>
|
||||
<p class="card-desc">{{ desc }}</p>
|
||||
</div>
|
||||
</a>
|
||||
</section>
|
||||
{% endmacro %}
|
||||
|
||||
{% macro stories_image(image, caption="", image_class="", featured=False) %}
|
||||
<figure class="c-stories-image {% if image_class %}{{ image_class }}{% endif %}">
|
||||
{{ image }}
|
||||
{% if caption %}
|
||||
<figcaption>{{ caption }}</figcaption>
|
||||
{% endif %}
|
||||
</figure>
|
||||
{%- endmacro %}
|
||||
|
||||
{% macro stories_article_blockquote(quote="", caption="", class="") %}
|
||||
<figure class="c-stories-article-blockquote {{ class }}">
|
||||
<div {% if class == 'color-accent' %}class="stories-max-width-wrapper"{% endif %}>
|
||||
<blockquote {% if caption %}class="contains-caption"{% endif %}>“{{ quote }}”</blockquote>
|
||||
{% if caption %}<figcaption>{{ caption }}</figcaption>{% endif %}
|
||||
</div>
|
||||
</figure>
|
||||
{% endmacro %}
|
||||
|
|
@ -1,31 +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/.
|
||||
#}
|
||||
|
||||
<section class="c-stories-featured-collection {% if theme_class %}theme-{{ theme_class }}{% else %}theme-pink{% endif %}">
|
||||
<div class="c-stories-featured-story">
|
||||
<a class="featured-story-image" href="{{ url }}">
|
||||
<figure class="c-stories-image {% if image_class %}{{ image_class }}{% endif %}">
|
||||
<div class="featured-image-wrapper">
|
||||
{{ image }}
|
||||
</div>
|
||||
{% if caption %}
|
||||
<figcaption>{{ caption }}</figcaption>
|
||||
{% endif %}
|
||||
</figure>
|
||||
</a>
|
||||
<div class="featured-story-content">
|
||||
<p class="featured-story-type">Featured Article</p>
|
||||
<h1 class="featured-story-header">{{ title }}</h1>
|
||||
<p class="featured-story-lead-in">{{ desc }}</p>
|
||||
<div class="featured-story-metadata">
|
||||
<div class="value-container">
|
||||
<p>Value <span>{{ value }}</span></p>
|
||||
</div>
|
||||
<a title="Read '{{ title }}'" class="story-link" href="{{ url }}">Read<span class="arrow-right"></span></a>
|
||||
</div>
|
||||
</div>
|
||||
</div>
|
||||
</section>
|
||||
|
|
@ -1,114 +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/.
|
||||
#}
|
||||
|
||||
{% from "stories/includes/macros.html" import stories_image, stories_card with context %}
|
||||
{% extends "base-protocol.html" %}
|
||||
|
||||
{% block page_css %}
|
||||
{{ css_bundle('mozilla-stories-landing')}}
|
||||
{{ css_bundle('mozilla-stories-shared')}}
|
||||
{{ css_bundle("protocol-split")}}
|
||||
{{ css_bundle("protocol-card") }}
|
||||
{% endblock %}
|
||||
|
||||
{% block page_title %}Stories{% endblock %}
|
||||
|
||||
{% set card_image_attr = {
|
||||
'class': 'card-image',
|
||||
'width': '349',
|
||||
'height': '239'
|
||||
} %}
|
||||
|
||||
{% block content %}
|
||||
<main class="c-stories-main">
|
||||
{# Featured Stories #}
|
||||
{% with
|
||||
url=url('stories.articles.dreaming-then-building'),
|
||||
image=resp_img(
|
||||
url="img/stories/platform-discovery-1000.jpg",
|
||||
srcset={
|
||||
"img/stories/platform-discovery-500.jpg": "500w",
|
||||
"img/stories/platform-discovery-1000.jpg": "1000w",
|
||||
"img/stories/platform-discovery-1500.jpg": "1500w"
|
||||
},
|
||||
sizes={
|
||||
"(min-width: 767px)": "calc(100vw - 80px)",
|
||||
"default": "100vw"
|
||||
},
|
||||
optional_attributes={
|
||||
"loading": "eager",
|
||||
"width": "1000",
|
||||
"height": "667",
|
||||
"alt": "A network of different web images (such as a key, cloud, lightbulb, and wrench) that encircles a unicorn, which produces a speech bubble that contains the Copy/Paste icon"
|
||||
}
|
||||
),
|
||||
caption="Original Source: Designstripe (Free Illustration) + Miro elements",
|
||||
title="Dreaming Then Building With Platform Discovery",
|
||||
desc="Product manager Karen Kim kicked off the chat with a question: “How can we…?” Several Zoom meetings and one Miro board later, her team had a solid wishlist of engineer-dreamed ideas to pick from and deliver.",
|
||||
value="Connection",
|
||||
theme_class="light-blue"
|
||||
%}
|
||||
{% include 'stories/includes/stories-landing-featured.html' %}
|
||||
{% endwith %}
|
||||
<section class="c-stories-related">
|
||||
<div class="related-stories-grid">
|
||||
<h2 class="c-stories-related-header">Other Stories</h2>
|
||||
<div class="related-stories-wrapper">
|
||||
{{ stories_card(
|
||||
title="Raising Technology’s EQ",
|
||||
desc="Pamela Pavliscak studies the impact of technology and how we feel. Here’s why she thinks we’re entering the era of big emotion.",
|
||||
image=resp_img(
|
||||
'img/stories/raising-technology-eq-500.jpg',
|
||||
optional_attributes=card_image_attr,
|
||||
),
|
||||
link=url('stories.articles.raising-technology-eq')
|
||||
)}}
|
||||
{{ stories_card(
|
||||
title="The Joy of Color",
|
||||
desc="The internet is supposed to be fun. Firefox gives color to the gray world of browsing with seasonal shades and a new collaboration with former Nike sneaker designer Keely Alexis.",
|
||||
image=resp_img(
|
||||
'img/stories/joy-of-color.jpg',
|
||||
srcset={ 'img/stories/joy-of-color-high-res.jpg': '2x' },
|
||||
optional_attributes=card_image_attr,
|
||||
),
|
||||
link=url('stories.articles.joy-of-color')
|
||||
)}}
|
||||
{{ stories_card(
|
||||
title="The Art of Engagement",
|
||||
desc="Mozilla’s vibrant community gets a direct connection to the people building the products they love.",
|
||||
image=resp_img(
|
||||
'img/stories/art-of-engagement.jpg',
|
||||
srcset={ 'img/stories/art-of-engagement-high-res.jpg': '2x' },
|
||||
optional_attributes=card_image_attr,
|
||||
),
|
||||
link=url('stories.articles.art-of-engagement')
|
||||
)}}
|
||||
{{ stories_card(
|
||||
title="Licensed to Build Together",
|
||||
desc="Who really owns the Firefox browser? Its copyleft license means we all do.",
|
||||
image=resp_img(
|
||||
'img/stories/build-together.jpg',
|
||||
srcset={ 'img/stories/build-together-high-res.jpg': '2x' },
|
||||
optional_attributes=card_image_attr,
|
||||
),
|
||||
link=url('stories.articles.build-together')
|
||||
)}}
|
||||
{{ stories_card(
|
||||
title="From Volunteer to Mozilla Community Champion",
|
||||
desc="An early Mozilla volunteer’s curiosity about open-source software led him to a career with a company whose mission he believes in.",
|
||||
image=resp_img(
|
||||
'img/stories/community-champion.jpg',
|
||||
srcset={ 'img/stories/community-champion-high-res.jpg': '2x' },
|
||||
optional_attributes=card_image_attr,
|
||||
),
|
||||
link=url('stories.articles.community-champion')
|
||||
)}}
|
||||
</div>
|
||||
</div>
|
||||
</section>
|
||||
</main>
|
||||
{% endblock %}
|
||||
|
|
@ -1,143 +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" %}
|
||||
|
||||
{% from "stories/includes/macros.html" import stories_card with context %}
|
||||
|
||||
{% block page_title_full %}{{ self.article_title() }}{% endblock %}
|
||||
{% block page_desc %}{{ self.article_subtitle() }}{% endblock %}
|
||||
{% block page_og_title %}{{ self.article_title() }}{% endblock %}
|
||||
{% block page_og_desc %}{{ self.article_subtitle() }}{% endblock %}
|
||||
|
||||
|
||||
{% block page_css %}
|
||||
{{ css_bundle('mozilla-stories-article')}}
|
||||
{{ css_bundle('mozilla-stories-shared')}}
|
||||
{{ css_bundle("protocol-card")}}
|
||||
{% endblock %}
|
||||
|
||||
{% block js %}
|
||||
{{ js_bundle("stories-article")}}
|
||||
{% endblock %}
|
||||
|
||||
{% block body_class %}theme-pink{% endblock %}
|
||||
|
||||
{% block site_header %}
|
||||
{# Bug 1438302 Avoid duplicate content for en-CA and en-GB pages. #}
|
||||
{% if LANG == 'en-CA' %}
|
||||
{% set logo_alt = ftl('navigation-v2-mozilla') + ' (CA)' %}
|
||||
{% elif LANG == 'en-GB' %}
|
||||
{% set logo_alt = ftl('navigation-v2-mozilla') + ' (UK)' %}
|
||||
{% else %}
|
||||
{% set logo_alt = ftl('navigation-v2-mozilla') %}
|
||||
{% endif %}
|
||||
|
||||
<div class="c-navigation top-header-navigation mzp-is-sticky">
|
||||
<div class="c-navigation-l-content">
|
||||
<div class="c-navigation-container">
|
||||
<button class="c-navigation-menu-button" type="button" aria-controls="c-navigation-items">{{ ftl('navigation-v2-menu') }}</button>
|
||||
<div class="c-navigation-logo">
|
||||
<a href="{{ url('mozorg.home') }}" data-link-text="mozilla home icon" data-link-type="nav">
|
||||
<img class="c-navigation-logo-image" src="{{ static('protocol/img/logos/mozilla/logo-word-hor.svg') }}" alt="{{ logo_alt }}" width="112" height="32">
|
||||
</a>
|
||||
</div>
|
||||
<div class="c-navigation-items" id="c-navigation-items">
|
||||
{% include 'includes/protocol/navigation/nav-cta.html' %}
|
||||
<div class="c-navigation-menu">
|
||||
<nav class="c-menu mzp-is-basic">
|
||||
<ul class="c-menu-category-list">
|
||||
{% include 'includes/protocol/navigation/menus/firefox.html' %}
|
||||
{% include 'includes/protocol/navigation/menus/products.html' %}
|
||||
{% include 'includes/protocol/navigation/menus/whoweare.html' %}
|
||||
{% include 'includes/protocol/navigation/menus/innovation.html' %}
|
||||
</ul>
|
||||
</nav>
|
||||
</div><!-- close .c-navigation-menu -->
|
||||
</div><!-- close .c-navigation-items -->
|
||||
</div><!-- close .c-navigation-container -->
|
||||
</div><!-- close .c-navigation-l-content -->
|
||||
<nav aria-label="breadcrumb" class="mzp-c-breadcrumb mzp-is-sticky">
|
||||
<ol class="mzp-c-breadcrumb-list">
|
||||
<li class="mzp-c-breadcrumb-item"><a href="{{ url('stories.landing') }}">Stories</a></li>
|
||||
<li aria-current="page" class="mzp-c-breadcrumb-item">{{ self.article_title() }}</li>
|
||||
</ol>
|
||||
</nav>
|
||||
</div><!-- close .c-navigation -->
|
||||
{% endblock %}
|
||||
|
||||
|
||||
{% block content %}
|
||||
<article class="c-article-wrapper">
|
||||
<section class="c-stories-article-header">
|
||||
<div class="c-stories-article-header-container">
|
||||
{% if featured %}<p class="is-featured">Featured Article</p>{% endif%}
|
||||
<h1 class="c-stories-article-title">{% block article_title %}{% endblock %}</h1>
|
||||
<aside class="c-stories-article-metadata">
|
||||
<div class="published">
|
||||
<p>published <time datetime="{% block publish_date %}{% endblock %}">{% block publish_date_formatted %}{% endblock %}</time></p>
|
||||
</div>
|
||||
<div>
|
||||
<p>value <span>{% block article_collection %}Connection{% endblock %}</span></p>
|
||||
</div>
|
||||
</aside>
|
||||
</div>
|
||||
</section>
|
||||
<section class="c-stories-article-body">
|
||||
<div class="c-stories-article-content">
|
||||
{% if credits %}
|
||||
<div class="stories-max-width-wrapper">
|
||||
<aside class="c-stories-article-credits">
|
||||
<h2>Article Contributors</h2>
|
||||
<div class="article-credits-wrapper">
|
||||
{% for credit in credits %}
|
||||
|
||||
<figure class="c-stories-image credit">
|
||||
{{ credit.image }}
|
||||
<figcaption class="credit-name">{{ credit.name }}</figcaption>
|
||||
<figcaption class="credit-position">{{ credit.title }}</figcaption>
|
||||
{% if credit.photo_credit %}<figcaption class="credit-photo-credit">{{ credit.photo_credit }}</figcaption>{% endif %}
|
||||
</figure>
|
||||
{% endfor %}
|
||||
<p class="credits-mobile">
|
||||
{% for credit in credits %}
|
||||
{{credit.name }}{% if not loop.last %}, {% endif %}
|
||||
{% endfor %}
|
||||
</p>
|
||||
</div>
|
||||
</aside>
|
||||
{% endif %}
|
||||
<h2 class="c-stories-article-subtitle">{% block article_subtitle %}{% endblock %}</h2>
|
||||
</div>
|
||||
{% block article_content %}{% endblock %}
|
||||
</div>
|
||||
<section class="c-stories-social-share">
|
||||
<ul class="social-share-list">
|
||||
<li class="social-share-item"><a target="_blank" href="https://twitter.com/share?url=http://www.mozilla.org{{ request.path }}&text={{ self.article_title()|urlencode }}" class="twitter">X (formerly Twitter)</a></li>
|
||||
<li class="social-share-item"><a target="_blank" href="https://getpocket.com/save?url=http://www.mozilla.org{{ request.path }}&title={{ self.article_title()|urlencode }}" class="pocket">Pocket</a></li>
|
||||
<li class="social-share-item"><a target="_blank" href="https://www.linkedin.com/sharing/share-offsite/?mini=true&url=http://www.mozilla.org{{ request.path }}" class="linkedin">LinkedIn</a></li>
|
||||
</ul>
|
||||
</section>
|
||||
{% if related %}
|
||||
<section class="c-stories-related">
|
||||
<div class="related-stories-grid">
|
||||
<h2 class="c-stories-related-header">Related Stories</h2>
|
||||
<div class="related-stories-wrapper">
|
||||
{% for item in related %}
|
||||
{{ stories_card(
|
||||
title=item.title,
|
||||
desc=item.desc,
|
||||
image=item.image,
|
||||
link=item.link
|
||||
)}}
|
||||
{% endfor %}
|
||||
</div>
|
||||
</div>
|
||||
</section>
|
||||
{% endif %}
|
||||
</section>
|
||||
</article>
|
||||
{% endblock %}
|
||||
|
|
@ -1,16 +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/.
|
||||
|
||||
|
||||
from bedrock.mozorg.util import page
|
||||
|
||||
urlpatterns = (
|
||||
page("", "stories/landing.html"),
|
||||
page("art-of-engagement/", "stories/articles/art-of-engagement.html"),
|
||||
page("build-together/", "stories/articles/build-together.html"),
|
||||
page("community-champion/", "stories/articles/community-champion.html"),
|
||||
page("joy-of-color/", "stories/articles/joy-of-color.html"),
|
||||
page("raising-technology-eq/", "stories/articles/raising-technology-eq.html"),
|
||||
page("dreaming-then-building/", "stories/articles/dreaming-then-building.html"),
|
||||
)
|
||||
|
|
@ -30,7 +30,6 @@ urlpatterns = (
|
|||
path("", include("bedrock.newsletter.urls")),
|
||||
path("", include("bedrock.sitemaps.urls")),
|
||||
path("careers/", include("bedrock.careers.urls")),
|
||||
path("stories/", include("bedrock.stories.urls")),
|
||||
path("healthz/", watchman_views.ping, name="watchman.ping"),
|
||||
path("readiness/", watchman_views.status, name="watchman.status"),
|
||||
path("healthz-cron/", base_views.cron_health_check),
|
||||
|
|
|
|||
|
|
@ -69,8 +69,6 @@ navigation-v2-careers = Careers
|
|||
navigation-v2-work-for-a-mission-driven-updated = Work for a mission-driven organization that makes people-first products.
|
||||
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-stories = Stories
|
||||
navigation-v2-stories-about-how = Stories about how our people and products are changing the world for the better.
|
||||
navigation-v2-more-about-mozilla = More About { -brand-name-mozilla }
|
||||
|
||||
## Innovation menu
|
||||
|
|
|
|||
|
|
@ -1,106 +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 'sass:math';
|
||||
|
||||
@import '~@mozilla-protocol/core/protocol/css/includes/lib';
|
||||
|
||||
// use math.div to get percentages of grid to use for padding and margins
|
||||
$column-width: math.percentage(math.div(math.div(100, 12), 100));
|
||||
$half-column: math.percentage(math.div(math.div(100, 24), 100));
|
||||
$font-stories-title: 'Antonio', sans-serif;
|
||||
$font-stories-body: 'Source Serif Pro', sans-serif;
|
||||
|
||||
// pink theme
|
||||
$pink-primary: #ffb4db;
|
||||
$pink-secondary: #ffea7f;
|
||||
|
||||
@font-face {
|
||||
font-family: Antonio;
|
||||
font-weight: normal;
|
||||
font-style: normal;
|
||||
font-display: swap;
|
||||
src:
|
||||
url('/media/fonts/stories/antonio-regular-webfont.woff2') format('woff2'),
|
||||
url('/media/fonts/stories/antonio-regular-webfont.woff') format('woff');
|
||||
}
|
||||
|
||||
@font-face {
|
||||
font-family: Antonio;
|
||||
font-weight: 700;
|
||||
font-style: normal;
|
||||
font-display: swap;
|
||||
src:
|
||||
url('/media/fonts/stories/antonio-bold-webfont.woff2') format('woff2'),
|
||||
url('/media/fonts/stories/antonio-bold-webfont.woff') format('woff');
|
||||
}
|
||||
|
||||
@font-face {
|
||||
font-family: 'Source Serif Pro';
|
||||
src:
|
||||
url('/media/fonts/stories/source-serif/SourceSerifPro-Bold.woff2') format('woff2'),
|
||||
url('/media/fonts/stories/source-serif/SourceSerifPro-Bold.woff') format('woff');
|
||||
font-weight: bold;
|
||||
font-style: normal;
|
||||
font-display: swap;
|
||||
}
|
||||
|
||||
@font-face {
|
||||
font-family: 'Source Serif Pro';
|
||||
src:
|
||||
url('/media/fonts/stories/source-serif/SourceSerifPro-It.woff2') format('woff2'),
|
||||
url('/media/fonts/stories/source-serif/SourceSerifPro-It.woff') format('woff');
|
||||
font-weight: normal;
|
||||
font-style: italic;
|
||||
font-display: swap;
|
||||
}
|
||||
|
||||
@font-face {
|
||||
font-family: 'Source Serif Pro';
|
||||
src:
|
||||
url('/media/fonts/stories/source-serif/SourceSerifPro-Light.woff2') format('woff2'),
|
||||
url('/media/fonts/stories/source-serif/SourceSerifPro-Light.woff') format('woff');
|
||||
font-weight: 300;
|
||||
font-style: normal;
|
||||
font-display: swap;
|
||||
}
|
||||
|
||||
@font-face {
|
||||
font-family: 'Source Serif Pro';
|
||||
src:
|
||||
url('/media/fonts/stories/source-serif/SourceSerifPro-Regular.woff2') format('woff2'),
|
||||
url('/media/fonts/stories/source-serif/SourceSerifPro-Regular.woff') format('woff');
|
||||
font-weight: normal;
|
||||
font-style: normal;
|
||||
font-display: swap;
|
||||
}
|
||||
|
||||
@mixin stories-grid {
|
||||
display: grid;
|
||||
grid-template-columns: repeat(12, 1fr);
|
||||
column-gap: $spacing-md;
|
||||
}
|
||||
|
||||
@mixin half-col-margin {
|
||||
margin-left: $half-column;
|
||||
margin-right: $half-column;
|
||||
}
|
||||
|
||||
@mixin full-width {
|
||||
grid-column: 1 / 13;
|
||||
}
|
||||
|
||||
@mixin article-width-2-3 {
|
||||
grid-column: 5 / 9;
|
||||
}
|
||||
|
||||
@mixin article-width-full {
|
||||
grid-column: 1 / 13;
|
||||
|
||||
@media #{$mq-md} {
|
||||
grid-column: 4 / 12;
|
||||
margin-left: math.percentage(math.div(math.div(100, 16), 100));
|
||||
margin-right: math.percentage(math.div(math.div(100, 16), 100));
|
||||
}
|
||||
}
|
||||
|
|
@ -1,576 +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/.
|
||||
|
||||
$font-path: '/media/fonts';
|
||||
$image-path: '/media/protocol/img';
|
||||
|
||||
@import '~@mozilla-protocol/core/protocol/css/includes/lib';
|
||||
@import '~@mozilla-protocol/core/protocol/css/components/breadcrumb';
|
||||
@import 'includes/lib';
|
||||
|
||||
// normalize scrollbar color across backgrounds
|
||||
// otherwise, Fx auto-determines a light/dark scheme based on body bg
|
||||
@supports (scrollbar-color: auto) {
|
||||
html {
|
||||
scrollbar-color: #c2c2c2 #fafafa;
|
||||
}
|
||||
}
|
||||
|
||||
// HACKY overrides for the navigation to match the comps (deals with box shadow and scrolling)
|
||||
html.mzp-has-sticky-navigation .c-navigation.mzp-is-sticky {
|
||||
box-shadow: none;
|
||||
|
||||
&.mzp-is-scrolling {
|
||||
box-shadow: none;
|
||||
|
||||
.c-navigation-l-content {
|
||||
box-shadow: 0 0 1px 1px rgba(29, 17, 51, 0.04), 0 0 3px 2px rgba(9, 32, 77, 0.12), 0 0 2px -3px rgba(29, 17, 51, 0.12);
|
||||
}
|
||||
}
|
||||
|
||||
.c-navigation-l-content {
|
||||
box-shadow: 0 0 1px 1px rgba(29, 17, 51, 0.04), 0 0 3px 2px rgba(9, 32, 77, 0.12), 0 0 2px -3px rgba(29, 17, 51, 0.12);
|
||||
}
|
||||
}
|
||||
|
||||
.mzp-c-breadcrumb {
|
||||
padding-top: $spacing-md;
|
||||
padding-bottom: $spacing-md;
|
||||
|
||||
.mzp-c-breadcrumb-item a {
|
||||
color: inherit;
|
||||
|
||||
&:hover {
|
||||
text-decoration: underline;
|
||||
}
|
||||
}
|
||||
|
||||
@media #{$mq-md} {
|
||||
.mzp-c-breadcrumb-list {
|
||||
padding: 8px 64px;
|
||||
}
|
||||
}
|
||||
|
||||
@media #{$mq-lg} {
|
||||
.mzp-c-breadcrumb-list {
|
||||
padding: 8px 96px;
|
||||
}
|
||||
}
|
||||
}
|
||||
|
||||
.c-stories-article-grid {
|
||||
display: grid;
|
||||
grid-template-columns: repeat(12, 1fr);
|
||||
grid-template-rows: auto;
|
||||
column-gap: $spacing-md;
|
||||
}
|
||||
|
||||
.c-stories-article-header {
|
||||
width: 100%;
|
||||
|
||||
.c-stories-article-header-container {
|
||||
@include stories-grid;
|
||||
grid-template-rows: 64px 1fr $layout-xl;
|
||||
padding: 0 $spacing-lg $spacing-xl;
|
||||
max-width: 100%;
|
||||
|
||||
@media #{$mq-md} {
|
||||
padding: $spacing-2xl 0;
|
||||
}
|
||||
}
|
||||
|
||||
.is-featured {
|
||||
@include font-size(21px);
|
||||
color: inherit;
|
||||
font-family: $font-stories-body;
|
||||
grid-column: 1 / 13;
|
||||
align-self: center;
|
||||
|
||||
@media #{$mq-md} {
|
||||
@include font-size(28px);
|
||||
@include article-width-full;
|
||||
}
|
||||
}
|
||||
|
||||
.c-stories-article-title {
|
||||
grid-column: 1 / 13;
|
||||
@include font-size(50px);
|
||||
grid-row: 2;
|
||||
color: inherit;
|
||||
font-family: $font-stories-title;
|
||||
font-weight: 700;
|
||||
text-transform: uppercase;
|
||||
|
||||
@media #{$mq-sm} {
|
||||
@include font-size(66px);
|
||||
}
|
||||
|
||||
@media #{$mq-md} {
|
||||
@include font-size(80px);
|
||||
@include article-width-full;
|
||||
grid-column: 2 / 13;
|
||||
margin: 0;
|
||||
}
|
||||
|
||||
@media #{$mq-lg} {
|
||||
@include font-size(100px);
|
||||
}
|
||||
}
|
||||
|
||||
.c-stories-article-metadata {
|
||||
grid-column: 1 / 13;
|
||||
grid-row: 3;
|
||||
display: flex;
|
||||
flex-direction: row;
|
||||
align-items: flex-start;
|
||||
margin: $spacing-md 0 0;
|
||||
|
||||
div p {
|
||||
text-transform: uppercase;
|
||||
|
||||
time,
|
||||
span {
|
||||
display: block;
|
||||
font-weight: 700;
|
||||
text-transform: none;
|
||||
}
|
||||
}
|
||||
|
||||
.published {
|
||||
margin-right: $spacing-md;
|
||||
}
|
||||
|
||||
@media #{$mq-sm} {
|
||||
flex-direction: row;
|
||||
}
|
||||
|
||||
@media #{$mq-md} {
|
||||
@include article-width-full;
|
||||
}
|
||||
|
||||
@media #{$mq-lg} {
|
||||
grid-column: 4 / 11;
|
||||
margin-top: $spacing-xl;
|
||||
|
||||
.published {
|
||||
margin-right: $spacing-xl;
|
||||
}
|
||||
}
|
||||
}
|
||||
|
||||
.article-category {
|
||||
align-self: center;
|
||||
background-color: transparent;
|
||||
border: 1px solid $color-black;
|
||||
border-radius: 25px;
|
||||
grid-row: 3 / span 2;
|
||||
grid-column: span 4;
|
||||
text-align: center;
|
||||
margin-top: $spacing-lg;
|
||||
padding: $spacing-xs $spacing-sm;
|
||||
white-space: nowrap;
|
||||
width: min-content;
|
||||
}
|
||||
|
||||
p {
|
||||
margin: 0;
|
||||
}
|
||||
|
||||
@media #{$mq-md} {
|
||||
.c-stories-article-data {
|
||||
.grid-label,
|
||||
.grid-value {
|
||||
grid-column: span 2;
|
||||
}
|
||||
}
|
||||
|
||||
.article-category {
|
||||
grid-column: span 2;
|
||||
padding: $spacing-xs $spacing-md;
|
||||
}
|
||||
}
|
||||
|
||||
@media #{$mq-lg} {
|
||||
.c-stories-article-data {
|
||||
grid-column: 4 / 12;
|
||||
margin-top: $layout-md;
|
||||
}
|
||||
|
||||
.article-category {
|
||||
grid-row: span 2;
|
||||
margin-top: 0;
|
||||
}
|
||||
}
|
||||
}
|
||||
|
||||
.c-stories-article-content {
|
||||
@include full-width;
|
||||
@include stories-grid;
|
||||
margin-top: $layout-md;
|
||||
|
||||
@media #{$mq-md} {
|
||||
margin-top: $layout-xl;
|
||||
}
|
||||
}
|
||||
|
||||
.c-stories-article-body {
|
||||
@include stories-grid;
|
||||
background-color: $color-white;
|
||||
|
||||
.c-stories-article-credits {
|
||||
@include full-width;
|
||||
padding: 0 $spacing-lg;
|
||||
|
||||
h2 {
|
||||
@include font-base;
|
||||
@include font-size(16px);
|
||||
font-weight: 700;
|
||||
margin-bottom: $spacing-sm;
|
||||
}
|
||||
|
||||
.article-credits-wrapper {
|
||||
display: flex;
|
||||
margin-bottom: $spacing-xl;
|
||||
|
||||
.c-stories-image {
|
||||
display: none;
|
||||
margin-right: $spacing-lg;
|
||||
}
|
||||
|
||||
.credits-mobile {
|
||||
@include font-firefox;
|
||||
color: $color-black;
|
||||
}
|
||||
|
||||
@media #{$mq-md} {
|
||||
.c-stories-image {
|
||||
display: initial;
|
||||
}
|
||||
|
||||
.credits-mobile {
|
||||
display: none;
|
||||
}
|
||||
}
|
||||
}
|
||||
|
||||
.credit-name,
|
||||
.credit-position,
|
||||
.credit-photo-credit {
|
||||
color: $color-black;
|
||||
}
|
||||
|
||||
.credit-position {
|
||||
@include font-size(12px);
|
||||
}
|
||||
|
||||
@media #{$mq-md} {
|
||||
grid-column: 1 / 4;
|
||||
grid-row: 1 / span 3;
|
||||
justify-self: center;
|
||||
padding: 0;
|
||||
|
||||
.article-credits-wrapper {
|
||||
flex-direction: column;
|
||||
|
||||
// very hacky way to ensure that this element doesnt change the
|
||||
// height of the implicit rows of the grid.
|
||||
position: absolute;
|
||||
max-width: 150px; /* prevents credits from overlapping article text due to absolute positioning */
|
||||
|
||||
.c-stories-image {
|
||||
filter: grayscale(1);
|
||||
margin-right: 0;
|
||||
}
|
||||
}
|
||||
}
|
||||
}
|
||||
|
||||
.c-stories-article-subtitle {
|
||||
@include article-width-full;
|
||||
@include font-size(22px);
|
||||
border-bottom: 4px solid $color-black;
|
||||
color: $color-black;
|
||||
font-family: $font-stories-body;
|
||||
font-weight: 400;
|
||||
grid-column: 1 / 13;
|
||||
line-height: 1.4;
|
||||
margin: 0 $spacing-lg $spacing-xl;
|
||||
padding-bottom: $spacing-2xl;
|
||||
|
||||
@media #{$mq-md} {
|
||||
@include font-size(36px);
|
||||
padding-bottom: $layout-lg;
|
||||
margin-bottom: $layout-xl;
|
||||
}
|
||||
}
|
||||
|
||||
.stories-max-width-wrapper {
|
||||
@include stories-grid;
|
||||
grid-column: 1 / -1;
|
||||
max-width: $content-max;
|
||||
margin: 0 auto;
|
||||
}
|
||||
|
||||
.c-stories-article-section {
|
||||
@include full-width;
|
||||
@include stories-grid;
|
||||
margin-bottom: $spacing-lg;
|
||||
|
||||
h3,
|
||||
p {
|
||||
@include article-width-full;
|
||||
color: $color-black;
|
||||
padding: 0 $spacing-lg;
|
||||
|
||||
@media #{$mq-md} {
|
||||
padding: 0;
|
||||
}
|
||||
}
|
||||
|
||||
h3 {
|
||||
@include font-firefox;
|
||||
@include font-size(32px);
|
||||
margin-bottom: $spacing-xl;
|
||||
|
||||
@media #{$mq-md} {
|
||||
margin-bottom: $spacing-2xl;
|
||||
}
|
||||
}
|
||||
|
||||
p {
|
||||
@include font-size(20px);
|
||||
font-family: $font-stories-body;
|
||||
margin-bottom: $spacing-2xl;
|
||||
|
||||
&.bold {
|
||||
font-weight: 600;
|
||||
}
|
||||
}
|
||||
|
||||
p + .c-stories-image.article-width {
|
||||
margin-top: 0;
|
||||
}
|
||||
|
||||
.c-stories-article-float-container {
|
||||
@include article-width-full;
|
||||
|
||||
.c-stories-image {
|
||||
width: calc(50% - $spacing-sm);
|
||||
}
|
||||
|
||||
&.left .c-stories-image {
|
||||
float: left;
|
||||
margin-right: $spacing-md;
|
||||
}
|
||||
|
||||
&.right .c-stories-image {
|
||||
float: right;
|
||||
margin-right: $spacing-md;
|
||||
}
|
||||
}
|
||||
}
|
||||
}
|
||||
|
||||
.c-stories-article-blockquote {
|
||||
@include article-width-full;
|
||||
border-top: 4px solid #e8e8e8;
|
||||
border-bottom: 4px solid #e8e8e8;
|
||||
padding: $layout-md 0;
|
||||
margin: 0 $spacing-lg $spacing-2xl;
|
||||
|
||||
&.color-accent {
|
||||
grid-column: 1 / 13;
|
||||
border: none;
|
||||
margin-left: 0;
|
||||
margin-right: 0;
|
||||
|
||||
blockquote {
|
||||
box-sizing: border-box;
|
||||
font-weight: 400;
|
||||
margin-bottom: $spacing-lg;
|
||||
}
|
||||
|
||||
blockquote,
|
||||
figcaption {
|
||||
grid-column: 2 / 12;
|
||||
width: unset;
|
||||
margin-left: 0;
|
||||
margin-right: 0;
|
||||
}
|
||||
}
|
||||
|
||||
blockquote {
|
||||
@include font-size(28px);
|
||||
color: $color-black;
|
||||
font-family: $font-stories-title;
|
||||
text-transform: uppercase;
|
||||
text-align: center;
|
||||
border: none;
|
||||
padding: 0;
|
||||
margin: 0 auto;
|
||||
width: 100%;
|
||||
|
||||
&.contains-caption {
|
||||
margin-bottom: $spacing-lg;
|
||||
}
|
||||
}
|
||||
|
||||
figcaption {
|
||||
@include font-size(20px);
|
||||
color: $color-black;
|
||||
font-family: $font-stories-body;
|
||||
margin: 0 auto;
|
||||
text-align: center;
|
||||
}
|
||||
|
||||
@media #{$mq-sm} {
|
||||
blockquote {
|
||||
width: 435px;
|
||||
@include font-size(36px);
|
||||
}
|
||||
}
|
||||
|
||||
@media #{$mq-md} {
|
||||
margin-top: $spacing-2xl;
|
||||
margin-bottom: $layout-xl;
|
||||
padding: $layout-lg 0;
|
||||
|
||||
blockquote {
|
||||
@include font-size(36px);
|
||||
width: 450px;
|
||||
}
|
||||
|
||||
&.color-accent {
|
||||
padding: $layout-xl + $spacing-xl 0 $layout-xl;
|
||||
}
|
||||
}
|
||||
|
||||
@media (min-width: 900px) {
|
||||
padding: $layout-xl 0;
|
||||
|
||||
blockquote {
|
||||
@include font-size(43px);
|
||||
width: 520px;
|
||||
}
|
||||
|
||||
&.long-quote blockquote {
|
||||
@include font-size(36px);
|
||||
}
|
||||
}
|
||||
|
||||
@media #{$mq-lg} {
|
||||
blockquote {
|
||||
width: 595px;
|
||||
@include font-size(48px);
|
||||
}
|
||||
|
||||
&.long-quote blockquote {
|
||||
@include font-size(42px);
|
||||
}
|
||||
}
|
||||
|
||||
@media #{$mq-xl} {
|
||||
blockquote {
|
||||
@include font-size(58px);
|
||||
width: 750px;
|
||||
}
|
||||
|
||||
&.long-quote blockquote {
|
||||
@include font-size(48px);
|
||||
}
|
||||
}
|
||||
}
|
||||
|
||||
.c-stories-social-share {
|
||||
@include article-width-full;
|
||||
|
||||
.social-share-list {
|
||||
display: flex;
|
||||
margin: 0;
|
||||
justify-content: center;
|
||||
|
||||
.social-share-item a {
|
||||
@include image-replaced;
|
||||
transition: transform 200ms ease-in;
|
||||
background-repeat: no-repeat;
|
||||
background-size: contain;
|
||||
display: block;
|
||||
height: $spacing-lg;
|
||||
width: $spacing-lg;
|
||||
margin: $spacing-sm;
|
||||
|
||||
&.twitter {
|
||||
background-image: url('#{$image-path}/icons/social/x/black.svg');
|
||||
}
|
||||
|
||||
&.instagram {
|
||||
background-image: url('/media/img/stories/icons/instagram-icon.svg');
|
||||
}
|
||||
|
||||
&.linkedin {
|
||||
background-image: url('#{$image-path}/icons/social/linkedin/black.svg');
|
||||
}
|
||||
|
||||
&.pocket {
|
||||
background-image: url('#{$image-path}/icons/social/pocket/black.svg');
|
||||
}
|
||||
@media (prefers-reduced-motion: no-preference) {
|
||||
&:hover {
|
||||
cursor: pointer;
|
||||
transform: scale(1.2);
|
||||
}
|
||||
}
|
||||
}
|
||||
}
|
||||
}
|
||||
|
||||
.c-stories-article-body .c-stories-related {
|
||||
@include full-width;
|
||||
background: $color-white;
|
||||
padding: 0 $spacing-lg;
|
||||
|
||||
.related-stories-grid {
|
||||
padding-left: 0;
|
||||
padding-right: 0;
|
||||
|
||||
.c-stories-related-header,
|
||||
.related-stories-wrapper {
|
||||
@include article-width-full;
|
||||
}
|
||||
}
|
||||
|
||||
@media #{$mq-md} {
|
||||
padding: 0;
|
||||
}
|
||||
}
|
||||
|
||||
@media (prefers-reduced-motion: no-preference) {
|
||||
.c-article-wrapper {
|
||||
position: relative;
|
||||
}
|
||||
|
||||
.c-stories-article-header {
|
||||
overflow: hidden;
|
||||
position: fixed;
|
||||
z-index: 1;
|
||||
}
|
||||
|
||||
.c-stories-article-body {
|
||||
position: relative;
|
||||
z-index: 2;
|
||||
}
|
||||
|
||||
.c-navigation,
|
||||
.mzp-c-footer {
|
||||
z-index: 2;
|
||||
position: relative;
|
||||
}
|
||||
|
||||
@media #{$mq-md} {
|
||||
.c-stories-article-body {
|
||||
position: relative;
|
||||
z-index: 2;
|
||||
}
|
||||
}
|
||||
}
|
||||
|
|
@ -1,218 +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/.
|
||||
|
||||
$font-path: '/media/fonts';
|
||||
$image-path: '/media/protocol/img';
|
||||
|
||||
@import '~@mozilla-protocol/core/protocol/css/includes/lib';
|
||||
@import 'includes/lib';
|
||||
|
||||
.c-stories-featured-collection {
|
||||
.c-stories-featured-story {
|
||||
@include stories-grid;
|
||||
margin: 0 auto;
|
||||
max-width: $content-max;
|
||||
|
||||
.featured-story-image {
|
||||
grid-column: 1 / 13;
|
||||
overflow: hidden;
|
||||
text-decoration: none;
|
||||
|
||||
.featured-image-wrapper {
|
||||
overflow: hidden;
|
||||
}
|
||||
|
||||
img {
|
||||
transition: transform 200ms ease-in;
|
||||
vertical-align: middle;
|
||||
width: 100%;
|
||||
}
|
||||
|
||||
figcaption {
|
||||
@include font-size(12px);
|
||||
text-align: right;
|
||||
margin-right: $spacing-xs;
|
||||
}
|
||||
|
||||
@media (prefers-reduced-motion: no-preference) {
|
||||
&:hover {
|
||||
img {
|
||||
transform: scale(1.05);
|
||||
}
|
||||
}
|
||||
}
|
||||
|
||||
@media #{$mq-md} {
|
||||
.featured-story-image figcaption {
|
||||
@include font-size(12px);
|
||||
}
|
||||
}
|
||||
}
|
||||
|
||||
.featured-story-content {
|
||||
grid-column: 2 / 12;
|
||||
padding-top: $spacing-md;
|
||||
padding-bottom: $layout-2xs;
|
||||
|
||||
.featured-story-type {
|
||||
@include font-size(28px);
|
||||
color: inherit;
|
||||
font-family: $font-stories-body;
|
||||
margin-bottom: $spacing-sm;
|
||||
}
|
||||
|
||||
.featured-story-header {
|
||||
@include font-size(50px);
|
||||
color: inherit;
|
||||
font-family: $font-stories-title;
|
||||
text-transform: uppercase;
|
||||
margin-bottom: $spacing-lg;
|
||||
max-width: 100%;
|
||||
padding-bottom: $spacing-lg;
|
||||
|
||||
@media #{$mq-md} {
|
||||
@include font-size(100px);
|
||||
margin-bottom: 0;
|
||||
}
|
||||
|
||||
@media #{$mq-lg} {
|
||||
@include font-size(130px);
|
||||
}
|
||||
}
|
||||
|
||||
.featured-story-lead-in {
|
||||
@include font-size(22px);
|
||||
margin-top: $spacing-md;
|
||||
color: inherit;
|
||||
font-family: $font-stories-body;
|
||||
width: 100%;
|
||||
}
|
||||
|
||||
@media #{$mq-md} {
|
||||
grid-column: 3 / 11;
|
||||
padding-top: $spacing-md;
|
||||
padding-bottom: $spacing-md;
|
||||
|
||||
.featured-story-lead-in {
|
||||
@include font-size(24px);
|
||||
width: 70%;
|
||||
}
|
||||
}
|
||||
}
|
||||
}
|
||||
|
||||
@media #{$mq-md} {
|
||||
padding: 0 40px;
|
||||
|
||||
.c-stories-featured-story .featured-story-image {
|
||||
grid-column: 3 / 11;
|
||||
}
|
||||
|
||||
.featured-story-content {
|
||||
padding-top: $layout-sm;
|
||||
padding-bottom: $layout-2xs;
|
||||
}
|
||||
}
|
||||
}
|
||||
|
||||
.featured-story-metadata {
|
||||
display: flex;
|
||||
flex-direction: column;
|
||||
align-items: flex-start;
|
||||
margin: $spacing-md 0;
|
||||
|
||||
.value-container {
|
||||
@include font-size(18px);
|
||||
color: inherit;
|
||||
display: flex;
|
||||
margin-right: 0;
|
||||
margin-bottom: $spacing-md;
|
||||
|
||||
p {
|
||||
@include font-firefox;
|
||||
margin: 0;
|
||||
text-transform: uppercase;
|
||||
font-weight: normal;
|
||||
margin-right: $spacing-sm;
|
||||
|
||||
span {
|
||||
text-transform: none;
|
||||
font-weight: bold;
|
||||
display: block;
|
||||
}
|
||||
}
|
||||
|
||||
@media #{$mq-md} {
|
||||
margin-bottom: 0;
|
||||
}
|
||||
}
|
||||
|
||||
.story-link {
|
||||
align-self: stretch;
|
||||
background: $color-white;
|
||||
border: none;
|
||||
border-radius: 25px;
|
||||
color: $color-black;
|
||||
display: block;
|
||||
position: relative;
|
||||
padding: $spacing-sm $spacing-2xl $spacing-sm $spacing-xl;
|
||||
text-align: center;
|
||||
text-decoration: none;
|
||||
text-transform: none;
|
||||
|
||||
&:hover,
|
||||
&:focus,
|
||||
&:active {
|
||||
background: #ededf0;
|
||||
}
|
||||
|
||||
&::after {
|
||||
content: '';
|
||||
top: 15px;
|
||||
right: 15px;
|
||||
position: absolute;
|
||||
height: 10px;
|
||||
width: 15px;
|
||||
background: url('/media/img/stories/icons/arrow-right.svg');
|
||||
}
|
||||
|
||||
@media #{$mq-sm} {
|
||||
align-self: center;
|
||||
}
|
||||
}
|
||||
|
||||
.featured-story-metadata-list {
|
||||
display: flex;
|
||||
flex-direction: column;
|
||||
margin-bottom: 0;
|
||||
width: 100%;
|
||||
|
||||
.metadata-item {
|
||||
@include font-size(14px);
|
||||
background-color: transparent;
|
||||
border: 1.5px solid $color-black;
|
||||
border-radius: 25px;
|
||||
color: $color-black;
|
||||
display: block;
|
||||
margin-right: 0;
|
||||
padding: $spacing-sm $spacing-md;
|
||||
text-align: center;
|
||||
text-transform: uppercase;
|
||||
}
|
||||
}
|
||||
|
||||
@media #{$mq-sm} {
|
||||
flex-direction: row;
|
||||
|
||||
.value-container {
|
||||
display: inline-block;
|
||||
margin-right: $spacing-lg;
|
||||
}
|
||||
}
|
||||
|
||||
@media #{$mq-md} {
|
||||
align-items: center;
|
||||
grid-column: 3 / 11;
|
||||
}
|
||||
}
|
||||
|
|
@ -1,206 +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 'sass:math';
|
||||
|
||||
$font-path: '/media/fonts';
|
||||
$image-path: '/media/protocol/img';
|
||||
|
||||
@import '~@mozilla-protocol/core/protocol/css/includes/lib';
|
||||
@import 'includes/lib';
|
||||
|
||||
// Match featured article with single article by color theme
|
||||
.theme-pink {
|
||||
--theme-color-bg: #{$pink-primary};
|
||||
--theme-color-text: #{$color-black};
|
||||
}
|
||||
|
||||
.theme-green {
|
||||
--theme-color-bg: #{$color-green-80};
|
||||
--theme-color-text: #{$color-white};
|
||||
}
|
||||
|
||||
.theme-orange {
|
||||
--theme-color-bg: #{$color-yellow-40};
|
||||
--theme-color-text: #{$color-black};
|
||||
}
|
||||
|
||||
.theme-light-blue {
|
||||
--theme-color-bg: #abf2ff;
|
||||
--theme-color-text: #{$color-black};
|
||||
}
|
||||
|
||||
[class*='theme'] {
|
||||
background-color: var(--theme-color-bg);
|
||||
color: var(--theme-color-text);
|
||||
|
||||
.c-stories-article-blockquote.color-accent {
|
||||
background-color: var(--theme-color-bg);
|
||||
|
||||
blockquote,
|
||||
figcaption {
|
||||
color: var(--theme-color-text);
|
||||
}
|
||||
}
|
||||
|
||||
.mzp-c-breadcrumb {
|
||||
background-color: var(--theme-color-bg);
|
||||
color: var(--theme-color-text);
|
||||
}
|
||||
|
||||
.c-stories-featured-story {
|
||||
figcaption {
|
||||
color: var(--theme-color-text);
|
||||
}
|
||||
}
|
||||
|
||||
.featured-story-header {
|
||||
border-bottom: 3px solid var(--theme-color-text);
|
||||
}
|
||||
}
|
||||
|
||||
.visually-hidden {
|
||||
@include visually-hidden;
|
||||
}
|
||||
|
||||
.c-stories-related {
|
||||
background-color: $color-white;
|
||||
|
||||
.related-stories-grid {
|
||||
@include stories-grid;
|
||||
margin: 0 auto;
|
||||
padding: $layout-md 0;
|
||||
max-width: $content-max;
|
||||
}
|
||||
|
||||
.c-stories-related-header {
|
||||
grid-column: 2 / 12;
|
||||
margin-bottom: $spacing-xl;
|
||||
}
|
||||
|
||||
.related-stories-wrapper {
|
||||
@include stories-grid;
|
||||
grid-column: 2 / 12;
|
||||
|
||||
.c-stories-card {
|
||||
grid-column: span 12;
|
||||
margin: 0 0 $spacing-lg;
|
||||
}
|
||||
}
|
||||
|
||||
@media #{$mq-md} {
|
||||
.related-stories-grid {
|
||||
padding: $layout-md 40px;
|
||||
}
|
||||
|
||||
.c-stories-related-header {
|
||||
@include font-size(32px);
|
||||
grid-column: 3 / 11;
|
||||
}
|
||||
|
||||
.related-stories-wrapper {
|
||||
grid-column: 3 / 11;
|
||||
|
||||
.c-stories-card {
|
||||
grid-column: span 6;
|
||||
|
||||
&:nth-child(even) {
|
||||
margin-left: 10%;
|
||||
}
|
||||
|
||||
&:nth-child(odd) {
|
||||
margin-right: 10%;
|
||||
}
|
||||
}
|
||||
}
|
||||
}
|
||||
}
|
||||
|
||||
.c-stories-card {
|
||||
.card-media-wrapper {
|
||||
overflow: hidden;
|
||||
display: inline-block;
|
||||
margin-bottom: $spacing-sm;
|
||||
}
|
||||
|
||||
.card-image {
|
||||
aspect-ratio: 4 / 3;
|
||||
transition: transform 200ms ease-in;
|
||||
vertical-align: middle;
|
||||
}
|
||||
@media (prefers-reduced-motion: no-preference) {
|
||||
&:hover {
|
||||
.card-image {
|
||||
transform: scale(1.05);
|
||||
}
|
||||
}
|
||||
}
|
||||
|
||||
.card-block-link {
|
||||
text-decoration: none;
|
||||
color: $color-black;
|
||||
|
||||
&:hover,
|
||||
&:focus {
|
||||
.card-title {
|
||||
text-decoration: underline;
|
||||
}
|
||||
|
||||
.card-desc {
|
||||
text-decoration: none;
|
||||
}
|
||||
}
|
||||
}
|
||||
|
||||
.card-title {
|
||||
@include font-size(24px);
|
||||
margin-bottom: $spacing-xs;
|
||||
}
|
||||
|
||||
.card-desc {
|
||||
font-family: $font-stories-body;
|
||||
}
|
||||
}
|
||||
|
||||
.c-stories-image {
|
||||
margin-bottom: $spacing-md;
|
||||
position: relative;
|
||||
|
||||
&.article-width {
|
||||
@include article-width-full;
|
||||
margin: $layout-md $spacing-lg;
|
||||
|
||||
&.center {
|
||||
display: flex;
|
||||
justify-content: center;
|
||||
align-items: center;
|
||||
flex-direction: column;
|
||||
|
||||
figcaption {
|
||||
align-self: flex-start;
|
||||
}
|
||||
}
|
||||
}
|
||||
|
||||
&.article-half-width {
|
||||
grid-column: 4 / 7;
|
||||
float: left;
|
||||
}
|
||||
|
||||
figcaption {
|
||||
@include font-base;
|
||||
@include font-size(14px);
|
||||
color: #838383;
|
||||
}
|
||||
@media #{$mq-md} {
|
||||
&.article-width {
|
||||
margin-left: 6.25%;
|
||||
margin-right: 6.25%;
|
||||
}
|
||||
|
||||
figcaption {
|
||||
@include font-size(12px);
|
||||
}
|
||||
}
|
||||
}
|
||||
Двоичные данные
media/fonts/stories/antonio-bold-webfont.woff
Двоичные данные
media/fonts/stories/antonio-bold-webfont.woff
Двоичный файл не отображается.
Двоичные данные
media/fonts/stories/antonio-bold-webfont.woff2
Двоичные данные
media/fonts/stories/antonio-bold-webfont.woff2
Двоичный файл не отображается.
Двоичные данные
media/fonts/stories/antonio-regular-webfont.woff
Двоичные данные
media/fonts/stories/antonio-regular-webfont.woff
Двоичный файл не отображается.
Двоичные данные
media/fonts/stories/antonio-regular-webfont.woff2
Двоичные данные
media/fonts/stories/antonio-regular-webfont.woff2
Двоичный файл не отображается.
Двоичные данные
media/fonts/stories/source-serif/SourceSerifPro-Bold.woff
Двоичные данные
media/fonts/stories/source-serif/SourceSerifPro-Bold.woff
Двоичный файл не отображается.
Двоичные данные
media/fonts/stories/source-serif/SourceSerifPro-Bold.woff2
Двоичные данные
media/fonts/stories/source-serif/SourceSerifPro-Bold.woff2
Двоичный файл не отображается.
Двоичные данные
media/fonts/stories/source-serif/SourceSerifPro-BoldIt.woff
Двоичные данные
media/fonts/stories/source-serif/SourceSerifPro-BoldIt.woff
Двоичный файл не отображается.
Двоичные данные
media/fonts/stories/source-serif/SourceSerifPro-BoldIt.woff2
Двоичные данные
media/fonts/stories/source-serif/SourceSerifPro-BoldIt.woff2
Двоичный файл не отображается.
Двоичные данные
media/fonts/stories/source-serif/SourceSerifPro-It.woff
Двоичные данные
media/fonts/stories/source-serif/SourceSerifPro-It.woff
Двоичный файл не отображается.
Двоичные данные
media/fonts/stories/source-serif/SourceSerifPro-It.woff2
Двоичные данные
media/fonts/stories/source-serif/SourceSerifPro-It.woff2
Двоичный файл не отображается.
Двоичные данные
media/fonts/stories/source-serif/SourceSerifPro-Light.woff
Двоичные данные
media/fonts/stories/source-serif/SourceSerifPro-Light.woff
Двоичный файл не отображается.
Двоичные данные
media/fonts/stories/source-serif/SourceSerifPro-Light.woff2
Двоичные данные
media/fonts/stories/source-serif/SourceSerifPro-Light.woff2
Двоичный файл не отображается.
Двоичные данные
media/fonts/stories/source-serif/SourceSerifPro-Regular.woff
Двоичные данные
media/fonts/stories/source-serif/SourceSerifPro-Regular.woff
Двоичный файл не отображается.
Двоичные данные
media/fonts/stories/source-serif/SourceSerifPro-Regular.woff2
Двоичные данные
media/fonts/stories/source-serif/SourceSerifPro-Regular.woff2
Двоичный файл не отображается.
Двоичные данные
media/img/stories/art-of-engagement-high-res.jpg
Двоичные данные
media/img/stories/art-of-engagement-high-res.jpg
Двоичный файл не отображается.
|
До Ширина: | Высота: | Размер: 52 KiB |
Двоичные данные
media/img/stories/art-of-engagement.jpg
Двоичные данные
media/img/stories/art-of-engagement.jpg
Двоичный файл не отображается.
|
До Ширина: | Высота: | Размер: 55 KiB |
Двоичные данные
media/img/stories/build-together-high-res.jpg
Двоичные данные
media/img/stories/build-together-high-res.jpg
Двоичный файл не отображается.
|
До Ширина: | Высота: | Размер: 21 KiB |
Двоичные данные
media/img/stories/build-together.jpg
Двоичные данные
media/img/stories/build-together.jpg
Двоичный файл не отображается.
|
До Ширина: | Высота: | Размер: 26 KiB |
Двоичные данные
media/img/stories/community-champion-high-res.jpg
Двоичные данные
media/img/stories/community-champion-high-res.jpg
Двоичный файл не отображается.
|
До Ширина: | Высота: | Размер: 56 KiB |
Двоичные данные
media/img/stories/community-champion.jpg
Двоичные данные
media/img/stories/community-champion.jpg
Двоичный файл не отображается.
|
До Ширина: | Высота: | Размер: 63 KiB |
Двоичные данные
media/img/stories/credit/amber-case-credit.jpg
Двоичные данные
media/img/stories/credit/amber-case-credit.jpg
Двоичный файл не отображается.
|
До Ширина: | Высота: | Размер: 5.8 KiB |
Двоичные данные
media/img/stories/credit/ania-safko-credit-high-res.jpg
Двоичные данные
media/img/stories/credit/ania-safko-credit-high-res.jpg
Двоичный файл не отображается.
|
До Ширина: | Высота: | Размер: 14 KiB |
Двоичные данные
media/img/stories/credit/ania-safko-credit.jpg
Двоичные данные
media/img/stories/credit/ania-safko-credit.jpg
Двоичный файл не отображается.
|
До Ширина: | Высота: | Размер: 7.1 KiB |
Двоичные данные
media/img/stories/credit/asa-dotzler-credit-high-res.jpg
Двоичные данные
media/img/stories/credit/asa-dotzler-credit-high-res.jpg
Двоичный файл не отображается.
|
До Ширина: | Высота: | Размер: 12 KiB |
Двоичные данные
media/img/stories/credit/asa-dotzler-credit.jpg
Двоичные данные
media/img/stories/credit/asa-dotzler-credit.jpg
Двоичный файл не отображается.
|
До Ширина: | Высота: | Размер: 6.4 KiB |
Двоичные данные
media/img/stories/credit/daniel-nazer-credit-high-res.jpg
Двоичные данные
media/img/stories/credit/daniel-nazer-credit-high-res.jpg
Двоичный файл не отображается.
|
До Ширина: | Высота: | Размер: 11 KiB |
Двоичные данные
media/img/stories/credit/daniel-nazer-credit.jpg
Двоичные данные
media/img/stories/credit/daniel-nazer-credit.jpg
Двоичный файл не отображается.
|
До Ширина: | Высота: | Размер: 6.3 KiB |
Двоичные данные
media/img/stories/credit/ingrid-fetell-lee-credit.jpg
Двоичные данные
media/img/stories/credit/ingrid-fetell-lee-credit.jpg
Двоичный файл не отображается.
|
До Ширина: | Высота: | Размер: 6.5 KiB |
Двоичные данные
media/img/stories/credit/jon-siddoway-credit-high-res.jpg
Двоичные данные
media/img/stories/credit/jon-siddoway-credit-high-res.jpg
Двоичный файл не отображается.
|
До Ширина: | Высота: | Размер: 10 KiB |
Двоичные данные
media/img/stories/credit/jon-siddoway-credit.jpg
Двоичные данные
media/img/stories/credit/jon-siddoway-credit.jpg
Двоичный файл не отображается.
|
До Ширина: | Высота: | Размер: 5.8 KiB |
Двоичные данные
media/img/stories/credit/karen-kim-credit.jpg
Двоичные данные
media/img/stories/credit/karen-kim-credit.jpg
Двоичный файл не отображается.
|
До Ширина: | Высота: | Размер: 3.7 KiB |
Двоичные данные
media/img/stories/credit/keely-alexis-credit.jpg
Двоичные данные
media/img/stories/credit/keely-alexis-credit.jpg
Двоичный файл не отображается.
|
До Ширина: | Высота: | Размер: 6.3 KiB |
Двоичные данные
media/img/stories/credit/mikal-lewis-credit.png
Двоичные данные
media/img/stories/credit/mikal-lewis-credit.png
Двоичный файл не отображается.
|
До Ширина: | Высота: | Размер: 9.2 KiB |
Двоичные данные
media/img/stories/credit/mike-hoye-credit-high-res.jpg
Двоичные данные
media/img/stories/credit/mike-hoye-credit-high-res.jpg
Двоичный файл не отображается.
|
До Ширина: | Высота: | Размер: 10 KiB |
Двоичные данные
media/img/stories/credit/mike-hoye-credit.jpg
Двоичные данные
media/img/stories/credit/mike-hoye-credit.jpg
Двоичный файл не отображается.
|
До Ширина: | Высота: | Размер: 5.8 KiB |
Двоичные данные
media/img/stories/credit/pamela-pavliscak-credit.jpg
Двоичные данные
media/img/stories/credit/pamela-pavliscak-credit.jpg
Двоичный файл не отображается.
|
До Ширина: | Высота: | Размер: 38 KiB |
Двоичные данные
media/img/stories/credit/ray-fembro-credit-high-res.jpg
Двоичные данные
media/img/stories/credit/ray-fembro-credit-high-res.jpg
Двоичный файл не отображается.
|
До Ширина: | Высота: | Размер: 7.7 KiB |
Двоичные данные
media/img/stories/credit/ray-fembro-credit.jpg
Двоичные данные
media/img/stories/credit/ray-fembro-credit.jpg
Двоичный файл не отображается.
|
До Ширина: | Высота: | Размер: 4.6 KiB |
Двоичные данные
media/img/stories/engagement-hero-high-res.jpg
Двоичные данные
media/img/stories/engagement-hero-high-res.jpg
Двоичный файл не отображается.
|
До Ширина: | Высота: | Размер: 163 KiB |
Двоичные данные
media/img/stories/engagement-hero.jpg
Двоичные данные
media/img/stories/engagement-hero.jpg
Двоичный файл не отображается.
|
До Ширина: | Высота: | Размер: 103 KiB |
|
|
@ -1 +0,0 @@
|
|||
<svg fill="none" height="10" viewBox="0 0 15 10" width="15" xmlns="http://www.w3.org/2000/svg"><path d="m9.56582.191469c-.26571.260397-.26572.692658-.00521.958261l3.16779 3.17164h-12.056292c-.36992 0-.672108.30207-.672108.67704s.302188.67703.672108.67703h12.051092l-3.1678 3.17164c-.26051.26561-.2553.69266.00521.95827.26572.26035.68779.26035.95349-.00521l4.2931-4.3226c.0573-.06249.1042-.1302.1407-.21353.0365-.08332.0521-.17186.0521-.26039 0-.17707-.0677-.34373-.1928-.47393l-4.2931-4.322597c-.2553-.2708137-.68256-.2760219-.94828-.015624z" fill="#000"/></svg>
|
||||
|
До Ширина: | Высота: | Размер: 563 B |
|
|
@ -1,3 +0,0 @@
|
|||
<svg width="36" height="36" viewBox="0 0 36 36" fill="none" xmlns="http://www.w3.org/2000/svg">
|
||||
<path d="M10 0C4.478 0 0 4.478 0 10V26C0 31.522 4.478 36 10 36H26C31.522 36 36 31.522 36 26V10C36 4.478 31.522 0 26 0H10ZM30 4C31.104 4 32 4.896 32 6C32 7.104 31.104 8 30 8C28.896 8 28 7.104 28 6C28 4.896 28.896 4 30 4ZM18 8C23.522 8 28 12.478 28 18C28 23.522 23.522 28 18 28C12.478 28 8 23.522 8 18C8 12.478 12.478 8 18 8ZM18 12C16.4087 12 14.8826 12.6321 13.7574 13.7574C12.6321 14.8826 12 16.4087 12 18C12 19.5913 12.6321 21.1174 13.7574 22.2426C14.8826 23.3679 16.4087 24 18 24C19.5913 24 21.1174 23.3679 22.2426 22.2426C23.3679 21.1174 24 19.5913 24 18C24 16.4087 23.3679 14.8826 22.2426 13.7574C21.1174 12.6321 19.5913 12 18 12Z" fill="black"/>
|
||||
</svg>
|
||||
|
До Ширина: | Высота: | Размер: 754 B |
|
|
@ -1,3 +0,0 @@
|
|||
<svg width="36" height="36" viewBox="0 0 36 36" fill="none" xmlns="http://www.w3.org/2000/svg">
|
||||
<path d="M32 0H4C1.79 0 0 1.79 0 4V32C0 34.21 1.79 36 4 36H32C34.21 36 36 34.21 36 32V4C36 1.79 34.21 0 32 0ZM12 28H6.954V14H12V28ZM9.388 11.434C7.846 11.434 6.816 10.406 6.816 9.034C6.816 7.662 7.844 6.634 9.558 6.634C11.1 6.634 12.13 7.662 12.13 9.034C12.13 10.406 11.102 11.434 9.388 11.434ZM30 28H25.116V20.348C25.116 18.232 23.814 17.744 23.326 17.744C22.838 17.744 21.21 18.07 21.21 20.348C21.21 20.674 21.21 28 21.21 28H16.164V14H21.21V15.954C21.86 14.814 23.162 14 25.604 14C28.046 14 30 15.954 30 20.348V28Z" fill="black"/>
|
||||
</svg>
|
||||
|
До Ширина: | Высота: | Размер: 636 B |
|
|
@ -1,3 +0,0 @@
|
|||
<svg width="41" height="37" viewBox="0 0 41 37" fill="none" xmlns="http://www.w3.org/2000/svg">
|
||||
<path fill-rule="evenodd" clip-rule="evenodd" d="M31.9299 15.2522L22.3945 24.1558C21.9037 24.7123 21.1324 24.9209 20.5715 24.9209C19.8704 24.9209 19.1693 24.7123 18.6084 24.1558L9.2132 15.2522C8.23162 14.2088 8.09139 12.4698 9.2132 11.3568C10.2649 10.383 12.0177 10.2439 13.0694 11.3568L20.5715 18.5215L28.2139 11.3568C29.1954 10.2439 30.9483 10.383 31.9299 11.3568C32.9114 12.4698 32.9114 14.2088 31.9299 15.2522ZM37.2668 0H4.72291C2.60967 0 0.848633 1.64108 0.848633 3.78161V15.9826C0.848633 27.0421 9.86514 36.2464 20.9949 36.2464C32.0542 36.2464 41.0002 27.0421 41.0002 15.9826V3.78161C41.0002 1.64108 39.3096 0 37.2668 0Z" fill="black"/>
|
||||
</svg>
|
||||
|
До Ширина: | Высота: | Размер: 746 B |
|
|
@ -1,3 +0,0 @@
|
|||
<svg width="40" height="33" viewBox="0 0 40 33" fill="none" xmlns="http://www.w3.org/2000/svg">
|
||||
<path d="M40 0.998047C38.44 1.92405 35.31 3.18605 33.47 3.55005C33.416 3.56405 33.372 3.58205 33.32 3.59605C31.694 1.99205 29.466 0.998047 27 0.998047C22.03 0.998047 18 5.02805 18 9.99805C18 10.26 17.978 10.742 18 10.998C11.294 10.998 6.19 7.48605 2.53 2.99805C2.132 3.99805 1.958 5.57805 1.958 7.06205C1.958 9.86405 4.148 12.616 7.558 14.322C6.93 14.484 6.238 14.6 5.518 14.6C4.356 14.6 3.126 14.294 2 13.366C2 13.4 2 13.432 2 13.468C2 17.384 6.156 20.05 9.852 20.792C9.102 21.234 7.59 21.278 6.852 21.278C6.332 21.278 4.492 21.04 4 20.948C5.028 24.158 8.736 25.962 12.27 26.026C9.506 28.194 7.588 28.998 1.928 28.998H0C3.576 31.29 8.13 33 12.694 33C27.554 33 36 21.674 36 10.998C36 10.826 35.996 10.466 35.99 10.104C35.99 10.068 36 10.034 36 9.99805C36 9.94405 35.984 9.89205 35.984 9.83805C35.978 9.56605 35.972 9.31205 35.966 9.18005C37.546 8.04005 38.916 6.61805 40 4.99805C38.55 5.64205 36.994 6.07405 35.36 6.27005C37.028 5.27005 39.398 2.88605 40 0.998047Z" fill="black"/>
|
||||
</svg>
|
||||
|
До Ширина: | Высота: | Размер: 1.1 KiB |
Двоичные данные
media/img/stories/joy-of-color-colorways-high-res.png
Двоичные данные
media/img/stories/joy-of-color-colorways-high-res.png
Двоичный файл не отображается.
|
До Ширина: | Высота: | Размер: 307 KiB |
Двоичные данные
media/img/stories/joy-of-color-colorways.png
Двоичные данные
media/img/stories/joy-of-color-colorways.png
Двоичный файл не отображается.
|
До Ширина: | Высота: | Размер: 158 KiB |
Двоичные данные
media/img/stories/joy-of-color-hero-high-res.jpg
Двоичные данные
media/img/stories/joy-of-color-hero-high-res.jpg
Двоичный файл не отображается.
|
До Ширина: | Высота: | Размер: 167 KiB |
Двоичные данные
media/img/stories/joy-of-color-hero.jpg
Двоичные данные
media/img/stories/joy-of-color-hero.jpg
Двоичный файл не отображается.
|
До Ширина: | Высота: | Размер: 67 KiB |
Двоичные данные
media/img/stories/joy-of-color-high-res.jpg
Двоичные данные
media/img/stories/joy-of-color-high-res.jpg
Двоичный файл не отображается.
|
До Ширина: | Высота: | Размер: 34 KiB |
Двоичные данные
media/img/stories/joy-of-color-sneakers-high-res.jpg
Двоичные данные
media/img/stories/joy-of-color-sneakers-high-res.jpg
Двоичный файл не отображается.
|
До Ширина: | Высота: | Размер: 135 KiB |
Двоичные данные
media/img/stories/joy-of-color-sneakers.jpg
Двоичные данные
media/img/stories/joy-of-color-sneakers.jpg
Двоичный файл не отображается.
|
До Ширина: | Высота: | Размер: 84 KiB |
Двоичные данные
media/img/stories/joy-of-color-window-wall-high-res.jpg
Двоичные данные
media/img/stories/joy-of-color-window-wall-high-res.jpg
Двоичный файл не отображается.
|
До Ширина: | Высота: | Размер: 221 KiB |
Двоичные данные
media/img/stories/joy-of-color-window-wall.jpg
Двоичные данные
media/img/stories/joy-of-color-window-wall.jpg
Двоичный файл не отображается.
|
До Ширина: | Высота: | Размер: 186 KiB |
Двоичные данные
media/img/stories/joy-of-color.jpg
Двоичные данные
media/img/stories/joy-of-color.jpg
Двоичный файл не отображается.
|
До Ширина: | Высота: | Размер: 11 KiB |
Двоичные данные
media/img/stories/mozilla-connect-high-res.png
Двоичные данные
media/img/stories/mozilla-connect-high-res.png
Двоичный файл не отображается.
|
До Ширина: | Высота: | Размер: 33 KiB |
Двоичные данные
media/img/stories/mozilla-connect-message-high-res.png
Двоичные данные
media/img/stories/mozilla-connect-message-high-res.png
Двоичный файл не отображается.
|
До Ширина: | Высота: | Размер: 20 KiB |
Двоичные данные
media/img/stories/mozilla-connect-message.png
Двоичные данные
media/img/stories/mozilla-connect-message.png
Двоичный файл не отображается.
|
До Ширина: | Высота: | Размер: 12 KiB |
Двоичные данные
media/img/stories/mozilla-connect.png
Двоичные данные
media/img/stories/mozilla-connect.png
Двоичный файл не отображается.
|
До Ширина: | Высота: | Размер: 18 KiB |
Двоичные данные
media/img/stories/platform-discovery-1000.jpg
Двоичные данные
media/img/stories/platform-discovery-1000.jpg
Двоичный файл не отображается.
|
До Ширина: | Высота: | Размер: 45 KiB |
Двоичные данные
media/img/stories/platform-discovery-1500.jpg
Двоичные данные
media/img/stories/platform-discovery-1500.jpg
Двоичный файл не отображается.
|
До Ширина: | Высота: | Размер: 60 KiB |
Двоичные данные
media/img/stories/platform-discovery-500.jpg
Двоичные данные
media/img/stories/platform-discovery-500.jpg
Двоичный файл не отображается.
|
До Ширина: | Высота: | Размер: 37 KiB |
Двоичные данные
media/img/stories/raising-technology-eq-1000.jpg
Двоичные данные
media/img/stories/raising-technology-eq-1000.jpg
Двоичный файл не отображается.
|
До Ширина: | Высота: | Размер: 98 KiB |
Двоичные данные
media/img/stories/raising-technology-eq-1500.jpg
Двоичные данные
media/img/stories/raising-technology-eq-1500.jpg
Двоичный файл не отображается.
|
До Ширина: | Высота: | Размер: 177 KiB |
Двоичные данные
media/img/stories/raising-technology-eq-500.jpg
Двоичные данные
media/img/stories/raising-technology-eq-500.jpg
Двоичный файл не отображается.
|
До Ширина: | Высота: | Размер: 38 KiB |
Двоичные данные
media/img/stories/social/art-of-engagement-social.jpg
Двоичные данные
media/img/stories/social/art-of-engagement-social.jpg
Двоичный файл не отображается.
|
До Ширина: | Высота: | Размер: 158 KiB |
Двоичные данные
media/img/stories/social/building-together-social.jpg
Двоичные данные
media/img/stories/social/building-together-social.jpg
Двоичный файл не отображается.
|
До Ширина: | Высота: | Размер: 58 KiB |
Двоичные данные
media/img/stories/social/community-champion-social.jpg
Двоичные данные
media/img/stories/social/community-champion-social.jpg
Двоичный файл не отображается.
|
До Ширина: | Высота: | Размер: 137 KiB |
Двоичные данные
media/img/stories/social/joy-of-color-social.jpg
Двоичные данные
media/img/stories/social/joy-of-color-social.jpg
Двоичный файл не отображается.
|
До Ширина: | Высота: | Размер: 70 KiB |
Двоичные данные
media/img/stories/social/raising-technology-eq-social.jpg
Двоичные данные
media/img/stories/social/raising-technology-eq-social.jpg
Двоичный файл не отображается.
|
До Ширина: | Высота: | Размер: 98 KiB |
|
|
@ -1,24 +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/.
|
||||
*/
|
||||
|
||||
const isReduced =
|
||||
window.matchMedia(`(prefers-reduced-motion: reduce)`) === true ||
|
||||
window.matchMedia(`(prefers-reduced-motion: reduce)`).matches === true;
|
||||
|
||||
function getHeaderStyle() {
|
||||
const header = document.querySelector('.c-stories-article-header');
|
||||
const articleBody = document.querySelector('.c-stories-article-body');
|
||||
|
||||
if (!isReduced) {
|
||||
const headerHeight = getComputedStyle(header).height;
|
||||
articleBody.style.top = headerHeight;
|
||||
articleBody.style.marginBottom = headerHeight;
|
||||
}
|
||||
}
|
||||
|
||||
window.addEventListener('resize', getHeaderStyle);
|
||||
|
||||
getHeaderStyle();
|
||||
|
|
@ -1246,24 +1246,6 @@
|
|||
],
|
||||
"name": "webvision"
|
||||
},
|
||||
{
|
||||
"files": [
|
||||
"css/stories/stories-shared.scss"
|
||||
],
|
||||
"name": "mozilla-stories-shared"
|
||||
},
|
||||
{
|
||||
"files": [
|
||||
"css/stories/stories-landing.scss"
|
||||
],
|
||||
"name": "mozilla-stories-landing"
|
||||
},
|
||||
{
|
||||
"files": [
|
||||
"css/stories/stories-article.scss"
|
||||
],
|
||||
"name": "mozilla-stories-article"
|
||||
},
|
||||
{
|
||||
"files": [
|
||||
"css/firefox/family/styles.scss"
|
||||
|
|
@ -1912,12 +1894,6 @@
|
|||
],
|
||||
"name": "privacy-data-preferences"
|
||||
},
|
||||
{
|
||||
"files": [
|
||||
"js/stories/stories-article.es6.js"
|
||||
],
|
||||
"name": "stories-article"
|
||||
},
|
||||
{
|
||||
"files": [
|
||||
"js/firefox/family/subnav.js",
|
||||
|
|
|
|||
|
|
@ -1280,8 +1280,10 @@ URLS = flatten(
|
|||
),
|
||||
# Issue 14221
|
||||
url_test("/firefox/products/", "/products/"),
|
||||
# Issue 14255
|
||||
# Issue 14252
|
||||
url_test("/rise25/", "/rise25/nominate/"),
|
||||
# Issue 14255
|
||||
url_test("/stories/", "https://blog.mozilla.org/category/products/firefox/"),
|
||||
# Issue 14231
|
||||
url_test("/firefox/flashback/", "/firefox/"),
|
||||
url_test("/landing/firefox/fx100/", "/firefox/"),
|
||||
|
|
|
|||
Загрузка…
Ссылка в новой задаче