Styles

This is my style guide. I also have a colophon, which explains what I used to build my website. This document talks more about the visual design.

Voice & Tone

My "brand" is a visual representation of my personality and goals. I would like to exhibit formal, clean, and sensible. Another value I'd like to display is friendliness. I want to be kind, warm, and inviting. This dichotomy of logic and emotion influences all my decisions, and I want my brand to reflect that.

Typography

• Font stack is just system fonts (sans-serif and color emoji)
• Body font size is usually 18px, and 16px on smaller screens

We really only use 3 levels of headings. This is largely for visual taste, readability, and the user's sanity. Unless you're writing an academic report, web pages generally aren't detailed enough to merit a 4 levels of headings. If you feel the need for a 4th level, try restructuring your content and/or using different components.

Block-level Elements

This is a blockquote

1. List
2. of
3. Things

function foo(bar) {
    return bar;
}

Button

Inline Elements

• Keyboard Input: Enter
• Inline code - Inline Code
• This is an internal text link.
• This is an external text link
• Strong is used to indicate strong importance.
• This text has added emphasis.
• The b element is stylistically different text from normal text, without any special importance.
• The i element is text that is offset from the normal text.
• The u element is text with an unarticulated, though explicitly rendered, non-textual annotation.
• This text is deleted and This text is inserted.
• This text has a strikethrough
• Superscript^®.
• Subscript for things like H₂O.
• This small text is small for for fine print, etc.
• Abbreviation: HTML
• This text is a short inline quotation.
• This is a citation.
• The dfn element indicates a definition.
• The mark element indicates a highlight.
• The variable element, such as x = y.
• A footnote is... a footnote^[1].