diff --git a/README.md b/README.md index 7d96872..59378b8 100644 --- a/README.md +++ b/README.md @@ -23,6 +23,7 @@ Downloads landen direkt in `~/Downloads`, ohne Browser-Dialog. | Post 1 · Lösung | `post1.html` | Carousel, Anzahl frei | | | Post 2 · Die Geschichte | `post2.html` | Carousel, 6 Slides, erscheint 12.08. | [`POST-2.md`](./POST-2.md) | | Post 2 · Alternative | `post2-alt.html` | Derselbe Beitrag im Theme `modern` | | +| Post 3 · Verbinden statt ersetzen | `post3.html` | Einzelbild, Theme `modern`, erscheint 17.08. | | **Alle Streifen nebeneinander** zeigt `uebersicht.html`, erreichbar über *Projekt → Alle Projekte im Streifen*. Die Seite baut die Slides nicht selbst @@ -42,6 +43,18 @@ Beide zeigen denselben Beitrag mit denselben Texten. Die Themes stehen in [`rules.md`](./rules.md) §1a mit ihren Unterschieden. Wer eine Visualisierung ändert, muss an beide Dateien denken. +**Post 3 ist ein Einzelbild**, keine Slidefolge: eine Haltung, die man +durchwischen muss, ist keine. Sein Bild ist das **Wabenfeld der Startseite**, +nachgebaut aus `HoneycombSection.tsx` — dieselbe Achsrechnung, dieselben +Zellnummern, dieselbe Belegung, damit es wiedererkennbar bleibt und keine +Anmutung davon ist. Die vier Waben „In Arbeit" fehlen: auf der Startseite sind +sie ein Versprechen, im Beitrag wären sie ein Eingeständnis. + +Die vierzehn Partner-Marken liegen unter `assets/partner/` und sind, wie alles +andere hier, aus der Website **gespiegelt statt verlinkt**. Sechs davon sind +PNG und damit dieselbe Wette wie ein Screenshot (§7 in `rules.md`), deshalb +prüft der Export sie einzeln nach — `wabenZonen()` in `post3.html`. + Der Redaktionsplan für alle weiteren Beiträge liegt in [`redaktionsplan/`](./redaktionsplan/), gebaut mit `python3 redaktionsplan/bauen.py`. @@ -169,7 +182,9 @@ Maßstab zurück. ``` assets/ ├── brand/ Wortmarke hell/dunkel, G-Marke (SVG + PNG), Wabe, Geerkens -├── partner/ DATEV, KWP, Google Calendar, Google Drive, MS Outlook, MS Teams +├── partner/ die 14 Marken des Wabenfelds (DATEV, KWP, pds, Bauhow, Aircall, +│ Onepage, PandaDoc, Hallo Petra, Claude, OpenAI, Google Drive, +│ Google Calendar, MS Outlook, MS Teams) ├── mockups/ Geräte-Mockups (Displays ausgeknockt, Screenshot liegt dahinter) ├── screens/ Software-Screenshots ├── eigene/ selbst importierte Bilder diff --git a/assets/partner/aircall.svg b/assets/partner/aircall.svg new file mode 100644 index 0000000..3c1df88 --- /dev/null +++ b/assets/partner/aircall.svg @@ -0,0 +1,31 @@ + + + + +grid +Created with Sketch. + + + + + + diff --git a/assets/partner/bauhow.png b/assets/partner/bauhow.png new file mode 100644 index 0000000..41ec91b Binary files /dev/null and b/assets/partner/bauhow.png differ diff --git a/assets/partner/claude.svg b/assets/partner/claude.svg new file mode 100644 index 0000000..026cace --- /dev/null +++ b/assets/partner/claude.svg @@ -0,0 +1,16 @@ + + + + + + + + + + + + + + + + diff --git a/assets/partner/hallopetra.png b/assets/partner/hallopetra.png new file mode 100644 index 0000000..9877950 Binary files /dev/null and b/assets/partner/hallopetra.png differ diff --git a/assets/partner/onepage.png b/assets/partner/onepage.png new file mode 100644 index 0000000..5b102cc Binary files /dev/null and b/assets/partner/onepage.png differ diff --git a/assets/partner/openai.svg b/assets/partner/openai.svg new file mode 100644 index 0000000..ac1badc --- /dev/null +++ b/assets/partner/openai.svg @@ -0,0 +1,6 @@ + + + + + + diff --git a/assets/partner/pandadoc.png b/assets/partner/pandadoc.png new file mode 100644 index 0000000..ebc95b2 Binary files /dev/null and b/assets/partner/pandadoc.png differ diff --git a/assets/partner/pds.svg b/assets/partner/pds.svg new file mode 100644 index 0000000..fea6ee7 --- /dev/null +++ b/assets/partner/pds.svg @@ -0,0 +1,30 @@ + + pds + + + + + + + + + + + + + + + + + + + + + + + + + + + + diff --git a/post1.html b/post1.html index c038b57..f4ae1e1 100644 --- a/post1.html +++ b/post1.html @@ -793,6 +793,7 @@ if (location.search.indexOf("nur=streifen") >= 0) +
diff --git a/post2-alt.html b/post2-alt.html index 5769ca2..856baf1 100644 --- a/post2-alt.html +++ b/post2-alt.html @@ -991,6 +991,7 @@ if (location.search.indexOf("nur=streifen") >= 0) +
diff --git a/post2.html b/post2.html index b3fab09..60bb2a6 100644 --- a/post2.html +++ b/post2.html @@ -884,6 +884,7 @@ if (location.search.indexOf("nur=streifen") >= 0) +
diff --git a/post3.html b/post3.html new file mode 100644 index 0000000..f712fad --- /dev/null +++ b/post3.html @@ -0,0 +1,4286 @@ + + + + + + +PostGrid Post 3 · Verbinden statt ersetzen + + + + + + + +
+ + + +
+
+
+
+
+
+
+
+
+

+
+ + +
+
+ + + +
+
+
+ + +
+ + + + + + diff --git a/rules.md b/rules.md index 965db94..92f052b 100644 --- a/rules.md +++ b/rules.md @@ -1,7 +1,7 @@ # Post-Generator — Regeln & Konventionen Arbeitsgrundlage für alles, was in diesem Repo an Social-Grafiken entsteht. -**Stand:** 31.07.2026 +**Stand:** 15.08.2026 Der Generator läuft lokal: `./serve.sh` → (Post 1, Carousel). @@ -20,6 +20,7 @@ Alle Marken-Werte stammen aus der Website, nicht aus diesem Repo. Bei Zweifel | Schrift | `HiveGrid-Website/app/layout.tsx` | | Badge-Styling | `HiveGrid-Website/components/sections/ScreenshotAccordion.tsx` | | Feature-Texte | `HiveGrid-Website/app/playground/PlaygroundClient.tsx` → `solutionModules` | +| Wabenfeld: Geometrie, Zellnummern, Belegung | `HiveGrid-Website/components/landing/HoneycombSection.tsx` | Die Werte sind hier gespiegelt, weil der Export keine Tailwind-/oklch-Farben verträgt (siehe §7). Ändert sich die Website, müssen sie **hier nachgezogen @@ -42,7 +43,7 @@ und Kompositionen der Visualisierungen. | Theme | Erkennungszeichen | Datei | |---|---|---| | `notebook` | Rasterhintergrund, Zeichenblock-Optik, Marker in der Überschrift, handgezogene Formen | `post2.html` | -| `modern` | Ruhiger Grund ohne Textur, sehr große Überschrift mit einem farbigen Wort, schwebende Karten mit Haarlinie, präzise Formen | `post2-alt.html` | +| `modern` | Ruhiger Grund ohne Textur, sehr große Überschrift mit einem farbigen Wort, schwebende Karten mit Haarlinie, präzise Formen | `post2-alt.html`, `post3.html` | Jede Datei trägt oben eine Konstante `THEME`. Sie steuert nichts, sie benennt nur — die Unterschiede stecken in den CSS-Werten und in den Zeichen-Primitiven. @@ -255,6 +256,38 @@ Spalten um ¾ der Breite, benachbarte Spalten sitzen eine halbe Reihe versetzt. Eine Kachel = zwei Spalten breit, eine Reihe hoch. **Die über den Kachelrand hinausragenden Kopien sind Pflicht** — ohne sie sieht man die Nähte. +### Wabenfeld + +Nicht zu verwechseln mit dem Wabenraster: das ist die Textur im Hintergrund, +das Wabenfeld ist die **Grafik von der Startseite** — die Marke als Nabe, die +fremden Programme als Waben darum, verbunden über Stränge. Sie steht in +`post3.html` als `visWabenfeld()` und ist aus `HoneycombSection.tsx` +übernommen, nicht nachempfunden: + +| | Wert | Warum genau der | +|---|---|---| +| Umkreisradius | 62 | alles andere leitet sich davon ab | +| Flächenfaktor | 0,84 | lässt die Fuge zwischen zwei Waben offen | +| Achsrechnung | `x = 1,5·R·q`, `y = √3·R·(r + q/2)` | flat-top | +| Zellnummern | 1 Nabe, 2–7 innerer Ring, 8–19 Deko-Ring, dann das Feld | die Belegung hängt daran | +| Marken-Größe | sichtbar 56,5 px | Claude und OpenAI sind die Eichmarken | + +**Die Zellnummern sind die Schnittstelle.** Welche Marke wo sitzt, steht auf +der Website in `HONEYCOMB_DEFAULT_LOGO_PLACEMENTS` und hier in `WABE_MARKEN`, +beide über dieselben Nummern. Wer den Ringgang in `wabeRing()` umstellt, +verschiebt damit stillschweigend jede Marke. + +**Eine Marke wird über zwei Zahlen eingepasst**, nicht über eine: die +Grundfläche ihres Renderpfads (Feld 59,52 px, Deko 50,44 px) mal ihre eigene +Skalierung. Das Verhältnis 1,18 zwischen beiden Pfaden stammt aus der Website +und ist der Grund, warum dieselbe sichtbare Größe zwei verschiedene Faktoren +braucht. Für eine neue Marke gilt: `gr = Grundfläche / Anteil, den die Datei in +ihrer eigenen Fläche ausfüllt` — eine Datei mit Luft ringsum braucht mehr. + +**Die vier Waben „In Arbeit" gehören nicht in einen Beitrag.** Auf der +Startseite sind sie ein Versprechen, im Feed wären sie ein Eingeständnis. Es +sind die Zellen 29, 41, 46 und 59, und sie bleiben gewöhnliche leere Waben. + --- ## 4. Typografie diff --git a/state/post3.json b/state/post3.json new file mode 100644 index 0000000..1432018 --- /dev/null +++ b/state/post3.json @@ -0,0 +1,39 @@ +{ + "bandTon": "orange", + "bgState": [ + { + "bg": "raster", + "int": "dezent" + } + ], + "current": 0, + "deck": [ + { + "ref": "verbinden", + "werte": {} + } + ], + "edits": [ + { + "body": { + "dx": 33 + }, + "headline": { + "dx": 0, + "dy": 0 + } + } + ], + "frameStyle": "chamfer", + "layoutState": [ + "standard" + ], + "rasterAn": "aus", + "superSample": 2, + "tagOut": "an", + "textMitte": "an", + "tilt": "an", + "v": 7, + "variant": "hell", + "view": "streifen" +} diff --git a/uebersicht.html b/uebersicht.html index f59ab99..917e2b3 100644 --- a/uebersicht.html +++ b/uebersicht.html @@ -106,6 +106,7 @@ +
@@ -129,6 +130,7 @@ { datei: "./post1.html", name: "Post 1 · Lösung" }, { datei: "./post2.html", name: "Post 2 · Die Geschichte", theme: "notebook" }, { datei: "./post2-alt.html", name: "Post 2 · Alternative", theme: "modern" }, + { datei: "./post3.html", name: "Post 3 · Verbinden statt ersetzen", theme: "modern" }, ]; const flaeche = document.getElementById("flaeche"); @@ -194,7 +196,11 @@ const offen = reihen.filter(r => r.da).length; meta.textContent = offen < reihen.length ? "Lade Streifen ... " + offen + " von " + reihen.length - : reihen.length + " Projekte · " + reihen.map(r => Math.round(r.w / 1080) + " Slides").join(" · "); + // Seit Post 3 gibt es Einzelbilder: "1 Slides" stand vorher da. + : reihen.length + " Projekte · " + reihen.map(r => { + const n = Math.round(r.w / 1080); + return n + (n === 1 ? " Slide" : " Slides"); + }).join(" · "); } // Kein Ziehen, kein Rad-Zoom: die Seite scrollt wie eine gewoehnliche Seite.