sam/compass_teams_nhs
1
0
Fork 0
Code Issues Pull Requests Actions Packages Projects Releases Wiki Activity
Files
d7d529eb0f94eabfce0b82df253446e131851f04
compass_teams_nhs/internal/web/static/app.css
Sam Rolfe 7b98e487c0 Phase 1: Compass/NHS skeleton (Go, SQLite, session login, Docker, Caddy) 
Phase 1 of AGENTS.md §11: the app runs on .13 in its own container on port
8792, behind Caddy at school.lab.audasmedia.com.au, with its own session login
and GET /health.

- Go service (Go 1.25, modernc SQLite, no cgo) with its own image.
- SQLite schema per AGENTS.md §7: children, items, scans, notifications,
  session (internal/store/migrations/001_init.sql).
- Separate session login (signed cookie, CSRF double-submit), not SSO.
- HTMX server-rendered shell using the Family Home Lab tokens.css: canvas
  #f6f5f4, action blue #0075de, Inter, 8px grid, hairline borders, pill CTAs,
  dark mode, phone-friendly.
- Fail loudly (FR-12): a missing or failed scan shows as an explicit warning or
  error banner, never as an empty day.
- Dockerfile + docker-compose.yml (own container, own port 8792; uses
  network_mode bridge because .13 has no free default Docker address pool).
- Caddy snippet for .35 in deploy/caddy/, deployment notes, and
  deploy/verify-phase1.sh.

No school scan in this phase; the Compass login and fetch are Phase 2.

Co-Authored-By: Paperclip <noreply@paperclip.ing>
2026-10-15 13:21:20 +11:00

329 lines
9.2 KiB
CSS
Raw Blame History

/* Compass / Teams — Phase 1 UI
Built on the Family Home Lab design tokens (tokens.css).
Rules: canvas-soft app background, white cards, hairlines, one action blue,
pill CTAs, 8px grid, touch targets >= 44px, dark mode from the tokens. */
*, *::before, *::after { box-sizing: border-box; }
html { font-size: 16px; }
body {
margin: 0;
background: var(--canvas-soft);
color: var(--ink-secondary);
font: var(--type-body-md);
-webkit-font-smoothing: antialiased;
min-height: 100dvh;
}
h1, h2, h3 { margin: 0; color: var(--ink); }
a { color: var(--primary); text-decoration: none; }
a:hover { text-decoration: underline; }
/* ---------- Login ---------- */
.login-page {
display: flex;
flex-direction: column;
align-items: center;
justify-content: center;
gap: var(--space-lg);
padding: var(--space-lg);
background:
radial-gradient(1200px 600px at 15% 0%, #2b3d93 0%, transparent 60%),
var(--secondary);
}
.login-band {
width: 100%;
max-width: 960px;
display: grid;
grid-template-columns: 1.1fr 0.9fr;
gap: var(--space-xxl);
align-items: center;
padding: var(--space-xxl) 0;
}
.login-eyebrow {
margin: 0 0 var(--space-sm);
font: var(--type-eyebrow);
text-transform: uppercase;
letter-spacing: 0.14em;
color: rgba(255, 255, 255, 0.72);
}
.login-headline {
margin: 0;
font: var(--type-display-1);
letter-spacing: -1.5px;
color: #ffffff;
}
.login-sub {
margin: var(--space-md) 0 0;
font: var(--type-body-md);
color: rgba(255, 255, 255, 0.78);
}
.auth-card {
background: var(--surface);
border-radius: var(--rounded-lg);
box-shadow: var(--shadow-level-2);
padding: var(--space-xl);
}
.auth-card__title {
font: var(--type-heading-2);
margin-bottom: var(--space-lg);
}
.auth-form { display: grid; gap: var(--space-md); }
.auth-error {
margin: 0 0 var(--space-md);
padding: var(--space-sm) var(--space-md);
border: 1px solid var(--sticker-red);
border-left-width: 3px;
border-radius: var(--rounded-sm);
color: var(--sticker-red);
background: color-mix(in srgb, var(--sticker-red) 8%, var(--surface));
font: var(--type-body-sm);
}
.field { display: grid; gap: var(--space-xs); }
.field__label {
font: var(--type-eyebrow);
text-transform: uppercase;
letter-spacing: 0.08em;
color: var(--ink-muted);
}
.text-input {
width: 100%;
min-height: 44px;
padding: 10px 12px;
font: var(--type-body-md);
color: var(--ink);
background: var(--surface);
border: 1px solid #dddddd;
border-radius: var(--rounded-xs);
}
[data-theme="dark"] .text-input { border-color: var(--hairline); }
.text-input:focus {
outline: none;
border-color: var(--primary);
box-shadow: var(--shadow-level-1), 0 0 0 3px color-mix(in srgb, var(--primary) 25%, transparent);
}
.login-foot {
font: var(--type-caption);
color: rgba(255, 255, 255, 0.55);
}
/* ---------- Buttons ---------- */
.button-primary,
.button-utility {
display: inline-flex;
align-items: center;
justify-content: center;
min-height: 44px;
padding: 10px 20px;
font: var(--type-button);
cursor: pointer;
transition: background 120ms ease, transform 80ms ease, box-shadow 120ms ease;
}
.button-primary {
border: 0;
border-radius: var(--rounded-full);
background: var(--primary);
color: var(--on-primary);
}
.button-primary:active { background: var(--primary-active); transform: scale(0.97); }
.button-primary:focus-visible {
outline: 3px solid color-mix(in srgb, var(--primary) 35%, transparent);
outline-offset: 2px;
}
.button-utility {
border: 1px solid var(--hairline);
border-radius: var(--rounded-md);
background: var(--surface);
color: var(--ink);
padding: 8px 14px;
}
.button-utility:hover { box-shadow: var(--shadow-level-1); }
/* ---------- App shell ---------- */
.app { display: flex; flex-direction: column; min-height: 100dvh; }
.nav-bar {
position: sticky;
top: 0;
z-index: 10;
display: flex;
align-items: center;
justify-content: space-between;
gap: var(--space-md);
padding: var(--space-sm) var(--space-lg);
background: var(--surface);
border-bottom: 1px solid var(--hairline);
}
.nav-bar__brand {
display: inline-flex;
align-items: center;
gap: var(--space-xs);
color: var(--ink);
font: var(--type-title);
}
.nav-bar__brand:hover { text-decoration: none; }
.nav-bar__mark {
width: 12px; height: 12px; border-radius: var(--rounded-full);
background: var(--primary);
box-shadow: 0 0 0 4px color-mix(in srgb, var(--primary) 18%, transparent);
}
.nav-bar__right { display: flex; align-items: center; gap: var(--space-md); }
.nav-bar__user { font: var(--type-body-sm); color: var(--ink-muted); }
.nav-bar__logout { margin: 0; }
.container {
width: 100%;
max-width: var(--container-max);
margin: 0 auto;
padding: var(--space-xxl) var(--space-lg);
display: grid;
gap: var(--space-xxl);
flex: 1;
}
.page-head { display: grid; gap: var(--space-xs); }
.heading-1 { font: var(--type-heading-1); letter-spacing: -0.8px; }
.heading-2 { font: var(--type-heading-2); }
.page-head__sub { margin: 0; color: var(--ink-muted); max-width: 62ch; }
.section { display: grid; gap: var(--space-md); }
.section__head {
display: flex;
align-items: center;
justify-content: space-between;
gap: var(--space-sm);
}
.category-pill {
display: inline-flex;
align-items: center;
gap: var(--space-xxs);
padding: 4px 10px;
border-radius: var(--rounded-full);
background: var(--surface-2);
color: var(--ink-muted);
font: var(--type-eyebrow);
text-transform: uppercase;
letter-spacing: 0.08em;
}
.dot { width: 7px; height: 7px; border-radius: var(--rounded-full); background: var(--ink-faint); }
.dot--faint { background: var(--ink-faint); }
/* ---------- Flash ---------- */
.flash {
margin: 0;
padding: var(--space-sm) var(--space-md);
border-radius: var(--rounded-md);
border: 1px solid var(--hairline);
font: var(--type-body-sm);
}
.flash--error {
border-color: var(--sticker-red);
border-left-width: 3px;
color: var(--sticker-red);
background: color-mix(in srgb, var(--sticker-red) 8%, var(--surface));
}
/* ---------- Scan status (FR-12: fail loudly) ---------- */
.scan {
display: grid;
gap: var(--space-xs);
padding: var(--space-md) var(--space-lg);
border-radius: var(--rounded-lg);
border: 1px solid var(--hairline);
border-left-width: 4px;
background: var(--surface);
box-shadow: var(--shadow-level-1);
}
.scan__head { display: flex; align-items: center; justify-content: space-between; gap: var(--space-sm); }
.scan__pill { background: var(--surface-2); color: var(--ink-muted); }
.scan__message { margin: 0; font: var(--type-body-md); color: var(--ink-secondary); }
.scan__meta { margin: 0; font: var(--type-caption); color: var(--ink-muted); }
.scan--ok { border-left-color: var(--sticker-green); }
.scan--ok .scan__pill { background: color-mix(in srgb, var(--sticker-green) 16%, var(--surface)); color: #0f7a28; }
.scan--warn { border-left-color: var(--sticker-orange); background: color-mix(in srgb, var(--sticker-orange) 5%, var(--surface)); }
.scan--warn .scan__pill { background: color-mix(in srgb, var(--sticker-orange) 16%, var(--surface)); color: var(--sticker-orange-deep); }
.scan--error { border-left-color: var(--sticker-red); background: color-mix(in srgb, var(--sticker-red) 6%, var(--surface)); }
.scan--error .scan__pill { background: color-mix(in srgb, var(--sticker-red) 16%, var(--surface)); color: var(--sticker-red); }
.scan--error .scan__message { color: var(--sticker-red); font-weight: 600; }
/* ---------- Children ---------- */
.child-list {
list-style: none;
margin: 0;
padding: 0;
display: grid;
grid-template-columns: repeat(auto-fit, minmax(260px, 1fr));
gap: var(--space-md);
}
.child-card {
display: grid;
gap: var(--space-xxs);
padding: var(--space-md) var(--space-lg);
background: var(--surface);
border: 1px solid var(--hairline);
border-radius: var(--rounded-lg);
box-shadow: var(--shadow-level-1);
}
.child-card__name { margin: 0; font: var(--type-title); color: var(--ink); }
.child-card__meta { margin: 0; font: var(--type-caption); color: var(--ink-muted); }
.child-card__body { margin: var(--space-xs) 0 0; font: var(--type-body-sm); color: var(--ink-muted); }
.empty-state {
display: grid;
gap: var(--space-xs);
padding: var(--space-xl);
text-align: center;
background: var(--surface);
border: 1px dashed var(--hairline);
border-radius: var(--rounded-lg);
}
.empty-state__title { margin: 0; font: var(--type-title); color: var(--ink); }
.empty-state__body { margin: 0; font: var(--type-body-sm); color: var(--ink-muted); }
/* ---------- Footer ---------- */
.app-foot {
display: flex;
flex-wrap: wrap;
align-items: center;
gap: var(--space-xs);
padding: var(--space-md) var(--space-lg);
border-top: 1px solid var(--hairline);
background: var(--surface);
font: var(--type-caption);
color: var(--ink-muted);
}
.app-foot__sep { color: var(--ink-faint); }
/* ---------- Responsive ---------- */
@media (max-width: 760px) {
.login-band { grid-template-columns: 1fr; gap: var(--space-xl); text-align: left; }
.login-headline { font: var(--type-heading-1); letter-spacing: -0.8px; }
.container { padding: var(--space-lg) var(--space-md); gap: var(--space-xl); }
.nav-bar { padding: var(--space-sm) var(--space-md); }
.nav-bar__user { display: none; }
.section__head { flex-wrap: wrap; }
}
Reference in New Issue View Git Blame Copy Permalink