diff --git a/resources/views/livewire/admin/host-terminal.blade.php b/resources/views/livewire/admin/host-terminal.blade.php index aa759dc..b78bcb5 100644 --- a/resources/views/livewire/admin/host-terminal.blade.php +++ b/resources/views/livewire/admin/host-terminal.blade.php @@ -67,32 +67,43 @@ class="absolute inset-0 z-10 flex flex-col items-center justify-center gap-6 bg-ink px-6 text-center" data-stage-messages="{{ json_encode($messages, JSON_UNESCAPED_UNICODE) }}"> - {{-- Schriftgrafik, keine Bilddatei — deshalb `role="img"` mit einem - lesbaren Namen statt `aria-hidden`: ein Screenreader soll "CluPilot" - hören, nicht die einzelnen Zeichen der Zeichnung. + {{-- Die Wortmarke als Schriftgrafik. - Vollblöcke, nicht `_ / \ |`. Die erste Fassung war eine gewöhnliche - Figlet-Zeichnung, und die funktioniert nur in einer echten - Terminalschrift: sie setzt darauf, dass der Unterstrich einer Zeile - den Strich der nächsten berührt. In IBM Plex Mono sitzt der - Unterstrich tiefer — bei enger Zeilenhöhe verschmierte das Wort, bei - weiter zerfiel es in Einzelteile. Beides im Browser durchgemessen, - beides unlesbar. `█` füllt seine Zelle ganz aus und stapelt deshalb - in jeder Schrift sauber. + `role="img"` mit lesbarem Namen statt `aria-hidden`: ein + Screenreader soll „CluPilot" hören, nicht die einzelnen Zeichen der + Zeichnung. + + Selbst gezeichnet, nicht aus einer Figlet-Schrift übernommen. Die + übernommene Fassung hatte im Bogen des `P` einen Überhang — eine + Zelle in der zweiten Zeile, unter der in der ersten nichts stand — + und der stand als loser Klotz mitten im Wort. Figlet-Schriften sind + für echte Terminalschriften gezeichnet und tragen hier nicht. Jeder + Buchstabe ist sechs Zellen breit (das `I` zwei), mit einer Zelle + Abstand, und keine Zelle steht ohne Nachbarn darüber. Nicht von Hand + abgezählt, sondern aus einer Buchstabentabelle gesetzt — von Hand + hatte ich mich prompt verzählt, und die Buchstaben liefen ineinander. + + `█` füllt seine Zelle ganz aus und stapelt deshalb in jeder Schrift + sauber — anders als `_ / \ |`, die auf Berührung zwischen den Zeilen + angewiesen sind. Bei enger Zeilenhöhe verschmierte das Wort damit, + bei weiter zerfiel es. Beides im Browser durchgemessen. Immer Akzentfarbe, auch im Fehlerfall: Dunkelrot auf Fast-Schwarz hatte kaum Kontrast, und eine Wortmarke, die ihre Farbe wechselt, ist ohnehin keine Statuslampe — was los ist, sagt die Zeile darunter. - 8px am Telefon: bei 11px ist die Zeichnung 403px breit und schöbe auf - einem schmalen Schirm die Seite zur Seite. --}} + Zwei Größen: die Zeichnung ist 51 Zellen breit, und eine Zelle ist + gut 0,6 der Schriftgröße. 15px ergeben rund 460px — auf dem Schirm + eine Wortmarke, kein Etikett. Am Telefon sind es 10px und damit gut + 300px, was neben den Rändern noch hineinpasst; bei 15px schöbe sie + die Seite zur Seite. --}} + class="select-none font-mono text-[10px] leading-none text-accent sm:text-[15px]" + role="img" aria-label="CluPilot"> ████ ██ ██ ██ ██████ ██ ██ ████ ██████ +██ ██ ██ ██ ██ ██ ██ ██ ██ ██ ██ +██ ██ ██ ██ ██████ ██ ██ ██ ██ ██ +██ ██ ██ ██ ██ ██ ██ ██ ██ ██ + ████ ██████ ████ ██ ██ ██████ ████ ██ {{-- aria-live: die Bühne tauscht ihren Text aus, ohne dass die Seite neu lädt. Ohne diesen Hinweis erführe ein Screenreader vom Abbruch