Skip to content

Category grid#149

Draft
andy5995 wants to merge 2 commits into
Portable-Linux-Apps:mainfrom
andy5995:category-grid
Draft

Category grid#149
andy5995 wants to merge 2 commits into
Portable-Linux-Apps:mainfrom
andy5995:category-grid

Conversation

@andy5995
Copy link
Copy Markdown
Contributor

andy5995 and others added 2 commits May 22, 2026 23:28
Pairs with ivan-hc/AM:tools/am2pla-site change that switches
_categories_buttons() from emitting a wrapping line of bold-italic
markdown links to a <div class="cat-grid"> of <a class="cat-pill">
elements (with the AppImages link carrying a "cat-pill--all"
modifier).

Layout uses grid-template-columns: repeat(auto-fit, minmax(8.5em, 1fr))
so the grid reflows to 2-3 columns on mobile and 5-6 on desktop
without media-query gymnastics. .cat-pill--all (AppImages only) is
bold with an accent background so it stands out as the meta-category.

Light- and dark-theme overrides live inside the existing
prefers-color-scheme media blocks, mirroring how table/body colors
are already split.

Co-Authored-By: Claude Opus 4.7 (1M context) <noreply@anthropic.com>
Pairs with ivan-hc/AM:tools/am2pla-site change that wraps the
existing <div class="cat-grid"> in <div class="cat-menu"> with a
hidden checkbox + <label class="cat-menu-button">☰ Categories</label>
toggle.

Layout: button is display:none on desktop (≤600px is the breakpoint).
On narrow viewports the button becomes the only visible control;
.cat-grid collapses to display:none and re-appears as display:grid
when the checkbox is :checked, via the adjacent-sibling combinator.
No JavaScript needed.

Theme colors mirror the existing .cat-pill rules; button uses the
same neutral background as a normal pill.

Co-Authored-By: Claude Opus 4.7 (1M context) <noreply@anthropic.com>
Sign up for free to join this conversation on GitHub. Already have an account? Sign in to comment

Labels

None yet

Projects

None yet

Development

Successfully merging this pull request may close these issues.

1 participant