# Style Guide

1,223 words
ORIGINAL: https://brennan.day/style/

This page demonstrates the various markdown elements and how they render on this site. It serves as both a reference and a test suite for typography and formatting.

## Typography

### Headings

# Heading 1

## Heading 2

### Heading 3

#### Heading 4

##### Heading 5

###### Heading 6

### Text Emphasis

Bold text for emphasis

Italic text for subtle emphasis

Bold and italic for strong emphasis

Strikethrough text for deletions

Underlined text (if supported)

Highlighted text for marking

### Inline Code

Use inline code for short code snippets like const variable = 'value'

## Block Elements

### Paragraphs

This is a regular paragraph. It contains multiple sentences to demonstrate how text flows and wraps. Lorem ipsum dolor sit amet, consectetur adipiscing elit. Sed do eiusmod tempor incididunt ut labore et dolore magna aliqua.

This is another paragraph after a blank line. Paragraphs should have appropriate spacing between them for readability.

### Blockquotes

This is a simple blockquote. It's used for quoting text or highlighting important information.

This blockquote has multiple paragraphs. Each paragraph in a blockquote should be properly formatted and indented.

Nested blockquotes are also possible. This is a quote within a quote.

You can have multiple paragraphs in nested quotes too.

### Lists

#### Unordered Lists

• First item
• Second item
  • Nested item
  • Another nested item
• Third item
  • Even deeper nesting
    • And deeper still
• Back to top level

#### Ordered Lists

1. First item
2. Second item
   1. Nested ordered item
   2. Another nested item
3. Third item
   • Mixed list types
   • Unordered in ordered
4. Fourth item

#### Task Lists

• [x] Completed task
• [ ] Incomplete task
• [ ] Another incomplete task
• [x] Another completed task
  • [x] Nested completed task
  • [ ] Nested incomplete task

#### Definition Lists (if supported)

Term 1 : Definition for term 1

Term 2 : Definition for term 2 : Second definition for term 2

## Code Blocks

### Fenced Code Blocks

// JavaScript example with syntax highlighting
function greetUser(name) {
  const greeting = `Hello, ${name}!`;
  console.log(greeting);
  return greeting;
}

// Call the function
greetUser("World");

# Python example with syntax highlighting
def fibonacci(n):
    """Generate Fibonacci sequence up to n."""
    a, b = 0, 1
    while a < n:
        yield a
        a, b = b, a + b

# Print first 10 numbers
for num in fibonacci(10):
    print(num)

/* CSS example */
.container {
  max-width: 1200px;
  margin: 0 auto;
  padding: 1rem;
}

@media (max-width: 768px) {
  .container {
    padding: 0.5rem;
  }
}

### Inline Code with Language

Here's some inline HTML: <button class="btn">Click me</button>

And some inline CSS: color: #ff6b6b; font-weight: bold;

## Links and References

### Basic Links

Link to Google

Link with title attribute

### Reference Links

Reference link

Another reference

### Internal Links

Link to projects page

Link to home page

### Email Links

Email me

## Images

### Inline Images

### Images with links

Hero doodle image

## Tables

### Basic Table

### Aligned Table

### Table with Markdown

## Horizontal Rules

Three types of horizontal rules:

## HTML Elements (if supported)

### Accordion/Details

Click to expand

This is hidden content that appears when you click the summary.

Nested details This is nested hidden content.

### Keyboard Keys

Press Ctrl + C to copy.

Press Cmd + Space for Spotlight.

### Superscript and Subscript

H2O is water.

E = mc2 is Einstein's equation.

### Citations

This is a statement that needs a citation.[1]

### Footnotes (if supported)

Here's a statement with a footnote[^1].

You can also have inline footnotes^[Like this one, which is inline].

And multiple footnotes[^2] in the same paragraph[^3].

[^1]: This is the footnote content. It can contain multiple sentences and even bold text or italic text.

[^2]: This is the second footnote.

[^3]: And this is the third footnote, which can also contain inline code if needed.

## Advanced Markdown

### Emoji

:smile: :heart: :thumbsup: :fire: :rocket:

### Mermaid Diagrams (if supported)

graph TD
    A[Start] --> B{Decision}
    B -->|Yes| C[Action 1]
    B -->|No| D[Action 2]
    C --> E[End]
    D --> E

## Typography Samples

### Abbreviations

HTML, CSS, JS, and HTTP are common web abbreviations.

### Figures and Figcaptions (if supported)

### Verse/Poetry (if supported)

Two roads diverged in a yellow wood,

And sorry I could not travel both

And be one traveler, long I stood

And looked down one as far as I could

## Testing Edge Cases

### Multiple blank lines above

### Multiple blank lines below

### Special characters

© ® ™ & < > " '

### Escaping characters

*Not italic*

*Not bold*

[Not a link](not-a-link.md)

`Not code`

## Colour Palettes

The site has two companion palettes: Sunflower for light mode and Moonflower for dark mode, vivid rainbows on near-black / near-white greyscale. Names follow the Name That Color dictionary.

### Sunflower (light mode)

Greyscale base:

Rainbow accents:

### Moonflower (dark mode)

Greyscale base:

Rainbow accents:

### Typefaces

Fonts are served by Bunny Fonts, a privacy-friendly, no-tracking font CDN:

## Color and Styling (if custom CSS)

Primary color text

Secondary color text

Success color text

Danger color text

Badge

Primary Badge

## Component Testing (if using components)

### Alert Boxes

Info: This is an informational alert.

Warning: This is a warning alert.

Danger: This is a danger alert.

### Buttons

Primary Button

Secondary Button

Outline Button