openvibers/openvibe.live Commits

Home on phones: the pulse and the tour's feature chips scroll sideways (#450)

OP OpenVibers committed 15 days ago · 2961f0b874 · 2 files, +11 −0

The pulse (goals, the latest activity, the week's leaders) was five stacked cards
(781 px) and the tour's feature chips a 320 px block of wrapped labels; on a
phone the pulse is one sideways row and the chips two.

Changes

ddiff --git a/public/css/features/home.css b/public/css/features/home.css
iindex 1bdb01dc..42a3c3c8 100644
---- a/public/css/features/home.css
++++ b/public/css/features/home.css
@@@ -142,6 +142,10 @@ body.egg-rainbow { animation: eggRainbow 2.6s linear; }
      }
      .network-hub-grid::-webkit-scrollbar { display: none; }
      .network-hub-grid > .network-card { scroll-snap-align: start; min-width: 0; }
++    /* The pulse (goals, the latest activity, the week's leaders) is one row that scrolls sideways, not five stacked cards. */
++    .pulse-grid { display: flex; flex-wrap: nowrap; overflow-x: auto; scroll-snap-type: x mandatory; scroll-padding-inline: 16px; scrollbar-width: none; gap: 10px; margin-left: -16px; margin-right: -16px; padding: 0 16px 4px; }
++    .pulse-grid::-webkit-scrollbar { display: none; }
++    .pulse-grid > .pulse-card { flex: 0 0 78%; min-width: 0; scroll-snap-align: start; }
  }
  .stream-card-nsfw-blur img,
  .stream-card-nsfw-blur .thumb-placeholder {
ddiff --git a/public/css/home-tour.css b/public/css/home-tour.css
iindex 2501248f..07a8ac71 100644
---- a/public/css/home-tour.css
++++ b/public/css/home-tour.css
@@@ -132,6 +132,13 @@
      .tour-node-text small { display: none; }
      .tour-core { max-width: 340px; }
  }
++/* Phones (2026-10-29): the feature chips are two rows that scroll sideways (all of them still there), not a 320 px
++   block of wrapped labels between the diagram and the sign-up panel. */
++@media (max-width: 599px) {
++    .tour-features { display: grid; grid-template-rows: repeat(2, auto); grid-auto-flow: column; grid-auto-columns: max-content; justify-content: start;
++        overflow-x: auto; scrollbar-width: none; margin-left: -14px; margin-right: -14px; padding: 0 14px 2px; scroll-padding-inline: 14px; }
++    .tour-features::-webkit-scrollbar { display: none; }
++}
  @media (prefers-reduced-motion: reduce) { .tour-wire, .tour-node-dot, .tour-core-ring, .tour-feat, .tour-core::before, .tour-core b, .tour-core-logo { animation: none; } .tour-feat { opacity: 1; transform: none; } }
  .rs-lite .tour::before, .rs-lite .tour-core-ring { display: none; }
  /* Phones keep the glow but not the repainting gradients. */