Artikel · · 2 Min. Lesezeit
Folge 003: Erstes Outfit: Ubuntu, Dark Mode und ein Footer, der nicht nervt
Schrift rein, Farben festlegen, Breakpoints setzen. Plus die goldene Regel: committen ja, pushen nur, wenn du es wirklich willst.
Jetzt wird’s hübsch. Design heißt hier: Dateien und Regeln, die der Agent pflegt, und du siehst das mit npm run dev quasi live mit.
Ubuntu einbinden (ohne Font-Drama)
- Auf fonts.google.com Ubuntu wählen, hier 300 (Light) für Text, 500 (Medium) für Überschriften (600 gab’s in der Familie nicht).
- ZIP laden, nur die
.ttf, die du brauchst. - transfonter.org → woff/woff2 fürs Web.
- Dem Agenten die Dateien geben: „Bitte einbinden und committen.“
In der Design-Doku siehst du die Palette: dunkler Hintergrund, heller Text (nicht Knallweiß), grüne Action-Farbe, gedämpfte Muted-Töne.
Terminal-Kniffe
npm run dev. Im Terminal steht die lokale Adresse, bei Astro meisthttp://localhost:4321(Port kann abweichen). Wenn Node oder npm noch fehlen: Folge 018.- Strg+C: stoppen (im Terminal ist Strg+C nicht Kopieren!).
- Pfeil hoch, letzter Befehl nochmal.
Baut der Agent während der Server läuft, kann die Vorschau hüpfen — kurz stoppen, warten, neu starten.
Regeln, die du wirklich willst
Schreib sie in Doku und .cursor/rules/ (siehe docs/cursor/README.md):
- Niemals von allein pushen. Commits lokal sind okay. Push nur auf Anweisung, sonst baut Cloudflare einen Zwischenstand live (Hosting-Setup: Folge 011).
- CSS nicht jedes Mal neu erfinden: bestehende Klassen und CSS-Variablen nutzen.
- Page Speed: Wichtiges CSS früh (critical: Menü, Kopf der Seite); Rest später (non-critical), sonst springt das Layout und Google schmunzelt nicht.
Seiten, Menü, Footer
Per Issue kamen Pages (Start, Über uns, Impressum …; Collections: Folge 004). Der Footer kriegt Copyright mit dynamischem Jahr (2026 oder 2026 bis 2027), Domain, Signatur.
Impressum und Datenschutz nicht ins Hauptmenü, unten rechts. Copyright links. Auf dem Handy: untereinander, zentriert.
Issues = dein Projekt-Trello
Logo-Issue mit Label „Design“, Favicon „blocked by“ (blockiert durch) Logo, GitHub-„Views“ (gespeicherte Ansichten) nur für Design-Tickets. Projektmanagement ohne Extra-Tool.
Breakpoints (global merken)
| Name | Grenze |
|---|---|
| Tablet | unter 1024 px |
| Mobil | unter 680 px |
Im Browser: Entwicklertools, Breite schieben (360 px = grobes iPhone-Feeling).
Statische Astro-Seite: wenig Angriffsfläche, keine DB, schnell. „This is the way.“