terminal.css
terminal.css copied to clipboard
Fix blockquote empty overhang
When the blockquote element only contains a p element but no footer element or similar trailing tag, the ::after pseudo class paints a trailing empty line which only contains the ">" character. This is caused by an overhanging paragraph margin. Removing the margin for any last element contained in blockquote removes this visual glitch.
Example
The kitchen sink example on https://terminalcss.xyz demonstrates a block quote as follows:
<blockquote>
<p>
<em>This is a properly formatted blockquote, btw.</em> Measuring
programming progress by lines of code is like measuring aircraft building
progress by weight.
</p>
<footer>
<cite><a href="http://www.thegatesnotes.com">Bill Gates</a></cite>
</footer>
</blockquote>
which outputs in the browser as (line breaks by me for illustration purposes here)
> This is a properly formatted blockquote, btw. Measuring programming
> progress by lines of code is like measuring aircraft building
> progress by weight.
>
> Bill Gates
This works as expected. However, as soon as you leave out the footer
tag,
<blockquote>
<p>
<em>This is a properly formatted blockquote, btw.</em> Measuring
programming progress by lines of code is like measuring aircraft building
progress by weight.
</p>
</blockquote>
outputs as
> This is a properly formatted blockquote, btw. Measuring programming
> progress by lines of code is like measuring aircraft building
> progress by weight.
>
when it really shouldn't.
Thanks for the fix! I merged your change and will release it soon