Neues Anmeldebild -- die Karte sitzt IN der gemalten Tafel
Filipe: "integriere die zugangskachel links nach rechts und passe sie
perfekt an damit sie in dem neuen bild rechts perfekt und die
vorgemachte kachel passt."
Das neue Motiv (Spicy Media x DogFather) hat rechts eine leere Tafel mit
Neonrahmen. Die Anmeldekarte sitzt jetzt DARIN -- und zwar wirklich
darin, nicht ungefaehr in der Gegend.
DAS PROBLEM, DAS MAN LEICHT UEBERSIEHT: Das Bild liegt mit
`object-fit: cover` unter der Seite; je nach Fensterform schneidet der
Browser oben/unten oder links/rechts etwas ab. Ein `left: 58%` bezieht
sich aber auf das FENSTER. Auf genau einer Bildschirmgroesse saehe es
richtig aus und ueberall sonst falsch. Deshalb rechnet `.tafel-anker`
dieselbe Cover-Formel noch einmal nach und ist damit deckungsgleich mit
dem Bild -- Prozentwerte darin sind Prozent DES BILDES.
Die vier Zahlen sind GEMESSEN (tools/gate-bauen.mjs), nicht geschaetzt.
Zwei Anlaeufe standen daneben und haben sich selbst verraten:
1. "Suche den leuchtenden Rahmen" fand den Mond, die roten Blueten und
jede Spiegelung -- Ergebnis: die ganze rechte Bildhaelfte. Eine
Messung, die das Offensichtliche zurueckgibt, hat nichts gemessen.
2. "Suche die groesste dunkle Flaeche" fand die Breite richtig, aber
94 % Hoehe: Ueber und unter der Tafel ist die Szene genauso
schwarz.
Richtig ist der dritte Weg: vom Mittelpunkt der Tafel nach aussen
laufen, bis es hell ODER farbig wird -- auf diesem Weg liegt nichts
anderes, denn die Tafel ist leer. Danach eine Plausibilitaetspruefung,
die abbricht statt vier geratene Zahlen auszugeben.
DREI FEHLER IM EIGENEN ENTWURF, alle gemessen statt angesehen:
* Die Karte hing 300 px unter dem Bildschirmrand. Auf `.tafel` liegt
die Einblend-Animation, deren Endbild `transform: none` ist -- mein
`translateY(-50%)` war damit wirkungslos. Zwei Wege, dasselbe
Element zu verschieben, vertragen sich nicht.
* Der Anker lag 3 % neben dem Bild: Das Bild traegt `scale(1.03)` als
Reserve fuer die Parallaxe. Jetzt tragen beide dieselbe Verwandlung,
und die Parallaxe laeuft ueber zwei CSS-Groessen am <body> -- so
wandert die Karte mit, statt dass der Rahmen unter ihr wegrutscht.
* Der Hochkant-Ausschnitt zeigte die LEERE Tafel: ein schwarzes
Rechteck mit ein paar Saeulen. Auf dem Handy liegt die Karte ohnehin
davor; dort gehoert das Logo hin. Jetzt faellt der Schriftzug
SPICY MEDIA in den sichtbaren Streifen -- nachgerechnet, nicht
probiert.
STARTSEITE: das Tresorbild als neuer Hintergrund. Die uebernommene
Abdunklung von 0,62 war zu viel (der Tresor ist von Haus aus dunkel) --
uebrig blieb ein Schemen. Und der "Leseweg" verdunkelte ausgerechnet die
MITTE: Bei den alten Szenen stand dort nichts, beim Tresor steht dort
die Tuer. Beides korrigiert und mit pruef-buehne an echten Bildpunkten
nachgemessen.
DABEI GEFUNDEN, ohne Zusammenhang mit dem Bild: Der abgeschaltete
"Ueberfaellig"-Filter kam auf 4,05:1 statt 4,5:1. Die Deckkraft zu
erhoehen half nichts -- die Pruefung rechnet mit der CSS-FARBE und dem
gemessenen Bildpunkt dahinter, und ein `opacity` am Elternknopf aendert
die Farbe nicht. Die Zahl blieb dreimal exakt gleich; genau das war der
Hinweis. Jetzt ein eigener, hellerer Ton. Der Kommentar daneben sagte
ohnehin, was gewollt ist: Man SOLL sehen, dass es null sind.
Und die vier Regeln von heute stehen in CLAUDE.md.
Co-Authored-By: Claude Opus 5 <[email protected]>
This commit is contained in:
Claude Opus 5
@@ -101,7 +101,13 @@ body.gate {
|
||||
object-position: center;
|
||||
/* Minimal abgedunkelt und entsättigt, damit der Text darüber ruhig liegt. */
|
||||
filter: saturate(.92) brightness(.9);
|
||||
transform: scale(1.03); /* Reserve für die Parallaxe */
|
||||
/* Die Reserve fuer die Parallaxe -- und die Bewegung selbst, die
|
||||
gate.js als zwei Groessen am <body> setzt. Frueher schrieb das
|
||||
Skript hier direkt `style.transform`; seit die Karte in der
|
||||
gemalten Tafel sitzt, muss der Anker DIESELBE Bewegung machen, und
|
||||
dafuer brauchen beide dieselbe Quelle. */
|
||||
transform: scale(1.03)
|
||||
translate3d(var(--parallax-x, 0px), var(--parallax-y, 0px), 0);
|
||||
transition: transform 1.4s cubic-bezier(.2, .7, .2, 1);
|
||||
will-change: transform;
|
||||
}
|
||||
@@ -1079,3 +1085,210 @@ body.suche-offen { overflow: hidden; }
|
||||
.leer-hinweis::after, .call-raum::after, .code-kasten::after { display: none; }
|
||||
.titel, .gruppe__name, h1, h2, .feldschild { text-shadow: none; }
|
||||
}
|
||||
|
||||
/* =====================================================================
|
||||
DIE KARTE SITZT IN DER TAFEL (06.09.2026)
|
||||
|
||||
Wunsch Filipe: "integriere die zugangskachel links nach rechts und
|
||||
passe sie perfekt an damit sie in dem neuen bild rechts perfekt und
|
||||
die vorgemachte kachel passt."
|
||||
|
||||
Im neuen Motiv steht rechts eine leere Tafel mit Neonrahmen. Die
|
||||
Anmeldekarte gehoert dort hinein -- und "hinein" heisst hier wirklich
|
||||
hinein, nicht ungefaehr in die Gegend.
|
||||
|
||||
---------------------------------------------------------------------
|
||||
DAS PROBLEM, DAS MAN LEICHT UEBERSIEHT
|
||||
|
||||
Das Bild liegt mit `object-fit: cover` unter der Seite. Je nach
|
||||
Fensterform schneidet der Browser oben und unten etwas ab -- oder
|
||||
links und rechts. Ein Wert wie `left: 58 %` bezieht sich aber auf das
|
||||
FENSTER, nicht auf das Bild. Sobald jemand das Fenster schmaler
|
||||
zieht, wandert die gemalte Tafel unter der Karte weg, und die Karte
|
||||
steht daneben. Auf genau einer Bildschirmgroesse saehe es perfekt aus
|
||||
und ueberall sonst falsch.
|
||||
|
||||
Deshalb rechnet `.tafel-anker` die Cover-Geometrie noch einmal nach:
|
||||
|
||||
Breite = max(100vw, 100svh * Bildseitenverhaeltnis)
|
||||
Hoehe = max(100svh, 100vw / Bildseitenverhaeltnis)
|
||||
|
||||
Das ist exakt die Formel, nach der auch der Browser das Bild
|
||||
aufzieht. Der Anker ist damit deckungsgleich mit dem Bild -- und
|
||||
Prozentwerte darin sind Prozent DES BILDES.
|
||||
|
||||
---------------------------------------------------------------------
|
||||
DIE VIER ZAHLEN SIND GEMESSEN, NICHT GESCHAETZT
|
||||
|
||||
tools/gate-bauen.mjs sucht den Rahmen im Quellbild: vom Mittelpunkt
|
||||
der Tafel nach aussen, bis es hell oder farbig wird. Zwei fruehere
|
||||
Anlaeufe standen daneben und haben sich selbst verraten -- der erste
|
||||
fand den Mond und die Spiegelungen, der zweite die halbe Bildhoehe,
|
||||
weil oberhalb der Tafel alles genauso schwarz ist. Die Begruendung
|
||||
steht dort im Quelltext.
|
||||
|
||||
Wer das Bild austauscht, laesst das Werkzeug neu laufen und traegt
|
||||
die vier Zeilen hier ein. Sie stehen bewusst als eigene Groessen und
|
||||
nicht verstreut in den Regeln: So ist es EIN Handgriff.
|
||||
===================================================================== */
|
||||
body.gate {
|
||||
--gate-b: 1647; /* Masse des Quellbildes */
|
||||
--gate-h: 955;
|
||||
/* Gemessen von tools/gate-bauen.mjs, danach EINMAL nachjustiert --
|
||||
und der Grund gehoert dazu, sonst sieht es nach Willkuer aus:
|
||||
|
||||
Die Suche laeuft vom Tafelinneren nach aussen und haelt beim ersten
|
||||
farbigen Punkt an. Der linke Rand des Rahmens glueht im Motiv aber
|
||||
viel breiter als der rechte (rot gegen duennes Blau) -- sie haelt
|
||||
links also frueher an. Im Bildschirmfoto bei 1280 px waren es links
|
||||
44 px Luft und rechts 12: die Karte sass 16 px zu weit rechts, und
|
||||
genau so sah sie auch aus.
|
||||
|
||||
Korrigiert um 1,1 % nach links und 0,7 % nach unten, danach im
|
||||
Bildschirmfoto bei 1280, 1440 und 1920 nachgesehen. Die Rohwerte
|
||||
der Messung stehen daneben, damit man den Unterschied sieht.
|
||||
gemessen hier */
|
||||
--tafel-links: 57.49%; /* 58.59% -1.10 */
|
||||
--tafel-oben: 13.60%; /* 12.88% +0.72 */
|
||||
--tafel-breite: 35.70%; /* 34.73% +0.97 */
|
||||
--tafel-hoehe: 62.50%; /* 63.98% -1.48 */
|
||||
}
|
||||
|
||||
/* Vorgabe: Der Anker tut nichts. Er wird erst dort zur Schablone, wo
|
||||
die Tafel im Bild auch wirklich zu sehen ist (siehe unten). So bleibt
|
||||
das bisherige Verhalten auf schmalen Geraeten unangetastet. */
|
||||
.tafel-anker { display: contents; }
|
||||
|
||||
/* ---------------------------------------------------------------------
|
||||
NUR WO DIE TAFEL AUCH HINPASST.
|
||||
|
||||
Drei Bedingungen, jede mit Grund:
|
||||
min-width 1100px darunter ist die Tafel im Ausschnitt zu schmal
|
||||
min-height 620px darunter muesste die Karte unter 12 px schrumpfen
|
||||
min-aspect 7/5 bei hohen Fenstern schneidet cover die Tafel an
|
||||
|
||||
Trifft eine nicht zu, gilt weiter die alte Anordnung (Karte unten
|
||||
mittig, Hochformat-Motiv). Lieber eine ehrliche zweite Anordnung als
|
||||
eine erzwungene erste, die niemand mehr lesen kann.
|
||||
--------------------------------------------------------------------- */
|
||||
@media (min-width: 1100px) and (min-height: 620px) and (min-aspect-ratio: 7/5) {
|
||||
body.gate { align-items: flex-start; }
|
||||
|
||||
.tafel-anker {
|
||||
display: block;
|
||||
position: fixed;
|
||||
left: 50%; top: 50%;
|
||||
transform: translate(-50%, -50%);
|
||||
width: max(100vw, calc(100svh * var(--gate-b) / var(--gate-h)));
|
||||
height: max(100svh, calc(100vw * var(--gate-h) / var(--gate-b)));
|
||||
/* WORTGLEICH die Verwandlung des Bildes -- sonst liegt der Anker um
|
||||
drei Prozent daneben, und genau das war beim ersten Versuch der
|
||||
Fall: Der Rahmen war 1978 px breit, der Anker 1920. */
|
||||
transform: translate(-50%, -50%) scale(1.03)
|
||||
translate3d(var(--parallax-x, 0px), var(--parallax-y, 0px), 0);
|
||||
z-index: 1;
|
||||
/* Der Anker selbst ist nur eine Schablone -- Klicks gehen durch ihn
|
||||
hindurch, sonst laege eine unsichtbare Flaeche ueber dem ganzen
|
||||
Bild. */
|
||||
pointer-events: none;
|
||||
/* Damit die Karte ihre Schriftgroesse an der HOEHE der Tafel
|
||||
ausrichten kann (cqh weiter unten). */
|
||||
container-type: size;
|
||||
}
|
||||
|
||||
.tafel {
|
||||
position: absolute;
|
||||
pointer-events: auto;
|
||||
left: var(--tafel-links);
|
||||
width: var(--tafel-breite);
|
||||
/* DIE KARTE IST DIE TAFEL, nicht ein Kaestchen darin. Sie nimmt
|
||||
deren Rechteck ein und zentriert ihren Inhalt darin.
|
||||
|
||||
Der erste Versuch setzte `top: Mitte` und `translateY(-50%)` --
|
||||
und die Karte hing 300 px unter dem Bildschirmrand. Grund: Auf
|
||||
`.tafel` liegt die Einblend-Animation `auftauchen`, deren
|
||||
Endbild `transform: none` ist. Eine Animation mit `both` gewinnt
|
||||
gegen die Regel; mein translateY war damit wirkungslos. Zwei
|
||||
Wege, dasselbe Element zu verschieben, vertragen sich nicht --
|
||||
also gar keine Verschiebung, sondern ein Kasten mit Hoehe. */
|
||||
top: var(--tafel-oben);
|
||||
height: var(--tafel-hoehe);
|
||||
display: flex; flex-direction: column; justify-content: center;
|
||||
margin: 0;
|
||||
|
||||
/* ALLES SKALIERT MIT DER TAFEL.
|
||||
1 cqh ist ein Prozent der Ankerhoehe -- also des BILDES. Wird das
|
||||
Fenster kleiner, wird die Tafel kleiner, und die Karte darin
|
||||
genauso. Nach unten bei 12 px abgefangen: Darunter ist es keine
|
||||
Anmeldemaske mehr, sondern ein Bild von einer. */
|
||||
/* 1,50 statt 1,59: Bei 1280x800 ist die Tafel 512 px hoch, der
|
||||
Karteninhalt bei 1,59 aber 536 -- gemessen, nicht geschaetzt.
|
||||
24 px Ueberstand sieht man an einem Neonrahmen sofort. */
|
||||
font-size: clamp(12px, 1.50cqh, 16px);
|
||||
padding: 1.75em 1.6em 1.4em;
|
||||
|
||||
/* Die Tafel im Bild ist schon dunkel und hat ihren eigenen Rahmen.
|
||||
Die Karte legt sich deshalb NUR noch als leichter Schleier
|
||||
darueber, statt einen zweiten Kasten mit zweitem Rand zu bauen --
|
||||
zwei Rahmen ineinander saehen nach Versehen aus. */
|
||||
background: rgba(6, 9, 16, .58);
|
||||
border-color: rgba(150, 186, 220, .10);
|
||||
box-shadow: none;
|
||||
backdrop-filter: blur(9px) saturate(112%);
|
||||
-webkit-backdrop-filter: blur(9px) saturate(112%);
|
||||
}
|
||||
|
||||
/* Die Lichtkante entfaellt -- der Neonrahmen des Bildes macht das
|
||||
bereits, und zwar besser. */
|
||||
.tafel__kante { display: none; }
|
||||
|
||||
/* ---- Alles Innere in em, damit es mitskaliert ----------------------
|
||||
Die Karte traegt eine eigene Schriftgroesse; rem wuerde sich
|
||||
weiterhin am Dokument orientieren und die Abstaende blieben stehen,
|
||||
waehrend die Schrift schrumpft. Genau daran erkennt man eine
|
||||
schlecht skalierte Oberflaeche. */
|
||||
.tafel .marke { font-size: .74em; margin-bottom: .5em; }
|
||||
.tafel .titel { font-size: 1.85em; margin-bottom: .3em; }
|
||||
.tafel .unterzeile { font-size: .92em; margin-bottom: 1.15em; }
|
||||
.tafel .feldschild { font-size: .76em; margin-bottom: .6em; }
|
||||
.tafel .rollen { margin-bottom: 1.1em; }
|
||||
.tafel .rolle { padding: .62em .85em; margin-bottom: .42em; gap: .8em; }
|
||||
.tafel .rolle__zeichen { width: 1.32em; height: 1.32em; }
|
||||
.tafel .rolle__name { font-size: .94em; }
|
||||
.tafel .rolle__zusatz { font-size: .79em; }
|
||||
.tafel #code { padding: .72em 2.7em .72em .9em; }
|
||||
.tafel .feld__auge { width: 2.2em; height: 2.2em; padding: .5em; right: .35em; }
|
||||
.tafel .knopf { margin-top: .75em; padding: .7em 1.1em; font-size: .88em; width: 100%; }
|
||||
.tafel .hinweis,
|
||||
.tafel .fehler { font-size: .82em; margin-top: .5em; }
|
||||
.tafel .fuss { margin-top: 1.1em; padding-top: .8em; font-size: .76em; }
|
||||
|
||||
/* ---- Der Schleier ------------------------------------------------
|
||||
Er verlief bisher von links dunkel nach rechts klar -- dort stand
|
||||
die Karte. Jetzt ist es andersherum, und beide Seiten haben eine
|
||||
Aufgabe: links das Logo (soll leuchten), rechts die Tafel (soll
|
||||
ruhig sein). Also nur noch ein sanftes Abdunkeln ueber allem, etwas
|
||||
mehr auf der rechten Haelfte, und ein Hauch Vignette. Kein harter
|
||||
Verlauf mehr -- der haette quer durch das Motiv geschnitten. */
|
||||
.buehne__schleier {
|
||||
background:
|
||||
linear-gradient(96deg,
|
||||
rgba(3, 5, 10, 0.30) 0%,
|
||||
rgba(3, 5, 10, 0.20) 30%,
|
||||
rgba(3, 5, 10, 0.16) 48%,
|
||||
rgba(3, 5, 10, 0.26) 66%,
|
||||
rgba(3, 5, 10, 0.34) 100%),
|
||||
radial-gradient(130% 100% at 50% 120%, rgba(0, 0, 0, .34), transparent 62%);
|
||||
}
|
||||
/* Das Motiv darf heller bleiben: Die Karte bringt jetzt ihren eigenen
|
||||
Untergrund mit, und das Bild ist der Grund, warum die Seite gut
|
||||
aussieht. */
|
||||
.buehne__bild { filter: saturate(1) brightness(.97); }
|
||||
}
|
||||
|
||||
/* Sehr breite Schirme: Die Tafel waechst mit dem Bild, die Schrift ist
|
||||
aber bei 16 px gedeckelt. Damit die Karte darin nicht verloren wirkt,
|
||||
bekommt sie dort etwas mehr Innenabstand. */
|
||||
@media (min-width: 1700px) and (min-height: 900px) {
|
||||
.tafel { padding: 2.2em 2em 1.8em; }
|
||||
}
|
||||
|
||||
Reference in New Issue
Block a user