Style Guide

Below is a minimal style guide for this site, inspired in part by Chen Hui Jing’s Style Guide and the Poor Man’s Style Guide. The color palette isn’t currently included but in the meantime it’s pretty close to the one I used for the first version of this site. I’m also not currently using any form elements.

Table of Contents


Headings permalink

All headings within content pages have anchors. The site is currently only using h1-h4.

Heading 1 permalink

Heading 2 permalink

Heading 3 permalink

Heading 4 permalink


Headings with text permalink

Heading 1 permalink

Here’s some example text with h1.

Heading 2 permalink

Here’s some example text with h2.

Heading 3 permalink

Here’s some example text with h3.

Heading 4 permalink

Here’s some example text with h4.


Block elements permalink

Blockquote permalink

Here’s an example of a blockquote that includes a cite. — Dana Byerly

Images permalink

All images use figure and picture elements.

Image with text permalink

A large monstera plant in my apartment.
A monster Monstera plant in my apartment.

Image without text permalink

A large monstera plant in my apartment.

Paragraph text permalink

Here’s an example of paragraph text that is long enough to show line-height. Here is an example of a link that goes back to the homepage. And here is an example of bold text.


Code permalink

Code within text permalink

Here’s an example of mentioning code, like <figure> or display: flex within paragraph text.

Code snippets permalink

/* CSS */
.wrapper-content {
max-width: 45rem;
margin: 0 auto;
}
<!-- HTML -->
<h2 class="promo-article-title">
<a href="{{ item.url }}">{{ item.data.title }}</a>
</h2>
// JavaScript
config.addFilter("sortByNewest", arr => {
arr.sort((b, a) => (a.date) > (b.date) ? 1 : -1);
return arr;
});

Lists permalink

Ordered list standalone permalink

  1. Cats
  2. Dogs
  3. Horses

Unordered list standalone permalink

  • Cats
  • Dogs
  • Horses

List with longer text permalink

  • Here is a list example with more text to illustrate the line-height and spacing between the bullets.
  • In my opinion this nuance is often overlooked, resulting in the same amount of space between lines in a single bullet and between the bullets, making it harder to read.
  • Both ordered and unordered list using this spacing.

Ordered list within paragraph permalink

Here’s a list of some of the types of plants in my apartment.

  1. Aloe Vera
  2. Avocado tree (grown from a pit!)
  3. Monstera
  4. Parlor Palm
  5. Pothos
  6. Rubber plant
  7. Snake plant
  8. Various succulents

Unordered list within paragraph permalink

Here’s a list of some of the types of plants in my apartment.

  • Aloe Vera
  • Avocado tree (grown from a pit!)
  • Monstera
  • Parlor Palm
  • Pothos
  • Rubber plant
  • Snake plant
  • Various succulents

Table permalink

Crime DramaCountry of OriginNumber of Seasons
Line of DutyUnited Kingdom6
Sorjonen (Bordertown)Finland3
Innan vi Dör (Before We Die)Sweden2
Karppi (Dead Wind)Finland2
UnforgottenUnited Kingdom4