<h1 class="h1">This is a H1</h1>
<h2 class="h2">This is a H2</h2>
<h3 class="h3">This is a H3</h3>
<h4 class="h4">This is a H4</h4>
<h5 class="h5">This is a H5</h5>
<h6 class="h6">This is a H6</h6>
<p class="page-title">This is using class "page-title"</p>
{% block heading_content %}
{% for i in 1..6 %}
<h{{ i }} class="h{{ i }}">This is a H{{ i }}</h{{ i }}>
{% endfor %}
<p class="page-title">This is using class "page-title"</p>
{% endblock heading_content %}
{
"paragraph": "Lorem ipsum dolor sit amet, consectetur adipiscing elit. Donec mauris lorem, ultricies sed porttitor luctus, efficitur nec sem. Pellentesque rutrum iaculis venenatis. Cras congue diam quis sem facilisis, sed lacinia nulla elementum. In risus lectus, ullamcorper condimentum mattis vitae, maximus ut mi."
}
.page-title {
width: auto;
font-size: 3rem;
font-weight: 500;
line-height: 1.2;
}
h1,
.page-title {
font-family: $font-family-serif;
@include media-breakpoint-down(md) {
font-size: 2.875rem;
}
}
h1, h2, h3, h4, h5, h6, .h1, .h2, .h3, .h4, .h5, .h6 {
font-weight: 700;
}
h2,
.h2 {
color: $lehigh_brown;
font-size: 2.375em;
font-weight: 400;
@include media-breakpoint-down(md) {
font-size: 2.25rem;
}
.right-content & {
@include media-breakpoint-up(md) {
font-size: 2rem;
}
}
.color-scheme-dark & {
color: $lehigh_brown_darkmode;
color: var(--lehigh_brown_darkmode, $lehigh_brown_darkmode);
}
}
h3,
.h3 {
.right-content & {
@include media-breakpoint-up(md) {
font-size: 1.5rem;
}
}
}
h4,
.h4 {
.right-content & {
@include media-breakpoint-up(md) {
font-size: 1.25rem;
}
}
}
a {
color: $hyperlink;
color: var(--hyperlink, $hyperlink);
border-bottom: 2px solid $hyperlink;
border-bottom: 2px solid var(--hyperlink, $hyperlink);
text-decoration: none;
font-weight: bold;
@include transition;
&:hover,
&:focus {
text-decoration: none;
color: $black;
}
}
blockquote,
.quote {
color: $grey_darkest;
text-align: center;
font-size: 1.5rem;
border-top: solid 3px $lehigh_brown;
border-bottom: solid 3px $lehigh_brown;
margin: $space_two;
padding: $space_two;
position: relative;
&::before {
content: "“";
color: $lehigh_brown;
font-size: 20rem;
font-family: "Arial";
opacity: 0.1;
position: absolute;
top: -110px;
left: $space_neg_one;
.color-scheme-dark & {
color: $white;
color: var(--white, $white);
opacity: 0.2;
}
}
&::after {
content: "”";
color: $lehigh_brown;
font-size: 20rem;
font-family: "Arial";
opacity: 0.1;
position: absolute;
bottom: -250px;
right: $space_neg_one;
.color-scheme-dark & {
color: $white;
color: var(--white, $white);
opacity: 0.2;
}
}
.source {
margin: 1rem 0 0 0;
font-size: 1rem;
color: $grey_darkest;
font-style: italic;
&::before {
content: "- ";
}
.color-scheme-dark & {
color: $white;
}
}
.color-scheme-dark & {
color: $white;
border-top: solid 3px $lehigh_brown_darkmode;
border-top: solid 3px var(--lehigh_brown_darkmode, $lehigh_brown_darkmode);
border-bottom: solid 3px $lehigh_brown_darkmode;
border-bottom: solid 3px var(--lehigh_brown_darkmode, $lehigh_brown_darkmode);
}
}
pre {
.color-scheme-dark & {
color: $white;
}
}
hr {
.color-scheme-dark & {
border-top: 1px solid rgba(255, 255, 255, .2);
}
}
Show headings.