0ff.space Launcher

Öffentliche Landingpage und Service-Dashboard für 0ff.space. Die Seite besteht ausschließlich aus index.html und style.css; es gibt weder JavaScript noch einen Build-Schritt.

Gestaltung

Die fünf Akzentfarben liegen zentral am Anfang von style.css:

:root {
	--palette-1: #ff0026;
	--palette-2: #d91e4d;
	--palette-3: #ff0094;
	--palette-4: #e000ff;
	--palette-5: #ff5a00;
}

Ein Palettenwechsel braucht daher nur diese fünf Variablen. Weiß und das dunkle Grau der ruhenden Kacheln bleiben bewusst außerhalb der Palette und folgen prefers-color-scheme. guide verwendet dauerhaft dieselbe dunkle Erdbeerfarbe wie calendar (--palette-2).

Responsive Layouts und Animationen

Alle Animationen laufen einmal automatisch und werden nur mit CSS umgesetzt. Bei prefers-reduced-motion: reduce werden sie abgeschaltet.

Ansicht	Raster	Verhalten
Desktop ab 75rem, Maus/Trackpad	11 × 2	Start nach 5 s, gestaffelte Kachelrotation von links nach rechts. Rechtecke drehen um ihre vertikale Mittelachse. Schatten und Akzentfarbe werden während der Rotation aus- und wieder eingeblendet.
Phone und iPad, Portrait	4 × 9	Runenartige, diagonal zusammenhängende Form. Start nach 1 s, Welle von links oben nach rechts unten. Einige Kacheln laufen 1,333-mal schneller, einige absolvieren zwei Umdrehungen. data und reload besitzen absichtlich die jeweils vertauschten Bewegungsprofile.
Phone und iPad, Landscape	9 × 4	Start nach 5 s. Das Raster blendet aus und zeigt zweimal IN, Leerpause, OUT, Leerpause. Erst danach blendet das normale Dashboard wieder ein.

Die transparenten .ghost-Zellen bilden im Portrait die ausgefransten Außenkanten. In Landscape dienen dieselben logischen Zellen als Pixel der Wortanimation. .dummy-2 ist die sichtbare reload-Kachel und lädt / neu.

Dateien bearbeiten

• Links, Beschriftungen und die logische Zellenbelegung stehen in index.html.
• Raster, Farben, Light/Dark Mode und sämtliche Animationen stehen in style.css.
• Nach jeder CSS-Änderung muss die Zahl hinter style.css?v= in index.html erhöht werden, damit mobile Browser sicher die neue Version laden.
• Produktionsdateien unter /var/www/launcher niemals direkt verändern.

CSS lässt sich lokal ohne Build-Artefakte im Repository prüfen:

nix shell nixpkgs#lightningcss -c \
  lightningcss --output-file /tmp/launcher-style.css style.css

Deployment

Änderungen werden auf main committet und zum Forgejo-Repository gepusht. Ein Webhook deployt den Branch automatisch nach /var/www/launcher auf blunix. Die NixOS-Konfiguration dafür liegt in nixos-config/hosts/blunix/localServices/webhook.nix.

Nach einem Push den Commit und den Cache-Buster prüfen:

git -C /var/www/launcher rev-parse --short HEAD
curl -sS https://0ff.space/ | rg -o 'style\.css\?v=[0-9]+'

Checkpoints

• hero-animation-checkpoint-1 (dba3387): einfache frühe Hero-Animation.
• in-out-animation-checkpoint (c5a3047): Zwischenstand der IN/OUT-Animation.
• Branch experimental-hero-animation (3ffc476): verworfene Domino-/Gust-Variante; bewusst nicht in main gemergt.