mixandClaude Fable 5.1
2b69605cf9
Stage 1 of the panel redesign: Overview, an outbound domain and sign-in,
each drawn on a ready-made library instead of hand-tuned CSS — A Pico
("Blank"), B Tabler ("Console"), C Bulma ("Counter") — plus a cover sheet
comparing size, JavaScript, CSP fit and the amount of own CSS.
All three share the new information architecture: navigation grouped by
mail direction (Overview, Outbound, Inbound, Server) with a symmetric Log
and Queue on both sides, one block per DNS record, applications as a
table, rarely changed domain settings behind one click.
Mockups only; internal/web is untouched. Pico and Tabler embed data: SVGs
and would need img-src 'self' data: in the CSP; Bulma does not.
Co-Authored-By: Claude Fable 5.1 <noreply@anthropic.com>
49 lines
1.9 KiB
CSS
49 lines
1.9 KiB
CSS
/* Brand layer shared by the three redesign directions: the panel's own fonts
|
|
and the palette of the mark (docs/assets/selfpost-proof.html). Each
|
|
direction maps these tokens onto its library's variables in its own
|
|
theme.css — nothing here knows about Pico, Tabler or Bulma.
|
|
|
|
Mockup note: no inline style="" and no inline <script> anywhere in this
|
|
folder, so every screen is drawable under the panel's CSP as it stands. */
|
|
|
|
@font-face {
|
|
font-family: "IBM Plex Sans"; font-style: normal; font-weight: 100 700;
|
|
font-display: swap;
|
|
src: url("../../../../internal/web/view/static/ibm-plex-sans.woff2") format("woff2");
|
|
}
|
|
@font-face {
|
|
font-family: "IBM Plex Mono"; font-style: normal; font-weight: 400;
|
|
font-display: swap;
|
|
src: url("../../../../internal/web/view/static/ibm-plex-mono-400.woff2") format("woff2");
|
|
}
|
|
@font-face {
|
|
font-family: "IBM Plex Mono"; font-style: normal; font-weight: 600;
|
|
font-display: swap;
|
|
src: url("../../../../internal/web/view/static/ibm-plex-mono-600.woff2") format("woff2");
|
|
}
|
|
|
|
:root {
|
|
--sp-sans: "IBM Plex Sans", system-ui, -apple-system, "Segoe UI", Roboto, sans-serif;
|
|
--sp-mono: "IBM Plex Mono", ui-monospace, SFMono-Regular, Menlo, monospace;
|
|
|
|
--sp-paper: #f4f2ed; /* page */
|
|
--sp-stamp-paper: #f3ede1; /* the mark's own paper */
|
|
--sp-sheet: #fff;
|
|
--sp-ink: #12161c;
|
|
--sp-ink-2: #2a313b;
|
|
--sp-muted: #6b7684;
|
|
--sp-rule: #dedcd7;
|
|
--sp-rule-strong: #cbc8c1;
|
|
--sp-well: #efede9; /* code / read-only values */
|
|
|
|
--sp-brick: #7a3b2e;
|
|
--sp-brick-dark: #632f25;
|
|
--sp-brick-tint: #ede4de;
|
|
--sp-on-brick: #f6ede2;
|
|
|
|
--sp-ok: #2c6b43; --sp-ok-bg: #edf6ef; --sp-ok-rule: #c2e0cc;
|
|
--sp-warn: #8a5510; --sp-warn-bg: #fbf2e2; --sp-warn-rule: #ebd5a6;
|
|
--sp-fail: #b42318; --sp-fail-bg: #fbedea; --sp-fail-rule: #efccc4;
|
|
--sp-idle: #6b7684; --sp-idle-bg: #efede9; --sp-idle-rule: #dedcd7;
|
|
}
|