v0.32.0

Das Hauptmenü im neuen Stil.

• Menüknöpfe als abgeschrägte Leisten. Aus den sechs schlichten Rechtecken in #start sind sechseckige Leisten geworden: links und rechts läuft die Kante auf eine Spitze zu, wie im Entwurf unter assets/text/entwuerfe/menue_entwurf.png. Die Pause-Knöpfe tragen dieselbe Klasse .navbtn und bleiben absichtlich unverändert — alle neuen Regeln hängen an #start
• Der Rahmen liegt unter dem Knopf. clip-path und border vertragen sich nicht, deshalb trägt eine eigene Ebene (.edge) die Schräge: sie ist in Rahmenfarbe gefüllt, und .edge::before stanzt die Füllung anderthalb Bildpunkte kleiner wieder heraus. Übrig bleibt die Kante. Dieselbe Ebene noch einmal enger (.inner) ergibt die feine zweite Linie im Inneren, seitlich mit rund einem Sechstel mehr Abstand, damit die Schrägen parallel laufen
• Der Fokusring bleibt. clip-path schneidet auch die outline weg — der <button> selbst bleibt darum unbeschnitten und trägt nur noch das Raster. Er bekommt bei :focus-visible den magentafarbenen Ring, den auch .btn trägt, und die Tastatur-Fokussierung hellt die Leiste genauso auf wie der Mauszeiger
• Symbol im eigenen Kästchen: Zielkreuz, Rakete, Konstellation, Balken, Zahnrad und Buch. Die Pfade liegen als NAV_ICONS in js/data.js und gehen durch dasselbe svgIcon wie alle anderen Symbole im Spiel
• Die Symbol-Sechsecke sind gleichseitig: alle sechs Kanten sind gleich lang. Das geht auf, wenn die Breite das 2/√3-Fache der Höhe misst und die Schräge ein Viertel der Breite — bei 50 px Höhe also 57,7 px breit und 14,4 px Schräge, jede Kante 28,9 px. Beides hängt an einer einzigen Stellschraube --ico, am Handy steht sie auf 40 px
• Chevron rechts als Hinweis, dass es weitergeht; er rückt beim Überfahren und beim Fokus einen Tick nach rechts
• Der aktive Eintrag (.primary) trägt cyanfarbenen Rahmen, Schein nach außen und cyanfarbene Schrift. Der Schein kommt als drop-shadow auf die beschnittene Ebene, weil ein box-shadow am clip-path abgeschnitten würde
• Beim Überfahren leuchten nur die Außenlinie und das Symbol samt seinem Sechseck. Die feine Innenlinie bleibt ruhig — sie hängt an einer eigenen Stellschraube --frame-inner, die der Mauszeiger nicht anfasst. Dass der Schein die Innenlinie nicht mitnimmt, ergibt sich von selbst: drop-shadow zeichnet die Silhouette der fertig zusammengesetzten Ebene nach, und die Innenlinie liegt im Inneren der Figur. Für die Tastatur gilt dasselbe, :hover und :focus-visible teilen sich die Regeln
• Titel von 18 auf 20 px, Untertitel dicht darunter statt mit drei Bildpunkten Abstand. Titel und Untertitel stehen dafür in einer eigenen Spalte (.navtext) — sonst zieht das 50 px hohe Symbolkästchen die beiden Zeilen auseinander
• Unter 700 px werden die Leisten schmaler: 14 statt 20 px Schräge, 40 statt 50 px Symbolkästchen, 54 statt 68 px Höhe. Sonst kippt die Spitze, sobald ein langer Untertitel umbricht
• Kern-Hintergrund und Metall-Logo bleiben unverändert

← Zurück