mafoo.org.uk/selfdefined
1
0
Fork 0
mirror of https://github.com/fooflington/selfdefined.git synced 2025-01-22 09:20:00 +00:00
Code Issues Projects Releases Wiki Activity

Make thicc title heading scale according to viewport height.

Browse Source 
But only once the browser is wide enough, and also cap the scaling height before the font gets too big!
This commit is contained in:
Laura Kalbag 2020-01-15 14:18:45 +00:00
parent bb1469c2f3
commit dc0d666eb6
1 changed files with 18 additions and 1 deletions
Show Stats Download Patch File Download Diff File Expand all files Collapse all files

19
assets/css/base.scss
View File

@ -138,7 +138,8 @@ ul[class] {
}
.title__thicc {
font-size: 8vh;
// a sensible base font size
font-size: 3rem;
line-height: 0.75;
padding: 0;
margin: 0.5rem 0rem;
@ -146,6 +147,22 @@ ul[class] {
// margin: 13rem -7rem;
}
@media (min-width: 51rem) and (min-height: 400px) {
// a dramatic font size
.title__thicc {
font-size: 12vh;
}
}
@media (min-width: 51rem) and (min-height: 850px) {
// cap the max-height of the title
// at the same size that 12vh computes to
// when the viewport is 850px high
.title__thicc {
font-size: 6.75rem;
}
}
@media (min-width: 800px) {
.title__thicc {
grid-column: 1 / 3;