<p class="paragraph"><a class="link" href="#">This is a text link</a></p>
<p class="paragraph"><strong>Strong is used to indicate strong importance</strong></p>
<p class="paragraph"><em>This text has added emphasis</em></p>
<p class="paragraph">The <u>u element</u> is text with an unarticulated, though explicitly rendered, non-textual annotation</p>
<p class="paragraph"><del>This text is deleted</del> and <ins>This text is inserted</ins></p>
<p class="paragraph"><s>This text has a strikethrough</s></p>
<p class="paragraph">Superscript<sup>®</sup></p>
<p class="paragraph">Subscript for things like H<sub>2</sub>O</p>
<p class="paragraph"><small>This text is small for fine print, etc.</small></p>
<p class="paragraph">Abbreviation: <abbr title="HyperText Markup Language">HTML</abbr></p>
<p class="paragraph">Keybord input: <kbd>Cmd</kbd></p>
<p class="paragraph"><q cite="https://developer.mozilla.org/en-US/docs/HTML/Element/q">This text is a short inline quotation</q></p>
<p class="paragraph"><cite>This is a citation</cite></p>
<p class="paragraph">The <dfn>dfn element</dfn> indicates a definition.</p>
<p class="paragraph">The <mark>mark element</mark> indicates a highlight</p>
<p class="paragraph"><code>This is what inline code looks like.</code></p>
<p class="paragraph"><samp>This is sample output from a computer program</samp></p>
<p class="paragraph">The <var>variable element</var>, such as <var>x</var> = <var>y</var></p>
<p class="paragraph"><a class="link" href="#">This is a text link</a></p>
<p class="paragraph"><strong>Strong is used to indicate strong importance</strong></p>
<p class="paragraph"><em>This text has added emphasis</em></p>
<p class="paragraph">The <u>u element</u> is text with an unarticulated, though explicitly rendered, non-textual annotation</p>
<p class="paragraph"><del>This text is deleted</del> and <ins>This text is inserted</ins></p>
<p class="paragraph"><s>This text has a strikethrough</s></p>
<p class="paragraph">Superscript<sup>®</sup></p>
<p class="paragraph">Subscript for things like H<sub>2</sub>O</p>
<p class="paragraph"><small>This text is small for fine print, etc.</small></p>
<p class="paragraph">Abbreviation: <abbr title="HyperText Markup Language">HTML</abbr></p>
<p class="paragraph">Keybord input: <kbd>Cmd</kbd></p>
<p class="paragraph"><q cite="https://developer.mozilla.org/en-US/docs/HTML/Element/q">This text is a short inline quotation</q></p>
<p class="paragraph"><cite>This is a citation</cite></p>
<p class="paragraph">The <dfn>dfn element</dfn> indicates a definition.</p>
<p class="paragraph">The <mark>mark element</mark> indicates a highlight</p>
<p class="paragraph"><code>This is what inline code looks like.</code></p>
<p class="paragraph"><samp>This is sample output from a computer program</samp></p>
<p class="paragraph">The <var>variable element</var>, such as <var>x</var> = <var>y</var></p>
{
"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 options available within CKEditor. Some options may not be available depending on individual rights.