diff --git a/post2.html b/post2.html index 3305493..958fae9 100644 --- a/post2.html +++ b/post2.html @@ -397,13 +397,26 @@ Namensschild sichtbar. Werte aus TeamCards.tsx uebernommen. Ohne die weichgezeichnete Ellipse aus dem Original: die haengt an backdrop-filter, und was der Export daraus macht, ist nicht verlaesslich. */ + /* Der Halter traegt das Foto und darueber die Zeichenebene. Die Ebene + ragt bewusst ueber das Foto hinaus, oben am weitesten: dort sitzt der + Helm. Ihre Masse sind Prozent und keine Pixel, damit sie mitwaechst, + wenn die Karte im Canvas breiter gezogen wird. */ + .karte-halter { position: relative; } + /* Der Selektor muss ".vis svg" schlagen, sonst zieht die allgemeine Regel + die Ebene auf Containerbreite und der Rahmen sitzt zu klein und + verschoben. Deshalb hier svg.karte-skizze und nicht nur die Klasse. */ + .vis svg.karte-skizze { + position: absolute; z-index: 6; pointer-events: none; + left: -7.42%; width: 128.39%; + top: -19.35%; height: 125.29%; + } .karte { position: relative; aspect-ratio: 4/5; overflow: hidden; - border-radius: 38px; background: #0f1a2e; isolation: isolate; + border-radius: 8px; background: #0f1a2e; isolation: isolate; } .karte-grund { - position: absolute; inset: 4.2%; z-index: 1; overflow: hidden; - border-radius: 27px; background: #2b2d2a; + position: absolute; inset: 0; z-index: 1; overflow: hidden; + border-radius: 8px; background: #2b2d2a; filter: grayscale(.04) saturate(.74) brightness(.73); } .karte-grund img { position: absolute; inset: 0; width: 100%; height: 100%; object-fit: cover; } @@ -1093,7 +1106,8 @@ const VORLAGEN = [ { key: "titel", type: "feature", - layouts: [{ id: "standard", label: "Standard" }], + layouts: [{ id: "ecke", label: "Helm auf der Ecke" }, + { id: "kopf", label: "Helm auf dem Kopf" }], eyebrow: "Titel", head: 'Die Geschichte fängt
auf der Baustelle an.', body: "Noah Geerkens, SHK-Betrieb in vierter Generation.", @@ -1657,6 +1671,98 @@ '" xmlns="http://www.w3.org/2000/svg">' + raus + ''; } + /* ─── Slide 1: Foto im gezeichneten Rahmen ─────────────────────────────── + Das Foto bleibt roh, gezeichnet wird nur drumherum. Der Helm sitzt wie + die Krone beim Zeichenspiel auf der oberen rechten Ecke, angeschraegt und + halb ueber der Kante. + + Er ist ganz in Gelb gezogen, Umriss wie Schraffur. Das hat einen Grund: + er liegt zur Haelfte auf dem hellen Grund und zur Haelfte auf dem dunklen + Foto. Eine Tintenlinie waere auf dem Foto verschwunden. Gelb traegt auf + beidem, und ein Bauhelm ist ohnehin gelb. */ + /* Der Helm. Drei Anlaeufe stecken drin, und die Zwischenschritte stehen + hier, weil sie lehrreich sind: erst war die Kuppel flach und die Krempe + eine geschlossene Scheibe darunter, zusammen eine Schirmmuetze. Dann kam + Schraffur dazu, und die Waagerechten kreuzten die Grate zu einem Gitter, + also einem Korb. Was traegt, sind viele Stuetzpunkte in der Kuppel, ein + First von vorn nach hinten, zwei Nebenrippen und eine Krempe mit Dicke. + + Alles in Gelb, Umriss wie Rippen: der Helm liegt je nach Lage auf hellem + Grund oder auf dem dunklen Foto. Eine Tintenlinie waere dort verschwunden, + und ein Bauhelm ist ohnehin gelb. */ + function bauhelm(breite) { + const b = breite / 2, kd = b * 0.76, h = b * 1.0; + + const kuppel = glatt([ + [-kd, 2], [-kd * 1.03, -h * 0.28], [-kd * 0.93, -h * 0.58], + [-kd * 0.62, -h * 0.86], [-kd * 0.22, -h * 0.99], [kd * 0.22, -h * 0.99], + [kd * 0.62, -h * 0.86], [kd * 0.93, -h * 0.58], [kd * 1.03, -h * 0.28], [kd, 2], + ], false); + + const first = glatt([[-kd * 0.04, -h * 0.99], [0, -h * 0.62], + [kd * 0.03, -h * 0.22], [kd * 0.04, 1]], false); + let rippen = ""; + [-1, 1].forEach(v => { + rippen += glatt([[v * kd * 0.36, -h * 0.92], [v * kd * 0.58, -h * 0.56], + [v * kd * 0.68, -h * 0.17], [v * kd * 0.7, 1]], false); + }); + + // Krempe: unten und oben ein Zug, dadurch bekommt sie Dicke. + const krempeU = glatt([[-b, 4], [-b * 0.62, 16], [0, 21], [b * 0.62, 16], [b, 4]], false); + const krempeO = glatt([[-b, 4], [-b * 0.62, 7], [0, 10], [b * 0.62, 7], [b, 4]], false); + + // Schattierung links: vier Boegen parallel zur Aussenkante. + let schatten = ""; + for (let i = 0; i < 4; i++) { + const f = 0.94 - i * 0.1; + schatten += glatt([[-kd * f, -h * 0.16], [-kd * f * 0.94, -h * 0.46], + [-kd * f * 0.7, -h * 0.72]], false); + } + + return zug(schatten, { f: GELB, w: 2.1, op: .45 }) + + zug(kuppel, { f: GELB, w: 5 }) + + zug(first, { f: GELB, w: 3, op: .8 }) + + zug(rippen, { f: GELB, w: 2.3, op: .55 }) + + zug(krempeU, { f: GELB, w: 5 }) + + zug(krempeO, { f: GELB, w: 3.4, op: .85 }); + } + + /* Zwei Lagen, umschaltbar ueber den Layout-Schalter der Slide. + "ecke": der Helm haengt an der abgeschnittenen Rahmenecke. Er kippt dafuer + nach rechts, damit die Oeffnung ueber der Ecke liegt und nicht von ihr + weg zeigt. Nach links gekippt sah er aus, als falle er herunter. + "kopf": er sitzt auf Noahs Stirn, groesser, damit er getragen wirkt und + nicht wie eine Kappe aufliegt. */ + function visKarte(lage) { + keim(20260811); + const W = 796, H = 971; + // Das Foto liegt bei x 46..666 und y 150..925, der Rahmen 16 px aussen + // herum. Rechts ist die Ebene breiter als noetig, weil der Helm in der + // Lage "ecke" ueber den Rahmen hinausragt. + let band = ""; + for (let y = 178; y < 928; y += 13) band += strich(683, y, 699, y + 16, { j: .7, b: .7 }); + for (let x = 72; x < 666; x += 13) band += strich(x, 942, x + 16, 958, { j: .7, b: .7 }); + + /* Drei Sachen greifen ineinander statt nebeneinanderher zu laufen: der + versetzte Zug ist die Aussenkante des Schattens, die Schraffur fuellt + das Band dazwischen, und beides folgt der Markenform. + + Zur Schattenfrage: rules.md Paragraf 5 verbietet Schatten, meint damit + aber weichgezeichnete. Die dort notierte Ausnahme sagt, eine Linie ist + kein Schatten. Eine Schraffur besteht aus Linien. */ + const rahmen = + zug(chamfer(48, 152, 652, 807, 30, { ue: 5 }), { w: 3, op: .38 }) + + zug(band, { w: 1.9, op: .34 }) + + zug(chamfer(30, 134, 652, 807, 30, { ue: 9 }), { w: 6 }); + + const helm = lage === "kopf" + ? '' + bauhelm(222) + '' + : '' + bauhelm(196) + ''; + + return '' + rahmen + helm + ''; + } + /* ─── Slide 3: wechseln kannst du vergessen ────────────────────────────── Der Fliesstext hat zwei Haelften, und beide brauchen ein Bild: "Jahre an Daten und Wissen haengen drin" wird zu Wurzeln im Boden, "am Ende @@ -1904,14 +2010,15 @@ } const VIS = { - karte: () => + karte: j => + '
' + visKarte(layoutState[j]) + '
' + '
' + '
' + 'Noah Geerkens' + '
NoahCEO
' + - '
', + '
', schiene: () => visProzesse(), @@ -2534,7 +2641,7 @@ v.style.cssText = "--vis-w:" + (sl.visW || 900) + "px;--vis-left:" + (sl.visLeft || 92) + "px;--vis-bottom:" + (sl.visBottom || 96) + "px"; - v.innerHTML = VIS[sl.vis](); + v.innerHTML = VIS[sl.vis](j); page.appendChild(v); } @@ -2609,6 +2716,12 @@ // Das Layout hängt an der Seite, damit eine Titel-Seite auch in einer // Nachbar-Slide korrekt aussieht. page.dataset.layout = layoutState[j]; + /* Der Layout-Schalter ruft rebuildPage. Das erneuerte bisher nur den + Textblock, nicht die Visualisierung -- ein Umschalten der Helmlage waere + dadurch wirkungslos geblieben. Der Zufallskeim ist gesetzt, das erneute + Zeichnen liefert also denselben Strich. */ + const vv = page.querySelector(".vis"); + if (vv && SLIDES[j].vis && VIS[SLIDES[j].vis]) vv.innerHTML = VIS[SLIDES[j].vis](j); tagEditable(page); applyEdits(page, j); } diff --git a/state/post2.json b/state/post2.json index 6768aaf..15053a5 100644 --- a/state/post2.json +++ b/state/post2.json @@ -29,7 +29,9 @@ "deck": [ { "ref": "titel", - "werte": {} + "werte": { + "body": "
" + } }, { "ref": "prozesse", @@ -53,8 +55,26 @@ } ], "edits": [ - {}, - {}, + { + "body": { + "dx": 102, + "dy": -95 + }, + "headline": { + "dx": 102, + "dy": -96 + }, + "vis": { + "dx": 3, + "dy": -146 + } + }, + { + "vis": { + "dx": 0, + "dy": 0 + } + }, {}, {}, {}, @@ -62,7 +82,7 @@ ], "frameStyle": "rund", "layoutState": [ - "standard", + "ecke", "standard", "standard", "standard",