mirror of
https://github.com/scratchfoundation/scratch-www.git
synced 2024-11-23 07:38:07 -05:00
work on initiatives section
This commit is contained in:
seotts
Karishma Chadha
parent
c61953e94a
commit
712004ff02
5 changed files with 209 additions and 4 deletions
|
|
@ -266,7 +266,7 @@ class AnnualReport extends React.Component {
|
||||||
null
|
null
|
||||||
}
|
}
|
||||||
</MediaQuery>
|
</MediaQuery>
|
||||||
{/* Bottom Bar */}
|
{/* For large screens, show whole subnav, with no dropdown */}
|
||||||
<MediaQuery minWidth={frameless.tabletPortrait}>
|
<MediaQuery minWidth={frameless.tabletPortrait}>
|
||||||
{subnav}
|
{subnav}
|
||||||
</MediaQuery>
|
</MediaQuery>
|
||||||
|
|
@ -731,11 +731,99 @@ class AnnualReport extends React.Component {
|
||||||
</div>
|
</div>
|
||||||
</div>
|
</div>
|
||||||
<div
|
<div
|
||||||
className="initiatives section"
|
className="initiatives-section section"
|
||||||
ref={this.setRef(SECTIONS.initiatives)}
|
ref={this.setRef(SECTIONS.initiatives)}
|
||||||
>
|
>
|
||||||
{/* <div className="inner">
|
<div className="initiatives-community">
|
||||||
</div> */}
|
<div className="initiatives-subsection-header community">
|
||||||
|
<div className="inner">
|
||||||
|
<h2>
|
||||||
|
<FormattedMessage id="annualReport.communityTitle" />
|
||||||
|
</h2>
|
||||||
|
<p>
|
||||||
|
<FormattedMessage id="annualReport.communityIntro" />
|
||||||
|
</p>
|
||||||
|
</div>
|
||||||
|
</div>
|
||||||
|
<div className="initiatives-subsection-content">
|
||||||
|
<div className="inner">
|
||||||
|
<div className="subsection-tag">
|
||||||
|
<FormattedMessage id="annualReport.communitySpotlight" />
|
||||||
|
</div>
|
||||||
|
<div className="community-team-intro">
|
||||||
|
<h2>
|
||||||
|
<FormattedMessage id="annualReport.communityTeam" />
|
||||||
|
</h2>
|
||||||
|
<p>
|
||||||
|
<FormattedMessage id="annualReport.communityTeamIntro1" />
|
||||||
|
</p>
|
||||||
|
<p>
|
||||||
|
<FormattedMessage id="annualReport.communityTeamIntro2" />
|
||||||
|
</p>
|
||||||
|
</div>
|
||||||
|
<img src="/images/annual-report/initiatives/community-hero.png" />
|
||||||
|
<div className="moderation-and-guidelines">
|
||||||
|
<div className="community-moderation">
|
||||||
|
<h4>
|
||||||
|
<FormattedMessage id="annualReport.communityModerationTitle" />
|
||||||
|
</h4>
|
||||||
|
<p>
|
||||||
|
<FormattedMessage id="annualReport.communityModerationInfo" />
|
||||||
|
</p>
|
||||||
|
</div>
|
||||||
|
<div className="community-guidelines">
|
||||||
|
<h4>
|
||||||
|
<FormattedMessage id="annualReport.communityGuidelinesTitle" />
|
||||||
|
</h4>
|
||||||
|
<p>
|
||||||
|
|
||||||
|
</p>
|
||||||
|
<div className="guidelines-list">
|
||||||
|
<ul>
|
||||||
|
<li>
|
||||||
|
<FormattedMessage id="guidelines.respectheader" />
|
||||||
|
</li>
|
||||||
|
<li>
|
||||||
|
<FormattedMessage id="guidelines.shareheader" />
|
||||||
|
</li>
|
||||||
|
<li>
|
||||||
|
<FormattedMessage id="guidelines.honestheader" />
|
||||||
|
</li>
|
||||||
|
</ul>
|
||||||
|
<ul>
|
||||||
|
<li>
|
||||||
|
<FormattedMessage id="guidelines.constructiveheader" />
|
||||||
|
</li>
|
||||||
|
<li>
|
||||||
|
<FormattedMessage id="guidelines.privacyheader" />
|
||||||
|
</li>
|
||||||
|
<li>
|
||||||
|
<FormattedMessage id="guidelines.friendlyheader" />
|
||||||
|
</li>
|
||||||
|
</ul>
|
||||||
|
</div>
|
||||||
|
</div>
|
||||||
|
<div className="communityEngagement">
|
||||||
|
<h4>
|
||||||
|
<FormattedMessage id="annualReport.communityEngagementTitle" />
|
||||||
|
</h4>
|
||||||
|
<p>
|
||||||
|
<FormattedMessage
|
||||||
|
id="annualReport.communityEngagementInfo"
|
||||||
|
values={{
|
||||||
|
storySwapLink: (
|
||||||
|
<a href="#">
|
||||||
|
<FormattedMessage id="annualReport.storySwap" />
|
||||||
|
</a>
|
||||||
|
)
|
||||||
|
}}
|
||||||
|
/>
|
||||||
|
</p>
|
||||||
|
</div>
|
||||||
|
</div>
|
||||||
|
</div>
|
||||||
|
</div>
|
||||||
|
</div>
|
||||||
</div>
|
</div>
|
||||||
<div
|
<div
|
||||||
className="financials-section section"
|
className="financials-section section"
|
||||||
|
|
|
||||||
|
|
@ -487,6 +487,90 @@ p {
|
||||||
}
|
}
|
||||||
}
|
}
|
||||||
|
|
||||||
|
.initiatives-section {
|
||||||
|
.initiatives-subsection-header {
|
||||||
|
// background-image: url("/images/annual-report/initiatives/guideline-splash.svg");
|
||||||
|
padding: 92px 0;
|
||||||
|
|
||||||
|
//>.initiatives-community {
|
||||||
|
// background-color: $ui-blue-dark;
|
||||||
|
//}
|
||||||
|
|
||||||
|
&.community {
|
||||||
|
background-color: $ui-blue-dark;
|
||||||
|
}
|
||||||
|
|
||||||
|
.inner {
|
||||||
|
max-width: 780px;
|
||||||
|
text-align: center;
|
||||||
|
|
||||||
|
h2, p {
|
||||||
|
color: $ui-white;
|
||||||
|
}
|
||||||
|
|
||||||
|
p {
|
||||||
|
font-size: 1.25rem;
|
||||||
|
line-height: 2.5rem;
|
||||||
|
}
|
||||||
|
}
|
||||||
|
}
|
||||||
|
|
||||||
|
.initiatives-subsection-content {
|
||||||
|
.inner {
|
||||||
|
max-width: 1032px;
|
||||||
|
display: flex;
|
||||||
|
flex-direction: column;
|
||||||
|
align-items: center;
|
||||||
|
padding: 72px;
|
||||||
|
}
|
||||||
|
}
|
||||||
|
|
||||||
|
.initiatives-community {
|
||||||
|
img {
|
||||||
|
width: 100%;
|
||||||
|
}
|
||||||
|
|
||||||
|
.moderation-and-guidelines {
|
||||||
|
display: flex;
|
||||||
|
justify-content: space-between;
|
||||||
|
}
|
||||||
|
|
||||||
|
.community-moderation {
|
||||||
|
width: 380px;
|
||||||
|
margin-right: 80px;
|
||||||
|
}
|
||||||
|
|
||||||
|
.community-guidelines {
|
||||||
|
width: 460px;
|
||||||
|
|
||||||
|
p {
|
||||||
|
font-size: 1.25rem;
|
||||||
|
}
|
||||||
|
}
|
||||||
|
|
||||||
|
.guidelines-list {
|
||||||
|
display: flex;
|
||||||
|
|
||||||
|
ul {
|
||||||
|
list-style-image: url('/images/annual-report/initiatives/guideline-splash.svg');
|
||||||
|
}
|
||||||
|
li {
|
||||||
|
vertical-align: middle;
|
||||||
|
}
|
||||||
|
}
|
||||||
|
}
|
||||||
|
|
||||||
|
.community-team-intro {
|
||||||
|
max-width: 780px;
|
||||||
|
text-align: center;
|
||||||
|
margin: 32px 0;
|
||||||
|
|
||||||
|
p {
|
||||||
|
max-width: 620px;
|
||||||
|
}
|
||||||
|
}
|
||||||
|
}
|
||||||
|
|
||||||
.financials-section {
|
.financials-section {
|
||||||
.inner {
|
.inner {
|
||||||
max-width: 780px;
|
max-width: 780px;
|
||||||
|
|
|
||||||
|
|
@ -64,6 +64,20 @@
|
||||||
"annualReport.reach22million": "22 {million}",
|
"annualReport.reach22million": "22 {million}",
|
||||||
"annualReport.reachDownloads": "Downloads Since Launching in 2014",
|
"annualReport.reachDownloads": "Downloads Since Launching in 2014",
|
||||||
|
|
||||||
|
"annualReport.communityTitle": "Community",
|
||||||
|
"annualReport.communityIntro": "The Scratch programming language has always been intertwined with the Scratch online community, providing opportunities for children to collaborate, share, and provide feedback to one another.",
|
||||||
|
"annualReport.communitySpotlight": "Community - Spotlight Story",
|
||||||
|
"annualReport.communityTeam": "Scratch Community Team",
|
||||||
|
"annualReport.communityTeamIntro1": "When asked why they use Scratch, most Scratchers talk about the importance of the online community for motivating their ongoing participation, providing a space where they can express their creativity, make friends, receive feedback, get new ideas, and learn new skills. Many Scratchers express their appreciation for the Scratch community as a safe and welcoming space to connect, share, and learn from one another.",
|
||||||
|
"annualReport.communityTeamIntro2": "With 40,000 new projects and 400,000 new comments in the Scratch online community each day, how can we ensure that the community remains safe and friendly, while also supporting and encouraging creative expression? Our Community Team, including full-time staff and a network of moderators, leads this essential work . Two key dimensions of the Community Team's work include moderation and community engagement.",
|
||||||
|
"annualReport.communityModerationTitle": "Community Moderation",
|
||||||
|
"annualReport.communityModerationInfo": "When young people join the Scratch community, they agree to follow a set of Community Guidelines, which are designed to keep Scratch a safe and supportive place for young people from all backgrounds. Our Community Team uses a wide variety of tools and strategies to encourage good digital citizenship and maintain a positive environment for Scratchers to create in. Automated filters prevent private information from being shared or inappropriate content from being posted, and we allow anyone to report content they feel violates the Community Guidelines.",
|
||||||
|
"annualReport.communityGuidelinesTitle": "Community Guidelines",
|
||||||
|
"annualReport.communityGuidelinesInfo": "Scratch welcomes people of all ages, races, ethnicities, religions, abilities, sexual orientations, and gender identities.",
|
||||||
|
"annualReport.communityEngagementTitle": "Community Engagement",
|
||||||
|
"annualReport.storySwap": "Story Swap",
|
||||||
|
"annualReport.communityEngagementInfo": "Another major role of the Community Team is to highlight and develop opportunities for young people to express their ideas and become engaged in positive ways. The team features projects and studios from community members to serve as inspiration, and it regularly posts Scratch Design Studios to encourage creative activity. Each summer, the team organizes an online Scratch Camp: the theme in 2019 was {storySwapLink}, with Scratchers building on one another’s stories.",
|
||||||
|
|
||||||
"annualReport.financialsTitle": "Financials - 2019",
|
"annualReport.financialsTitle": "Financials - 2019",
|
||||||
"annualReport.financialsRevenue": "Revenues",
|
"annualReport.financialsRevenue": "Revenues",
|
||||||
"annualReport.financialsGrants": "Grants, Individual, & Corporate Donations (Gala Included)",
|
"annualReport.financialsGrants": "Grants, Individual, & Corporate Donations (Gala Included)",
|
||||||
|
|
|
||||||
BIN
static/images/annual-report/initiatives/community-hero.png
Normal file
BIN
static/images/annual-report/initiatives/community-hero.png
Normal file
Binary file not shown.
|
After Width: | Height: | Size: 521 KiB |
19
static/images/annual-report/initiatives/guideline-splash.svg
Normal file
19
static/images/annual-report/initiatives/guideline-splash.svg
Normal file
|
|
@ -0,0 +1,19 @@
|
||||||
|
<?xml version="1.0" encoding="UTF-8"?>
|
||||||
|
<svg width="16px" height="16px" viewBox="0 0 16 16" version="1.1" xmlns="http://www.w3.org/2000/svg" xmlns:xlink="http://www.w3.org/1999/xlink">
|
||||||
|
<title>Oval Copy</title>
|
||||||
|
<g id="R2_Columns-12" stroke="none" stroke-width="1" fill="none" fill-rule="evenodd">
|
||||||
|
<g id="R2---BOTTOM---12-Column-(grid)" transform="translate(-650.000000, -7599.000000)" fill="#4D97FF">
|
||||||
|
<g id="Our-Work" transform="translate(-152.000000, -22.000000)">
|
||||||
|
<g id="Community" transform="translate(152.000000, 5738.000000)">
|
||||||
|
<g id="Scratch-Community-Team" transform="translate(122.000000, 460.000000)">
|
||||||
|
<g id="Community-Guidelines" transform="translate(527.000000, 1210.000000)">
|
||||||
|
<g id="Guideliens" transform="translate(1.000000, 212.000000)">
|
||||||
|
<path d="M8.43792291,17 C13.3224927,17 16.5980278,11.1934985 15.9084415,6.97687245 C15.2188551,2.76024638 12.6889307,1.61799274 7.97675748,1.0649926 C3.26458425,0.511992464 -0.469233814,3.52062157 0.0479559315,8.84324793 C0.565145677,14.1658743 3.55335309,17 8.43792291,17 Z" id="Oval-Copy"></path>
|
||||||
|
</g>
|
||||||
|
</g>
|
||||||
|
</g>
|
||||||
|
</g>
|
||||||
|
</g>
|
||||||
|
</g>
|
||||||
|
</g>
|
||||||
|
</svg>
|
||||||
|
After Width: | Height: | Size: 1.3 KiB |
Loading…
Reference in a new issue