From 6c3dc25c1120441b369ec678a6e55104f8303b10 Mon Sep 17 00:00:00 2001
From: caseymm <casey@bocoup.com>
Date: Mon, 25 Apr 2022 16:36:14 -0700
Subject: [PATCH] work on fullshear spotlight story

---
 .../annual-report/2021/annual-report.jsx      | 90 +++++++++++++------
 .../annual-report/2021/annual-report.scss     | 42 ++++++---
 2 files changed, 95 insertions(+), 37 deletions(-)

diff --git a/src/views/annual-report/2021/annual-report.jsx b/src/views/annual-report/2021/annual-report.jsx
index bb2da4597..dbe1a9256 100644
--- a/src/views/annual-report/2021/annual-report.jsx
+++ b/src/views/annual-report/2021/annual-report.jsx
@@ -826,34 +826,74 @@ class AnnualReport extends React.Component {
                                         </div>
                                     </div>
                                 </div>
+                                {/* 4/25 */}
+                                
+                                
                                 <div className="inner">
-                                    <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>
-                                            <p className="larger">
-                                                <FormattedMessage id="annualReport.2021.SECSpotlightLocation" />
-                                            </p>
-                                            <p>
-                                                <FormattedMessage id="annualReport.2021.SECSpotlightText1" />
-                                            </p>
-                                            <p>
-                                                <FormattedMessage id="annualReport.2021.SECSpotlightText2" />
-                                            </p>
+                                    <MediaQuery minWidth={frameless.tabletPortrait}>
+                                        <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>
+                                                <p>
+                                                    <FormattedMessage id="annualReport.2021.SECSpotlightText1" />
+                                                </p>
+                                                <p>
+                                                    <FormattedMessage id="annualReport.2021.SECSpotlightText2" />
+                                                </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>
-                                        <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'}
-                                                )}
-                                            />
+                                    </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>
-                                    </div>
+                                    </MediaQuery>
                                     <div className="content">
                                         <p className="pull-quote blue">
                                             <FormattedMessage id="annualReport.2021.SECPullQuote" />
diff --git a/src/views/annual-report/2021/annual-report.scss b/src/views/annual-report/2021/annual-report.scss
index 6b7234b00..b47c81282 100644
--- a/src/views/annual-report/2021/annual-report.scss
+++ b/src/views/annual-report/2021/annual-report.scss
@@ -275,6 +275,8 @@ a, a:link, a:visited, a:active{
 .pull-quote{
     font-size: 1.5rem;
     line-height: 2.5rem;
+    text-align: left;
+    margin-bottom: 10px;
     @media #{$small}{
         font-size: 24px;
     }
@@ -326,6 +328,7 @@ a, a:link, a:visited, a:active{
     float: right;
     text-align: right;
     width: 100%;
+    margin-top: 0px;
     &.right{
         text-align: right;
     }
@@ -1202,7 +1205,7 @@ img.comment-viz{
                     }
                 }
             }
-            @media #{$intermediate} {
+            @media #{$medium} {
                 flex-direction: column;
             }
             .text{
@@ -1313,19 +1316,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;
-                }
-                &.india{
-                    margin: 0 0 20px;
-                    @media #{$intermediate-and-smaller}{
-                        margin: 0 auto 20px;
+                    + h4{
+                        text-align: center;
+                        margin-top: 15px;
+                        + p.larger{
+                            text-align: center;
+                            margin-top: 0px;
+                        }
                     }
+                    
                 }
             }
             &.inverted{
@@ -1347,6 +1353,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;
@@ -1391,7 +1407,7 @@ img.comment-viz{
                 }
             }
             @media #{$big} {
-                max-width: 940px;
+                max-width: 840px;
                 padding: 72px 0;
             }
 
@@ -1400,7 +1416,7 @@ img.comment-viz{
             }
 
             @media #{$intermediate} {
-                max-width: 620px;
+                width: calc(100% - 30px);
             }
 
             @media #{$medium} {
@@ -1434,7 +1450,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;
@@ -1473,7 +1489,9 @@ img.comment-viz{
                     }
 
                     @media #{$intermediate} {
-                        max-width: 620px;
+                        .text{
+                            max-width: 380px;
+                        }
                     }
                 }
             }