scratchfoundation/scratch-www
1
0
Fork 0
mirror of https://github.com/scratchfoundation/scratch-www.git synced 2025-03-31 15:21:34 -04:00
Code Issues Projects Releases Packages Wiki Activity Actions

add pillars graphics

Browse source
This commit is contained in:
seotts 2020-10-15 15:25:43 -04:00 • committed by Karishma Chadha
parent d113dda808
commit f83df24519
4 changed files with 64 additions and 51 deletions
src/views/annual-report
annual-report.jsxannual-report.scss
static/images/annual-report/initiatives
Pillars-Desktop.svgPillars-Mobile.svg

35
src/views/annual-report/annual-report.jsx
View file

@ -816,35 +816,12 @@ class AnnualReport extends React.Component {
<h2>
<FormattedMessage id="annualReport.initiativesTitle" />
</h2>
<div className="initiatives-pillars">
<div className="initiatives-pillar">
<img src="/images/annual-report/ScratchJr-Logo.svg" />
<h3>
<FormattedMessage id="annualReport.toolsTitle" />
</h3>
<p>
<FormattedMessage id="annualReport.toolsIntro" />
</p>
</div>
<div className="initiatives-pillar">
<img src="/images/annual-report/ScratchJr-Logo.svg" />
<h3>
<FormattedMessage id="annualReport.communityTitle" />
</h3>
<p>
<FormattedMessage id="annualReport.communityIntro" />
</p>
</div>
<div className="initiatives-pillar">
<img src="/images/annual-report/ScratchJr-Logo.svg" />
<h3>
<FormattedMessage id="annualReport.schoolsTitle" />
</h3>
<p>
<FormattedMessage id="annualReport.schoolsIntro" />
</p>
</div>
</div>
<MediaQuery minWidth={frameless.tabletPortrait}>
<img src="/images/annual-report/initiatives/Pillars-Desktop.svg" />
</MediaQuery>
<MediaQuery maxWidth={frameless.tabletPortrait - 1}>
<img src="/images/annual-report/initiatives/Pillars-Mobile.svg" />
</MediaQuery>
</div>
</div>
<div className="initiatives-tools">

24
src/views/annual-report/annual-report.scss
View file

@ -611,28 +611,8 @@ p {
padding: 88px 0;
}
.initiatives-pillars {
display: flex;
.initiatives-pillar {
display: flex;
flex-direction: column;
justify-content: space-between;
width: 272px;
margin: 0 40px;
img {
width: 140px;
height: 140px;
align-self: center;
}
}
@media #{$intermediate-and-smaller} {
margin: 40px 0;
flex-direction: column;
}
h2 {
margin-bottom: 72px;
}
}

28
static/images/annual-report/initiatives/Pillars-Desktop.svg Normal file
View file

File diff suppressed because one or more lines are too long
Side by side

After

(image error) Size: 50 KiB

28
static/images/annual-report/initiatives/Pillars-Mobile.svg Normal file
View file

File diff suppressed because one or more lines are too long
Side by side

After

(image error) Size: 62 KiB