Add margin top to certain elements surrounded by code blocks for consistency

Take this structure:

<div .highlight>
<p>

<div .highlight>

The current post-single CSS adds margin to the bottom of the paragraph
and that's it. This works great when the previous element also got the
same amount of bottom margin, however code blocks do not! The end result
looks similar to the figure above.

This commit fixes this adding top margin to elements (as needed) that come
immediately after a code block (they have the .highlight class). The
amount of top margin added is the same they already get on the bottom.
This commit is contained in:
Richard Si 2023-01-08 14:13:58 -05:00
parent d3d90be8a4
commit 81e86113d6
No known key found for this signature in database
GPG key ID: 33F737A005EDF2DF

View file

@ -191,6 +191,13 @@
margin-bottom: 0;
}
.post-content .highlight + ol,
.post-content .highlight + p,
.post-content .highlight + figure,
.post-content .highlight + ul {
margin-top: var(--content-gap)
}
.post-content code {
margin: auto 4px;
padding: 4px 6px;