Style Guide

A showcase of how different HTML elements appear on this site. It has some of my custom styles on top of the default Quartz v5 styles.

Spelling

I use Oxford spelling.

Punctuation

• Serial commas (aka Oxford comma)
• Spaces between initials of names (e.g., C. S. Lewis instead of C.S. Lewis)
• Periods included for abbreviations (e.g., G.P.O. Box instead of GPO Box)
• No s after nouns ending in s (e.g., James’ instead of James’s)

See the University of Oxford Style Guide for more.

Typeface

• Content Headings: BitterPro
• Body: IBMPlexSans
• Code/Site Title/Section Labels: Kode Mono

Headings

H1 is for the title of the page. H5 and H6 are not used.

Heading 1

Heading 2

Heading 3

Heading 4

Separator / Horizontal Rule

Stylized:

---

Unstyled:

---

Emphasis

bold
italic
bold and italic
strikethrough

Lists

Bullet / Unordered

• Item X
• Item Y
  • Item Z

Numbered / Ordered

1. Item A
2. Item B
3. Item C
   1. Item D

To Dos

• Completed task
• Pending task

Inline Code

This is an example of inline code within text.

Fenced Code Block

quartz.ts:

import { loadQuartzConfig, loadQuartzLayout } from "./quartz/plugins/loader/config-loader"
import { componentRegistry } from "./quartz/components" 
 
componentRegistry.setOptionOverrides("syntax-highlighting", {
  theme: { light: "min-light", dark: "vitesse-dark" },
  keepBackground: false,
})

Block Quote

If you seek to help, join the open source community and fight to keep the spirit of the press alive and the internet free. I have been to the darkest corners of government, and what they fear is light.

—Edward Snowden

Table

CMS	Language
Quartz	TypeScript, JavaScript, Node.js
Hugo	Go
WordPress	PHP
Zensical	Rust, Python

Images

Banner for EclecticPassions.net

Links

This is an internal link to my About page. And this is an external link to a writing community that I’m part of, called Web Writers’ Collective. Lastly, external links to point to Wikipedia are indicated with the W logo instead of the north-east arrow icon of external links.

Details and Summary

Click to open

Peekaboo!

Admonitions

Note

Aliases: “note”

Abstract

Aliases: “abstract”, “summary”, “tldr”

Info

Aliases: “info”

Todo

Aliases: “todo”

Tip

Aliases: “tip”, “hint”, “important”

Success

Aliases: “success”, “check”, “done”

Question

Aliases: “question”, “help”, “faq”

Warning

Aliases: “warning”, “attention”, “caution”

Failure

Aliases: “failure”, “missing”, “fail”

Danger

Aliases: “danger”, “error”

Bug

Aliases: “bug”

Example

Aliases: “example”

Quote

Aliases: “quote”, “cite”

Can callouts be nested?

Yes!, they can. And collapsed!

You can even use multiple layers of nesting.