The run motif's speed lines play on a phone (#137)

OP OpenVibers committed 3 days ago · 95d70975d5 · 2 files, +6 −2

Changes

ddiff --git a/public/css/surf.css b/public/css/surf.css
iindex 1586a0e..a677633 100644
---- a/public/css/surf.css
++++ b/public/css/surf.css
@@@ -47,8 +47,10 @@ html.ov-motion .sf-run-speed i { animation: sf-speed 1.1s linear infinite; anima
  .sf-run-hud { position: absolute; left: 50%; bottom: 10%; translate: -50% 0; display: grid; justify-items: center; gap: 2px; padding: 8px 16px; border-radius: 14px; background: rgba(0, 0, 0, .55); color: #fff; }
  .sf-run-hud b { font: 800 1.6rem/1 ui-monospace, SFMono-Regular, Menlo, monospace; letter-spacing: -.02em; font-variant-numeric: tabular-nums; }
  .sf-run-hud small { font-size: .72rem; font-weight: 700; opacity: .8; font-variant-numeric: tabular-nums; }
--/* On a phone the room's picture is a faint corner mark behind the title: the ramps alone, no timer to read through. */
--@media (max-width: 759px) { .sc-room-pic .sf-run-hud, .sc-room-pic .sf-run-speed { display: none; } }
++/* On a phone the room's picture is a faint corner mark behind the title: the ramps and their speed lines, no
++   timer to read through. The speed lines are transform/opacity only, so a narrow screen is no reason to stop them
++   (the owner, 2026-11-10). */
++@media (max-width: 759px) { .sc-room-pic .sf-run-hud { display: none; } }
  
  /* Three tiles under one Start. */
  .sf-tiles { list-style: none; margin: 4px 0 0; padding: 0; display: grid; gap: 12px; grid-template-columns: repeat(auto-fit, minmax(min(100%, 280px), 1fr)); }
ddiff --git a/test/home-short.test.js b/test/home-short.test.js
iindex 96f313b..ee98647 100644
---- a/test/home-short.test.js
++++ b/test/home-short.test.js
@@@ -35,6 +35,8 @@ const { boot, check, done } = require('./helpers/boot');
              assert.ok(!/pick-pane \{ display: none/.test(css), 'no scene is hidden');
              assert.match(css, /\.pick-chip \{[^}]*min-height: 44px/, 'a chip is a 44 px target');
              assert.match(css, /\.sf-tiles \{ display: flex; overflow-x: auto;/, 'the three doors are one sideways row');
++            assert.match(css, /@media \(max-width: 759px\) \{ \.sc-room-pic \.sf-run-hud \{ display: none; \} \}/, 'only the unreadable timer is left out on a phone');
++            assert.ok(!/\.sc-room-pic \.sf-run-speed \{ display: none/.test(css), 'the run motif\'s speed lines keep playing on a phone');
          });
  
          await check('the questions are a fold, open in the page and closed on a phone', async () => {

diff --git a/public/css/surf.css b/public/css/surf.css

index 1586a0e..a677633 100644

--- a/public/css/surf.css

+++ b/public/css/surf.css

@@ -47,8 +47,10 @@ html.ov-motion .sf-run-speed i { animation: sf-speed 1.1s linear infinite; anima

.sf-run-hud { position: absolute; left: 50%; bottom: 10%; translate: -50% 0; display: grid; justify-items: center; gap: 2px; padding: 8px 16px; border-radius: 14px; background: rgba(0, 0, 0, .55); color: #fff; }

.sf-run-hud b { font: 800 1.6rem/1 ui-monospace, SFMono-Regular, Menlo, monospace; letter-spacing: -.02em; font-variant-numeric: tabular-nums; }

.sf-run-hud small { font-size: .72rem; font-weight: 700; opacity: .8; font-variant-numeric: tabular-nums; }

-/* On a phone the room's picture is a faint corner mark behind the title: the ramps alone, no timer to read through. */

-@media (max-width: 759px) { .sc-room-pic .sf-run-hud, .sc-room-pic .sf-run-speed { display: none; } }

+/* On a phone the room's picture is a faint corner mark behind the title: the ramps and their speed lines, no

+ timer to read through. The speed lines are transform/opacity only, so a narrow screen is no reason to stop them

+ (the owner, 2026-11-10). */

+@media (max-width: 759px) { .sc-room-pic .sf-run-hud { display: none; } }

/* Three tiles under one Start. */

.sf-tiles { list-style: none; margin: 4px 0 0; padding: 0; display: grid; gap: 12px; grid-template-columns: repeat(auto-fit, minmax(min(100%, 280px), 1fr)); }

diff --git a/test/home-short.test.js b/test/home-short.test.js

index 96f313b..ee98647 100644

--- a/test/home-short.test.js

+++ b/test/home-short.test.js

@@ -35,6 +35,8 @@ const { boot, check, done } = require('./helpers/boot');

assert.ok(!/pick-pane \{ display: none/.test(css), 'no scene is hidden');

assert.match(css, /\.pick-chip \{[^}]*min-height: 44px/, 'a chip is a 44 px target');

assert.match(css, /\.sf-tiles \{ display: flex; overflow-x: auto;/, 'the three doors are one sideways row');

+ assert.match(css, /@media \(max-width: 759px\) \{ \.sc-room-pic \.sf-run-hud \{ display: none; \} \}/, 'only the unreadable timer is left out on a phone');

+ assert.ok(!/\.sc-room-pic \.sf-run-speed \{ display: none/.test(css), 'the run motif\'s speed lines keep playing on a phone');

});

await check('the questions are a fold, open in the page and closed on a phone', async () => {