scratchfoundation/scratch-www
1
0
Fork 0
mirror of https://github.com/scratchfoundation/scratch-www.git synced 2025-02-17 00:21:20 -05:00
Code Issues Projects Releases Packages Wiki Activity Actions 2

Fix code review comments. Got rid of a bunch of uncessary stuff.

Browse source
This commit is contained in:
picklesrus 2018-11-13 14:14:24 -05:00
parent db2453bc69
commit 4a66cc2e59
2 changed files with 29 additions and 61 deletions
Show stats Download patch file Download diff file Expand all files Collapse all files

15
src/views/credits/credits.jsx
View file

@ -19,15 +19,16 @@ const Credits = () => (
</TitleBanner> </TitleBanner>
<div className="content"> <div className="content">
<div className="people"> <div className="people">
<div className="midHeader"> <div className="mid-header">
<h2>MIT Scratch Team</h2> <h2>MIT Scratch Team</h2>
<p> <p>
<FormattedMessage id="credits.developers" /> <FormattedMessage id="credits.developers" />
</p> </p>
</div> </div>
<ul> <ul className="avatar-grid">
{People.map((person, index) => ( {People.map((person, index) => (
<li <li
className="avatar-item"
key={`person-${index}`} key={`person-${index}`}
> >
<div> <div>
@ -38,7 +39,7 @@ const Credits = () => (
/> />
</a> </a>
</div> </div>
<span> <span className="avatar-text">
{person.name} {person.name}
</span> </span>
</li> </li>
@ -46,7 +47,7 @@ const Credits = () => (
</ul> </ul>
</div> </div>
<div className="supporters"> <div className="supporters">
<div className="midHeader"> <div className="mid-header">
<h2> <h2>
<FormattedMessage id="credits.currentSponsors" /> <FormattedMessage id="credits.currentSponsors" />
</h2> </h2>
@ -54,7 +55,7 @@ const Credits = () => (
<FormattedMessage id="credits.currentFinancialSupport" /> <FormattedMessage id="credits.currentFinancialSupport" />
</p> </p>
</div> </div>
<div className="logoGrid"> <div className="logo-grid">
{Supporters.map((supporter, index) => ( {Supporters.map((supporter, index) => (
<span <span
className="logo" className="logo"
@ -68,7 +69,7 @@ const Credits = () => (
width={supporter.width} width={supporter.width}
/> />
) : ) :
<div className="textLogo"> <div className="text-logo">
{supporter.textLogo} {supporter.textLogo}
</div> </div>
} }
@ -77,7 +78,7 @@ const Credits = () => (
))} ))}
</div> </div>
</div> </div>
<div className="acknowledgeContent"> <div className="acknowledge-content">
<h2> <h2>
<FormattedMessage id="credits.translationsTitle" /> <FormattedMessage id="credits.translationsTitle" />
</h2> </h2>

75
src/views/credits/credits.scss
View file

@ -2,10 +2,11 @@
#view { #view {
padding: 0; padding: 0;
text-align: left;
} }
.credits { .credits {
ul { .avatar-grid {
display: flex; display: flex;
margin: 0 auto; margin: 0 auto;
padding: 64px 0; padding: 64px 0;
@ -20,7 +21,7 @@
padding-top: 40px; padding-top: 40px;
} }
li { .avatar-item {
display: inline-block; display: inline-block;
margin: 0; margin: 0;
padding-bottom: 32px; padding-bottom: 32px;
@ -36,7 +37,7 @@
height: 80px; height: 80px;
} }
span { .avatar-text {
display: inline-block; display: inline-block;
width: 144px; width: 144px;
font-size: .875rem; font-size: .875rem;
@ -45,7 +46,7 @@
} }
} }
.acknowledgeContent { .acknowledge-content {
margin: 0 176px; margin: 0 176px;
padding: 2.5rem 0 5.75rem 0; padding: 2.5rem 0 5.75rem 0;
max-width: 520px; max-width: 520px;
@ -58,35 +59,35 @@
h2 { h2 {
padding: 3rem 0 1.5rem; padding: 3rem 0 1.5rem;
line-height: normal; line-height: 1.2em;
font-size: 2rem; font-size: 2rem;
} }
} }
.textLogo { .text-logo {
max-width: 140px; max-width: 140px;
text-align: center; text-align: center;
font-size: 16px; font-size: 16px;
font-weight: bold; font-weight: bold;
} }
.midHeader { .mid-header {
display: flex; display: flex;
margin: 0 88px; margin: 0 88px;
flex-direction: column; flex-direction: column;
align-items: center; align-items: center;
h2 { h2 {
line-height: 1.5rem; line-height: 1.2em;
} }
} }
.logoGrid { .logo-grid {
display: flex; display: flex;
margin: 0 auto; margin: 0 auto;
max-width: 864px; max-width: 864px;
flex-wrap: wrap; flex-wrap: wrap;
justify-content: space-between; justify-content: space-around;
align-items: center; align-items: center;
} }
@ -114,63 +115,32 @@
} }
@media only screen and (min-width: 1041px) and (max-width: 1280px) {
.credits {
.logoGrid {
max-width: 864px;
}
}
}
@media only screen and (min-width: 769px ) and (max-width: 1040px) {
.credits {
text-align: left;
.logoGrid {
max-width: 680px;
}
}
}
@media only screen and (min-width: 477px) and (max-width: 768px) { @media only screen and (min-width: 477px) and (max-width: 768px) {
.credits { .credits {
text-align: left; .acknowledge-content {
.logoGrid {
max-width: 434px;
}
.acknowledgeContent {
margin: 0 88px; margin: 0 88px;
} }
} }
} }
@media only screen and (min-width: 365px) and (max-width: 476px) { @media only screen and (min-width: 365px) and (max-width: 476px) {
.credits { .credits {
text-align: left; .avatar-item {
li {
padding-bottom: 16px; padding-bottom: 16px;
span { .avatar-text {
width: 112px; width: 112px;
} }
} }
.logoGrid { .acknowledge-content,
max-width: 444px; .mid-header {
}
.acknowledgeContent,
.midHeader {
margin: 0 44px; margin: 0 44px;
} }
} }
} }
@media only screen and (max-width: 364px) { @media only screen and (max-width: 364px) {
.credits { .credits {
text-align: left; .avatar-item {
font-size: .6rem;
li {
padding-bottom: 16px; padding-bottom: 16px;
img { img {
@ -178,19 +148,16 @@
height: 56px; height: 56px;
} }
span { .avatar-text {
width: 96px; width: 96px;
} }
} }
.logoGrid { .logo-grid {
display: flex;
margin: 0 auto;
align-items: center;
flex-direction: column; flex-direction: column;
} }
.acknowledgeContent { .acknowledge-content {
margin: 0 12px; margin: 0 12px;
} }
@ -198,7 +165,7 @@
padding: 36px; padding: 36px;
} }
ul { .avatar-grid {
margin: 0 12px; margin: 0 12px;
} }
} }