themes blobs

This commit is contained in:
caseymm 2021-10-01 14:28:24 -07:00
parent b3b3ab4126
commit 8f73470276
8 changed files with 156 additions and 46 deletions

View file

@ -308,7 +308,7 @@ class AnnualReport extends React.Component {
<FormattedMessage id="annualReport.mastheadTitle" />
</h1>
</div>
<img src="/images/annual-report/2020/founders-message/placeholder_Masthead_Illustration.svg" />
<img src="/images/annual-report/2020/founders-message/Masthead_Illustration.svg" />
</FlexRow>
<MediaQuery minWidth={frameless.desktop}>
<img
@ -320,7 +320,7 @@ class AnnualReport extends React.Component {
<MediaQuery maxWidth={frameless.desktop - 1}>
{/* Show the wave icon inside this div in smaller screens */}
<div className="wave-icon-and-title">
<img src="/images/annual-report/message/wave-icon.svg" />
<img src="/images/annual-report/2020/founders-message/Wave_Icon.svg" />
<h2>
<FormattedMessage id="annualReport.foundersMessageTitle" />
</h2>
@ -663,7 +663,7 @@ class AnnualReport extends React.Component {
<FormattedMessage id="annualReport.reachTranslationBlurb" />
</p>
</div>
<img src="/images/annual-report/reach/translated-illustration.svg" />
<img src="/images/annual-report/2020/data/translated-illustration.svg" />
</div>
</div>
<MediaQuery minWidth={frameless.mobile}>
@ -675,7 +675,7 @@ class AnnualReport extends React.Component {
<div className="reach-scratch-jr">
<div className="inner">
<div className="scratch-jr-intro">
<img src="/images/annual-report/reach/ScratchJr-Logo.svg" />
<img src="/images/annual-report/2020/data/ScratchJr_Logo.svg" />
<p>
<FormattedMessage id="annualReport.reachScratchJrBlurb" />
</p>
@ -719,24 +719,24 @@ class AnnualReport extends React.Component {
</p>
<div className="initiatives-pillars">
<div className="three-pillars">
<div className="pillar-splash connectivity">
<div className="pillar-splash">
<h4>
<FormattedMessage id="annualReport.connectivityTitle" />
</h4>
</div>
<div className="pillar-splash adaptation">
<div className="pillar-splash">
<h4>
<FormattedMessage id="annualReport.adaptationTitle" />
</h4>
</div>
<div className="pillar-splash community">
<div className="pillar-splash">
<h4>
<FormattedMessage id="annualReport.communityTitle" />
</h4>
</div>
</div>
<div className="equity-and-global">
<div className="pillar-splash equity">
<div className="pillar-splash">
<h4>
<FormattedMessage id="annualReport.equity" />
</h4>
@ -1385,9 +1385,9 @@ class AnnualReport extends React.Component {
<div className="initiatives-schools">
<div className="initiatives-subsection-header schools">
<div className="inner">
<h2>
{/* <h2>
<FormattedMessage id="annualReport.schoolsTitle" />
</h2>
</h2> */}
<p>
<FormattedMessage id="annualReport.schoolsIntro" />
</p>

View file

@ -100,7 +100,7 @@ p {
}
img {
max-width: 760px;
max-width: 440px;
}
}
@ -192,6 +192,10 @@ p {
@media #{$medium-and-smaller} {
flex-direction: column;
img {
max-width: 275px;
margin: auto;
}
}
@media #{$medium} {
@ -982,6 +986,9 @@ img.comment-viz{
flex-direction: column;
align-items: center;
width: 100%;
background-image: url("/images/annual-report/2020/themes_blobs.svg");
background-size: contain;
background-repeat: no-repeat;
h4 {
color: $ui-white;
@ -992,32 +999,7 @@ img.comment-viz{
display: flex;
justify-content: center;
align-items: center;
background-size: 100% 100%;
background-repeat: no-repeat;
background-position: center;
text-align: center;
&.connectivity {
background-image: url("/images/annual-report/initiatives/Creative Tools-Splash.svg");
}
&.adaptation {
background-image: url("/images/annual-report/initiatives/Community-Splash.svg");
}
&.community {
background-image: url("/images/annual-report/initiatives/Schools-Splash.svg");
}
&.equity {
background-image: url("/images/annual-report/initiatives/Equity-Splash.svg");
}
&.global {
background-image: url("/images/annual-report/initiatives/Global-Splash.svg");
}
}
.three-pillars {
@ -1031,7 +1013,13 @@ img.comment-viz{
width: 100%;
.pillar-splash {
margin: 24px 0;
margin: 12px 0;
h4{
color: black;
}
@media #{$intermediate} {
margin-top: 16px;
}
}
}
}
@ -1084,7 +1072,7 @@ img.comment-viz{
.three-pillars {
.pillar-splash {
width: 136px;
height: 148px;
height: 105px;
&.community {
width: 164px;
@ -1094,7 +1082,7 @@ img.comment-viz{
.equity-and-global {
.pillar-splash {
height: 44px;
height: 14px;
}
}
}
@ -1105,14 +1093,14 @@ img.comment-viz{
}
h4 {
font-size: 1rem;
font-size: .8rem;
line-height: 1rem;
}
.three-pillars {
.pillar-splash {
width: 90px;
height: 96px;
height: 64px;
&.community {
width: 108px;
@ -1122,7 +1110,7 @@ img.comment-viz{
.equity-and-global {
.pillar-splash {
height: 44px;
height: 10px;
}
}
}

View file

Before

Width:  |  Height:  |  Size: 20 KiB

After

Width:  |  Height:  |  Size: 20 KiB

View file

Before

Width:  |  Height:  |  Size: 108 KiB

After

Width:  |  Height:  |  Size: 108 KiB

File diff suppressed because one or more lines are too long

After

Width:  |  Height:  |  Size: 133 KiB

File diff suppressed because one or more lines are too long

After

Width:  |  Height:  |  Size: 41 KiB

View file

Before

Width:  |  Height:  |  Size: 1.5 KiB

After

Width:  |  Height:  |  Size: 1.5 KiB

File diff suppressed because one or more lines are too long

Before

Width:  |  Height:  |  Size: 11 KiB