96 lines
1.9 KiB
CSS
96 lines
1.9 KiB
CSS
/*
|
|
|
|
TYPE SCALE
|
|
Docs: http://tachyons.io/docs/typography/scale/
|
|
|
|
Base:
|
|
f = font-size
|
|
|
|
Modifiers
|
|
1 = 1st step in size scale
|
|
2 = 2nd step in size scale
|
|
3 = 3rd step in size scale
|
|
4 = 4th step in size scale
|
|
5 = 5th step in size scale
|
|
6 = 6th step in size scale
|
|
7 = 7th step in size scale
|
|
|
|
Media Query Extensions:
|
|
-ns = not-small
|
|
-m = medium
|
|
-l = large
|
|
*/
|
|
|
|
/*
|
|
* For Hero/Marketing Titles
|
|
*
|
|
* These generally are too large for mobile
|
|
* so be careful using them on smaller screens.
|
|
* */
|
|
|
|
.f-6,
|
|
.f-headline {
|
|
font-size: 6rem;
|
|
}
|
|
.f-5,
|
|
.f-subheadline {
|
|
font-size: 5rem;
|
|
}
|
|
|
|
|
|
/* Type Scale */
|
|
|
|
.f1 { font-size: 3rem; }
|
|
.f2 { font-size: 2.25rem; }
|
|
.f3 { font-size: 1.5rem; }
|
|
.f4 { font-size: 1.25rem; }
|
|
.f5 { font-size: 1rem; }
|
|
.f6 { font-size: .875rem; }
|
|
.f7 { font-size: .75rem; } /* Small and hard to read for many people so use with extreme caution */
|
|
|
|
@media (--breakpoint-not-small){
|
|
.f-6-ns,
|
|
.f-headline-ns { font-size: 6rem; }
|
|
.f-5-ns,
|
|
.f-subheadline-ns { font-size: 5rem; }
|
|
.f1-ns { font-size: 3rem; }
|
|
.f2-ns { font-size: 2.25rem; }
|
|
.f3-ns { font-size: 1.5rem; }
|
|
.f4-ns { font-size: 1.25rem; }
|
|
.f5-ns { font-size: 1rem; }
|
|
.f6-ns { font-size: .875rem; }
|
|
.f7-ns { font-size: .75rem; }
|
|
}
|
|
|
|
@media (--breakpoint-medium) {
|
|
.f-6-m,
|
|
.f-headline-m { font-size: 6rem; }
|
|
.f-5-m,
|
|
.f-subheadline-m { font-size: 5rem; }
|
|
.f1-m { font-size: 3rem; }
|
|
.f2-m { font-size: 2.25rem; }
|
|
.f3-m { font-size: 1.5rem; }
|
|
.f4-m { font-size: 1.25rem; }
|
|
.f5-m { font-size: 1rem; }
|
|
.f6-m { font-size: .875rem; }
|
|
.f7-m { font-size: .75rem; }
|
|
}
|
|
|
|
@media (--breakpoint-large) {
|
|
.f-6-l,
|
|
.f-headline-l {
|
|
font-size: 6rem;
|
|
}
|
|
.f-5-l,
|
|
.f-subheadline-l {
|
|
font-size: 5rem;
|
|
}
|
|
.f1-l { font-size: 3rem; }
|
|
.f2-l { font-size: 2.25rem; }
|
|
.f3-l { font-size: 1.5rem; }
|
|
.f4-l { font-size: 1.25rem; }
|
|
.f5-l { font-size: 1rem; }
|
|
.f6-l { font-size: .875rem; }
|
|
.f7-l { font-size: .75rem; }
|
|
}
|