Page structure

Night page

The one dark page: 404 and /blackhole/. Seven slow rings, “← Index”, and six ways back.

Examples

Night page (404)Open “Night page (404)” at full size

Phone 390 · Light

Desktop 1440 · Light

Phone 390 · Dark

Desktop 1440 · Dark

When to use it

404 and /blackhole/ only. Same in light and dark mode.

Live: 404, Blackhole.

Anatomy

Ground: #0A0A0B.
Rings: SVG, aria-hidden, seven rings turning in alternating directions, 14 to 240s.
Text: Label, display title, Newsreader text, links to the six pages.

Behaviour

Phone, tablet, desktop: Rings top left on phone, right and larger on desktop.
Motion: Rings turn endlessly (stated exception); still under reduced motion.

Accessibility

Off-white text and page links, 18.5:1; the link inside the text is lavender, 9.9:1.

Words

As live.

Code

Classes: .night .night-inner .night-main .night-label .night-text .night-links .rings. Styles in site/assets/css/site.css.

<div class="page night">
<svg aria-hidden="true" class="rings" focusable="false" viewbox="0 0 900 900"><circle cx="450" cy="450" fill="#000" r="64"></circle><g style="--d:14s;--dir:normal;--a:0deg"><circle cx="450" cy="450" fill="none" r="84" stroke="#AAB4F0" stroke-dasharray="1 7" stroke-opacity="0.95" stroke-width="1.5"></circle><circle cx="534" cy="450" fill="#AAB4F0" fill-opacity="1" r="4"></circle></g><g style="--d:40s;--dir:reverse;--a:140deg"><circle cx="450" cy="450" fill="none" r="120" stroke="#F7F6FF" stroke-opacity="0.5" stroke-width="1.5"></circle><circle cx="570" cy="450" fill="#F7F6FF" fill-opacity="0.8" r="4"></circle></g><g style="--d:60s;--dir:normal;--a:250deg"><circle cx="450" cy="450" fill="none" r="168" stroke="#F7F6FF" stroke-dasharray="2 10" stroke-opacity="0.55" stroke-width="1.5"></circle><circle cx="618" cy="450" fill="#F7F6FF" fill-opacity="0.850" r="4"></circle></g><g style="--d:90s;--dir:reverse;--a:40deg"><circle cx="450" cy="450" fill="none" r="224" stroke="#F7F6FF" stroke-opacity="0.28" stroke-width="1.5"></circle><circle cx="674" cy="450" fill="#F7F6FF" fill-opacity="0.580" r="4"></circle></g><g style="--d:130s;--dir:normal;--a:300deg"><circle cx="450" cy="450" fill="none" r="290" stroke="#F7F6FF" stroke-dasharray="1 14" stroke-opacity="0.35" stroke-width="1.5"></circle><circle cx="740" cy="450" fill="#F7F6FF" fill-opacity="0.649" r="4"></circle></g><g style="--d:180s;--dir:reverse;--a:190deg"><circle cx="450" cy="450" fill="none" r="364" stroke="#F7F6FF" stroke-opacity="0.16" stroke-width="1.5"></circle><circle cx="814" cy="450" fill="#F7F6FF" fill-opacity="0.459" r="4"></circle></g><g style="--d:240s;--dir:normal;--a:95deg"><circle cx="450" cy="450" fill="none" r="450" stroke="#F7F6FF" stroke-dasharray="3 18" stroke-opacity="0.2" stroke-width="1.5"></circle><circle cx="900" cy="450" fill="#F7F6FF" fill-opacity="0.5" r="4"></circle></g></svg>
<div class="night-inner wrap">
<nav aria-label="Site"><a class="band-back" href="/"><span aria-hidden="true">←  </span>Index</a></nav>
<main class="night-main" id="main">
<p class="night-label">Error 404</p>
<h1 class="display">Curiouser and curiouser!</h1>
<p class="night-text">This page does not exist, or no longer does. The way back is the <a href="/">Index</a>, or one of these pages.</p>
<ul class="night-links">
<li><a href="/agents/">Agents</a></li>
<li><a href="/hirsla/">Hirsla</a></li>
<li><a href="/unresolved/">Unresolved</a></li>
<li><a href="/readme/">Management README</a></li>
<li><a href="/thoughts/">Thoughts</a></li>
<li><a href="/advisory/">Advisory</a></li>
</ul>
</main>
</div>
</div>