diff --git a/theme/assets/css/main.css b/theme/assets/css/main.css index e9909a5..038f331 100644 --- a/theme/assets/css/main.css +++ b/theme/assets/css/main.css @@ -4570,15 +4570,15 @@ p:last-child { margin-bottom: 0; } /* ── TV ─────────────────────────────────────────────────────── */ .ngd-tv { position: absolute; - left: 8px; - top: 18px; + left: 20px; + top: 90px; display: flex; flex-direction: column; align-items: center; } .ngd-tv__body { - width: 160px; - height: 120px; + width: 220px; + height: 162px; background: #111; border: 4px solid #111; border-radius: 6px 6px 4px 4px; @@ -4593,7 +4593,7 @@ p:last-child { margin-bottom: 0; } .ngd-tv__port { position: absolute; right: -5px; - top: 70px; + top: 74px; width: 8px; height: 14px; background: #1a1a1a; @@ -4733,11 +4733,11 @@ p:last-child { margin-bottom: 0; } .ngd-player { position: absolute; /* TV: left(20) + border(4) + width(220) + border(4) = 248px - TV port protrudes 5px right → connector starts at 248px */ + port right:-5 → connector aligns to TV right edge at 248px */ left: 248px; - /* TV body top(90) + border(4) + port.top(70) + port half-h(7) = 171px - stick h=28px → top = 171 − 14 = 157px */ - top: 157px; + /* TV top(90) + border(4) + port.top(74) + port half-h(7) = 175px + stick h=26px → top = 175 − 13 = 162px */ + top: 162px; display: flex; flex-direction: row; align-items: center; @@ -4813,10 +4813,10 @@ p:last-child { margin-bottom: 0; } /* ── Signal wrap (cloud + vertical line to player) ─────────── */ .ngd-signal-wrap { position: absolute; - /* centred on stick body: player left(248) + connector(14) + body_centre(40) = 302px - cloud width 74px → half = 37px → left = 302 − 37 = 265px */ - left: 265px; - top: 24px; + /* body centre X: player left(248) + connector(14) + body half(34) = 296 + cloud width 74px → half = 37 → left = 296 − 37 = 259px */ + left: 259px; + top: 22px; width: 74px; display: flex; flex-direction: column; @@ -4839,7 +4839,7 @@ p:last-child { margin-bottom: 0; } /* Vertical signal line */ .ngd-signal-line { width: 3px; - height: 80px; /* gap: signal-wrap top(24) + cloud h(~46) + line(80) ≈ player top(157) */ + height: 92px; /* wrap top(22) + cloud h(46) + line(92) = 160 ≈ player top(162) */ background: rgba(76,175,80,.35); border-radius: 2px; position: relative; @@ -4949,21 +4949,23 @@ p:last-child { margin-bottom: 0; } /* ── Responsive ─────────────────────────────────────────────── */ @media (max-width: 640px) { .ngd-stage { max-width: 320px; } - /* Scale fixed-px elements 84% (320/380) */ + /* Scale at 84% (320/380) */ .ngd-tv { left: 17px; top: 76px; } .ngd-tv__body { width: 185px; height: 136px; } - .ngd-tv__port { top: 59px; } + /* port at body midpoint: 136/2 − 7 = 61 */ + .ngd-tv__port { top: 61px; } .ngd-tv__feet { gap: 60px; } .ngd-tv__foot { width: 24px; } - /* player left: 17+4+185+4=210; center-y: 76+4+59+7=146; top=146-14=132 */ - .ngd-player { left: 210px; top: 132px; } + /* TV right: 17+4+185+4=210; port centre-y: 76+4+61+7=148; player top: 148−13=135 */ + .ngd-player { left: 210px; top: 135px; } .ngd-player__connector { width: 12px; height: 9px; } .ngd-player__body { width: 68px; height: 24px; } .ngd-player__body::before { top: 5px; left: 6px; width: 24px; height: 10px; } .ngd-player__led { width: 3px; height: 3px; right: 6px; } - /* body-centre-x: 210+12+34=256; cloud half-width(31)→56; wrap left=256-28=228 */ - .ngd-signal-wrap { left: 228px; top: 20px; width: 62px; } - .ngd-signal-line { height: 68px; } + /* body centre-x: 210+12+34=256; cloud 62px → half=31 → wrap left=225 */ + .ngd-signal-wrap { left: 225px; top: 18px; width: 62px; } + /* line: wrap.top(18)+cloud_h(~38)=56 to player.top(135) → 79px */ + .ngd-signal-line { height: 79px; } } /* ── Reduced-motion overrides ───────────────────────────────── */