discoman/python-tdd
1
0
Fork 0
Code Issues Pull Requests Actions Packages Projects Releases Wiki Activity

similar pseudo-applet styling added to _scroll.html

Browse Source
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
Download Patch File Download Diff File Expand all files Collapse all files

97
src/static_src/scss/_applets.scss
View File

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

3
src/static_src/scss/_billboard.scss
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;

2
src/templates/apps/billboard/_partials/_applet-billboard-my-contacts.html
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>