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. — Dana Byerly

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 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;
});

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

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

Enjoying this site? Leave me a tip at Ko-fi!

Back to top