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

Sync: enhance platform text styles and adjust layout for improved responsiveness

Browse Source
This commit is contained in:
Matt Batchelder
2026-02-21 17:20:19 -05:00
parent dc89009cfa
commit 25da755378
1 changed files with 30 additions and 19 deletions
Download Patch File Download Diff File Expand all files Collapse all files

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

@@ -115,6 +115,8 @@ body,
.pricing-card, .pricing-card,
.contact-form-wrap, .contact-form-wrap,
.platform-visual, .platform-visual,
.platform-text h3,
.platform-text p,
.form-group input, .form-group input,
.form-group textarea, .form-group textarea,
.form-group select { transition: background var(--transition), color var(--transition), border-color var(--transition), box-shadow var(--transition); } .form-group select { transition: background var(--transition), color var(--transition), border-color var(--transition), box-shadow var(--transition); }
@@ -1970,7 +1972,7 @@ p:last-child { margin-bottom: 0; }
.platform-row.reverse .platform-text { order: 2; } .platform-row.reverse .platform-text { order: 2; }
.platform-row.reverse .platform-visual { order: 1; } .platform-row.reverse .platform-visual { order: 1; }
.platform-text h3 { font-size: 1.5rem; margin-bottom: 1rem; } .platform-text h3 { font-size: 1.5rem; margin-bottom: 1rem; color: var(--color-heading); }
.platform-text p { color: var(--color-text-muted); } .platform-text p { color: var(--color-text-muted); }
.platform-visual { .platform-visual {
@@ -2425,6 +2427,10 @@ p:last-child { margin-bottom: 0; }
overflow: visible; overflow: visible;
position: relative; position: relative;
font-size: inherit; font-size: inherit;
display: flex;
align-items: center;
justify-content: center;
align-self: center;
} }
.ts-stage { .ts-stage {
position: relative; position: relative;
@@ -2433,6 +2439,9 @@ p:last-child { margin-bottom: 0; }
display: flex; display: flex;
align-items: center; align-items: center;
justify-content: center; justify-content: center;
/* Offset center leftward to account for the stick protruding on the right,
so the TV+stick combo appears visually centered in the column */
padding-right: 90px;
} }
/* ── TV ── */ /* ── TV ── */
.ts-tv { .ts-tv {
@@ -2442,8 +2451,8 @@ p:last-child { margin-bottom: 0; }
position: relative; position: relative;
} }
.ts-tv__body { .ts-tv__body {
width: 320px; width: 400px;
height: 188px; height: 235px;
background: #111; background: #111;
border: 4px solid #111; border: 4px solid #111;
border-radius: 6px 6px 4px 4px; border-radius: 6px 6px 4px 4px;
@@ -2789,7 +2798,7 @@ p:last-child { margin-bottom: 0; }
.ts-tv__feet { .ts-tv__feet {
display: flex; display: flex;
justify-content: space-between; justify-content: space-between;
width: 180px; width: 224px;
} }
.ts-tv__foot { .ts-tv__foot {
width: 12px; width: 12px;
@@ -2810,8 +2819,8 @@ p:last-child { margin-bottom: 0; }
z-index: 2; z-index: 2;
} }
.ts-stick__body { .ts-stick__body {
width: 68px; width: 84px;
height: 26px; height: 32px;
background: linear-gradient(180deg, #f5f5f5, #e0e0e0); background: linear-gradient(180deg, #f5f5f5, #e0e0e0);
border: 1px solid #ccc; border: 1px solid #ccc;
border-radius: 5px; border-radius: 5px;
@@ -2849,8 +2858,8 @@ p:last-child { margin-bottom: 0; }
} }
/* HDMI connector */ /* HDMI connector */
.ts-stick__connector { .ts-stick__connector {
width: 14px; width: 18px;
height: 10px; height: 14px;
background: linear-gradient(180deg, #888, #666); background: linear-gradient(180deg, #888, #666);
border-radius: 0 2px 2px 0; border-radius: 0 2px 2px 0;
margin-left: -1px; margin-left: -1px;
@@ -2862,8 +2871,8 @@ p:last-child { margin-bottom: 0; }
position: absolute; position: absolute;
left: 2px; left: 2px;
top: 2px; top: 2px;
width: 6px; width: 8px;
height: 6px; height: 8px;
background: #555; background: #555;
border-radius: 1px; border-radius: 1px;
} }
@@ -2880,17 +2889,19 @@ p:last-child { margin-bottom: 0; }
} }
/* Responsive scale-down */ /* Responsive scale-down */
@media (max-width: 900px) { @media (max-width: 900px) {
.ts-tv__body { width: 260px; height: 152px; } .ts-tv__body { width: 320px; height: 188px; }
.ts-tv__feet { width: 140px; } .ts-tv__feet { width: 178px; }
.ts-stick__body { width: 56px; height: 22px; } .ts-stick__body { width: 68px; height: 26px; }
.ts-stage { padding-right: 72px; }
} }
@media (max-width: 640px) { @media (max-width: 640px) {
.ts-tv__body { width: 200px; height: 118px; } .ts-tv__body { width: 240px; height: 142px; }
.ts-tv__feet { width: 110px; } .ts-tv__feet { width: 134px; }
.ts-stick__body { width: 46px; height: 18px; } .ts-stick__body { width: 52px; height: 20px; }
.ts-stick__connector { width: 10px; height: 8px; } .ts-stick__connector { width: 12px; height: 10px; }
.ts-stick__body::before { top: 4px; left: 6px; width: 20px; height: 8px; } .ts-stick__body::before { top: 4px; left: 6px; width: 22px; height: 10px; }
.ts-stick__led { width: 3px; height: 3px; right: 5px; } .ts-stick__led { width: 3px; height: 3px; right: 5px; }
.ts-stage { padding-right: 56px; }
} }
@media (prefers-reduced-motion: reduce) { @media (prefers-reduced-motion: reduce) {
.ts-stage .ts-stick { .ts-stage .ts-stick {
@@ -3659,7 +3670,7 @@ p:last-child { margin-bottom: 0; }
flex-direction: row; flex-direction: row;
align-items: center; align-items: center;
justify-content: center; justify-content: center;
gap: 12px; gap: 6px;
padding-bottom: 4px; padding-bottom: 4px;
} }