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" }