diff --git a/workspace/assets/css/start.css b/workspace/assets/css/start.css index 23234e95..3607972c 100644 --- a/workspace/assets/css/start.css +++ b/workspace/assets/css/start.css @@ -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 --