mirror of
https://github.com/scratchfoundation/scratch-www.git
synced 2024-11-23 07:38:07 -05:00
More responsiveness updates and replace placeholder image for donate section
This commit is contained in:
Karishma Chadha
parent
67ff392776
commit
44a5394667
3 changed files with 146 additions and 94 deletions
|
|
@ -730,48 +730,48 @@ class AnnualReport extends React.Component {
|
|||
<FormattedMessage id="annualReport.reachMapBlurb" />
|
||||
</p>
|
||||
<div className="map-wrapper">
|
||||
<MediaQuery minWidth={frameless.desktop}>
|
||||
<WorldMap
|
||||
className="map"
|
||||
colorIndex={colorIndex}
|
||||
countryData={countryData}
|
||||
countryNames={countryNames}
|
||||
mapHeight={471}
|
||||
/>
|
||||
</MediaQuery>
|
||||
<MediaQuery
|
||||
maxWidth={frameless.desktop - 1}
|
||||
minWidth={frameless.tabletPortrait}
|
||||
>
|
||||
<WorldMap
|
||||
className="map"
|
||||
colorIndex={colorIndex}
|
||||
countryData={countryData}
|
||||
countryNames={countryNames}
|
||||
mapHeight={384}
|
||||
/>
|
||||
</MediaQuery>
|
||||
<MediaQuery
|
||||
maxWidth={frameless.tabletPortrait - 1}
|
||||
minWidth={frameless.mobileIntermediate}
|
||||
>
|
||||
<WorldMap
|
||||
className="map"
|
||||
colorIndex={colorIndex}
|
||||
countryData={countryData}
|
||||
countryNames={countryNames}
|
||||
mapHeight={320}
|
||||
/>
|
||||
</MediaQuery>
|
||||
<MediaQuery maxWidth={frameless.mobileIntermediate - 1}>
|
||||
<WorldMap
|
||||
className="map"
|
||||
colorIndex={colorIndex}
|
||||
countryData={countryData}
|
||||
countryNames={countryNames}
|
||||
mapHeight={240}
|
||||
/>
|
||||
</MediaQuery>
|
||||
<MediaQuery minWidth={frameless.desktop}>
|
||||
<WorldMap
|
||||
className="map"
|
||||
colorIndex={colorIndex}
|
||||
countryData={countryData}
|
||||
countryNames={countryNames}
|
||||
mapHeight={471}
|
||||
/>
|
||||
</MediaQuery>
|
||||
<MediaQuery
|
||||
maxWidth={frameless.desktop - 1}
|
||||
minWidth={frameless.tabletPortrait}
|
||||
>
|
||||
<WorldMap
|
||||
className="map"
|
||||
colorIndex={colorIndex}
|
||||
countryData={countryData}
|
||||
countryNames={countryNames}
|
||||
mapHeight={384}
|
||||
/>
|
||||
</MediaQuery>
|
||||
<MediaQuery
|
||||
maxWidth={frameless.tabletPortrait - 1}
|
||||
minWidth={frameless.mobileIntermediate}
|
||||
>
|
||||
<WorldMap
|
||||
className="map"
|
||||
colorIndex={colorIndex}
|
||||
countryData={countryData}
|
||||
countryNames={countryNames}
|
||||
mapHeight={320}
|
||||
/>
|
||||
</MediaQuery>
|
||||
<MediaQuery maxWidth={frameless.mobileIntermediate - 1}>
|
||||
<WorldMap
|
||||
className="map"
|
||||
colorIndex={colorIndex}
|
||||
countryData={countryData}
|
||||
countryNames={countryNames}
|
||||
mapHeight={240}
|
||||
/>
|
||||
</MediaQuery>
|
||||
</div>
|
||||
</div>
|
||||
</div>
|
||||
|
|
@ -1705,7 +1705,7 @@ class AnnualReport extends React.Component {
|
|||
/>
|
||||
</div>
|
||||
</MediaQuery>
|
||||
<div className="inner schools-conferences">
|
||||
<div className="inner schools-conferences bottom">
|
||||
<div className="schools-conferences-content">
|
||||
<div className="schools-conferences-region">
|
||||
<div className="conference-image-and-caption left">
|
||||
|
|
@ -1760,7 +1760,7 @@ class AnnualReport extends React.Component {
|
|||
</p>
|
||||
</div>
|
||||
</div>
|
||||
<div className="schools-conferences-region">
|
||||
<div className="schools-conferences-region europe">
|
||||
<div className="conference-title-and-description left">
|
||||
<h4>
|
||||
<FormattedMessage id="annualReport.conferencesEuropeTitle" />
|
||||
|
|
|
|||
|
|
@ -657,7 +657,6 @@ p {
|
|||
.scratch-jr-transition-img {
|
||||
margin-bottom: -44px;
|
||||
margin-left: 88px;
|
||||
width: 100%;
|
||||
|
||||
display: flex;
|
||||
overflow: hidden;
|
||||
|
|
@ -923,10 +922,14 @@ p {
|
|||
align-items: center;
|
||||
|
||||
@media #{$big} {
|
||||
max-width: 1032px;
|
||||
max-width: 940px;
|
||||
padding: 72px;
|
||||
}
|
||||
|
||||
@media #{$medium-and-intermediate} {
|
||||
padding-top: 72px;
|
||||
}
|
||||
|
||||
@media #{$medium} {
|
||||
max-width: 460px;
|
||||
}
|
||||
|
|
@ -945,7 +948,6 @@ p {
|
|||
align-items: flex-start;
|
||||
text-align: left;
|
||||
|
||||
padding-top: 10px;
|
||||
padding-bottom: 0px;
|
||||
|
||||
.subsection-tag {
|
||||
|
|
@ -957,7 +959,8 @@ p {
|
|||
}
|
||||
|
||||
@media #{$small} {
|
||||
align-items: center;
|
||||
padding-top: 32px;
|
||||
align-items: flex-start;
|
||||
h2 {
|
||||
line-height: 2.5rem;
|
||||
}
|
||||
|
|
@ -970,6 +973,13 @@ p {
|
|||
padding-bottom: 0px;
|
||||
position: relative;
|
||||
|
||||
@media #{$medium} {
|
||||
max-width: 760px;
|
||||
|
||||
padding-top: 10px;
|
||||
padding-bottom: 10px;
|
||||
}
|
||||
|
||||
.four-pictures {
|
||||
display: flex;
|
||||
flex-direction: row;
|
||||
|
|
@ -1007,8 +1017,21 @@ p {
|
|||
left: 60px;
|
||||
top: 60px;
|
||||
|
||||
@media #{$medium-and-smaller} {
|
||||
@media #{$intermediate} {
|
||||
left: -20px;
|
||||
top: -5px;
|
||||
}
|
||||
|
||||
@media #{$medium} {
|
||||
width: 80px;
|
||||
left: -90px;
|
||||
top: -20px;
|
||||
}
|
||||
|
||||
@media #{$small} {
|
||||
width: 80px;
|
||||
left: -80px;
|
||||
top: -10px;
|
||||
}
|
||||
}
|
||||
|
||||
|
|
@ -1017,8 +1040,18 @@ p {
|
|||
right: 80px;
|
||||
bottom: 40px;
|
||||
|
||||
@media #{$medium-and-smaller} {
|
||||
@media #{$intermediate} {
|
||||
right: 0px;
|
||||
}
|
||||
|
||||
@media #{$medium} {
|
||||
width: 80px;
|
||||
right: 0px;
|
||||
}
|
||||
|
||||
@media #{$small} {
|
||||
width: 80px;
|
||||
right: 0px;
|
||||
}
|
||||
}
|
||||
|
||||
|
|
@ -1038,6 +1071,14 @@ p {
|
|||
align-items: flex-start;
|
||||
text-align: left;
|
||||
|
||||
&.bottom {
|
||||
padding-top: 0px;
|
||||
|
||||
@media #{$intermediate-and-smaller} {
|
||||
padding-top: 32px;
|
||||
}
|
||||
}
|
||||
|
||||
@media #{$medium} {
|
||||
width: 460px;
|
||||
}
|
||||
|
|
@ -1122,6 +1163,10 @@ p {
|
|||
@media #{$medium-and-smaller} {
|
||||
flex-direction: column;
|
||||
align-items: center;
|
||||
|
||||
&.europe {
|
||||
flex-direction: column-reverse;
|
||||
}
|
||||
}
|
||||
|
||||
.conference-image-and-caption {
|
||||
|
|
@ -1132,6 +1177,10 @@ p {
|
|||
img {
|
||||
width: 300px;
|
||||
}
|
||||
|
||||
@media #{$medium-and-smaller} {
|
||||
margin-bottom: 32px;
|
||||
}
|
||||
}
|
||||
|
||||
.conference-title-and-description {
|
||||
|
|
@ -1232,6 +1281,10 @@ p {
|
|||
|
||||
margin: 20px 0px;
|
||||
|
||||
@media #{$medium-and-smaller} {
|
||||
flex-direction: column;
|
||||
}
|
||||
|
||||
.icon-and-link {
|
||||
display: flex;
|
||||
align-items: center;
|
||||
|
|
@ -1282,7 +1335,7 @@ p {
|
|||
img {
|
||||
&.left {
|
||||
@media #{$big} {
|
||||
width: 432px;
|
||||
height: 420px;
|
||||
}
|
||||
@media #{$intermediate} {
|
||||
width: 340px;
|
||||
|
|
@ -1297,7 +1350,7 @@ p {
|
|||
|
||||
&.right {
|
||||
@media #{$big} {
|
||||
width: 780px;
|
||||
height: 420px;
|
||||
}
|
||||
@media #{$intermediate} {
|
||||
width: 468px;
|
||||
|
|
@ -1620,14 +1673,20 @@ p {
|
|||
.initiatives-community {
|
||||
.community-hero-img {
|
||||
width: 100%;
|
||||
height: 545px;
|
||||
margin: 52px 0;
|
||||
|
||||
background-image: url("/images/annual-report/initiatives/community-hero.png");
|
||||
background-size: cover;
|
||||
background-size: contain;
|
||||
background-repeat: no-repeat;
|
||||
background-position: center center;
|
||||
overflow: hidden;
|
||||
|
||||
@media #{$small} {
|
||||
@media #{$intermediate} {
|
||||
height: 330px;
|
||||
}
|
||||
|
||||
@media #{$medium-and-smaller} {
|
||||
height: 244px;
|
||||
}
|
||||
}
|
||||
|
|
@ -1869,7 +1928,7 @@ p {
|
|||
}
|
||||
|
||||
.video-background {
|
||||
width: 1020px;
|
||||
width: 100%;
|
||||
height: 500px;
|
||||
overflow: hidden;
|
||||
|
||||
|
|
@ -1881,13 +1940,6 @@ p {
|
|||
align-items: center;
|
||||
justify-content: center;
|
||||
|
||||
width: 100%;
|
||||
height: 100%;
|
||||
|
||||
@media #{$big} {
|
||||
|
||||
}
|
||||
|
||||
&.blm {
|
||||
background-image: url("/images/annual-report/initiatives/BLM Video Splash.svg");
|
||||
}
|
||||
|
|
|
|||
File diff suppressed because one or more lines are too long
|
Before Width: | Height: | Size: 15 KiB After Width: | Height: | Size: 6.9 KiB |
Loading…
Reference in a new issue