DogFatherGit/vans-diy-bastelbedarf
1
0
Fork 0
Code Issues Pull Requests Actions 3 Packages Projects Releases Wiki Activity

Zugangsseite: Kopfbereich in eigener "speziellen" Kiste + echter Zentrierungs-Bug behoben

Browse Source 
Gemeldeter Bug: Bei kleineren Fensterhöhen (z.B. Laptop mit wenig Höhe, manche Handy-Größen) hat
"overflow: hidden" auf <body> zusammen mit der vertikal zentrierten Flexbox den oberen Teil des
Inhalts (Badge/Überschrift) und/oder die unteren Fenster einfach abgeschnitten, OHNE dass man
dorthin scrollen konnte — der Inhalt war schlicht nicht mehr erreichbar. Behoben:
- "align-items: safe center" statt nur "center" — zentriert normal, springt aber auf
  Start-Ausrichtung um, sobald der Inhalt höher als der sichtbare Bereich ist.
- overflow-y: auto statt hidden — falls "safe center" von einem Browser nicht unterstützt wird,
  kann trotzdem ganz normal zu den restlichen Fenstern heruntergescrollt werden.
- Logo-Wasserzeichen von position:absolute auf position:fixed umgestellt, damit es IMMER exakt in
  der Mitte des sichtbaren Fensters bleibt, unabhängig von der tatsächlichen Seitenhöhe.

Zusätzlich auf ausdrücklichen Wunsch: der Kopfbereich (Badge + Überschrift + Text) sitzt jetzt in
einer eigenen "speziellen" Kiste im selben Stil wie die beiden Personen-Fenster darunter
(wandernder Verlaufsrand aus allen drei Markenfarben + Glanz-Sweep) statt als loser Text über den
Kisten zu schweben — liest sich jetzt sichtbar als gemeinsames "Dach" über beiden Fenstern.

Per Browsertest über mehrere Fenstergrößen (inkl. absichtlich sehr niedriger Höhe) verifiziert:
Inhalt vollständig erreichbar/scrollbar, Login-Funktion beider Fenster weiterhin unverändert.
This commit is contained in:
qcigano
2026-08-04 16:47:31 +02:00
parent cebb59d910
commit 3c1e0775c9
1 changed files with 48 additions and 5 deletions
Download Patch File Download Diff File Expand all files Collapse all files
public/gate.html
+48 -5
View File
@@ -40,10 +40,17 @@
min-height: 100vh; min-height: 100vh;
display: flex; display: flex;
align-items: center; align-items: center;
/* "safe center": zentriert normal, springt aber auf Start-Ausrichtung um, sobald der Inhalt
höher als der sichtbare Bereich ist — verhindert, dass bei kleineren Fenstern/Handys der
obere Teil (Badge/Überschrift) abgeschnitten wird, ohne dass man hochscrollen könnte (genau
das war der gemeldete Bug: 04.08.2026, zweite Runde). Browser ohne "safe center"-Unterstützung
nutzen einfach die Zeile darüber weiter — kein Fallback-Bruch. */
align-items: safe center;
justify-content: center; justify-content: center;
padding: 1.5rem; padding: 2.5rem 1.5rem;
position: relative; position: relative;
overflow: hidden; overflow-x: hidden;
overflow-y: auto;
background: var(--c-black); background: var(--c-black);
background-image: radial-gradient(60% 50% at 15% 10%, color-mix(in srgb, var(--c-purple-glow) 22%, transparent), transparent 70%), background-image: radial-gradient(60% 50% at 15% 10%, color-mix(in srgb, var(--c-purple-glow) 22%, transparent), transparent 70%),
radial-gradient(50% 45% at 85% 90%, color-mix(in srgb, var(--c-accent) 16%, transparent), transparent 70%); radial-gradient(50% 45% at 85% 90%, color-mix(in srgb, var(--c-accent) 16%, transparent), transparent 70%);
@@ -55,9 +62,13 @@
dreht das schwarze Logo auf weißem Grund um (weiß -> schwarz, schwarz -> weiß), danach macht dreht das schwarze Logo auf weißem Grund um (weiß -> schwarz, schwarz -> weiß), danach macht
mix-blend-mode:screen den (jetzt schwarzen) ehemals-weißen Kreis komplett unsichtbar und mix-blend-mode:screen den (jetzt schwarzen) ehemals-weißen Kreis komplett unsichtbar und
lässt nur die (jetzt weißen) Linien leicht aufleuchten — kein Bildbearbeitungsprogramm nötig, lässt nur die (jetzt weißen) Linien leicht aufleuchten — kein Bildbearbeitungsprogramm nötig,
rein CSS. Langsame Drehung sorgt für einen dezenten "lebendigen" Glanz-Effekt. */ rein CSS. Langsame Drehung sorgt für einen dezenten "lebendigen" Glanz-Effekt.
position:fixed (04.08.2026 geändert, war vorher absolute): bleibt IMMER exakt in der Mitte
des sichtbaren Fensters, unabhängig davon, wie hoch der Inhalt gerade ist bzw. ob gescrollt
wird — vorher konnte das Logo bei einem hohen Inhalt (z.B. schmales Handy-Fenster) neben der
Bildschirmmitte statt in ihr landen, weil "top:50%" sich auf die GESAMTE Seitenhöhe bezog. */
.gate-logo-bg { .gate-logo-bg {
position: absolute; position: fixed;
top: 50%; top: 50%;
left: 50%; left: 50%;
width: min(1400px, 200vw); width: min(1400px, 200vw);
@@ -91,7 +102,39 @@
width: 100%; width: 100%;
text-align: center; text-align: center;
} }
.gate-header { margin-bottom: 1.6rem; } /* Kopf-Kiste (04.08.2026, auf ausdrücklichen Wunsch "auch in speziellen Kisten"): dieselbe
"besondere" Formsprache wie die beiden Personen-Fenster darunter (wandernder Verlaufsrand +
Glanz-Sweep) — nur mit allen drei Markenfarben zugleich im Rand, statt der Einzelfarbe je
Person, damit sie sich sichtbar als "Dach" über beiden Fenstern liest. */
.gate-header {
position: relative;
overflow: hidden;
margin-bottom: 1.3rem;
padding: 1.7rem 2rem;
border-radius: var(--radius-l);
border: 1.5px solid transparent;
background:
linear-gradient(165deg, var(--c-anthracite-light), var(--c-anthracite)) padding-box,
linear-gradient(120deg, var(--c-accent), var(--c-purple-glow), var(--c-gold), var(--c-accent)) border-box;
background-size: 100% 100%, 300% 100%;
animation: gate-border-shift 9s ease-in-out infinite;
box-shadow: 0 20px 50px -20px rgba(0, 0, 0, 0.7);
}
.gate-header::after {
content: "";
position: absolute;
top: 0;
left: -60%;
width: 35%;
height: 100%;
background: linear-gradient(100deg, transparent, rgba(255, 255, 255, 0.12), transparent);
transform: skewX(-18deg);
animation: gate-shine 6s ease-in-out infinite;
pointer-events: none;
border-radius: inherit;
}
.gate-header > * { position: relative; z-index: 1; }
@media (prefers-reduced-motion: reduce) { .gate-header, .gate-header::after { animation: none; } }
.gate-eyebrow { .gate-eyebrow {
display: inline-block; display: inline-block;
font-size: 0.78rem; font-size: 0.78rem;