more content changes

This commit is contained in:
caseymm 2021-09-29 17:04:29 -07:00
parent 4277aa5db0
commit 2263ec4974
3 changed files with 56 additions and 27 deletions

View file

@ -514,6 +514,9 @@ class AnnualReport extends React.Component {
<h4>
<FormattedMessage id="annualReport.reachNewUsers" />
</h4>
<div className="increase-bubble">
<FormattedMessage id="annualReport.reachNewUsersIncrease" />
</div>
</div>
<div className="reach-datapoint">
<FormattedMessage
@ -529,6 +532,9 @@ class AnnualReport extends React.Component {
<h4>
<FormattedMessage id="annualReport.reachProjectsCreated" />
</h4>
<div className="increase-bubble">
<FormattedMessage id="annualReport.reachProjectsCreatedIncrease" />
</div>
</div>
<div className="reach-datapoint">
<FormattedMessage
@ -544,6 +550,9 @@ class AnnualReport extends React.Component {
<h4>
<FormattedMessage id="annualReport.reachProjectCreators" />
</h4>
<div className="increase-bubble">
<FormattedMessage id="annualReport.reachProjectCreatorsIncrease" />
</div>
</div>
<div className="reach-datapoint">
<FormattedMessage
@ -552,20 +561,12 @@ class AnnualReport extends React.Component {
<h4>
<FormattedMessage id="annualReport.reachComments" />
</h4>
<div className="increase-bubble">
<FormattedMessage id="annualReport.reachIncreaseInCommentsIncrease" />
</div>
</div>
</div>
</div>
<div className="reach-growth">
<div className="growth-blurb">
<h3>
<FormattedMessage id="annualReport.reachGrowthTitle" />
</h3>
<p>
<FormattedMessage id="annualReport.reachGrowthBlurb" />
</p>
</div>
<img src="/images/annual-report/reach/community-growth-graph.svg" />
</div>
</div>
<div className="map-inner">
<div className="reach-map">
@ -635,6 +636,9 @@ class AnnualReport extends React.Component {
<h3>
<FormattedMessage id="annualReport.reachTranslationTitle" />
</h3>
<div>
<FormattedMessage id="annualReport.reachTranslationIncrease" />
</div>
<p>
<FormattedMessage id="annualReport.reachTranslationBlurb" />
</p>
@ -658,7 +662,7 @@ class AnnualReport extends React.Component {
</div>
<div className="reach-datapoint">
<FormattedMessage
id="annualReport.reach22million"
id="annualReport.reachDownloadsMillion"
values={{
million: (
<div className="million">
@ -670,6 +674,9 @@ class AnnualReport extends React.Component {
<h4>
<FormattedMessage id="annualReport.reachDownloads" />
</h4>
<div className="increase-bubble">
<FormattedMessage id="annualReport.reachDownloadsIncrease" />
</div>
</div>
</div>
<MediaQuery minWidth={frameless.mobile}>
@ -680,15 +687,15 @@ class AnnualReport extends React.Component {
</div>
<div
className="initiatives-section"
ref={this.setRef(SECTIONS.initiatives)}
ref={this.setRef(SECTIONS.themes)}
>
<div className="initiatives-intro">
<div className="inner">
<h2>
<FormattedMessage id="annualReport.initiativesTitle" />
<FormattedMessage id="annualReport.themesTitle" />
</h2>
<p>
<FormattedMessage id="annualReport.initiativesDescription" />
<FormattedMessage id="annualReport.themesDescription" />
</p>
<div className="initiatives-pillars">
<div className="three-pillars">

View file

@ -605,7 +605,7 @@ p {
align-items: center;
}
background-color: $ui-aqua;
background-color: $ui-teal;
color: $ui-white;
h2, h3, h4, p {
@ -613,7 +613,7 @@ p {
}
.reach-intro {
max-width: 620px;
max-width: 900px;
text-align: center;
p {
@ -656,6 +656,15 @@ p {
}
}
.increase-bubble {
background-color: darken($ui-teal, 10%);
border-radius: 50px;
padding: 10px;
font-size: 14px;
margin: 15px auto;
max-width: 170px;
}
.map-inner {
max-width: 940px;
margin: 0 auto;
@ -771,7 +780,7 @@ p {
.reach-datapoint {
font-size: 5rem;
font-weight: bold;
width: 220px;
width: 286px;
text-align: center;
margin: 32px 0;
@ -822,7 +831,7 @@ p {
}
.reach-scratch-jr {
background-color: #0EA57A;
background-color: darken($ui-teal, 10%);
color: $ui-white;
padding: 100px 0;
@ -845,6 +854,15 @@ p {
}
}
.increase-bubble {
background-color: darken($ui-teal, 15%);
border-radius: 50px;
padding: 10px;
font-size: 14px;
margin: 15px auto;
max-width: 170px;
}
@media #{$intermediate-and-smaller} {
.inner {
max-width: 620px;

View file

@ -40,27 +40,31 @@
"annualReport.reachSubtitle": "Scratch is the worlds largest coding community for children and teens, ages 8 and up.",
"annualReport.reachMillion": "million",
"annualReport.reachNewUsersNumber": "15 {million}",
"annualReport.reachNewUsersIncrease": "3.8% from 2019",
"annualReport.reachProjectsCreatedNumber": "80 {million}",
"annualReport.reachProjectsCreatedIncrease": "37% from 2019",
"annualReport.reachProjectCreatorsNumber": "29 {million}",
"annualReport.reachIncreaseInCommentsNumber": "217 %",
"annualReport.reachProjectCreatorsIncrease": "44% from 2019",
"annualReport.reachIncreaseInCommentsNumber": "217%",
"annualReport.reachIncreaseInCommentsIncrease": "48 {million} > 50 {million}",
"annualReport.reachNewUsers": "New Users",
"annualReport.reachProjectsCreated": "Projects Created",
"annualReport.reachProjectCreators": "People Creating Projects",
"annualReport.reachComments": "increase in comments made since 2019",
"annualReport.reachGrowthTitle": "Community Growth",
"annualReport.reachGrowthBlurb": "New accounts created in the Scratch Online Community within the last 5 years.",
"annualReport.reachGlobalCommunity": "Our Global Community",
"annualReport.reachMapBlurb": "Total accounts registered in the Scratch Online Community from the launch of Scratch through 2019",
"annualReport.reachMap20M": "20M",
"annualReport.reachMapLog": "on a logarithmic scale",
"annualReport.reachTranslationTitle": "Scratch is Translated into 60+ Languages",
"annualReport.reachTranslationTitle": "Scratch is Translated into 7x Languages",
"annualReport.reachTranslationIncrease": "x languages from 2019",
"annualReport.reachTranslationBlurb": "Thanks to volunteer translators from around the world.",
"annualReport.reachScratchJrBlurb": "ScratchJr is an introductory programming environment that enables young children (ages 5-7) to create their own interactive stories and games.",
"annualReport.reach22million": "22 {million}",
"annualReport.reachDownloads": "Downloads Since Launching in 2014",
"annualReport.reachDownloadsMillion": "3 {million}",
"annualReport.reachDownloads": "Downloads in 2020",
"annualReport.reachDownloadsIncrease": "x million from 2019",
"annualReport.initiativesTitle": "Initiatives",
"annualReport.initiativesDescription": "The work at the Scratch Foundation centers on three strategic areas: creative tools, community, and schools. Each area prioritizes the voice and needs of children who are underrepresented in creative computing and seeks to support children in diverse settings and cultures around the world.",
"annualReport.themesTitle": "Emerging Themes",
"annualReport.themesDescription": "As young people faced the unprecedented challenges of COVID-19, Scratch became a more important place than ever for them to connect, create, and express themselves. Throughout the year, our work was focused on three areas to best support our growing global community: connectivity, adaptation, and community. As always, our efforts were grounded in our commitment to equity and inclusion.",
"annualReport.equity": "Equity",
"annualReport.globalStrategy": "Global Strategy",