selfdefined/assets/css/base/_typography.scss
2020-05-28 21:18:01 -07:00

64 lines
1.0 KiB
SCSS

h1 {
font-family: $ext-sans;
font-weight: $bold;
}
h1,
h2,
h3,
h4 {
margin-bottom: 0.5em;
margin-top: 1em;
word-break: break-word;
}
p {
font-size: 1.25rem;
line-height: 1.25;
margin: 0.75rem 0;
}
.thicc-headline {
// a sensible base font size
font-size: 3rem;
line-height: 0.75;
margin: 0.5rem 0rem;
padding: 0;
}
@media (min-width: 51rem) and (min-height: 400px) {
// a dramatic font size
.thicc-headline {
font-size: 12vh;
}
}
@media (min-width: 51rem) and (min-height: 850px) {
// cap the maximum font size of the title
// at the same size that 12vh computes to
// when the viewport is 850px high
// One day we can use CSS clamp https://caniuse.com/#feat=mdn-css_types_clamp
.thicc-headline {
font-size: 6.75rem;
}
}
.main-headline {
font-family: orpheuspro, Palatino, Times, serif;
font-size: 3.5rem;
line-height: 1.2;
margin: 0;
}
.sub-headline {
font-family: $ext-sans;
font-size: 1.25rem;
font-weight: $bold;
letter-spacing: 0.1;
margin: .75rem 0;
}
.small {
font-size: 0.75em;
}