Skip to content

Fix: keep Screenly badge in the rail (avoid QR corner collision) #18

New issue

Have a question about this project? Sign up for a free GitHub account to open an issue and contact its maintainers and the community.

Sign up for GitHub

By clicking “Sign up for GitHub”, you agree to our terms of service and privacy statement. We’ll occasionally send you account related emails.

Already on GitHub? Sign in to your account

Merged
vpetersson merged 1 commit into from
Jul 13, 2026
Merged

Fix: keep Screenly badge in the rail (avoid QR corner collision) #18

Show file tree
Hide file tree
Changes from all commits
Commits
Show all changes
1 commit
Select commit
File filter

Filter by extension

Filter by extension
Conversations
Failed to load comments.
Loading
Jump to
Jump to file
Failed to load files.
Loading
Diff view
Diff view
26 changes: 22 additions & 4 deletions assets/static/styles/main.css
View file
Open in desktop
Original file line number Diff line number Diff line change
Expand Up @@ -10,10 +10,11 @@
orientations; the per-item fit is finished in main.ts.
========================================================================= */

/* Webfonts (@font-face) and the standardized footer badge (.brand) come from
@screenly-labs/signage-kit — build.ts prepends styles/fonts.css + styles/brand.css
to this file before down-leveling. This file keeps the app's own tokens, reset,
fluid root, and "The Wire" component styles. */
/* Webfonts (@font-face) come from @screenly-labs/signage-kit — build.ts prepends
styles/fonts.css to this file before down-leveling. The Screenly badge stays in
the rail (see .brand below), not the kit's fixed corner badge, because a QR
lockup owns the bottom-right corner here. This file keeps the app's own tokens,
reset, fluid root, and "The Wire" component styles. */

:root {
--font-display: "Bricolage Grotesque", "Hanken Grotesk", system-ui, sans-serif;
Expand Down Expand Up @@ -121,6 +122,23 @@ body {
font-weight: 700;
white-space: nowrap;
}
/* Screenly badge — carried in the rail (not the kit's fixed corner badge): a QR
"scan to read" lockup owns the bottom-right corner here. Kept as `.brand` so
the shared removeScreenlyBranding() hides it on Screenly players. */
.brand {
flex: none;
display: flex;
align-items: center;
padding-inline-start: clamp(0.7rem, 2vmin, 1.6rem);
margin-inline-start: clamp(0.7rem, 2vmin, 1.6rem);
border-inline-start: 1px solid var(--hairline);
opacity: 0.85;
}
.brand img {
block-size: clamp(0.7rem, 1vmin + 0.5rem, 1.4rem);
inline-size: auto;
display: block;
}
/* Transmission line: a track on the rail's bottom edge that fills amber over
each rotation interval (set in motion below). */
.rail__line {
Expand Down
10 changes: 6 additions & 4 deletions build.ts
View file
Open in desktop
Original file line number Diff line number Diff line change
Expand Up @@ -24,10 +24,12 @@ import { run as syncFonts } from './sync-fonts'
const clientOnly = process.argv.includes('--client')

// Shared chrome CSS from @screenly-labs/signage-kit — the canonical @font-face
// set and the standardized fixed footer badge. Prepended to this app's raw
// main.css at build time (a raw-CSS Worker can't resolve a bare `@import`), so
// the shared rules land before the app's, which override where they overlap.
const sharedCss = ['fonts.css', 'brand.css']
// set. Prepended to this app's raw main.css at build time (a raw-CSS Worker
// can't resolve a bare `@import`). NOT the kit's brand.css: this app carries the
// Screenly badge in its top rail, and a QR "scan to read" lockup already sits in
// the bottom-right corner, so the kit's fixed corner badge would overlap it. The
// badge stays in the rail (`.brand`, below); only the removal logic is shared.
const sharedCss = ['fonts.css']
.map((f) => readFileSync(Bun.resolveSync(`@screenly-labs/signage-kit/styles/${f}`, import.meta.dir), 'utf8'))
.join('\n')

Expand Down
Loading