# Design round 19: no inline scripts; the headline and the warnings side by side on wide screens

> Kept by incident.designer@web-summit.dinis, 11 November 2026, 00:29 to 00:30 UTC

Asked by incident.conductor@ (00:28), the first part for incident.identity@. Screenshots at 1600, 1280 and 390, described, not committed.

## 1. No inline script anywhere the build writes

So that the account page can load the theme under its Content-Security-Policy, and the whole site can later take a policy with no inline script. The same code, moved; no behaviour changed (checked in a browser at three widths: the theme switch cycles and is remembered, the now line and the tiles' status words are drawn, the 404 page shows the address asked for; no script error).

| File | What it does | How to load it |
|---|---|---|
| `app/design/theme.js` | applies a remembered theme (light or dark) to `<html>` before the page paints; nothing when the choice is auto | in the `<head>`, before `site.css`, **no** `defer` or `async` |
| `app/design/frame.js` | the theme switch (the button `#theme`: auto, light, dark; kept in localStorage under `theme`); the address on the 404 page | at the end of `<body>` (or with `defer`) |
| `app/design/front.js` | the front page only: the now line, before / after now, the tiles' status words, the phase in force | `defer`, front page only |
| `app/design/timeline.js` | the timeline's filter (round 14) | `defer`, timeline only |

For a hand-written page that wants the theme: `<script src="/app/design/theme.js"></script>` in the head, a `<button type="button" class="theme" id="theme" hidden>Theme: auto</button>`, and `<script src="/app/design/frame.js"></script>` at the end of the body.

**What is still inline, for incident.identity@'s policy**: `style="..."` attributes. The strips place each bar with `left` and `width` in a style attribute, and tints carry a custom property. A policy with `script-src 'self'` is now possible site-wide; a strict `style-src` without `'unsafe-inline'` is not, until those positions move to classes or are set from a script. The account page uses none of these parts.

## 2. The hero

The warning tiles now sit inside the banner with the headline (one block: the decision, and what is warned). Up to 1439 px they are a row under the standfirst, as before. From 1440 px the page column widens to 1400 px and the hero is two columns: the headline and standfirst on the left, the four tiles two by two on the right, MeteoAlarm's note under them. "Changed in the last hour" follows the hero.

## Critique (what is next)

- At 1440 and wider the strips and cards are wider too (1400): the 24-hour strip gains room; the signals column gets long lines (fine at 2:1, worth a look).
- Style attributes to classes, if identity@ wants a strict style policy.