similar pseudo-applet styling added to _scroll.html

This commit is contained in:
Disco DeDisco
2026-03-24 17:31:51 -04:00
parent 2ca4e9d39f
commit a0f8aeb791
3 changed files with 53 additions and 49 deletions

View File

@@ -133,28 +133,8 @@
}
}
// ── Applets grid (shared across all boards) ────────────────
%applets-grid {
container-type: inline-size;
--grid-gap: 0.5rem;
flex: 1;
overflow-y: auto;
overflow-x: hidden;
display: grid;
grid-template-columns: repeat(12, 1fr);
grid-auto-rows: 3rem;
gap: var(--grid-gap);
padding: 0.75rem;
-webkit-overflow-scrolling: touch;
mask-image: linear-gradient(
to bottom,
transparent 0%,
black 2%,
black 99%,
transparent 100%
);
section {
// ── Applet box visual shell (reusable outside the grid) ────
%applet-box {
border:
0.2rem solid rgba(var(--secUser), 0.5),
;
@@ -201,6 +181,31 @@
a { color: rgba(var(--terUser), 1); text-decoration: none; }
}
}
// ── Applets grid (shared across all boards) ────────────────
%applets-grid {
container-type: inline-size;
--grid-gap: 0.5rem;
flex: 1;
overflow-y: auto;
overflow-x: hidden;
display: grid;
grid-template-columns: repeat(12, 1fr);
grid-auto-rows: 3rem;
gap: var(--grid-gap);
padding: 0.75rem;
-webkit-overflow-scrolling: touch;
mask-image: linear-gradient(
to bottom,
transparent 0%,
black 2%,
black 99%,
transparent 100%
);
section {
@extend %applet-box;
grid-column: span var(--applet-cols, 12);
grid-row: span var(--applet-rows, 3);

View File

@@ -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;

View File

@@ -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>