dashboard: 3-column layout — swarm / 0per4t0r 1n / m3ss4g3s
regroups the 7 stacked sections into three semantic columns backed by a CSS grid (single column under 1400px, 3 columns above). column headers are sticky so vertical scrolling inside a column doesn't lose context. - SW4RM (left, slightly wider): containers + kept-state + spawn-agent form + meta-input update form. all swarm-mutating operator knobs live here. - 0PER4T0R 1N (middle): mind-questions + pending approvals. the two things waiting on operator action. - M3SS4G3S (right): operator-inbox + msg-flow tail + the @-mention compose box. broker traffic in one place. spawn form moves out of renderApprovals into static HTML under sw4rm; renderApprovals no longer injects it. cosmetic: per-section h2/divider replaced with smaller cyan sub-heads + a dashed underline so each column reads as one cohesive unit instead of seven competing banners. body max-width grows 70em → 110em to actually use the new horizontal real estate.
This commit is contained in:
parent
266c2c7a77
commit
74ba8a63e1
3 changed files with 112 additions and 60 deletions
|
|
@ -18,11 +18,50 @@ body {
|
|||
background: var(--bg);
|
||||
color: var(--fg);
|
||||
font-family: "JetBrains Mono", "Fira Code", "Cascadia Code", "Source Code Pro", monospace;
|
||||
max-width: 70em;
|
||||
max-width: 110em;
|
||||
margin: 1.5em auto;
|
||||
padding: 0 1.5em;
|
||||
line-height: 1.6;
|
||||
}
|
||||
.columns {
|
||||
display: grid;
|
||||
gap: 1.4em;
|
||||
margin-top: 1em;
|
||||
}
|
||||
@media (min-width: 1400px) {
|
||||
.columns {
|
||||
grid-template-columns: 1.1fr 1fr 1fr;
|
||||
align-items: start;
|
||||
}
|
||||
}
|
||||
.dash-col {
|
||||
min-width: 0; /* lets grid children shrink instead of overflowing */
|
||||
}
|
||||
.col-head {
|
||||
position: sticky;
|
||||
top: 0;
|
||||
z-index: 5;
|
||||
background: rgba(30, 30, 46, 0.92);
|
||||
-webkit-backdrop-filter: blur(6px);
|
||||
backdrop-filter: blur(6px);
|
||||
margin: 0 0 0.6em;
|
||||
padding: 0.3em 0.5em;
|
||||
font-size: 1em;
|
||||
border-bottom: 1px solid var(--purple-dim);
|
||||
}
|
||||
.sub-head {
|
||||
color: var(--cyan);
|
||||
font-size: 0.85em;
|
||||
letter-spacing: 0.12em;
|
||||
text-transform: uppercase;
|
||||
margin: 1.6em 0 0.4em;
|
||||
padding-bottom: 0.15em;
|
||||
border-bottom: 1px dashed var(--border, var(--purple-dim));
|
||||
text-shadow: 0 0 6px rgba(137, 220, 235, 0.35);
|
||||
}
|
||||
.dash-col .sub-head:first-of-type {
|
||||
margin-top: 0.4em;
|
||||
}
|
||||
.banner {
|
||||
text-align: center;
|
||||
margin: 0 0 1em 0;
|
||||
|
|
@ -52,7 +91,7 @@ h1, h2 {
|
|||
color: var(--purple);
|
||||
text-transform: uppercase;
|
||||
letter-spacing: 0.15em;
|
||||
margin-top: 2em;
|
||||
margin-top: 1em;
|
||||
text-shadow: 0 0 8px rgba(203, 166, 247, 0.4);
|
||||
}
|
||||
.divider {
|
||||
|
|
|
|||
Loading…
Add table
Add a link
Reference in a new issue