Das Zeichen der grossen Kachel wird groesser -- und eine zweite Regel fiel auf

Filipe, screen34: "das symbol rechts in der kachel, was so ganz klein ist
das soll viel größer sein bitte!!!"

Nachgemessen war es gar nicht klein: 178 px gegen 133 px bei den normalen
Kacheln, also GROESSER. Es wirkt nur klein, und das ist der eigentliche
Punkt -- die grosse Kachel ist 769 px breit (ueber die volle Reihe rund
1160), die normale 379. Dasselbe Zeichen hat dort doppelt so viel leere
Flaeche um sich und verliert sich darin. Ein Zeichen wirkt nach dem
Anteil der Flaeche, den es fuellt, nicht nach seiner Pixelzahl.

DABEI KAM EINE ZWEITE REGEL ANS LICHT. Fuer dasselbe Element stand die
Groesse an ZWEI Stellen in start.css -- einmal bei den Kachelregeln
(196 px) und 3600 Zeilen spaeter noch einmal (158 px). Gleich starke
Selektoren, also gewinnt der spaetere. Meine erste Vergroesserung blieb
deshalb wirkungslos: gemessen weiterhin 178 px, obwohl im Quelltext 340
stand. Im Code sieht jede der beiden Regeln fuer sich richtig aus; erst
die Zahl am laufenden Browser verraet, dass eine nie zur Wirkung kommt.
Dieselbe Sorte Fehler wie bei `.kopfleiste .marke`, wo `flex` den
Schrumpf-Faktor still zurueckgesetzt hat. Die Groesse steht jetzt nur
noch an einer Stelle.

UND EINMAL ZU WEIT. Der erste Versuch koppelte die Groesse an die
BREITE: `min(46%, 340px)` ergab 384 px auf einer 152 px hohen Kachel.
Im Bildschirmfoto war daraufhin GAR NICHTS mehr zu sehen -- was die
Kachel nicht fasst, schneidet sie ab. Groesser ist hier nicht
automatisch besser. Jetzt an der Hoehe ausgerichtet: 220 px, unten und
rechts angeschnitten, der Grossteil im Bild.

Gemessen wird seitdem die SICHTBARE Flaeche, nicht die Elementgroesse --
das ist die Zahl, auf die es ankommt:
  vorher  rund 158x122 = 19k
  jetzt   204x152      = 31k   (+63 %)

pruef-start-ansicht EXIT=0, 140 Pruefungen.

Co-Authored-By: Claude Opus 5 <[email protected]>
This commit is contained in:
2026-09-08 12:59:33 +02:00
co-authored by Claude Opus 5
parent 1f7761cb69
commit b808e072c0
+58 -4
View File
@@ -950,9 +950,47 @@ body.start > main { position: relative; z-index: 1; }
opacity: .22;
transform: rotate(-8deg) translate(-4px, -4px) scale(1.04);
}
/* DIE GROSSE KACHEL BRAUCHT EIN VIEL GROESSERES ZEICHEN (08.09.2026).
Filipe, screen34: "das symbol rechts in der kachel, was so ganz klein
ist das soll viel größer sein bitte!!!"
Nachgemessen war es gar nicht klein -- 178 px gegen 133 px bei den
normalen Kacheln, also groesser. Es WIRKT nur klein, und das ist der
Punkt: Die grosse Kachel ist 769 px breit (auf der Startseite ueber
die volle Reihe sogar rund 1160), die normale 379. Dasselbe Zeichen
hat dort doppelt so viel leere Flaeche um sich und verliert sich
darin.
Ein Zeichen wirkt nicht nach seiner absoluten Groesse, sondern nach
dem Anteil der Flaeche, den es fuellt. Deshalb waechst es hier mit
der Kachel mit, statt eine feste Zahl zu tragen: `min(46%, 340px)`
nimmt knapp die Haelfte der Breite und deckelt bei sehr breiten
Reihen, damit es nicht ueber den Text laeuft.
Dass es dabei ueber die Kachel hinausragt, ist gewollt -- die Kachel
schneidet es ab, und ein angeschnittenes Zeichen wirkt wie ein
Wasserzeichen auf Papier statt wie ein aufgeklebtes Symbol.
Etwas kraeftiger als bei den kleinen Kacheln (.17 gegen .14): Auf der
grossen Flaeche verteilt sich dieselbe Deckkraft auf mehr Pixel und
sieht dadurch blasser aus. */
.kachel[data-gross="ja"] .kachel__wasserzeichen {
width: 196px; height: 196px; right: -20px; bottom: -38px;
/* AN DER HOEHE AUSGERICHTET, NICHT AN DER BREITE -- der erste
Versuch stand auf `min(46%, 340px)` und ergab 384 px auf einer
152 px hohen Kachel. Ergebnis im Bildschirmfoto: Das Zeichen ragte
so weit hinaus, dass GAR NICHTS mehr davon zu sehen war. Groesser
ist hier nicht automatisch besser -- was die Kachel nicht fassen
kann, schneidet sie ab.
220 px auf 152 px Kachelhoehe: knapp anderthalbmal so hoch wie die
Kachel, unten und rechts angeschnitten, aber mit dem Grossteil im
Bild. Gegen die 158 px vorher ist das rund 40 % mehr Flaeche. */
width: 220px; height: 220px;
right: -30px; bottom: -46px;
opacity: .17;
}
.kachel[data-gross="ja"]:hover .kachel__wasserzeichen { opacity: .26; }
.kachel__link:focus-visible {
outline: 2px solid var(--ton); outline-offset: -4px; border-radius: 15px;
}
@@ -4563,9 +4601,25 @@ body[data-fremde-sicht="ja"]::after {
.kachel[data-gross="ja"] .kachel__text { margin-top: 0; }
.kachel[data-gross="ja"] .kachel__name { font-size: 1.22rem; -webkit-line-clamp: 1; }
.kachel[data-gross="ja"] .kachel__unter { font-size: .84rem; -webkit-line-clamp: 1; }
.kachel[data-gross="ja"] .kachel__wasserzeichen {
width: 158px; height: 158px; right: -24px; bottom: -30px;
}
/* HIER STAND EINE ZWEITE GROESSE (158 px) -- und sie hat gewonnen,
ohne dass man es sah (08.09.2026).
Die Regel weiter oben in dieser Datei (Abschnitt "Die grosse Kachel
braucht ein viel groesseres Zeichen") setzt dieselbe Eigenschaft.
Beide Selektoren sind gleich stark, also entscheidet die
Reihenfolge -- und die spaetere ist diese hier. Meine Vergroesserung
oben blieb deshalb wirkungslos: gemessen weiterhin 178 px, obwohl
dort 340 stand.
Gefunden nur durch Nachmessen am laufenden Browser. Im Quelltext
sieht jede der beiden Regeln fuer sich richtig aus; erst die Zahl
auf dem Bildschirm verraet, dass eine davon nie zur Wirkung kommt.
Genau derselbe Fall wie bei `.kopfleiste .marke` weiter oben, wo
`flex` den Schrumpf-Faktor still zurueckgesetzt hat.
Die Groesse steht jetzt nur noch an EINER Stelle (oben). Hier bleibt
allein, was diese Regel wirklich beitraegt: nichts -- deshalb ist sie
weg. */
@media (max-width: 560px) {
/* Auf dem Handy zwei Spalten. Eine einzige wäre wieder eine Liste --