delqn 20 hours ago

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.

90s_dev 4 days ago

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 18 hours ago

    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;
  }
}
  • wavemode 19 hours ago

    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.