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

localizable pillars

Browse source
This commit is contained in:
seotts 2020-10-19 13:55:45 -04:00 committed by Karishma Chadha
parent 2f119961ec
commit 88dfdc32ce
8 changed files with 208 additions and 6 deletions
Show stats Download patch file Download diff file Expand all files Collapse all files

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

@ -817,12 +817,43 @@ class AnnualReport extends React.Component {
<h2>
<FormattedMessage id="annualReport.initiativesTitle" />
</h2>
<MediaQuery minWidth={frameless.tabletPortrait}>
{/**<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>
</MediaQuery>**/}
<div className="initiatives-pillars">
<div className="three-pillars">
<div className="pillar-splash tools">
<h4>
<FormattedMessage id="annualReport.toolsTitle" />
</h4>
</div>
<div className="pillar-splash community">
<h4>
<FormattedMessage id="annualReport.communityTitle" />
</h4>
</div>
<div className="pillar-splash schools">
<h4>
<FormattedMessage id="annualReport.schoolsTitle" />
</h4>
</div>
</div>
<div className="equity-and-global">
<div className="pillar-splash equity">
<h4>
<FormattedMessage id="annualReport.equity" />
</h4>
</div>
<div className="pillar-splash global">
<h4>
<FormattedMessage id="annualReport.globalStrategy" />
</h4>
</div>
</div>
</div>
</div>
</div>
<div className="initiatives-tools">

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

@ -670,12 +670,140 @@ p {
display: flex;
flex-direction: column;
align-items: center;
max-width: 760px;
padding: 88px 0;
}
h2 {
margin-bottom: 72px;
}
.initiatives-pillars {
display: flex;
flex-direction: column;
align-items: center;
width: 100%;
h4 {
color: $ui-white;
word-break: break-word;
}
.pillar-splash {
display: flex;
justify-content: center;
align-items: center;
background-size: 100% 100%;
background-repeat: no-repeat;
background-position: center;
text-align: center;
&.tools {
background-image: url("/images/annual-report/initiatives/Creative Tools-Splash.svg");
}
&.community {
background-image: url("/images/annual-report/initiatives/Community-Splash.svg");
}
&.schools {
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 {
display: flex;
flex-direction: row;
width: 100%;
justify-content: space-between;
}
.equity-and-global {
width: 100%;
.pillar-splash {
height: 44px;
margin: 24px 0;
}
}
}
@media #{$big} {
.three-pillars {
.pillar-splash {
width: 244px;
height: 160px;
}
}
}
@media #{$intermediate} {
.inner {
max-width: 620px;
}
.three-pillars {
.pillar-splash {
width: 192px;
height: 128px;
}
}
}
@media #{$medium} {
.inner {
max-width: 460px;
}
h4 {
font-size: 1rem;
line-height: 1rem;
}
.three-pillars {
.pillar-splash {
width: 136px;
height: 148px;
&.community {
width: 164px;
}
}
}
}
@media #{$small} {
.inner {
max-width: 300px;
}
h4 {
font-size: 1rem;
line-height: 1rem;
}
.three-pillars {
.pillar-splash {
width: 90px;
height: 96px;
&.community {
width: 108px;
}
}
}
}
}
.initiatives-subsection-header {
@ -683,10 +811,6 @@ p {
padding: 92px 0;
//>.initiatives-community {
// background-color: $ui-blue-dark;
//}
&.tools {
background-color: $ui-aqua;
background-position: 50% 0%;

2
src/views/annual-report/l10n.json
View file

@ -79,6 +79,8 @@
"annualReport.reachDownloads": "Downloads Since Launching in 2014",
"annualReport.initiativesTitle": "Initiatives",
"annualReport.equity": "Equity",
"annualReport.globalStrategy": "Global Strategy",
"annualReport.toolsTitle": "Creative Tools",
"annualReport.toolsIntro": "We are constantly experimenting and innovating with new technologies and new designs — always striving to provide children with new ways to create, collaborate, and learn.",

9
static/images/annual-report/initiatives/Community-Splash.svg Normal file
View file

@ -0,0 +1,9 @@
<?xml version="1.0" encoding="UTF-8"?>
<svg width="244px" height="160px" preserveAspectRatio="none" viewBox="0 0 244 160" version="1.1" xmlns="http://www.w3.org/2000/svg" xmlns:xlink="http://www.w3.org/1999/xlink">
<title>Community-Splash</title>
<g id="Community-Splash" stroke="none" stroke-width="1" fill="none" fill-rule="evenodd">
<g id="Community" fill="#4D97FF">
<path d="M213.214971,137.289887 C249.36084,115.319388 251.209888,62.5415862 231.53169,27.3644855 C211.853491,-7.81261513 23.8595463,-7.81261513 9.81453556,20.1337721 C-4.23047515,48.0801593 -6.14025919,129.811744 23.8595463,149.427235 C53.8593517,169.042727 177.069103,159.260387 213.214971,137.289887 Z" id="Oval-Copy"></path>
</g>
</g>
</svg>
Side by side

After

Width:  |  Height:  |  Size: 754 B

9
static/images/annual-report/initiatives/Creative Tools-Splash.svg Normal file
View file

@ -0,0 +1,9 @@
<?xml version="1.0" encoding="UTF-8"?>
<svg width="244px" height="161px" preserveAspectRatio="none" viewBox="0 0 244 161" version="1.1" xmlns="http://www.w3.org/2000/svg" xmlns:xlink="http://www.w3.org/1999/xlink">
<title>Creative Tools-Splash</title>
<g id="Creative-Tools-Splash" stroke="none" stroke-width="1" fill="none" fill-rule="evenodd">
<g id="Creative-Tools" fill="#0EBD8C">
<path d="M190.425819,156.424293 C257.878027,149.516761 248.499193,72.1866549 232.348664,37.0733683 C216.198136,1.96008178 101.266787,-6.5188663 45.2149524,6.72056962 C-10.8368823,19.9600055 -6.60450973,93.0036005 14.2961744,129.84377 C35.1968585,166.68394 122.973611,163.331825 190.425819,156.424293 Z" id="Oval"></path>
</g>
</g>
</svg>
Side by side

After

Width:  |  Height:  |  Size: 762 B

9
static/images/annual-report/initiatives/Equity-Splash.svg Normal file
View file

@ -0,0 +1,9 @@
<?xml version="1.0" encoding="UTF-8"?>
<svg width="780px" height="64px" preserveAspectRatio="none" viewBox="0 0 780 64" version="1.1" xmlns="http://www.w3.org/2000/svg" xmlns:xlink="http://www.w3.org/1999/xlink">
<title>Equity-Splash</title>
<g id="Equity-Splash" stroke="none" stroke-width="1" fill="none" fill-rule="evenodd">
<g id="Equity" fill="#FFBF00">
<path d="M141.421324,6.04263362 C-101.360648,16.6734875 -11.2643584,64.2139044 257.632387,62.5489097 C526.529935,60.8839151 772.652524,75.7254559 779.892533,37.0539025 C787.24494,-2.21747737 415.785408,-5.97115362 141.421324,6.04263362" id="Fill-1"></path>
</g>
</g>
</svg>
Side by side

After

Width:  |  Height:  |  Size: 672 B

9
static/images/annual-report/initiatives/Global-Splash.svg Normal file
View file

@ -0,0 +1,9 @@
<?xml version="1.0" encoding="UTF-8"?>
<svg width="780px" height="64px" viewBox="0 0 780 64" preserveAspectRatio="none" version="1.1" xmlns="http://www.w3.org/2000/svg" xmlns:xlink="http://www.w3.org/1999/xlink">
<title>Global-Splash</title>
<g id="Global-Splash" stroke="none" stroke-width="1" fill="none" fill-rule="evenodd">
<g id="Global" fill="#FF8C1A">
<path d="M278.812996,0.86399966 C18.7220961,-8.79420006 -124.791978,65.7441825 144.197426,63.9687642 C413.186026,62.1933458 801.722975,58.0060743 779.051065,24.2179213 C753.987481,-13.1350281 553.445883,11.0615509 278.812996,0.86399966" id="Fill-1"></path>
</g>
</g>
</svg>
Side by side

After

Width:  |  Height:  |  Size: 672 B

9
static/images/annual-report/initiatives/Schools-Splash.svg Normal file
View file

@ -0,0 +1,9 @@
<?xml version="1.0" encoding="UTF-8"?>
<svg width="244px" height="160px" preserveAspectRatio="none" viewBox="0 0 244 160" version="1.1" xmlns="http://www.w3.org/2000/svg" xmlns:xlink="http://www.w3.org/1999/xlink">
<title>Schools-Splash</title>
<g id="Schools-Splash" stroke="none" stroke-width="1" fill="none" fill-rule="evenodd">
<g id="Schools" fill="#9966FF">
<path d="M25.8217587,143.470201 C75.7225938,168.227896 202.313585,163.003282 228.288093,142.133948 C254.262602,121.264614 246.455817,18.74306 216.445007,6.55326558 C186.434198,-5.63652879 73.4462649,-0.0161924056 40.7594167,16.7629683 C8.07256853,33.542129 -24.0790765,118.712506 25.8217587,143.470201 Z" id="Oval-Copy-4"></path>
</g>
</g>
</svg>
Side by side

After

Width:  |  Height:  |  Size: 750 B