Run-in headers
My site, denisdefreyne.com, used to have run-in headers. Getting them right was not trivial.
HTML:
<div class="run-in">
<h3 class="run-in__h">Header</h3>
<p class="run-in__p">Paragraph here.</p>
</div>
I use a Nanoc filter to automatically convert h3
followed by p
to an element like this.
CSS:
.run-in {
margin-top: 3rem;
}
.run-in__h {
float: left;
font-family: var(--font-face-run-in);
font-weight: 700;
font-size: var(--font-size-md);
margin: 0;
padding: 0 0.75em 0 0;
}
.run-in__h::before {
content: '';
padding-right: 0;
}
.run-in__p {
margin-top: 0;
}