Typography and Markdown Elements Test

This document serves as a live, renderable playground to visually inspect and verify every styling rule we have applied in the new blog.css. This ensures that across all dark and light modes, our documentation aesthetic remains clean, readable, and beautiful.

Here is a standard paragraph with bold text, italic text, and strikethrough text. You can also see an external link example to test the wavy hover interaction state we implemented.

---

1. Structured Data and Tables

Here is a standard markdown table to test the thead, th, tr, and td bindings, ensuring the borders collapse cleanly and the muted background works in dark mode.

Command	Description	Protocol
git clone	Clones a repository into a newly created directory	HTTP/SSH
git init	Creates an empty Git repository or reinitializes an existing one	Local
git fetch	Download objects and refs from another repository	HTTP/SSH
git merge	Join two or more development histories together	Local

---

2. Blockquotes and Callouts

Sometimes we need to highlight an important piece of text or a quote from the Git documentation.

“Git is a free and open source distributed version control system designed to handle everything from small to very large projects with speed and efficiency.”

— Linus Torvalds

We added a thick 4px left border using the primary theme border color to give this structure without being visually overwhelming.

---

3. Media: Images and Video

Below is a standard markdown image. It should be centered automatically with an elegant drop-shadow and a rounded border.

Embedded Video Content

We can also embed standard HTML5 <video> tags directly in MDX. They should inherit the exact same structural styling as the images above.

---

4. Code and Keyboard Shortcuts

When instructing users to run commands or manipulate code, we use standard code blocks. Notice the dark card background and the JetBrains Mono font.

// This is a sample code block to test pre and code tags.
function calculateSHA1(blob) {
  const crypto = require('crypto');
  const shasum = crypto.createHash('sha1');
  shasum.update(blob);
  return shasum.digest('hex');
}

console.log(calculateSHA1("test string"));

You can also use inline <kbd> elements to explain hotkeys to a user. For example, press Ctrl + C to exit the interactive rebase, or hit Esc followed by :wq in Vim.

---

5. Lists

Unordered List

• The .git/objects directory
• The .git/refs directory
  • heads/
  • tags/
• The HEAD file

Ordered List

1. Initialize a repository (git init)
2. Stage your files (git add .)
3. Commit the snapshot (git commit -m "Init")