50 lines
1.3 KiB
CSS
50 lines
1.3 KiB
CSS
/* as we will be moving away from SCSS and towards tailwind, here's a middle step: using classes for typography instead
|
|
* of always using individual classes together with mixins */
|
|
.main-title {
|
|
font-family: var(--sans-serif-font-family);
|
|
font-weight: var(--bold-font-weight);
|
|
font-size: var(--largest-font-size);
|
|
}
|
|
|
|
.heading-1 {
|
|
font-family: var(--sans-serif-font-family);
|
|
font-weight: var(--semibold-font-weight);
|
|
font-size: var(--larger-font-size);
|
|
}
|
|
|
|
.heading-2 {
|
|
font-family: var(--sans-serif-font-family);
|
|
font-weight: var(--semibold-font-weight);
|
|
font-size: var(--large-font-size);
|
|
}
|
|
|
|
.heading-3 {
|
|
font-family: var(--sans-serif-font-family);
|
|
font-weight: var(--semibold-font-weight);
|
|
font-size: var(--slightly-large-font-size);
|
|
}
|
|
|
|
.heading-4 {
|
|
font-family: var(--sans-serif-font-family);
|
|
font-weight: var(--semibold-font-weight);
|
|
font-size: var(--regular-font-size);
|
|
}
|
|
|
|
.regular-text {
|
|
font-family: var(--sans-serif-font-family);
|
|
font-weight: var(--regular-font-weight);
|
|
font-size: var(--regular-font-size);
|
|
}
|
|
|
|
.paragraph {
|
|
font-family: var(--serif-font-family);
|
|
font-size: var(--regular-font-size);
|
|
font-weight: var(--regular-font-weight);
|
|
line-height: var(--paragraph-line-height);
|
|
}
|
|
|
|
.inline-title {
|
|
@reuse .regular-text;
|
|
color: var(--color-silver-dark);
|
|
}
|