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
• Block elements
• Images
• Code
• Lists
• Table

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 #

Image without text permalink #

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 #