Writing a Truth Oracle in Lisp
5 comments
·June 11, 202590s_dev
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
typesarecool
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;
}
}lkuty
And the fonts come from https://github.com/georgd/EB-Garamond-Initials
wavemode
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.
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.