• 1. Heading Hierarchy
  • Third-Level Heading (H3)
    • Fourth-Level Heading (H4)
      • Fifth-Level Heading (H5)
• 2. Typography & Inline Styles
• 3. Lists
  • Unordered List
  • Ordered List
• 4. Data Tables
• 5. Task Lists
• 6. Images and Media
• 7. Horizontal Rules

1. Heading Hierarchy

Headings are the skeleton of your content. They should have distinct sizes and consistent vertical spacing.

Third-Level Heading (H3)

The H3 should feel like a clear subsection of the H2 above.

Fourth-Level Heading (H4)

Standard for deep dives or minor points.

Fifth-Level Heading (H5)

Rarely used, but should still be styled to look better than plain bold text.

2. Typography & Inline Styles

Good typography is about more than just a font. It’s about how different styles interact within a paragraph.

• This is bold text, used for emphasis.
• This is italicized text, used for titles or subtle emphasis.
• Sometimes you need to strike through an old idea.
• Here is an external link to Google to check your link colors and hover states.

The Blockquote Test: “Design is not just what it looks like and feels like. Design is how it works.” — Steve Jobs

Check if this quote has enough indentation, a distinct left border, or perhaps a slight background tint to make it stand out from the body text.

#!/usr/bin/python3
print("HEY!")

3. Lists

Lists can often have spacing issues, especially when nested.

Unordered List

• The first main bullet point.
• The second main bullet point.
  • A nested sub-item (check the indentation!).
  • Another nested sub-item with more text to see how it wraps around to the next line.
• The final bullet point.

Ordered List

1. First step in the process.
2. Second step in the process.
3. Third and final step.

4. Data Tables

Tables are often the “broken” element in responsive themes. Make sure this doesn’t overflow on mobile devices.

5. Task Lists

Task lists are a GitHub-flavored Markdown favorite. Check the alignment of the checkboxes.

• Initial theme setup
• Fixed Prettier TOC formatting issue
• Implement Dark Mode toggle
• Optimize image loading

6. Images and Media

Images should be responsive—they should never be wider than their container.

Figure 1: A caption for the image. Is the font smaller? Is it centered? Does it have enough top margin?

7. Horizontal Rules

The line below is a separator (---). It should be visible but not distracting.

End of Test Post. If everything looks aligned and the spacing feels “breathable,” your theme is in great shape!

• Table of Contents
• Design Principles
  • Visual Hierarchy
  • Typography Standards
• Technical Implementation
  • Markdown Integration
  • Navigation Logic
• Final Summary

Design Principles

This section covers the core philosophy of the theme. The paragraph text here allows you to check the vertical rhythm between the H2 heading and the body copy, ensuring the padding is balanced.

Visual Hierarchy

By using H3 subheadings, we create a nested structure. This paragraph demonstrates how the theme handles smaller headings and whether the font size feels distinct enough from the main body text.

Typography Standards

A good theme should provide clear contrast. This text helps you verify that the font weight and color provide a comfortable reading experience across different screen sizes.

Technical Implementation

This second major section helps test how the theme handles repeated H2 elements. Consistency in spacing across multiple sections is key to a professional layout.

Markdown Integration

Jekyll uses Kramdown to render these headings. This paragraph is a test for standard paragraph rendering under an H3, ensuring that margins don’t collapse or become too large.

Navigation Logic

The Table of Contents at the top of the page links directly to these sections. You can use this area to test if the “jump-to” functionality works correctly and if your header offsets are configured.

Final Summary

This is the final H2 section. Use this paragraph to see how the theme concludes a post and how the bottom spacing interacts with your footer or “Next Post” navigation.

Level 2 Heading

This is a section with a level 2 heading. Let’s see how paragraphs are spaced out. Lorem ipsum dolor sit amet, consectetur adipiscing elit. Sed do eiusmod tempor incididunt ut labore et dolore magna aliqua.

Level 3 Heading

Here is a level 3 heading, followed by an unordered list:

• First item in the list
• Second item in the list
  • Nested item a
  • Nested item b
• Third item in the list

And an ordered list:

1. Step one
2. Step two
3. Step three

Code and Blockquotes

Let’s test inline code: console.log("Hello, world!").

And a fenced code block:

function greet(name) {
  return `Hello, ${name}! Welcome to the blog.`;
}
console.log(greet("World"));

Here’s a blockquote:

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

Links and Images

This is a link to the homepage.

If there are images, they would go here:

Conclusion: Let’s see how this all renders. Thank you for testing the layout!