HN Explorer

5 comments

[ 3.1 ms ] story [ 18.4 ms ] thread
90s_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

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.
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;
  }
}
delqn
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.