Added covid response section and fixed responsiveness of message section

This commit is contained in:
Karishma Chadha 2020-09-24 18:02:13 -04:00
parent 34440308eb
commit 8b1c008ee2
3 changed files with 81 additions and 1 deletions

View file

@ -313,7 +313,7 @@ class AnnualReport extends React.Component {
<FormattedMessage id="annualReport.messageSignature" />
</p>
<img
className="team-photo"
className="team-photo"
src="/images/annual-report/message/team-photo.svg"
/>
</div>
@ -324,6 +324,38 @@ class AnnualReport extends React.Component {
<img src="/images/annual-report/message/banana.svg" />
</div>
</div>
<div className="covid-response-section inner">
<h2>
<FormattedMessage id="annualReport.covidResponseTitle" />
</h2>
<p>
<FormattedMessage id="annualReport.covidResponseP1" />
</p>
<p>
<FormattedMessage
id="annualReport.covidResponseP2"
values={{
scratchAtHomeLink: (
<a href="#">
<FormattedMessage id="annualReport.covidResponseScratchAtHomePage" />
</a>
)
}}
/>
</p>
<p>
<FormattedMessage
id="annualReport.covidResponseP3"
values={{
scratchCommunityLink: (
<a href="#">
<FormattedMessage id="annualReport.covidResponseScratchCommunity" />
</a>
)
}}
/>
</p>
</div>
<div
className="mission section"
id="mission"

View file

@ -179,6 +179,7 @@ p {
@media #{$small} {
max-width: 300px;
margin-right: 0px;
}
}
}
@ -190,6 +191,46 @@ p {
img {
margin-bottom: -140px;
}
@media #{$small} {
img {
width: 100px;
margin-bottom: -64px;
}
}
}
.covid-response-section {
display: flex;
flex-direction: column;
align-items: center;
padding: 124px 0px;
h2 {
margin-bottom: 44px;
}
p {
width: 620px;
}
@media #{$intermediate-and-smaller} {
text-align: left;
}
@media #{$medium} {
p {
width: 460px;
}
}
@media #{$small} {
p {
width: 300px;
}
}
}
.milestones-section {

View file

@ -19,6 +19,13 @@
"annualReport.messageP5": "Were proud of what young people are creating and learning with Scratch today, and were committed to providing more opportunities for more young people in the future.",
"annualReport.messageSignature": "— The Scratch Team",
"annualReport.covidResponseTitle": "Scratch Responds to COVID",
"annualReport.covidResponseP1": "As we write this annual report for 2019, we are months into the COVID pandemic. Since the middle of March 2020, the Scratch office has been closed and Scratch Team members have been actively working from home to support children and educators around the world whose lives have been disrupted by the pandemic.",
"annualReport.covidResponseP2": "On March 17, we launched the #ScratchAtHome initiative to provide children, families, and educators with ideas for engaging in creative learning activities with Scratch at home. We continue to add video tutorials and other resources to the {scratchAtHomeLink}.",
"annualReport.covidResponseScratchAtHomePage": "#ScratchAtHome page",
"annualReport.covidResponseP3": "Activity on the Scratch website has more than doubled from year-earlier levels, as young people come to the {scratchCommunityLink} to engage and connect with one another while isolated at home. Scratchers are creating and sharing projects to support and inspire others through the pandemic—with projects and studios that offer ideas for exercising at home, tips for staying healthy, humor to cheer up one another, and thanks to essential workers.",
"annualReport.covidResponseScratchCommunity": "Scratch online community",
"annualReport.milestonesTitle": "Milestones",
"annualReport.milestonesDescription": "Here are some key events and accomplishments in the history of Scratch and the global Scratch community.",
"annualReport.milestones2003Message": "Awarded National Science Foundation grant to start development of Scratch",