Styling the Blog Index

I worked on what I figured would be a very quick update to this website today: adding the date of publication of blog entries to the blog index. It took a bit more time than I had anticipated.

Goal

The blog index lists blog entries in reverse-chronological order: newest entries are at the top. The entries are organized in lists under year and month headings, which have id attributes set so that they may be used as fragments in URLs. (Since identifiers may not start with a number, year identifiers are in t-YYYY format and month identifiers are in t-YYYY-MM format.)

The goal of the update is to also display the day to the left of the blog entries. While the vast majority of days will only have one blog entry, some days may have multiple blog entries, in which case the day should only be displayed to the left of the first (most recent) entry.

Currently, the blog index is created by generating Markdown, which is rendered into HTML. My implementation uses definition lists because they are supported in Markdown and have a structure that matches the above goal. In the future, I may instead generate HTML directly in order to use semantically-appropriate markup.

Grid Layout

My first attempt used a Grid layout, which is very simple!

.tidx dl {
  display: grid;
  grid-template-columns: max-content auto;
}

.tidx dt {
  grid-column-start: 1;
  padding: 0 1rem;
}

.tidx dd {
  grid-column-start: 2;
}

It looked great on my development system, in both Firefox and Chrome. Testing using Chrome on my mobile phone, however, it did not work. I thought that Grid layout has been widely supported for years, but it seems that I am mistaken, unfortunately.

Flexbox Layout

My second attempt used a Flexbox layout, because responses to an answer to a question on Stack Overflow are very positive. I did not get it working, as I expect that this method only works when there is a single definition (blog entry) per term (day).

Float Layout

Eventually, I decided to just use a float layout.

.tidx dt {
  float: left;
  text-align: center;
  width: 3rem;
}

.tidx dd {
  margin-left: 3rem;
}

This seems to work fine across all of the browsers that I can conveniently test at the moment. Float layouts have been part of CSS since level 1, so they are very widely supported. They are also well known for being fragile, however, so I will not be surprised if I need to revisit this change again in the future.