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

feat: Refactor stick device positioning for improved responsiveness and animation

Browse Source
This commit is contained in:
Matt Batchelder
2026-04-17 22:18:39 -04:00
parent c7e433d4c1
commit e0240d5e7a
2 changed files with 17 additions and 12 deletions
Download Patch File Download Diff File Expand all files Collapse all files

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

@@ -3074,6 +3074,9 @@ p:last-child { margin-bottom: 0; }
align-self: center;
}
.ts-stage {
--ts-stick-right: -96px;
--ts-stick-start-x: 80px;
--ts-stick-plug-x: 0px;
position: relative;
width: 100%;
aspect-ratio: 4/3;
@@ -3451,9 +3454,9 @@ p:last-child { margin-bottom: 0; }
/* ── Stick device ── */
.ts-stick {
position: absolute;
right: -44px;
right: var(--ts-stick-right);
top: 50%;
transform: translateY(-50%) translateX(80px) scaleX(-1);
transform: translateY(-50%) translateX(var(--ts-stick-start-x)) scaleX(-1);
display: flex;
align-items: center;
opacity: 0;
@@ -3522,20 +3525,22 @@ p:last-child { margin-bottom: 0; }
animation: ts-slide-in 1.4s cubic-bezier(0.22, 0.61, 0.36, 1) forwards;
}
@keyframes ts-slide-in {
0% { opacity: 0; transform: translateY(-50%) translateX(80px) scaleX(-1); }
20% { opacity: 1; transform: translateY(-50%) translateX(60px) scaleX(-1); }
70% { transform: translateY(-50%) translateX(8px) scaleX(-1); }
85% { transform: translateY(-50%) translateX(12px) scaleX(-1); }
100% { opacity: 1; transform: translateY(-50%) translateX(6px) scaleX(-1); }
0% { opacity: 0; transform: translateY(-50%) translateX(var(--ts-stick-start-x)) scaleX(-1); }
20% { opacity: 1; transform: translateY(-50%) translateX(calc(var(--ts-stick-start-x) - 20px)) scaleX(-1); }
70% { transform: translateY(-50%) translateX(calc(var(--ts-stick-plug-x) + 8px)) scaleX(-1); }
85% { transform: translateY(-50%) translateX(calc(var(--ts-stick-plug-x) + 12px)) scaleX(-1); }
100% { opacity: 1; transform: translateY(-50%) translateX(var(--ts-stick-plug-x)) scaleX(-1); }
}
/* Responsive scale-down */
@media (max-width: 900px) {
.ts-stage { --ts-stick-right: -84px; }
.ts-tv__body { width: 320px; height: 188px; }
.ts-tv__feet { width: 178px; }
.ts-stick__body { width: 68px; height: 26px; }
.ts-stage { padding-right: 72px; }
}
@media (max-width: 640px) {
.ts-stage { --ts-stick-right: -66px; }
.ts-tv__body { width: 240px; height: 142px; }
.ts-tv__feet { width: 134px; }
.ts-stick__body { width: 52px; height: 20px; }
@@ -3547,7 +3552,7 @@ p:last-child { margin-bottom: 0; }
@media (prefers-reduced-motion: reduce) {
.ts-stage .ts-stick {
opacity: 1;
transform: translateY(-50%) translateX(6px) scaleX(-1);
transform: translateY(-50%) translateX(var(--ts-stick-plug-x)) scaleX(-1);
}
.ts-stage.is-animating .ts-stick { animation: none; }
.ts-stage.is-plugged .ts-tv__screen { animation: none; }