App page blocks

Examples

When to use it

Hirsla, and any future app or product page.

Live: Hirsla.

Anatomy

Kinds

ul.kinds: two-column ruled list of short labels.

Beats

.beats: numbered short steps with a description.

Samples

.samples: rows of sample data, clearly marked as sample.

Device

.device: a real export with its own frame on a transparent ground. Every iPhone, iPad, and Mac image uses it; never mix in a frameless phone.

Screen

.screen: a frameless screenshot clipped to a rounded rectangle with a 1px ring. Now only for the Apple Watch (.screen-watch, black margin).

Screens

.screens: devices side by side. Phone: items shrink to fit, at most 165px each. From 768: fixed 220px items; .screens-3 holds three.

Banner

.banner: one full-width image (the app icon banner).

Watches

.watches: 150px figures, 336px on desktop, with captions.

Film

.film: never autoplays, preload="none", caption 14/20.

Behaviour

Phone, tablet, desktop

Kinds 17/26, 20/30 desktop. Beats and samples step up at 1024. See Anatomy for screens and watches.

Motion

None on the page; the film plays only when the reader starts it.

Accessibility

Every device image has alt text that says what the screen shows.

Words

Claims that must stay true are listed in the website’s AGENTS.md (Hirsla).

Code

Classes: .kinds .beats .beats-n .beats-d .samples .samples-t .samples-d .samples-m .device .device-wide .screens .screens-3 .screen-watch .watches .film .kicker .sign. Styles in site/assets/css/site.css.

<ul class="kinds">
<li>Links</li><li>Text and notes</li><li>Places</li><li>Photos and scans</li><li>PDFs</li><li>Voice memos</li><li>Calendar files</li><li>Drawings</li>
</ul>