Startseite: 17 eigene Farben -- gerechnet, nicht gewaehlt
Filipe: "jede kiste soll seine eigene farbe haben. und die kacheln sollen viel spezieller, viel spezieller sein." BEIM ERSTEN MAL HATTE ICH ABGELEHNT, und das war zu bequem. Mein Einwand stimmte zwar -- ein Versuch mit frei gewaehlten Farben ergab Paare mit 1,4 Grad Abstand, also praktisch dieselbe Farbe -- aber daraus "geht nicht" zu machen, war falsch. Es geht, man muss nur rechnen. Der Denkfehler war die Annahme, alle 17 muessten sich voneinander unterscheiden. Das Auge vergleicht aber nur, was NEBENEINANDER liegt. Also: 1. 17 Toene, gleichmaessig um den Farbkreis (je 21 Grad), gerechnet in OKLCH -- dort sind gleiche Abstaende auch fuer das Auge gleich. Helligkeit und Farbstaerke konstant, damit keine sich vordraengt. Wo die Farbstaerke den darstellbaren Bereich verliesse (Gelb und Gruen frueher als der Rest), wird sie gesenkt, bis sie hineinpasst. 2. Die ZUORDNUNG ist eine Suche ueber die tatsaechlichen Nachbarschaften im Raster (nebeneinander UND untereinander). Gesucht: die Anordnung mit dem groesstmoeglichen kleinsten Nachbarabstand. Ergebnis: mindestens 105,9 Grad zwischen allen Nachbarn. 3. Unter allen Anordnungen, die eine harte Untergrenze schaffen, gewinnt die passendste: LIVE rot, Technik gelb, Reports gruen, Personen rot-gold, Schutz stahlblau. Steht als tools/kachel-farben.mjs im Repo, mit festem Zufallsstartwert -- derselbe Lauf ergibt dieselben Farben. Wer Kacheln umsortiert, aendert die Nachbarschaften und muss es neu laufen lassen; das steht auch in start.js. Geprueft: Helligkeitsband, Farbstaerke und Kontrast bestehen fuer alle siebzehn gegen genau diesen Hintergrund. VIEL SPEZIELLER -- das WASSERZEICHEN: Jede Kachel traegt ihr eigenes Zeichen noch einmal, riesig, angeschnitten und fast unsichtbar (7 % Deckung) in der Ecke. Das ist der Grund, warum siebzehn Kacheln nicht mehr wie siebzehn Kaesten aussehen: Jede bekommt eine eigene grosse Form, ohne dass ein einziges zusaetzliches Bild geladen wird -- es ist derselbe Pfad, nur groesser. Bewusst so schwach, dass man es nicht liest, sondern nur spuert. Beim Ueberfahren wird es etwas deutlicher und wandert zwei Pixel. Dazu: Zeichenfeld 46 auf 52 px mit farbigem Schein darunter, Name auf 1,06 rem, mehr Polsterung. Alles mit prefers-reduced-motion abgesichert. 44 Pruefungen. Neu: dass jede Kachel eine EIGENE Farbe hat (17 Farben auf 17 Kacheln, gemessen an der berechneten Strichfarbe) und dass das Wasserzeichen da und schwach genug ist. Co-Authored-By: Claude Opus 5 <[email protected]>
This commit is contained in:
Claude Opus 5
@@ -266,16 +266,39 @@ body.start {
|
||||
grid-template-columns: repeat(3, minmax(0, 1fr));
|
||||
}
|
||||
|
||||
/* Die acht geprüften Töne. Zugewiesen wird der PLATZ, nicht der Rang --
|
||||
so behält ein Bereich seine Farbe, auch wenn andere dazukommen. */
|
||||
.kachel[data-ton="1"] { --ton: #3987e5; }
|
||||
.kachel[data-ton="2"] { --ton: #d95926; }
|
||||
.kachel[data-ton="3"] { --ton: #199e70; }
|
||||
.kachel[data-ton="4"] { --ton: #c98500; }
|
||||
.kachel[data-ton="5"] { --ton: #d55181; }
|
||||
.kachel[data-ton="6"] { --ton: #4d9e4d; }
|
||||
.kachel[data-ton="7"] { --ton: #9085e9; }
|
||||
.kachel[data-ton="8"] { --ton: #e66767; }
|
||||
/* Siebzehn eigene Töne -- einer je Kachel. Nicht gewählt, sondern
|
||||
gerechnet: gleichmäßig um den Farbkreis verteilt, in OKLCH bei
|
||||
konstanter Helligkeit und Farbstärke, damit keine sich vordrängt.
|
||||
Erzeugt von tools/kachel-farben.mjs; dort steht auch, warum.
|
||||
|
||||
Die ZUORDNUNG ist ebenfalls gerechnet. Das Auge vergleicht nur, was
|
||||
NEBENEINANDER liegt -- gesucht wurde deshalb die Anordnung mit dem
|
||||
größtmöglichen kleinsten Abstand zweier Nachbarn im Raster. Ergebnis:
|
||||
mindestens 105,9 Grad zwischen allen Nachbarn. Zum Vergleich: Der
|
||||
erste Versuch mit frei gewählten Farben hatte Paare bei 1,4 Grad.
|
||||
|
||||
Unter allen Anordnungen, die das schaffen, wurde die passendste
|
||||
genommen -- LIVE rot, Technik gelb, Reports grün, Personen rot-gold.
|
||||
|
||||
Geprüft gegen genau diesen Hintergrund: Helligkeitsband, Farbstärke
|
||||
und Kontrast bestehen für alle siebzehn. */
|
||||
.kachel[data-ton="1"] { --ton: #3e95e7; } /* 250° */
|
||||
.kachel[data-ton="2"] { --ton: #7089ea; } /* 271° */
|
||||
.kachel[data-ton="3"] { --ton: #947de2; } /* 292° */
|
||||
.kachel[data-ton="4"] { --ton: #b173d0; } /* 314° */
|
||||
.kachel[data-ton="5"] { --ton: #c66ab5; } /* 335° */
|
||||
.kachel[data-ton="6"] { --ton: #d56694; } /* 356° */
|
||||
.kachel[data-ton="7"] { --ton: #dc666f; } /* 17° */
|
||||
.kachel[data-ton="8"] { --ton: #db6c48; } /* 38° */
|
||||
.kachel[data-ton="9"] { --ton: #d17717; } /* 59° */
|
||||
.kachel[data-ton="10"] { --ton: #ba8610; } /* 81° */
|
||||
.kachel[data-ton="11"] { --ton: #a29205; } /* 102° */
|
||||
.kachel[data-ton="12"] { --ton: #809e23; } /* 123° */
|
||||
.kachel[data-ton="13"] { --ton: #50a752; } /* 144° */
|
||||
.kachel[data-ton="14"] { --ton: #07aa7c; } /* 165° */
|
||||
.kachel[data-ton="15"] { --ton: #12a69b; } /* 186° */
|
||||
.kachel[data-ton="16"] { --ton: #04a3b4; } /* 208° */
|
||||
.kachel[data-ton="17"] { --ton: #059ece; } /* 229° */
|
||||
|
||||
.kachel {
|
||||
--ton: var(--akzent);
|
||||
@@ -336,10 +359,39 @@ body.start {
|
||||
|
||||
.kachel__link {
|
||||
position: relative; z-index: 1;
|
||||
display: flex; align-items: center; gap: 14px;
|
||||
padding: 18px 18px 18px 21px;
|
||||
display: flex; align-items: center; gap: 15px;
|
||||
padding: 21px 20px 21px 23px;
|
||||
color: inherit; text-decoration: none;
|
||||
}
|
||||
|
||||
/* Das Wasserzeichen. Dasselbe Zeichen wie im Feld links, aber riesig,
|
||||
angeschnitten und fast unsichtbar in der rechten unteren Ecke.
|
||||
|
||||
Es ist der Grund, warum siebzehn Kacheln nicht mehr wie siebzehn
|
||||
Kästen aussehen: Jede bekommt eine eigene große Form, ohne dass ein
|
||||
einziges zusätzliches Bild geladen wird. Bewusst so schwach, dass man
|
||||
es nicht liest, sondern nur spürt -- eine Kachel soll ihren Namen
|
||||
tragen, nicht ihr Zeichen. */
|
||||
.kachel__wasserzeichen {
|
||||
position: absolute; right: -14px; bottom: -26px;
|
||||
width: 132px; height: 132px;
|
||||
pointer-events: none; z-index: 0;
|
||||
opacity: .07;
|
||||
transform: rotate(-8deg);
|
||||
transition: opacity var(--tempo), transform var(--tempo);
|
||||
}
|
||||
.kachel__wasserzeichen svg {
|
||||
width: 100%; height: 100%;
|
||||
fill: none; stroke: var(--ton);
|
||||
stroke-width: 1.1; stroke-linecap: round; stroke-linejoin: round;
|
||||
}
|
||||
.kachel:hover .kachel__wasserzeichen {
|
||||
opacity: .13;
|
||||
transform: rotate(-8deg) translate(-4px, -4px) scale(1.04);
|
||||
}
|
||||
.kachel[data-gross="ja"] .kachel__wasserzeichen {
|
||||
width: 168px; height: 168px; right: -18px; bottom: -34px;
|
||||
}
|
||||
.kachel__link:focus-visible {
|
||||
outline: 2px solid var(--ton); outline-offset: -4px; border-radius: 15px;
|
||||
}
|
||||
@@ -348,40 +400,50 @@ body.start {
|
||||
eine Fläche, ohne dass die ganze Kachel farbig wird. Der Verlauf und
|
||||
der innere Lichtrand darin lassen es geprägt statt gemalt wirken. */
|
||||
.kachel__zeichen {
|
||||
position: relative; z-index: 1;
|
||||
flex: none;
|
||||
display: grid; place-items: center;
|
||||
width: 46px; height: 46px; border-radius: 14px;
|
||||
width: 52px; height: 52px; border-radius: 15px;
|
||||
background:
|
||||
linear-gradient(160deg,
|
||||
color-mix(in srgb, var(--ton) 26%, transparent),
|
||||
color-mix(in srgb, var(--ton) 9%, transparent));
|
||||
border: 1px solid color-mix(in srgb, var(--ton) 30%, transparent);
|
||||
box-shadow: inset 0 1px 0 color-mix(in srgb, var(--ton) 32%, transparent);
|
||||
transition: background var(--tempo), border-color var(--tempo), transform var(--tempo);
|
||||
color-mix(in srgb, var(--ton) 30%, transparent),
|
||||
color-mix(in srgb, var(--ton) 10%, transparent));
|
||||
border: 1px solid color-mix(in srgb, var(--ton) 32%, transparent);
|
||||
/* Lichtkante innen oben, weicher Schein nach aussen -- dadurch wirkt
|
||||
das Feld geprägt statt gemalt. Der Schein bleibt schwach; ein
|
||||
leuchtender Kasten wäre in einer dunklen Oberfläche eine Lampe. */
|
||||
box-shadow:
|
||||
inset 0 1px 0 color-mix(in srgb, var(--ton) 38%, transparent),
|
||||
0 4px 14px -8px color-mix(in srgb, var(--ton) 60%, transparent);
|
||||
transition: background var(--tempo), border-color var(--tempo),
|
||||
transform var(--tempo), box-shadow var(--tempo);
|
||||
}
|
||||
.kachel:hover .kachel__zeichen {
|
||||
background:
|
||||
linear-gradient(160deg,
|
||||
color-mix(in srgb, var(--ton) 40%, transparent),
|
||||
color-mix(in srgb, var(--ton) 14%, transparent));
|
||||
border-color: color-mix(in srgb, var(--ton) 58%, transparent);
|
||||
transform: scale(1.04);
|
||||
color-mix(in srgb, var(--ton) 46%, transparent),
|
||||
color-mix(in srgb, var(--ton) 16%, transparent));
|
||||
border-color: color-mix(in srgb, var(--ton) 62%, transparent);
|
||||
transform: scale(1.05);
|
||||
box-shadow:
|
||||
inset 0 1px 0 color-mix(in srgb, var(--ton) 55%, transparent),
|
||||
0 6px 20px -8px color-mix(in srgb, var(--ton) 85%, transparent);
|
||||
}
|
||||
.kachel[data-gross="ja"] .kachel__zeichen { width: 56px; height: 56px; border-radius: 17px; }
|
||||
.kachel[data-gross="ja"] .kachel__zeichen { width: 62px; height: 62px; border-radius: 18px; }
|
||||
|
||||
.kachel__svg {
|
||||
width: 23px; height: 23px;
|
||||
width: 25px; height: 25px;
|
||||
fill: none; stroke: var(--ton);
|
||||
stroke-width: 1.6; stroke-linecap: round; stroke-linejoin: round;
|
||||
}
|
||||
.kachel[data-gross="ja"] .kachel__svg { width: 28px; height: 28px; }
|
||||
.kachel[data-gross="ja"] .kachel__svg { width: 31px; height: 31px; }
|
||||
|
||||
.kachel__text { display: grid; gap: 3px; min-width: 0; }
|
||||
.kachel__text { position: relative; z-index: 1; display: grid; gap: 3px; min-width: 0; }
|
||||
.kachel__name {
|
||||
font-size: 1.02rem; font-weight: 650; letter-spacing: -.012em; line-height: 1.25;
|
||||
font-size: 1.06rem; font-weight: 650; letter-spacing: -.014em; line-height: 1.25;
|
||||
white-space: nowrap; overflow: hidden; text-overflow: ellipsis;
|
||||
}
|
||||
.kachel[data-gross="ja"] .kachel__name { font-size: 1.18rem; }
|
||||
.kachel[data-gross="ja"] .kachel__name { font-size: 1.24rem; }
|
||||
.kachel__unter {
|
||||
font-size: .78rem; color: var(--text-still); line-height: 1.3;
|
||||
white-space: nowrap; overflow: hidden; text-overflow: ellipsis;
|
||||
@@ -392,6 +454,7 @@ body.start {
|
||||
liegt -- eine Kachel, die "3" sagt, ist zehnmal mehr wert als eine,
|
||||
die "öffnen" sagt. */
|
||||
.kachel__zahl {
|
||||
position: relative; z-index: 1;
|
||||
flex: none; margin-left: auto;
|
||||
min-width: 32px; padding: 5px 11px;
|
||||
text-align: center; font-size: .9rem; font-weight: 700;
|
||||
@@ -418,6 +481,7 @@ body.start {
|
||||
}
|
||||
|
||||
.kachel__pfeil {
|
||||
position: relative; z-index: 1;
|
||||
flex: none; margin-left: auto;
|
||||
color: var(--text-still); font-size: 1rem;
|
||||
transition: color var(--tempo), transform var(--tempo);
|
||||
@@ -537,6 +601,10 @@ body.start {
|
||||
.dran__link:hover .dran__pfeil { color: var(--akzent); transform: translateX(3px); }
|
||||
|
||||
@media (prefers-reduced-motion: reduce) {
|
||||
.kachel__wasserzeichen, .kachel__zeichen { transition: none; }
|
||||
.kachel:hover .kachel__wasserzeichen { transform: rotate(-8deg); }
|
||||
.kachel:hover .kachel__zeichen { transform: none; }
|
||||
|
||||
.dran__punkt, .dran__pfeil { transition: none; }
|
||||
.dran__link:hover .dran__pfeil { transform: none; }
|
||||
}
|
||||
|
||||
Reference in New Issue
Block a user