toolctrl-labs/posts
9
0 Fork 0
Code Issues Pull Requests Actions Packages Projects Releases Wiki Activity

Themes als eigene Ebene, Theme modern angelegt

Browse Source 
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) <noreply@anthropic.com>
This commit is contained in:
dejanandClaude Opus 5 committed 2026-08-13 18:36:07 +02:00
1 parent 84b3905d71
commit 993dc3e5ef
6 files changed
+138 -110
Download Patch File Download Diff File Expand all files Collapse all files

No files matched your search

post2-alt.html
+91 -101
View File
@@ -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 += '<circle cx="' + mx + '" cy="' + n1(vm) + '" r="10" fill="' + KARTE +
'" stroke="' + LINIE + '" stroke-width="2"/>';
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 += '<text x="' + (LX + 126) + '" y="' + y + '" font-family="Manrope, sans-serif" ' +
'font-size="32" font-weight="600" letter-spacing="-0.015em" fill="' + TINTE + '">' +
w.t + '</text>';
/* 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 += '<path d="' + chamfer(KX, y, KB, KH, 14) + '" fill="' + KARTE +
'" stroke="' + LINIE + '" stroke-width="2"/>';
raus += '<path d="' + chamfer(KX + 28, y + 26, 64, 64, 10) + '" fill="' + kachelGrund + '"/>';
raus += zug(p.g(KX + 60, y + 58), { f: TEAL, w: 2.6 });
raus += '<text x="' + (KX + 118) + '" y="' + n1(my + 12) + '" ' +
'font-family="Manrope, sans-serif" font-size="34" font-weight="700" ' +
'letter-spacing="-0.02em" fill="' + TINTE + '">' + p.t + '</text>';
// Haken rechts: gefuellter Kreis in Orange, wie bei Autarc.
const hx = KX + KB - 48;
raus += '<circle cx="' + hx + '" cy="' + n1(my) + '" r="18" fill="' + GELB + '"/>';
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 '<svg viewBox="0 0 ' + W + ' ' + H + '" width="' + W + '" height="' + H +
'" xmlns="http://www.w3.org/2000/svg">' +
'<g transform="rotate(-1.3 448 360)">' + raus + '</g>' + naht + '</svg>';
'" xmlns="http://www.w3.org/2000/svg">' + raus + '</svg>';
}
/* ─── 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";