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

Adjust TV and player dimensions for improved layout and responsiveness

Browse Source
This commit is contained in:
Matt Batchelder
2026-02-21 12:45:48 -05:00
parent ecba27595c
commit 0407269e79
1 changed files with 30 additions and 27 deletions
Download Patch File Download Diff File Expand all files Collapse all files

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

@@ -4562,8 +4562,8 @@ p:last-child { margin-bottom: 0; }
.ngd-stage { .ngd-stage {
position: relative; position: relative;
width: 100%; width: 100%;
max-width: 400px; max-width: 380px;
aspect-ratio: 4/3; aspect-ratio: 1/1;
margin: 0 auto; margin: 0 auto;
} }
@@ -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: 50px; top: 70px;
width: 8px; width: 8px;
height: 14px; height: 14px;
background: #1a1a1a; background: #1a1a1a;
@@ -4626,11 +4626,11 @@ p:last-child { margin-bottom: 0; }
/* TV feet */ /* TV feet */
.ngd-tv__feet { .ngd-tv__feet {
display: flex; display: flex;
gap: 50px; gap: 72px;
margin-top: 3px; margin-top: 3px;
} }
.ngd-tv__foot { .ngd-tv__foot {
width: 22px; width: 28px;
height: 6px; height: 6px;
background: #181818; background: #181818;
border-radius: 0 0 3px 3px; border-radius: 0 0 3px 3px;
@@ -4732,12 +4732,12 @@ p:last-child { margin-bottom: 0; }
/* ── Player device (stick plugged into TV right-side HDMI port) ── */ /* ── Player device (stick plugged into TV right-side HDMI port) ── */
.ngd-player { .ngd-player {
position: absolute; position: absolute;
/* TV body: left(8) + border(4) + width(160) + border(4) = 176px /* TV: left(20) + border(4) + width(220) + border(4) = 248px
TV port protrudes 5px right → connector starts at 181px */ TV port protrudes 5px right → connector starts at 248px */
left: 181px; left: 248px;
/* TV body top(18) + border(4) + port.top(50) + port half-h(7) = 79px /* TV body top(90) + border(4) + port.top(70) + port half-h(7) = 171px
stick h=26px → top = 79 − 13 = 66px */ stick h=28px → top = 171 − 14 = 157px */
top: 66px; top: 157px;
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(181) + connector(14) + body_centre(34) = 229px /* centred on stick body: player left(248) + connector(14) + body_centre(40) = 302px
cloud width 74px → half = 37px → left = 229 − 37 = 192px */ cloud width 74px → half = 37px → left = 302 − 37 = 265px */
left: 192px; left: 265px;
top: 0; top: 24px;
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: 18px; /* gap from cloud bottom (~48px) to stick top (~66px) */ height: 80px; /* gap: signal-wrap top(24) + cloud h(~46) + line(80) ≈ player top(157) */
background: rgba(76,175,80,.35); background: rgba(76,175,80,.35);
border-radius: 2px; border-radius: 2px;
position: relative; position: relative;
@@ -4949,18 +4949,21 @@ 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 80% (320/400) */ /* Scale fixed-px elements 84% (320/380) */
.ngd-tv__body { width: 128px; height: 96px; } .ngd-tv { left: 17px; top: 76px; }
.ngd-tv__port { top: 40px; } .ngd-tv__body { width: 185px; height: 136px; }
.ngd-tv__foot { width: 18px; } .ngd-tv__port { top: 59px; }
/* player: left(145) + connector(11) + body_centre(27) = 183px; cloud half(30) → wrap left 153 */ .ngd-tv__feet { gap: 60px; }
.ngd-player { left: 145px; top: 53px; } .ngd-tv__foot { width: 24px; }
.ngd-player__connector { width: 11px; height: 8px; } /* player left: 17+4+185+4=210; center-y: 76+4+59+7=146; top=146-14=132 */
.ngd-player__body { width: 54px; height: 21px; } .ngd-player { left: 210px; top: 132px; }
.ngd-player__body::before { top: 5px; left: 6px; width: 22px; height: 9px; } .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; } .ngd-player__led { width: 3px; height: 3px; right: 6px; }
.ngd-signal-wrap { left: 153px; width: 60px; } /* body-centre-x: 210+12+34=256; cloud half-width(31)→56; wrap left=256-28=228 */
.ngd-signal-line { height: 14px; } .ngd-signal-wrap { left: 228px; top: 20px; width: 62px; }
.ngd-signal-line { height: 68px; }
} }
/* ── Reduced-motion overrides ───────────────────────────────── */ /* ── Reduced-motion overrides ───────────────────────────────── */