-
+
-
-
+
+
-
+
-
+
-
+
-
+
{/* eslint-disable max-len */}
{/* eslint-disable max-len */}
-
+
-
+
-
+
-
-
+
-
+
@@ -1306,7 +1320,7 @@ class AnnualReport extends React.Component {
{/* eslint-disable max-len */}
{/* eslint-disable max-len */}
{/* eslint-disable max-len */}
-
+
-
-
+
+
@@ -1698,22 +1717,22 @@ class AnnualReport extends React.Component {
-
+
+
-
-
+
-
+
-
+
@@ -1729,7 +1748,7 @@ class AnnualReport extends React.Component {
-
+
@@ -1745,6 +1764,7 @@ class AnnualReport extends React.Component {
buttonMessage={
this.props.intl.formatMessage({id: 'annualReport.2021.watchVideo'})
}
+ spinnerColor="transparent-gray"
thumbnail="/images/annual-report/2021/3_Community Section/Scratch Lab video.png"
videoId="go1wqxifjk"
thumbnailWidth="580"
@@ -1765,6 +1785,7 @@ class AnnualReport extends React.Component {
buttonMessage={
this.props.intl.formatMessage({id: 'annualReport.2021.watchVideo'})
}
+ spinnerColor="transparent-gray"
thumbnail="/images/annual-report/2021/3_Community Section/Scratch Lab video.png"
videoId="go1wqxifjk"
thumbnailWidth="400"
@@ -1782,6 +1803,7 @@ class AnnualReport extends React.Component {
buttonMessage={
this.props.intl.formatMessage({id: 'annualReport.2021.watchVideo'})
}
+ spinnerColor="transparent-gray"
thumbnail="/images/annual-report/2021/3_Community Section/Scratch Lab video.png"
videoId="go1wqxifjk"
thumbnailWidth="300"
@@ -1798,7 +1820,7 @@ class AnnualReport extends React.Component {
-
+
@@ -1828,15 +1850,15 @@ class AnnualReport extends React.Component {
-
+
-
+
-
+
{/* eslint-disable max-len */}
{/* eslint-enable max-len */}
@@ -1876,7 +1898,7 @@ class AnnualReport extends React.Component {
maxWidth={frameless.tabletPortrait - 1}
>
-
+
{/* eslint-disable max-len */}
{/* eslint-enable max-len */}
@@ -1942,7 +1964,7 @@ class AnnualReport extends React.Component {
{/* eslint-enable max-len */}
-
+
@@ -2052,22 +2074,22 @@ class AnnualReport extends React.Component {
-
-
+
+
-
+
-
+
-
+
diff --git a/src/views/annual-report/2021/annual-report.scss b/src/views/annual-report/2021/annual-report.scss
index 33d2f5f8e..67e5fd730 100644
--- a/src/views/annual-report/2021/annual-report.scss
+++ b/src/views/annual-report/2021/annual-report.scss
@@ -5,8 +5,6 @@ $base-bg: $ui-white;
$annual-report-aqua: #088763;
$annual-report-green: #2B732B;
$annual-report-teal: #297EA4;
-$masthead-breakpoint: "only screen and (max-width : 960px)";
-$masthead-breakpoint-wave: "only screen and (max-width : 1060px)";
$timeline-breakpoint: "only screen and (max-width : 1030px)";
$ui-purple-dark: hsla(260, 55%, 55%, 1);
@@ -35,18 +33,13 @@ h1 {
}
h2 {
- font-size: 2.9rem;
+ font-size: 2.5rem;
line-height: 3.2rem;
}
h3 {
font-size: 2rem;
line-height: 2.5rem;
-}
-
-h4 {
- font-size: 1.5rem;
- line-height: 2rem;
&.special{
margin: 50px auto -50px;
@media #{$intermediate-and-smaller}{
@@ -55,6 +48,11 @@ h4 {
}
}
+h4 {
+ font-size: 1.5rem;
+ line-height: 2rem;
+}
+
h5 {
text-transform: none;
font-size: 1rem;
@@ -67,6 +65,10 @@ p {
line-height: 2rem;
}
+.p-big {
+ font-size: 1.125rem;
+}
+
p a {
white-space: break-spaces;
}
@@ -113,7 +115,7 @@ a, a:link, a:visited, a:active{
color: $ui-white;
}
- @media #{$masthead-breakpoint} {
+ @media #{$intermediate-and-smaller} {
.inner {
width: 100%;
}
@@ -145,7 +147,7 @@ a, a:link, a:visited, a:active{
}
}
- @media #{$masthead-breakpoint} {
+ @media #{$intermediate-and-smaller} {
flex-direction: column;
align-items: center;
@@ -191,6 +193,13 @@ a, a:link, a:visited, a:active{
@media #{$big} {
h2 {
max-width: 300px;
+ overflow-wrap: break-word;
+ }
+
+ p {
+ &:first-of-type{
+ margin-top: 0;
+ }
}
}
@@ -286,6 +295,7 @@ a, a:link, a:visited, a:active{
line-height: 2rem;
text-align: left;
margin-bottom: 40px;
+ font-weight: bold;
@media #{$small}{
font-size: 24px;
}
@@ -333,12 +343,12 @@ a, a:link, a:visited, a:active{
width: 100%;
// max-width: 760px;
margin: auto;
- h4{
+ h3{
text-align: left;
&.center{
text-align: center;
width: 100%;
- max-width: 500px;
+ max-width: 640px;
margin: auto;
}
}
@@ -492,6 +502,7 @@ a, a:link, a:visited, a:active{
height: 134px;
line-height: 1.5;
text-align: center;
+ overflow-wrap: break-word;
}
p {
@@ -625,7 +636,8 @@ a, a:link, a:visited, a:active{
}
h2{
- font-size: 24px;
+ font-size: 2rem;
+ line-height: 1rem;
}
.reach-intro {
@@ -633,8 +645,12 @@ a, a:link, a:visited, a:active{
text-align: center;
width: 100%;
.hed{
- max-width: 630px;
+ max-width: 620px;
margin: auto;
+
+ @media #{$small} {
+ margin: auto 8px;
+ }
}
.reach-numbers {
@@ -817,6 +833,7 @@ a, a:link, a:visited, a:active{
flex-direction: row;
justify-content: space-around;
align-items: center;
+
img, p {
margin: 0 40px;
}
@@ -829,13 +846,14 @@ a, a:link, a:visited, a:active{
width: 300px;
}
@media #{$big} {
- img, p, h4{
+ img, p, h3, h4{
margin: 0 80px;
}
}
}
.datapoint.world{
+ margin-top: 68px;
@media #{$medium}{
img, p {
margin: 0 0;
@@ -851,6 +869,7 @@ a, a:link, a:visited, a:active{
}
.datapoint.saudi-arabia{
+ margin-top: 112px;
h4{
text-align: left;
margin-left: 40px;
@@ -998,6 +1017,7 @@ img.comment-viz{
justify-content: center;
align-items: center;
text-align: center;
+ margin-left: 4px;
}
.three-pillars {
@@ -1014,7 +1034,7 @@ img.comment-viz{
@media #{$big} {
.three-pillars {
.pillar-splash {
- width: 244px;
+ width: 228px;
height: 160px;
}
}
@@ -1033,7 +1053,7 @@ img.comment-viz{
.three-pillars {
.pillar-splash {
- width: 198px;
+ width: 188px;
height: 128px;
}
}
@@ -1055,13 +1075,13 @@ img.comment-viz{
h4 {
- font-size: 1.1rem;
+ font-size: 1rem;
line-height: 1.3;
}
.three-pillars {
.pillar-splash {
- width: 151px;
+ width: 142px;
height: 89px;
&.community {
@@ -1083,9 +1103,10 @@ img.comment-viz{
.three-pillars {
.pillar-splash {
- width: 95px;
+ width: 92px;
height: 64px;
margin-bottom: 0px;
+ margin-left: 2px;
&.community {
width: 108px;
@@ -1208,6 +1229,7 @@ img.comment-viz{
.larger{
font-size: 1.25rem;
line-height: 2.5rem;
+ margin-top: 8px;
}
@media #{$intermediate} {
@@ -1320,7 +1342,6 @@ img.comment-viz{
&.spotlight{
// margin-left: 50px;
@media #{$medium-and-smaller}{
- margin: auto;
+ h4{
text-align: center;
margin-top: 15px;
@@ -1422,7 +1443,7 @@ img.comment-viz{
}
@media #{$medium-and-intermediate} {
- padding-top: 72px;
+ padding: 72px 0;
}
@media #{$intermediate} {
@@ -1437,11 +1458,23 @@ img.comment-viz{
max-width: calc(100% - 50px);
margin: auto;
padding-top: 32px;
+ padding-bottom: 72px;
}
.two-wide{
margin: 50px auto 0px;
max-width: 840px;
+
+ &.scratch-lab-intro {
+ margin: 24px auto 16px;
+
+ @media #{$big}{
+ .text {
+ max-width: 380px;
+ }
+ }
+ }
+
.bubble{
margin: -25px 0 40px;
}
@@ -1541,10 +1574,18 @@ img.comment-viz{
flex-direction: column;
align-items: center;
justify-content: center;
+
&.aaron{
text-align: center;
flex-direction: column-reverse;
}
+
+ h3 {
+ text-align: center;
+ }
+ .larger {
+ text-align: center;
+ }
}
&.split{
&.content{
@@ -1577,7 +1618,7 @@ img.comment-viz{
@media #{$intermediate} {
.text{
- max-width: 380px;
+ max-width: 360px;
}
}
}
@@ -1635,6 +1676,10 @@ img.comment-viz{
}
}
+ .new-languages {
+ margin-top: 24px;
+ }
+
.year-in-review{
position: relative;
padding: 330px 0 180px 0;
@@ -1682,17 +1727,17 @@ img.comment-viz{
@media #{$timeline-breakpoint} {
display: none;
}
- .may{
- display: block;
- position: absolute;
- left: 121px;
- top: 1300px;
- }
.june{
+ display: block;
+ position: absolute;
+ left: 121px;
+ top: 1400px;
+ }
+ .august{
display: block;
position: absolute;
right: 58px;
- top: 2127px;
+ top: 2427px;
}
img{
display: block;
@@ -1701,13 +1746,13 @@ img.comment-viz{
position: absolute;
right: 0px;
}
- &.may{
- left: 0px;
- top: 900px;
- }
&.june{
+ left: 0px;
+ top: 1000px;
+ }
+ &.august{
right: -50px;
- top: 1570px;
+ top: 1870px;
}
}
}
@@ -1753,7 +1798,7 @@ img.comment-viz{
padding: 0 15px;
}
p.subhed{
- font-size: 1.1rem;
+ font-size: 1.125rem;
max-width: 500px;
margin: 15px auto;
}
@@ -1851,9 +1896,10 @@ img.comment-viz{
font-size: 1.3rem;
}
}
- &.first{
+ &.medium-title{
h4{
- font-size: 1.5rem;
+ font-size: 2rem;
+ line-height: 2.5rem;
}
}
@media #{$intermediate-and-smaller} {
@@ -2209,6 +2255,41 @@ img.comment-viz{
}
}
+.framework-list {
+ display: flex;
+ justify-content: space-between;
+ flex-wrap: wrap;
+ margin: 16px;
+
+ .framework-tile {
+ width: 200px;
+ text-align: left;
+ font-weight: bold;
+
+ img {
+ width: 100%;
+ }
+
+ p {
+ font-size: 1rem;
+ line-height: 1.25rem;
+ }
+ }
+
+ @media #{$intermediate-and-smaller}{
+ justify-content: center;
+ margin: 0px;
+
+ .framework-tile {
+ margin: 24px;
+
+ @media #{$medium-and-smaller} {
+ margin: 12px;
+ }
+ }
+ }
+}
+
.founders-message {
.inner {
max-width: 900px;
@@ -2228,7 +2309,7 @@ img.comment-viz{
width: 100%;
color: $ui-white;
- h2, p {
+ h2, h4, p {
color: $ui-white;
}
@@ -2246,14 +2327,14 @@ img.comment-viz{
}
}
.text{
- width: 60%;
+ width: 620px;
}
@media #{$intermediate-and-smaller}{
flex-direction: column;
.header, .text{
width: 100%;
}
- p{
+ p, h2, h4 {
text-align: left;
}
}
@@ -2364,6 +2445,11 @@ p.contain-p{
background-size: contain;
background-repeat: no-repeat;
background-position: center;
+
+ .button {
+ background-color: $ui-purple-dark;
+ }
+
@media #{$intermediate-and-smaller} {
background-image: none;
}
@@ -2572,7 +2658,7 @@ p.contain-p{
.in-kind{
display: inline-block;
- margin: 0 0 0 5px;
+ margin: 0 0 1px 5px;
width: 8px;
height: 8px;
border-radius: 8px;
diff --git a/src/views/annual-report/2021/l10n.json b/src/views/annual-report/2021/l10n.json
index c2f0fac65..e868eda05 100644
--- a/src/views/annual-report/2021/l10n.json
+++ b/src/views/annual-report/2021/l10n.json
@@ -82,10 +82,10 @@
"annualReport.2021.spotlightStory": "Spotlight Story",
- "annualReport.2021.SECSpotlightTitle": "Bridges to Science Spotlight",
+ "annualReport.2021.SECSpotlightTitle": "Bridges to Science",
"annualReport.2021.SECSpotlightLocation": "Fulshear, Texas",
"annualReport.2021.SECSpotlightText1": "Bridges to Science; a Texas-based nonprofit providing math, coding, and robotics programs for underserved youth; was one of 41 exceptional organizations to join the Scratch Education Collaborative's first cohort.",
- "annualReport.2021.SECSpotlightText2": "In 2021, we supported Bridges to Science in facilitating their first “Hour of Code” workshop with Code.org.",
+ "annualReport.2021.SECSpotlightText2": "In 2021, we supported Bridges to Science in facilitating their first “Hour of Code” workshop with Code.org. The event “Fiestas y Piñatas” attracted over 22,000 teachers and students from Latin America. We also collaborated with Bridges to Science to develop a toolkit of unique resources to meet their community’s needs.",
"annualReport.2021.SECPullQuote": "One of the greatest joys that we have in teaching our students is that each one of them, no matter how quiet they are, all find a voice in computer science through Scratch.",
"annualReport.2021.SECPullQuoteAttr": "- Rosa Aristy, Bridges to Science Founder ",
@@ -157,7 +157,7 @@
"annualReport.2021.yearInReviewCard4Date": "May",
"annualReport.2021.yearInReviewCard4Title": "Scratch Week",
- "annualReport.2021.yearInReviewCard4Text": "Scratchers around the world shared more than 3,500 projects responding to themed prompts like “Cooking From Scratch” and “Ridiculous Inventions” to celebrate Scratch's birthday.",
+ "annualReport.2021.yearInReviewCard4Text": "Scratchers around the world shared more than 3,500 projects responding to themed prompts like “Cooking With Scratch” and “Ridiculous Inventions” to celebrate Scratch's birthday.",
"annualReport.2021.yearInReviewCard5Date": "June",
"annualReport.2021.yearInReviewCard5Title": "Pride Month",
@@ -310,8 +310,8 @@
"annualReport.2021.altConnectingLine": "A dotted line connecting timeline elements.",
"annualReport.2021.altApril": "A pen and Scratch components placed on top of a purple background.",
- "annualReport.2021.altMay": "A birthday cake in front of a banner of flags displaying various types of LGBTQ+ pride.",
- "annualReport.2021.altJune": "A potato, birthday had, and sunglasses on top of a purple background.",
+ "annualReport.2021.altJune": "A birthday cake in front of a banner of flags displaying various types of LGBTQ+ pride.",
+ "annualReport.2021.altAugust": "A potato, birthday had, and sunglasses on top of a purple background.",
"annualReport.2021.altCard1": "A colorful blob floats in front of a black and gray background next to the words 'A dream In a world of nightmares.'",
"annualReport.2021.altCard2": "A black woman is wearing a yellow headband and gold hoop earrings.",
"annualReport.2021.altCard3": "The scratch cat mascot swings in front of buildings accompanied by text reading 'I think Scratch Cat is a superhero.'",
diff --git a/src/views/annual-report/2021/people.json b/src/views/annual-report/2021/people.json
index 2710a8aba..742cdbdd1 100644
--- a/src/views/annual-report/2021/people.json
+++ b/src/views/annual-report/2021/people.json
@@ -130,7 +130,7 @@
"name": "Deborah"
},
{
- "userName": "epa85",
+ "userName": "NoodleKen11",
"userId": 83956975,
"name": "Elaine"
},
diff --git a/src/views/credits/people.json b/src/views/credits/people.json
index 828233893..629f32b90 100644
--- a/src/views/credits/people.json
+++ b/src/views/credits/people.json
@@ -120,7 +120,7 @@
"name": "Deep"
},
{
- "userName": "epa85",
+ "userName": "NoodleKen11",
"userId": 83956975,
"name": "Elaine"
},
diff --git a/static/images/annual-report/2021/2_Access Section/Access Spotlight Story Illustration.svg b/static/images/annual-report/2021/2_Access Section/Access Spotlight Story Illustration.svg
index 1431628bc..c3fa3b66f 100644
--- a/static/images/annual-report/2021/2_Access Section/Access Spotlight Story Illustration.svg
+++ b/static/images/annual-report/2021/2_Access Section/Access Spotlight Story Illustration.svg
@@ -18,12 +18,12 @@
-
+
-
+
diff --git a/static/images/annual-report/2021/2_Access Section/Equity x Design Committee Illustration.svg b/static/images/annual-report/2021/2_Access Section/Equity x Design Committee Illustration.svg
index 12abbefac..f0c75f52a 100644
--- a/static/images/annual-report/2021/2_Access Section/Equity x Design Committee Illustration.svg
+++ b/static/images/annual-report/2021/2_Access Section/Equity x Design Committee Illustration.svg
@@ -6,7 +6,7 @@
-
+
@@ -27,7 +27,7 @@
-
+
diff --git a/static/images/annual-report/2021/2_Access Section/G-JEDI Committee Illustration.svg b/static/images/annual-report/2021/2_Access Section/G-JEDI Committee Illustration.svg
index 27beffab4..310e87a1b 100644
--- a/static/images/annual-report/2021/2_Access Section/G-JEDI Committee Illustration.svg
+++ b/static/images/annual-report/2021/2_Access Section/G-JEDI Committee Illustration.svg
@@ -4,6 +4,9 @@
+
+
+
@@ -11,19 +14,24 @@
-
-
-
-
-
-
-
+
+
+
+
+
+
+
+
+
+
+
+
-
+
-
+
- 
- 
