alignment through Volunteer Translators

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

@@ -1324,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">
@@ -1341,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(
-                                                {id: 'annualReport.2021.communityVolunteerTranslators'}
-                                            )}
+                                            // title={this.props.intl.formatMessage(
+                                            //     {id: 'annualReport.2021.communityVolunteerTranslators'}
+                                            // )}
                                             alt={this.props.intl.formatMessage(
                                                 {id: 'annualReport.2021.altcommunityVolunteerTranslators'}
                                             )}
@@ -1363,9 +1376,9 @@ class AnnualReport extends React.Component {
                                         {/* eslint-disable max-len */}
                                         <TextAndMediaSnippet
                                             className="regular"
-                                            title={this.props.intl.formatMessage(
-                                                {id: 'annualReport.2021.communityVolunteerTranslators'}
-                                            )}
+                                            // title={this.props.intl.formatMessage(
+                                            //     {id: 'annualReport.2021.communityVolunteerTranslators'}
+                                            // )}
                                             alt={this.props.intl.formatMessage(
                                                 {id: 'annualReport.2021.altcommunityVolunteerTranslators'}
                                             )}

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

@@ -45,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 {
@@ -1756,11 +1762,7 @@ img.comment-viz{
                 }
             }
             @media #{$medium-and-smaller} {
-                // text-align: center;
-                // margin: 32px auto;
-                // &.top {
-                //   margin-top: 32px;
-                // }
+           
                 .half{
                     width: 100%;
                     img{
@@ -1776,6 +1778,9 @@ img.comment-viz{
                   flex-direction: column;
                 }
             }
+            + p{
+                text-align: left;
+            }
         }
         .moderation-and-guidelines {
             display: flex;
@@ -2023,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%;
@@ -2047,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%;
             }

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

@@ -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!",