mirror of
https://github.com/scratchfoundation/scratch-www.git
synced 2025-02-17 08:31:23 -05:00
Finalizing donate and milestones sections
This commit is contained in:
Karishma Chadha
parent
2ca47dffae
commit
cbab000486
3 changed files with 228 additions and 74 deletions
|
|
@ -254,22 +254,6 @@ class AnnualReport extends React.Component {
|
|||
{subnav}
|
||||
</MediaQuery>
|
||||
</div>
|
||||
<div className="banner-wrapper">
|
||||
<TitleBanner className="masthead masthead">
|
||||
<div className="title-banner-p">
|
||||
<img src="/images/ideas/masthead-illustration.svg" />
|
||||
<h1 className="title-banner-h1">
|
||||
<FormattedMessage id="ideas.headerMessage" />
|
||||
</h1>
|
||||
<a href="/projects/editor/?tutorial=all">
|
||||
<Button className="ideas-button">
|
||||
<img src="/images/ideas/bulb-icon.svg" />
|
||||
<FormattedMessage id="ideas.headerButtonMessage" />
|
||||
</Button>
|
||||
</a>
|
||||
</div>
|
||||
</TitleBanner>
|
||||
</div>
|
||||
<div
|
||||
className="mission section"
|
||||
id="mission"
|
||||
|
|
@ -285,18 +269,21 @@ class AnnualReport extends React.Component {
|
|||
>
|
||||
<div className="inner">
|
||||
<div className="milestones-wrapper">
|
||||
<div className="milestone-boxes">
|
||||
<div className="milestones-column left">
|
||||
<h2>
|
||||
<FormattedMessage id="annualReport.milestonesTitle" />
|
||||
</h2>
|
||||
<p>
|
||||
<p className="milestones-description">
|
||||
<FormattedMessage id="annualReport.milestonesDescription" />
|
||||
</p>
|
||||
<MediaQuery minWidth={frameless.tabletPortrait}>
|
||||
<img src="/images/annual-report/milestones/timeline1.svg" />
|
||||
<MediaQuery minWidth={frameless.desktop}>
|
||||
<img
|
||||
className="single-image"
|
||||
src="/images/annual-report/milestones/timeline1.svg"
|
||||
/>
|
||||
</MediaQuery>
|
||||
</div>
|
||||
<div className="milestone-boxes">
|
||||
<div className="milestones-column right">
|
||||
<div className="milestone-box first">
|
||||
<h4>
|
||||
2003
|
||||
|
|
@ -328,11 +315,11 @@ class AnnualReport extends React.Component {
|
|||
</div>
|
||||
</div>
|
||||
</div>
|
||||
<MediaQuery minWidth={frameless.tabletPortrait}>
|
||||
<MediaQuery minWidth={frameless.desktop}>
|
||||
<img src="/images/annual-report/milestones/timeline_line_right.svg" />
|
||||
</MediaQuery>
|
||||
<div className="milestones-wrapper">
|
||||
<div className="milestone-boxes">
|
||||
<div className="milestones-column left">
|
||||
<div className="milestone-box">
|
||||
<h4>
|
||||
2008
|
||||
|
|
@ -372,12 +359,110 @@ class AnnualReport extends React.Component {
|
|||
</p>
|
||||
</div>
|
||||
</div>
|
||||
<MediaQuery
|
||||
className="milestone-boxes"
|
||||
minWidth={frameless.tabletPortrait}
|
||||
>
|
||||
<img src="/images/annual-report/milestones/timeline2.svg" />
|
||||
</MediaQuery>
|
||||
<div className="milestones-column right">
|
||||
<MediaQuery minWidth={frameless.desktop}>
|
||||
<img
|
||||
className="single-image"
|
||||
src="/images/annual-report/milestones/timeline2.svg"
|
||||
/>
|
||||
</MediaQuery>
|
||||
</div>
|
||||
</div>
|
||||
<MediaQuery minWidth={frameless.desktop}>
|
||||
<img src="/images/annual-report/milestones/timeline_line_left.svg" />
|
||||
</MediaQuery>
|
||||
<div className="milestones-wrapper">
|
||||
<div className="milestones-column left">
|
||||
<MediaQuery minWidth={frameless.desktop}>
|
||||
<img
|
||||
className="single-image"
|
||||
src="/images/annual-report/milestones/timeline3.svg"
|
||||
/>
|
||||
</MediaQuery>
|
||||
</div>
|
||||
<div className="milestones-column right">
|
||||
<div className="milestone-box">
|
||||
<h4>
|
||||
2013
|
||||
{/* TODO should this be localized? */}
|
||||
</h4>
|
||||
<p>
|
||||
<FormattedMessage id="annualReport.milestones2013MessageFoundation" />
|
||||
</p>
|
||||
</div>
|
||||
<div className="milestone-box">
|
||||
<h4>
|
||||
2013
|
||||
{/* TODO should this be localized? */}
|
||||
</h4>
|
||||
<p>
|
||||
<FormattedMessage id="annualReport.milestones2013MessageScratch2" />
|
||||
</p>
|
||||
<img src="/images/annual-report/milestones/2013_Scratch2.png" />
|
||||
</div>
|
||||
<div className="milestone-box">
|
||||
<h4>
|
||||
2014
|
||||
{/* TODO should this be localized? */}
|
||||
</h4>
|
||||
<p>
|
||||
<FormattedMessage id="annualReport.milestones2014Message" />
|
||||
</p>
|
||||
<img src="/images/annual-report/milestones/2014_ScratchJr.jpg" />
|
||||
</div>
|
||||
<div className="milestone-box">
|
||||
<h4>
|
||||
2016
|
||||
{/* TODO should this be localized? */}
|
||||
</h4>
|
||||
<p>
|
||||
<FormattedMessage id="annualReport.milestones2016Message" />
|
||||
</p>
|
||||
</div>
|
||||
</div>
|
||||
</div>
|
||||
<MediaQuery minWidth={frameless.desktop}>
|
||||
<img src="/images/annual-report/milestones/timeline_line_right.svg" />
|
||||
</MediaQuery>
|
||||
<div className="milestones-wrapper">
|
||||
<div className="milestones-column left">
|
||||
<div className="milestone-box">
|
||||
<h4>
|
||||
2017
|
||||
{/* TODO should this be localized? */}
|
||||
</h4>
|
||||
<p>
|
||||
<FormattedMessage id="annualReport.milestones2017Message" />
|
||||
</p>
|
||||
</div>
|
||||
<div className="milestone-box">
|
||||
<h4>
|
||||
2019
|
||||
{/* TODO should this be localized? */}
|
||||
</h4>
|
||||
<p>
|
||||
<FormattedMessage id="annualReport.milestones2019MessageScratch3" />
|
||||
</p>
|
||||
<img src="/images/annual-report/milestones/2019_Scratch3.jpg" />
|
||||
</div>
|
||||
<div className="milestone-box">
|
||||
<h4>
|
||||
2019
|
||||
{/* TODO should this be localized? */}
|
||||
</h4>
|
||||
<p>
|
||||
<FormattedMessage id="annualReport.milestones2019MessageMove" />
|
||||
</p>
|
||||
</div>
|
||||
</div>
|
||||
<div className="milestones-column right">
|
||||
<MediaQuery minWidth={frameless.desktop}>
|
||||
<img
|
||||
className="single-image"
|
||||
src="/images/annual-report/milestones/timeline4.svg"
|
||||
/>
|
||||
</MediaQuery>
|
||||
</div>
|
||||
</div>
|
||||
</div>
|
||||
</div>
|
||||
|
|
@ -859,10 +944,10 @@ class AnnualReport extends React.Component {
|
|||
<img src="/images/annual-report/donate-illustration.svg" />
|
||||
</MediaQuery>
|
||||
<div className="donate-content">
|
||||
<h2 className="donate-h2">
|
||||
<h2>
|
||||
<FormattedMessage id="annualReport.donateTitle" />
|
||||
</h2>
|
||||
<p className="donate-p">
|
||||
<p>
|
||||
<FormattedMessage id="annualReport.donateMessage" />
|
||||
</p>
|
||||
<a href="https://secure.donationpay.org/scratchfoundation/">
|
||||
|
|
|
|||
|
|
@ -19,6 +19,7 @@ h2 {
|
|||
|
||||
h3 {
|
||||
font-size: 2rem;
|
||||
line-height: 2.5rem;
|
||||
}
|
||||
|
||||
h4 {
|
||||
|
|
@ -32,10 +33,23 @@ h5 {
|
|||
margin: .5rem 0;
|
||||
}
|
||||
|
||||
p {
|
||||
font-size: 1rem;
|
||||
line-height: 2rem;
|
||||
}
|
||||
|
||||
@media #{$small} {
|
||||
.inner {
|
||||
width: $cols4;
|
||||
}
|
||||
|
||||
h2 {
|
||||
font-size: 2rem;
|
||||
}
|
||||
|
||||
h3 {
|
||||
font-size: 1.75rem;
|
||||
}
|
||||
}
|
||||
|
||||
.section {
|
||||
|
|
@ -166,7 +180,7 @@ h5 {
|
|||
background-color: $ui-blue-10percent;
|
||||
|
||||
.inner {
|
||||
width: 940px;
|
||||
max-width: 940px;
|
||||
display: flex;
|
||||
flex-direction: column;
|
||||
align-items: center;
|
||||
|
|
@ -182,23 +196,54 @@ h5 {
|
|||
|
||||
.milestones-wrapper {
|
||||
display: flex;
|
||||
}
|
||||
|
||||
.milestones-intro {
|
||||
//margin-right: 88px;
|
||||
display: flex;
|
||||
flex-direction: column;
|
||||
|
||||
img {
|
||||
flex-grow: 2;
|
||||
.left {
|
||||
margin-left: auto;
|
||||
}
|
||||
|
||||
.right {
|
||||
margin-right: auto
|
||||
}
|
||||
|
||||
@media #{$intermediate-and-smaller} {
|
||||
flex-direction: column;
|
||||
|
||||
.left, .right {
|
||||
margin: auto;
|
||||
}
|
||||
}
|
||||
}
|
||||
|
||||
.milestone-boxes {
|
||||
margin: 0 44px;
|
||||
.milestones-column {
|
||||
margin: 0 10px;
|
||||
display: flex;
|
||||
flex-direction: column;
|
||||
justify-content: flex-start;
|
||||
|
||||
width: 460px;
|
||||
|
||||
.milestones-description {
|
||||
width: 360px;
|
||||
}
|
||||
|
||||
.single-image {
|
||||
flex-grow: 3;
|
||||
align-self: center;
|
||||
justify-self: center;
|
||||
max-width: 360px;
|
||||
}
|
||||
|
||||
@media #{$intermediate-and-smaller} {
|
||||
align-items: center;
|
||||
|
||||
.milestones-description{
|
||||
width: 100%
|
||||
}
|
||||
}
|
||||
|
||||
@media #{$small} {
|
||||
width: 300px;
|
||||
}
|
||||
}
|
||||
|
||||
.milestone-box {
|
||||
|
|
@ -211,15 +256,30 @@ h5 {
|
|||
}
|
||||
|
||||
img {
|
||||
width: 100%;
|
||||
height: 240px;
|
||||
border-radius: 8px;
|
||||
|
||||
object-fit: cover;
|
||||
// object-position: 50% 5%;
|
||||
}
|
||||
|
||||
width: 460px;
|
||||
background-color: $ui-white;
|
||||
border-radius: 8px;
|
||||
padding: 16px;
|
||||
margin-bottom: 12px;
|
||||
|
||||
@media #{$intermediate-and-smaller} {
|
||||
h4, p {
|
||||
text-align: left;
|
||||
}
|
||||
}
|
||||
|
||||
@media #{$small} {
|
||||
img {
|
||||
height: 160px;
|
||||
}
|
||||
}
|
||||
}
|
||||
|
||||
}
|
||||
|
|
@ -368,13 +428,13 @@ h5 {
|
|||
width: 100%;
|
||||
}
|
||||
|
||||
h2 {
|
||||
font-size: 2rem;
|
||||
}
|
||||
// h2 {
|
||||
// font-size: 2rem;
|
||||
// }
|
||||
|
||||
h3 {
|
||||
font-size: 1.75rem;
|
||||
}
|
||||
// h3 {
|
||||
// font-size: 1.75rem;
|
||||
// }
|
||||
|
||||
h2, h3 {
|
||||
text-align: center;
|
||||
|
|
@ -384,7 +444,7 @@ h5 {
|
|||
flex-direction: column;
|
||||
|
||||
.key {
|
||||
margin-bottom: 4px;
|
||||
margin-bottom: 4px;
|
||||
}
|
||||
}
|
||||
}
|
||||
|
|
@ -543,7 +603,6 @@ h5 {
|
|||
}
|
||||
|
||||
.donate-section {
|
||||
// height: 500px;
|
||||
background-color: #0EBD8C;
|
||||
|
||||
.donate-info {
|
||||
|
|
@ -551,6 +610,18 @@ h5 {
|
|||
align-items: flex-start;
|
||||
padding: 84px 0px;
|
||||
|
||||
img {
|
||||
width: 300px;
|
||||
height: 300px;
|
||||
}
|
||||
|
||||
@media #{$intermediate} {
|
||||
img {
|
||||
width: 220px;
|
||||
height: 220px;
|
||||
}
|
||||
}
|
||||
|
||||
@media #{$medium-and-smaller} {
|
||||
align-items: center;
|
||||
}
|
||||
|
|
@ -559,35 +630,26 @@ h5 {
|
|||
.donate-content {
|
||||
margin-left: 20px;
|
||||
|
||||
img {
|
||||
width: 300px;
|
||||
height: 300px;
|
||||
}
|
||||
|
||||
h2 {
|
||||
height: 62px;
|
||||
width: 460px;
|
||||
h2, p {
|
||||
color: $ui-white;
|
||||
font-family: "Helvetica Neue";
|
||||
font-size: 52px;
|
||||
font-weight: bold;
|
||||
letter-spacing: 0;
|
||||
line-height: 64px;
|
||||
}
|
||||
|
||||
p {
|
||||
height: 160px;
|
||||
width: 460px;
|
||||
color: #FFFFFF;
|
||||
font-family: "Helvetica Neue";
|
||||
font-size: 20px;
|
||||
letter-spacing: 0;
|
||||
line-height: 32px;
|
||||
width: 460px;
|
||||
|
||||
@media #{$intermediate} {
|
||||
text-align: left;
|
||||
}
|
||||
|
||||
@media #{$medium-and-smaller} {
|
||||
margin-left: 0px;
|
||||
text-align: center;
|
||||
width: 75%;
|
||||
}
|
||||
|
||||
|
||||
}
|
||||
|
||||
.donate-button {
|
||||
// margin-right: .75rem;
|
||||
background-color: $ui-white;
|
||||
color: $ui-blue;
|
||||
height: 66px;
|
||||
|
|
@ -602,7 +664,7 @@ h5 {
|
|||
letter-spacing: 0;
|
||||
line-height: 29px;
|
||||
|
||||
a { // do we need this?
|
||||
a {
|
||||
color: $ui-blue;
|
||||
}
|
||||
|
||||
|
|
|
|||
|
|
@ -71,6 +71,13 @@
|
|||
"annualReport.milestones2009Message1.4": "Released Scratch 1.4, translated into more than 40 languages",
|
||||
"annualReport.milestones2009MessageScratchDay": "Hosted first Scratch Day event for children and families",
|
||||
"annualReport.milestones2010Message": "Scratch online community reaches 1 million members",
|
||||
"annualReport.milestones2013MessageFoundation": "Established Code-to-Learn Foundation (later renamed Scratch Foundation)",
|
||||
"annualReport.milestones2013MessageScratch2": "Launch of Scratch 2.0, providing new opportunities for collaboration",
|
||||
"annualReport.milestones2014Message": "Launch of ScratchJr for younger children, ages 5 to 7",
|
||||
"annualReport.milestones2016Message": "Scratch online community reaches 10 million members",
|
||||
"annualReport.milestones2017Message": "Scratch Day grows to 1,100 events in 60 countries",
|
||||
"annualReport.milestones2019MessageScratch3": "Launch of Scratch 3.0, expanding what kids can create with code",
|
||||
"annualReport.milestones2019MessageMove": "Scratch Team moves from MIT into Scratch Foundation",
|
||||
|
||||
|
||||
"annualReport.financialsTitle": "Financials - 2019",
|
||||
|
|
|
|||
Loading…
Reference in a new issue