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

Update platform row to include labels for interactive and wall display devices; adjust device types for clarity

Browse Source
This commit is contained in:
Matt Batchelder
2026-02-21 13:37:23 -05:00
parent 61a7070b0f
commit 624a5c2d4e
2 changed files with 33 additions and 36 deletions
Download Patch File Download Diff File Expand all files Collapse all files

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

@@ -5081,9 +5081,10 @@ p:last-child { margin-bottom: 0; }
.bd-device__label {
font-size: 10px;
color: rgba(255,255,255,.45);
margin-top: 6px;
margin-bottom: 6px;
letter-spacing: .5px;
text-transform: uppercase;
order: -1;
}
/* ── Tablet (portrait kiosk) ──────────────────────────────── */
@@ -5109,29 +5110,24 @@ p:last-child { margin-bottom: 0; }
}
.bd-device--wall { animation-delay: 0.5s; }
/* ── Monitor on stand ─────────────────────────────────────── */
.bd-device--monitor .bd-device__body {
width: 120px;
height: 80px;
/* ── Interactive tablet on table ───────────────────────────── */
.bd-device--interactive .bd-device__body {
width: 110px;
height: 74px;
border-radius: 6px;
transform: perspective(400px) rotateX(25deg);
transform-origin: bottom center;
}
.bd-stand {
display: flex;
flex-direction: column;
align-items: center;
margin-top: -1px;
.bd-device--interactive .bd-device__screen { border-radius: 3px; }
.bd-table {
width: 130px;
height: 8px;
background: linear-gradient(180deg, #2a2a2a, #1a1a1a);
border-radius: 3px;
margin-top: -2px;
box-shadow: 0 4px 12px rgba(0,0,0,.4);
}
.bd-stand__stem {
width: 6px;
height: 14px;
background: #222;
}
.bd-stand__base {
width: 36px;
height: 5px;
background: #222;
border-radius: 0 0 4px 4px;
}
.bd-device--monitor { animation-delay: 1s; }
.bd-device--interactive { animation-delay: 1s; }
/* ── Boot splash overlay ──────────────────────────────────── */
.bd-splash {
@@ -5144,7 +5140,7 @@ p:last-child { margin-bottom: 0; }
animation: bd-splash 8s ease-in-out infinite;
}
.bd-device--wall .bd-splash { animation-delay: 0.5s; }
.bd-device--monitor .bd-splash { animation-delay: 1s; }
.bd-device--interactive .bd-splash { animation-delay: 1s; }
.bd-splash__logo {
width: 28px;
@@ -5159,7 +5155,7 @@ p:last-child { margin-bottom: 0; }
height: 32px;
animation-delay: 0.5s;
}
.bd-device--monitor .bd-splash__logo {
.bd-device--interactive .bd-splash__logo {
animation-delay: 1s;
}
@@ -5175,7 +5171,7 @@ p:last-child { margin-bottom: 0; }
animation: bd-ui-show 8s ease-in-out infinite;
}
.bd-device--wall .bd-ui { animation-delay: 0.5s; }
.bd-device--monitor .bd-ui { animation-delay: 1s; }
.bd-device--interactive .bd-ui { animation-delay: 1s; }
/* Brand header bar */
.bd-ui__header {
@@ -5203,7 +5199,7 @@ p:last-child { margin-bottom: 0; }
animation: bd-bar-grow 8s ease-in-out infinite;
}
.bd-device--wall .bd-ui__brand-bar { animation-delay: 0.5s; }
.bd-device--monitor .bd-ui__brand-bar { animation-delay: 1s; }
.bd-device--interactive .bd-ui__brand-bar { animation-delay: 1s; }
/* Content area */
.bd-ui__content {
@@ -5215,7 +5211,7 @@ p:last-child { margin-bottom: 0; }
animation: bd-content-slide 8s ease-in-out infinite;
}
.bd-device--wall .bd-ui__content { animation-delay: 0.5s; }
.bd-device--monitor .bd-ui__content { animation-delay: 1s; }
.bd-device--interactive .bd-ui__content { animation-delay: 1s; }
.bd-ui__block {
border-radius: 2px;
@@ -5300,15 +5296,16 @@ p:last-child { margin-bottom: 0; }
.bd-stage { max-width: 360px; gap: 12px; }
.bd-device--tablet .bd-device__body { width: 64px; height: 96px; }
.bd-device--wall .bd-device__body { width: 148px; height: 88px; }
.bd-device--monitor .bd-device__body { width: 96px; height: 64px; }
.bd-device--interactive .bd-device__body { width: 88px; height: 58px; }
.bd-table { width: 104px; }
}
@media (max-width: 640px) {
.bd-stage { max-width: 300px; gap: 8px; }
.bd-device--tablet .bd-device__body { width: 52px; height: 78px; }
.bd-device--wall .bd-device__body { width: 120px; height: 72px; }
.bd-device--monitor .bd-device__body { width: 78px; height: 52px; }
.bd-device--interactive .bd-device__body { width: 72px; height: 48px; }
.bd-device__label { font-size: 8px; }
.bd-stand__base { width: 28px; }
.bd-table { width: 86px; height: 6px; }
}
/* ── Reduced-motion overrides ───────────────────────────────── */

12
theme/blocks/index.php
View File

@@ -1654,6 +1654,7 @@ function oribi_render_platform_row( $a ) {
/* ── Screen 1: Tablet (portrait kiosk) ── */
$bd .= '<div class="bd-device bd-device--tablet">';
$bd .= '<span class="bd-device__label">Kiosk</span>';
$bd .= '<div class="bd-device__body">';
$bd .= '<div class="bd-device__screen">';
$bd .= '<div class="bd-splash">';
@@ -1669,11 +1670,11 @@ function oribi_render_platform_row( $a ) {
$bd .= '</div>';
$bd .= '</div>';
$bd .= '</div>';
$bd .= '<span class="bd-device__label">Kiosk</span>';
$bd .= '</div>';
/* ── Screen 2: Wide wall-mount (landscape) ── */
$bd .= '<div class="bd-device bd-device--wall">';
$bd .= '<span class="bd-device__label">Wall Display</span>';
$bd .= '<div class="bd-device__body">';
$bd .= '<div class="bd-device__screen">';
$bd .= '<div class="bd-splash">';
@@ -1690,11 +1691,11 @@ function oribi_render_platform_row( $a ) {
$bd .= '</div>';
$bd .= '</div>';
$bd .= '<div class="bd-mount"></div>';
$bd .= '<span class="bd-device__label">Wall Display</span>';
$bd .= '</div>';
/* ── Screen 3: Monitor on stand ── */
$bd .= '<div class="bd-device bd-device--monitor">';
/* ── Screen 3: Interactive tablet on table ── */
$bd .= '<div class="bd-device bd-device--interactive">';
$bd .= '<span class="bd-device__label">Interactive</span>';
$bd .= '<div class="bd-device__body">';
$bd .= '<div class="bd-device__screen">';
$bd .= '<div class="bd-splash">';
@@ -1710,8 +1711,7 @@ function oribi_render_platform_row( $a ) {
$bd .= '</div>';
$bd .= '</div>';
$bd .= '</div>';
$bd .= '<div class="bd-stand"><div class="bd-stand__stem"></div><div class="bd-stand__base"></div></div>';
$bd .= '<span class="bd-device__label">Reception</span>';
$bd .= '<div class="bd-table"></div>';
$bd .= '</div>';
$bd .= '</div>'; /* bd-stage */