hanzoai/templates-blueprints
2
0
Fork 0
mirror of https://github.com/hanzoai/templates-blueprints.git synced 2026-10-01 00:43:09 +00:00
Code Issues Packages Projects Releases Wiki Activity

oss: chips and the theme button are thumb targets — size them on touch only

Browse Source 
Measured on the live page at 390px: the category chips render 32px tall and the
theme button 34px, under the ~44px a thumb reliably hits. They are the primary
controls on that page — filtering the catalogue is the whole interaction.

Scoped to `@media (pointer: coarse)`, so the dense row a mouse wants is untouched.
Verified on the live page with the rule injected: touch 32/34 -> 44/44, mouse
unchanged at 32/34. One chip class, one adaptation, no second component.
This commit is contained in:
zeekay
2026-07-25 14:39:08 -07:00
parent 402659d209
commit 54af1247e0
1 changed files with 10 additions and 0 deletions
Download Patch File Download Diff File Expand all files Collapse all files
catalog.css
+10
View File
@@ -270,3 +270,13 @@ main { max-width: 84rem; margin: 0 auto; padding: 0 1.5rem 4rem; scroll-margin-t
}
@keyframes rise { from { opacity: 0; transform: translateY(16px); } to { opacity: 1; transform: none; } }
@media (prefers-reduced-motion: reduce) { *, *::before, *::after { transition: none !important; animation: none !important; } }
/* ---- touch ergonomics ------------------------------------------------------
A category chip and the theme button are things a THUMB aims at, and at 32/34px
they sit under the ~44px a thumb reliably hits — measured on the live page at
390px. Sized on a COARSE pointer only, so the dense row a mouse wants is left
exactly as it is: one chip class, one adaptation, no second component. */
@media (pointer: coarse) {
.tag { min-height: 44px; display: inline-flex; align-items: center; }
.icon-btn { width: 44px; height: 44px; }
}