70 lines
1.1 KiB
SCSS
70 lines
1.1 KiB
SCSS
|
// Headings
|
||
|
|
//
|
||
|
|
// All HTML headings, `<h1>` through `<h6>`, are available. `%h1` through `%h6`
|
||
|
|
// classes are also available, for when you want to match the font styling of a
|
||
|
|
// heading but not be a heading.
|
||
|
|
h1,
|
||
|
|
%h1,
|
||
|
|
h2,
|
||
|
|
%h2,
|
||
|
|
h3,
|
||
|
|
%h3,
|
||
|
|
h4,
|
||
|
|
%h4,
|
||
|
|
h5,
|
||
|
|
%h5,
|
||
|
|
h6,
|
||
|
|
%h6 {
|
||
|
|
@include margin-block(1 .33, 'em');
|
||
|
|
color: var(--color-headings);
|
||
|
|
font-family: var(--ff-headings);
|
||
|
|
font-weight: var(--fw-headings);
|
||
|
|
line-height: var(--heading-line-height);
|
||
|
|
text-wrap: balance;
|
||
|
|
|
||
|
|
// Smaller margin when a headeing is right after another heading.
|
||
|
|
& + & {
|
||
|
|
@include margin-block-start(.5, 'em');
|
||
|
|
}
|
||
|
|
|
||
|
|
// Set max text line width in main for readability.
|
||
|
|
.main & {
|
||
|
|
max-width: var(--max-line-width);
|
||
|
|
}
|
||
|
|
}
|
||
|
|
|
||
|
|
h1,
|
||
|
|
%h1 {
|
||
|
|
// h1 only on top of page so different margins.
|
||
|
|
@include margin-block(1 .5, 'rem');
|
||
|
|
font-size: var(--fs-xxl);
|
||
|
|
letter-spacing: -.01em;
|
||
|
|
}
|
||
|
|
|
||
|
|
h2,
|
||
|
|
%h2 {
|
||
|
|
font-size: var(--fs-xl);
|
||
|
|
letter-spacing: -.01em;
|
||
|
|
}
|
||
|
|
|
||
|
|
h3,
|
||
|
|
%h3 {
|
||
|
|
font-size: var(--fs-l);
|
||
|
|
letter-spacing: -.01em;
|
||
|
|
}
|
||
|
|
|
||
|
|
h4,
|
||
|
|
%h4 {
|
||
|
|
font-size: var(--fs-m);
|
||
|
|
}
|
||
|
|
|
||
|
|
h5,
|
||
|
|
%h5 {
|
||
|
|
font-size: var(--fs-s);
|
||
|
|
}
|
||
|
|
|
||
|
|
h6,
|
||
|
|
%h6 {
|
||
|
|
font-size: var(--fs-xs);
|
||
|
|
}
|