similar pseudo-applet styling added to _scroll.html
This commit is contained in:
@@ -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 (shared across all boards) ────────────────
|
||||||
%applets-grid {
|
%applets-grid {
|
||||||
container-type: inline-size;
|
container-type: inline-size;
|
||||||
@@ -155,52 +205,7 @@
|
|||||||
);
|
);
|
||||||
|
|
||||||
section {
|
section {
|
||||||
border:
|
@extend %applet-box;
|
||||||
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; }
|
|
||||||
}
|
|
||||||
grid-column: span var(--applet-cols, 12);
|
grid-column: span var(--applet-cols, 12);
|
||||||
grid-row: span var(--applet-rows, 3);
|
grid-row: span var(--applet-rows, 3);
|
||||||
|
|
||||||
|
|||||||
@@ -47,12 +47,11 @@ body.page-billscroll {
|
|||||||
|
|
||||||
// The single scroll applet stretches to fill the remaining aperture
|
// The single scroll applet stretches to fill the remaining aperture
|
||||||
.applet-billboard-scroll {
|
.applet-billboard-scroll {
|
||||||
|
@extend %applet-box;
|
||||||
flex: 1;
|
flex: 1;
|
||||||
min-height: 0;
|
min-height: 0;
|
||||||
display: flex;
|
display: flex;
|
||||||
flex-direction: column;
|
flex-direction: column;
|
||||||
// Override grid-row span — this applet fills height via flex, not grid rows
|
|
||||||
grid-row: unset;
|
|
||||||
|
|
||||||
#id_drama_scroll {
|
#id_drama_scroll {
|
||||||
flex: 1;
|
flex: 1;
|
||||||
|
|||||||
@@ -3,5 +3,5 @@
|
|||||||
style="--applet-cols: {{ entry.applet.grid_cols }}; --applet-rows: {{ entry.applet.grid_rows }};"
|
style="--applet-cols: {{ entry.applet.grid_cols }}; --applet-rows: {{ entry.applet.grid_rows }};"
|
||||||
>
|
>
|
||||||
<h2>Contacts</h2>
|
<h2>Contacts</h2>
|
||||||
<p><small>Coming soon.</small></p>
|
<p><small>[Feature forthcoming]</small></p>
|
||||||
</section>
|
</section>
|
||||||
|
|||||||
Reference in New Issue
Block a user