Explorar el Código

Don't force-uppercase user text so ß renders as typed, not SS

The name showed as JOSEF STRASSL because CSS text-transform: uppercase
expands lowercase ß to SS per Unicode case mapping (browsers, JS toUpperCase
and PHP mb_strtoupper all do this). The stored data was always correct.
Drop the uppercase transform from the elements that display user content —
artist name (hero h1, public nav brand, footer) and gallery titles
(.page-title, .gate-card h1) — so they show exactly as typed. Static English
UI (nav links, buttons, labels, table headers, admin brand) keeps uppercase.

Co-Authored-By: Claude Fable 5 <noreply@anthropic.com>
Medowar hace 1 mes
padre
commit
a13d46c93e
Se han modificado 1 ficheros con 12 adiciones y 4 borrados
  1. 12 4
      assets/site.css

+ 12 - 4
assets/site.css

@@ -59,6 +59,14 @@ a { color: inherit; text-decoration: none; }
     font-weight: 500;
 }
 
+/* The public brand is the artist's name (user content): show it exactly as
+   typed rather than force-uppercased, so characters like ß are not expanded
+   to SS by the browser. Admin/login brand keeps the uppercase styling. */
+.nav .nav-brand {
+    text-transform: none;
+    letter-spacing: .12em;
+}
+
 .nav-links {
     display: flex;
     gap: 2rem;
@@ -107,7 +115,7 @@ a { color: inherit; text-decoration: none; }
     font-size: clamp(2.2rem, 6vw, 4.5rem);
     font-weight: 300;
     letter-spacing: .12em;
-    text-transform: uppercase;
+    /* Artist name shown as typed (see .nav .nav-brand) so ß stays ß. */
 }
 
 .hero-scroll-hint {
@@ -198,7 +206,7 @@ body.reel-page { scroll-snap-type: y mandatory; }
 .page-title {
     font-weight: 300;
     letter-spacing: .1em;
-    text-transform: uppercase;
+    /* Gallery title is user content — shown as typed so ß stays ß. */
     font-size: clamp(1.4rem, 3vw, 2.2rem);
     margin-bottom: .4rem;
 }
@@ -221,7 +229,7 @@ body.reel-page { scroll-snap-type: y mandatory; }
 .gate-card h1 {
     font-weight: 300;
     letter-spacing: .12em;
-    text-transform: uppercase;
+    /* Gallery title is user content — shown as typed so ß stays ß. */
     font-size: 1.4rem;
     margin-bottom: 1.8rem;
 }
@@ -304,7 +312,7 @@ body.reel-page { scroll-snap-type: y mandatory; }
     color: var(--muted);
     font-size: .75rem;
     letter-spacing: .15em;
-    text-transform: uppercase;
+    /* Contains the artist name — shown as typed so ß stays ß. */
     text-align: center;
 }