From 993dc3e5efab4cdea3aef6dcd19f36655f4478e5 Mon Sep 17 00:00:00 2001 From: DeeCee03 Date: Thu, 13 Aug 2026 18:36:07 +0200 Subject: [PATCH] Themes als eigene Ebene, Theme modern angelegt Projekt und Theme waren bisher dasselbe. Jetzt nicht mehr: das Projekt sagt, welcher Beitrag, das Theme, wie er aussieht. notebook ist die Zeichenblock-Optik mit Raster, Marker und handgezogenen Formen, modern der ruhige Grund mit farbigem Akzentwort und schwebenden Karten. Beide Themes teilen Aufbau, Texte und Kompositionen. rules.md Paragraf 1a haelt fest, was sie genau trennt. Das Theme modern folgt Vorbildern aus dem Feed: Zapier, Slack, Autarc, Photovate, Plancraft. Was ich daraus uebernehme, ist nicht die Optik der einzelnen Marke, sondern das Gemeinsame -- ruhiger Grund ohne Textur, eine sehr grosse Ueberschrift mit einem farbigen Wort statt einer Markierung, schwebende Karten mit Haarlinie, Ablaufketten mit Knoten, gefuellte Kreis-Haken. Drei Farben, wie besprochen: Weiss als Grund, Orange als Akzent, Teal als Zweitfarbe. Teal stand in rules.md bisher als "ungenutzt" und traegt jetzt Zeichen und Kacheln. Die Schriftfarbe ist ein sehr dunkles Teal statt reinem Schwarz, damit sie zur Palette gehoert. Das Raster faellt weg. Die Ebene bleibt im Markup, damit beide Themes denselben Aufbau haben, sie zeichnet nur nichts mehr. Slide 4 ist der erste Umbau: der Notizzettel ist raus, die Aufzaehlung bleibt und wird zur Kette aus Karten mit Zeichenkachel, Beschriftung und Haken, dazwischen ein Verbinder mit Knoten. Die Form sagt zusaetzlich etwas aus -- die vier Dinge haengen zusammen, statt nur untereinander zu stehen. Der Menueeintrag zur Alternative fehlte in post1.html und post2.html; er stand nur in der Kopie selbst. Von dort kam man also nie hin. Co-Authored-By: Claude Opus 5 (1M context) --- README.md | 16 ++-- post1.html | 1 + post2-alt.html | 192 ++++++++++++++++++++----------------------- post2.html | 1 + rules.md | 34 ++++++++ state/post2-alt.json | 4 +- 6 files changed, 138 insertions(+), 110 deletions(-) diff --git a/README.md b/README.md index 7bae914..432dc28 100644 --- a/README.md +++ b/README.md @@ -22,14 +22,16 @@ 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, moderne Formensprache | | +| Post 2 · Alternative | `post2-alt.html` | Derselbe Beitrag im Theme `modern` | | -**Post 2 gibt es zweimal.** Beide Fassungen zeigen denselben Beitrag mit -denselben Texten; sie unterscheiden sich nur in der Formensprache. Die -Skizzenfassung ist von Hand gezeichnet, die Alternative präzise und auf -dunklem Grund. Technisch ist es derselbe Aufbau: die Kompositionen sind -identisch, nur die Zeichen-Primitive rechnen anders. Wer eine Visualisierung -ändert, muss deshalb an beide Dateien denken. +**Post 2 gibt es zweimal, in zwei Themes.** Projekt und Theme sind zwei +verschiedene Dinge: das Projekt sagt, welcher Beitrag, das Theme, wie er +aussieht. `notebook` ist die Zeichenblock-Optik mit Raster und Marker, +`modern` der ruhige Grund mit farbigem Akzentwort und schwebenden Karten. +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. Der Redaktionsplan für alle weiteren Beiträge liegt in [`redaktionsplan/`](./redaktionsplan/), gebaut mit `python3 redaktionsplan/bauen.py`. diff --git a/post1.html b/post1.html index f6244bd..4f4c0e0 100644 --- a/post1.html +++ b/post1.html @@ -765,6 +765,7 @@
+
diff --git a/post2-alt.html b/post2-alt.html index 1a10122..86361dd 100644 --- a/post2-alt.html +++ b/post2-alt.html @@ -348,13 +348,10 @@ Headline. Das negative Margin holt den Text auf dieselbe Linie. Zum Vergleichen umschaltbar. */ - .layer-raster { - background-image: - linear-gradient(var(--pat-color) 2px, transparent 2px), - linear-gradient(90deg, var(--pat-color) 2px, transparent 2px); - background-size: 78px 78px; - opacity: calc(var(--pat-strength) * var(--int-mul, 1)); - } + /* Das Raster gehoert zum Theme notebook. Hier bleibt der Grund ruhig; eine + Textur wuerde den schwebenden Karten den Halt nehmen. Die Ebene bleibt + im Markup, damit beide Themes denselben Aufbau haben. */ + .layer-raster { background: none; } /* ─── Visualisierungen ─────────────────────────────────────────────────── @@ -521,18 +518,20 @@ macht. Fuer alle sechs ginge 88 nicht: gemessen ist "Dein Branchenprogramm" dann 1022 px breit, verfuegbar sind 896, und die Ueberschriften von Slide 2, 4 und 5 wuerden dreizeilig. */ + /* Groesser und enger als im Theme notebook: die Vorbilder setzen die + Ueberschrift als Blickfang ueber fast die ganze Breite. */ .headline { - font-size: 74px; font-weight: 800; - letter-spacing: -0.03em; line-height: 1.06; + font-size: 84px; font-weight: 800; + letter-spacing: -0.035em; line-height: 1.02; color: var(--head-color); } + /* Kein Marker. Der Akzent ist im Theme modern ein farbiges Wort -- so + machen es Slack, Photovate und Autarc. Der Marker ist das Erkennungs- + zeichen des Themes notebook und hat hier nichts verloren. */ .headline .a, .title-head .a, .wabe-tagline .a { - background-image: url("data:image/svg+xml,%3Csvg xmlns='http://www.w3.org/2000/svg' viewBox='0 0 320 48' preserveAspectRatio='none'%3E%3Cpath d='M1.5,12 C58,4.5 168,9.5 312,5 C316,7 318,11 317.5,16 C318.5,26 316,36 313,42.5 C232,47.5 104,41.5 6.5,44.5 C2.5,42 0.5,36 1,29 C0.5,22 0.8,16.5 1.5,12 Z' fill='%23F1B729'/%3E%3C/svg%3E"); - background-repeat: no-repeat; - background-position: 0 68%; - background-size: 100% 62%; - -webkit-box-decoration-break: clone; box-decoration-break: clone; - padding: 0 14px; margin: 0 -6px; + color: var(--accent-yellow); + background: none; + padding: 0; margin: 0; } .body { @@ -808,8 +807,9 @@ /* ─── Variant: dunkel ────────────────────────────────────────────────── */ + /* Theme modern, dunkle Variante. Derselbe Aufbau, invertiert. */ .slide[data-variant="dunkel"] { - background: var(--dark-bg); + background: #0E1F1E; --head-color: var(--text-white); --body-color: #B9BDC9; --accent-on: var(--accent-yellow); @@ -817,37 +817,29 @@ --frame-bg: rgba(255,255,255,.11); --shape-fill: #414252; --shape-line: rgba(255,255,255,.10); - --pat-color: #FFFFFF; --pat-strength: .07; + --pat-color: #FFFFFF; --pat-strength: 0; --gmark-color: rgba(255,255,255,.13); --guide-line: rgba(255,255,255,.16); --guide-safe: rgba(255,255,255,.26); --guide-axis: rgba(255,255,255,.40); --guide-mid: rgba(241,183,41,.80); } - /* Auf Dunkel steht das Akzentwort in #1A1A1A und ist damit nur dort lesbar, - wo die gelbe Flaeche darunterliegt. Die deckt aber nur 62 % der - Zeilenhoehe ab, also rund 49 px bei einer Versalhoehe von etwa 53 -- die - obere Haelfte der Buchstaben verschwand im Grund. Auf Hell faellt das - nicht auf, weil dunkler Text dort auch neben der Flaeche traegt. - Die Flaeche deckt deshalb in dieser Fassung die ganze Zeile. */ - .slide[data-variant="dunkel"] .headline .a, - .slide[data-variant="dunkel"] .title-head .a { - color: #1A1A1A; - background-size: 100% 92%; - background-position: 0 52%; - } /* ─── Variant: hell ──────────────────────────────────────────────────── */ + /* Theme modern, helle Variante. Drei Marken-Farben und sonst nichts: + Weiss als Grund, Orange als Akzent, Teal als zweiter Akzent. Die + Schriftfarbe ist ein sehr dunkles Teal statt reinem Schwarz, damit sie + zur Palette gehoert und nicht danebensteht. */ .slide[data-variant="hell"] { - background: var(--surface); - --head-color: var(--text-primary); - --body-color: var(--text-secondary); + background: #F7FAF9; + --head-color: #0E1F1E; + --body-color: #5B6D6B; --accent-on: #C8901A; --marker: var(--accent-yellow); - --frame-bg: #E8EBF0; - --shape-fill: var(--dark-bg); - --shape-line: rgba(48,49,61,.13); - --pat-color: #30313D; --pat-strength: .07; + --frame-bg: #EAF0EF; + --shape-fill: #0E1F1E; + --shape-line: rgba(14,31,30,.13); + --pat-color: #30313D; --pat-strength: 0; --gmark-color: rgba(48,49,61,.16); --guide-line: rgba(48,49,61,.20); --guide-safe: rgba(48,49,61,.30); @@ -1317,12 +1309,18 @@ /* ─── Bausteine ────────────────────────────────────────────────────────── */ /* Die Zeichenfarben folgen der Variante. Auf Dunkel traegt Tinte nicht, und Gelb darf dort der volle Markenton sein statt des abgedunkelten. */ - let TINTE = "#E8EAEE", GELB = "#F1B729", TEXT2 = "#B9BDC9"; + /* Drei Marken-Farben, dazu Tinte und eine Haarlinie. Teal war in rules.md + bisher als "ungenutzt" vermerkt und traegt hier den zweiten Akzent. */ + let TINTE = "#0E1F1E", GELB = "#F1B729", TEAL = "#0D6E6E", + TEXT2 = "#5B6D6B", LINIE = "#DCE4E3", KARTE = "#FFFFFF"; function farbenNachziehen() { - TINTE = variant === "dunkel" ? "#E8EAEE" : "#2A2C33"; - GELB = variant === "dunkel" ? "#F1B729" : "#E9A81C"; - // Zweitrangiger Text: derselbe Wert wie --body-color der Variante. - TEXT2 = variant === "dunkel" ? "#B9BDC9" : "#555555"; + const d = variant === "dunkel"; + TINTE = d ? "#F2F6F5" : "#0E1F1E"; + GELB = "#F1B729"; + TEAL = d ? "#3FA9A9" : "#0D6E6E"; + TEXT2 = d ? "#9FB2B0" : "#5B6D6B"; + LINIE = d ? "rgba(242,246,245,.18)" : "#DCE4E3"; + KARTE = d ? "rgba(242,246,245,.05)" : "#FFFFFF"; } const zug = (d, o) => { o = o || {}; @@ -2059,72 +2057,52 @@ } function visMehr() { - keim(20260816); - /* 988 statt 896 breit: die Flaeche reicht bis zur rechten Slide-Kante, - damit der Pfeil dort wirklich austritt und nicht 92 px davor endet. - Die Zeichnung selbst behaelt ihre Koordinaten. */ - const W = 988, H = 730; - const LX = 60, RX = 800, OY = 70, UY = 650, KNICK = 58; - - const wuensche = [ - { t: "Workflow-Engine", g: glyWorkflow }, - { t: "CRM", g: glyLeute }, - { t: "Vertrieb", g: glyTrichter }, - { t: "Marketing", g: glyMegafon }, + /* Theme modern: kein Notizzettel. Die Aufzaehlung bleibt, wird aber zur + Kette aus Karten -- jede mit Zeichenkachel, Beschriftung und Haken, + dazwischen ein Verbinder mit Knoten. Das ist die Form, die Zapier fuer + Ablaeufe benutzt, und sie sagt hier zusaetzlich etwas: die vier Dinge + haengen zusammen, statt nur untereinander zu stehen. */ + const W = 896, H = 730, KB = 636, KH = 116, LU = 44, KX = 130; + const punkte = [ + { t: "Workflow-Engine", g: (x, y) => formWorkflow(x, y, 0.82) }, + { t: "CRM", g: (x, y) => glyLeute(x, y) }, + { t: "Vertrieb", g: (x, y) => formTrichter(x, y, 0.86) }, + { t: "Marketing", g: (x, y) => formMegafon(x, y, 0.86) }, ]; + const oben = (H - (punkte.length * KH + (punkte.length - 1) * LU)) / 2; + const kachelGrund = variant === "dunkel" ? "rgba(63,169,169,.16)" : "#E7F1F0"; - // Blatt mit abgeknickter Ecke unten rechts. - const blatt = strich(LX, OY, RX, OY, { ue: 4 }) + - strich(RX, OY, RX, UY - KNICK, { ue: 3 }) + - strich(RX, UY - KNICK, RX - KNICK, UY, { ue: 2 }) + - strich(RX - KNICK, UY, LX, UY, { ue: 4 }) + - strich(LX, UY, LX, OY, { ue: 4 }); - const knick = glatt([[RX, UY - KNICK], [RX - KNICK + 8, UY - KNICK + 12], - [RX - KNICK, UY]], false); + let raus = ""; + punkte.forEach((p, i) => { + const y = oben + i * (KH + LU), mx = KX + 60, my = y + KH / 2; - let raus = zug(blatt, { w: 3.4 }) + zug(knick, { w: 2.6, op: .75 }); + // Verbinder zur naechsten Karte, mit Knoten in der Mitte. + if (i < punkte.length - 1) { + const vy = y + KH, vm = vy + LU / 2; + raus += zug(strich(mx, vy, mx, vy + LU), { f: LINIE, w: 2 }); + raus += ''; + raus += zug(strich(mx - 5, vm, mx + 5, vm) + strich(mx, vm - 5, mx, vm + 5), + { f: TEAL, w: 2 }); + } - wuensche.forEach((w, i) => { - const y = 180 + i * 120, bx = LX + 60, by = y - 30; - raus += zug(strich(LX + 60, y + 26, RX - 60, y + 26, { j: 1, b: 1 }), { w: 2, op: .22 }); - raus += zug(rechteck(bx, by, 38, 38, { ue: 3 }), { f: GELB, w: 3.4 }); - // Der Haken laeuft ueber den Kasten hinaus, wie von Hand abgehakt. - raus += zug(glatt([[bx + 7, by + 21], [bx + 15, by + 30], [bx + 33, by + 5]], false), - { f: GELB, w: 4.8 }); - raus += '' + - w.t + ''; - /* Die Zeichen stehen in einer Spalte statt direkt hinter dem Wort. Die - Zeilen sind unterschiedlich lang, direkt angehaengt haetten sie eine - ausgefranste Kante ergeben. */ - raus += zug(w.g(RX - 108, y - 11), { w: 2.5 }); + raus += ''; + raus += ''; + raus += zug(p.g(KX + 60, y + 58), { f: TEAL, w: 2.6 }); + raus += '' + p.t + ''; + + // Haken rechts: gefuellter Kreis in Orange, wie bei Autarc. + const hx = KX + KB - 48; + raus += ''; + raus += zug(glatt([[hx - 9, my], [hx - 3, my + 7], [hx + 9, my - 8]], false), + { f: "#3E2C0A", w: 3.6 }); }); - /* Der Pfeil zur naechsten Slide: kurz, gerade, dick, auf halber - Slide-Hoehe. Die Slide ist 1350 hoch, die Zeichenflaeche beginnt bei - 500, die Mitte liegt hier also auf 175. - - Hier steht nur der hintere Teil des Schafts, die Spitze sitzt drueben - auf Slide 5. Beim Swipen zeigt Instagram zwischen den Slides ein paar - Pixel Abstand, der Pfeil ist dort also zerschnitten. Genau das traegt - den Effekt: eine halbierte Form zieht das Auge weiter (rules.md, - Paragraf 5). - - Er steht ausserhalb der Blattdrehung, sonst laege sein Austritt nicht - mehr auf derselben Hoehe wie der Eintritt drueben. - - In Tinte, nicht in Gelb: Gelb bedeutet in diesem Beitrag Verbindung - und gehoert der Zeichnung. Der Pfeil gehoert nicht dazu, er weist nur - weiter. */ - const nHalb = () => 14; - const naht = - flaeche([[814, 157], [W, 157], [W, 193], [814, 193]], TINTE); - - /* Leicht schief aufs Blatt gelegt. Genau senkrecht wirkt gesetzt, und ein - Zettel liegt nie gerade. */ return '' + - '' + raus + '' + naht + ''; + '" xmlns="http://www.w3.org/2000/svg">' + raus + ''; } /* ─── Slide 6: was nach der Anmeldung passiert ─────────────────────────── @@ -2307,7 +2285,7 @@ Schriftgröße steuerbar (Bilder, Geräte). */ const STANDARD = { "badge": { label: "Tag", size: 26, prop: "font-size" }, - "headline": { label: "Überschrift", size: 74, prop: "font-size" }, + "headline": { label: "Überschrift", size: 84, prop: "font-size" }, "body": { label: "Beschreibung", size: 30, prop: "font-size" }, "wabe-tagline": { label: "Tagline", size: 74, prop: "font-size" }, "wabe-claim": { label: "Claim", size: 31, prop: "font-size" }, @@ -2361,6 +2339,18 @@ Alles, was am Projekt hängt, wird gespeichert: Einstellungen, Layouts, Muster und die Verschiebungen im Canvas. Das Werkzeug soll den Stand halten, nicht der Kopf. */ + /* ─── Theme ─────────────────────────────────────────────────────────────── + Neben dem Projekt (welcher Beitrag) gibt es das Theme (wie er aussieht). + + notebook Rasterhintergrund, Zeichenblock-Optik, Marker in der + Ueberschrift, handgezogene Formen. Liegt in post2.html. + modern Ruhiger Grund ohne Textur, sehr grosse Ueberschrift mit einem + farbigen Wort statt Marker, schwebende Karten mit Haarlinie, + praezise Formen. Diese Datei. + + Beide teilen Aufbau, Texte und Kompositionen. Wer eine Visualisierung + aendert, muss an beide Dateien denken. */ + const THEME = "modern"; const PROJECT = "post2-alt"; const STORE = "hivegrid.projekt." + PROJECT; const STATE_URL = "./state/" + PROJECT + ".json"; diff --git a/post2.html b/post2.html index 8edf7d9..6b57794 100644 --- a/post2.html +++ b/post2.html @@ -856,6 +856,7 @@
+
diff --git a/rules.md b/rules.md index 6544f63..1e35f40 100644 --- a/rules.md +++ b/rules.md @@ -27,6 +27,40 @@ werden** — das passiert nicht automatisch. --- +## 1a. Themes + +**Projekt und Theme sind zwei verschiedene Dinge.** Das Projekt sagt, *welcher* +Beitrag; das Theme sagt, *wie er aussieht*. Beide Themes teilen Aufbau, Texte +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` | + +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. + +**Was beide Themes trennt, ist genau festgelegt:** + +| | notebook | modern | +|---|---|---| +| Grund | Raster, 78 px | einfarbig, keine Textur | +| Akzent in der Überschrift | Marker-Fläche | farbiges Wort | +| Formen | `strich` schwingt, Ecken schießen über | exakt, keine Abweichung | +| Flächen | Schraffur | Füllung | +| Zweitfarbe | keine | Teal `#0D6E6E` | + +**Teal ist die Zweitfarbe des Themes `modern`.** In `notebook` kommt sie nicht +vor. Damit hat der bisher ungenutzte Marken-Ton eine Aufgabe: er trägt +Zeichen und Kacheln, während Orange den einen Akzent setzt. + +**Eine Änderung an einer Visualisierung betrifft beide Dateien.** Das ist der +Preis dafür, dass die Themes echte Alternativen sind und nicht Varianten +derselben Datei. + +--- + ## 2. Farben ### Marke diff --git a/state/post2-alt.json b/state/post2-alt.json index 54ea6ef..d3a468b 100644 --- a/state/post2-alt.json +++ b/state/post2-alt.json @@ -25,7 +25,7 @@ "int": "dezent" } ], - "current": 0, + "current": 3, "deck": [ { "ref": "titel", @@ -145,6 +145,6 @@ "tagOut": "an", "tilt": "an", "v": 6, - "variant": "dunkel", + "variant": "hell", "view": "einzeln" }