Page title
An opening paragraph. Plain text is <p>, and everything on
this page is here so you can see what it looks like and copy the bit you want.
A section
Body text, in Comic Sans, because it is 1997.
Bold is yellow, a link is cyan,
emphasis is green, and inline code is green on black in
Courier. Those mean those things on every page — nothing here is
decorative.
You can also make something blink, and you should not.
A subsection
h1 is magenta on a gradient bar, h2 is yellow on a
purple bar, h3 is orange and underlined.
That was an <hr>. It is a gradient. Use it to break things up.
A list
- An item.
- Another item, longer, so you can see how it wraps and how much space it takes when there is a real sentence in it.
- Numbered, for steps.
- Second step.
A table
| Column | Another |
|---|---|
| A cell | A cell |
| Status classes | works · partial · no |
Always wrap a table in <div class="table-wrap"> so it
scrolls sideways on a phone instead of breaking the layout.
Code
./run.sh --something
# pre + code. It scrolls sideways on its own.A quote
For the one sentence you want people to remember off the page.
Boxes
A screenshot
Screenshots live in res/images/ and use the same frame as a
diagram. Put the file there, add a line to SHOTS in
pages.py, and write its marker where you want it:
"__SHOT_NAME__": (
"myshot.png",
"what a screen reader should hear",
"<strong>The caption.</strong> What it shows and why it is here."),
A diagram
Diagrams are inline SVG so there is nothing to load and nothing to break. They
live in svg.py in the generator; here is one: