scratchfoundation/scratch-www
1
0
Fork 0
mirror of https://github.com/scratchfoundation/scratch-www.git synced 2024-12-03 12:27:30 -05:00
Code Issues Projects Releases Packages Wiki Activity Actions 2

More responsiveness updates and replace placeholder image for donate section

Browse source
This commit is contained in:
Karishma Chadha 2020-10-21 23:47:07 -04:00
parent 67ff392776
commit 44a5394667
3 changed files with 146 additions and 94 deletions
Show stats Download patch file Download diff file Expand all files Collapse all files

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

@ -1705,7 +1705,7 @@ class AnnualReport extends React.Component {
/> />
</div> </div>
</MediaQuery> </MediaQuery>
<div className="inner schools-conferences"> <div className="inner schools-conferences bottom">
<div className="schools-conferences-content"> <div className="schools-conferences-content">
<div className="schools-conferences-region"> <div className="schools-conferences-region">
<div className="conference-image-and-caption left"> <div className="conference-image-and-caption left">
@ -1760,7 +1760,7 @@ class AnnualReport extends React.Component {
</p> </p>
</div> </div>
</div> </div>
<div className="schools-conferences-region"> <div className="schools-conferences-region europe">
<div className="conference-title-and-description left"> <div className="conference-title-and-description left">
<h4> <h4>
<FormattedMessage id="annualReport.conferencesEuropeTitle" /> <FormattedMessage id="annualReport.conferencesEuropeTitle" />

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

@ -657,7 +657,6 @@ p {
.scratch-jr-transition-img { .scratch-jr-transition-img {
margin-bottom: -44px; margin-bottom: -44px;
margin-left: 88px; margin-left: 88px;
width: 100%;
display: flex; display: flex;
overflow: hidden; overflow: hidden;
@ -923,10 +922,14 @@ p {
align-items: center; align-items: center;
@media #{$big} { @media #{$big} {
max-width: 1032px; max-width: 940px;
padding: 72px; padding: 72px;
} }
@media #{$medium-and-intermediate} {
padding-top: 72px;
}
@media #{$medium} { @media #{$medium} {
max-width: 460px; max-width: 460px;
} }
@ -945,7 +948,6 @@ p {
align-items: flex-start; align-items: flex-start;
text-align: left; text-align: left;
padding-top: 10px;
padding-bottom: 0px; padding-bottom: 0px;
.subsection-tag { .subsection-tag {
@ -957,7 +959,8 @@ p {
} }
@media #{$small} { @media #{$small} {
align-items: center; padding-top: 32px;
align-items: flex-start;
h2 { h2 {
line-height: 2.5rem; line-height: 2.5rem;
} }
@ -970,6 +973,13 @@ p {
padding-bottom: 0px; padding-bottom: 0px;
position: relative; position: relative;
@media #{$medium} {
max-width: 760px;
padding-top: 10px;
padding-bottom: 10px;
}
.four-pictures { .four-pictures {
display: flex; display: flex;
flex-direction: row; flex-direction: row;
@ -1007,8 +1017,21 @@ p {
left: 60px; left: 60px;
top: 60px; top: 60px;
@media #{$medium-and-smaller} { @media #{$intermediate} {
left: -20px;
top: -5px;
}
@media #{$medium} {
width: 80px; width: 80px;
left: -90px;
top: -20px;
}
@media #{$small} {
width: 80px;
left: -80px;
top: -10px;
} }
} }
@ -1017,8 +1040,18 @@ p {
right: 80px; right: 80px;
bottom: 40px; bottom: 40px;
@media #{$medium-and-smaller} { @media #{$intermediate} {
right: 0px;
}
@media #{$medium} {
width: 80px; width: 80px;
right: 0px;
}
@media #{$small} {
width: 80px;
right: 0px;
} }
} }
@ -1038,6 +1071,14 @@ p {
align-items: flex-start; align-items: flex-start;
text-align: left; text-align: left;
&.bottom {
padding-top: 0px;
@media #{$intermediate-and-smaller} {
padding-top: 32px;
}
}
@media #{$medium} { @media #{$medium} {
width: 460px; width: 460px;
} }
@ -1122,6 +1163,10 @@ p {
@media #{$medium-and-smaller} { @media #{$medium-and-smaller} {
flex-direction: column; flex-direction: column;
align-items: center; align-items: center;
&.europe {
flex-direction: column-reverse;
}
} }
.conference-image-and-caption { .conference-image-and-caption {
@ -1132,6 +1177,10 @@ p {
img { img {
width: 300px; width: 300px;
} }
@media #{$medium-and-smaller} {
margin-bottom: 32px;
}
} }
.conference-title-and-description { .conference-title-and-description {
@ -1232,6 +1281,10 @@ p {
margin: 20px 0px; margin: 20px 0px;
@media #{$medium-and-smaller} {
flex-direction: column;
}
.icon-and-link { .icon-and-link {
display: flex; display: flex;
align-items: center; align-items: center;
@ -1282,7 +1335,7 @@ p {
img { img {
&.left { &.left {
@media #{$big} { @media #{$big} {
width: 432px; height: 420px;
} }
@media #{$intermediate} { @media #{$intermediate} {
width: 340px; width: 340px;
@ -1297,7 +1350,7 @@ p {
&.right { &.right {
@media #{$big} { @media #{$big} {
width: 780px; height: 420px;
} }
@media #{$intermediate} { @media #{$intermediate} {
width: 468px; width: 468px;
@ -1620,14 +1673,20 @@ p {
.initiatives-community { .initiatives-community {
.community-hero-img { .community-hero-img {
width: 100%; width: 100%;
height: 545px;
margin: 52px 0; margin: 52px 0;
background-image: url("/images/annual-report/initiatives/community-hero.png"); background-image: url("/images/annual-report/initiatives/community-hero.png");
background-size: cover; background-size: contain;
background-repeat: no-repeat;
background-position: center center; background-position: center center;
overflow: hidden; overflow: hidden;
@media #{$small} { @media #{$intermediate} {
height: 330px;
}
@media #{$medium-and-smaller} {
height: 244px; height: 244px;
} }
} }
@ -1869,7 +1928,7 @@ p {
} }
.video-background { .video-background {
width: 1020px; width: 100%;
height: 500px; height: 500px;
overflow: hidden; overflow: hidden;
@ -1881,13 +1940,6 @@ p {
align-items: center; align-items: center;
justify-content: center; justify-content: center;
width: 100%;
height: 100%;
@media #{$big} {
}
&.blm { &.blm {
background-image: url("/images/annual-report/initiatives/BLM Video Splash.svg"); background-image: url("/images/annual-report/initiatives/BLM Video Splash.svg");
} }

52
static/images/annual-report/donate-illustration.svg
View file

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

Before

Width:  |  Height:  |  Size: 15 KiB

After

Width:  |  Height:  |  Size: 6.9 KiB