Styling the list of posts

We left the article list with its markup ready to be styled. The default <ul> styles don't really make for an enticing experience, so let's see how to turn it into its final state.

Screenshot of the article list

Thinking about space, again

Spacing lists of items with a transparent background requires deciding whether to use margin or padding. The transparent backgroung blurries the distinction between the space inside the elements and the space outside them.

Another way to look at it than inside/outside is deciding whether the space looks around or between the content of each items. Between translates nicely to margin, while around will likely become padding. Dividers, especially, will make the space feel "around the content". They're not the only thing though. The area offered to clicks/taps for interacting might also dictate that the space is around too.

Given the divider between each article, padding it is for the articles list. Because this padding is due to the elements being in the list, I prefer attaching the styles to the selector of the post-list rather than to the item. This makes it a central point to control the look of the list, on top of removing the default styling for <ul>.

.post-list {
  list-style-type: none;
  padding: 0;

.post-list > * {
  padding-top: 1rem;
  padding-bottom: 1rem;

With the elements properly spaced, time to add the dividers.

Painting separators

Each article is separated from its neighbour not by a full border, but a lighter small line. This rules out border for implementing it. Regardless of the solution, the styles would be born again by the .post-list selector, to keep it the centre for all styles of the list. Using the * + * combinator, we can make sure the separator appears only between each element.

There's (at least) 3 options for drawing the border:

Either will do to draw the separator. Varying the gradient, there's surely ways to draw dashes, but let's leave that for another article.

A large interactive area

The large text size for the title already give a good area to click/tap on. It can be further enlarged by letting people click anywhere on each item of the list. Unfortunately, wrapping the whole <li> inside an <a> is not valid HTML. It would also require some extra care with the accessible name of the <a>, to avoid the whole content of the <li> to be used for it (title followed by date). Cumbersome to consume for users of assistive tech. Let's find another route.

Instead, we can make the interactive area of the <a> inside the <li> grow to match its parent. ::before and ::after pseudo-elements can also receive interactions. Positioning one of them to cover the whole <li> will render the whole area clickable.

There's a price though, users won't be able to select the text inside the <li> anymore. It's still a lighter option than bringing in JavaScript to handle click events (and avoid firing when users are selecting text, and handle Ctrl click correctly...).

This time, it's the responsibility of each item to make enlarge its interactive area, so the styles will be attached to .post-list-item:

.post-list-item {
  position: relative;  
  z-index: 0;

.post-list-item a::before {
  content: '';
  display: block;
  position: absolute;
  top: 0;
  left: 0;
  right: 0;
  bottom: 0;
  z-index: 1;

And there we are, a presentable list of articles. This leaves only the RSS feed to tackle and the site will be in its relauch state. Another list of articles, then, for the next post, just with a slightly different markup.