OTSSigns/OTSSigns-Website
1
0
Fork 0
Code Issues Pull Requests 6 Actions Packages Projects Releases Wiki Activity

Adjust TV and player positioning and dimensions for improved layout

Browse Source
This commit is contained in:
Matt Batchelder
2026-02-21 12:52:54 -05:00
parent 0407269e79
commit b0167f2505
1 changed files with 23 additions and 21 deletions
Download Patch File Download Diff File Expand all files Collapse all files

44
theme/assets/css/main.css
View File

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