The Fifteenth Standard Style

The main purpose of this post is to use one of every text block type that I want this site to support so that I can test the styling of each of them. While I’m at it, I can also talk a little about the style that I’m going for.

My post drafting software (Draught, which I built specifically to write this blog) lets me write the posts in Markdown and converts them to HTML. As such, I want to support a decent chunk of Markdown, including obviously a main heading and body text, but also:

• ordered and unordered lists,
• block quotes,
• inline and block code snippets,
• and inline formatting like bold, italics, and strikethrough.

This entire website—the content, the HTML, the CSS, and the little JavaScript (which is only in the applets like Draught, not in any of the content pages)—was hand-written by me. Well, I just said that Draught generates the HTML, but I wrote the template and the conversion logic, so I have total control of it. I try to use semantic HTML as best as I understand it, and I use a very simple structure and layout that hopefully won’t ever need to be changed.

As for the style, I’m after a simple, clean, minimalist look. I started with a blank style.css and tried to only add to it to solve specific styling issues, and to use as simple a change as possible. I was very much inspired by the famous quote,

“Perfection is achieved, not when there is nothing more to add, but when there is nothing left to take away.”
 — Antoine de Saint-Exupéry

Not that I’m aiming for perfection, but it’s a nice approach that resonates with me.

My stylesheet is broken down into 6 main sections:

1. Variables,
2. font loading,
3. page layout,
4. font assignment,
5. structural styling,
6. and element styling.

The only thing left to show is a code snippets, so I’ll use them to gripe about code styling. Getting inline code and code blocks to both have a nice solid background with rounded corners is tricky. You can’t just style code because it’s an inline element and it would mean that for code blocks, the background would only render around the text, not the entire block, giving you an awful jagged shape depending on line lengths. However, you can’t style both code and pre because then your padding would double up (you need padding otherwise the background is too tight around the sides of the code). The solution is to style pre, and code but only which are not nested inside pre, like this:

:not(pre) > code, pre {
  background-color: var(--grey);
  border-radius: 4px;
  padding: 0px 4px;
}