103 lines
1.8 KiB
SCSS
103 lines
1.8 KiB
SCSS
%heading {
|
|
margin-top: 0; // 1
|
|
margin-bottom: 0.25em;
|
|
font-family: $headings-font-family;
|
|
font-optical-sizing: auto;
|
|
font-style: $headings-font-style;
|
|
color: var(--#{$prefix}heading-color);
|
|
}
|
|
|
|
a {
|
|
color: rgba(var(--#{$prefix}link-color-rgb), var(--#{$prefix}link-opacity, 1));
|
|
text-decoration: $link-decoration;
|
|
text-underline-offset: 0.25rem;
|
|
text-decoration-thickness: 2px;
|
|
&:hover {
|
|
--#{$prefix}link-color-rgb: var(--#{$prefix}link-hover-color-rgb);
|
|
text-decoration: $link-hover-decoration;
|
|
}
|
|
}
|
|
|
|
h1 {
|
|
@extend %heading;
|
|
@include font-size($h1-font-size);
|
|
font-weight: $headings-font-bold;
|
|
line-height: 1.48;
|
|
}
|
|
|
|
h2 {
|
|
@extend %heading;
|
|
@include font-size($h2-font-size);
|
|
font-weight: $headings-font-bold;
|
|
line-height: 1.5;
|
|
}
|
|
|
|
h3 {
|
|
@extend %heading;
|
|
@include font-size($h3-font-size);
|
|
font-weight: $headings-font-bold;
|
|
line-height: 1.52;
|
|
}
|
|
|
|
h4 {
|
|
@extend %heading;
|
|
@include font-size($h4-font-size);
|
|
font-weight: $headings-font-medium;
|
|
line-height: 1.5;
|
|
}
|
|
|
|
h5 {
|
|
@extend %heading;
|
|
@include font-size($h5-font-size);
|
|
font-weight: $headings-font-medium;
|
|
line-height: 1.5;
|
|
}
|
|
|
|
h6 {
|
|
@extend %heading;
|
|
@include font-size($h6-font-size);
|
|
font-weight: $headings-font-medium;
|
|
line-height: 1.52;
|
|
}
|
|
|
|
p {
|
|
text-wrap: balance;
|
|
max-width: 80ch;
|
|
}
|
|
|
|
.alternative {
|
|
font-family: $display-font-family;
|
|
line-height: 1.1;
|
|
font-weight: 500;
|
|
font-size: 21px;
|
|
}
|
|
|
|
p.first-paragraph {
|
|
font-size: 1.125em;
|
|
}
|
|
|
|
p.first-paragraph:first-line {
|
|
color: var(--#{$prefix}primary);
|
|
text-transform: uppercase;
|
|
font-size: 0.85em;
|
|
font-weight: bold;
|
|
}
|
|
|
|
[data-#{$prefix}theme='dark'] {
|
|
p.first-paragraph:first-line {
|
|
color: var(--#{$prefix}primary-text-emphasis);
|
|
}
|
|
}
|
|
|
|
@include media-breakpoint-down(lg) {
|
|
p.first-paragraph br {
|
|
display: none;
|
|
}
|
|
}
|
|
|
|
smaller,
|
|
.smaller {
|
|
@include rfs($smaller-font-size, --#{$prefix}smaller-font-size);
|
|
font-size: $smaller-font-size;
|
|
}
|