Notes – Vegas Harmon

As you could tell if you are reading this, vegasharmon.com is now live and functional. While the site has been up for several months now, it was in a sort of limbo until today, containing filler posts, broken CSS, and half-baked features. Now it’s closer to three quarters-baked. Moreover, I am starting to actually feel competent manipulating all the different style and layout files.

I would like to highlight a few features I implemented or refined:

Dropcaps: This was very satisfying, and ended up being much easier than I anticipated. For now, I am just making the first letter of every content__body div a dropcap as shown below:

  /* Adds dropcap to first letter */
  .content__body p:first-child:first-letter {
      font-family: goudy-dc, serif;
      font-size: 7rem;
      float: left;
      line-height: .6;
      margin-right: 0.05em;
      initial-letter: 2;
  }

This does have the goofy side effect that other divs and sections also get dropcaps, which does not look good. To fix it, I made this little ad-hoc bit of CSS:

  /* Ensures dropcaps do not show up in blockquotes, verse divs, or footnotes */
  .content__body li p:first-child:first-letter,
  .content__body .footnotes p:first-child:first-letter,
  .content__body .verse p:first-child:first-letter,
  .content__body blockquote p:first-child:first-letter {
      font-family: "Alegreya";
      font-size: 20px;
      float: none;
      line-height: 1.5rem;
      initial-letter: 0;
      margin-right: 0em;
  }

There is probably a more elegant solution, but this will work for now. It does present the issue of how to add custom dropcaps for certain series/taxonomies/or just ad-hoc, but I will deal with that when the need arises.

UPDATE 2025-08-31: see note.

Proper indentation and justification: Pretty self-explanatory. This little bit of CSS hands the indentation very elegantly:

  /* Indents any paragraph that directly follows another paragraph */
  .content__body p + p {
    text-indent: 1.5em;
  }

Footnotes: Hugo uses Goldmark to render its markdown files into HTML. Unfortunately, this means that anything that happens between markdown and HTML is more or less immutable on the Hugo side. This causes problems for footnotes, since they are rendered with Goldmark and their HTML structure cannot be changed. I wanted to style my footnotes a bit, so this was an obstacle. Luckily, while looking into this, I found this post which showed me a neat little trick: since you can put arbitrary html in Hugo markdown, if you put a <details> tag at the end of your post before the footnotes in markdown (or org in my case) and don’t close it, it will wrap the footnotes in that tag. You can moreover add a class to that tag and then use that to style the footnotes. So, I did exactly that.
Footnote separators: Goldmark also inserts this annoying little <hr> tag between your post content and the footnotes. As mentioned earlier, you cannot change this. I wanted to look a little fancier, so I had to find a workaround. It turns out that since it is nested in a div of class “footnotes,” you can do this:
```
  .footnotes hr {
      display: none;
  }
```
And that gets rid of the <hr>. I replaced that with a variety of engravings I mostly found on the Wikimedia Commons using the search term “fleuron.” To do both the footnote styling and the separator, I place this little bit of html at the end of my posts:
```
  <img class="separator" src="/images/separator_1.png">
  <details class="footnotes"><summary><strong>Notes</strong></summary>
  <br>
```
Sidenotes: I originally designed this website with sidenotes in mind. I tried a variety of implementations, but they were all too messy for my taste. If you use footnotes to generate sidenotes, you run into a lot of problems because of Goldmark. So the obvious next solution is to use shortcodes. This works, but it makes writing a lot more cumbersome. I could probably set up some automation, but that would probably be more effort than it is worth, and would probably still add at least 1 extra step to every export.

Even if you do use shortcodes, there isn’t a neat CSS-only solution to have both sidenotes and endnotes/footnotes that link between each other and are generated from the same source. This is an issue for narrow viewports. Most people that I have seen resort to pop-ins or just don’t render them at all on mobile. I originally implemented sidenotes on a narrow viewport as pop-ups. I am also interested in floating sidenotes, and may pursue that further, as that is an actual typographical convention used in some books. However, in the end most of the options for CSS-only sidenotes either lose functionality or just look ugly/disrupt the intended flow of the page/get in the way—all of which go against my very reason for wanting sidenotes in the first place (elegant, easy to reference, and unobtrusive).

So, for the moment, I am simply not implementing them at all. If I do, it will probably be as floating sidenotes or using some javascript solution. Of course, as I have stated elsewhere on this site, I am not a huge fan of JS. But perhaps one or two features may be acceptable.

Those are most of the interesting things I worked on. I made several other QOL changes like making the site header look acceptable on mobile, but those are not as cool.