Skip to content

Separate desktop hover dropdowns from mobile tap menus #21

New issue

Have a question about this project? Sign up for a free GitHub account to open an issue and contact its maintainers and the community.

Sign up for GitHub

By clicking “Sign up for GitHub”, you agree to our terms of service and privacy statement. We’ll occasionally send you account related emails.

Already on GitHub? Sign in to your account

Merged
Kimeiga merged 5 commits into from
Oct 2, 2026
Merged

Separate desktop hover dropdowns from mobile tap menus #21

Show file tree
Hide file tree
Changes from all commits
Commits
Show all changes
5 commits
Select commit Hold shift + click to select a range
1366e50
Separate compact desktop hover menus from mobile tap menus
Kimeiga Oct 2, 2026
0837333
Guard desktop hover density and mobile tap targets
Kimeiga Oct 2, 2026
5ffe8f9
Temporarily regenerate CSS for dropdown density fix
Kimeiga Oct 2, 2026
06a8ad0
Regenerate distribution CSS
github-actions[bot] Oct 2, 2026
a3d4993
Remove temporary dist regeneration workflow
Kimeiga Oct 2, 2026
File filter

Filter by extension

Filter by extension
Conversations
Failed to load comments.
Loading
Jump to
Jump to file
Failed to load files.
Loading
Diff view
Diff view
52 changes: 36 additions & 16 deletions dist/bahunya.css
View file
Open in desktop
Original file line number Diff line number Diff line change
Expand Up @@ -892,41 +892,56 @@ body > nav:first-of-type details > ul,
body > header:first-child > nav details > ul {
display: none;
position: absolute;
top: calc(100% + var(--space-2));
top: 100%;
left: 0;
z-index: 1000;
min-width: min(18rem, calc(100vw - 2rem));
width: max-content;
min-width: 12rem;
max-width: min(18rem, calc(100vw - 1rem));
flex-direction: column;
align-items: stretch;
gap: 0;
max-height: min(70vh, 32rem);
max-height: min(60vh, 24rem);
overflow-y: auto;
padding: var(--space-2);
padding: 0.25rem 0.375rem;
background: var(--nav-dropdown);
border: 1px solid var(--border);
border-radius: var(--radius);
box-shadow: var(--shadow);
border-radius: var(--radius-sm);
box-shadow: 0 8px 24px rgba(0, 0, 0, 0.28);
backdrop-filter: saturate(180%) blur(20px);
-webkit-backdrop-filter: saturate(180%) blur(20px);
}

body > nav:first-of-type ul li ul > li,
body > header:first-child > nav ul li ul > li,
body > nav:first-of-type details > ul > li,
body > header:first-child > nav details > ul > li {
width: 100%;
}

body > nav:first-of-type ul li ul a,
body > header:first-child > nav ul li ul a,
body > nav:first-of-type details > ul a,
body > header:first-child > nav details > ul a {
width: 100%;
height: auto;
min-height: var(--control-height);
min-height: 2.125rem;
justify-content: flex-start;
}

body > nav:first-of-type ul li:hover > ul,
body > nav:first-of-type ul li:focus-within > ul,
body > header:first-child > nav ul li:hover > ul,
body > header:first-child > nav ul li:focus-within > ul,
body > nav:first-of-type details[open] > ul,
body > header:first-child > nav details[open] > ul {
display: flex;
padding-inline: 0.75rem;
border-radius: 0.375rem;
}

@media (hover: hover) and (pointer: fine) {
body > nav:first-of-type ul li:hover > ul,
body > nav:first-of-type ul li:focus-within > ul,
body > header:first-child > nav ul li:hover > ul,
body > header:first-child > nav ul li:focus-within > ul,
body > nav:first-of-type details:hover > ul,
body > nav:first-of-type details:focus-within > ul,
body > header:first-child > nav details:hover > ul,
body > header:first-child > nav details:focus-within > ul {
display: flex;
}
}

body > nav:first-of-type > ul > li:last-child ul,
Expand Down Expand Up @@ -966,6 +981,11 @@ body > header:first-child > nav > ul > li:last-child ul {
font-size: 0.8125rem;
}

body > nav:first-of-type details[open] > ul,
body > header:first-child > nav details[open] > ul {
display: flex;
}

body > nav:first-of-type details > ul,
body > header:first-child > nav details > ul {
position: fixed;
Expand Down
Loading
Loading