Demo

Changes

• Text and background colors are set to --text and --background
• Font family for text is set to sans-serif
• Line height is set to 1.5
• Body has a max width of 720px.
• Anchor color is set --accent
• Blockquotes have a left border set to --accent
• Code and pre elements have a rounded background set to --code-background
• Footer element has a 4rem top margin and is centered

Text

Heading sizes have not been changed. Differences are usually minimal between browsers. You can change them yourself or use a CSS reset.

Heading 1

Heading 2

Heading 3

Heading 4

Heading 5

Heading 6 (does anyone even use h6?)

Here are some common inline elements:

• Bold, italic, strike through, underlined, and highlighted text
• inline code has been given a background and font size of 1rem

Links use the accent color variable.

Lists

• Item 1
• Item 2
1. Item 2.1
2. Item 2.2
• Item 3

1. Knock knock.
2. Who's there?
3. The IRS.

Blockquotes

Like links, blockquotes use the accent color variable for the left margin border.

Did you know...

...blockquotes can be nested!

Code Blocks

body {
    color: var(--text);
    background-color: var(--background);
    font-family: sans-serif;
    font-size: 1rem;
    line-height: 1.5;
    padding: 2rem;
    margin: 0 auto;
    max-width: 720px;
}

Horizontal Rule

Horizontal rules have been unchanged.

Also always, feel free to change them.

Images