Merge remote-tracking branch 'origin/develop' into release/2022-04-27

.travis.yml

@@ -52,8 +52,8 @@ env:
   - TEST_PROJECT_ID_VAR=TEST_PROJECT_ID_$TRAVIS_BRANCH
   - TEST_PROJECT_ID=${!TEST_PROJECT_ID_VAR}
   - TEST_PROJECT_ID=${TEST_PROJECT_ID:-$TEST_PROJECT_ID_STAGING}
-  - STATIC_HOST_master=https://cdn2.scratch.mit.edu
+  - STATIC_HOST_master=https://uploads.scratch.mit.edu
-  - STATIC_HOST_STAGING=https://cdn.scratch.ly
+  - STATIC_HOST_STAGING=https://uploads.scratch.ly
   - STATIC_HOST_VAR=STATIC_HOST_$TRAVIS_BRANCH
   - STATIC_HOST=${!STATIC_HOST_VAR}
   - STATIC_HOST=${STATIC_HOST:-$STATIC_HOST_STAGING}

package.json

@@ -66,15 +66,15 @@
     "async": "3.1.0",
     "autoprefixer": "10.4.2",
     "babel-cli": "6.26.0",
-    "babel-core": "6.23.1",
+    "babel-core": "6.26.3",
-    "babel-eslint": "10.0.3",
+    "babel-eslint": "10.1.0",
-    "babel-loader": "7.1.0",
+    "babel-loader": "7.1.5",
     "babel-plugin-syntax-dynamic-import": "^6.18.0",
     "babel-plugin-transform-async-to-generator": "6.24.1",
     "babel-plugin-transform-object-rest-spread": "6.26.0",
     "babel-plugin-transform-require-context": "0.1.1",
-    "babel-preset-es2015": "6.22.0",
+    "babel-preset-es2015": "6.24.1",
-    "babel-preset-react": "6.22.0",
+    "babel-preset-react": "6.24.1",
     "bowser": "1.9.4",
     "canvas": "2.9.0",
     "chromedriver": "96.0.0",
@@ -134,8 +134,8 @@
     "regenerator-runtime": "0.13.9",
     "sass": "1.49.7",
     "sass-loader": "10.2.1",
-    "scratch-gui": "0.1.0-prerelease.20220412150200",
+    "scratch-gui": "0.1.0-prerelease.20220426200048",
-    "scratch-l10n": "3.14.20220412031641",
+    "scratch-l10n": "3.14.20220427031558",
     "selenium-webdriver": "4.1.0",
     "slick-carousel": "1.6.0",
     "style-loader": "0.12.3",

src/components/avatar/avatar.jsx

@@ -16,7 +16,7 @@ Avatar.propTypes = {
 };
 
 Avatar.defaultProps = {
-    src: '//cdn2.scratch.mit.edu/get_image/user/2584924_24x24.png?v=1438702210.96'
+    src: '//uploads.scratch.mit.edu/get_image/user/2584924_24x24.png?v=1438702210.96'
 };
 
 module.exports = Avatar;

src/components/people-grid/people-grid.jsx

@@ -20,14 +20,14 @@ const PeopleGrid = props => (
                         >
                             <Avatar
                                 alt=""
-                                src={`https://cdn.scratch.mit.edu/get_image/user/${person.userId || 'default'}_80x80.png`}
+                                src={`https://uploads.scratch.mit.edu/get_image/user/${person.userId || 'default'}_80x80.png`}
                             />
                         </a>
                     ) : (
                         /* if userName is not given, there's no chance userId is given */
                         <Avatar
                             alt=""
-                            src={`https://cdn.scratch.mit.edu/get_image/user/default_80x80.png`}
+                            src={`https://uploads.scratch.mit.edu/get_image/user/default_80x80.png`}
                         />
                     )}
                 </div>

src/views/annual-report/2019/blm-projects.json

@@ -5,7 +5,7 @@
             "id": 61730637,
             "username": "-pug_arts-"
         },
-        "image": "https://cdn2.scratch.mit.edu/get_image/project/423104626_144x108.png",
+        "image": "https://uploads.scratch.mit.edu/get_image/project/423104626_144x108.png",
         "title": "♡ BLM ART! ♡",
         "stats": {}
     },
@@ -15,7 +15,7 @@
             "id": 60051701,
             "username": "-MayThe4thBeWithYou-"
         },
-        "image": "https://cdn2.scratch.mit.edu/get_image/project/404637877_144x108.png",
+        "image": "https://uploads.scratch.mit.edu/get_image/project/404637877_144x108.png",
         "title": "Can't Breathe",
         "stats": {}
     },
@@ -25,7 +25,7 @@
             "id": 28599090,
             "username": "BubbleMint-"
         },
-        "image": "https://cdn2.scratch.mit.edu/get_image/project/404286089_144x108.png",
+        "image": "https://uploads.scratch.mit.edu/get_image/project/404286089_144x108.png",
         "title": "In Memory of George Floyd || ♡",
         "stats": {}
     },
@@ -35,7 +35,7 @@
             "id": 58796616,
             "username": "-bIueberryonthemoon-"
         },
-        "image": "https://cdn2.scratch.mit.edu/get_image/project/408116876_144x108.png",
+        "image": "https://uploads.scratch.mit.edu/get_image/project/408116876_144x108.png",
         "title": "Justice for Breonna Taylor ❤️",
         "stats": {}
     }

src/views/annual-report/2020/annual-report.jsx

@@ -1789,7 +1789,7 @@ class AnnualReport extends React.Component {
                                                 alt={this.props.intl.formatMessage(
                                                     {id: 'annualReport.2020.altAvatar'}
                                                 )}
-                                                src="https://cdn2.scratch.mit.edu/get_image/user/36591_60x60.png"
+                                                src="https://uploads.scratch.mit.edu/get_image/user/36591_60x60.png"
                                             />
                                             <div>
                                                 <h5>
@@ -1810,7 +1810,7 @@ class AnnualReport extends React.Component {
                                                 alt={this.props.intl.formatMessage(
                                                     {id: 'annualReport.2020.altAvatar'}
                                                 )}
-                                                src="https://cdn2.scratch.mit.edu/get_image/user/61442584_60x60.png"
+                                                src="https://uploads.scratch.mit.edu/get_image/user/61442584_60x60.png"
                                             />
                                             <div>
                                                 <h5>
@@ -1852,7 +1852,7 @@ class AnnualReport extends React.Component {
                                                 alt={this.props.intl.formatMessage(
                                                     {id: 'annualReport.2020.altAvatar'}
                                                 )}
-                                                src="https://cdn2.scratch.mit.edu/get_image/user/176301_60x60.png"
+                                                src="https://uploads.scratch.mit.edu/get_image/user/176301_60x60.png"
                                             />
                                             <div>
                                                 <h5>

src/views/annual-report/2021/annual-report.jsx

@@ -416,9 +416,6 @@ class AnnualReport extends React.Component {
                                     <p>
                                         <FormattedMessage id="annualReport.2021.directorsMessageP5" />
                                     </p>
-                                    <p>
-                                        <FormattedMessage id="annualReport.2021.directorsMessageP6" />
-                                    </p>
                                     <div className="directors-signature">
                                         <img
                                             className="shawna-photo"
@@ -466,25 +463,25 @@ class AnnualReport extends React.Component {
                                         <FormattedMessage id="annualReport.2021.creativeExpressionTitle" />
                                     </h3>
                                 </div>
-                                <p><FormattedMessage id="annualReport.2021.creativeExpressionDescription" /></p>
+                                <p className="inner"><FormattedMessage id="annualReport.2021.creativeExpressionDescription" /></p>
                             </div>
                             <div className="one-p equitable-opportunities">
                                 <div className="four-up-title equitable-opportunities">
                                     <h3><FormattedMessage id="annualReport.2021.EquitableOpportunitiesTitle" /></h3>
                                 </div>
-                                <p><FormattedMessage id="annualReport.2021.EquitableOpportunitiesDescription" /></p>
+                                <p className="inner"><FormattedMessage id="annualReport.2021.EquitableOpportunitiesDescription" /></p>
                             </div>
                             <div className="one-p progressive-improvement">
                                 <div className="four-up-title progressive-improvement">
                                     <h3><FormattedMessage id="annualReport.2021.progressiveImprovementTitle" /></h3>
                                 </div>
-                                <p><FormattedMessage id="annualReport.2021.progressiveImprovementDescription" /></p>
+                                <p className="inner"><FormattedMessage id="annualReport.2021.progressiveImprovementDescription" /></p>
                             </div>
                             <div className="one-p playful-engagement">
                                 <div className="four-up-title playful-engagement">
                                     <h3><FormattedMessage id="annualReport.2021.playfulEngagementTitle" /></h3>
                                 </div>
-                                <p><FormattedMessage id="annualReport.2021.playfulEngagementDescription" /></p>
+                                <p className="inner"><FormattedMessage id="annualReport.2021.playfulEngagementDescription" /></p>
                             </div>
                         </div>
                     </div>
@@ -563,7 +560,8 @@ class AnnualReport extends React.Component {
                                             <FormattedMessage id="annualReport.2021.reachNewUsersIncrease" />
                                         </div>
                                     </div>
-
+                                </div>
+                                <div className="reach-numbers">
                                     <div className="datapoint world">
                                         <img
                                             className="world"
@@ -575,6 +573,13 @@ class AnnualReport extends React.Component {
                                         <p>
                                             <FormattedMessage
                                                 id="annualReport.2021.reachScratchAroundTheWorld"
+                                                values={{
+                                                    numberOfCountries: (
+                                                        <b>
+                                                            <FormattedMessage id="annualReport.2021.reachScratchAroundTheWorldBold" />
+                                                        </b>
+                                                    )
+                                                }}
                                             />
                                         </p>
                                     </div>
@@ -821,12 +826,16 @@ class AnnualReport extends React.Component {
                                         </div>
                                     </div>
                                 </div>
+                                {/* 4/25 */}
+                                
+                                
                                 <div className="inner">
+                                    <MediaQuery minWidth={frameless.tabletPortrait}>
+                                        <div className="content flex-content">
+                                            <div className="text">
                                                 <div className="spotlight bubble SEC">
                                                     <FormattedMessage id="annualReport.2021.spotlightStory" />
                                                 </div>
-                                    <div className="content flex-content">
-                                        <div className="text">
                                                 <h4>
                                                     <FormattedMessage id="annualReport.2021.SECSpotlightTitle" />
                                                 </h4>
@@ -849,6 +858,42 @@ class AnnualReport extends React.Component {
                                                 />
                                             </div>
                                         </div>
+                                    </MediaQuery>
+                                    <MediaQuery
+                                        maxWidth={frameless.tabletPortrait - 1}
+                                        // minWidth={frameless.mobile}
+                                    >
+                                        <div className="content flex-content">
+                                            <div className="text">
+                                                <div className="spotlight bubble SEC">
+                                                    <FormattedMessage id="annualReport.2021.spotlightStory" />
+                                                </div>
+                                                <h4>
+                                                    <FormattedMessage id="annualReport.2021.SECSpotlightTitle" />
+                                                </h4>
+                                                <p className="larger">
+                                                    <FormattedMessage id="annualReport.2021.SECSpotlightLocation" />
+                                                </p>
+                                            </div>
+                                            <div className="images">
+                                                <img
+                                                    src="/images/annual-report/2021/1_SEC Section/Bridges to Science.svg"
+                                                    alt={this.props.intl.formatMessage(
+                                                        {id: 'annualReport.2021.altSECSpotlightImage'}
+                                                    )}
+                                                />
+                                            </div>
+                                            <div className="text">
+                                                <p>
+                                                    <FormattedMessage id="annualReport.2021.SECSpotlightText1" />
+                                                </p>
+                                                <p>
+                                                    <FormattedMessage id="annualReport.2021.SECSpotlightText2" />
+                                                </p>
+                                            </div>
+                                            
+                                        </div>
+                                    </MediaQuery>
                                     <div className="content">
                                         <p className="pull-quote blue">
                                             <FormattedMessage id="annualReport.2021.SECPullQuote" />
@@ -858,7 +903,7 @@ class AnnualReport extends React.Component {
                                         </p>
                                     </div>
                                 </div>
-                                <div className="inner">
+                                <div className="inner stacked">
                                     <div className="workshop">
                                         <h4>
                                             <FormattedMessage id="annualReport.2021.SECWorkshops" />
@@ -893,7 +938,7 @@ class AnnualReport extends React.Component {
                                 <h4>
                                     <FormattedMessage id="annualReport.2021.accessASL" />
                                 </h4>
-                                <p>
+                                <p class="subhed">
                                     <FormattedMessage
                                         id="annualReport.2021.accessASLText"
                                     />
@@ -985,10 +1030,10 @@ class AnnualReport extends React.Component {
                             {/* DEI Committees */}
                             <div className="inner">
                                 <div className="flex-content">
-                                    <MediaQuery minWidth={frameless.desktop}>
+                                    <MediaQuery minWidth={frameless.tabletPortrait}>
                                         {/* eslint-disable max-len */}
                                         <TextAndMediaSnippet
-                                            className="regular"
+                                            className="regular first"
                                             title={this.props.intl.formatMessage(
                                                 {id: 'annualReport.2021.accessDEICommittee'}
                                             )}
@@ -1003,13 +1048,15 @@ class AnnualReport extends React.Component {
                                             />
                                         </TextAndMediaSnippet>
                                     </MediaQuery>
-                                    <MediaQuery maxWidth={frameless.desktop - 1}>
+                                    <MediaQuery maxWidth={frameless.tabletPortrait - 1}>
                                         {/* eslint-disable max-len */}
+                                        <h4>
+                                            <FormattedMessage
+                                                id="annualReport.2021.accessDEICommittee"
+                                            />
+                                        </h4>
                                         <TextAndMediaSnippet
                                             className="regular"
-                                            title={this.props.intl.formatMessage(
-                                                {id: 'annualReport.2021.accessDEICommittee'}
-                                            )}
                                             alt={this.props.intl.formatMessage(
                                                 {id: 'annualReport.2021.altaccessDEICommittee'}
                                             )}
@@ -1027,7 +1074,7 @@ class AnnualReport extends React.Component {
                             <div className="green">
                                 <div className="inner">
                                     <div className="flex-content">
-                                        <MediaQuery minWidth={frameless.desktop}>
+                                        <MediaQuery minWidth={frameless.tabletPortrait}>
                                             {/* eslint-disable max-len */}
                                             <TextAndMediaSnippet
                                                 className="reverse"
@@ -1048,7 +1095,7 @@ class AnnualReport extends React.Component {
                                                 />
                                             </TextAndMediaSnippet>
                                         </MediaQuery>
-                                        <MediaQuery maxWidth={frameless.desktop - 1}>
+                                        <MediaQuery maxWidth={frameless.tabletPortrait - 1}>
                                             {/* eslint-disable max-len */}
                                             <TextAndMediaSnippet
                                                 className="regular"
@@ -1075,7 +1122,7 @@ class AnnualReport extends React.Component {
                             {/* G-JEDI */}
                             <div className="inner">
                                 <div className="flex-content">
-                                    <MediaQuery minWidth={frameless.desktop}>
+                                    <MediaQuery minWidth={frameless.tabletPortrait}>
                                         {/* eslint-disable max-len */}
                                         <TextAndMediaSnippet
                                             className="regular"
@@ -1096,7 +1143,7 @@ class AnnualReport extends React.Component {
                                             />
                                         </TextAndMediaSnippet>
                                     </MediaQuery>
-                                    <MediaQuery maxWidth={frameless.desktop - 1}>
+                                    <MediaQuery maxWidth={frameless.tabletPortrait - 1}>
                                         {/* eslint-disable max-len */}
                                         <TextAndMediaSnippet
                                             className="regular"
@@ -1124,7 +1171,7 @@ class AnnualReport extends React.Component {
                             <div className="green">
                                 <div className="inner">
                                     <div className="flex-content">
-                                        <MediaQuery minWidth={frameless.desktop}>
+                                        <MediaQuery minWidth={frameless.tabletPortrait}>
                                             {/* eslint-disable max-len */}
                                             <TextAndMediaSnippet
                                                 className="reverse"
@@ -1145,7 +1192,7 @@ class AnnualReport extends React.Component {
                                                 />
                                             </TextAndMediaSnippet>
                                         </MediaQuery>
-                                        <MediaQuery maxWidth={frameless.desktop - 1}>
+                                        <MediaQuery maxWidth={frameless.tabletPortrait - 1}>
                                             {/* eslint-disable max-len */}
                                             <TextAndMediaSnippet
                                                 className="regular"
@@ -1172,12 +1219,13 @@ class AnnualReport extends React.Component {
                             {/* 10 new languages */}
                             {/* eslint-disable max-len */}
                             <div className="inner">
+                                <div className="snapshot bubble access left-align languages">
+                                    <FormattedMessage id="annualReport.2021.accessSnapshot" />
+                                </div>
                                 <div className="flex-content">
                                     <div className="text-and-media-snippet regular">
                                         <div className="half">
-                                            <div className="snapshot bubble access left-align">
+                                            
-                                                <FormattedMessage id="annualReport.2021.accessSnapshot" />
-                                            </div>
                                             <h4>
                                                 <FormattedMessage id="annualReport.2021.access10NewLanguages" />
                                             </h4>
@@ -1199,21 +1247,7 @@ class AnnualReport extends React.Component {
                                                     allowFullScreen
                                                 />
                                             </MediaQuery>
-                                            <MediaQuery
+                                            <MediaQuery maxWidth={frameless.desktop - 1}>
-                                                maxWidth={frameless.desktop - 1}
-                                                minWidth={frameless.mobile}
-                                            >
-                                                <iframe
-                                                    src="https://scratch.mit.edu/projects/430997530/embed"
-                                                    allowTransparency="true"
-                                                    width="430"
-                                                    height={((430 * .76) + 45)}
-                                                    frameBorder="0"
-                                                    scrolling="no"
-                                                    allowFullScreen
-                                                />
-                                            </MediaQuery>
-                                            <MediaQuery maxWidth={frameless.mobile - 1}>
                                                 <iframe
                                                     src="https://scratch.mit.edu/projects/430997530/embed"
                                                     allowTransparency="true"
@@ -1230,7 +1264,7 @@ class AnnualReport extends React.Component {
                                 {/* South Africa */}
                                 <div className="inner">
                                     <div className="flex-content">
-                                        <MediaQuery minWidth={frameless.desktop}>
+                                        <MediaQuery minWidth={frameless.tabletPortrait}>
                                             {/* eslint-disable max-len */}
                                             <TextAndMediaSnippet
                                                 className="reverse"
@@ -1248,7 +1282,7 @@ class AnnualReport extends React.Component {
                                                 />
                                             </TextAndMediaSnippet>
                                         </MediaQuery>
-                                        <MediaQuery maxWidth={frameless.desktop - 1}>
+                                        <MediaQuery maxWidth={frameless.tabletPortrait - 1}>
                                             {/* eslint-disable max-len */}
                                             <TextAndMediaSnippet
                                                 className="regular"
@@ -1290,7 +1324,15 @@ class AnnualReport extends React.Component {
                                         <FormattedMessage id="annualReport.2021.communityScratchConference" />
                                     </h4>
                                     <p>
-                                        <FormattedMessage id="annualReport.2021.communityScratchConferenceText1" />
+                                        <FormattedMessage id="annualReport.2021.communityScratchConferenceText1"
+                                            values={{
+                                                more_bold: (
+                                                    <b>
+                                                        <FormattedMessage id="annualReport.2021.communityScratchConferenceText1More" />
+                                                    </b>
+                                                )
+                                            }}
+                                         />
                                     </p>
                                 </div>
                                 <div className="tweet-container">
@@ -1307,13 +1349,18 @@ class AnnualReport extends React.Component {
                             {/* volunteer translators */}
                             <div className="inner">
                                 <div className="flex-content">
+                                    <h4 className="special">
+                                        <FormattedMessage
+                                            id="annualReport.2021.communityVolunteerTranslators"
+                                        />
+                                    </h4>
                                     <MediaQuery minWidth={frameless.desktop}>
                                         {/* eslint-disable max-len */}
                                         <TextAndMediaSnippet
                                             className="regular"
-                                            title={this.props.intl.formatMessage(
+                                            // title={this.props.intl.formatMessage(
-                                                {id: 'annualReport.2021.communityVolunteerTranslators'}
+                                            //     {id: 'annualReport.2021.communityVolunteerTranslators'}
-                                            )}
+                                            // )}
                                             alt={this.props.intl.formatMessage(
                                                 {id: 'annualReport.2021.altcommunityVolunteerTranslators'}
                                             )}
@@ -1329,9 +1376,9 @@ class AnnualReport extends React.Component {
                                         {/* eslint-disable max-len */}
                                         <TextAndMediaSnippet
                                             className="regular"
-                                            title={this.props.intl.formatMessage(
+                                            // title={this.props.intl.formatMessage(
-                                                {id: 'annualReport.2021.communityVolunteerTranslators'}
+                                            //     {id: 'annualReport.2021.communityVolunteerTranslators'}
-                                            )}
+                                            // )}
                                             alt={this.props.intl.formatMessage(
                                                 {id: 'annualReport.2021.altcommunityVolunteerTranslators'}
                                             )}
@@ -1824,11 +1871,10 @@ class AnnualReport extends React.Component {
                         </div>
                         {/* eslint-enable max-len */}
                         
-                        
                     </div>
                     <div
                         className="founders-message"
-                        ref={this.setRef(SECTIONS.directors_message)}
+                        ref={this.setRef(SECTIONS.founders_message)}
                     >
                         <div className="inner">
                             <div className="flex-content">

src/views/annual-report/2021/annual-report.scss

@@ -3,6 +3,7 @@
 
 $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)";
@@ -12,7 +13,7 @@ $ui-purple-dark: hsla(260, 55%, 55%, 1);
 // $motion-blue-3 #3373CC
 
 .access .button{
-    background-color: $annual-report-aqua;
+    background-color: $annual-report-green;
 }
 .community .button{
     background-color: $ui-purple-dark;
@@ -30,8 +31,10 @@ h1 {
 }
 
 h2 {
-    font-size: 3.25rem;
+    // font-size: 3.25rem;
-    line-height: 3.75rem;
+    // line-height: 3.75rem;
+    font-size: 2.9rem;
+    line-height: 3.2rem;
 }
 
 h3 {
@@ -42,6 +45,12 @@ h3 {
 h4 {
     font-size: 1.5rem;
     line-height: 2rem;
+    &.special{
+        margin: 50px auto -50px;
+        @media #{$medium-and-smaller}{
+            margin: 50px auto 30px;
+        }
+    }
 }
 
 h5 {
@@ -86,9 +95,6 @@ a, a:link, a:visited, a:active{
 }
 
 @media #{$small} {
-    // .inner {
-    //     width: $cols4;
-    // }
 
     h1 {
         font-size: 3.25rem;
@@ -99,7 +105,7 @@ a, a:link, a:visited, a:active{
 }
 
 .message-section {
-    background-color: $annual-report-aqua;
+    background-color: $annual-report-green;
 
     h1, h2, p {
         color: $ui-white;
@@ -117,10 +123,12 @@ a, a:link, a:visited, a:active{
 
 .masthead {
     padding-top: 50px;
+    align-items: start;
 
     p { // Text above the title of the AR -- "2020 Annual Report"
         font-size: 1.25rem;
-        line-height: 2rem;
+        // line-height: 2rem;
+        margin-top: 0px;
         font-weight: bold;
     }
 
@@ -154,7 +162,7 @@ a, a:link, a:visited, a:active{
 
     @media #{$intermediate} {
         .masthead-content, img {
-            max-width: 620px;
+            max-width: 520px;
         }
     }
 
@@ -172,10 +180,7 @@ a, a:link, a:visited, a:active{
 }
 
 .wave-icon-desktop {
-    margin-left: -65px;
+    margin: 80px 0 0 0;
-    @media #{$masthead-breakpoint-wave} {
-        margin-left: 0px;
-    }
 }
 
 .message-content{
@@ -214,12 +219,13 @@ a, a:link, a:visited, a:active{
     .wave-icon-and-title {
         display: flex;
         justify-content: center;
+        align-items: center;
 
         img {
             margin-right: 20px;
         }
 
-        @media #{$medium-and-smaller} {
+        @media #{$small} {
             flex-direction: column;
             img {
                 max-width: 275px;
@@ -231,6 +237,10 @@ a, a:link, a:visited, a:active{
             max-width: 460px;
         }
 
+        h2{
+            text-align: left;
+        }
+
     }
 
     .message-from-team, .directors-message {
@@ -270,8 +280,10 @@ a, a:link, a:visited, a:active{
 }
 
 .pull-quote{
-    font-size: 1.5rem;
+    font-size: 1.45rem;
-    line-height: 2.5rem;
+    line-height: 2rem;
+    text-align: left;
+    margin-bottom: 10px;
     @media #{$small}{
         font-size: 24px;
     }
@@ -298,6 +310,7 @@ a, a:link, a:visited, a:active{
     &.green{
         font-weight: 500;
         text-align: left;
+        margin-left: 20px;
         &:before{
             margin-bottom: -75px;
             background-image: url("/images/annual-report/2021/2_Access Section/quote (green).svg");
@@ -307,14 +320,20 @@ a, a:link, a:visited, a:active{
 
 .workshop{
     width: 100%;
-    max-width: 760px;
+    // max-width: 760px;
     margin: auto;
     h4{
         text-align: left;
         &.center{
             text-align: center;
+            width: 100%;
+            max-width: 500px;
+            margin: auto;
         }
     }
+    p{
+        text-align: left;
+    }
 }
 
 .pull-quote-attr{
@@ -323,8 +342,10 @@ a, a:link, a:visited, a:active{
     float: right;
     text-align: right;
     width: 100%;
+    margin-top: 0px;
     &.right{
         text-align: right;
+        margin-bottom: 30px;
     }
 }
 
@@ -339,8 +360,14 @@ a, a:link, a:visited, a:active{
     }
 
     .inner {
-        padding-top: 124px;
+        padding-top: 172px;
         width: 620px;
+        @media #{$medium} {
+            padding-top: 100px;
+        }
+        @media #{$small} {
+            padding-top: 80px;
+        }
         h5{
             margin: 20px 0 0;
             font-size: 1.25rem;
@@ -394,23 +421,35 @@ a, a:link, a:visited, a:active{
             margin-top: 0px;
         }
 
-        @media #{$intermediate-and-smaller} {
+        .inner{
+            padding-top: 40px;
+            @media #{$big}{
+                width: 100%;
+            }
+            @media #{$intermediate}{
+                width: 100%;
+            }
+        }
+
+        @media #{$medium-and-smaller} {
             padding: 0;
             background-position: center;
             display: flex;
             flex-direction: column;
             align-items: center;
             justify-content: flex-start;
+            width: 100%;
+            height: initial;
 
             img {
                 width: 300px;
             }
         }
 
-        @media #{$medium-and-smaller} {
+        // @media #{$medium-and-smaller} {
-            margin-top: 62px;
+        //     margin-top: 62px;
-            // height: 398px;
+        //     // height: 398px;
-        }
+        // }
 
         @media #{$medium} {
             margin-right: 0;
@@ -541,9 +580,23 @@ a, a:link, a:visited, a:active{
     }
     &.t{
         padding-bottom: 0px;
+        .inner{
+            max-width: 660px;
+            @media #{$intermediate} {
+                .reach-translation{
+                    flex-direction: row;
+                }
+                h3, div, p{
+                    text-align: left;
+                }
+                .inline{
+                    justify-content: start;
+                }
+            }
+        }
     }
 
-    background-color: $annual-report-aqua;
+    background-color: $annual-report-green;
     color: $ui-white;
 
     h2, h3, h4, p {
@@ -597,7 +650,7 @@ a, a:link, a:visited, a:active{
 
     .reach-translation {
         display: flex;
-        justify-content: space-around;
+        justify-content: space-between;
         align-items: center;
         margin-bottom: 60px;
         width: 100%;
@@ -607,7 +660,7 @@ a, a:link, a:visited, a:active{
         }
 
         img {
-            max-width: 380px;
+            max-width: 340px;
         }
 
         .inline{
@@ -722,7 +775,14 @@ a, a:link, a:visited, a:active{
         background-color: $ui-purple-dark;
     }
     &.access{
-        background-color: $annual-report-aqua;
+        background-color: $annual-report-green;
+        &.languages{
+            margin-top: 50px;
+            margin-bottom: -10px;
+            @media #{$intermediate-and-smaller}{
+                margin: 50px auto 10px;
+            }
+        }
     }
 }
 
@@ -740,7 +800,7 @@ a, a:link, a:visited, a:active{
     width: 100%;
     max-width: 840px;
     margin: auto;
-    @media(max-width: $intermediate-and-smaller){
+    @media #{$intermediate-and-smaller}{
         width: calc(100% - 30px);
         text-align: left;
     }
@@ -817,6 +877,26 @@ a, a:link, a:visited, a:active{
         text-align: left;
         width: 300px;
     }
+    @media #{$big} {
+        img, p, h4{
+            margin: 0 80px;
+        }
+    }
+}
+
+.datapoint.world{
+    @media #{$medium}{
+        img, p {
+            margin: 0 0;
+            width: 40%;
+        }
+    }
+    @media #{$small} {
+        flex-direction: column;
+        img + p {
+            margin-top: 25px;
+        }
+    }
 }
 
 .datapoint.saudi-arabia{
@@ -824,10 +904,18 @@ a, a:link, a:visited, a:active{
         text-align: left;
         margin-left: 40px;
         margin-bottom: 10px;
+        @media #{$big} {
+            margin: 0 80px;
+        }
     }
     p{
         font-size: 16px;
     }
+    
+    @media #{$medium-and-smaller} {
+        flex-direction: column;
+        margin-top: 75px;
+    }
 }
 
 img.comment-viz{
@@ -863,7 +951,7 @@ img.comment-viz{
 }
 
 .reach-scratch-jr {
-    background-color: $annual-report-aqua;
+    background-color: $annual-report-green;
     color: $ui-white;
     padding: 100px 0;
 
@@ -922,6 +1010,7 @@ img.comment-viz{
 }
 
 .initiatives-section {
+    padding-top: 50px;
 
     .initiatives-intro {
         .inner {
@@ -946,7 +1035,7 @@ img.comment-viz{
             background-size: contain;
             background-repeat: no-repeat;
             height: 165px;
-            margin-bottom: 60px;
+            // margin-bottom: 60px;
 
             h4 {
                 color: $ui-white;
@@ -966,19 +1055,8 @@ img.comment-viz{
                 width: 100%;
                 justify-content: space-between;
             }
-
+            @media #{$small} {
-            .equity-and-global {
+                height: 66px;
-                width: 100%;
-
-                .pillar-splash {
-                    margin: 12px 0;
-                    h4{
-                        color: black;
-                    }
-                    @media #{$intermediate} {
-                        margin-top: 16px;
-                    }
-                }
             }
         }
 
@@ -1004,7 +1082,7 @@ img.comment-viz{
 
             .three-pillars {
                 .pillar-splash {
-                    width: 192px;
+                    width: 198px;
                     height: 128px;
                 }
             }
@@ -1014,6 +1092,9 @@ img.comment-viz{
                     height: 44px;
                 }
             }
+            h4{
+                font-size: 1.25rem;
+            }
         }
 
         @media #{$medium} {
@@ -1023,26 +1104,20 @@ img.comment-viz{
 
 
             h4 {
-                font-size: 1rem;
+                font-size: 1.1rem;
-                line-height: 1rem;
+                line-height: 1.3;
             }
 
             .three-pillars {
                 .pillar-splash {
-                    width: 136px;
+                    width: 151px;
-                    height: 105px;
+                    height: 89px;
 
                     &.community {
                         width: 164px;
                     }
                 }
             }
-
-            .equity-and-global {
-                .pillar-splash {
-                    height: 14px;
-                }
-            }
         }
 
         @media #{$small} {
@@ -1051,26 +1126,21 @@ img.comment-viz{
             }
 
             h4 {
-                font-size: .8rem;
+                font-size: .65rem;
                 line-height: 1rem;
             }
 
             .three-pillars {
                 .pillar-splash {
-                    width: 90px;
+                    width: 95px;
                     height: 64px;
+                    margin-bottom: 0px;
 
                     &.community {
                         width: 108px;
                     }
                 }
             }
-
-            .equity-and-global {
-                .pillar-splash {
-                    height: 10px;
-                }
-            }
         }
     }
 
@@ -1085,7 +1155,7 @@ img.comment-viz{
         }
 
         &.access {
-            background-color: $ui-aqua-dark;
+            background-color: $annual-report-green;
             background-position: 50% 0%;
             margin: 70px 0;
         }
@@ -1139,7 +1209,8 @@ img.comment-viz{
             flex-wrap: wrap;
             align-items: center;
             width: 100%;
-            max-width: 760px;
+            // max-width: 760px;
+            max-width: 800px;
             margin: auto;
             justify-content: space-around;
             &.around{
@@ -1157,7 +1228,7 @@ img.comment-viz{
                     }
                 }
             }
-            @media #{$intermediate} {
+            @media #{$medium} {
                 flex-direction: column;
             }
             .text{
@@ -1228,14 +1299,16 @@ img.comment-viz{
                     width: 100%;
                     max-width: 170px;
                     // display: flex;
+                    margin-top: -15px;
                     @media #{$medium-and-smaller}{
                         max-width: 100%;
+                        margin-top: 0px;
                     }
                     .stat-block{
                         display: inline-block;
                         text-align: center;
                         font-weight: 500;
-                        margin-bottom: 50px;
+                        margin-bottom: 30px;
                         @media #{$medium-and-smaller}{
                             margin: 0 20px 50px;
                         }
@@ -1266,19 +1339,22 @@ img.comment-viz{
             margin-left: 0px;
             color: $ui-white;
             font-weight: bold;
-            @media #{$intermediate-and-smaller} {
+            @media #{$medium-and-smaller} {
                 margin-left: auto;
             }
             &.spotlight{
                 // margin-left: 50px;
-                @media #{$intermediate-and-smaller}{
+                @media #{$medium-and-smaller}{
                     margin: auto;
+                    + h4{
+                        text-align: center;
+                        margin-top: 15px;
+                        + p.larger{
+                            text-align: center;
+                            margin-top: 0px;
                         }
-                &.india{
-                    margin: 0 0 20px;
-                    @media #{$intermediate-and-smaller}{
-                        margin: 0 auto 20px;
                     }
+                    
                 }
             }
             &.inverted{
@@ -1300,6 +1376,16 @@ img.comment-viz{
                 }
             }
         }
+        p.larger:before{
+            content: '';
+            background: url("/images/annual-report/2021/1_SEC Section/Location.svg");
+            width: 18px;
+            height: 16px;
+            display: inline-block;
+            background-size: contain;
+            background-position: center;
+            margin-right: 5px;
+        }
         .about-breaker{
             text-align: center;
             margin: 35px auto;
@@ -1343,8 +1429,12 @@ img.comment-viz{
                     line-height: 3rem;
                 }
             }
+            &.stacked{
+                margin-top: 0px;
+                padding-top: 0px;
+            }
             @media #{$big} {
-                max-width: 940px;
+                max-width: 840px;
                 padding: 72px 0;
             }
 
@@ -1353,7 +1443,7 @@ img.comment-viz{
             }
 
             @media #{$intermediate} {
-                max-width: 620px;
+                width: calc(100% - 100px);
             }
 
             @media #{$medium} {
@@ -1387,7 +1477,7 @@ img.comment-viz{
                 max-width: 940px;
                 width: 100%;
                 text-align: left;
-                @media #{$intermediate-and-smaller} {
+                @media #{$medium-and-smaller} {
                     flex-direction: column;
                     align-items: center;
                     justify-content: center;
@@ -1426,7 +1516,9 @@ img.comment-viz{
                     }
 
                     @media #{$intermediate} {
-                        max-width: 620px;
+                        .text{
+                            max-width: 380px;
+                        }
                     }
                 }
             }
@@ -1555,12 +1647,17 @@ img.comment-viz{
 
     .initiatives-access, .initiatives-community {
         .world{
-            max-width: 600px;
+            max-width: 700px;
             margin: 50px auto;
             @media #{$intermediate-and-smaller} {
                 width: calc(100% - 30px);
                 padding: 0 15px;
             }
+            p.subhed{
+                font-size: 1.1rem;
+                max-width: 500px;
+                margin: 15px auto;
+            }
         }
         .connecting-educators{
             max-width: 700px;
@@ -1629,6 +1726,9 @@ img.comment-viz{
             }
         }
         .inner {
+            @media #{$big}{
+                width: 850px;
+            }
             &.center{
                 text-align: center;
                 margin-top: 80px;
@@ -1637,6 +1737,51 @@ img.comment-viz{
                 margin-top: 70px;
             }
         }
+        .text-and-media-snippet{
+            h4, p{
+                text-align: left;
+            }
+            .half{
+                width: 48%;
+                h4{
+                    font-size: 1.3rem;
+                }
+            }
+            &.first{
+                h4{
+                    font-size: 1.5rem;
+                }
+            }
+            @media #{$intermediate-and-smaller} {
+                width: 100%;
+                &.regular {
+                  flex-direction: row;
+                }
+                &.reverse {
+                  flex-direction: row-reverse;
+                }
+            }
+            @media #{$medium-and-smaller} {
+           
+                .half{
+                    width: 100%;
+                    img{
+                        max-width: 350px;
+                        width: 100%;
+                    }
+                }
+            
+                &.regular {
+                  flex-direction: column-reverse;
+                }
+                &.reverse {
+                  flex-direction: column;
+                }
+            }
+            + p{
+                text-align: left;
+            }
+        }
         .moderation-and-guidelines {
             display: flex;
             justify-content: space-between;
@@ -1883,7 +2028,7 @@ img.comment-viz{
 
     .tweet-container{
         background-image: url("/images/annual-report/2021/3_Community Section/splash.svg");
-        background-size: contain;
+        // background-size: contain;
         background-position: center;
         background-repeat:no-repeat;
         width: 100%;
@@ -1907,15 +2052,20 @@ img.comment-viz{
             div{
                 width: 350px;
             }
-            @media #{$small} {
+            @media #{$medium-and-smaller} {
                 flex-direction: column;
                 justify-content: center;
                 align-items: center;
                 div{
-                    width: 250px;
+                    // width: 250px;
                     margin: auto;
                 }
             }
+            @media #{$small}{
+                div{
+                    width: 300px;
+                }
+            }
             .twitter-tweet{
                 width: 100%;
             }
@@ -2350,7 +2500,7 @@ img.comment-viz{
 }
 
 .donate-section {
-    background-color: $annual-report-aqua;
+    background-color: $annual-report-green;
 
     .donate-info {
         justify-content: center;
@@ -2428,7 +2578,7 @@ img.comment-viz{
     top: 50px;
     z-index: 9;
     box-shadow: 0 0 3px $box-shadow-gray;
-    background-color: $annual-report-aqua;
+    background-color: $annual-report-green;
     padding: 0;
     width: 100%;
     height: 58px;
@@ -2456,7 +2606,6 @@ img.comment-viz{
         display: flex;
         justify-content: space-between;
         align-items: center;
-
         height: 58px;
 
         p {
@@ -2491,6 +2640,10 @@ img.comment-viz{
     @media #{$medium-and-smaller} {
         height: auto;
         
+        .sectionIndicator{
+            width: calc(100% - 30px);
+        }
+
         .flex-row {
             flex-direction: row;
             justify-content: flex-start;

src/views/annual-report/2021/l10n.json

@@ -16,8 +16,7 @@
     "annualReport.2021.directorsMessagePullquote": "We believe in the transformative power of self-expression and creativity, and in providing space for young people to use creative coding as a tool to raise their voice.",
     "annualReport.2021.directorsMessageP3": "I’m proud to serve as the Executive Director of the Scratch Foundation during this pivotal moment in our history, and will continue to spread Scratch’s caring, collaborative approach to creative learning to kids around the world who need these opportunities the most.",
     "annualReport.2021.directorsMessageP4": "Last year was an incredible year for the Scratch Foundation–we focused on growing our team with remarkable, diverse leaders and building a solid foundation for our continued transition to an independent organization. We developed a three-year Strategic Plan with the combined efforts of every team member at every level of our organization, codifying the work we’re embarking on together. As Scratch grows, we remain focused on equity and community-building, and keeping Scratch a safe space for kids to connect, create, and collaborate with their peers around the world.",
-    "annualReport.2021.directorsMessageP5": "LI can’t thank you enough for embarking on this journey with our team, and for your continued support of our mission. The compassion and creativity of the Scratch Community is endlessly inspiring to us, and we can’t wait for you to join us in the important work ahead of us.",
+    "annualReport.2021.directorsMessageP5": "I can’t thank you enough for embarking on this journey with our team, and for your continued support of our mission. The compassion and creativity of the Scratch Community is endlessly inspiring to us, and we can’t wait for you to join us in the important work ahead of us.",
-    "annualReport.2021.directorsMessageP6": "Over the past decade, Scratch has had phenomenal success, engaging tens of millions of young people around the world. But we are just beginning. The challenge for the years ahead is to ensure that we can continue to spread and support not just our technology but also our creative, caring, collaborative learning approach, so that young people around the world have equitable opportunities to imagine, create, share, and learn. We look forward to working with all of you to make that happen!",
     "annualReport.2021.EDTitle": "Executive Director, Scratch Foundation",
 
     "annualReport.2021.watchVideo": "Watch Video",
@@ -52,7 +51,8 @@
     "annualReport.2021.reachNewUsers": "New Users",
     "annualReport.2021.reachProjectsCreated": "Projects Created",
     "annualReport.2021.reachProjectCreators": "People Creating Projects",
-    "annualReport.2021.reachScratchAroundTheWorld": "Scratch is used around the world across more than 200 countries and territories",
+    "annualReport.2021.reachScratchAroundTheWorld": "Scratch is used around the world across {numberOfCountries}",
+    "annualReport.2021.reachScratchAroundTheWorldBold": "more than 200 countries and territories",
     "annualReport.2021.reachSaudiArabiaTitle": "Saudi Arabia",
     "annualReport.2021.reachSaudiArabiaDescription": "We saw tremendous growth around the world in 2021, but we were amazed to see the growth in Saudi Arabia, where we saw twice as many new users as the year before.",
     "annualReport.2021.reachTranslationTitle": "Scratch is Translated into 74 Languages",
@@ -131,8 +131,8 @@
     "annualReport.2021.communityIntro": "In 2021, the Scratch community continued to experience rapid growth as even more young people around the world created and connected alongside their peers. We also continued to develop partnerships with community members to improve the Scratch experience for our diverse community of users.",
     
     "annualReport.2021.communityScratchConference": "Scratch Conference",
-    "annualReport.2021.communityScratchConferenceText1": "In July, educators in our global community came together to celebrate creative coding at the Scratch Conference. This free, virtual event was led by our collaborators at MIT’s Lifelong Kindergarten Group. The conference brought together more than 1,500 educators and Scratch enthusiasts, who spent the day connecting, collaborating, and learning from one another, even as COVID kept us apart.",
+    "annualReport.2021.communityScratchConferenceText1": "In July, educators in our global community came together to celebrate creative coding at the Scratch Conference. This free, virtual event was led by our collaborators at MIT’s Lifelong Kindergarten Group. The conference brought together {more_bold}, who spent the day connecting, collaborating, and learning from one another, even as COVID kept us apart.",
-    
+    "annualReport.2021.communityScratchConferenceText1More": "more than 1,500 educators and Scratch enthusiasts",
     "annualReport.2021.communityVolunteerTranslators": "Volunteer Translators",
     "annualReport.2021.communityVolunteerTranslatorsText": "Since Scratch was launched in 2007, we have been committed to supporting our users worldwide. Our language translation volunteers work closely with the Scratch Team to help translate and localize our platform and resources for the diverse communities that we serve.",
     "annualReport.2021.communityVolunteerTranslatorsText2": "Thousands of translators have volunteered their time to translate Scratch into 74 languages and counting, and there are currently more than one thousand translators signed up to translate Scratch and ScratchJr. We’re grateful to our volunteers for helping us reach more Scratchers around the world!",

src/views/splash/l10n.json

@@ -30,6 +30,8 @@
     "news.scratchNews": "Scratch News",
 
     "donatebanner.askSupport": "Scratch is the world's largest free coding community for kids. Your support makes a difference.",
+    "donatebanner.scratchWeek": "May 19-20 is Scratch’s 15th Anniversary! {celebrationLink}. Donate to support creative coding worldwide.",
+    "donatebanner.learnMore": "Learn more",
 
     "teacherbanner.greeting": "Hi",
     "teacherbanner.subgreeting": "Teacher Account",

src/views/starter-projects/starter-projects.json

@@ -4,7 +4,7 @@
    "id": 10128067,
    "type": "project",
    "title": "Dance Party",
-   "image": "https://cdn2.scratch.mit.edu/get_image/project/10128067_144x108.png",
+   "image": "https://uploads.scratch.mit.edu/get_image/project/10128067_144x108.png",
    "author": {"username": "Scratchteam"},
    "href": "https://scratch.mit.edu/projects/10128067/",
    "stats": {"loves": 0, "remixes": 0}
@@ -13,7 +13,7 @@
    "id": 10015059,
    "type": "project",
    "title": "Animate the Crab",
-   "image": "https://cdn2.scratch.mit.edu/get_image/project/10015059_144x108.png",
+   "image": "https://uploads.scratch.mit.edu/get_image/project/10015059_144x108.png",
    "author": {"username": "Scratchteam"},
    "href": "https://scratch.mit.edu/projects/10015059/",
    "stats": {"loves": 0, "remixes": 0}
@@ -22,7 +22,7 @@
    "id": 10015060,
    "type": "project",
    "title": "The Pico Show: Intro",
-   "image": "https://cdn2.scratch.mit.edu/get_image/project/10015060_144x108.png",
+   "image": "https://uploads.scratch.mit.edu/get_image/project/10015060_144x108.png",
    "author": {"username": "Scratchteam"},
    "href": "https://scratch.mit.edu/projects/10015060/",
    "stats": {"loves": 0, "remixes": 0}
@@ -31,7 +31,7 @@
    "id": 11806234,
    "type": "project",
    "title": "Greeting Card",
-   "image": "https://cdn2.scratch.mit.edu/get_image/project/11806234_144x108.png",
+   "image": "https://uploads.scratch.mit.edu/get_image/project/11806234_144x108.png",
    "author": {"username": "Scratchteam"},
    "href": "https://scratch.mit.edu/projects/11806234/",
    "stats": {"loves": 0, "remixes": 0}
@@ -40,7 +40,7 @@
    "id": 10128197,
    "type": "project",
    "title": "Teens at the Castle",
-   "image": "https://cdn2.scratch.mit.edu/get_image/project/10128197_144x108.png",
+   "image": "https://uploads.scratch.mit.edu/get_image/project/10128197_144x108.png",
    "author": {"username": "Scratchteam"},
    "href": "https://scratch.mit.edu/projects/10128197/",
    "stats": {"loves": 0, "remixes": 0}
@@ -51,7 +51,7 @@
    "id": 10128515,
    "type": "project",
    "title": "Pong Starter",
-   "image": "https://cdn2.scratch.mit.edu/get_image/project/10128515_144x108.png",
+   "image": "https://uploads.scratch.mit.edu/get_image/project/10128515_144x108.png",
    "author": {"username": "Scratchteam"},
    "href": "https://scratch.mit.edu/projects/10128515/",
    "stats": {"loves": 0, "remixes": 0}
@@ -60,7 +60,7 @@
    "id": 10128431,
    "type": "project",
    "title": "Maze Starter",
-   "image": "https://cdn2.scratch.mit.edu/get_image/project/10128431_144x108.png",
+   "image": "https://uploads.scratch.mit.edu/get_image/project/10128431_144x108.png",
    "author": {"username": "Scratchteam"},
    "href": "https://scratch.mit.edu/projects/10128431/",
    "stats": {"loves": 0, "remixes": 0}
@@ -69,7 +69,7 @@
    "id": 10128368,
    "type": "project",
    "title": "Hide and Seek",
-   "image": "https://cdn2.scratch.mit.edu/get_image/project/10128368_144x108.png",
+   "image": "https://uploads.scratch.mit.edu/get_image/project/10128368_144x108.png",
    "author": {"username": "Scratchteam"},
    "href": "https://scratch.mit.edu/projects/10128368/",
    "stats": {"loves": 0, "remixes": 0}
@@ -78,7 +78,7 @@
    "id": 11656680,
    "type": "project",
    "title": "Dress Up Tera",
-   "image": "https://cdn2.scratch.mit.edu/get_image/project/11656680_144x108.png",
+   "image": "https://uploads.scratch.mit.edu/get_image/project/11656680_144x108.png",
    "author": {"username": "Scratchteam"},
    "href": "https://scratch.mit.edu/projects/11656680/",
    "stats": {"loves": 0, "remixes": 0}
@@ -87,7 +87,7 @@
    "id": 10866073,
    "type": "project",
    "title": "Snowboarding",
-   "image": "https://cdn2.scratch.mit.edu/get_image/project/10866073_144x108.png",
+   "image": "https://uploads.scratch.mit.edu/get_image/project/10866073_144x108.png",
    "author": {"username": "Scratchteam"},
    "href": "https://scratch.mit.edu/projects/10866073/",
    "stats": {"loves": 0, "remixes": 0}
@@ -98,7 +98,7 @@
    "id": 10015857,
    "type": "project",
    "title": "Paint with Gobo",
-   "image": "https://cdn2.scratch.mit.edu/get_image/project/10015857_144x108.png",
+   "image": "https://uploads.scratch.mit.edu/get_image/project/10015857_144x108.png",
    "author": {"username": "Scratchteam"},
    "href": "https://scratch.mit.edu/projects/10015857/",
    "stats": {"loves": 0, "remixes": 0}
@@ -107,7 +107,7 @@
    "id": 11829803,
    "type": "project",
    "title": "Wizard Spells",
-   "image": "https://cdn2.scratch.mit.edu/get_image/project/11829803_144x108.png",
+   "image": "https://uploads.scratch.mit.edu/get_image/project/11829803_144x108.png",
    "author": {"username": "Scratchteam"},
    "href": "https://scratch.mit.edu/projects/11829803/",
    "stats": {"loves": 0, "remixes": 0}
@@ -116,7 +116,7 @@
    "id": 10007296,
    "type": "project",
    "title": "Soundflower",
-   "image": "https://cdn2.scratch.mit.edu/get_image/project/10007296_144x108.png",
+   "image": "https://uploads.scratch.mit.edu/get_image/project/10007296_144x108.png",
    "author": {"username": "Scratchteam"},
    "href": "https://scratch.mit.edu/projects/10007296/",
    "stats": {"loves": 0, "remixes": 0}
@@ -125,7 +125,7 @@
    "id": 11641125,
    "type": "project",
    "title": "Spiral Maker",
-   "image": "https://cdn2.scratch.mit.edu/get_image/project/11641125_144x108.png",
+   "image": "https://uploads.scratch.mit.edu/get_image/project/11641125_144x108.png",
    "author": {"username": "Scratchteam"},
    "href": "https://scratch.mit.edu/projects/11641125/",
    "stats": {"loves": 0, "remixes": 0}
@@ -134,7 +134,7 @@
    "id": 259169999,
    "type": "project",
    "title": "Dancing Drawings",
-   "image": "https://cdn2.scratch.mit.edu/get_image/project/259169999_144x108.png",
+   "image": "https://uploads.scratch.mit.edu/get_image/project/259169999_144x108.png",
    "author": {"username": "shruti"},
    "href": "https://scratch.mit.edu/projects/259169999/",
    "stats": {"loves": 0, "remixes": 0}
@@ -145,7 +145,7 @@
    "id": 10015792,
    "type": "project",
    "title": "Remix this Dance!",
-   "image": "https://cdn2.scratch.mit.edu/get_image/project/10015792_144x108.png",
+   "image": "https://uploads.scratch.mit.edu/get_image/project/10015792_144x108.png",
    "author": {"username": "Scratchteam"},
    "href": "https://scratch.mit.edu/projects/10015792/",
    "stats": {"loves": 0, "remixes": 0}
@@ -154,7 +154,7 @@
    "id": 10012676,
    "type": "project",
    "title": "Piano",
-   "image": "https://cdn2.scratch.mit.edu/get_image/project/10012676_144x108.png",
+   "image": "https://uploads.scratch.mit.edu/get_image/project/10012676_144x108.png",
    "author": {"username": "Scratchteam"},
    "href": "https://scratch.mit.edu/projects/10012676/",
    "stats": {"loves": 0, "remixes": 0}
@@ -163,7 +163,7 @@
    "id": 10128483,
    "type": "project",
    "title": "Starfish Choir",
-   "image": "https://cdn2.scratch.mit.edu/get_image/project/10128483_144x108.png",
+   "image": "https://uploads.scratch.mit.edu/get_image/project/10128483_144x108.png",
    "author": {"username": "Scratchteam"},
    "href": "https://scratch.mit.edu/projects/10128483/",
    "stats": {"loves": 0, "remixes": 0}
@@ -172,7 +172,7 @@
    "id": 11640429,
    "type": "project",
    "title": "DJ Scratch Cat",
-   "image": "https://cdn2.scratch.mit.edu/get_image/project/11640429_144x108.png",
+   "image": "https://uploads.scratch.mit.edu/get_image/project/11640429_144x108.png",
    "author": {"username": "Scratchteam"},
    "href": "https://scratch.mit.edu/projects/11640429/",
    "stats": {"loves": 0, "remixes": 0}
@@ -181,7 +181,7 @@
    "id": 10408883,
    "type": "project",
    "title": "Code a Dance",
-   "image": "https://cdn2.scratch.mit.edu/get_image/project/10408883_144x108.png",
+   "image": "https://uploads.scratch.mit.edu/get_image/project/10408883_144x108.png",
    "author": {"username": "Scratchteam"},
    "href": "https://scratch.mit.edu/projects/10408883/",
    "stats": {"loves": 0, "remixes": 0}
@@ -192,7 +192,7 @@
    "id": 10014866,
    "type": "project",
    "title": "5 Random Facts about Me",
-   "image": "https://cdn2.scratch.mit.edu/get_image/project/10014866_144x108.png",
+   "image": "https://uploads.scratch.mit.edu/get_image/project/10014866_144x108.png",
    "author": {"username": "Scratchteam"},
    "href": "https://scratch.mit.edu/projects/10014866/",
    "stats": {"loves": 0, "remixes": 0}
@@ -201,7 +201,7 @@
    "id": 10063757,
    "type": "project",
    "title": "Introducing Howler! Remix",
-   "image": "https://cdn2.scratch.mit.edu/get_image/project/10063757_144x108.png",
+   "image": "https://uploads.scratch.mit.edu/get_image/project/10063757_144x108.png",
    "author": {"username": "Scratchteam"},
    "href": "https://scratch.mit.edu/projects/10063757/",
    "stats": {"loves": 0, "remixes": 0}
@@ -210,7 +210,7 @@
    "id": 10128197,
    "type": "project",
    "title": "Teens at the Castle",
-   "image": "https://cdn2.scratch.mit.edu/get_image/project/10128197_144x108.png",
+   "image": "https://uploads.scratch.mit.edu/get_image/project/10128197_144x108.png",
    "author": {"username": "Scratchteam"},
    "href": "https://scratch.mit.edu/projects/10128197/",
    "stats": {"loves": 0, "remixes": 0}
@@ -219,7 +219,7 @@
    "id": 11804271,
    "type": "project",
    "title": "Virtual Tour",
-   "image": "https://cdn2.scratch.mit.edu/get_image/project/11804271_144x108.png",
+   "image": "https://uploads.scratch.mit.edu/get_image/project/11804271_144x108.png",
    "author": {"username": "Scratchteam"},
    "href": "https://scratch.mit.edu/projects/11804271/",
    "stats": {"loves": 0, "remixes": 0}
@@ -228,7 +228,7 @@
    "id": 10015868,
    "type": "project",
    "title": "Digital Story",
-   "image": "https://cdn2.scratch.mit.edu/get_image/project/10015868_144x108.png",
+   "image": "https://uploads.scratch.mit.edu/get_image/project/10015868_144x108.png",
    "author": {"username": "Scratchteam"},
    "href": "https://scratch.mit.edu/projects/10015868/",
    "stats": {"loves": 0, "remixes": 0}
@@ -239,7 +239,7 @@
    "id": 10128168,
    "type": "project",
    "title": "Musical Buttons",
-   "image": "https://cdn2.scratch.mit.edu/get_image/project/10128168_144x108.png",
+   "image": "https://uploads.scratch.mit.edu/get_image/project/10128168_144x108.png",
    "author": {"username": "Scratchteam"},
    "href": "https://scratch.mit.edu/projects/10128168/",
    "stats": {"loves": 0, "remixes": 0}
@@ -248,7 +248,7 @@
    "id": 10128119,
    "type": "project",
    "title": "Bubbles with Video Sensing",
-   "image": "https://cdn2.scratch.mit.edu/get_image/project/10128119_144x108.png",
+   "image": "https://uploads.scratch.mit.edu/get_image/project/10128119_144x108.png",
    "author": {"username": "Scratchteam"},
    "href": "https://scratch.mit.edu/projects/10128119/",
    "stats": {"loves": 0, "remixes": 0}
@@ -257,7 +257,7 @@
    "id": 10123832,
    "type": "project",
    "title": "Save the Mini-Figs!",
-   "image": "https://cdn2.scratch.mit.edu/get_image/project/10123832_144x108.png",
+   "image": "https://uploads.scratch.mit.edu/get_image/project/10123832_144x108.png",
    "author": {"username": "Scratchteam"},
    "href": "https://scratch.mit.edu/projects/10123832/",
    "stats": {"loves": 0, "remixes": 0}
@@ -266,7 +266,7 @@
    "id": 10015802,
    "type": "project",
    "title": "Pizza Chef",
-   "image": "https://cdn2.scratch.mit.edu/get_image/project/10015802_144x108.png",
+   "image": "https://uploads.scratch.mit.edu/get_image/project/10015802_144x108.png",
    "author": {"username": "Scratchteam"},
    "href": "https://scratch.mit.edu/projects/10015802/",
    "stats": {"loves": 0, "remixes": 0}
@@ -275,7 +275,7 @@
    "id": 63809044,
    "type": "project",
    "title": "Soccer Video Sensing",
-   "image": "https://cdn2.scratch.mit.edu/get_image/project/63809044_144x108.png",
+   "image": "https://uploads.scratch.mit.edu/get_image/project/63809044_144x108.png",
    "author": {"username": "natalie"},
    "href": "https://scratch.mit.edu/projects/63809044/",
    "stats": {"loves": 0, "remixes": 0}

webpack.config.js

@@ -229,7 +229,7 @@ module.exports = {
             'process.env.BACKPACK_HOST': '"' + (process.env.BACKPACK_HOST || 'https://backpack.scratch.mit.edu') + '"',
             'process.env.CLOUDDATA_HOST': '"' + (process.env.CLOUDDATA_HOST || 'clouddata.scratch.mit.edu') + '"',
             'process.env.PROJECT_HOST': '"' + (process.env.PROJECT_HOST || 'https://projects.scratch.mit.edu') + '"',
-            'process.env.STATIC_HOST': '"' + (process.env.STATIC_HOST || 'https://cdn2.scratch.mit.edu') + '"',
+            'process.env.STATIC_HOST': '"' + (process.env.STATIC_HOST || 'https://uploads.scratch.mit.edu') + '"',
             'process.env.SCRATCH_ENV': '"' + (process.env.SCRATCH_ENV || 'development') + '"',
             'process.env.SENTRY_DSN': '"' + (process.env.SENTRY_DSN || '') + '"'
         })