styleguide.md

layout	title	description	modified	disableSubNav
layouts/page.njk	Styleguide	A page for testing the common styles and layouts on the site.	2021-07-03	true

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

{% include "toc.md" %}

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 {% emoji "👍", "thumbs up" %}. 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¹ to our text to reference things². You can also make them inline^[This footnote is defined right next to the text that it's noting.].

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

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 1	Column 2, Right Aligned
Thing 1	Some more data here.
Thing 2	Text text text.
Thing 3	Did you know that 1+2=3?

Photos and Figures

Dusk at Bde Maka Ska Sunset at Lake of the Isles Dusk at Lake of the Isles

<iframe width="560" height="315" src="https://www.youtube-nocookie.com/embed/woQsKqtrhfQ" frameborder="0" allow="accelerometer; autoplay; clipboard-write; encrypted-media; gyroscope; picture-in-picture" allowfullscreen></iframe>

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.

JavaScript is required to view this content.

{% renderTemplate "webc" %} {% endrenderTemplate %}

Footnotes

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