scratchfoundation/scratch-www
1
0
Fork 0
mirror of https://github.com/scratchfoundation/scratch-www.git synced 2024-11-27 09:35:56 -05:00
Code Issues Projects Releases Packages Wiki Activity Actions 4

Mission section - rough in some responsiveness

Browse source
This commit is contained in:
rschamp 2020-10-15 15:03:12 -04:00 committed by Karishma Chadha
parent ece76e090a
commit d113dda808
1 changed files with 37 additions and 1 deletions
Show stats Download patch file Download diff file Expand all files Collapse all files

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

@ -245,6 +245,10 @@ p {
font-size: 1.25rem; font-size: 1.25rem;
} }
@media #{$intermediate-and-smaller} {
text-align: left;
}
.inner { .inner {
padding-top: 124px; padding-top: 124px;
@ -254,6 +258,22 @@ p {
.four-ps-wrapper { .four-ps-wrapper {
padding: 124px 0; padding: 124px 0;
width: 940px; width: 940px;
@media #{$intermediate-and-smaller} {
padding-top: 20px;
}
}
.inner, .four-ps-wrapper {
@media #{$intermediate} {
width: 620px;
}
@media #{$medium} {
width: 460px;
}
@media #{$small} {
width: 300px;
}
} }
.four-ps { .four-ps {
@ -262,15 +282,25 @@ p {
flex-direction: column; flex-direction: column;
flex-wrap: wrap; flex-wrap: wrap;
align-items: flex-start; align-items: flex-start;
@media #{$intermediate-and-smaller} {
height: auto;
align-items: center;
}
} }
.one-p { .one-p {
width: 300px; width: 300px;
height: 370px; height: 370px;
padding: 20px 80px; padding: 20px 80px;
background: center no-repeat; background-position: center;
background-repeat: no-repeat;
background-size: contain;
margin-top: 20px; margin-top: 20px;
margin-right: 20px; margin-right: 20px;
@media #{$intermediate-and-smaller} {
margin-right: 0;
padding: 0;
}
} }
.four-ps-projects { .four-ps-projects {
@ -285,12 +315,18 @@ p {
background-image: url("/images/annual-report/mission/Passion Splash.svg"); background-image: url("/images/annual-report/mission/Passion Splash.svg");
margin-top: 72px; margin-top: 72px;
margin-right: 0; margin-right: 0;
@media #{$intermediate-and-smaller} {
margin-top: 20px;
}
} }
.four-ps-play { .four-ps-play {
background-image: url("/images/annual-report/mission/Play Splash.svg"); background-image: url("/images/annual-report/mission/Play Splash.svg");
margin-right: 0; margin-right: 0;
margin-top: 44px; margin-top: 44px;
@media #{$intermediate-and-smaller} {
margin-top: 20px;
}
} }
} }