Coding Cocoon

Hello, World!

Welcome to Coding Cocoon! This is the very first post, and it exists to exercise every prose element the styleguide supports.

Headings

Headings use IBM Plex Mono at different weights. Above is an h2; below is an h3.

A Third-Level Heading

Regular body text sits at 350 weight in IBM Plex Sans Variable. Bold text jumps to 550, while italic text uses 370 weight with a slightly muted color.

Here’s a link to the Astro documentation. Links are underlined by default and the underline disappears on hover.

Code

Inline code like const x = 42 uses IBM Plex Mono at weight 100 with a light background.

Code blocks get their own treatment with Shiki syntax highlighting:

function greet(name) {
  return `Hello, ${name}!`;
}

console.log(greet('world'));

Lists

Unordered lists use simple disc markers:

  • First item
  • Second item
  • Third item

Ordered lists have monospace counters:

  1. Set up the project
  2. Write some code
  3. Ship it

Blockquotes

“The best way to predict the future is to invent it.”

— Alan Kay

Keyboard Shortcuts

Press Ctrl + S to save, or Cmd + Shift + P to open the command palette.

That covers the basics. More posts coming soon!