eux

Introduction

This is the living style guide for eux.dev. The site is generated by Zola — a static site generator shipped as a single binary — and styled after The Monospace Web by Oskar Wickström: everything aligns to a monospace character grid, and the page shrinks in character-sized steps. Tick the Debug mode box in the header to see the grid.

Every element the design supports appears below; new pages copy their markup patterns from here.

The Basics

Regular paragraphs are just Markdown. Inline elements work as expected: bold text, italics, inline code, a chemical formula like H₂O, and hyperlinks.

Look at this horizontal break:

Lovely. We can hide stuff in the <details> element:

Lists

This is a plain old bulleted list:

• Banana
• Paper boat
• Cucumber
• Rocket

Ordered lists look pretty much as you'd expect:

1. Goals
2. Motivations
   1. Intrinsic
   2. Extrinsic
3. Second-order effects

It's nice to visualize trees. This is an unordered list with a tree class:

• website/

  • site
    • content
    • templates
    • static
  • infra
    • main.tf
    • site.tf
    • cdn.tf
  • backlog
  • mise.toml

Tables

Tables adjust to the monospace grid; exactly one column (width-auto) is allowed to grow:

Forms

Here are some buttons:

And inputs:

And radio buttons:

Grids

Add the grid class to a container to divide up the horizontal space evenly for the cells. Note that it maintains the monospace, so the total width might not be 100%. Here are six grids with increasing cell count:

If we want one cell to fill the remainder, we set flex-grow: 1; for that particular cell:

ASCII Drawings

We can draw in <pre> tags using box-drawing characters:

╭─────────────────╮
│ MONOSPACE ROCKS │
╰─────────────────╯

To have it stand out a bit more, we can wrap it in a <figure> tag, and why not also add a <figcaption>:

┌────────┐ ┌────────┐ ┌────────┐
│  edit  │ │ build  │ │ deploy │
└───┬────┘ └───┬────┘ └───┬────┘
    │          │          │
    │ zola     │          │
    │─────────►│          │
    │          │ tofu     │
    │          │─────────►│
┌───┴────┐ ┌───┴────┐ ┌───┴────┐
│  site/ │ │ public │ │ bunny  │
└────────┘ └────────┘ └────────┘

Let's go wild and draw a chart!

                 Lines shipped
│                                ████ Written

15  │
│                                ░░░░ Deleted
│
12  │            ░
│            ░
│   ░        ░
9  │   ░        ░
│   ░        ░
│   ░        ░                ░
6  │   █        ░        ░       ░
│   █        ░        ░       ░
│   █        ░        █       ░
3  │   █        █        █       ░
│   █        █        █       ░
│   █        █        █       ░
0  └───▀────────▀────────▀───────▀──────────
HTML      CSS       TF     YAML

Media

Media objects are supported, like images and video. They extend to the width of the page and add padding at the bottom to maintain the grid:

Colophon

This site is a single zola build away from a folder of plain files, uploaded to object storage and served from a CDN. No JavaScript frameworks, no build pipelines — one binary in, static files out. More of what we make public lives at codeberg.org/eux.