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:
@@ -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 --
|
||||
|
||||
Reference in New Issue
Block a user