| <body> | <ts>`. Mirrors post.html's // `.post-line` grid (`minmax(4rem,auto) 1fr minmax(3rem,auto)`) so the // rightward ts column lines up across post.html, scroll.html, and every // applet list. Title gets the project-wide 35char/32+... truncation via // the `truncate_title` template filter; body is dimmed to 0.6. .applet-list-entry.row-3col { display: grid; grid-template-columns: minmax(4rem, auto) 1fr minmax(3rem, auto); align-items: baseline; gap: 0.5rem; padding-left: 0.5rem; padding-right: 0.5rem; border-radius: 0.25rem; transition: background-color 0.12s ease, color 0.12s ease; .row-title { white-space: nowrap; overflow: hidden; text-overflow: ellipsis; } .row-body { min-width: 0; overflow: hidden; text-overflow: ellipsis; white-space: nowrap; opacity: 0.6; } .row-ts { font-size: 0.75rem; opacity: 0.5; text-align: right; white-space: nowrap; } // Hover (mouse) / click-lock (touch + click persistence) — both states // share the highlight. JS in `apps/applets/row-lock.js` toggles // `.row-locked` on click; `:hover` is pure CSS. Background to --secUser, // title to --quaUser, dimmed body + ts brought to full opacity in // --priUser (the back-of-card colour, readable against the --secUser // fill). &:hover, &.row-locked { background-color: rgba(var(--secUser), 1); .row-title, a.row-title { color: rgba(var(--quiUser), 1); text-shadow: none; } .row-body, .row-ts { color: rgba(var(--priUser), 1); opacity: 1; } } } .applet-list-entry { padding: 0.4rem 0; .bud-name { font-weight: bold; opacity: 0.85; } a { color: rgba(var(--terUser), 1); text-decoration: none; font-weight: bold; transition: text-shadow 0.15s ease; &:hover, &:active { color: rgba(var(--ninUser), 1); text-shadow: 0 0 0.55rem rgba(var(--terUser), 0.7); } } } .applet-list-buffer { flex-shrink: 0; height: 0.5rem; } // In-grid applet sections: flex-column so the .applet-list can flex:1 // and scroll within the applet box. Left-aligned items across the // board (My Games used to centre — symmetrised w. the rest 2026-05-12). #id_applet_my_posts, #id_applet_my_buds, #id_applet_my_scrolls, #id_applet_notes { display: flex; flex-direction: column; .applet-list { flex: 1; padding-top: 0.25rem; } } // ── Shared aperture fill for both billboard pages ────────────────────────── // // Aperture foundation (html/body/.container overflow + flex-column + // .row flex-shrink: 0) now lives universally in _base.scss. Only the // page-specific `.row { margin-bottom: -1rem }` pull (tightening the // h2 row against subsequent applet content) stays here, since wallet // + sky pages deliberately don't carry that pull. %billboard-page-base { flex: 1; min-width: 0; min-height: 0; overflow-y: auto; position: relative; } body.page-billboard, body.page-billscroll, body.page-billpost, body.page-billbuds, body.page-billposts { .row { margin-bottom: -1rem; } } // ── Billboard page (three-applet grid) ───────────────────────────────────── .billboard-page { @extend %billboard-page-base; } // ── Billscroll page (single full-aperture applet) ────────────────────────── .billscroll-page { @extend %billboard-page-base; display: flex; flex-direction: column; padding: 0.75rem; // The single scroll applet stretches to fill the remaining aperture .applet-scroll { @extend %applet-box; flex: 1; min-height: 0; display: flex; flex-direction: column; #id_drama_scroll { flex: 1; min-height: 0; overflow-y: auto; padding-right: 0.75rem; .scroll-buffer { display: flex; justify-content: center; align-items: baseline; padding: 2rem 0 1rem; opacity: 0.4; font-size: 0.8rem; text-transform: uppercase; .scroll-buffer-text { letter-spacing: 0.33em; } .scroll-buffer-dots { display: inline-flex; letter-spacing: 0; span { display: inline-block; width: 0.7em; text-align: center; } } } } } } // ── Dashpost page (bottom-anchored thread + composer) ───────────────────── // Mirrors billscroll's flex-column / overflow-y / scroll-buffer pattern, // with the composer pinned at the bottom (flex-shrink: 0) so the thread // breathes against the viewport bottom and the input stays in reach. .post-page { @extend %billboard-page-base; display: flex; flex-direction: column; padding: 0.75rem; gap: 0.5rem; // Username + title attribution spans — line author column, self/shared // header lines, server-rendered grant prose. --quaUser palette key // unifies them across the page; placed at .post-page scope so it // applies in BOTH .post-header and #id_post_table descendants. .post-attribution { color: rgba(var(--quaUser), 1); } .post-header { flex-shrink: 0; .post-title { margin: 0 0 0.25rem; font-weight: bold; } .post-shared-recipients, .post-shared-self { margin: 0; font-size: 0.85rem; opacity: 0.75; } } #id_post_table { list-style: none; margin: 0; padding: 0 0.75rem 0 0; flex: 1; min-height: 0; overflow-y: auto; display: flex; flex-direction: column; // Bottom-anchor: scroll buffer above the lines pushes them down // until they fill from the bottom; once content exceeds the // aperture, normal scrolling kicks in. justify-content: flex-end; .post-line { display: grid; grid-template-columns: minmax(4rem, auto) 1fr minmax(3rem, auto); align-items: baseline; gap: 0.5rem; padding: 0.25rem 0; .post-line-author { font-weight: bold; color: rgba(var(--quaUser), 1); white-space: nowrap; font-size: 0.85rem; } .post-line-text { min-width: 0; overflow-wrap: anywhere; } .post-line-time { font-size: 0.75rem; opacity: 0.5; text-align: right; white-space: nowrap; } // System-authored Lines (adman) get a subtler typographic key // — the inline `<a class="note-ref">` carries the emphasis. &.post-line--system .post-line-text { font-style: italic; opacity: 0.85; } } .post-line-buffer { flex-shrink: 0; height: 0.25rem; } } .post-line-form { flex-shrink: 0; margin: 0; padding-top: 0.25rem; input.form-control { width: 100%; // Admin-Post readonly input — no response is invited, so the // focus halo softens to --secUser (cooler than the regular // --terUser glow used on user-Post composers). &[readonly]:focus { border-color: rgba(var(--secUser), 0.6); box-shadow: 0 0 0.75rem rgba(var(--secUser), 0.4); } } } } // ── Applet-list page (Billbuds, Billposts) ─────────────────────────────── // Shared shell for pages built around _applet-list-shell.html — vertical // title rotated on the left of an .applet-scroll card + scrollable <ul> // aperture. `--single` hosts one section (My Buds); `--two-up` stacks // two sections in portrait, places them side-by-side in landscape (My // Posts: own + shared). .applet-list-page { @extend %billboard-page-base; display: flex; flex-direction: column; padding: 0.75rem; gap: 0.75rem; .applet-scroll { @extend %applet-box; flex: 1; min-height: 0; display: flex; flex-direction: column; // .applet-list / .applet-list-entry / .applet-list-buffer rules // live at top level (above) so they apply to in-grid applets too. .applet-list { flex: 1; } } // Side-by-side in landscape; stacked in portrait (default). &--two-up { @media (orientation: landscape) { flex-direction: row; .applet-scroll { flex: 1; } } } } // ── Billboard applet placement ───────────────────────────────────────────── // Left column (4-wide): My Scrolls → Contacts → Notes stacked. // Right column (8-wide): Most Recent Scroll spans full height. // Portrait override (container query) restores stacked full-width layout. #id_billboard_applets_container { #id_applet_my_scrolls { grid-column: 1 / span 4; grid-row: 1 / span 3; } #id_applet_my_buds { grid-column: 1 / span 4; grid-row: 4 / span 3; } #id_applet_notes { grid-column: 1 / span 4; grid-row: 7 / span 4; } #id_applet_most_recent_scroll { grid-column: 5 / span 8; grid-row: 1 / span 10; } @container (max-width: 550px) { #id_applet_my_scrolls, #id_applet_my_buds, #id_applet_notes, #id_applet_most_recent_scroll { grid-column: 1 / span 12; grid-row: span var(--applet-rows, 3); } } } // ── Most Recent Scroll applet — scrollable drama feed ───────────────────── #id_applet_most_recent_scroll { display: flex; flex-direction: column; .most-recent-room-link { flex-shrink: 0; margin-bottom: 0.25rem; font-weight: bold; } #id_drama_scroll { flex: 1; min-height: 0; overflow-y: auto; } .most-recent-load-more { display: block; padding-bottom: 0.5rem; font-size: 0.8rem; text-align: center; } } // ── Drama event entries: 90 / 10 column split ───────────────────────────── .drama-event { display: flex; align-items: baseline; .drama-event-body { flex: 0 0 80%; &.struck { text-decoration: line-through; opacity: 0.5; } } .drama-event-time { flex: 0 0 20%; font-size: 0.75rem; opacity: 0.5; text-align: right; } } // My Scrolls now rides the shared `.applet-list` rule above (lifted out of // `.applet-list-page .applet-scroll`). Old `.scroll-list` styling removed.

// ── Shared scrollable applet list (.applet-list) ─────────────────────────── // In-grid applet partials (My Posts, My Buds, My Notes, My Scrolls, My Games) // + the dedicated applet-list pages (billbuds, billposts) all wrap items in a // `

yet.` rows). Centres in any flex-column // parent — the .applet-list above OR a `display: flex; flex-direction: // column` applet section directly (e.g. #id_applet_most_recent_scroll // when no Room has events yet). .applet-list-entry--empty { flex: 1; display: flex; align-items: center; justify-content: center; text-align: center; opacity: 0.6; font-style: italic; margin: 0; } // 3-col applet row — ` | <body> | <ts>`. Mirrors post.html's // `.post-line` grid (`minmax(4rem,auto) 1fr minmax(3rem,auto)`) so the // rightward ts column lines up across post.html, scroll.html, and every // applet list. Title gets the project-wide 35char/32+... truncation via // the `truncate_title` template filter; body is dimmed to 0.6. .applet-list-entry.row-3col { display: grid; grid-template-columns: minmax(4rem, auto) 1fr minmax(3rem, auto); align-items: baseline; gap: 0.5rem; padding-left: 0.5rem; padding-right: 0.5rem; border-radius: 0.25rem; transition: background-color 0.12s ease, color 0.12s ease; .row-title { white-space: nowrap; overflow: hidden; text-overflow: ellipsis; } .row-body { min-width: 0; overflow: hidden; text-overflow: ellipsis; white-space: nowrap; opacity: 0.6; } .row-ts { font-size: 0.75rem; opacity: 0.5; text-align: right; white-space: nowrap; } // Hover (mouse) / click-lock (touch + click persistence) — both states // share the highlight. JS in `apps/applets/row-lock.js` toggles // `.row-locked` on click; `:hover` is pure CSS. Background to --secUser, // title to --quaUser, dimmed body + ts brought to full opacity in // --priUser (the back-of-card colour, readable against the --secUser // fill). &:hover, &.row-locked { background-color: rgba(var(--secUser), 1); .row-title, a.row-title { color: rgba(var(--quiUser), 1); text-shadow: none; } .row-body, .row-ts { color: rgba(var(--priUser), 1); opacity: 1; } } } .applet-list-entry { padding: 0.4rem 0; .bud-name { font-weight: bold; opacity: 0.85; } a { color: rgba(var(--terUser), 1); text-decoration: none; font-weight: bold; transition: text-shadow 0.15s ease; &:hover, &:active { color: rgba(var(--ninUser), 1); text-shadow: 0 0 0.55rem rgba(var(--terUser), 0.7); } } } .applet-list-buffer { flex-shrink: 0; height: 0.5rem; } // In-grid applet sections: flex-column so the .applet-list can flex:1 // and scroll within the applet box. Left-aligned items across the // board (My Games used to centre — symmetrised w. the rest 2026-05-12). #id_applet_my_posts, #id_applet_my_buds, #id_applet_my_scrolls, #id_applet_notes { display: flex; flex-direction: column; .applet-list { flex: 1; padding-top: 0.25rem; } } // ── Shared aperture fill for both billboard pages ────────────────────────── // // Aperture foundation (html/body/.container overflow + flex-column + // .row flex-shrink: 0) now lives universally in _base.scss. Only the // page-specific `.row { margin-bottom: -1rem }` pull (tightening the // h2 row against subsequent applet content) stays here, since wallet // + sky pages deliberately don't carry that pull. %billboard-page-base { flex: 1; min-width: 0; min-height: 0; overflow-y: auto; position: relative; } body.page-billboard, body.page-billscroll, body.page-billpost, body.page-billbuds, body.page-billposts { .row { margin-bottom: -1rem; } } // ── Billboard page (three-applet grid) ───────────────────────────────────── .billboard-page { @extend %billboard-page-base; } // ── Billscroll page (single full-aperture applet) ────────────────────────── .billscroll-page { @extend %billboard-page-base; display: flex; flex-direction: column; padding: 0.75rem; // The single scroll applet stretches to fill the remaining aperture .applet-scroll { @extend %applet-box; flex: 1; min-height: 0; display: flex; flex-direction: column; #id_drama_scroll { flex: 1; min-height: 0; overflow-y: auto; padding-right: 0.75rem; .scroll-buffer { display: flex; justify-content: center; align-items: baseline; padding: 2rem 0 1rem; opacity: 0.4; font-size: 0.8rem; text-transform: uppercase; .scroll-buffer-text { letter-spacing: 0.33em; } .scroll-buffer-dots { display: inline-flex; letter-spacing: 0; span { display: inline-block; width: 0.7em; text-align: center; } } } } } } // ── Dashpost page (bottom-anchored thread + composer) ───────────────────── // Mirrors billscroll's flex-column / overflow-y / scroll-buffer pattern, // with the composer pinned at the bottom (flex-shrink: 0) so the thread // breathes against the viewport bottom and the input stays in reach. .post-page { @extend %billboard-page-base; display: flex; flex-direction: column; padding: 0.75rem; gap: 0.5rem; // Username + title attribution spans — line author column, self/shared // header lines, server-rendered grant prose. --quaUser palette key // unifies them across the page; placed at .post-page scope so it // applies in BOTH .post-header and #id_post_table descendants. .post-attribution { color: rgba(var(--quaUser), 1); } .post-header { flex-shrink: 0; .post-title { margin: 0 0 0.25rem; font-weight: bold; } .post-shared-recipients, .post-shared-self { margin: 0; font-size: 0.85rem; opacity: 0.75; } } #id_post_table { list-style: none; margin: 0; padding: 0 0.75rem 0 0; flex: 1; min-height: 0; overflow-y: auto; display: flex; flex-direction: column; // Bottom-anchor: scroll buffer above the lines pushes them down // until they fill from the bottom; once content exceeds the // aperture, normal scrolling kicks in. justify-content: flex-end; .post-line { display: grid; grid-template-columns: minmax(4rem, auto) 1fr minmax(3rem, auto); align-items: baseline; gap: 0.5rem; padding: 0.25rem 0; .post-line-author { font-weight: bold; color: rgba(var(--quaUser), 1); white-space: nowrap; font-size: 0.85rem; } .post-line-text { min-width: 0; overflow-wrap: anywhere; } .post-line-time { font-size: 0.75rem; opacity: 0.5; text-align: right; white-space: nowrap; } // System-authored Lines (adman) get a subtler typographic key // — the inline `<a class="note-ref">` carries the emphasis. &.post-line--system .post-line-text { font-style: italic; opacity: 0.85; } } .post-line-buffer { flex-shrink: 0; height: 0.25rem; } } .post-line-form { flex-shrink: 0; margin: 0; padding-top: 0.25rem; input.form-control { width: 100%; // Admin-Post readonly input — no response is invited, so the // focus halo softens to --secUser (cooler than the regular // --terUser glow used on user-Post composers). &[readonly]:focus { border-color: rgba(var(--secUser), 0.6); box-shadow: 0 0 0.75rem rgba(var(--secUser), 0.4); } } } } // ── Applet-list page (Billbuds, Billposts) ─────────────────────────────── // Shared shell for pages built around _applet-list-shell.html — vertical // title rotated on the left of an .applet-scroll card + scrollable <ul> // aperture. `--single` hosts one section (My Buds); `--two-up` stacks // two sections in portrait, places them side-by-side in landscape (My // Posts: own + shared). .applet-list-page { @extend %billboard-page-base; display: flex; flex-direction: column; padding: 0.75rem; gap: 0.75rem; .applet-scroll { @extend %applet-box; flex: 1; min-height: 0; display: flex; flex-direction: column; // .applet-list / .applet-list-entry / .applet-list-buffer rules // live at top level (above) so they apply to in-grid applets too. .applet-list { flex: 1; } } // Side-by-side in landscape; stacked in portrait (default). &--two-up { @media (orientation: landscape) { flex-direction: row; .applet-scroll { flex: 1; } } } } // ── Billboard applet placement ───────────────────────────────────────────── // Left column (4-wide): My Scrolls → Contacts → Notes stacked. // Right column (8-wide): Most Recent Scroll spans full height. // Portrait override (container query) restores stacked full-width layout. #id_billboard_applets_container { #id_applet_my_scrolls { grid-column: 1 / span 4; grid-row: 1 / span 3; } #id_applet_my_buds { grid-column: 1 / span 4; grid-row: 4 / span 3; } #id_applet_notes { grid-column: 1 / span 4; grid-row: 7 / span 4; } #id_applet_most_recent_scroll { grid-column: 5 / span 8; grid-row: 1 / span 10; } @container (max-width: 550px) { #id_applet_my_scrolls, #id_applet_my_buds, #id_applet_notes, #id_applet_most_recent_scroll { grid-column: 1 / span 12; grid-row: span var(--applet-rows, 3); } } } // ── Most Recent Scroll applet — scrollable drama feed ───────────────────── #id_applet_most_recent_scroll { display: flex; flex-direction: column; .most-recent-room-link { flex-shrink: 0; margin-bottom: 0.25rem; font-weight: bold; } #id_drama_scroll { flex: 1; min-height: 0; overflow-y: auto; } .most-recent-load-more { display: block; padding-bottom: 0.5rem; font-size: 0.8rem; text-align: center; } } // ── Drama event entries: 90 / 10 column split ───────────────────────────── .drama-event { display: flex; align-items: baseline; .drama-event-body { flex: 0 0 80%; &.struck { text-decoration: line-through; opacity: 0.5; } } .drama-event-time { flex: 0 0 20%; font-size: 0.75rem; opacity: 0.5; text-align: right; } } // My Scrolls now rides the shared `.applet-list` rule above (lifted out of // `.applet-list-page .applet-scroll`). Old `.scroll-list` styling removed.