work on supporters responsiveness

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

@@ -675,9 +675,9 @@ class AnnualReport extends React.Component {
                         </div>
                         <div className="supporters-subsection">
                             <div className="supporters-blurb">
-                                <h3>
+                                <h4>
                                     <FormattedMessage id="annualReport.supportersSFETitle" />
-                                </h3>
+                                </h4>
                                 <p>
                                     <FormattedMessage id="annualReport.supportersSFEDescription1" />
                                 </p>
@@ -691,9 +691,10 @@ class AnnualReport extends React.Component {
                             <div className="david-siegel">
                                 <div className="ds-info">
                                     <img src="/images/annual-report/david-siegel-photo.svg" />
-                                    <div>
+                                    <div className="ds-text">
-                                        <h3>David Siegel</h3>
+                                        <h4>David Siegel</h4>
-                                        <div>Co-Founder and<br /> Co-Chairman<br /> Two Sigma</div>
+                                        <FormattedMessage id="annualReport.supportersCoFounder" />
+                                        <br />Two Sigma
                                     </div>
                                 </div>
                                 <div className="ds-quote">
@@ -705,7 +706,7 @@ class AnnualReport extends React.Component {
                         <div className="supporters-subsection">
                             <div className="supporters-blurb">
                                 <h4>
-                                    <FormattedHTMLMessage id="annualReport.supportersTitle" />
+                                    <FormattedHTMLMessage id="annualReport.supportersThankYou" />
                                 </h4>
                                 <p>
                                     <FormattedHTMLMessage id="annualReport.supportersAllDescription" />
@@ -719,7 +720,6 @@ class AnnualReport extends React.Component {
                                     <FormattedHTMLMessage id="annualReport.supportersFoundingTitle" />
                                 </h5>
                                 <hr />
-                                <p>We are especially grateful to our Founding Partners who supported us from the early days of Scratch, each providing at least $10,000,000 of cumulative support, in various forms.</p>
                                 <div className="supporters-list">
                                     <ul className="supporters-list-side">
                                         <li>Massachusetts Institute of Technology</li>

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

@@ -473,23 +473,34 @@ p {
 
 .supporters-section {
     background-color: #EDEDFF;
-    padding: 84px 0;
+    padding: 104px 0;
 
     .inner {
         max-width: 780px;
     }
 
+    h3, h4 {
+        margin-bottom: 20px;
+    }
+
+    ul {
+        padding: 0;
+    }
+
+    li {
+        list-style: none;
+    }
+
     .supporters-heading {
-        margin-bottom: 48px;
+        margin-bottom: 68px;
 
         h2 {
-            font-size: 52px;
+            padding-bottom: 24px;
-            padding-bottom: 52px;
         }
 
         p {
-            font-size: 24px;
+            font-size: 1.25rem;
-            margin: 0;
+            line-height: 2.5rem;
         }
     }
 
@@ -506,8 +517,7 @@ p {
         margin: 48px 80px 0px 80px;
 
         h2 {
-            font-size: 24px;
+            font-size: 1.5rem;
-            font-color: #575E75;
         }
 
         p {
@@ -515,10 +525,6 @@ p {
         }
     }
 
-    .supporters-blurb {
-       // max-width: 620px;
-    }
-
     .founding-partners-blurb {
         font-style: italic;
     }
@@ -527,26 +533,28 @@ p {
         display: flex;
         align-items: flex-start;
 
+        width: 780px;
+        margin-bottom: 52px;
+        margin-top: 32px;
+
         .ds-info {
             display: flex;
-            padding: 0 20px;
+            line-height: 24px;
-            margin-right: 18px;
+        }
 
-            h3 {
+        img {
-                font-size: 24px;
+            width: 140px;
-            }
+        }
 
-            div {
+        .ds-text {
-                //font-size: 16px;
+            width: 144px;
-                //padding: 18px;
-            }
         }
     }
 
     .comment-text {
         background-color: $ui-white;
         text-align: left;
-        margin-top: 16px;
+        margin: 20px;
 
         p {
             font-size: 1.25rem;
@@ -556,6 +564,7 @@ p {
 
     .supporters-level {
         width: 100%;
+        margin: 24px 0;
 
 
         .supporters-list {
@@ -573,6 +582,43 @@ p {
             }
         }
     }
+    @media #{$big} {
+        .ds-info {
+            flex-direction: column;
+            text-align: center;
+            width: 144px;
+            margin-right: 60px;
+        }
+    }
+
+    @media #{$intermediate-and-smaller} {
+        .inner {
+            max-width: 620px;
+        }
+
+        .supporters-subsection {
+            text-align: left;
+        }
+
+        .david-siegel {
+            width: 460px;
+        }
+
+        .ds-info {
+            width: 460px;
+            flex-direction: row;
+            text-align: left;
+
+            img {
+                margin-right: 20px;
+            }
+        }
+
+        .david-siegel {
+            flex-direction: column;
+            align-items: center;
+        }
+    }
 
     @media #{$medium-and-smaller} {
         .supporters-subsection {
@@ -584,29 +630,6 @@ p {
             align-content: flex-start;
         }
     }
-
-    @media #{$intermediate-and-smaller} {
-        .supporters-subsection {
-            text-align: left;
-        }
-        .ds-info {
-            flex-direction: row;
-            text-align: left;
-        }
-
-        .david-siegel {
-            flex-direction: column;
-            align-items: center;
-        }
-    }
-
-    @media #{$big} {
-        .ds-info {
-            flex-direction: column;
-            text-align: center;
-        }
-    }
-
 }
 
 .donate-section {

src/views/annual-report/l10n.json

@@ -99,7 +99,9 @@
     "annualReport.supportersSFEDescription1": "In May 2012, David Siegel attended Scratch Day at the MIT Media Lab with his son Zach, an active and enthusiastic Scratcher. Watching Zach and other children using Scratch to code their own games, animations, and robotic creatures, David saw how much potential Scratch had to help children both learn practical coding skills, and develop as computational thinkers.",
     "annualReport.supportersSFEDescription2": "David knows the importance of computational thinking firsthand, and his career as a computer scientist and entrepreneur has been shaped by the same curiosity that Scratch helps young learners explore every day. It's the same exploratory instinct that led him to study computer science at Princeton, and earn a PhD based on work completed at MIT's Artificial Intelligence Lab. In 2001, he co-founded Two Sigma, which has grown to become a world leader in applying machine learning and data science to investment management.", 
     "annualReport.supportersSFEDescription3": "In 2011, David founded Siegel Family Endowment (SFE) to support organizations working to help people adapt to the demands of new technology, and to better understand and mitigate the powerful disruptions that technology has driven in almost every sector. He is also a co-founder of the Scratch Foundation, and is a strong advocate for the organization's mission to keep Scratch free and accessible to learners all over the world.",
+    "annualReport.supportersCoFounder": "Co-Founder and Co-Chairman",
     "annualReport.supportersQuote": "Making sure that Scratch remains free and accessible for kids everywhere is one of the most impactful ways we can help young learners engage and thrive in an increasingly digital world. Supporting Scratch is more important today than ever before.",
+    "annualReport.supportersThankYou": "Thank you to our supporters",
     "annualReport.supportersAllDescription": "Our mission is to provide all children, from all backgrounds, with opportunities to imagine, create, and share with new technologies. We want to thank all Scratch supporters who, throughout the years, have helped us create amazing learning experiences for millions of young people around the world. The following list is based on cumulative giving to Scratch (at both MIT and Scratch Foundation) through December 31, 2019.",
     "annualReport.supportersFoundingDescription": "We are especially grateful to our Founding Partners who supported us from the early days of Scratch, each providing at least $10,000,000 of cumulative support, in various forms.",
     "annualReport.supportersFoundingTitle": "Founding Partners — $10,00,000+",