openvibers/openvibe.live Commits

Home on touch screens: controls reach 44 px (#453)

OP OpenVibers committed 15 days ago · b6b915bd7c · 1 file, +14 −0

From the tap-target audit (effective hit areas at 390 px): the digest chips, the
star buttons, Show all stats, See what makes it different and the recently online
headers reach 44 px tall; View all, the after-show report, Hide the featured
stream and the text links under the hero get an invisible hit area instead, the
links in a row taller only so neighbours never take each other's taps. Nothing
changes with a mouse.

Changes

ddiff --git a/public/css/features/home.css b/public/css/features/home.css
iindex 578e1fb7..cab7b30b 100644
---- a/public/css/features/home.css
++++ b/public/css/features/home.css
@@@ -1252,3 +1252,17 @@ body.egg-rainbow { animation: eggRainbow 2.6s linear; }
  .streamer-group-stream.has-replay:hover .sg-play i, .streamer-group-stream.has-replay:focus-visible .sg-play i { transform: scale(1.08); background: var(--accent); border-color: transparent; }
  .sg-replay { color: var(--accent-light, var(--accent)); font-weight: 700; }
  @media (prefers-reduced-motion: reduce) { .sg-play i { transition: none; } }
++
++/* Touch screens (2026-10-29, tap-target audit): every control on the home reaches 44 px where it has room, and an
++   invisible hit area (::after) where growing it would move the layout. Nothing changes on a mouse. */
++@media (pointer: coarse) {
++    #page-home .digest-chip, #page-home .star-act, #page-home .hero-stat-more, #page-home .home-about-toggle { min-height: 44px; }
++    #page-home .star-act.star-expand { min-width: 44px; }
++    #page-home .streamer-group-identity, #page-home .hf-who { min-height: 44px; display: flex; align-items: center; }
++    #page-home .section-action, #page-home .digest-recap, #page-home .hf-hide, #page-home .hero-philosophy-btn, #page-home .hero-philosophy-link, #page-home .star-name a, #page-home .hero-golive-note a { position: relative; }
++    #page-home .section-action::after { content: ''; position: absolute; inset: -9px -4px; }
++    #page-home .digest-recap::after { content: ''; position: absolute; inset: -7px; }
++    #page-home .hf-hide::after { content: ''; position: absolute; inset: -11px; }
++    /* Text links in a row: taller only, so neighbours never take each other's taps. */
++    #page-home .hero-philosophy-btn::after, #page-home .hero-philosophy-link::after, #page-home .star-name a::after, #page-home .hero-golive-note a::after { content: ''; position: absolute; left: 0; right: 0; top: -12px; bottom: -12px; }
++}