scratchfoundation/scratch-www
1
0
Fork 0
mirror of https://github.com/scratchfoundation/scratch-www.git synced 2024-11-23 15:47:53 -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

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

@ -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" />

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

@ -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;
}
}
}
}