<blockquote class="quote">
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.
<p class="source">Quote Source</p>
</blockquote>
<blockquote class="quote">
{% block content %}
{{ blockquote_content }}
{% if blockquote_source|trim %}
<p class="source">{{ blockquote_source|raw }}</p>
{% endif %}
{% endblock content %}
</blockquote>
{
"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.",
"blockquote_content": "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.",
"blockquote_source": "Quote Source"
}
.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 blockquote.