Test Post: Images, Videos, and Typography

A test post to verify blog rendering. Contains various layout elements: images, videos, code blocks, quotes, tables, lists, and more.

Image Tests

Single Image

This image shows a placeholder. In practice, you can use local images or external links.

Multiple Images

YouTube Video Test

Note: The above is a test video (Rick Astley - Never Gonna Give You Up). For actual use, replace the video ID in the src.

Responsive Video Container

<div style="position: relative; padding-bottom: 56.25%; height: 0; overflow: hidden;">
  <iframe style="position: absolute; top: 0; left: 0; width: 100%; height: 100%;"
    src="https://www.youtube.com/embed/YOUR_VIDEO_ID"
    frameborder="0"
    allowfullscreen>
  </iframe>
</div>

Code Block Tests

JavaScript

// Test code block
function greet(name) {
  return `Hello, ${name}!`;
}

const message = greet('World');
console.log(message);

CSS

/* Scandinavian color palette */
:root {
  --bg-primary: #F8F6F2;
  --bg-secondary: #EDE8DF;
  --text-primary: #2B2B2B;
  --text-secondary: #5A5A5A;
}

HTML

<!-- Article structure example -->
<article>
  <header>
    <h1>Article Title</h1>
    <time>2026-06-22</time>
  </header>
  <div class="content">
    <!-- Article content -->
  </div>
</article>

Blockquote Tests

Perfection is achieved not when there is nothing more to add, but when there is nothing left to take away. — Antoine de Saint-Exupéry

Design is not just what it looks like and feels like. Design is how it works. — Steve Jobs

Table Tests

Item	Description	Status
Astro	Static site generator	✅
Netlify	Free hosting platform	✅
Cloudflare	CDN + DNS	⏳
Catbox	Free image hosting	✅

List Tests

Unordered List

• Item 1
  • Sub-item 1
  • Sub-item 2
• Item 2
• Item 3

Ordered List

1. First step
2. Second step
3. Third step

Other Tests

Bold and Italic

This is bold text, this is italic text, and this is bold italic text.

Inline Code

Use npm install to install dependencies, then run npm run dev to start the dev server.

Links

Visit my blog

Divider

---

Conclusion

Test complete. If all the elements above render correctly, the blog’s typography is working as expected.