anders/Wallet
1
0
Fork 0
Code Issues Projects Releases Packages Wiki Activity

design(onboarding): polish font-sizes on very thin screens

Browse source
This commit is contained in:
Jason Dreyzehner 2016-10-07 17:09:09 -04:00
commit ed118c6eec
1 changed files with 10 additions and 1 deletions
Download patch file Download diff file Expand all files Collapse all files

11
src/sass/views/onboarding/onboarding.scss
View file

@ -22,18 +22,27 @@
font-size: 24px; font-size: 24px;
margin-top: .5rem; margin-top: .5rem;
line-height: 1.3; line-height: 1.3;
@media(max-width: 350px) {
font-size: 20px;
}
} }
.onboarding-description { .onboarding-description {
margin-top: 1rem; margin-top: 1rem;
font-size: 16px; font-size: 16px;
color: rgba(255,255,255,0.5); color: rgba(255,255,255,0.5);
line-height: 1.5; line-height: 1.5;
@media(max-width: 350px) {
line-height: 1.3;
}
} }
.onboarding-tldr { .onboarding-tldr {
font-size: 18px; font-size: 18px;
margin-top: 1rem; margin-top: 1rem;
margin-bottom: 1em; margin-bottom: 1em;
line-height: 1.3; line-height: 1.3;
@media(max-width: 350px) {
font-size: 16px;
}
} }
} }
@ -55,7 +64,7 @@
%onboarding-illustration { %onboarding-illustration {
position: absolute; position: absolute;
width: 100%; width: 100%;
height: 40%; height: 45%;
margin-top: 25vh; margin-top: 25vh;
top: 0; top: 0;
background-position: center; background-position: center;