Styleguide

A single page for showcasing and testing the common styles and layouts for pages and posts on the site.

Table of Contents


Headings (this is an h2)

Heading level 2

H3

Heading level 3

H4

Heading level 4

H5

Heading level 5

H6

Heading level 6

Text

Body Text

Text is important, there are lots of things you can do with it!

This paragraph is for testing font features. The quick brown fox jumps over the lazy dog. 0987654321. tt TT Qq. Artificial, practical. Those words were for testing the ligatures from a 't' or an 'f' to an 'i'. italic bold italic bold

Heading Text

Text is important, there are lots of things you can do with it!

This paragraph is for testing font features. The quick brown fox jumps over the lazy dog. 0987654321. tt TT Qq. Artificial, practical. Those words were for testing the ligatures from a 't' or an 'f' to an 'i'. italic bold italic bold

Monospace Text

Text is important, there are lots of things you can do with it!

This paragraph is for testing font features. The quick brown fox jumps over the lazy dog. 0987654321. tt TT Qq. Artificial, practical. Those words were for testing the ligatures from a 't' or an 'f' to an 'i'. italic bold italic bold

Markdown

A paragraph of text with a link! Here's an emoji 👍. We can have italicized text, bold text, quoted text, and striked text. A mix of bold and italicized text

A blockquote, how cool is this!?

How about some inline code or keyboard sequences, Command + Tab?

We can also be super fancy and add footnotes[1] to our text to reference things[2]. You can also make them inline[3].

HTML

Here are some HTML elements to format text outside of markdown. I could configure it, but I don't really use these much, so inlining HTML on a static site seems fine if I do.

Computer output example with a <samp> element.

What if we want to highlight some text?

What do inserts look like?

Here is a subscript and a superscript!

Lists

  1. And
  2. Here
  3. Is
  4. An
  5. Ordered list

Definition Lists

Examples pulled from the Pandoc example. This uses the markdown-it-deflist plugin.

Term 1

Definition 1

Term 2 with inline markup

Definition 2

{ some code, part of Definition 2 }

Third paragraph of definition 2.

Term 3

Definition with lazy continuation.

Second paragraph of the definition.

Term 4

Definition 1

Term 5

Definition 2a

Definition 2b

Block of Code

function shuffle<T = unknown>(array: T[]) {
  let i = array.length;
  let j;

  while (i !== 0) {
    j = Math.floor(Math.random() * i);
    i -= 1;

    const swap = array[i];
    array[i] = array[j];
    array[j] = swap;
  }

  return array;
}

Tables

Column 1Column 2, Right Aligned
Thing 1Some more data here.
Thing 2Text text text.
Thing 3Did you know that 1+2=3?

Photos and Figures

Dusk at Bde Maka Ska
Dusk at Bde Maka Ska
Lake of the Isles Sunset 1
Sunset at Lake of the Isles
Lake of the Isles Sunset 2
Dusk at Lake of the Isles
Juelz at Skyway Theater, February 29th, 2020

Colors

Colors are set with CSS Custom Properties. This site supports a light and dark mode. The current theme is always set to your browser/operating system's preference, as set by the (prefers-color-scheme: dark) media query. Change your preference to see the different variations below.


  1. Here is the footnote. ↩︎

  2. Here's one with multiple blocks.

    Indented paragraphs belong to the previous footnote. Find the docs on the markdown-it-footnote docs. ↩︎

  3. This footnote is defined right next to the text that it's noting. ↩︎