mitchell/hamlab
1
0
Fork 0
Code Issues Pull Requests Packages Projects Releases 14 Wiki Activity

Login: no title under the logo — the logo has the name (it is the image's alt text now)

Browse Source 
Co-Authored-By: Claude Fable 5.1 <noreply@anthropic.com>
This commit is contained in:
Mitchell-Johnson
2026-09-19 19:43:44 -07:00
co-authored by Claude Fable 5.1
parent 3a882e2d84
commit df6c1dcebf
2 changed files with 4 additions and 8 deletions
Download Patch File Download Diff File Expand all files Collapse all files
web/src/Login.tsx
+1 -2
View File
@@ -17,8 +17,7 @@ export default function Login({ onLogin }: { onLogin: () => void }) {
return ( return (
<div className="center"> <div className="center">
<form className="login" onSubmit={submit}> <form className="login" onSubmit={submit}>
<img className="login-logo" src="/icons/logo.png" alt="" width={176} height={176} /> <img className="login-logo" src="/icons/logo.png" alt="Ham Lab" width={176} height={176} />
<h1>Ham Lab</h1>
<input type="password" autoFocus autoComplete="current-password" placeholder="password" <input type="password" autoFocus autoComplete="current-password" placeholder="password"
value={pw} onChange={(e) => setPw(e.target.value)} disabled={busy} /> value={pw} onChange={(e) => setPw(e.target.value)} disabled={busy} />
<button disabled={busy || !pw}>{busy && <Spinner />}{busy ? 'Signing in…' : 'Sign in'}</button> <button disabled={busy || !pw}>{busy && <Spinner />}{busy ? 'Signing in…' : 'Sign in'}</button>
web/src/styles.css
+3 -6
View File
@@ -16,10 +16,7 @@ button { font: inherit; color: inherit; background: none; border: 0; cursor: poi
/* login */ /* login */
.login { display: flex; flex-direction: column; gap: 10px; width: min(320px, 90vw); } .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-logo { width: 176px; height: 176px; align-self: center; margin-bottom: 8px; } /* the artwork brings its own shape: no circular crop */
.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 input { padding: 10px 12px; background: var(--bg2); border: 1px solid var(--border); border-radius: 6px; color: var(--fg); font-size: 16px; } .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, .primary { padding: 10px 12px; background: var(--accent); color: var(--btn-fg); border-radius: 6px; font-weight: 600; }
.login button:disabled { opacity: .5; } .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); } .tprev-term { flex: 1; border-radius: 4px; padding: 4px 6px; font-family: var(--mono); }
/* per-theme flourishes */ /* 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"] .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="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"] 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"] .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="retro"] .tile, [data-theme="retro"] .card, [data-theme="retro"] .box { border-radius: 2px; }
[data-theme="light"] .term-overlay { background: rgba(255,255,255,.6); } [data-theme="light"] .term-overlay { background: rgba(255,255,255,.6); }