scratchfoundation/scratch-www
1
0
Fork 0
mirror of https://github.com/scratchfoundation/scratch-www.git synced 2024-11-23 23:57:55 -05:00
Code Issues Projects Releases Packages Wiki Activity Actions 2

work on fullshear spotlight story

Browse source
This commit is contained in:
caseymm 2022-04-25 16:36:14 -07:00
parent 4821a03baf
commit 6c3dc25c11
2 changed files with 95 additions and 37 deletions
Show stats Download patch file Download diff file Expand all files Collapse all files

44
src/views/annual-report/2021/annual-report.jsx
View file

@ -826,12 +826,16 @@ class AnnualReport extends React.Component {
</div> </div>
</div> </div>
</div> </div>
{/* 4/25 */}
<div className="inner"> <div className="inner">
<MediaQuery minWidth={frameless.tabletPortrait}>
<div className="content flex-content">
<div className="text">
<div className="spotlight bubble SEC"> <div className="spotlight bubble SEC">
<FormattedMessage id="annualReport.2021.spotlightStory" /> <FormattedMessage id="annualReport.2021.spotlightStory" />
</div> </div>
<div className="content flex-content">
<div className="text">
<h4> <h4>
<FormattedMessage id="annualReport.2021.SECSpotlightTitle" /> <FormattedMessage id="annualReport.2021.SECSpotlightTitle" />
</h4> </h4>
@ -854,6 +858,42 @@ class AnnualReport extends React.Component {
/> />
</div> </div>
</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"> <div className="content">
<p className="pull-quote blue"> <p className="pull-quote blue">
<FormattedMessage id="annualReport.2021.SECPullQuote" /> <FormattedMessage id="annualReport.2021.SECPullQuote" />

40
src/views/annual-report/2021/annual-report.scss
View file

@ -275,6 +275,8 @@ a, a:link, a:visited, a:active{
.pull-quote{ .pull-quote{
font-size: 1.5rem; font-size: 1.5rem;
line-height: 2.5rem; line-height: 2.5rem;
text-align: left;
margin-bottom: 10px;
@media #{$small}{ @media #{$small}{
font-size: 24px; font-size: 24px;
} }
@ -326,6 +328,7 @@ a, a:link, a:visited, a:active{
float: right; float: right;
text-align: right; text-align: right;
width: 100%; width: 100%;
margin-top: 0px;
&.right{ &.right{
text-align: right; text-align: right;
} }
@ -1202,7 +1205,7 @@ img.comment-viz{
} }
} }
} }
@media #{$intermediate} { @media #{$medium} {
flex-direction: column; flex-direction: column;
} }
.text{ .text{
@ -1313,19 +1316,22 @@ img.comment-viz{
margin-left: 0px; margin-left: 0px;
color: $ui-white; color: $ui-white;
font-weight: bold; font-weight: bold;
@media #{$intermediate-and-smaller} { @media #{$medium-and-smaller} {
margin-left: auto; margin-left: auto;
} }
&.spotlight{ &.spotlight{
// margin-left: 50px; // margin-left: 50px;
@media #{$intermediate-and-smaller}{ @media #{$medium-and-smaller}{
margin: auto; 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{ &.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{ .about-breaker{
text-align: center; text-align: center;
margin: 35px auto; margin: 35px auto;
@ -1391,7 +1407,7 @@ img.comment-viz{
} }
} }
@media #{$big} { @media #{$big} {
max-width: 940px; max-width: 840px;
padding: 72px 0; padding: 72px 0;
} }
@ -1400,7 +1416,7 @@ img.comment-viz{
} }
@media #{$intermediate} { @media #{$intermediate} {
max-width: 620px; width: calc(100% - 30px);
} }
@media #{$medium} { @media #{$medium} {
@ -1434,7 +1450,7 @@ img.comment-viz{
max-width: 940px; max-width: 940px;
width: 100%; width: 100%;
text-align: left; text-align: left;
@media #{$intermediate-and-smaller} { @media #{$medium-and-smaller} {
flex-direction: column; flex-direction: column;
align-items: center; align-items: center;
justify-content: center; justify-content: center;
@ -1473,7 +1489,9 @@ img.comment-viz{
} }
@media #{$intermediate} { @media #{$intermediate} {
max-width: 620px; .text{
max-width: 380px;
}
} }
} }
} }