While redesigning my website I needed a way to get a proper look at what the various HTML elements look like as I was making the changes, so I'm writing this post to do just that. I also want to mention some of the choices made in the design of the website.

The website only has a dark mode. I find that it's much easier on my eyes, and easier to read any time of day. Especially so at night when I want to look something up real quick.

I decided to use the Atkinson Hyperlegible font for the body text on the site this time around. I like the way it looks and it is, at least supposedly, designed to be easier to read than other fonts. I find it nice to read myself and quite like the font. The headings use Charter, and the code examples use JetBrains Mono.

I'm quite happy with this mix of fonts, I think they go really well together.

The colors in use are all based on the Open Color palette. I didn't want to come up with all the colors myself, so I decided to pick colors from there. I think this turned out quite nice.

There are some color combinations I'm not quite happy with, e.g. the <code> elements, but they're not terrible. I'm also not quite happy with the colors for links. I'll probably tweak these a bit in the future.

The stylesheet sets variables to control the various colors and spacings on the site, mostly intended to make it easy for me to tweak the design later. I don't think this will be the final iteration of this particular design, but it looks good enough right now.

Having read a recent post from Bradley Taunt on sticky table headings I've gone ahead and made the table headers for the one table on this site sticky.

And finally I decided to append a little icon to external links. I chose to go with the ISO symbol for "Escape", which looks like this: ⎋. You'll see this icon appended to any external links on the site.

A look at the various HTML elements

This is an h1 tag

This is an h2 tag

This is an h3 tag

This is an h4 tag

This is an h5 tag

This is an h6 tag

This is a paragraph.

This is a link.

This is an external link to Wikipedia.

• This is an item in an unordered list.
• This is a nested item in a nested list.

1. This is an item in an ordered list.
1. This is a nested item in a nested list.

This is a quote.

This is a cite tag

This is a pre tag.

// This has C++ code.
int main() {
	return 0;
}

// This has JavaScript code.
const fn = () => {
	return 0;
}