From a0f8aeb791ec0cdaeb34493ca289c59ff3e82f5d Mon Sep 17 00:00:00 2001
From: Disco DeDisco <adamcraighamilton@gmail.com>
Date: Tue, 24 Mar 2026 17:31:51 -0400
Subject: [PATCH] similar pseudo-applet styling added to _scroll.html

---
 src/static_src/scss/_applets.scss             | 97 ++++++++++---------
 src/static_src/scss/_billboard.scss           |  3 +-
 .../_applet-billboard-my-contacts.html        |  2 +-
 3 files changed, 53 insertions(+), 49 deletions(-)

diff --git a/src/static_src/scss/_applets.scss b/src/static_src/scss/_applets.scss
index a7aee06..af33fc2 100644
--- a/src/static_src/scss/_applets.scss
+++ b/src/static_src/scss/_applets.scss
@@ -133,6 +133,56 @@
     }
 }
 
+// ── Applet box visual shell (reusable outside the grid) ────
+%applet-box {
+    border:
+        0.2rem solid rgba(var(--secUser), 0.5),
+    ;
+    box-shadow:
+        inset -0.125rem -0.125rem 0 rgba(var(--ninUser), 0.125),
+        inset 0.125rem 0.125rem 0 rgba(0, 0, 0, 0.8)
+    ;
+    background-color: rgba(0, 0, 0, 0.125);
+    border-radius: 0.75rem;
+    position: relative;
+    padding: 0.75rem 0.75rem 0.75rem 2.5rem;
+    overflow: hidden;
+    min-width: 0;
+
+    > h2 {
+        position: absolute;
+        top: 0;
+        bottom: 0;
+        left: 0;
+        width: 2rem;
+        display: flex;
+        align-items: center;
+        justify-content: center;
+        writing-mode: vertical-rl;
+        transform: rotate(180deg);
+        font-size: 1rem;
+        letter-spacing: 0.2em;
+        text-transform: uppercase;
+        margin: 0;
+        padding-right: 0.2rem;
+        color: rgba(var(--secUser), 1);
+        text-shadow:
+            1px 1px 0 rgba(255, 255, 255, 0.06),
+            -0.06rem -0.06rem 0 rgba(0, 0, 0, 0.25)
+        ;
+        background-color: rgba(0, 0, 0, 0.125);
+        box-shadow:
+            0 0 0.5rem rgba(var(--priUser), 0.5),
+            0.12rem 0.12rem 0.5rem rgba(0, 0, 0, 0.5),
+        ;
+        white-space: nowrap;
+        overflow: hidden;
+        z-index: 1;
+
+        a { color: rgba(var(--terUser), 1); text-decoration: none; }
+    }
+}
+
 // ── Applets grid (shared across all boards) ────────────────
 %applets-grid {
     container-type: inline-size;
@@ -155,52 +205,7 @@
     );
 
     section {
-        border:
-            0.2rem solid rgba(var(--secUser), 0.5),
-        ;
-        box-shadow:
-            inset -0.125rem -0.125rem 0 rgba(var(--ninUser), 0.125),
-            inset 0.125rem 0.125rem 0 rgba(0, 0, 0, 0.8)
-        ;
-        background-color: rgba(0, 0, 0, 0.125);
-        border-radius: 0.75rem;
-        position: relative;
-        padding: 0.75rem 0.75rem 0.75rem 2.5rem;
-        overflow: hidden;
-        min-width: 0;
-
-        > h2 {
-            position: absolute;
-            top: 0;
-            bottom: 0;
-            left: 0;
-            width: 2rem;
-            display: flex;
-            align-items: center;
-            justify-content: center;
-            writing-mode: vertical-rl;
-            transform: rotate(180deg);
-            font-size: 1rem;
-            letter-spacing: 0.2em;
-            text-transform: uppercase;
-            margin: 0;
-            padding-right: 0.2rem;
-            color: rgba(var(--secUser), 1);
-            text-shadow:
-                1px 1px 0 rgba(255, 255, 255, 0.06),
-                -0.06rem -0.06rem 0 rgba(0, 0, 0, 0.25)
-            ;
-            background-color: rgba(0, 0, 0, 0.125);
-            box-shadow:
-                0 0 0.5rem rgba(var(--priUser), 0.5),
-                0.12rem 0.12rem 0.5rem rgba(0, 0, 0, 0.5),
-            ;
-            white-space: nowrap;
-            overflow: hidden;
-            z-index: 1;
-
-            a { color: rgba(var(--terUser), 1); text-decoration: none; }
-        }
+        @extend %applet-box;
         grid-column: span var(--applet-cols, 12);
         grid-row: span var(--applet-rows, 3);
 
diff --git a/src/static_src/scss/_billboard.scss b/src/static_src/scss/_billboard.scss
index 1f3835b..c004b49 100644
--- a/src/static_src/scss/_billboard.scss
+++ b/src/static_src/scss/_billboard.scss
@@ -47,12 +47,11 @@ body.page-billscroll {
 
     // The single scroll applet stretches to fill the remaining aperture
     .applet-billboard-scroll {
+        @extend %applet-box;
         flex: 1;
         min-height: 0;
         display: flex;
         flex-direction: column;
-        // Override grid-row span — this applet fills height via flex, not grid rows
-        grid-row: unset;
 
         #id_drama_scroll {
             flex: 1;
diff --git a/src/templates/apps/billboard/_partials/_applet-billboard-my-contacts.html b/src/templates/apps/billboard/_partials/_applet-billboard-my-contacts.html
index d277a2d..c8a2564 100644
--- a/src/templates/apps/billboard/_partials/_applet-billboard-my-contacts.html
+++ b/src/templates/apps/billboard/_partials/_applet-billboard-my-contacts.html
@@ -3,5 +3,5 @@
     style="--applet-cols: {{ entry.applet.grid_cols }}; --applet-rows: {{ entry.applet.grid_rows }};"
 >
     <h2>Contacts</h2>
-    <p><small>Coming soon.</small></p>
+    <p><small>[Feature forthcoming]</small></p>
 </section>