Startseite: groessere Kacheln, und das Licht folgt dem Zeiger

Rueckmeldung Filipe: "richtige richtung, die sollen nur bissl groesser
sein und noch bissl mehr spezieller."

GROESSER, gemessen statt geglaubt:
  Zeichenfeld  38 -> 46 px (Dashboard 56)
  Name        .93 -> 1.02 rem (Dashboard 1.18)
  Polsterung   14 -> 18 px, Ecken 15 -> 18 px
  Kachelhoehe        rund 60 -> ueber 80 px

Dabei fiel der eigene Test von vorhin sofort ein: Bei 880 px Seitenbreite
sind drei Kacheln je 285 px breit, und in den groesseren Schriften brach
der Text an ZWOELF Stellen ab. Statt die Schrift wieder zu verkleinern
bekommt die Startseite die volle Breite (1240 px) -- das ist die
ehrlichere Loesung. Hinweise, Begruessung und Fusstext behalten ihr Mass
von 940 px: Eine Textzeile ueber 1240 px zu ziehen macht sie nicht
lesbarer, sondern anstrengender.

SPEZIELLER, drei Dinge:

1. DAS LICHT FOLGT DEM ZEIGER. Jede Kachel traegt einen weichen
   Lichtfleck. Er sitzt ruhend oben links und wandert unter dem Zeiger
   mit. Kein Blinken, keine Bewegung des Inhalts -- es wird nur an einer
   anderen Stelle heller. Das ist die Kleinigkeit, die man nicht sieht,
   sondern erst beim Benutzen merkt.

   EIN Zuhoerer fuer alle Kacheln statt siebzehn, und in einem Bild je
   Rahmen: pointermove feuert dutzendfach je Sekunde, wer bei jedem
   Ereignis in den Stil schreibt, laesst den Browser umsonst rechnen.
   Beim Verlassen zurueck in die Ruhelage -- sonst blieben die Kacheln
   nach einer Weile alle unterschiedlich beleuchtet stehen. Auf
   Fingerbedienung und bei "weniger Bewegung" bleibt es ganz aus; dort
   gibt es keinen Zeiger, dem etwas folgen koennte. Beides geprueft.

2. Eine feine helle Linie an der Oberkante jeder Kachel. Ein Pixel, kaum
   sichtbar -- aber die Kachel wirkt dadurch von oben beleuchtet statt
   aufgeklebt. Das Zeichenfeld bekommt denselben Lichtrand und einen
   Verlauf, wodurch es gepraegt statt gemalt wirkt.

3. Beim Ueberfahren: farbiger Schein unter der Kachel im eigenen Ton,
   die Kante links waechst von 3 auf 4 px, das Zeichen um 4 Prozent.
   Alles unter zwei Pixeln Bewegung.

Die Trennlinie der Gruppenueberschriften laeuft nach rechts aus, statt
hart abzubrechen -- eine durchgezogene Linie zerschneidet die Seite, eine
auslaufende gliedert sie nur.

47 Pruefungen. Neu darunter: Zeichenfeld und Schriftgroesse werden
gemessen ("sieht groesser aus" ist kein Nachweis), und das Licht wird mit
echten Mausbewegungen an drei Stellen geprueft.

Co-Authored-By: Claude Opus 5 <[email protected]>
This commit is contained in:
2026-08-31 22:50:17 +02:00
co-authored by Claude Opus 5
parent d05a772ee4
commit e25a22149b
22 changed files with 305 additions and 150 deletions
+5 -5
View File
@@ -7,9 +7,9 @@
<meta name="robots" content="noindex, nofollow" />
<meta name="theme-color" content="#05070d" />
<link rel="icon" href="assets/img/favicon.png" />
<link rel="stylesheet" href="assets/css/gate.css?v=202608312236" />
<link rel="stylesheet" href="assets/css/start.css?v=202608312236" />
<link rel="stylesheet" href="assets/css/uebersicht.css?v=202608312236" />
<link rel="stylesheet" href="assets/css/gate.css?v=202608312250" />
<link rel="stylesheet" href="assets/css/start.css?v=202608312250" />
<link rel="stylesheet" href="assets/css/uebersicht.css?v=202608312250" />
</head>
<body class="start">
@@ -52,7 +52,7 @@
</main>
<script src="assets/js/kopf.js?v=202608312236" defer></script>
<script src="assets/js/uebersicht.js?v=202608312236" defer></script>
<script src="assets/js/kopf.js?v=202608312250" defer></script>
<script src="assets/js/uebersicht.js?v=202608312250" defer></script>
</body>
</html>