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 ─────────────────────────────────────────────────────── */
.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 ───────────────────────────────── */