This site really reminds me of Gwern's in terms of aesthetics — minimalist color theme, gorgeous, dense, and typographically thoughtful. I realize it's a bit of bike-shedding to focus on the presentation rather than the content, which is fascinating in its own right, but the resemblance struck me.
For anyone wondering how that initial letter is made to look like that:
1. The background flourish is created with ::before and a custom web font
2. The flourish letter is found via content: attr() on the parent element
3. The actual big letter itself is also done via custom web font & float: left
Looks like all the CSS is
/* Drop caps / .first-paragraph { position: relative; padding-top: 0.2em;
&::first-letter {
/* font-weight: bold; */
font-size: 4em;
float: left;
margin: 0.15em 0.05em 0 0;
font-family: 'EBGaramond-InitialsF2', serif;
font-display: block;
line-height: 0.83em; /* Fix alignment in Chrome */
}
&::before {
margin: 0.15em 0.05em 0 0;
font-size: 4em;
font-family: 'EBGaramond-InitialsF1', serif;
content: attr(data-first-letter);
color: gray;
position: absolute;
left: 0;
top: 0.28em;
}
}And the fonts come from https://github.com/georgd/EB-Garamond-Initials
It was only upon reading this comment that I even realized the initial letter is text. At first glance I assumed it was just an inline-block image.