MokoConsulting/MokoCassiopeia
1
1
Fork 0
Code Issues 2 Pull Requests Actions Packages Releases 1 Activity

Sidebar accordions at all breakpoints, open on desktop, closed on mobile

Browse Source 
Accordion structure now applies at all screen sizes. On desktop
(>= 992px) all panels start expanded (show class + aria-expanded
true). On mobile (< 992px) all panels start collapsed. CSS no
longer scoped to mobile media query.

Co-Authored-By: Claude Opus 4.6 (1M context) <noreply@anthropic.com>
This commit is contained in:
Jonathan Miller
2026-04-04 16:32:57 -05:00
parent 4e54231b16
commit a2a31f528b
2 changed files with 60 additions and 103 deletions
Download Patch File Download Diff File Expand all files Collapse all files

54
src/media/css/template.css
View File

@@ -15844,37 +15844,35 @@ body:not(.has-sidebar-right) .site-grid .container-component {
grid-area: side-r;
}
/* Sidebar accordion on mobile */
@media (max-width: 991.98px) {
.container-sidebar-left.accordion .card,
.container-sidebar-right.accordion .card {
border: none;
border-bottom: 1px solid var(--border-color, #dee2e6);
border-radius: 0;
}
/* Sidebar accordion */
.container-sidebar-left.accordion .card,
.container-sidebar-right.accordion .card {
border: none;
border-bottom: 1px solid var(--border-color, #dee2e6);
border-radius: 0;
}
.container-sidebar-left.accordion .card-header,
.container-sidebar-right.accordion .card-header {
padding: 0;
background: none;
border: none;
}
.container-sidebar-left.accordion .card-header,
.container-sidebar-right.accordion .card-header {
padding: 0;
background: none;
border: none;
}
.container-sidebar-left.accordion .accordion-button,
.container-sidebar-right.accordion .accordion-button {
padding: .75rem 1rem;
font-weight: 600;
font-size: .95rem;
background: var(--bs-body-bg, #fff);
color: var(--body-font-color, #444);
}
.container-sidebar-left.accordion .accordion-button,
.container-sidebar-right.accordion .accordion-button {
padding: .75rem 1rem;
font-weight: 600;
font-size: .95rem;
background: var(--bs-body-bg, #fff);
color: var(--body-font-color, #444);
}
.container-sidebar-left.accordion .accordion-button:not(.collapsed),
.container-sidebar-right.accordion .accordion-button:not(.collapsed) {
background: var(--bs-body-bg, #fff);
color: var(--link-color, #3565e5);
box-shadow: none;
}
.container-sidebar-left.accordion .accordion-button:not(.collapsed),
.container-sidebar-right.accordion .accordion-button:not(.collapsed) {
background: var(--bs-body-bg, #fff);
color: var(--link-color, #3565e5);
box-shadow: none;
}
.container-main-top {