mirror of
https://github.com/scratchfoundation/scratch-www.git
synced 2024-11-27 09:35:56 -05:00
Make 4Ps more consistent with design sketch for all screen sizes.
This commit is contained in:
Karishma Chadha
parent
8cf04fe705
commit
240fd5e53b
2 changed files with 194 additions and 50 deletions
|
|
@ -409,29 +409,91 @@ class AnnualReport extends React.Component {
|
|||
/>
|
||||
</p>
|
||||
</div>
|
||||
<div className="four-ps-wrapper">
|
||||
<div className="four-ps">
|
||||
<MediaQuery minWidth={frameless.tabletPortrait}>
|
||||
<div className="one-p four-ps-projects">
|
||||
<div className="title-and-description">
|
||||
<h3><FormattedMessage id="annualReport.missionProjectsTitle" /></h3>
|
||||
<p><FormattedMessage id="annualReport.missionProjectsDescription" /></p>
|
||||
</div>
|
||||
<img src="/images/annual-report/mission/Projects Illustration.svg" />
|
||||
</div>
|
||||
</MediaQuery>
|
||||
<MediaQuery
|
||||
className="one-p top"
|
||||
maxWidth={frameless.tabletPortrait - 1}
|
||||
>
|
||||
<div className="title-and-description">
|
||||
<h3><FormattedMessage id="annualReport.missionProjectsTitle" /></h3>
|
||||
<p><FormattedMessage id="annualReport.missionProjectsDescription" /></p>
|
||||
</div>
|
||||
<div className="small-p four-ps-projects">
|
||||
<img src="/images/annual-report/mission/Projects Illustration.svg" />
|
||||
</div>
|
||||
</MediaQuery>
|
||||
<MediaQuery minWidth={frameless.tabletPortrait}>
|
||||
<div className="one-p four-ps-passion">
|
||||
<div className="title-and-description">
|
||||
<h3><FormattedMessage id="annualReport.missionPassionTitle" /></h3>
|
||||
<p><FormattedMessage id="annualReport.missionPassionDescription" /></p>
|
||||
</div>
|
||||
<img src="/images/annual-report/mission/Passion Illustration.svg" />
|
||||
</div>
|
||||
</MediaQuery>
|
||||
<MediaQuery
|
||||
className="one-p"
|
||||
maxWidth={frameless.tabletPortrait - 1}
|
||||
>
|
||||
<div className="title-and-description">
|
||||
<h3><FormattedMessage id="annualReport.missionPassionTitle" /></h3>
|
||||
<p className="no-margin-bottom"><FormattedMessage id="annualReport.missionPassionDescription" /></p>
|
||||
</div>
|
||||
<div className="small-p four-ps-passion">
|
||||
<img src="/images/annual-report/mission/Passion Illustration.svg" />
|
||||
</div>
|
||||
</MediaQuery>
|
||||
<MediaQuery minWidth={frameless.tabletPortrait}>
|
||||
<div className="one-p four-ps-peers">
|
||||
<div className="title-and-description">
|
||||
<h3><FormattedMessage id="annualReport.missionPeersTitle" /></h3>
|
||||
<p><FormattedMessage id="annualReport.missionPeersDescription" /></p>
|
||||
</div>
|
||||
<img src="/images/annual-report/mission/Peers Illustration.svg" />
|
||||
</div>
|
||||
</MediaQuery>
|
||||
<MediaQuery
|
||||
className="one-p"
|
||||
maxWidth={frameless.tabletPortrait - 1}
|
||||
>
|
||||
<div className="title-and-description">
|
||||
<h3><FormattedMessage id="annualReport.missionPeersTitle" /></h3>
|
||||
<p><FormattedMessage id="annualReport.missionPeersDescription" /></p>
|
||||
</div>
|
||||
<div className="small-p four-ps-peers">
|
||||
<img src="/images/annual-report/mission/Peers Illustration.svg" />
|
||||
</div>
|
||||
</MediaQuery>
|
||||
<MediaQuery minWidth={frameless.tabletPortrait}>
|
||||
<div className="one-p four-ps-play">
|
||||
<div className="title-and-description">
|
||||
<h3><FormattedMessage id="annualReport.missionPlayTitle" /></h3>
|
||||
<p><FormattedMessage id="annualReport.missionPlayDescription" /></p>
|
||||
</div>
|
||||
<img src="/images/annual-report/mission/Play Illustration.svg" />
|
||||
</div>
|
||||
</MediaQuery>
|
||||
<MediaQuery
|
||||
className="one-p"
|
||||
maxWidth={frameless.tabletPortrait - 1}
|
||||
>
|
||||
<div className="title-and-description">
|
||||
<h3><FormattedMessage id="annualReport.missionPlayTitle" /></h3>
|
||||
<p><FormattedMessage id="annualReport.missionPlayDescription" /></p>
|
||||
</div>
|
||||
<div className="small-p four-ps-play">
|
||||
<img src="/images/annual-report/mission/Play Illustration.svg" />
|
||||
</div>
|
||||
</MediaQuery>
|
||||
</div>
|
||||
</div>
|
||||
<div
|
||||
|
|
|
|||
|
|
@ -280,25 +280,37 @@ p {
|
|||
text-align: left;
|
||||
}
|
||||
|
||||
|
||||
.inner {
|
||||
padding-top: 124px;
|
||||
width: 620px;
|
||||
}
|
||||
|
||||
.four-ps-wrapper {
|
||||
padding: 124px 0;
|
||||
.four-ps {
|
||||
margin: 56px 0 124px 0;
|
||||
width: 940px;
|
||||
display: flex;
|
||||
flex-direction: row;
|
||||
flex-wrap: wrap;
|
||||
align-items: flex-start;
|
||||
|
||||
@media #{$intermediate} {
|
||||
margin-top: 96px 0 108px 0;
|
||||
}
|
||||
|
||||
@media #{$intermediate-and-smaller} {
|
||||
padding-top: 20px;
|
||||
justify-content: center;
|
||||
}
|
||||
|
||||
@media #{$medium-and-smaller} {
|
||||
margin-top: 76px;
|
||||
align-items: center;
|
||||
}
|
||||
}
|
||||
|
||||
.inner, .four-ps-wrapper {
|
||||
.inner, .four-ps {
|
||||
@media #{$intermediate} {
|
||||
width: 620px;
|
||||
}
|
||||
|
||||
@media #{$medium} {
|
||||
width: 460px;
|
||||
}
|
||||
|
|
@ -307,77 +319,147 @@ p {
|
|||
}
|
||||
}
|
||||
|
||||
.four-ps {
|
||||
height: 940px;
|
||||
display: flex;
|
||||
flex-direction: row;
|
||||
flex-wrap: wrap;
|
||||
align-items: flex-start;
|
||||
@media #{$intermediate-and-smaller} {
|
||||
height: auto;
|
||||
align-items: center;
|
||||
justify-content: center;
|
||||
}
|
||||
}
|
||||
|
||||
.one-p {
|
||||
width: 300px;
|
||||
height: 370px;
|
||||
padding: 20px 80px;
|
||||
background-position: center;
|
||||
width: 460px;
|
||||
height: 493px;
|
||||
background-repeat: no-repeat;
|
||||
background-size: contain;
|
||||
margin-top: 20px;
|
||||
margin-right: 20px;
|
||||
p {
|
||||
font-size: 1.25rem;
|
||||
margin-top: 1.5rem;
|
||||
|
||||
img {
|
||||
width: 460px;
|
||||
}
|
||||
|
||||
&.top {
|
||||
margin-top: 0px;
|
||||
}
|
||||
|
||||
@media #{$intermediate-and-smaller} {
|
||||
padding: 0;
|
||||
width: 300px;
|
||||
background-position: center;
|
||||
|
||||
display: flex;
|
||||
flex-direction: column;
|
||||
align-items: center;
|
||||
justify-content: flex-start;
|
||||
|
||||
img {
|
||||
width: 300px;
|
||||
}
|
||||
}
|
||||
|
||||
@media #{$intermediate} {
|
||||
height: 370px;
|
||||
}
|
||||
|
||||
@media #{$medium-and-smaller} {
|
||||
margin-top: 62px;
|
||||
height: 398px;
|
||||
}
|
||||
|
||||
@media #{$medium} {
|
||||
margin-right: 0;
|
||||
}
|
||||
|
||||
.title-and-description {
|
||||
width: 300px;
|
||||
margin: 16px auto 0 auto;
|
||||
|
||||
p {
|
||||
font-size: 1.25rem;
|
||||
line-height: 2rem;
|
||||
margin-top: 16px;
|
||||
}
|
||||
|
||||
.no-margin-bottom {
|
||||
margin-bottom: 0;
|
||||
}
|
||||
|
||||
@media #{$intermediate-and-smaller} {
|
||||
text-align: center;
|
||||
}
|
||||
|
||||
@media #{$medium-and-smaller} {
|
||||
margin: 0 auto;
|
||||
|
||||
p {
|
||||
font-size: 1rem;
|
||||
line-height: 2rem;
|
||||
margin-bottom: 16px;
|
||||
}
|
||||
}
|
||||
|
||||
@media #{$medium} {
|
||||
p {
|
||||
margin-top: 12px;
|
||||
}
|
||||
}
|
||||
|
||||
@media #{$small} {
|
||||
p {
|
||||
margin-top: 5px;
|
||||
}
|
||||
}
|
||||
}
|
||||
}
|
||||
|
||||
.small-p {
|
||||
background-position: center;
|
||||
background-size: cover;
|
||||
background-repeat: no-repeat;
|
||||
height: 268px;
|
||||
|
||||
img {
|
||||
margin: 34px 0;
|
||||
}
|
||||
}
|
||||
|
||||
.four-ps-projects {
|
||||
background-image: url("/images/annual-report/mission/Projects Splash.svg");
|
||||
}
|
||||
|
||||
.four-ps-peers {
|
||||
background-image: url("/images/annual-report/mission/Peers Splash.svg");
|
||||
}
|
||||
|
||||
.four-ps-passion {
|
||||
background-image: url("/images/annual-report/mission/Passion Splash.svg");
|
||||
margin-top: 72px;
|
||||
margin-top: 112px;
|
||||
margin-right: 0;
|
||||
|
||||
@media #{$intermediate} {
|
||||
margin-top: 72px;
|
||||
margin-top: 96px;
|
||||
}
|
||||
|
||||
@media #{$medium-and-smaller} {
|
||||
margin-top: 20px;
|
||||
margin-top: 0;
|
||||
}
|
||||
}
|
||||
|
||||
.four-ps-peers {
|
||||
background-image: url("/images/annual-report/mission/Peers Splash.svg");
|
||||
margin-top: -80px;
|
||||
|
||||
@media #{$intermediate} {
|
||||
margin-top: -72px;
|
||||
}
|
||||
|
||||
@media #{$medium-and-smaller} {
|
||||
margin-top: 0;
|
||||
}
|
||||
}
|
||||
|
||||
.four-ps-play {
|
||||
background-image: url("/images/annual-report/mission/Play Splash.svg");
|
||||
margin-right: 0;
|
||||
margin-top: 72px;
|
||||
margin-top: 32px;
|
||||
|
||||
@media #{$intermediate} {
|
||||
margin-top: 72px;
|
||||
margin-top: 24px;
|
||||
}
|
||||
|
||||
@media #{$medium-and-smaller} {
|
||||
margin-top: 20px;
|
||||
margin-top: 0;
|
||||
}
|
||||
}
|
||||
|
||||
}
|
||||
|
||||
.milestones-section {
|
||||
|
|
|
|||
Loading…
Reference in a new issue