kantarci/KantSites
1
0 Fork 0
Code Issues Pull Requests Actions Packages Projects Releases 81 Wiki Activity

Let menu entries appear as buttons with icon, colours and phone placement

Browse Source 
The menu editor gets "Als Button darstellen" per entry: shape, appearance and
size from the button design, fill and ink with hover and palette, icon colour,
icon from the dialog, motion, icon-only and where the button sits on the phone
(in the opened menu, beside the burger, or there as an icon only). Colours go
into the page stylesheet under a stable per-button id because the CSP forbids
inline styles. ADR 110.

Co-Authored-By: Claude Opus 5.5 <noreply@anthropic.com>
This commit is contained in:
kantarciandClaude Opus 5.5 committed 2026-10-07 22:36:12 +02:00
1 parent 48ae2443cd
commit 13f6759df8
22 files changed
+623 -14
Download Patch File Download Diff File Expand all files Collapse all files

No files matched your search

public/assets/site.css
+27
View File
@@ -494,6 +494,33 @@ body.consent-open{padding-bottom:320px}
box-shadow:0 15px 25px color-mix(in srgb,var(--ink) 12%,transparent)}
.site-header .menu-burger-body .menu-list{gap:0}
.site-header .menu-burger-body .menu-list a{padding:12px 10px;font-size:16px}
/* Menüeinträge als Button (ADR 110). Die Menüregeln für Links (Polster, Unterstreichung, Schrift
im aufgeklappten Kopf) gelten nicht für sie - sie sehen aus wie jeder andere Button. */
.menu-list a.cms-button,.menu-actions a.cms-button{display:inline-flex;padding:var(--b-py,var(--kb-py,15px)) var(--b-px,var(--kb-px,21px));font-size:var(--kb-font-size,14px);text-decoration:none;margin:0}
.menu-list a.cms-button:hover,.menu-list a.cms-button[aria-current=page]{text-decoration:none}
.menu-list a.cms-button.b-desktop-appearance-link{text-decoration:underline}
.site-header .menu-burger-body .menu-list a.cms-button{padding:var(--b-py,var(--kb-py,15px)) var(--b-px,var(--kb-px,21px));font-size:var(--kb-font-size,14px)}
/* Im aufgeklappten Menü volle Breite und etwas Luft zu den Links darüber. */
.menu-burger-body .menu-item-button{align-self:stretch;margin-top:8px}
.menu-burger-body .menu-item-button>.cms-button:not(.icon-only){width:100%}
/* Neben dem Menü-Knopf stehen bleiben: nur solange das Menü zusammengeklappt ist. */
.menu-actions{display:none;list-style:none;margin:0;padding:0;gap:8px;align-items:center;flex:0 1 auto;min-width:0}
/* Neben dem Menü-Knopf ist wenig Platz: kompakter, in einer Zeile mit dem Knopf. */
.menu-actions a.cms-button{--b-py:8px;--b-px:14px;white-space:nowrap}
.menu-actions a.cms-button.icon-only{--b-px:8px}
nav.menu-burger>.menu-actions{display:flex}
nav.menu-burger:has(>.menu-actions){display:flex;flex-wrap:nowrap;align-items:center;justify-content:flex-end;gap:8px}
nav.menu-burger .menu-burger-body .menu-keep-visible{display:none}
@media (max-width:1024px),(hover:none) and (pointer:coarse){
.menu-collapse-tablet>.menu-actions{display:flex}
.menu-collapse-tablet:has(>.menu-actions){display:flex;flex-wrap:nowrap;align-items:center;justify-content:flex-end;gap:8px}
.menu-collapse-tablet .menu-burger-body .menu-keep-visible{display:none}
}
@media (max-width:767px){
.menu-collapse-mobile>.menu-actions{display:flex}
.menu-collapse-mobile:has(>.menu-actions){display:flex;flex-wrap:nowrap;align-items:center;justify-content:flex-end;gap:8px}
.menu-collapse-mobile .menu-burger-body .menu-keep-visible{display:none}
}
/* Visibility never overwrites the block's grid/flex/display settings. */
.visibility-hidden{display:none!important}
.slider-controls button[hidden]{display:none}