# 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

# Heading Text

# Monospace Text

# 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

• Here
• Is
• An
• Unordered list
  • First nested list item
    • Second nested list item

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

# 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

# Photos and Figures

Portrait photo without caption. (It should look like caption)

# 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.