Style Guide

Fonts

I use system fonts so no extra fonts have to be downloaded because of my website. I got these system font stacks from systemfontstack.com.

Serif: -apple-system, BlinkMacSystemFont, "Avenir Next", Avenir, "Helvetica Neue", Helvetica, Ubuntu, Roboto, Noto, "Segoe UI", Arial, sans-serif;

Monospace: Menlo, Consolas, Monaco, "Liberation Mono", "Lucida Console", monospace;.

Colours

The teal is my favourite colour. The rest are just to achieve enough contrast whilst trying not to be too contrasty, which I also find hard on the eyes. The excessive in-between levels of black and grey are only there to make the code blocks look decent.

Literally black - #000000
Darker black - #242424
Black - #313131
Dark Grey- #888888
Medium grey - #bbbbbb
Light grey - #e1e1e1
White - #fbfbfb
Colour - #0091ab
Colour dark mode - #64d1dd

Images

A smallish plain image

Montreal from Mount Royal

A figure with caption, intentionally wider than my width

Kira McLean
That's me! A very old picture, but it's my face everywhere on the internet and I still look the same.

Email signup form

Headers

XL Heading (h1)

Large heading (h2)

Medium heading (h3)

Small heading (h4)

Everything else

a visited link and an unvisited link -- don't click this!

  1. there are
  2. also sometimes
  3. ordered lists

some code in the middle of a line

;; some code
;; in a block that's really really long and needs to scroll horizontally because one line won't fit within my max width

small text, like the dates on the home page or in the footer

blockquote text but long enough to wrap onto two lines so I can see what it looks like and make sure the styles work well

Just a paragraph with emphasized text and strong text to see what normal text looks like. Followed by a page break, to see what those look like.

Description list
Use these to mark up lists of definitions
dt
A description list item title
dd
A description list item definition