P-022026auch persönlich

Diese Seite.

Selbst geschrieben statt gemietet, damit die Daten mir gehören und das Layout keiner Vorlage gehorcht. Die persönliche Hälfte ist als Ersatz für soziale Netzwerke gedacht — die steht noch nicht.

Ausprobieren — zieh den Cursor über beide

Ein gewöhnlicher Link

Markiere diese Wörter mit dem Cursor.

Der hier verwendete

Markiere diese Wörter mit dem Cursor.

Die Linie unter dem rechten Link ist keine text-decoration. Sie misst die markierten Zeichen — ihre Pixelgeometrie, live, nicht ihre Zeichenpositionen — und zeichnet sich genau auf diese Breite und Position neu, in derselben Akzentfarbe wie die Markierung. Markiere zwei Wörter, und sie deckt zwei Wörter ab.

Außerdem unterdrückt sie den Hover-Effekt, solange markiert wird. Links färbt sich beim Ziehen der ganze Link um, weil der Cursor technisch gesehen darüber schwebt. Rechts bleibt alles ruhig, bis du loslässt.

Farben wechseln — die ganze Seite zieht mit

Die erste Palette hier war nicht meine. Claude hat sie vorgeschlagen, während ich die Seite gebaut habe — warmes Orange auf Beige — und sie sah gut aus, aber sie war nicht ich. Sie steht immer noch in der Liste oben, unter ihrem eigenen Namen. Ich bestehe aus Teilen, die ich von anderen Menschen übernommen habe, und ich habe genauso wenig eine Lieblingsfarbe wie eine einzige Seite — also legt sich die Seite auch nicht fest.

Eine Zeit lang hat der Server die Palette festgelegt, bevor die Seite rausging — die elegante Variante: die richtigen Farben im ersten Byte, nichts, was laufen muss. Dann zog die Seite als Ordner statischer Dateien auf einen einfachen Host, und es war kein Server mehr da, den man fragen könnte. Jetzt läuft es andersherum: ein kleines Skript im Head, bevor irgendetwas gezeichnet wird, das das Cookie liest oder eine neue Farbe würfelt. Rund 350 Bytes, und es muss blockieren — alles Verzögerte zeichnet zuerst die falsche Palette. Das Attribut am html-Element ist weiterhin die einzige Kopie des Werts: das CSS liest es direkt, und React abonniert es, statt eine eigene zu halten.

Die Farbe, mit der du angekommen bist, hast du nicht gewählt. Sie wurde beim Öffnen zufällig gezogen und bleibt für diesen Besuch — Browser schließen, wiederkommen, andere Farbe. Und sie läuft am Tagesende ohnehin ab, morgen wird also neu gewürfelt.

Stack

Next.jsReactTypeScriptTailwind CSSMotion
Alle Projekte