Containers

layout.css provides layout containers and a card component for Whakerexa pages. Load it after wexa.css:

<link rel="stylesheet" href=".../wexa_statics/css/wexa.css" media="screen" />
<link rel="stylesheet" href=".../wexa_statics/css/layout.css" media="all" />

Variables

layout.css exposes the following CSS variables:

Simple panel

Use .panel for a basic block container that clears floats.

<div class="panel">
    Content
</div>

Scrolled panel

Use .scrolled-panel for a container with scrollable overflow. Set an explicit height to activate scrolling.

<div class="scrolled-panel" style="height: 4rem;">
    <!-- content taller than container -->
</div>

Flex panel

Use .flex-panel for a responsive row of items. Each child takes .flex-item. Width helpers (.width_30, .width_60, etc.) control proportions. On narrow screens the layout collapses to a single column. Add .flex-border-left to a .flex-item for a vertical separator.

<div class="flex-panel">
    <p class="flex-item width_30">30 %</p>
    <p class="flex-item width_40 flex-border-left">40 %</p>
    <p class="flex-item width_20 flex-border-left">20 %</p>
</div>

Grid panel

Use .grid-panel for an equal-column auto-fit grid. Items use .grid-item. The number of columns adapts to the available space.

<div class="grid-panel">
    <p class="grid-item">Cell 1</p>
    <p class="grid-item">Cell 2</p>
    <p class="grid-item">Cell 3</p>
</div>

Wrap panel

Use .wrap-panel for a row of items that keep their natural size and wrap to a new line only when space runs out. Each child takes .wrap-item. Unlike .flex-panel, there is no forced single-column collapse on narrow screens — wrapping follows the actual available space.

<div class="wrap-panel">
    <p class="wrap-item">Short item</p>
    <p class="wrap-item">A bit longer item</p>
    <p class="wrap-item">Even longer longer longer item</p>
    <p class="wrap-item">Yet another longer longer item</p>
</div>

Collapsible panel

Use the native HTML <details> / <summary> elements. No CSS class required — wexa.css styles them directly. Keyboard-accessible: Tab to focus, Enter or Space to toggle.

<details>
    <summary>Toggle me</summary>
    <p>Hidden content.</p>
</details>

Cards

Use .card on an <article> or <section> element. A card can contain up to three zones: .card-header, .card-body, .card-footer. Group cards in a .cards-panel container for a responsive grid layout.

<article class="card">
    <div class="card-body">
        <h2>Card title</h2>
        <p>Content</p>
        <a href="#">Learn more →</a>
    </div>
</article>

<article class="card">
    <div class="card-header"><h2>Title</h2></div>
    <div class="card-body"><p>Content</p></div>
    <div class="card-footer">
        <a href="#">Link</a>
    </div>
</article>

<section class="cards-panel">
    <article class="card">
        <div class="card-header">...</div>
        <div class="card-body">...</div>
        <div class="card-footer">...</div>
    </article>
</section>

<section class="full-cards-panel">
    <article class="card full-card">
        <div class="card-body">...</div>
        <div class="card-footer">...</div>
    </article>
</section>

Alternating section backgrounds

Direct .panel-item children of <main> alternate their background. Odd sections use --bg-color, even sections use --bg-color-alt.

The two colors are swapped, not overwritten: inside an even section, --bg-color-alt takes the value of the page background. Nested elements that build their contrast on that pair — cards, code blocks — therefore stay visible in both cases.

The card below sits in an odd section.

Alternating backgrounds — even section

Same markup, in an even section. The card keeps a background distinct from the section: both must remain readable.