<h1>Heading 1 Museo Sans 900 (--step-5)</h1>
<h2>Heading 2 Museo Sans 900 (--step-4)</h2>
<h3>Heading 3 Museo Sans 900 (--step-3)</h3>
<h4>Heading 4 Museo Sans 900 (--step-2)</h4>
<h5>Heading 5 Museo Sans 900 (--step-1)</h5>
<p>Paragraph - Museo Sans 500</p>
<p><a href="#">Inline link</a> - Museo Sans 500</p>
<p><a href="#" class="u-noUnderline">No underline link</a> - Museo Sans 500</p>
<p><a href="#" class="plainLink">Plain Link</a> - Museo Sans 500</p>
<p><a href="#" class="pageLink">Page Link (light background)<span class="appendedIcon">‍<i class="fas fa-angle-right"></i></span></a></p>
<div style="background-color: var(--neutral--darker); padding: .5em 1em">
<p><a href="#" class="plainLink--inverse">Plain Link (dark background)</a></p>
<p><a href="#" class="pageLink--inverse">Page Link (dark background)<span class="appendedIcon">‍<i class="fas fa-angle-right"></i></span></a></p>
</div>
<h3 class="h--section">A New Section</h3>
{% for heading in headings %}
<{{heading.tag}}>{{heading.name}} Museo Sans 900 ({{heading.css}})</{{heading.tag}}>
{% endfor %}
<p>Paragraph - Museo Sans 500</p>
<p><a href="#">Inline link</a> - Museo Sans 500</p>
<p><a href="#" class="u-noUnderline">No underline link</a> - Museo Sans 500</p>
<p><a href="#" class="plainLink">Plain Link</a> - Museo Sans 500</p>
<p><a href="#" class="pageLink">{% render "@icon--appended" with {text: "Page Link (light background)"} %}</a></p>
<div style="background-color: var(--neutral--darker); padding: .5em 1em">
<p><a href="#" class="plainLink--inverse">Plain Link (dark background)</a></p>
<p><a href="#" class="pageLink--inverse">{% render "@icon--appended" with {text: "Page Link (dark background)"} %}</a></p>
</div>
<h3 class="h--section">A New Section</h3>
{
"headings": [
{
"name": "Heading 1",
"tag": "h1",
"css": "--step-5"
},
{
"name": "Heading 2",
"tag": "h2",
"css": "--step-4"
},
{
"name": "Heading 3",
"tag": "h3",
"css": "--step-3"
},
{
"name": "Heading 4",
"tag": "h4",
"css": "--step-2"
},
{
"name": "Heading 5",
"tag": "h5",
"css": "--step-1"
}
]
}
import "./type.scss";
@use "../_layout/mixins";
$h: "h2, .h2, h3, .h3, h4, .h4, h5, .h5";
h1,
.h1 {
font-size: var(--step-5);
}
h2,
.h2 {
font-size: var(--step-4);
}
h3,
.h3 {
font-size: var(--step-3);
}
h4,
.h4 {
font-size: var(--step-2);
}
h5,
.h5 {
font-size: var(--step-1);
}
:where(h1, .h1, #{$h}) {
line-height: 1.1;
font-weight: var(--bold-weight);
display: block;
}
#{$h} {
& + * {
margin-block-start: 0.5em;
}
& + .figure {
//need to add the .figure specificity to overwrite the margin-block: 2em in src/components/_layout/media.scss
margin-block-start: 1.25em;
}
}
h2,
.h2 {
&:not(:first-child) {
margin-block-start: 0.805em;
}
}
h3,
.h3,
h4,
.h4,
h5,
.h5 {
&:not(:first-child) {
margin-block-start: 0.645em;
}
}
$headingPairs: (
"h2, .h2": "h3, .h3, h4, .h4, h5, .h5",
"h3, .h3": "h4, .h4, h5, .h5",
"h4, .h4": "h5, .h5",
);
@each $parent, $child in $headingPairs {
:is(#{$parent}) + :is(#{$child}) {
margin-block-start: 0.32em;
}
}
.h--section {
border-block-end: 1px solid var(--neutral--dark);
padding-block-end: 0.2rem;
}
a:where([href]) {
cursor: pointer;
@include mixins.link();
}
:where(.prose) a:where([href]) {
&:not(:has(img)) {
@include mixins.inlineLink();
word-break: break-word;
}
}
.plainLink {
@include mixins.plainLink();
}
.plainLink--inverse {
@include mixins.plainLinkInverse();
}
.pageLink {
@include mixins.blockLink();
}
.pageLink--inverse {
@include mixins.blockLink($inverse: true);
}
:where(p) {
margin-block-end: 1em;
margin-block-start: 1em;
&:first-child {
margin-block-start: 0;
}
&:last-child {
margin-block-end: 0;
}
}
strong,
b {
font-weight: var(--bold-weight);
}
em,
i {
font-style: italic;
}
.lead {
font-size: clamp(1.1563rem, 1.1236rem + 0.163vw, 1.25rem);
}
.boldIcon {
@include mixins.boldIcon();
}
// placeholder space for font awesome icons to avoid shifted layout when they load
html.fontawesome-i2svg-pending {
.fa-fw {
width: 1.25em;
display: inline-block;
}
}
No notes defined.