Skip to content

GitLab

S
scratch-www
Commit 3546be1b authored by Karishma Chadha's avatar Karishma Chadha
Browse files
Options

Make data point numbers in Reach section bold. Make spacing more consistent in... 

Make data point numbers in Reach section bold. Make spacing more consistent in mission section of the scss file.
parent 240fd5e5
Hide whitespace changes
Inline Side-by-side
Showing with 147 additions and 147 deletions
src/views/annual-report/annual-report.scss
View file @ 3546be1b
......@@ -266,200 +266,199 @@ p {
}
.mission-section {
background-color: $ui-blue-10percent;
display: flex;
flex-direction: column;
align-items: center;
.mission-subtitle {
font-weight: normal;
font-size: 1.25rem;
}
@media #{$intermediate-and-smaller} {
text-align: left;
}
.inner {
padding-top: 124px;
width: 620px;
}
.four-ps {
margin: 56px 0 124px 0;
width: 940px;
background-color: $ui-blue-10percent;
display: flex;
flex-direction: row;
flex-wrap: wrap;
align-items: flex-start;
flex-direction: column;
align-items: center;
@media #{$intermediate} {
margin-top: 96px 0 108px 0;
.mission-subtitle {
font-weight: normal;
font-size: 1.25rem;
}
@media #{$intermediate-and-smaller} {
justify-content: center;
text-align: left;
}
@media #{$medium-and-smaller} {
margin-top: 76px;
align-items: center;
.inner {
padding-top: 124px;
width: 620px;
}
}
.inner, .four-ps {
@media #{$intermediate} {
width: 620px;
}
@media #{$medium} {
width: 460px;
}
@media #{$small} {
width: 300px;
}
}
.one-p {
width: 460px;
height: 493px;
background-repeat: no-repeat;
background-size: contain;
margin-right: 20px;
.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;
}
img {
width: 460px;
}
@media #{$intermediate-and-smaller} {
justify-content: center;
}
&.top {
margin-top: 0px;
@media #{$medium-and-smaller} {
margin-top: 76px;
align-items: center;
}
}
@media #{$intermediate-and-smaller} {
padding: 0;
width: 300px;
background-position: center;
.inner, .four-ps {
@media #{$intermediate} {
width: 620px;
}
@media #{$medium} {
width: 460px;
}
@media #{$small} {
width: 300px;
}
}
.one-p {
width: 460px;
height: 493px;
background-repeat: no-repeat;
background-size: contain;
margin-right: 20px;
display: flex;
flex-direction: column;
align-items: center;
justify-content: flex-start;
img {
width: 460px;
}
img {
width: 300px;
}
}
&.top {
margin-top: 0px;
}
@media #{$intermediate} {
height: 370px;
}
@media #{$intermediate-and-smaller} {
padding: 0;
width: 300px;
background-position: center;
@media #{$medium-and-smaller} {
margin-top: 62px;
height: 398px;
}
display: flex;
flex-direction: column;
align-items: center;
justify-content: flex-start;
@media #{$medium} {
margin-right: 0;
}
img {
width: 300px;
}
}
.title-and-description {
width: 300px;
margin: 16px auto 0 auto;
p {
font-size: 1.25rem;
line-height: 2rem;
margin-top: 16px;
@media #{$intermediate} {
height: 370px;
}
.no-margin-bottom {
margin-bottom: 0;
@media #{$medium-and-smaller} {
margin-top: 62px;
height: 398px;
}
@media #{$intermediate-and-smaller} {
text-align: center;
@media #{$medium} {
margin-right: 0;
}
@media #{$medium-and-smaller} {
margin: 0 auto;
.title-and-description {
width: 300px;
margin: 16px auto 0 auto;
p {
font-size: 1rem;
font-size: 1.25rem;
line-height: 2rem;
margin-bottom: 16px;
margin-top: 16px;
}
}
@media #{$medium} {
p {
margin-top: 12px;
.no-margin-bottom {
margin-bottom: 0;
}
@media #{$intermediate-and-smaller} {
text-align: center;
}
}
@media #{$small} {
p {
margin-top: 5px;
@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;
.small-p {
background-position: center;
background-size: cover;
background-repeat: no-repeat;
height: 268px;
img {
margin: 34px 0;
img {
margin: 34px 0;
}
}
}
.four-ps-projects {
background-image: url("/images/annual-report/mission/Projects Splash.svg");
}
.four-ps-projects {
background-image: url("/images/annual-report/mission/Projects Splash.svg");
}
.four-ps-passion {
background-image: url("/images/annual-report/mission/Passion Splash.svg");
margin-top: 112px;
margin-right: 0;
.four-ps-passion {
background-image: url("/images/annual-report/mission/Passion Splash.svg");
margin-top: 112px;
margin-right: 0;
@media #{$intermediate} {
margin-top: 96px;
}
@media #{$intermediate} {
margin-top: 96px;
}
@media #{$medium-and-smaller} {
margin-top: 0;
}
}
@media #{$medium-and-smaller} {
margin-top: 0;
}
}
.four-ps-peers {
background-image: url("/images/annual-report/mission/Peers Splash.svg");
margin-top: -80px;
.four-ps-peers {
background-image: url("/images/annual-report/mission/Peers Splash.svg");
margin-top: -80px;
@media #{$intermediate} {
margin-top: -72px;
@media #{$intermediate} {
margin-top: -72px;
}
@media #{$medium-and-smaller} {
margin-top: 0;
}
}
@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: 32px;
@media #{$intermediate} {
margin-top: 24px;
}
.four-ps-play {
background-image: url("/images/annual-report/mission/Play Splash.svg");
margin-right: 0;
margin-top: 32px;
@media #{$medium-and-smaller} {
margin-top: 0;
}
}
@media #{$intermediate} {
margin-top: 24px;
}
@media #{$medium-and-smaller} {
margin-top: 0;
}
}
}
.milestones-section {
......@@ -733,6 +732,7 @@ p {
.reach-datapoint {
font-size: 5rem;
font-weight: bold;
width: 220px;
text-align: center;
margin: 32px 0;
......
Markdown is supported
0% or
You are about to add 0 people to the discussion. Proceed with caution.
Finish editing this message first!
Please register or to comment