feature-media

name	feature-media
description	How the feature screenshots, demo videos and their light/dark variants are wired into ninerlog.com — the markup patterns, the naming contract with images/, and how to regenerate the media from the frontend repo. Load when touching feature images on any page, adding a screenshot for a new feature section, or swapping a still for a demo video.

Feature media

All feature screenshots and demo clips live in images/ and are captured from the real app — never mocked up. They come in light/dark pairs and show one coherent demo logbook (a "famous women in aviation" homage: Amelia Earhart's account, Neta Snook signing, a Ninety-Nines club roster).

Regenerating

The capture pipeline lives in the frontend repo:

cd ../ninerlog-frontend
npm run shots:marketing                    # stills, light + dark
npm run shots:marketing -- --animations    # demo WebM + GIF
cp .screenshots/marketing/feature-*.png ../ninerlog-website/images/
cp .screenshots/marketing/demo-*.webm  ../ninerlog-website/images/
cp .screenshots/marketing/demo-quicklog{,-dark}.gif ../ninerlog-website/images/

See that repo's marketing-images skill for targets, the story fixtures, and the review checklist. Never rename files in images/ casually — the fjaeckel/ninerlog README hotlinks them as https://ninerlog.com/images/<name> and GitHub caches hard.

Markup patterns

de/funktionen.njk references the German-UI captures — identical basenames with -de before the theme suffix (feature-fleet-de.png, feature-fleet-de-dark.png, demo-quicklog-de.webm, poster-reports-de-dark.png). Regenerate them with npm run shots:marketing -- --lang=de [--animations] in the frontend repo; never point the German page at the English set or vice versa.

npm run dev copies images/ into _site/ once at startup (build:assets) and mirrors regenerated pages onto the _site root continuously (scripts/dev-mirror.mjs — the nunjucks watcher writes under _site/pages/, while the server resolves production URLs against the root). After swapping media, restart dev or run npm run build:assets — and hard-refresh the browser, because the media basenames are a stable URL contract and stay cached across content changes.

Site dark mode is a class toggle (scripts.njk toggles .dark on the root), so <picture media="(prefers-color-scheme:…)"> would ignore the toggle. Theme-dependent media is always an element pair:

<div class="w-full order-last lg:order-none">
  <img src="/images/feature-x.png"      alt="…" class="w-full dark:hidden"       loading="lazy" width="1264" height="739" />
  <img src="/images/feature-x-dark.png" alt="…" class="w-full hidden dark:block" loading="lazy" width="1264" height="739" />
</div>

Stills come pre-framed — rounded corners, hairline border and drop shadow are baked into the PNG on a transparent margin — so never add rounded-xl or shadow-xl to a feature <img> (it would double-frame). Framed stills are 1264×739 CSS px (mobile 457×916).

The wrapper carries the grid/order/sizing classes (a bare pair would become two grid children and break the two-column layout); both images share the same alt — the width/height attributes only fix the aspect ratio.

Demo videos follow the same pairing. They are unframed media, so they DO get rounded-xl shadow-xl in CSS, and their poster must be one of the unframed poster-* copies (a framed poster would flash margins before playback):

<video class="rounded-xl shadow-xl w-full dark:hidden" autoplay loop muted playsinline
       preload="metadata" poster="/images/poster-x.png" width="1200" height="675" aria-label="…">
  <source src="/images/demo-x.webm" type="video/webm" />
  <img src="/images/feature-x.png" alt="…" class="w-full" loading="lazy" width="1200" height="675" />
</video>

Who references what

Page	Media
src/pages/features.njk	every feature-* pair; demo-quicklog and demo-reports videos; new-section shots feature-credentials, feature-fleet, feature-custom-currency
src/pages/de/funktionen.njk	mirror of features.njk with German alts — keep the two in sync
src/pages/self-hosted.njk	feature-flying-club pair
fjaeckel/ninerlog README	hotlinks feature-* pairs and demo-quicklog[-dark].gif

A feature section without a screenshot should get one: capture it via a new target in the frontend pipeline, then follow the patterns above — English page first, German mirror in the same change.

Checking

npm run build, then confirm the built pages reference both variants (grep -c feature-x-dark _site/features.html) and eyeball the section in both themes — the reveal-on-scroll animation needs a beat before a screenshot shows anything.