UI-Zeichen

Auf einem 24×24-Raster mit 1,75er Strich gezeichnet, runde Enden, keine Füllung — durchgehend eine Hand. Unten bei 28px gezeichnet, damit der Strich als Strich lesbar ist.

• arrow-up
• arrow-right
• arrow-left
• external
• hash
• search
• pencil
• chevron-right
• check
• moon
• sun
• rss
• email
• ai

Das ai-Zeichen ist das ungewöhnliche und das begründete: eine Reißfeder über einer geplotteten Linie, die Linie gestrichelt, weil eine Maschine sie gezogen hat. Es ist kein Funkeln. Ein Funkeln sagt Magie; dieses Zeichen muss Werkzeug sagen — und es ist dasselbe Zeichen in beiden Körnungen: neben dem Titel gestempelt für ein ganzes Blatt, auf der Änderungsfahne geflaggt für eine einzelne Passage.

Markenzeichen

Das sind offizielle Logotypen von Simple Icons (CC0), also gefüllte Formen statt Striche. Sie lassen sich nicht auf das 24×24-Strichraster umzeichnen, ohne jemandes Marke falsch wiederzugeben — deshalb schalten sie den Strich ab und bringen ihre eigene Füllung mit.

• github
• gitlab
• codeberg
• stackoverflow
• mastodon
• bluesky
• x
• linkedin
• reddit
• ycombinator
• telegram
• whatsapp

Eines davon hat einen zweiten Namen. ycombinator schreibt eine Seite in socialIcons, hackernews ist der Schlüssel, den die Share-Zeile für das Submit-Ziel verwendet. Beide lösen zum selben Logotyp auf:

• ycombinator
• hackernews

Was ein unbekannter Name tut

Nichts stillschweigend. Ein Name ohne Zweig fällt auf ein allgemeines Link-Zeichen durch, damit ein Tippfehler auf der Seite auftaucht, statt ein Loch zu hinterlassen, wo ein Icon sein sollte:

• kein-icon

Das ist der ganze Fehlerfall, und er ist der Grund, warum diese Seite ein gerendertes Blatt ist und keine Liste: Jeder Name oben wird hier wirklich gezeichnet, also wird einer, der nicht mehr auflöst, offen sichtbar zu genau diesem Link-Zeichen.

Für eigene Zeichen _partials/icon.html um einen weiteren Zweig erweitern und beim 24×24-Raster bleiben.

Ein Profil, bis zu fünf Ansichten

Unter dem Profilblock kann eine Startseite about, skills, record, projects und contact tragen. Jede rendert nur, wenn ihr eigener Schlüssel gesetzt ist, es gibt also nichts abzuschalten. Setzt man keine, hat man das schlichte Profil, mit dem das Theme angefangen hat.

Diese Demo setzt auf Englisch alle fünf und lässt projects auf Deutsch bewusst weg. Das ist kein Versehen, das behoben gehört. Ein Zweig, den nichts baut, ist ein Zweig, den nichts prüft: der Pfad „Ansicht fehlt" brauchte also eine Seite, die wirklich eine weglässt, und die deutsche Startseite ist sie.

Zwei Dinge am Index, die man leicht übersieht:

• Bei weniger als zwei Ansichten wird kein Index gezeichnet. Die einzelne Ansicht steht dann einfach offen. Ein Index mit einem Eintrag ist ein Bedienelement, das nichts bedienen kann.
• Er braucht kein JavaScript. Ohne es stehen alle Ansichten gleichzeitig offen und die Index-Einträge sind einfache Ankerlinks dorthin. Mit ihm wird eine Ansicht zur Zeit gezeigt, und /#profile-view-skills öffnet direkt diese. Nichts liegt hinter dem Skript, was nicht auch ohne es erreichbar wäre.

Dieselben Params, zweimal gezeichnet

view = "terminal" tauscht den gezeichneten Index gegen eine funktionierende Shell im macOS-Stil. Dieselben Schlüssel, derselbe Inhalt, nichts zu migrieren. Zeile löschen und man ist zurück. Diese Demo betreibt von jedem eines, sodass man sie nebeneinanderlegen kann:

• Die Startseite dieser Sprache — als Shell.
• Die englische Startseite — dasselbe Theme, dieselben fünf Schlüssel, als gezeichneter Index.

Und zwar wirklich benutzen. Die Shell ist kein Bild einer Shell: Befehle werden getippt, die Pfeiltasten laufen durch die Historie, Tab vervollständigt, Strg+C und Strg+L tun, was sie tun, und <befehl> --json gibt die Rohdaten statt der Tabelle aus. Jeder Befehl in help ist auch ein Knopf, damit ein Telefon ohne Tastatur an alles herankommt, und die drei Fensterknöpfe funktionieren: Schließen klappt das Fenster auf eine Zeile zusammen, Minimieren auf seine Titelleiste, Zoomen wächst es von 24 auf 40 Zeilen.

Die Ausgabe kommt zeichenweise statt zu erscheinen, und ein angeklickter Befehl wird in den Prompt getippt. Jeder Tastendruck beendet sofort, was noch aussteht, sodass niemand hinter dem Effekt zurückgehalten wird, und prefers-reduced-motion: reduce schaltet das Ganze ab.

Schaltet man JavaScript aus, zeigt das Fenster die bereits gelaufene Sitzung: jeden Befehl und seine Ausgabe, der Reihe nach. Nichts geht verloren und nichts gibt vor, interaktiv zu sein. Genau dieses Transkript ist auch das, was gedruckt wird, ohne das Fenster darum herum.

Was die Wahl kostet

Fast nichts, und in einer Richtung weniger als nichts: 35-terminal.css fällt vollständig aus dem Stylesheet, solange eine Seite das Terminal nicht anfordert. Es ist die einzige Funktion des Themes, die standardmäßig aus ist, und damit das einzige Stylesheet, das eine Seite sonst für Markup ausliefern könnte, das auf keiner ihrer Seiten je vorkommt.

Diese Demo ist der Fall, der das belegt. Weil die Ansicht pro Sprache gesetzt ist, bauen Englisch und Deutsch unterschiedliche Stylesheets — eines mit den Terminal-Regeln, eines ohne. Quelltext auf einer der beiden Startseiten ansehen und den Dateinamen im <link> vergleichen.