fs/tsv08kulmbach-website
1
0
Fork 0
Code Issues Pull Requests Actions Packages Projects Releases Wiki Activity

Nav-Dropdown: Panel-Padding wirkt jetzt + gleichmäßiger Innenabstand

Browse Source 
Das Submenu-Padding wurde stillschweigend vom globalen reset.css-Selektor
`ul[class] { padding: 0 }` (Spezifität 0,1,1) überschrieben, da
`.site-nav__submenu` nur (0,1,0) hat — die Hover-/Active-Pillen klebten
dadurch links/rechts am Panel-Rand. Selektoren auf
`.site-nav__list .site-nav__submenu` (0,2,0) gehoben (Haupt-Regel,
@supports-Glas, Mobile-Override), sodass das Padding ohne !important greift.
Innenabstand auf gleichmäßige 0.55rem rundum gesetzt — Pillen stehen
oben/unten/seitlich gleich dezent frei.

Co-Authored-By: Claude Opus 4.8 (1M context) <noreply@anthropic.com>
This commit is contained in:
Felix Schneider
2026-06-20 21:08:59 +02:00
parent adf142b18e
commit 23778324c7
1 changed files with 9 additions and 6 deletions
Download Patch File Download Diff File Expand all files Collapse all files

15
public/assets/css/layout.css
View File

@@ -152,7 +152,9 @@
transform: rotate(180deg);
}
.site-nav__submenu {
/* Höhere Spezifität (0,2,0) nötig, damit das Panel-Padding den globalen
reset.css-Selektor `ul[class] { padding: 0 }` (0,1,1) schlägt. */
.site-nav__list .site-nav__submenu {
position: absolute;
top: calc(100% + 0.4rem);
left: 50%;
@@ -163,8 +165,8 @@
gap: 0.2rem;
min-width: 15rem;
margin: 0;
/* Mehr Luft links/rechts, damit die abgerundeten Hover-Pillen klar rauskommen. */
padding: 0.55rem 0.85rem;
/* Gleichmäßiges Padding rundum — Pillen stehen oben/unten/seitlich gleich dezent frei. */
padding: 0.55rem;
list-style: none;
/* Glasiges, leicht transluzentes Panel mit Tiefe über der Hintergrund-Textur. */
background: rgb(20 20 20 / 0.96);
@@ -179,7 +181,7 @@
}
@supports (backdrop-filter: blur(1px)) {
.site-nav__submenu {
.site-nav__list .site-nav__submenu {
background: rgb(20 20 20 / 0.82);
backdrop-filter: blur(14px) saturate(1.4);
}
@@ -342,8 +344,9 @@
justify-content: center;
}
/* Im Overlay inline einklappen — display statt visibility, sonst bliebe Platz reserviert. */
.site-nav__submenu {
/* Im Overlay inline einklappen — display statt visibility, sonst bliebe Platz reserviert.
Spezifität (0,2,0) gleich der Desktop-Regel; gewinnt hier per Quell-Reihenfolge. */
.site-nav__list .site-nav__submenu {
position: static;
transform: none;
display: none;