Drop the .com wordmark from the logo
The logo baked "ihasmail.com" into the artwork, which is the wrong identity for a project that is not the hosted instance -- and at the 34px the topbar renders it at, the wordmark was an illegible smudge under a squashed cat. logo.png, icon-512.png, icon-192.png and apple-touch-icon.png are now the mark alone. favicon-64.png, icon-maskable.png and favicon.ico already were, and are untouched. Cropping needed a threshold: both source files carry a band of near-invisible pixels (alpha 1-10) roughly 40px wide down the left side, so a plain getbbox() crop leaves the mark sitting off-centre. The bounding box is taken at alpha > 8 instead. The login page had no name of its own -- it relied on the wordmark -- so it gets one as text, styled like the topbar's. Its screenshot is retaken; the rest still show the old mark in the topbar.
|
Before Width: | Height: | Size: 28 KiB After Width: | Height: | Size: 36 KiB |
|
Before Width: | Height: | Size: 41 KiB After Width: | Height: | Size: 41 KiB |
|
Before Width: | Height: | Size: 230 KiB After Width: | Height: | Size: 242 KiB |
|
Before Width: | Height: | Size: 186 KiB After Width: | Height: | Size: 150 KiB |
@@ -811,7 +811,8 @@ img { max-width: 100%; }
|
||||
.login-card { width: 100%; max-width: 400px; background: var(--bg-elev); border: 1px solid var(--border); border-radius: var(--radius-lg); box-shadow: var(--shadow-2); padding: 32px 28px 24px; animation: rise .25s var(--ease); }
|
||||
.login-card .logo { display: flex; flex-direction: column; align-items: center; gap: 6px; margin-bottom: 20px; }
|
||||
.login-card .logo img { width: 120px; height: auto; }
|
||||
.login-card h1 { margin: 0; font-size: 1.4em; font-weight: 700; }
|
||||
/* The logo is the mark alone, so the name is set here rather than baked in. */
|
||||
.login-card h1 { margin: 0; font-size: 1.6em; font-weight: 800; letter-spacing: -.02em; color: #14b8a6; }
|
||||
.login-card .sub { color: var(--fg-muted); font-size: .92em; margin: 0; }
|
||||
.login-card .tagline { color: var(--fg-muted); font-size: 1em; margin: 4px 0 0; text-align: center; }
|
||||
.login-card .foot a { color: var(--fg-muted); text-decoration: underline; }
|
||||
|
||||
@@ -52,7 +52,8 @@ export function LoginPage() {
|
||||
<div className="login-page">
|
||||
<form className="login-card" onSubmit={submit}>
|
||||
<div className="logo">
|
||||
<img src="/img/logo.png" alt="" width={120} height={113} />
|
||||
<img src="/img/logo.png" alt="" width={120} height={143} />
|
||||
<h1>ihasmail</h1>
|
||||
<p className="tagline">Fast, friendly webmail. Your mailbox, your way.</p>
|
||||
</div>
|
||||
{error && (
|
||||
|
||||