diff --git a/src/layouts/Layout.astro b/src/layouts/Layout.astro index 34b6c67..1b90654 100644 --- a/src/layouts/Layout.astro +++ b/src/layouts/Layout.astro @@ -102,8 +102,8 @@ const p = (href: string) => `${localePrefix(lang)}${href}`; diff --git a/src/styles/global.css b/src/styles/global.css index f404169..dc07bba 100644 --- a/src/styles/global.css +++ b/src/styles/global.css @@ -674,7 +674,9 @@ a:focus-visible, button:focus-visible { .account-menu.open .account-dropdown { display: flex; } .account-dropdown a, .account-dropdown button { - display: block; + display: flex; + align-items: center; + gap: 0.6em; width: 100%; text-align: left; background: none; @@ -686,6 +688,10 @@ a:focus-visible, button:focus-visible { cursor: pointer; transition: background 0.15s var(--ease); } +/* Feste Icon-Spalte, statt das Emoji einfach vor den Text zu schreiben — sonst starten "Mein + Konto" und "Abmelden" je nach Emoji-Breite an leicht unterschiedlichen Stellen und wirken + unausgerichtet. Mit fixer Breite + zentriertem Icon stehen alle Labels exakt untereinander. */ +.account-dropdown-icon { flex-shrink: 0; width: 1.2em; text-align: center; } .account-dropdown a:hover, .account-dropdown button:hover { background: color-mix(in srgb, var(--c-accent) 12%, transparent); } @media (max-width: 860px) {