diff options
| -rw-r--r-- | docs/content/typography.md | 16 | ||||
| -rw-r--r-- | scss/_type.scss | 41 |
2 files changed, 29 insertions, 28 deletions
diff --git a/docs/content/typography.md b/docs/content/typography.md index 846852a95..fec257e25 100644 --- a/docs/content/typography.md +++ b/docs/content/typography.md @@ -147,22 +147,22 @@ Add `.initialism` to an abbreviation for a slightly smaller font-size. ## Blockquotes -For quoting blocks of content from another source within your document. Wrap `<blockquote>` around any <abbr title="HyperText Markup Language">HTML</abbr> as the quote. For straight quotes, we recommend a `<p>`. +For quoting blocks of content from another source within your document. Wrap `<blockquote class="blockquote">` around any <abbr title="HyperText Markup Language">HTML</abbr> as the quote. For straight quotes, we recommend a `<p class="blockquote-text">` or list `<ul class="blockquote-list">` , `<ol class="blockquote-list">`. {% example html %} -<blockquote> - <p>Lorem ipsum dolor sit amet, consectetur adipiscing elit. Integer posuere erat a ante.</p> +<blockquote class="blockquote"> + <p class="blockquote-text">Lorem ipsum dolor sit amet, consectetur adipiscing elit. Integer posuere erat a ante.</p> </blockquote> {% endexample %} ### Naming a source -Add a `<footer>` for identifying the source. Wrap the name of the source work in `<cite>`. +Add a `<footer class="blockquote-footer">` for identifying the source. Wrap the name of the source work in `<cite>`. {% example html %} <blockquote class="blockquote"> - <p>Lorem ipsum dolor sit amet, consectetur adipiscing elit. Integer posuere erat a ante.</p> - <footer>Someone famous in <cite title="Source Title">Source Title</cite></footer> + <p class="blockquote-text">Lorem ipsum dolor sit amet, consectetur adipiscing elit. Integer posuere erat a ante.</p> + <footer class="blockquote-footer">Someone famous in <cite title="Source Title">Source Title</cite></footer> </blockquote> {% endexample %} @@ -172,8 +172,8 @@ Add `.blockquote-reverse` for a blockquote with right-aligned content. {% example html %} <blockquote class="blockquote blockquote-reverse"> - <p>Lorem ipsum dolor sit amet, consectetur adipiscing elit. Integer posuere erat a ante.</p> - <footer>Someone famous in <cite title="Source Title">Source Title</cite></footer> + <p class="blockquote-text">Lorem ipsum dolor sit amet, consectetur adipiscing elit. Integer posuere erat a ante.</p> + <footer class="blockquote-footer">Someone famous in <cite title="Source Title">Source Title</cite></footer> </blockquote> {% endexample %} diff --git a/scss/_type.scss b/scss/_type.scss index 35780d39e..da286e53a 100644 --- a/scss/_type.scss +++ b/scss/_type.scss @@ -125,24 +125,24 @@ mark, margin-bottom: $spacer; font-size: $blockquote-font-size; border-left: .25rem solid $blockquote-border-color; +} - p, - ul, - ol { - &:last-child { - margin-bottom: 0; - } +.blockquote-text, +.blockquote-list // ul, ol + { + &:last-child { + margin-bottom: 0; } +} - footer { - display: block; - font-size: 80%; // back to default font-size - line-height: $line-height; - color: $blockquote-small-color; +.blockquote-footer { + display: block; + font-size: 80%; // back to default font-size + line-height: $line-height; + color: $blockquote-small-color; - &::before { - content: "\2014 \00A0"; // em dash, nbsp - } + &::before { + content: "\2014 \00A0"; // em dash, nbsp } } @@ -153,12 +153,13 @@ mark, text-align: right; border-right: .25rem solid $blockquote-border-color; border-left: 0; +} - // Account for citation - footer { - &::before { content: ""; } - &::after { - content: "\00A0 \2014"; // nbsp, em dash - } +.blockquote-reverse .blockquote-footer { + &::before { + content: ""; + } + &::after { + content: "\00A0 \2014"; // nbsp, em dash } } |