feat: scale the shell to the room's television

A 32" panel a few feet from the children and a 65" set across a hall
want the same design at different sizes. UI_SCALE in device.conf now
sets that, and nobody has to edit CSS or source to tune a room.

The stylesheet and the notification config become templates carrying
measurement tokens. classroom-dock resolves the stylesheet in memory at
startup; classroom-notifications resolves the notification config into
the session's runtime directory and execs mako on it, so the process is
still just mako and everything that looks for it by name still finds it.
Neither template is rewritten on disk, so an update cannot lose a room's
setting and a room cannot drift from the packaged design.

Dock height and the reserved strip, corner radii, padding, button size,
spacing, every icon, the clock and its inset, and the notification
geometry all follow the scale. Colours, translucency and the hairline
borders do not: those are the design, not the size.

At UI_SCALE=1.0 the rendered stylesheet is byte-identical to the one the
shell used before any of this existed, which is the property worth
keeping. Values outside 0.8 to 1.5 are clamped and anything that is not
a number falls back to 1.0, so a typo in device.conf cannot produce an
unusable classroom.

Device configuration moves into a shared module, since the dock and the
notification daemon now have to agree about what a setting means.

Co-Authored-By: Claude Opus 5 <[email protected]>
This commit is contained in:
ekklesia
2026-09-04 21:33:09 -05:00
co-authored by Claude Opus 5
parent 02094a6931
commit 428eb27a74
10 changed files with 352 additions and 77 deletions
@@ -1,3 +1,11 @@
/* Ekklesia Classroom dock
*
* A template, not plain CSS. classroom-dock substitutes the bracketed
* measurements at startup from UI_SCALE in device.conf, so a room can
* be tuned for its TV without anyone editing this file. At UI_SCALE=1.0
* every token resolves to the value it had before scaling existed.
*/
window#classroom-dock,
window#classroom-clock {
background-color: transparent;
@@ -12,9 +20,9 @@ window#classroom-clock {
background-color: rgba(34, 38, 50, 0.62);
border: 1px solid rgba(255, 255, 255, 0.08);
border-radius: 24px;
border-radius: @dock-radius@px;
padding: 8px 10px;
padding: @dock-padding-v@px @dock-padding-h@px;
/* Important: no shadow here.
GTK was clipping it against the rectangular window edge. */
@@ -28,13 +36,13 @@ button.dock-button {
background-color: rgba(255, 255, 255, 0.05);
border: none;
border-radius: 16px;
border-radius: @button-radius@px;
padding: 6px;
padding: @button-padding@px;
margin: 0;
min-width: 44px;
min-height: 44px;
min-width: @button-size@px;
min-height: @button-size@px;
box-shadow: none;
outline: none;
@@ -74,11 +82,11 @@ button.dock-button image {
background-color: rgba(34, 38, 50, 0.62);
border: 1px solid rgba(255, 255, 255, 0.08);
border-radius: 16px;
border-radius: @clock-radius@px;
padding: 7px 12px;
padding: @clock-padding-v@px @clock-padding-h@px;
font-size: 17px;
font-size: @clock-font@px;
font-weight: 600;
box-shadow: none;