My layout template creates a header at the top of the page. There are three elements not included in this page’s markdown source:

1. The homepage link / site “title” in the top left
   • I set the title as “vanyaa.dev”. to mirror the url, for simplicity
2. The post title, as an H1
3. An HR to distinguish the post title from the other H1s.

Using Multiple H1s

Common advice is to only have a single H1 on the page. I disagree, and apparently so does google. You can have all the H1s you want.

There should only be one Title per page, and that title should be visually distinct from your primary section headers. As the <title> tag is reserved for the head section, we make titles with H1’s and CSS.

We’ve covered h1s, titles, italicized text, and some inline-code.

An H2 for Content Types

Let’s explore content types.

[H3] Lists!

• This is a list
• Lorum ipsum and all that jazz
• Boutta go crazy with a
  • nested
  • item
• All day long.

And don’t forget about:

1. Ordered lists!
2. They are ordered
   • And can have unordered sublists
   • with multiple children
3. All day long.

H3 BlockQuotes and CodeBlocks

“I Love Blockquotes” - Vanya A

Code blocks are going to be a clusterfuckle.

cargo install unfuck-codeblocks

type Square = {
    width: number;
    height: number;
};

And we can’t forget about inline code styles. We need to test inline styles in longer-format paragraphs, because we want some margin above and below the text, for the background. But, if we do it wrong, that margin will make one line of the paragraph have a different line-height then the others. This would be bad. I also want to see if the syntax highlighter will goof with inline stles? We shall see.

That’s getting close to everything I can think of.

H4 gets super small

H5 is too small?

I will never use an H6 in my life

If you need an H6, you’ve done something wrong. I want to style an H6 as essentially normal bold text.

Time to get funky with it.

Consider this the stress-test section.

Nested Nested Nested

console.log('Hello World');

And a nested BQ

Here are things I like:

• Tight list integration
• Double nested block quotes with ULs, with
  multiline children

• Code blocks as list item content?
  

• And now for something extra spicy:

  Another block quote! As a child of a list item!

  With even more code blocks - maybe even one with so much text on one line that it has to wrap? Do we want codeblocks to wrap? How do scrollbars even work dude
  

Let’s test how things end, with/without content, for margin collapsing.

Breaker 1

hi

Breaker 2

That’s all I can think of, and probably all I’ll use.

That was a lie. We’ve got details and summary elements, and even images, over at perfect-documentation

Cheers,
- Vanya A