diff --git a/web/src/Login.tsx b/web/src/Login.tsx index 5ea67a4..1f8b1b1 100644 --- a/web/src/Login.tsx +++ b/web/src/Login.tsx @@ -17,8 +17,7 @@ export default function Login({ onLogin }: { onLogin: () => void }) { return (
- -

Ham Lab

+ Ham Lab setPw(e.target.value)} disabled={busy} /> diff --git a/web/src/styles.css b/web/src/styles.css index 278fc7c..ab4eb14 100644 --- a/web/src/styles.css +++ b/web/src/styles.css @@ -16,10 +16,7 @@ button { font: inherit; color: inherit; background: none; border: 0; cursor: poi /* login */ .login { display: flex; flex-direction: column; gap: 10px; width: min(320px, 90vw); } -/* the logo carries the wordmark now; the heading stays for screen readers and is not drawn twice */ -.login h1 { position: absolute; width: 1px; height: 1px; overflow: hidden; clip-path: inset(50%); white-space: nowrap; } -.login-logo { width: 176px; height: 176px; align-self: center; margin-bottom: 4px; } /* the artwork brings its own shape: no circular crop */ -.login h1 { text-align: center; margin: 0 0 8px; font-weight: 600; color: var(--accent); letter-spacing: .5px; } +.login-logo { width: 176px; height: 176px; align-self: center; margin-bottom: 8px; } /* the artwork brings its own shape: no circular crop */ .login input { padding: 10px 12px; background: var(--bg2); border: 1px solid var(--border); border-radius: 6px; color: var(--fg); font-size: 16px; } .login button, .primary { padding: 10px 12px; background: var(--accent); color: var(--btn-fg); border-radius: 6px; font-weight: 600; } .login button:disabled { opacity: .5; } @@ -372,11 +369,11 @@ h2.section { margin: 0; font-size: 13px; font-weight: 600; color: var(--muted); .tprev-term { flex: 1; border-radius: 4px; padding: 4px 6px; font-family: var(--mono); } /* per-theme flourishes */ -[data-theme="cyberpunk"] .brand, [data-theme="cyberpunk"] .login h1 { text-shadow: 0 0 8px rgba(255, 43, 214, .7), 0 0 18px rgba(255, 43, 214, .35); } +[data-theme="cyberpunk"] .brand { text-shadow: 0 0 8px rgba(255, 43, 214, .7), 0 0 18px rgba(255, 43, 214, .35); } [data-theme="cyberpunk"] .gicon, [data-theme="cyberpunk"] .box-title { text-shadow: 0 0 6px rgba(0, 229, 255, .6); } [data-theme="cyberpunk"] .group-head.active { box-shadow: inset 3px 0 0 var(--accent), 0 0 12px rgba(255, 43, 214, .25); } [data-theme="retro"] body, [data-theme="retro"] .btn, [data-theme="retro"] input, [data-theme="retro"] select { font-family: var(--mono); } -[data-theme="retro"] .brand, [data-theme="retro"] .login h1 { text-shadow: 0 0 6px rgba(255, 176, 0, .6); letter-spacing: 1px; } +[data-theme="retro"] .brand { text-shadow: 0 0 6px rgba(255, 176, 0, .6); letter-spacing: 1px; } [data-theme="retro"] .app::after { content: ''; position: fixed; inset: 0; pointer-events: none; z-index: 100; background: repeating-linear-gradient(0deg, rgba(0,0,0,0) 0 2px, rgba(0,0,0,.12) 2px 3px); } [data-theme="retro"] .tile, [data-theme="retro"] .card, [data-theme="retro"] .box { border-radius: 2px; } [data-theme="light"] .term-overlay { background: rgba(255,255,255,.6); }