Startseite hochwertiger: Typografie, Weltfarben, Event-Karte
Wunsch 27.08.2026: "soll nur noch hochwertiger und professioneller
aussehen." Kein neues Design, sondern die Details, die den Unterschied
zwischen "gemacht" und "gesetzt" ausmachen:
- Ueberschrift enger gesetzt (-.022em, Zeilenabstand 1.08, text-wrap:
balance). Bei 4rem wirkt normale Laufweite auseinandergefallen; die
drei Zeilen verteilen sich jetzt gleichmaessig statt mit kurzer
Restzeile.
- Jede Welt-Kachel traegt die Farbe IHRER Welt statt dreimal derselben:
Babyblau, Silber, das gedeckte Rot von Spicy Media. Die Werte sind
nicht erfunden, sondern die --accent-Toene der drei Themendateien.
- Plaketten ("WELT 1") klein, in Versalien, weit gesperrt -- liest sich
als Kapitelmarke statt als Beschriftung.
- Event-Karte: Datum als gesperrte Versalzeile (ordnet sich dem Titel
unter), "Mehr erfahren" als ruhiger Knopf statt nacktem Textlink,
Haarlinie am Bild, Text auf 5 Zeilen begrenzt -- damit nicht die
Textlaenge aus der Verwaltung das Aussehen der Startseite bestimmt und
bei zwei Events beide Kacheln gleich hoch sind (geprueft: 572/572px).
ZWEI FUNDE BEIM PRUEFEN, BEIDE WICHTIGER ALS DER FEINSCHLIFF:
1. INHALTSRICHTLINIE UND ZEILENENDEN. Der Browser rechnet die Pruefsumme
eines Inline-Skripts NICHT ueber die Bytes der Datei, sondern ueber
den Text im Dokument -- und der HTML-Parser ersetzt beim Einlesen
jedes CR LF durch LF (HTML-Spezifikation, "preprocessing the input
stream"). Eine Datei mit Windows-Zeilenenden ergibt serverseitig also
eine ANDERE Summe, und die Seite fuehrt ihr eigenes Skript nicht mehr
aus: kein Live-Status, keine Events, nichts. Live war es unauffaellig
(Linux-Auscheckung hat LF), auf dem Windows-Rechner sofort tot
(core.autocrlf=true). inhaltsrichtlinie.js vereinheitlicht jetzt vor
dem Rechnen auf LF -- das ist die Summe, die der Browser wirklich
bildet, und macht die Richtlinie unabhaengig davon, mit welchem
Werkzeug eine Datei zuletzt gespeichert wurde.
2. TESTS MIT FESTEM PORT KOENNEN LUEGEN. Drei Server aus frueheren
Laeufen liefen noch. Neue Testlaeufe konnten ihren Port nicht belegen,
starben still -- und massen weiter gegen den ALTEN Code. Ergebnis
waren Fehlermeldungen zu einem laengst behobenen Fehler. pruef-musik,
pruef-kasse und pruef-startseite suchen sich jetzt einen freien Port.
Neuer Test pruef-startseite.mjs (19 Pruefungen) mit FESTEN Event-Daten:
Beim Pruefen kam einmal nichts vom Server, der Abschnitt blieb leer und
der Test haette "kein Fehler" gemeldet, obwohl er nichts gesehen hat.
Geprueft werden Maske am Artwork, genau eine Kachel bei einem Event,
volle Breite, saubere Textkuerzung auf ganze Zeilen, eigene Weltfarben,
zwei gleich hohe Kacheln bei zwei Events, Handy ohne Ueberlauf.
Alles gruen: startseite 19, musik 17, kasse 15, inhaltsrichtlinie 22,
handy 56.
Co-Authored-By: Claude Opus 5 <[email protected]>
This commit is contained in:
Claude Opus 5
+126
-16
@@ -1925,17 +1925,58 @@ header.site-header {
|
||||
}
|
||||
@keyframes jahres-event-goldglanz { 0%, 100% { opacity: .3; } 50% { opacity: 1; } }
|
||||
@media (prefers-reduced-motion: reduce) { .jahres-event-shine { animation: none; opacity: .6; } }
|
||||
/* Datum als gesperrte Versalzeile: eine Zeitangabe ist eine Marke, keine
|
||||
Überschrift. So ordnet sie sich dem Titel unter, statt mit ihm zu
|
||||
konkurrieren (Feinschliff 27.08.2026). */
|
||||
.jahres-event-datum {
|
||||
display: block;
|
||||
color: #e8c465;
|
||||
color: #d9b45c;
|
||||
font-weight: 700;
|
||||
font-size: .82rem;
|
||||
letter-spacing: .02em;
|
||||
font-size: .72rem;
|
||||
letter-spacing: .14em;
|
||||
text-transform: uppercase;
|
||||
margin-bottom: .3rem;
|
||||
}
|
||||
.jahres-event-card h3 { margin: 0 0 .4rem; font-size: 1.15rem; }
|
||||
.jahres-event-card p { margin: 0 0 .6rem; color: var(--text-muted); font-size: .93rem; line-height: 1.55; }
|
||||
.jahres-event-mehr { color: #e8c465; font-weight: 600; font-size: .88rem; }
|
||||
/* Der Text kommt aus der Verwaltung und kann beliebig lang sein. Fünf
|
||||
Zeilen halten die Karte in Form, egal was jemand einträgt — der
|
||||
vollständige Text steht ohnehin im Fenster, das ein Klick öffnet.
|
||||
Ohne diese Grenze bestimmt die Textlänge das Aussehen der Startseite,
|
||||
und bei zwei Events stünden zwei unterschiedlich hohe Kacheln
|
||||
nebeneinander. Gekürzt wird mit Auslassungspunkten, nicht mit einer
|
||||
mitten durchgeschnittenen Zeile (siehe Hülle in index.html). */
|
||||
.jahres-event-textwrap p {
|
||||
display: -webkit-box;
|
||||
-webkit-line-clamp: 5;
|
||||
-webkit-box-orient: vertical;
|
||||
overflow: hidden;
|
||||
}
|
||||
/* "Mehr erfahren" war ein nackter Textlink in einer Karte, die man als
|
||||
Ganzes anklickt — er sah aus wie vergessener Fließtext. Als ruhiger
|
||||
Knopf ist sofort klar, dass hier etwas passiert; er reagiert mit der
|
||||
ganzen Karte, weil die Karte selbst der Schalter ist. */
|
||||
.jahres-event-mehr {
|
||||
display: inline-flex;
|
||||
align-items: center;
|
||||
gap: .45rem;
|
||||
padding: .52rem 1.05rem;
|
||||
border-radius: 999px;
|
||||
border: 1px solid rgba(212, 175, 55, .40);
|
||||
background: rgba(212, 175, 55, .07);
|
||||
color: #e8c465;
|
||||
font-weight: 600;
|
||||
font-size: .86rem;
|
||||
transition: background .18s ease, border-color .18s ease;
|
||||
}
|
||||
.jahres-event-card:hover .jahres-event-mehr,
|
||||
.jahres-event-card:focus-visible .jahres-event-mehr {
|
||||
background: rgba(212, 175, 55, .14);
|
||||
border-color: rgba(212, 175, 55, .65);
|
||||
}
|
||||
/* Das Bild bekommt eine Haarlinie als Rahmen — ohne sie schwimmt eine
|
||||
dunkle Fotokante im dunklen Kartenhintergrund. */
|
||||
.jahres-event-bild:not([hidden]) { border: 1px solid rgba(255, 255, 255, .07); }
|
||||
/* Genau EIN aktives Event (27.08.2026 neu gebaut).
|
||||
|
||||
VORHER: eine 480px schmale Kachel, zentriert in einer 1180px breiten
|
||||
@@ -1984,9 +2025,20 @@ header.site-header {
|
||||
stehen im HTML als Geschwister nebeneinander, deshalb hier ein eigenes
|
||||
Unter-Raster statt eines zusätzlichen <div> im Markup — so bleibt die
|
||||
Vorlage in der Verwaltung unverändert. */
|
||||
.jahres-events-grid-einzeln .jahres-event-datum { grid-column: 2; margin-bottom: .15rem; }
|
||||
.jahres-events-grid-einzeln .jahres-event-card h3 { grid-column: 2; font-size: 1.5rem; margin-bottom: .5rem; }
|
||||
.jahres-events-grid-einzeln .jahres-event-card p { grid-column: 2; font-size: 1rem; margin-bottom: .8rem; }
|
||||
.jahres-events-grid-einzeln .jahres-event-datum { grid-column: 2; margin-bottom: .35rem; }
|
||||
.jahres-events-grid-einzeln .jahres-event-card h3 {
|
||||
grid-column: 2;
|
||||
font-size: 1.5rem;
|
||||
line-height: 1.22;
|
||||
letter-spacing: -.012em;
|
||||
margin-bottom: .55rem;
|
||||
}
|
||||
.jahres-events-grid-einzeln .jahres-event-textwrap { grid-column: 2; margin-bottom: 1.05rem; }
|
||||
.jahres-events-grid-einzeln .jahres-event-card p {
|
||||
font-size: 1rem;
|
||||
line-height: 1.62;
|
||||
margin-bottom: 0;
|
||||
}
|
||||
.jahres-events-grid-einzeln .jahres-event-mehr { grid-column: 2; justify-self: start; }
|
||||
.jahres-events-grid-einzeln .jahres-event-bild:not([hidden]) { grid-column: 1; grid-row: 1 / -1; }
|
||||
|
||||
@@ -2996,9 +3048,25 @@ footer.site-footer {
|
||||
Status-Kästchen, Buttons) auf großen PC-Bildschirmen zu klein — hier
|
||||
moderat vergrößert, ohne die mobile Größe (untere Klammer der clamp()s)
|
||||
anzufassen. */
|
||||
.hero-cinematic h1 { font-size: clamp(2.3rem, 6.2vw, 4.2rem); }
|
||||
.hero-cinematic .lead { font-size: clamp(1.25rem, 1.9vw, 1.55rem); }
|
||||
.hero-cinematic .eyebrow { font-size: .95rem; }
|
||||
/* Feinschliff 27.08.2026: Je größer eine Schrift gesetzt ist, desto mehr
|
||||
Luft steht zwischen den Buchstaben — bei 4rem wirkt normale Laufweite
|
||||
auseinandergefallen. Negative Sperrung und engerer Zeilenabstand sind
|
||||
der Unterschied zwischen "groß geschrieben" und "gesetzt". text-wrap:
|
||||
balance verteilt die drei Zeilen gleichmäßig, statt eine kurze
|
||||
Restzeile stehen zu lassen. */
|
||||
.hero-cinematic h1 {
|
||||
font-size: clamp(2.3rem, 6.2vw, 4.2rem);
|
||||
letter-spacing: -.022em;
|
||||
line-height: 1.08;
|
||||
text-wrap: balance;
|
||||
}
|
||||
.hero-cinematic .lead {
|
||||
font-size: clamp(1.25rem, 1.9vw, 1.55rem);
|
||||
max-width: 34ch;
|
||||
margin-left: auto;
|
||||
margin-right: auto;
|
||||
}
|
||||
.hero-cinematic .eyebrow { font-size: .88rem; letter-spacing: .2em; }
|
||||
.hero-cinematic .card { padding: 1.3rem 1.8rem; }
|
||||
.hero-cinematic .card .badge { font-size: .9rem; }
|
||||
.hero-cinematic .card .small { font-size: 1.05rem; }
|
||||
@@ -3012,25 +3080,67 @@ footer.site-footer {
|
||||
oben, wie ihn eine Fläche bekommt, auf die Licht von vorne fällt —
|
||||
dadurch gehören sie sichtbar zur selben Szene. Deckkraft bleibt hoch
|
||||
genug, dass der Text ruhig lesbar bleibt (Projektregel: augenschonend
|
||||
vor Effekt). */
|
||||
vor Effekt).
|
||||
|
||||
FEINSCHLIFF 27.08.2026 ("soll nur noch hochwertiger und professioneller
|
||||
aussehen"): Jede Kachel trägt jetzt die Farbe IHRER Welt statt dreimal
|
||||
derselben Standardfarbe — Babyblau für DogFather, Silber für HasiDog,
|
||||
das gedeckte Rot von Spicy Media für den Manager. Die Werte sind nicht
|
||||
erfunden, sondern exakt die --accent-Töne der drei Themen-Dateien; die
|
||||
Kacheln führen damit sichtbar in die Welt, in die sie verlinken.
|
||||
Übernommen wird der Ton an drei Stellen: Lichtsaum, Plakette und
|
||||
Rahmen beim Darüberfahren — dezent, nicht als Farbanstrich. */
|
||||
.hero-cinematic .hero-grid .card {
|
||||
position: relative;
|
||||
--welt: var(--accent);
|
||||
padding: 1.75rem 1.5rem 1.65rem;
|
||||
background: linear-gradient(180deg, rgba(22, 26, 35, .88), rgba(14, 17, 23, .92));
|
||||
border-color: rgba(255, 255, 255, .11);
|
||||
border-color: rgba(255, 255, 255, .10);
|
||||
-webkit-backdrop-filter: blur(7px);
|
||||
backdrop-filter: blur(7px);
|
||||
box-shadow: 0 14px 38px rgba(0, 0, 0, .40);
|
||||
transition: border-color .18s ease, transform .18s ease, box-shadow .18s ease;
|
||||
}
|
||||
.hero-cinematic .hero-grid .card[data-theme="dogfather"] { --welt: #8fd9ea; }
|
||||
.hero-cinematic .hero-grid .card[data-theme="hasidog"] { --welt: #c7ccd1; }
|
||||
.hero-cinematic .hero-grid .card[data-theme="spicymedia"] { --welt: #d94a5c; }
|
||||
.hero-cinematic .hero-grid .card::before {
|
||||
content: "";
|
||||
position: absolute;
|
||||
top: 0; left: 12%; right: 12%;
|
||||
top: 0; left: 14%; right: 14%;
|
||||
height: 1px;
|
||||
background: linear-gradient(90deg, transparent, rgba(255, 255, 255, .30), transparent);
|
||||
background: linear-gradient(90deg, transparent, color-mix(in srgb, var(--welt) 60%, transparent), transparent);
|
||||
opacity: .75;
|
||||
transition: opacity .18s ease;
|
||||
pointer-events: none;
|
||||
}
|
||||
.hero-cinematic .hero-grid .card:hover { box-shadow: 0 18px 46px rgba(0, 0, 0, .5); }
|
||||
.hero-cinematic .hero-grid .tag { font-size: .8rem; }
|
||||
.hero-cinematic .hero-grid .card:hover,
|
||||
.hero-cinematic .hero-grid .card:focus-visible {
|
||||
border-color: color-mix(in srgb, var(--welt) 45%, transparent);
|
||||
box-shadow: 0 18px 46px rgba(0, 0, 0, .5);
|
||||
}
|
||||
.hero-cinematic .hero-grid .card:hover::before { opacity: 1; }
|
||||
/* Plakette: kleiner, in Versalien und weit gesperrt. Das liest sich als
|
||||
Kapitelmarke ("Welt 1") statt als Beschriftung und ist der Grund,
|
||||
warum dieselbe Kachel plötzlich wertiger wirkt — nicht mehr Farbe. */
|
||||
.hero-cinematic .hero-grid .tag {
|
||||
font-size: .68rem;
|
||||
letter-spacing: .14em;
|
||||
text-transform: uppercase;
|
||||
color: var(--welt);
|
||||
border-color: color-mix(in srgb, var(--welt) 40%, transparent);
|
||||
background: color-mix(in srgb, var(--welt) 9%, transparent);
|
||||
}
|
||||
/* Überschrift enger gesetzt (große Schrift braucht weniger Laufweite),
|
||||
Fließtext mit ruhigerem Zeilenabstand und begrenzter Zeilenlänge —
|
||||
sonst franst der zentrierte Satz unregelmäßig aus. */
|
||||
.hero-cinematic .hero-grid h2 { letter-spacing: -.012em; line-height: 1.18; margin-top: .55rem; }
|
||||
.hero-cinematic .hero-grid p {
|
||||
line-height: 1.62;
|
||||
max-width: 31ch;
|
||||
margin-left: auto;
|
||||
margin-right: auto;
|
||||
}
|
||||
.hero-cinematic .hero-grid h3 { font-size: 1.45rem; }
|
||||
.hero-cinematic .hero-grid p { font-size: 1.05rem; }
|
||||
|
||||
|
||||
Reference in New Issue
Block a user