<div class="bux-mar-bottom-md">
<h1 class="bux-h1">This is a Heading 1 example</h1>
</div>
<div class="bux-mar-bottom-md">
<h2 class="bux-h2">This is a Heading 2 example</h2>
</div>
<div class="bux-mar-bottom-md">
<h3 class="bux-h3">This is a Heading 3 example</h3>
</div>
<div class="bux-mar-bottom-md">
<h4 class="bux-h4">This is a Heading 4 example</h4>
</div>
<div class="bux-mar-bottom-md">
<h5 class="bux-h5">This is a Heading 5 example</h5>
</div>
<div class="bux-mar-bottom-md">
<h6 class="bux-h6">This is a Heading 6 example</h6>
</div>
<div class="bux-mar-bottom-md">
<h1 class="bux-h1--alt">Alternate H1</h1>
</div>
<div class="bux-mar-bottom-md">
<h2 class="bux-h2--alt">Alternate H2</h2>
</div>
{% for i in 1..6 %}
<div class="bux-mar-bottom-md">
<h{{i}} class="bux-h{{i}}">This is a Heading {{i}} example</h{{i}}>
</div>
{% endfor %}
<div class="bux-mar-bottom-md">
<h1 class="bux-h1--alt">Alternate H1</h1>
</div>
<div class="bux-mar-bottom-md">
<h2 class="bux-h2--alt">Alternate H2</h2>
</div>
site_name_prefix: Office of
site_name: Learning Relations Excellence
site_slogan: Additional text or site slogan
address_1: 100 Building Name
address_2: 1 Oval Mall
city: Columbus
state: OH
zip: '43210'
contact_email: email@osu.edu
contact_phone: 614-292-OHIO
contact_tty: 614-688-8605
// Heading mixin.
@mixin heading(
$size,
$height,
$weight,
$color: $gray-dark-80,
$font: $sans,
$link-color: $scarlet
) {
font-size: $size;
line-height: rem-calc($height);
font-weight: $weight;
font-family: $font;
color: $color;
margin: 0;
margin-bottom: $sp-8;
a {
text-decoration: none;
color: $link-color;
&:hover {
text-decoration: underline;
}
}
}
// Heading elements at small breakpoint.
@include breakpoint(sm) {
h1,
.bux-h1 {
@include heading($ts-28, 36, 900, $font: $serif);
}
h2,
.bux-h2 {
@include heading($ts-md, 30, 800);
}
h3,
.bux-h3 {
@include heading($ts-20, 26, 600);
}
h4,
.bux-h4 {
@include heading($ts-18, 24, 600);
}
h5,
.bux-h5 {
@include heading($ts-base, 24, 600);
}
h6,
.bux-h6 {
@include heading($ts-base, 24, 600);
}
// Alternate headings.
h1.bux-h1--alt {
@include heading($ts-28, 36, 800);
}
h2.bux-h2--alt {
@include heading($ts-20, 26, 600);
}
}
// Heading modifications at medium and up.
@include breakpoint(md) {
h1,
.bux-h1 {
@include heading($ts-xl, 48, 900, $font: $serif);
}
h2,
.bux-h2 {
@include heading($ts-28, 36, 800);
}
h3,
.bux-h3 {
@include heading($ts-20, 26, 600);
}
// Alternate headings.
h1.bux-h1--alt {
@include heading($ts-xl, 48, 800);
}
}
No notes defined.