Interactive CSS

I came across a Substack post showcasing modern HTML and CSS interactive patterns that replaces what can only be done by JavaScript in the past. There were code snippets but no demo. Enjoy!

Text Fragments with Deep-link and Highlight Text

• Item one
• Item two
  • Nested item
• Item three

Headings

Use ## for h2, ### for h3 headings. They will appear in the table of contents.

Sub-heading Example

This is a sub-heading that also appears in the TOC.

Text Formatting

You can use bold, italic, strikethrough, and inline code.

Code Blocks

function greet(name) {
  console.log(`Hello, ${name}!`);
}

greet("Breeze");

Lists

• Item one
• Item two
  • Nested item
• Item three

1. First
2. Second
3. Third

Blockquotes

The best way to predict the future is to create it.

Links and Images

Visit Astro to learn more about the framework.

Tables

Task Lists

• Set up the theme
• Write your first post
• Deploy to production