diff --git a/post2-alt.html b/post2-alt.html index 2d5311f..cdfabbf 100644 --- a/post2-alt.html +++ b/post2-alt.html @@ -348,10 +348,29 @@ Headline. Das negative Margin holt den Text auf dieselbe Linie. Zum Vergleichen umschaltbar. */ - /* 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. */ + /* Das Raster gehoert zum Theme notebook. Hier bleibt der Grund normalerweise + ruhig; eine Textur nimmt den schwebenden Karten den Halt. Die Ebene bleibt + im Markup, damit beide Themes denselben Aufbau haben. + + Zum Ausprobieren laesst es sich unter "Raster" wieder einschalten -- + dieselben Werte wie in post1.html: 78 px Teilung, 2 px Strich. */ .layer-raster { background: none; } + .slide[data-raster="an"] .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(--int-mul, 1) * .17); + } + .slide[data-raster="an"][data-variant="dunkel"] .layer-raster { + opacity: calc(var(--int-mul, 1) * .26); + } + + /* Ueberschrift und Fliesstext mittig. Der Fliesstext hat eine max-width, + also braucht er zusaetzlich automatische Seitenraender -- text-align + allein zentriert nur die Zeilen im Kasten, nicht den Kasten. */ + .slide[data-mitte="an"] .content { text-align: center; } + .slide[data-mitte="an"] .body { margin-left: auto; margin-right: auto; } /* ─── Das Band ────────────────────────────────────────────────────────── Ein durchgehendes Band ueber den ganzen Streifen, jede Slide zeigt nur @@ -386,7 +405,7 @@ width: var(--vis-w, 896px); color: var(--head-color); } - .vis svg { display: block; width: 100%; height: auto; } + .vis svg { display: block; width: 100%; height: auto; overflow: visible; } /* Hier stand das Layout-CSS der alten Visualisierungen. Alle sechs sind inzwischen gezeichnet, das SVG fuellt seinen Container selbst. Die Regeln @@ -434,7 +453,7 @@ beschnitten -- daher inset 0 und z-index 4. */ .karte { position: relative; aspect-ratio: 1/1; overflow: hidden; - background: #E8F4F4; isolation: isolate; border-radius: 38px; + background: var(--accent-teal); isolation: isolate; border-radius: 38px; } .karte-grund { position: absolute; inset: 4.2%; z-index: 1; overflow: hidden; @@ -596,13 +615,28 @@ letter-spacing: -0.032em; line-height: 1.04; 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. */ + /* Kein Marker. Der Akzent ist im Theme modern ein farbiges Wort mit einem + Balken darunter -- der Marker ist das Erkennungszeichen des Themes + notebook und hat hier nichts verloren. + + Der Balken ist der Hover-Zustand der Ueberschrift auf der Landingpage + (LandingPageClient.tsx: h-[3px], -bottom-1, bg-current, im Ruhezustand + auf 22 % gestaucht, bei Hover auf volle Breite). Wir nehmen die volle + Breite, ein Standbild kennt kein Hover. + + Masse in em statt in px: dort steht der Balken unter 62 px Schrift, + hier unter 76 -- und auf der Titel-Slide unter 88. 3/62 und 4/62 + ergeben die Werte unten und wachsen damit von selbst mit. */ .headline .a, .title-head .a, .wabe-tagline .a { color: var(--accent-yellow); background: none; padding: 0; margin: 0; + position: relative; + } + .headline .a::after, .title-head .a::after, .wabe-tagline .a::after { + content: ""; position: absolute; left: 0; right: 0; + bottom: -0.065em; height: 0.048em; + background: currentColor; } .body { @@ -1066,6 +1100,18 @@ +
+ Versuch +
+ + +
+
+ + +
+
+
Band
@@ -1809,13 +1855,6 @@ als in Grau, weil eine unterbrochene Linie weniger Flaeche hat. */ raus += zug(leitung, { f: GELB, w: 2.9, op: .85, strichel: "11 13" }); - [[700, 96, "file-text", 52], [770, 236, "image", 46], [760, 430, "user", 50], - [250, 690, "file-text", 44]] - .forEach(k => { - raus += karteFlaeche(k[0] - k[3] / 2, k[1] - k[3] / 2, k[3], k[3], 9, GRUND); - raus += feather(k[2], k[0], k[1], k[3] * 0.46, TEXT3, 1.8); - }); - chips.forEach(c => { const y = c.y - HOCH / 2; raus += karteFlaeche(c.x, y, c.w, HOCH, 13); @@ -2335,11 +2374,11 @@ const y = oben + i * (blockHoehe + ABSTAND); raus += ''; raus += zeichen[sc.ikon](HX + HB / 2, y + HH / 2); - raus += '' + sc.t + ''; sc.z.forEach((z, k) => { - raus += '' + z + ''; }); @@ -2557,7 +2596,7 @@ let current = 0; let variant = "dunkel", tilt = "an", superSample = 2, view = "streifen", tagOut = "an", frameStyle = "chamfer"; - let bandTon = "orange"; + let bandTon = "orange", rasterAn = "aus", textMitte = "aus"; /* ─── Projektstand ──────────────────────────────────────────────────────── Alles, was am Projekt hängt, wird gespeichert: Einstellungen, Layouts, @@ -2584,6 +2623,7 @@ function currentState() { return { v: STATE_V, variant, tilt, superSample, view, tagOut, frameStyle, bandTon, + rasterAn, textMitte, current, layoutState, bgState, edits, // Welche Slides der Post ueberhaupt hat. Ohne das waere eine selbst // angelegte Slide nach dem Neuladen weg. @@ -2723,6 +2763,8 @@ press("tagouts", "o", tagOut); press("frames", "f", frameStyle); press("bands", "b", bandTon); + press("rasters", "r", rasterAn); + press("mitten", "m", textMitte); press("views", "w", view); // Nach einem Schritt, der Slides hinzugefuegt, geloescht oder umsortiert // hat, stimmt der Aufbau im Canvas nicht mehr mit dem Stand ueberein. @@ -2855,6 +2897,8 @@ tagOut = d.tagOut || tagOut; frameStyle = d.frameStyle || frameStyle; bandTon = d.bandTon || bandTon; + rasterAn = d.rasterAn || rasterAn; + textMitte = d.textMitte || textMitte; current = Number.isInteger(d.current) ? Math.min(d.current, SLIDES.length - 1) : 0; } @@ -3004,6 +3048,18 @@ ruhig sein, Slide 2 traegt ihre eigene Leitung und wuerde sich mit dem Band beissen. Bleibt Slide 3 bis 5. */ const BAND_VON = 2, BAND_BIS = 1; + /* Auf der ersten Slide mit Band faengt es nicht an der Kante an, sondern + unter der Karte: so kommt es dahinter hervor, statt links schon + dazuliegen. Der Wert ist ein Versatz in Slide-Koordinaten und liegt + hinter der Karte (die reicht bis 988). Die Kurve selbst bleibt an der + Kante verankert, sonst wuerden sich die Stuetzpunkte neu verteilen und + die Fuehrung auf den Folge-Slides verschieben. */ + const BAND_ANSCHNITT = 540; + /* Am anderen Ende endet es an der Naht. Der Auslauf ist der Zeichenbereich + hinter dem Kurvenanker; die Kurve wird dort mit ihrer Endsteigung + geradlinig verlaengert, damit sie nicht abknickt. Ein Versuch mit 170 + liess das Band in die letzte Slide hineinragen -- die soll ruhig sein. */ + const BAND_AUSLAUF = 0; const BAND_BAHN = [990, 900, 740, 690, 1130, 1275, 1215]; function bandSvg() { @@ -3013,15 +3069,17 @@ weil genau auf der Kante ein Antialiasing-Splitter auf der Nachbarslide stehen bleibt. */ const H = 1350; - const X0 = BAND_VON * 1080 + 2; - const X1 = Math.max(X0, (SLIDES.length - BAND_BIS) * 1080 - 2); + const A0 = BAND_VON * 1080 + 2; // Anker der Kurve + const A1 = Math.max(A0, (SLIDES.length - BAND_BIS) * 1080 - 2); + const X0 = Math.min(A1, BAND_VON * 1080 + BAND_ANSCHNITT); // ab hier gezeichnet + const X1 = A1 + BAND_AUSLAUF; // bis hierhin const W = SLIDES.length * 1080; - const P = BAND_BAHN, SCHRITT = (X1 - X0) / (P.length - 1); + const P = BAND_BAHN, SCHRITT = (A1 - A0) / (P.length - 1); const ton = BAND_TOENE[bandTon] || BAND_TOENE.orange; // Catmull-Rom: laeuft durch die Stuetzpunkte, nicht daran vorbei. - const y = x => { - const u = Math.max(0, Math.min(P.length - 1.0001, (x - X0) / SCHRITT)); + const kurve = x => { + const u = Math.max(0, Math.min(P.length - 1.0001, (x - A0) / SCHRITT)); const i = Math.floor(u), t = u - i; const g = k => P[Math.max(0, Math.min(P.length - 1, k))]; const a0 = g(i - 1), a1 = g(i), a2 = g(i + 1), a3 = g(i + 2); @@ -3029,6 +3087,9 @@ (2 * a0 - 5 * a1 + 4 * a2 - a3) * t * t + (-a0 + 3 * a1 - 3 * a2 + a3) * t * t * t); }; + // Hinter dem Anker geradlinig weiter, mit der Steigung am Endpunkt. + const steig = (kurve(A1) - kurve(A1 - 24)) / 24; + const y = x => x <= A1 ? kurve(x) : kurve(A1) + steig * (x - A1); const xs = []; for (let x = X0; x < X1; x += 45) xs.push(x); @@ -3043,7 +3104,7 @@ return '' + - flaeche(58, 107, ton.blass) + flaeche(0, 88, ton.voll) + ''; + flaeche(29, 53.5, ton.blass) + flaeche(0, 44, ton.voll) + ''; } // Positionen im 5400er Raum. Die Nähte liegen auf 1080 / 2160 / 3240 / 4320. @@ -3293,6 +3354,8 @@ el.dataset.int = bgState[i].int; el.dataset.layout = layoutState[i]; el.dataset.tagout = tagOut; + el.dataset.raster = rasterAn; + el.dataset.mitte = textMitte; el.dataset.frame = frameStyle; el.dataset.editmode = editMode; el.style.setProperty("--slide-i", i); @@ -3405,6 +3468,8 @@ el.dataset.int = bgState[i].int; el.dataset.layout = layoutState[i]; el.dataset.tagout = tagOut; + el.dataset.raster = rasterAn; + el.dataset.mitte = textMitte; el.dataset.frame = frameStyle; rebuildPage(i); el.dataset.editmode = editMode; @@ -4981,6 +5046,14 @@ }); /* Das Band haengt in .bg und wird von buildSlide gesetzt, nicht von applyAll. Beim Umschalten wird es deshalb hier direkt getauscht. */ + document.getElementById("rasters").addEventListener("click", e => { + const b = e.target.closest("button"); + if (b) { rasterAn = b.dataset.r; press("rasters", "r", rasterAn); applyAll(); saveState(); } + }); + document.getElementById("mitten").addEventListener("click", e => { + const b = e.target.closest("button"); + if (b) { textMitte = b.dataset.m; press("mitten", "m", textMitte); applyAll(); saveState(); } + }); document.getElementById("bands").addEventListener("click", e => { const b = e.target.closest("button"); if (!b) return; diff --git a/rules.md b/rules.md index 3462a16..965db94 100644 --- a/rules.md +++ b/rules.md @@ -436,6 +436,12 @@ Filter muss beim 3-fachen Rendern dreifach berechnet werden. > `clip-path` ohnehin mit beschnitten. Der Kostenpunkt aus dem Absatz oben > bleibt — **nach jeder Änderung daran einmal 3-fach exportieren und > hinsehen.** Im Theme `notebook` gilt die Regel unverändert. +> +> **`.vis svg` braucht dafür `overflow: visible`.** Ein SVG beschneidet an +> seiner viewBox, und die Karten füllen ihre Zeichnung randlos aus. Ohne die +> Regel wird der Schatten genau an der Kartenkante gekappt: außen ein grauer +> Streifen mit hartem Schnitt, in den Chamfer-Kerben graue Keile. Am Layout +> ändert sich nichts, gezeichnet wird weiterhin nur, was in der viewBox steht. ### Was global gilt und was pro Slide diff --git a/state/post2-alt.json b/state/post2-alt.json index 2471290..6a4543d 100644 --- a/state/post2-alt.json +++ b/state/post2-alt.json @@ -26,7 +26,7 @@ "int": "dezent" } ], - "current": 2, + "current": 0, "deck": [ { "ref": "titel", @@ -64,13 +64,13 @@ "dy": 0 }, "headline": { - "dx": 37, + "dx": 15, "dy": 3, "size": 88 }, "vis": { - "dx": 0, - "dy": -64 + "dx": 3, + "dy": -9 } }, { @@ -82,8 +82,8 @@ "dy": 3 }, "vis": { - "dx": 31, - "dy": -107 + "dx": 113, + "dy": -59 } }, { @@ -109,9 +109,9 @@ "dy": 3 }, "vis": { - "dx": -95, - "dy": -12, - "size": 1088 + "dx": -68, + "dy": -25, + "size": 1028 } }, { @@ -123,7 +123,7 @@ }, "vis": { "dx": 33, - "dy": -118 + "dy": -138 } }, { @@ -134,8 +134,8 @@ "dy": 3 }, "vis": { - "dx": 12, - "dy": 74, + "dx": 102, + "dy": 70, "size": 1184 } } @@ -149,8 +149,10 @@ "standard", "standard" ], + "rasterAn": "aus", "superSample": 3, "tagOut": "an", + "textMitte": "an", "tilt": "an", "v": 7, "variant": "hell",