Theme Stress Test

Page designed to stress test the theme for /learn/code/play

You can use it to check:

Typography (headings, paragraphs, links, emphasis)
Code blocks (C, C++, JSON, YAML)
Callouts and blockquotes
Tables and lists
Cards, alerts, and buttons
Dark–mode colors and contrast

1. Headings & Basic Text

H2 – The Quick Brown Fox

H3 – The Quick Brown Fox

H4 – The Quick Brown Fox

H5 – The Quick Brown Fox

H6 – The Quick Brown Fox

This is a normal paragraph. It contains bold text, italic text, and bold italic text. It also contains inline code and a link to /learn/code/play.

Sometimes you may want to draw attention to a function_name() or a specific C keyword like return.

This is a blockquote. It should be clearly distinct from normal text, yet still readable in both light and dark modes.

2. Lists

Unordered List

First item
Second item with a bit more text to see wrapping behavior
Third item
- Nested item one
- Nested item two
  - Deeply nested item

Ordered List

Step one
Step two
Step three
1. Sub-step one
2. Sub-step two

Definition List

Term 1: Definition for term 1 which may span multiple lines of text in the rendered page.
Term 2: Another definition with bold and inline code for styling checks.

3. Tables

Simple Table

Language	Level	Notes
C	Beginner	Low-level, great for games
C++	Intermediate	More features, more complexity
Python	Advanced	High-level, slower for core

Wider Table

Feature	Supported?	Comments
Dark mode	Yes	Theme should look good with dark background
Code highlight	Yes	Needs good contrast for `C` and `C++`
Responsive layout	Yes	Should adapt to narrow / wide browsers

4. Code Blocks

C code sample

#include <stdio.h>

int main(void) {
    printf("Hello from /learn/code/play!\n");
    return 0;
}

C++ code sample

#include <iostream>

int main() {
    std::cout << "Hello from C++ at /learn/code/play!"
              << std::endl;

    int lives = 3;
    int score = 0;

    // Simple game loop
    while (lives > 0) {
        std::cout << "Lives: " << lives
                  << " | Score: " << score << "\n";
        // ... game logic would go here ...
        break; // Temporary, to avoid an infinite loop
    }

    return 0;
}

JSON configuration

{
  "project": "/learn/code/play",
  "tutorials": [
    {
      "title": "My First Game in C",
      "chapters": 5,
      "status": "draft"
    }
  ],
  "darkMode": true
}

YAML snippet

project:
  type: website
  title: "/learn/code/play"
  output-dir: _site

format:
  html:
    theme: darkly
    css: styles.css
    highlight-style: github
    toc: true

5. Math

Inline math: The game’s frame time might be approximately \(\Delta t = \frac{1}{60}\) seconds.

Display math:

\[ s = s_0 + v t + \frac{1}{2} a t^2 \]

We can use this later when we talk about basic physics in games.

6. Callouts

Below are all the callout types you plan to use.

Behind the scenes

This is a note callout. Useful for extra context that isn’t strictly necessary to complete the tutorial, but deepens understanding.

Try this

This is a tip callout. Great for exercises and small challenges you want the reader to attempt after reading a section.

Common pitfall

This is a warning callout. Use this when there’s a very common error, like forgetting a semicolon or introducing an infinite loop.

Caution

This is a caution callout. For example, when you talk about dangerous C features (like raw pointers) or undefined behavior.

Stretch goal

This is an important callout. Great for “stretch goals”: harder challenges that more advanced readers (or the parent in this father–son duo) can tackle.

7. Images

Inline Image

Placeholder image – game screenshot mock

You can replace the URL with a local image later to test your actual art.

8. Buttons, Badges, and Alerts (HTML)

These elements help you see how Bootstrap styles look under your theme.

Primary Badge Secondary Badge Success Badge Danger Badge

This is a primary alert—check colors and contrast.

This is a warning alert—should be readable but attention-grabbing.

This is a danger alert—used sparingly.

9. Cards / Panels (HTML)

Chapter 1

Set up your compiler and print your very first line of text.

Status: Draft

Chapter 2

Learn about input, variables, and branches with tiny text games.

Status: Draft

Chapter 3

Introduce loops and make your game feel alive with repeated turns.

Status: Draft

10. Embedded Content (iframe)

Use this to see how embedded content (like an Emscripten demo) fits within your layout and color scheme.

11. Horizontal Rule & Footer Text

This is footer-style text. It should be clearly separated from the main content but still legible:

/learn/code/play — theme test page